/* Collection v4.2: semantic tokens and shared interaction primitives. */
html:root{--bg:#f5f6f3;--surface:#ffffff;--soft:#f1f4f1;--input:#f8faf7;--ink:#24342f;--muted:#53665e;--icon:#435c51;--line:#dde5df;--control:#a0b2a7;--blue:#286658;--blue-soft:#e8f2ec;--selected:#e8f2ec;--action-fill:#2c6b5b;--chart-1:#387e6a;--chart-2:#849962;--chart-3:#a98b69;--chart-4:#b68a3f;--hover-surface:#edf3ee;--success-bg:#e7f5ef;--green:#08755d;--warning-bg:#fff4df;--amber:#865600;--danger-bg:#fff0f4;--red:#bc2850;--focus-ring:0 0 0 3px #387e6a18;--shadow:0 2px 4px #252c5103,0 8px 28px #252c5105}
html[data-theme=dark]{--bg:#121a17;--surface:#1c2722;--nav:#17221d;--header:#17221d;--soft:#25332b;--input:#16221c;--raised:#2a3a30;--ink:#edf3ed;--muted:#bccdbf;--icon:#d1e0d4;--line:#394d40;--control:#748c79;--blue:#9ed3b8;--blue-soft:#2d4638;--selected:#2d4638;--action-fill:#34755f;--chart-1:#94cbb0;--chart-2:#c0d79c;--chart-3:#d4b790;--chart-4:#e0c27f;--row-alt:#202e26;--hover-surface:#304236;--green:#7de1bc;--success-bg:#1c3a34;--amber:#f5cd8b;--warning-bg:#3a3024;--red:#ffa3bb;--danger-bg:#3d2638;--focus-ring:0 0 0 3px #94cbb018}
body.catalog .button.primary{background:linear-gradient(180deg,#34755f,#285e4e);border-color:#306a58;box-shadow:0 2px 5px #285e4e20,inset 0 1px 0 #fff2}body.catalog .button.primary:hover:not(:disabled){background:linear-gradient(180deg,#306c59,#245342)}body.catalog .brand-icon{background:var(--action-fill)}body.catalog .color-line{background:linear-gradient(90deg,var(--chart-1) 0 45%,var(--chart-2) 45% 70%,var(--chart-4) 70% 85%,var(--red) 85%)}body.catalog .ref-actions{gap:6px}body.catalog .ref-actions button,body.catalog .ds-icon-action{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:0 1px 2px #15213705;color:var(--icon)}body.catalog .ref-actions button:hover,body.catalog .ds-icon-action:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft);box-shadow:0 2px 7px #285e4e12}body.catalog .ref-actions button[data-action=trash],body.catalog .ds-icon-action.danger-action{color:var(--red);background:var(--danger-bg);border-color:transparent}body.catalog .ref-actions button[data-action=trash]:hover{border-color:var(--red)}body.catalog .ref-actions button svg{width:16px;height:16px;stroke-width:1.8}body.catalog .badge{gap:5px;display:inline-flex;align-items:center}body.catalog .badge.outline{background:transparent;border-color:var(--control)}body.catalog .badge.dot:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}body.catalog .badge.pill{border-radius:20px}body.catalog .ds-choice{accent-color:var(--action-fill)}body.catalog input.ds-choice[type=checkbox]{appearance:none;border:1.5px solid var(--control);background:var(--input);border-radius:5px;position:relative;cursor:pointer;transition:background 140ms,border-color 140ms}body.catalog input.ds-choice[type=checkbox]:checked,body.catalog input.ds-choice[type=checkbox]:indeterminate{background:var(--action-fill);border-color:var(--action-fill)}body.catalog input.ds-choice[type=checkbox]:checked:after{content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}body.catalog input.ds-choice[type=checkbox]:indeterminate:after{content:'';position:absolute;inset:7px 3px auto;height:2px;background:white}body.catalog .ds-table input.ds-choice[type=checkbox]:checked:after{content:'';left:5px;top:2px;font-size:0}body.catalog input.ds-choice[type=radio]{appearance:none;border:1.5px solid var(--control);background:var(--input);border-radius:50%;position:relative;cursor:pointer}body.catalog input.ds-choice[type=radio]:checked{border:5px solid var(--action-fill)}body.catalog input.ds-choice:disabled{opacity:.45;cursor:not-allowed}body.catalog input[type=range]{appearance:none;background:var(--line);height:6px;min-height:6px;border:0;border-radius:9px;padding:0;accent-color:var(--action-fill)}body.catalog input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;background:var(--action-fill);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--action-fill);border-radius:50%}
/* Native selects remain the data/validation source, shared popup supplies presentation. */
.ss-wrap{position:relative;display:inline-flex;vertical-align:middle;min-width:120px;max-width:100%;width:100%}body.catalog select.ss-native{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;pointer-events:none!important;z-index:-1;padding:0!important}body.catalog .ss-trigger{width:100%;min-width:0;min-height:36px;height:36px;padding:7px 34px 7px 11px;border:1px solid var(--control);border-radius:7px;background:var(--input);color:var(--ink);font:400 var(--user-font,14px)/20px Roboto,Arial;text-align:left;position:relative;display:flex;gap:6px;align-items:center;box-shadow:inset 0 1px 2px #0d1a3304}body.catalog .ss-trigger:hover{border-color:var(--muted);background:var(--surface)}body.catalog .ss-trigger[aria-expanded=true]{border-color:var(--blue);box-shadow:var(--focus-ring)}body.catalog .ss-trigger:after{content:'';position:absolute;right:13px;top:13px;width:6px;height:6px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}.ss-trigger .ss-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-trigger .ss-placeholder{color:var(--muted)}body.catalog .ss-trigger[aria-invalid=true]{border-color:var(--red);background:var(--danger-bg)}body.catalog .ss-trigger:disabled{border-style:dashed;cursor:not-allowed;opacity:.55}.ss-count{border-radius:4px;background:var(--blue-soft);color:var(--blue);padding:0 5px;font-size:11px;font-weight:500;margin-left:auto}.ref-toolbar .ss-wrap{width:auto;min-width:108px}.ref-toolbar .ss-wrap:has([data-group]){min-width:150px}.ds-chart-controls .ss-wrap{width:160px}.ds-field+.ss-wrap{margin-top:0}.ss-popup{position:fixed;inset:auto;margin:0;padding:7px;width:300px;max-width:calc(100vw - 24px);border:1px solid var(--control);border-radius:11px;background:var(--raised);color:var(--ink);box-shadow:0 12px 45px #0003;z-index:200;max-height:calc(100dvh - 24px);overflow:auto;font:14px Roboto}.ss-popup:popover-open{animation:catalog-enter 140ms var(--ease)}body.catalog .ss-search{width:100%;height:36px;min-height:36px;margin:0 0 6px;padding:7px 10px;background:var(--input);color:var(--ink);border:1px solid var(--control);border-radius:7px;font:14px Roboto}.ss-options{max-height:225px;overflow:auto;list-style:none;margin:0;padding:0}.ss-option{display:flex;align-items:center;gap:9px;min-height:36px;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px}.ss-option[aria-selected=true]{color:var(--blue);background:var(--blue-soft)}.ss-option[data-active=true]{outline:2px solid var(--blue);outline-offset:-2px}.ss-option[aria-disabled=true]{opacity:.4;cursor:not-allowed}.ss-check{margin-left:auto;font-size:14px}.ss-popup .ss-empty{padding:20px 12px;color:var(--muted);font-size:13px}.ss-footer{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line);margin-top:6px;padding:8px 5px 2px}.ss-footer button{background:none;border:0;color:var(--blue);font:500 12px Roboto;padding:5px;cursor:pointer}.ss-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.ss-tag{display:inline-flex;gap:5px;align-items:center;border:1px solid var(--line);background:var(--soft);border-radius:6px;color:var(--ink);font-size:12px;padding:4px 7px}.ss-tag button{border:0;background:none;color:var(--muted);width:18px;height:18px;border-radius:3px;cursor:pointer;padding:0}.ss-tag button:hover{background:var(--danger-bg);color:var(--red)}
/* A single tooltip, shared by table actions and specimen triggers. */
.ds-global-tooltip{position:fixed;inset:auto;margin:0;max-width:260px;padding:8px 11px;border:1px solid var(--line);border-radius:7px;background:var(--ink);color:var(--bg);box-shadow:0 4px 18px #0002;font:12px/18px Roboto;pointer-events:none;z-index:300}.ds-global-tooltip:popover-open{animation:catalog-enter 120ms var(--ease)}
.component-demo{margin-top:20px}.component-note{font-size:12px;color:var(--muted);margin-top:12px}.demo-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px}.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}.demo-grid>div{min-width:0}.selection-card{display:flex;gap:12px;align-items:start;padding:15px;border:1px solid var(--control);border-radius:9px;background:var(--surface);cursor:pointer}.selection-card:has(input:checked){background:var(--selected);border-color:var(--blue)}.selection-card strong{display:block}.selection-card small{display:block;margin-top:5px;color:var(--muted)}.segmented{display:inline-flex;gap:3px;background:var(--soft);border:1px solid var(--line);padding:4px;border-radius:8px}.segmented button{border:0;background:transparent;border-radius:5px;padding:6px 12px;color:var(--muted);font:500 13px Roboto;cursor:pointer}.segmented button[aria-pressed=true]{background:var(--surface);color:var(--blue);box-shadow:0 1px 4px #0001}.button-group{display:inline-flex}.button-group .button{border-radius:0;margin-left:-1px}.button-group .button:first-child{border-radius:7px 0 0 7px;margin-left:0}.button-group .button:last-child{border-radius:0 7px 7px 0}.tab-specimen{margin-top:20px}.tabs-horizontal{display:flex;gap:20px;border-bottom:1px solid var(--line);overflow:auto}.tabs-horizontal button,.tabs-vertical button{font:500 14px Roboto;background:none;border:0;color:var(--muted);cursor:pointer;white-space:nowrap}.tabs-horizontal button{padding:12px 4px;border-bottom:2px solid transparent}.tabs-horizontal button[aria-selected=true]{color:var(--blue);border-bottom-color:var(--blue)}.tab-specimen.pills .tabs-horizontal{border:0;background:var(--soft);padding:4px;border-radius:8px;gap:4px}.tab-specimen.pills .tabs-horizontal button{border:0;border-radius:6px;padding:9px 14px}.tab-specimen.pills .tabs-horizontal button[aria-selected=true]{background:var(--surface);box-shadow:0 1px 4px #0001}.tab-specimen.vertical{display:grid;grid-template-columns:180px 1fr;gap:20px}.tabs-vertical{display:flex;flex-direction:column;gap:5px;border-right:1px solid var(--line);padding-right:12px}.tabs-vertical button{padding:11px 12px;border-radius:6px;text-align:left}.tabs-vertical button[aria-selected=true]{background:var(--blue-soft);color:var(--blue)}.tabs-content{padding:20px 0;min-height:105px;color:var(--muted)}.tab-specimen.vertical .tabs-content{padding:8px 0}.tab-specimen button:disabled{opacity:.4;cursor:not-allowed}.tabs-content strong{display:block;margin-bottom:8px}.notification-bubble{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;font-size:11px;background:var(--blue-soft);color:var(--blue);border-radius:20px;margin-left:5px}.rich-popover{padding:20px;width:310px;border:1px solid var(--control);border-radius:12px;background:var(--raised);color:var(--ink);box-shadow:0 12px 45px #0003;position:fixed;inset:auto;margin:0;max-width:calc(100vw - 24px)}.rich-popover p{font-size:13px!important;color:var(--muted);margin:10px 0 16px}.rich-popover h3{font-size:15px}.rich-popover .row{gap:8px}.ds-toast-stack{position:fixed;right:24px;bottom:24px;z-index:300;display:grid;gap:10px;max-width:calc(100vw - 32px)}.ds-rich-toast{width:350px;max-width:100%;display:flex;gap:12px;align-items:center;background:var(--raised);border:1px solid var(--control);box-shadow:var(--shadow);padding:14px;border-radius:11px;color:var(--ink);animation:catalog-enter 180ms}.ds-rich-toast p{font-size:12px!important;color:var(--muted);margin-top:3px}.ds-rich-toast button{border:0;background:none;color:var(--blue);cursor:pointer}.number-control{display:flex;border:1px solid var(--control);border-radius:7px;overflow:hidden;background:var(--input)}body.catalog .number-control input.ds-field{border:0;border-radius:0;text-align:center;appearance:textfield;box-shadow:none;min-width:60px}.number-control input::-webkit-inner-spin-button{appearance:none}.number-control button{width:36px;border:0;background:var(--soft);color:var(--icon);font-size:18px;cursor:pointer;flex-shrink:0}.number-control:focus-within{outline:2px solid var(--blue);outline-offset:2px}.field-counter{text-align:right;font-size:11px;color:var(--muted)}
/* KPI specimens: compact, comparable, with supporting visual context. */
body.catalog .ds-kpis{gap:16px}body.catalog .ds-kpi{position:relative;padding:22px;overflow:hidden;background:var(--surface)}.kpi-top{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;font-weight:500}.kpi-symbol{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--blue-soft);color:var(--blue)}.kpi-symbol svg{width:17px;height:17px}.kpi-trend{display:inline-flex;gap:4px;padding:3px 6px;border-radius:5px;background:var(--success-bg);color:var(--green);font-size:11px}.kpi-trend.warning{background:var(--warning-bg);color:var(--amber)}.kpi-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);margin-top:12px}.kpi-spark{height:36px;width:100%;margin-top:14px;display:block}.kpi-spark polyline{fill:none;stroke:var(--chart-1);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.kpi-spark polygon{fill:var(--chart-1);opacity:.08}.kpi-track{margin-top:18px;height:6px;border-radius:5px;background:var(--line);overflow:hidden}.kpi-track i{height:100%;display:block;background:var(--chart-2);border-radius:5px}body.catalog #catalog-charts .ds-chart{max-height:290px;margin-top:16px}body.catalog #catalog-charts>.card{margin-top:20px}body.catalog #catalog-charts>.two-col .ds-chart{max-height:230px}body.catalog .ds-chart-legend{gap:16px}.chart-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.chart-heading small{font-size:12px;color:var(--muted)}.chart-value{font-size:26px;letter-spacing:-.5px;font-weight:700;color:var(--ink);margin:15px 0}.chart-value small{font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0}.heatmap{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin:24px 0 14px}.heat-cell{aspect-ratio:1;border-radius:4px;background:var(--blue-soft);border:0;cursor:pointer;min-width:0}.heat-cell[data-level="1"]{background:color-mix(in srgb,var(--chart-1) 30%,var(--surface))}.heat-cell[data-level="2"]{background:color-mix(in srgb,var(--chart-1) 60%,var(--surface))}.heat-cell[data-level="3"]{background:var(--chart-1)}.distribution-row{display:grid;grid-template-columns:100px 1fr 55px;align-items:center;gap:12px;margin:17px 0;font-size:12px}.distribution-track{height:10px;background:var(--line);border-radius:20px;overflow:hidden}.distribution-track>i{height:100%;display:block;background:var(--chart-1);border-radius:20px}.stacked-bar{display:flex;height:28px;overflow:hidden;border-radius:7px;margin:20px 0}.stacked-bar span{display:block;min-width:0}.chart-legend-dot{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:6px}.gauge{width:210px;height:115px;overflow:hidden;margin:20px auto;position:relative}.gauge-ring{width:210px;height:210px;border-radius:50%;background:conic-gradient(from 270deg,var(--chart-2) 0 39%,var(--line) 39% 50%,transparent 50%);padding:18px}.gauge-ring:after{content:'';display:block;width:174px;height:174px;border-radius:50%;background:var(--surface)}.gauge-value{position:absolute;bottom:0;width:100%;text-align:center;font-size:32px;font-weight:700}.chart-small-note{color:var(--muted);font-size:12px;text-align:center}.metric-comparison{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0}.metric-comparison strong{font-size:26px}.metric-comparison span{font-size:12px;color:var(--muted)}
@media(max-width:900px){.demo-grid{grid-template-columns:1fr}.tab-specimen.vertical{grid-template-columns:145px 1fr}.ds-kpi{padding:16px}.kpi-meta{flex-wrap:wrap}}
@media(max-width:600px){body.catalog .ss-trigger{height:40px;min-height:40px}.tab-specimen.vertical{grid-template-columns:1fr}.tabs-vertical{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;overflow:auto;padding:0 0 8px}.tabs-vertical button{padding:9px}.ds-toast-stack{right:16px;bottom:16px}.distribution-row{grid-template-columns:80px 1fr 40px}.heatmap{gap:3px}.ss-popup .ss-option{min-height:40px}}
html[data-theme=dark]{--action-fill:#34755f}body.catalog .button.primary{background:linear-gradient(180deg,#33745f,#285e4e);border-color:#306a58}.ss-popup:focus{outline:none}.rich-popover:focus{outline:none}.ss-trigger:focus-visible{outline:2px solid var(--blue);outline-offset:2px}body.catalog .ds-table .ref-pages button.active{background:var(--action-fill)}
/* Keep labels and controls aligned when adjacent fields have helper text or tags. */
body.catalog .field{align-content:start;justify-content:flex-start}body.catalog .demo-grid>.field{align-self:start}body.catalog .ss-wrap{align-self:start}body.catalog .ss-tags{line-height:18px}body.catalog .selection-card input{margin-top:2px}

/* Restrained focus: a single border treatment for fields, clear keyboard outline for actions. */
html:root{--focus-stroke:#417e69;--focus-ring:0 0 0 1px #417e691f}
html[data-theme=dark]{--focus-stroke:#8bb99d;--focus-ring:0 0 0 1px #8bb99d26}
body.catalog :focus-visible{outline:2px solid var(--focus-stroke);outline-offset:2px}
body.catalog input.ds-field:focus,body.catalog textarea.ds-field:focus,body.catalog input.ss-search:focus,body.catalog input.ss-search:focus-visible,body.catalog button.ss-trigger:focus-visible{outline:none;border-color:var(--focus-stroke);box-shadow:var(--focus-ring)}
body.catalog .ss-trigger[aria-expanded=true]{outline:none;border-color:var(--focus-stroke);box-shadow:var(--focus-ring)}
body.catalog .ss-popup{border-color:var(--line);box-shadow:0 6px 16px #182c2210,0 16px 40px #182c2214;padding:9px}
body.catalog .ss-popup .ss-search{border-color:var(--line);background:var(--soft);border-radius:6px}
body.catalog .ss-popup .ss-search:focus{border-color:var(--focus-stroke);box-shadow:none;outline:none}
body.catalog .ss-option[data-active=true]{outline:1px solid var(--focus-stroke);outline-offset:-1px;background:var(--hover-surface)}
body.catalog .ss-option[aria-selected=true]{background:var(--selected);color:var(--blue)}
body.catalog .input-addon:focus-within,body.catalog .number-control:focus-within{outline:none;border-color:var(--focus-stroke);box-shadow:var(--focus-ring)}
body.catalog .input-addon .ds-field:focus{outline:none;border:0;box-shadow:none}
body.catalog .menu-search:focus-within,body.catalog .global-search:focus-within{border-color:var(--focus-stroke);box-shadow:var(--focus-ring)}
body.catalog .menu-search input:focus-visible,body.catalog .global-search input:focus-visible{outline:none;box-shadow:none}
body.catalog .button.focus-demo{outline:2px solid var(--focus-stroke);outline-offset:2px;box-shadow:none}
body.catalog .ds-picker :focus-visible{outline:2px solid var(--focus-stroke);outline-offset:1px}
body.catalog .ref-table th .col-resizer:focus-visible{outline:2px solid var(--focus-stroke)}
body.catalog input.ds-field[aria-invalid=true]:focus,body.catalog textarea.ds-field[aria-invalid=true]:focus{border-color:var(--red);box-shadow:0 0 0 1px var(--danger-bg)}