/* Arcline — Datum Arc component styles. Requires tokens.css. */

/* Form-element resets, held at zero added specificity by :where().
   Written bare, `.arcline button` scores (0,1,1) and beats every single-class
   component rule (0,1,0): `font: inherit` was overriding .button's 13px/600
   with the inherited 16px/400 — .button--sm never shrank at all — and
   `color: inherit` was flattening the whole button colour hierarchy to --text.
   With :where() the reset still applies to unstyled controls but yields to any
   component rule that comes after it. */
.arcline :where(button, input, select, textarea) { font: inherit; }
.arcline :where(button) { color: inherit; }
.arcline :where(button, a) { -webkit-tap-highlight-color: transparent; }
.arcline :where(button, a, input, [tabindex]):focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }
.arcline .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The hidden attribute, held above layout. Accordion and the disclosure
   patterns built on it collapse by toggling `hidden`, but the UA rule behind it
   is only [hidden] { display: none } at (0,0,1) — so any single-class rule that
   sets display, e.g. `.panel-body { display: grid }`, silently outranks it and
   the region never collapses. aria-expanded and the caret still flip, which
   makes it read as a state bug rather than a CSS one. !important is warranted:
   `hidden` means not rendered, and a layout rule overriding that is always a
   mistake. */
.arcline [hidden], .arcline[hidden] { display: none !important; }

/* Entrance choreography */
@keyframes arc-fade { from { opacity: 0; } }
@keyframes arc-pop { from { opacity: 0; transform: scale(.965) translateY(8px); } }
@keyframes arc-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes arc-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes arc-slide-in { from { transform: translateX(100%); } }
@keyframes arc-slide-in-left { from { transform: translateX(-100%); } }
@keyframes arc-slide-up { from { transform: translateY(100%); } }

/* Buttons.
   Press is physical: the control compresses under the finger on a fast press
   curve, then releases on the spring. Transform is the only property that
   carries the press so hover colour transitions stay independent. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-height); padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; font-size: 0.8125rem; font-weight: 600; letter-spacing: -.01em; line-height: 1; text-decoration: none; cursor: pointer; -webkit-user-select: none; user-select: none; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease-spring); }
.button:hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-1px); }
.button:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(0) scale(var(--press-scale)); transition: transform 90ms var(--ease-press); }
.button--primary { color: var(--on-brand); background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 94%, #fff), var(--brand)); border-color: var(--brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--shadow-xs); }
.button--primary:hover:not(:disabled) { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 96%, #fff), color-mix(in srgb, var(--brand) 88%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--shadow-sm); }
.button--secondary { color: var(--brand-text); background: var(--brand-soft); border-color: transparent; }
.button--secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--brand) 16%, var(--brand-soft)); }
.button--tertiary { color: var(--text); border-color: var(--rule-strong); background: var(--surface); box-shadow: var(--shadow-xs); }
.button--tertiary:hover:not(:disabled) { background: var(--panel); }
.button--destructive { color: var(--ember-text); background: color-mix(in srgb, var(--ember) 13%, transparent); border-color: transparent; }
.button--destructive:hover:not(:disabled) { background: color-mix(in srgb, var(--ember) 22%, transparent); }
.button--destructive-solid { color: var(--on-critical); background: linear-gradient(180deg, color-mix(in srgb, var(--ember) 88%, #fff), var(--ember)); border-color: var(--ember); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), var(--shadow-xs); }
.button--destructive-solid:hover:not(:disabled) { background: linear-gradient(180deg, var(--ember), color-mix(in srgb, var(--ember) 86%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), var(--shadow-sm); }
/* Plain: type-only, no chrome until it is touched. */
.button--plain { color: var(--brand-text); padding-inline: 10px; }
.button--plain:hover:not(:disabled) { background: var(--brand-soft); }
.button--sm { min-height: var(--control-height-sm); padding-inline: 13px; font-size: 0.75rem; }
.button--lg { min-height: var(--control-height-lg); padding-inline: 24px; font-size: 0.90625rem; gap: 9px; }
/* Capsule geometry for the pill button set. */
.button--pill { border-radius: var(--radius-full); padding-inline: 20px; }
.button--pill.button--sm { padding-inline: 15px; }
.button--pill.button--lg { padding-inline: 28px; }
.button--icon-only { padding-inline: 0; width: var(--control-height); }
.button--icon-only.button--sm { width: var(--control-height-sm); }
.button--icon-only.button--lg { width: var(--control-height-lg); }
.button:disabled, .button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.button__spinner { animation: system-spin .8s linear infinite; }
.icon-button { display: inline-grid; place-items: center; width: var(--control-height); height: var(--control-height); padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; cursor: pointer; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease-spring); }
.icon-button:hover { background: var(--panel); }
.icon-button:active { transform: scale(var(--press-scale-sm)); transition: transform 90ms var(--ease-press); }
.icon-button--sm { width: var(--control-height-sm); height: var(--control-height-sm); }

/* Text fields */
.field { display: block; min-width: 0; }
.field__label { display: flex; gap: 3px; margin-bottom: 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: -.005em; }
.field__required, .field__message--error { color: var(--ember-text); }
.field__control { position: relative; display: flex; align-items: center; min-height: var(--field-height); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.field__control:hover:not(:focus-within) { border-color: color-mix(in srgb, var(--rule-strong) 55%, var(--muted)); }
.field__control:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.field--error .field__control { border-color: color-mix(in srgb, var(--ember) 60%, var(--rule-strong)); }
.field__input { width: 100%; min-width: 0; height: 36px; padding: 0 12px; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 0.8125rem; border-radius: inherit; }
.field__input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.field__leading-icon { display: grid; place-items: center; padding-inline-start: 11px; color: var(--muted); }
.field__leading-icon + .field__input { padding-inline-start: 8px; }
.field__adornment, .field__suffix, .field__prefix, .field__trailing-icon { padding-inline: 10px; color: var(--muted); font-size: 0.75rem; }
.field__message { margin: 5px 0 0; color: var(--muted); font-size: 0.71875rem; line-height: 1.4; }
.field--disabled { opacity: .5; }
.textarea-field { display: block; width: 100%; min-height: 104px; padding: 11px 12px; resize: vertical; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); outline: 0; color: var(--text); background: var(--surface); box-shadow: var(--shadow-xs); font: inherit; font-size: 0.8125rem; line-height: 1.5; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.textarea-field::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.textarea-field:hover:not(:focus) { border-color: color-mix(in srgb, var(--rule-strong) 55%, var(--muted)); }
.textarea-field:focus { border-color: var(--brand); box-shadow: var(--ring); }
.select-field__control { position: relative; display: flex; align-items: center; min-height: var(--field-height); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.select-field__control:hover:not(:focus-within) { border-color: color-mix(in srgb, var(--rule-strong) 55%, var(--muted)); }
.select-field__control:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.select-field select { width: 100%; min-height: 36px; padding: 0 34px 0 12px; appearance: none; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 0.8125rem; border-radius: inherit; }
.select-field__control svg { position: absolute; inset-inline-end: 11px; pointer-events: none; color: var(--muted); }
/* Range field — a fully drawn control rather than an accent-coloured default,
   so the filled portion, track well, and thumb read the same on every engine.
   --range-progress is set inline by RangeField. */
.range-field > label { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: 0.75rem; font-weight: 600; }
.range-field output { color: var(--brand); font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.range-field input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 24px; margin: 0; padding: 0; background: transparent; cursor: pointer; }
.range-field input[type="range"]:disabled { cursor: not-allowed; }
.range-field--disabled { opacity: .5; }
.range-field input[type="range"]:focus-visible { outline-offset: 4px; border-radius: var(--radius-full); }

/* WebKit / Blink */
.range-field input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--brand) var(--range-progress, 50%), var(--panel) var(--range-progress, 50%));
  box-shadow: inset 0 1px 2px light-dark(rgba(16, 20, 22, .10), rgba(0, 0, 0, .35));
}
.range-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px;
  border: 1px solid var(--rule-strong); border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-press), border-color var(--dur-fast) var(--ease);
}
.range-field input[type="range"]:hover::-webkit-slider-thumb { border-color: var(--brand); }
.range-field input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.14); border-color: var(--brand); }

/* Gecko */
.range-field input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: var(--panel); box-shadow: inset 0 1px 2px light-dark(rgba(16, 20, 22, .10), rgba(0, 0, 0, .35)); }
.range-field input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--radius-full); background: var(--brand); }
.range-field input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border: 1px solid var(--rule-strong); border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-press), border-color var(--dur-fast) var(--ease);
}
.range-field input[type="range"]:hover::-moz-range-thumb { border-color: var(--brand); }
.range-field input[type="range"]:active::-moz-range-thumb { transform: scale(1.14); border-color: var(--brand); }

.range-field__ticks { display: flex; justify-content: space-between; margin-top: 3px; color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 0.625rem; }
.file-dropzone { display: grid; place-items: center; gap: 6px; min-height: 128px; padding: 18px; border: 1.5px dashed var(--rule-strong); border-radius: var(--radius-md); color: var(--muted); background: color-mix(in srgb, var(--panel) 40%, transparent); text-align: center; cursor: pointer; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
/* Hover is an invitation, not a commitment: a tinted edge and a faint fill.
   The full brand treatment is reserved for an actual drag, so the loudest
   state in the component marks the moment that matters. */
.file-dropzone:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--rule-strong)); color: var(--text-soft); background: color-mix(in srgb, var(--panel) 60%, transparent); }
.file-dropzone:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.file-dropzone--dragging, .file-dropzone--dragging:hover { border-color: var(--brand); border-style: solid; color: var(--brand-text); background: var(--brand-soft); }
.file-dropzone--dragging strong { color: var(--brand-text); }
.file-dropzone strong { color: var(--text); font-size: 0.8125rem; }
.file-dropzone span { font-size: 0.71875rem; }
.file-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Segmented control — raised selected pill */
.segmented-control__label { display: block; margin-bottom: 6px; font-size: 0.75rem; font-weight: 600; }
.segmented-control__options { display: flex; min-width: 0; gap: 2px; padding: 3px; border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); border-radius: calc(var(--radius-sm) + 2px); background: var(--panel); }
.segmented-control__option { display: flex; flex: 1; align-items: center; justify-content: center; gap: 6px; min-height: 30px; min-width: 0; padding: 0 12px; border: 0; border-radius: var(--radius-xs); color: var(--muted); background: transparent; cursor: pointer; font-size: 0.75rem; font-weight: 560; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.segmented-control__option { transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease-spring); }
.segmented-control__option:hover:not(:disabled) { color: var(--text); }
.segmented-control__option:active:not(:disabled) { transform: scale(var(--press-scale)); transition: transform 90ms var(--ease-press); }
.segmented-control__option--selected, .segmented-control__option--selected:hover:not(:disabled) { color: var(--text); background: var(--surface); box-shadow: var(--edge), var(--shadow-sm); }
.segmented-control__option:disabled { opacity: .4; cursor: not-allowed; }
/* The option renders an optional glyph beside its label. Without the row
   above, the glyph sat on the text baseline with no gap and the label read
   as crooked; these two keep the glyph at full size and let a long label
   give way instead of pushing the track wider. */
.segmented-control__option > svg { flex: none; }
.segmented-control__option > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Status badge — tinted pill */
.status-badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 26px; padding: 0 11px; border: 1px solid transparent; border-radius: var(--radius-full); color: var(--muted); background: var(--panel); font-size: 0.6875rem; font-weight: 560; white-space: nowrap; }
.status-badge--sm { min-height: 23px; padding-inline: 9px; font-size: 0.65625rem; }
.status-badge--success { color: color-mix(in srgb, var(--moss) 82%, var(--text)); background: color-mix(in srgb, var(--moss) 14%, transparent); }
.status-badge--warning { color: var(--yellow-text); background: color-mix(in srgb, var(--yellow) 16%, transparent); }
.status-badge--error { color: var(--ember-text); background: color-mix(in srgb, var(--ember) 14%, transparent); }
.status-badge--pending { color: var(--muted); background: transparent; border-color: var(--rule-strong); border-style: dashed; }

/* Toggle & check control */
.toggle, .check-control { display: flex; align-items: center; gap: 10px; min-height: 28px; cursor: pointer; }
.toggle__input, .check-control__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.toggle__track { position: relative; flex: 0 0 auto; width: 40px; height: 24px; border: 1px solid var(--rule-strong); border-radius: var(--radius-full); background: var(--panel); transition: border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease); }
.toggle__thumb { position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(16, 20, 22, .28), 0 0 1px rgba(16, 20, 22, .16); transition: transform var(--dur-med) var(--ease-spring); }
.toggle__input:checked + .toggle__track { border-color: var(--brand); background: var(--brand); }
.toggle__input:checked + .toggle__track .toggle__thumb { background: #fff; transform: translateX(16px); }
.toggle:active .toggle__thumb { width: 22px; transition: width var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease-spring); }
.toggle:active .toggle__input:checked + .toggle__track .toggle__thumb { transform: translateX(12px); }
/* translateX does not respond to direction, so the thumb travel is mirrored. */
[dir="rtl"] .toggle__input:checked + .toggle__track .toggle__thumb { transform: translateX(-16px); }
[dir="rtl"] .toggle:active .toggle__input:checked + .toggle__track .toggle__thumb { transform: translateX(-12px); }
.toggle__input:focus-visible + .toggle__track, .check-control__input:focus-visible + .check-control__indicator { outline: 2px solid var(--focus); outline-offset: 2px; }
.toggle__copy, .check-control__copy { display: grid; gap: 2px; }
.toggle__label, .check-control__label { font-size: 0.8125rem; letter-spacing: -.005em; }
.toggle__description, .check-control__description, .check-control__error { color: var(--muted); font-size: 0.71875rem; }
.check-control__box { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.check-control__indicator { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--rule-strong); border-radius: var(--radius-xs); background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease-spring); }
.check-control:active:not(.check-control--disabled) .check-control__indicator { transform: scale(.9); transition: transform 90ms var(--ease-press); }
.check-control--radio .check-control__indicator { border-radius: 50%; }
.check-control__input:checked + .check-control__indicator,
.check-control__input[type="checkbox"]:indeterminate + .check-control__indicator { color: var(--on-brand); border-color: var(--brand); background: var(--brand); box-shadow: var(--shadow-xs); }
.check-control__glyph { display: none; }
.check-control__input:checked + .check-control__indicator .check-control__glyph--checked { display: block; animation: arc-pop var(--dur-fast) var(--ease-spring); }
.check-control__input[type="checkbox"]:indeterminate + .check-control__indicator .check-control__glyph--checked { display: none; }
.check-control__input[type="checkbox"]:indeterminate + .check-control__indicator .check-control__glyph--mixed { display: block; }

/* Data table */
.data-table__scroll { --table-edge: var(--surface); width: 100%; overflow-x: auto; }
/* Scroll affordance, applied only while the table actually overflows (tablet
   and below, mostly). The two `local` layers travel with the content and cover
   the shadow at each end; the `scroll` radials stay pinned to the container, so
   a shadow appears on whichever side still has content. Set --table-edge to
   whatever ground the table sits on. */
.data-table--overflowing .data-table__scroll {
  background:
    linear-gradient(to right, var(--table-edge), transparent) 0 0 / 26px 100% no-repeat local,
    linear-gradient(to left, var(--table-edge), transparent) 100% 0 / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text) 17%, transparent), transparent) 0 0 / 13px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 17%, transparent), transparent) 100% 0 / 13px 100% no-repeat scroll;
}
.data-table table { width: 100%; border-collapse: collapse; font-size: 0.78125rem; font-variant-numeric: tabular-nums; }
.data-table caption { padding: 8px; text-align: start; }
.data-table th, .data-table td { height: var(--row-height); padding: 6px 12px; border-top: 1px solid var(--rule); text-align: start; white-space: nowrap; }
.data-table th { height: 36px; color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 0.625rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.data-table__cell--right { text-align: end !important; }
.data-table__sort { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; cursor: pointer; letter-spacing: inherit; text-transform: inherit; transition: color var(--dur-fast) var(--ease); }
.data-table__sort:hover { color: var(--text); }
.data-table__row--interactive { cursor: pointer; }
.data-table__row { transition: background var(--dur-fast) var(--ease); }
.data-table__row:hover { background: color-mix(in srgb, var(--brand-soft) 45%, transparent); }
.data-table__state { height: 110px !important; color: var(--muted); text-align: center !important; font-size: 0.75rem; }
.data-table__loading { display: inline-flex; align-items: center; gap: 8px; }

/* Progress arc */
.progress-arc { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); }
.progress-arc--success { color: var(--moss); }
.progress-arc--warning { color: var(--yellow-text); }
.progress-arc__visual { display: grid; place-items: center; }
.progress-arc__track { stroke: var(--rule); }
.progress-arc__indicator { stroke: currentColor; stroke-linecap: round; transition: stroke-dasharray var(--dur-slow) var(--ease); }
.progress-arc--indeterminate .progress-arc__svg { animation: system-spin .9s linear infinite; }
.progress-arc__value, .progress-arc__label { font-size: 0.6875rem; font-weight: 560; }
.progress-arc--sm .progress-arc__value, .progress-arc--sm .progress-arc__label { display: none; }

/* Progress bar, spinner, skeleton */
.progress-bar { display: grid; gap: 8px; }
.progress-bar > div { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 560; }
.progress-bar strong { color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 0.65625rem; font-weight: 500; }
.progress-bar { font-variant-numeric: tabular-nums; }
.progress-bar__track { display: block; height: 6px; overflow: hidden; border-radius: var(--radius-full); background: var(--panel); box-shadow: inset 0 1px 2px rgba(16, 20, 22, .07); }
.progress-bar__track i { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width var(--dur-slow) var(--ease); }
.progress-bar--success .progress-bar__track i { background: var(--moss); }
.progress-bar--warning .progress-bar__track i { background: var(--yellow); }
.spinner { display: inline-grid; place-items: center; color: var(--brand); }
.spinner svg { animation: system-spin .8s linear infinite; }
@keyframes system-spin { to { transform: rotate(360deg); } }
.skeleton { display: grid; grid-template-columns: 46px 1fr; gap: 10px 12px; align-items: center; }
.skeleton__avatar { grid-row: 1 / 5; width: 42px; height: 42px; border-radius: 50%; background: var(--panel); }
.skeleton__line { display: block; height: 11px; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--panel), color-mix(in srgb, var(--surface) 86%, var(--brand-soft)), var(--panel)); background-size: 200% 100%; animation: skeleton-shift 1.4s ease infinite; }
@keyframes skeleton-shift { to { background-position: -200% 0; } }

/* Alerts & empty state */
.system-alert { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 11px; align-items: start; min-height: 60px; padding: 13px 14px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-xs); }
.system-alert > svg { margin-top: 1px; }
.system-alert strong { display: block; font-size: 0.8125rem; letter-spacing: -.005em; }
.system-alert p { margin: 4px 0 0; color: var(--muted); font-size: 0.75rem; line-height: 1.5; }
.system-alert--info { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.system-alert--success { background: color-mix(in srgb, var(--moss) 5%, var(--surface)); }
.system-alert--warning { background: color-mix(in srgb, var(--yellow) 6%, var(--surface)); }
.system-alert--error { background: color-mix(in srgb, var(--ember) 5%, var(--surface)); }
.system-alert--info > svg { color: var(--brand); }
.system-alert--success > svg { color: var(--moss); }
.system-alert--warning > svg { color: var(--yellow-text); }
.system-alert--error > svg { color: var(--ember-text); }
.empty-state { display: grid; place-items: center; align-content: center; min-height: 220px; padding: 24px; border: 1.5px dashed var(--rule-strong); border-radius: var(--radius-md); text-align: center; }
.empty-state > svg { box-sizing: content-box; margin-bottom: 14px; padding: 12px; border-radius: var(--radius-full); color: var(--brand); background: var(--brand-soft); }
.empty-state strong { font-size: 0.9375rem; letter-spacing: -.01em; }
.empty-state p { max-width: 260px; margin: 7px 0 18px; color: var(--muted); font-size: 0.78125rem; line-height: 1.5; }
.empty-state--compact { min-height: 150px; }

/* Avatars */
.avatar { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; overflow: visible; border: 1px solid var(--surface); border-radius: 50%; color: #fff; background: linear-gradient(180deg, #5f6b73, #58656c); box-shadow: var(--shadow-xs); font-family: "IBM Plex Mono", monospace; font-size: 0.625rem; }
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.avatar--sm { width: 27px; height: 27px; font-size: 0.5625rem; }
.avatar--lg { width: 46px; height: 46px; font-size: 0.75rem; }
.avatar__status { position: absolute; inset-inline-end: -1px; bottom: -1px; width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; background: var(--rule-strong); }
.avatar__status--online { background: var(--moss); }
.avatar__status--away { background: var(--yellow); }
.avatar-group { display: flex; padding-inline-start: 9px; }
.avatar-group .avatar { margin-inline-start: -9px; }
.avatar--remainder { color: var(--text); background: var(--panel); }

/* Tabs */
.tabs__list { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--rule); scrollbar-width: none; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: var(--touch-target); padding: 0 15px; border: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 0.8125rem; font-weight: 560; letter-spacing: -.005em; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.tabs__tab::after { content: ""; position: absolute; inset-inline: 12px; bottom: -1px; height: 2px; border-radius: var(--radius-full); background: transparent; transition: background var(--dur-fast) var(--ease); }
.tabs__tab:hover { color: var(--text); background: color-mix(in srgb, var(--panel) 55%, transparent); }
.tabs__tab.is-active { color: var(--text); }
.tabs__tab.is-active::after { background: var(--brand); }
.tabs__tab > span { padding: 2px 7px; border-radius: var(--radius-full); background: var(--panel); font-size: 0.65625rem; }

/* Navigation */
.app-sidebar-demo { display: grid; gap: 3px; padding: 9px; }
.app-sidebar-demo button { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius-md); color: var(--muted); background: transparent; text-align: start; cursor: pointer; font-size: 0.8125rem; font-weight: 560; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease-spring); }
.app-sidebar-demo button:hover { color: var(--text); background: color-mix(in srgb, var(--panel) 70%, transparent); }
.app-sidebar-demo button:active { transform: scale(.985); transition: transform 90ms var(--ease-press); }
.app-sidebar-demo button.is-active { color: var(--brand-text); background: var(--brand-soft); font-weight: 600; }
/* The datum is a rounded lozenge sitting in the container's gutter, clear of
   the capsule's rounded corner rather than overlapping it. It grows from the
   centre on selection so the mark reads as arriving, not blinking on. */
.app-sidebar-demo button.is-active::before { content: ""; position: absolute; top: 50%; inset-inline-start: -6px; width: 3px; height: 18px; border-radius: var(--radius-full); background: var(--brand); transform: translateY(-50%); animation: arc-datum-in var(--dur-med) var(--ease-spring); }
@keyframes arc-datum-in { from { opacity: 0; transform: translateY(-50%) scaleY(.15); } }
/* The count keeps its own pill on every row: on --surface it would vanish into
   an unselected row, so it carries a brand tint and swaps to the raised
   surface only where the row itself is tinted. */
/* The label absorbs any width pressure, not the count. Without min-width: 0 a
   grid item will not shrink below its content, so in a narrow rail the squeeze
   landed on the badge instead — and because an explicit min-width overrides a
   grid item's automatic min-content floor, the pill collapsed to exactly its
   21px minimum and cramped a two-digit count. */
.app-sidebar-demo button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* inline-grid + line-height 1 centres the digits on both axes; relying on the
   font's own leading left them sitting visibly off-centre in the pill. */
.app-sidebar-demo b { display: inline-grid; place-items: center; min-width: 1.3125rem; min-height: 1.125rem; padding: 0 0.4375rem; border-radius: var(--radius-full); color: var(--brand-text); background: color-mix(in srgb, var(--brand) 12%, transparent); font-size: 0.625rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.app-sidebar-demo button.is-active b { background: var(--surface); }
.breadcrumbs { min-width: 0; max-width: 100%; }
.breadcrumbs ol { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.75rem; }
.breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.breadcrumbs a { color: var(--muted); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs svg { color: var(--rule-strong); }
.breadcrumbs span { color: var(--text); font-weight: 560; }
.breadcrumbs li:not(:last-child) span { color: var(--muted); font-weight: 400; }
.pagination { display: flex; min-width: 0; max-width: 100%; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pagination::-webkit-scrollbar { display: none; }
.pagination > button:not(.icon-button) { width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem; font-variant-numeric: tabular-nums; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.pagination > button:hover { background: var(--panel); }
.pagination > button.is-active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.pagination__ellipsis { min-width: 20px; color: var(--muted); text-align: center; font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem; }
/* The docked bar rounds its top corners so it reads as a surface that rises to
   meet the content, not a slab cut off at the edge. It sits ON the edge: the
   bar is solid and carries the home-indicator inset itself, so content scrolls
   away underneath it instead of showing through it — glass is for transient
   overlays, not for chrome that text has to stay legible behind all day. */
.mobile-bottom-nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 11px 8px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface); }
.mobile-bottom-nav button { position: relative; display: grid; place-items: center; gap: 5px; min-height: 52px; padding: 6px 4px; border: 0; border-radius: var(--radius-md); color: var(--muted); background: transparent; cursor: pointer; font-size: 0.625rem; font-weight: 560; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease-spring); }
.mobile-bottom-nav button svg { transition: transform var(--dur-med) var(--ease-spring); }
.mobile-bottom-nav button:hover:not(.is-active) { color: var(--text-soft); background: color-mix(in srgb, var(--panel) 55%, transparent); }
.mobile-bottom-nav button:active { transform: scale(var(--press-scale)); transition: transform 90ms var(--ease-press); }
.mobile-bottom-nav button.is-active { color: var(--brand-text); background: var(--brand-soft); }
.mobile-bottom-nav button.is-active svg { transform: translateY(-1px) scale(1.06); }
/* The datum is a short lozenge floating clear above the capsule, in the bar's
   top padding — riding the capsule edge reads as a notch cut out of it. */
.mobile-bottom-nav button.is-active::after { content: ""; position: absolute; top: -7px; left: 50%; width: 18px; height: 3px; border-radius: var(--radius-full); background: var(--brand); transform: translateX(-50%); }

/* Floating variant — the bar detaches from the edge and reads as a lit object
   over the content it scrolls above. */
.mobile-bottom-nav--floating { padding: 7px; border: 1px solid color-mix(in srgb, var(--rule-strong) 45%, transparent); border-radius: var(--radius-full); background: var(--glass-surface); -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); box-shadow: var(--edge), var(--shadow-lg); }
.mobile-bottom-nav--floating button { border-radius: var(--radius-full); }
/* Detached from any edge, the floating bar has no datum to anchor — the tinted
   capsule alone carries selection. */
.mobile-bottom-nav--floating button.is-active::after { display: none; }

/* Accordion */
.accordion { border-top: 1px solid var(--rule); }
.accordion section { border-bottom: 1px solid var(--rule); }
.accordion h3 { margin: 0; }
.accordion h3 button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0 14px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: start; cursor: pointer; font-size: 0.84375rem; font-weight: 560; letter-spacing: -.005em; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.accordion h3 button:hover { background: color-mix(in srgb, var(--panel) 55%, transparent); }
.accordion section.is-open h3 button { color: var(--brand); }
.accordion h3 svg { transition: transform var(--dur-med) var(--ease); }
.accordion section.is-open h3 svg { transform: rotate(180deg); }
.accordion section > div { padding: 2px 14px 18px; color: var(--muted); font-size: 0.78125rem; line-height: 1.6; }
.accordion section > div p { margin: 0; }

/* Floating panels (portaled; position set inline by useAnchoredPosition) */
.dropdown-menu, .popover, .tooltip { position: relative; display: inline-flex; }
.dropdown-menu__panel { position: fixed; z-index: 160; width: 218px; padding: 6px; border: 1px solid color-mix(in srgb, var(--rule-strong) 55%, transparent); border-radius: var(--radius-md); background: var(--glass-surface-strong); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); box-shadow: var(--edge), var(--shadow-lg); animation: arc-drop var(--dur-fast) var(--ease); }
.dropdown-menu__panel button { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 9px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: start; cursor: pointer; font-size: 0.8125rem; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.dropdown-menu__panel button:hover, .dropdown-menu__panel button:focus-visible { color: var(--brand-text); background: var(--brand-soft); }
.dropdown-menu__panel hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--rule); }
.dropdown-menu__panel kbd { color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 0.625rem; }
.tooltip__bubble { position: fixed; z-index: 170; width: max-content; max-width: 230px; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--canvas); background: color-mix(in srgb, var(--text) 94%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow-md); font-size: 0.71875rem; font-weight: 500; line-height: 1.4; opacity: 0; pointer-events: none; transform: translate(-50%, calc(-100% + 4px)) scale(.97); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.tooltip__bubble--visible { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.tooltip__bubble--below { transform: translate(-50%, -4px) scale(.97); }
.tooltip__bubble--below.tooltip__bubble--visible { transform: translate(-50%, 0) scale(1); }
.popover__panel { position: fixed; z-index: 160; width: 280px; border: 1px solid color-mix(in srgb, var(--rule-strong) 55%, transparent); border-radius: var(--radius-md); background: var(--glass-surface-strong); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); box-shadow: var(--edge), var(--shadow-lg); overflow: hidden; animation: arc-drop var(--dur-fast) var(--ease); }
.popover__panel header { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 9px 0 14px; border-bottom: 1px solid var(--rule); }
.popover__panel header strong { font-size: 0.8125rem; letter-spacing: -.005em; }
.popover__panel > div { padding: 14px; }

/* Overlays.
   Modals, drawers, sheets and the command palette are native <dialog> elements
   opened with showModal(). The platform supplies the top layer, the focus trap,
   Escape, and inert background content, so there is no z-index ladder to keep
   in sync and no hand-rolled tab cycling to drift out of step. */
.arc-dialog { position: fixed; inset: 0; max-width: 100%; max-height: 100%; padding: 0; margin: auto; border: 0; color: var(--text); background: transparent; overflow: visible; }
/* ::backdrop cannot rely on tokens inheriting in every engine, so the scrim is
   written literally and mirrored for dark. */
.arc-dialog::backdrop { background: rgba(12, 18, 20, .42); -webkit-backdrop-filter: blur(6px) saturate(130%); backdrop-filter: blur(6px) saturate(130%); animation: arc-fade var(--dur-med) var(--ease); }
[data-theme="dark"] .arc-dialog::backdrop { background: rgba(3, 6, 8, .58); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .arc-dialog::backdrop { background: rgba(3, 6, 8, .58); }
}

.modal { width: min(560px, calc(100vw - 44px)); max-height: min(760px, calc(100vh - 44px)); overflow: auto; border: 1px solid color-mix(in srgb, var(--rule-strong) 45%, transparent); border-radius: var(--radius-lg); background: var(--glass-surface-strong); -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); box-shadow: var(--edge), var(--shadow-xl); animation: arc-pop var(--dur-med) var(--ease-spring); }
.modal--sm { width: min(450px, calc(100vw - 44px)); }
.modal > header { display: flex; justify-content: space-between; gap: 20px; padding: 24px 24px 18px; border-bottom: 1px solid var(--rule); }
.modal__eyebrow, .drawer header span { color: var(--brand); font-family: "IBM Plex Mono", monospace; font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; }
.modal h2, .drawer h2 { margin: 6px 0 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -.025em; }
.modal header p { max-width: 430px; margin: 8px 0 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
.modal__body { padding: 24px; }
.modal > footer, .drawer > footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--rule); background: color-mix(in srgb, var(--panel) 30%, transparent); }
.modal--destructive { border-top: 3px solid var(--ember); }
.drawer[open] { display: flex; }
.drawer { flex-direction: column; width: min(430px, 94vw); height: 100%; border-inline-start: 1px solid color-mix(in srgb, var(--rule-strong) 45%, transparent); background: var(--glass-surface-strong); -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); box-shadow: var(--edge), var(--shadow-xl); animation: arc-slide-in var(--dur-med) var(--ease); }
.drawer--right { margin: 0 0 0 auto; }
.drawer--left { margin: 0 auto 0 0; border-inline-end: 1px solid color-mix(in srgb, var(--rule-strong) 45%, transparent); border-inline-start: 0; animation-name: arc-slide-in-left; }
/* height stays definite (fit-content, from the UA sheet) — with inset:0 an
   auto height would stretch the sheet to the full viewport instead of
   letting `margin: auto auto 0` pin it to the bottom edge. */
/* Constrained and centred rather than full-bleed: a sheet stretched across a
   1440px canvas reads as a docked panel, not a sheet. Below 640px the min()
   collapses to the full width anyway. */
.drawer--bottom { width: min(640px, 100%); max-width: 100%; height: fit-content; max-height: 78vh; margin: auto auto 0; border-top: 1px solid color-mix(in srgb, var(--rule-strong) 45%, transparent); border-inline-start: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation: arc-slide-up var(--dur-med) var(--ease); }
.drawer--bottom::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; border-radius: var(--radius-full); background: var(--rule-strong); transform: translateX(-50%); }
.drawer > header { display: flex; justify-content: space-between; gap: 20px; padding: 22px 20px 18px; border-bottom: 1px solid var(--rule); }
.drawer__body { flex: 1; overflow: auto; padding: 20px; }
.system-toast { position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 150; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 11px; align-items: start; width: min(420px, calc(100vw - 32px)); padding: 14px; border: 1px solid color-mix(in srgb, var(--rule-strong) 50%, transparent); border-inline-start: 3px solid var(--moss); border-radius: var(--radius-md); background: var(--glass-surface); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); box-shadow: var(--edge), var(--shadow-lg); animation: arc-rise var(--dur-med) var(--ease-spring); }
.system-toast > svg { color: var(--moss); }
.system-toast--info { border-inline-start-color: var(--brand); }
.system-toast--info > svg { color: var(--brand); }
.system-toast--warning { border-inline-start-color: var(--yellow); }
.system-toast--warning > svg { color: var(--yellow-text); }
.system-toast--error { border-inline-start-color: var(--ember); }
.system-toast--error > svg { color: var(--ember-text); }
.system-toast strong { display: block; font-size: 0.8125rem; letter-spacing: -.005em; }
.system-toast p { margin: 3px 0 0; color: var(--muted); font-size: 0.71875rem; line-height: 1.45; }
.command-palette { width: min(640px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 120px)); margin: min(16vh, 150px) auto auto; border: 1px solid color-mix(in srgb, var(--rule-strong) 45%, transparent); border-radius: var(--radius-lg); background: var(--glass-surface-strong); -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); box-shadow: var(--edge), var(--shadow-xl); overflow: hidden; animation: arc-pop var(--dur-med) var(--ease-spring); }
.command-palette > label { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; min-height: 62px; padding: 0 18px; border-bottom: 1px solid var(--rule); }
.command-palette input { min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 1.0625rem; letter-spacing: -.01em; }
.command-palette input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.command-palette kbd { padding: 3px 7px; border: 1px solid var(--rule-strong); border-radius: var(--radius-xs); color: var(--muted); background: var(--surface); box-shadow: inset 0 -1.5px 0 var(--rule); font-family: "IBM Plex Mono", monospace; font-size: 0.625rem; font-variant-numeric: tabular-nums; }
.command-palette [role="listbox"] { max-height: 368px; overflow: auto; padding: 8px; }
.command-palette [role="option"] { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 11px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: start; cursor: pointer; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.command-palette [role="option"]:hover, .command-palette [role="option"]:focus { color: var(--brand-text); background: var(--brand-soft); }
.command-palette [role="option"] strong, .command-palette [role="option"] small { display: block; }
.command-palette [role="option"] strong { font-size: 0.8125rem; letter-spacing: -.005em; }
.command-palette [role="option"] small { margin-top: 3px; color: var(--muted); font-size: 0.71875rem; }
.command-palette__empty { margin: 0; padding: 30px 14px; color: var(--muted); text-align: center; font-size: 0.78125rem; }
.command-palette__footer { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.6875rem; }
.command-palette__footer span { display: inline-flex; align-items: center; gap: 6px; }
.command-palette__footer kbd { min-width: 20px; text-align: center; }

/* Theme preview & token swatch */
.theme-preview { border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden; }
/* ThemePreview carries both .arcline and data-theme, so the whole palette is
   re-declared on the element itself and light-dark() resolves against its own
   pinned color-scheme. No duplicated hex list to keep in sync. */
.theme-preview[data-theme] { color: var(--text); background: var(--canvas); }
.theme-preview__header { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.theme-preview__heading { display: flex; align-items: center; gap: 8px; }
.theme-preview__heading h3 { margin: 0; font-size: 0.75rem; font-weight: 600; }
.theme-preview__heading p { margin: 2px 0 0; color: var(--muted); font-size: 0.65625rem; }
.theme-preview__swatches { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
.token-swatch { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: center; padding: 7px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); text-align: start; }
.token-swatch--interactive { cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
.token-swatch--interactive:hover { border-color: var(--brand); }
.token-swatch__preview { width: 28px; height: 28px; border: 1px solid var(--rule-strong); border-radius: var(--radius-xs); background: var(--panel); }
.token-swatch__body { display: grid; gap: 2px; min-width: 0; }
.token-swatch__name { font-size: 0.6875rem; font-weight: 600; }
.token-swatch__value, .token-swatch__description, .token-swatch__contrast { color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 0.59375rem; }

/* ── Radio group ─────────────────────────────────────────────────────────
   One tab stop, arrow keys within. The marker is drawn rather than a native
   input so the whole row can be the target. */
.radio-group__label { display: block; margin-bottom: var(--space-1); font-size: 0.75rem; font-weight: 600; letter-spacing: -.005em; }
.radio-group__description { display: block; margin-bottom: var(--space-2); color: var(--muted); font-size: 0.71875rem; line-height: 1.45; }
.radio-group__options { display: grid; gap: var(--space-1); }
.radio-group--horizontal .radio-group__options { grid-auto-flow: column; grid-auto-columns: 1fr; }
.radio-group__option { display: flex; align-items: flex-start; gap: var(--space-2); width: 100%; min-height: 36px; padding: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); color: inherit; background: transparent; text-align: start; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease-spring); }
.radio-group__option:hover:not(:disabled) { background: color-mix(in srgb, var(--panel) 60%, transparent); }
.radio-group__option:active:not(:disabled) { transform: scale(var(--press-scale)); transition: transform 90ms var(--ease-press); }
.radio-group__option.is-selected { border-color: color-mix(in srgb, var(--brand) 40%, transparent); background: var(--brand-soft); }
.radio-group__option:disabled { opacity: .45; cursor: not-allowed; }
.radio-group__marker { position: relative; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--rule-strong); border-radius: 50%; background: var(--surface); transition: border-color var(--dur-fast) var(--ease); }
.radio-group__option.is-selected .radio-group__marker { border-color: var(--brand); }
.radio-group__option.is-selected .radio-group__marker::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand); animation: arc-pop var(--dur-fast) var(--ease-spring); }
.radio-group__copy { display: grid; gap: 2px; min-width: 0; }
.radio-group__option-label { font-size: 0.8125rem; font-weight: 560; letter-spacing: -.005em; }
.radio-group__option.is-selected .radio-group__option-label { color: var(--brand-text); }
.radio-group__option-description { color: var(--muted); font-size: 0.71875rem; line-height: 1.45; }
.radio-group--error .radio-group__marker { border-color: color-mix(in srgb, var(--ember) 60%, var(--rule-strong)); }

/* ── Combobox ────────────────────────────────────────────────────────────
   Focus never leaves the input; the active option is pointed at with
   aria-activedescendant, which is what lets the highlight be announced while
   the user is still typing. */
.combobox { position: relative; }
.combobox__control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-height: var(--field-height); padding: 3px 3px 3px var(--space-3); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.combobox__control:hover:not(:focus-within) { border-color: color-mix(in srgb, var(--rule-strong) 55%, var(--muted)); }
.combobox__control:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.field--error .combobox__control { border-color: color-mix(in srgb, var(--ember) 60%, var(--rule-strong)); }
.combobox__icon { flex: 0 0 auto; color: var(--muted); }
.combobox__input { flex: 1; min-width: 6ch; height: 30px; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 0.8125rem; }
.combobox__input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.combobox__toggle { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: var(--radius-xs); color: var(--muted); background: transparent; cursor: pointer; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.combobox__toggle:hover { color: var(--text); background: var(--panel); }
.combobox__chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 3px 0 var(--space-2); border-radius: var(--radius-full); color: var(--brand-text); background: var(--brand-soft); font-size: 0.6875rem; font-weight: 560; }
/* 24px is WCAG 2.5.8's floor and it applies at every viewport, not only at
   compact widths — this was 16px. The chip grows with it rather than the
   button overflowing a 24px chip. */
.combobox__chip button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; color: inherit; background: color-mix(in srgb, var(--brand) 18%, transparent); cursor: pointer; }
.combobox__chip button:hover { background: color-mix(in srgb, var(--brand) 32%, transparent); }
.combobox__listbox { position: absolute; z-index: 60; top: calc(100% + 5px); inset-inline: 0; max-height: 240px; overflow-y: auto; padding: var(--space-1); border: 1px solid color-mix(in srgb, var(--rule-strong) 55%, transparent); border-radius: var(--radius-md); background: var(--glass-surface-strong); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); box-shadow: var(--edge), var(--shadow-lg); animation: arc-drop var(--dur-fast) var(--ease); }
.combobox__option { display: flex; align-items: center; gap: var(--space-2); min-height: 34px; padding: 0 var(--space-2); border-radius: var(--radius-xs); cursor: pointer; font-size: 0.8125rem; }
.combobox__option[data-active="true"] { color: var(--brand-text); background: var(--brand-soft); }
.combobox__option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.combobox__check { display: grid; place-items: center; flex: 0 0 auto; width: 14px; height: 14px; color: var(--brand); }
.combobox__empty { margin: 0; padding: var(--space-4) var(--space-2); color: var(--muted); text-align: center; font-size: 0.75rem; }

/* ── Date field ──────────────────────────────────────────────────────────
   Native control, system styling. The calendar button is the browser's own. */
.date-field__control .field__input { padding-inline-start: var(--space-2); }
.date-field__control input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; transition: opacity var(--dur-fast) var(--ease); }
.date-field__control input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
[data-theme="dark"] .date-field__control input::-webkit-calendar-picker-indicator { filter: invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .date-field__control input::-webkit-calendar-picker-indicator { filter: invert(1); }
}

/* ── Toast region ────────────────────────────────────────────────────────
   The queue stacks here; individual toasts keep the .system-toast styling. */
.toast-region { position: fixed; z-index: 150; display: grid; gap: var(--space-2); width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast-region > * { position: static; width: 100%; pointer-events: auto; }
.toast-region--bottom-end { inset-inline-end: var(--space-6); bottom: var(--space-6); }
.toast-region--bottom-start { inset-inline-start: var(--space-6); bottom: var(--space-6); }
.toast-region--top-end { inset-inline-end: var(--space-6); top: var(--space-6); }
.toast-region--top-start { inset-inline-start: var(--space-6); top: var(--space-6); }
.toast-region--top-center { inset-inline-start: 50%; top: var(--space-6); transform: translateX(-50%); }
@media (max-width: 720px) {
  .toast-region { inset-inline: var(--space-4); width: auto; }
  .toast-region--top-center { transform: none; }
}

/* ── Material utilities ──────────────────────────────────────────────────
   .glass turns any surface translucent at one of three blur depths.
   .specular adds the 1px lit rim: a masked gradient border that catches the
   light along one axis. Arc Blue and neutrals only — never a second hue. */
.glass { --glass-blur: var(--glass-blur-md); background: var(--glass-surface); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
.glass--sm { --glass-blur: var(--glass-blur-sm); }
.glass--lg { --glass-blur: var(--glass-blur-lg); }
.glass--strong { background: var(--glass-surface-strong); }
.glass--panel { background: var(--glass-panel); }

.specular { position: relative; }
.specular::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  padding: 1px; background: var(--edge-specular);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* Engines without mask-composite would paint a solid gradient block. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .specular::after { display: none; }
}

/* ── Panel — a glass card with honest depth ──────────────────────────── */
.panel { position: relative; display: grid; gap: 11px; align-content: start; padding: 19px; border: 1px solid color-mix(in srgb, var(--rule-strong) 35%, transparent); border-radius: var(--radius-md); background: var(--glass-surface); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); box-shadow: var(--edge), var(--shadow-sm); transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); }
.panel--interactive { cursor: pointer; }
.panel--interactive:hover { transform: translateY(-3px); box-shadow: var(--edge), var(--shadow-md); }
.panel--interactive:active { transform: translateY(0) scale(var(--press-scale)); transition: transform 90ms var(--ease-press); }
.panel__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel__eyebrow { color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; }
.panel__metric { font-size: 1.875rem; font-weight: 620; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.panel__metric small { margin-inline-start: 3px; color: var(--muted); font-size: 0.8125rem; font-weight: 500; letter-spacing: -.01em; }
.panel__title { margin: 0; font-size: 0.9375rem; font-weight: 600; letter-spacing: -.015em; }
.panel__body { margin: 0; color: var(--muted); font-size: 0.78125rem; line-height: 1.5; }
.panel__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ── Stepper ─────────────────────────────────────────────────────────── */
.stepper { display: inline-flex; align-items: center; gap: 12px; }
.stepper__control { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-xs); }
.stepper__control button { display: grid; place-items: center; width: 40px; min-height: 34px; padding: 0; border: 0; color: var(--text); background: transparent; cursor: pointer; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease-spring); }
.stepper__control button:hover:not(:disabled) { background: var(--panel); }
.stepper__control button:active:not(:disabled) { color: var(--brand); background: var(--brand-soft); transform: scale(var(--press-scale-sm)); transition: transform 90ms var(--ease-press); }
.stepper__control button:disabled { opacity: .35; cursor: not-allowed; }
.stepper__divider { width: 1px; align-self: stretch; background: var(--rule); }
.stepper__value { min-width: 3ch; color: var(--text); font-family: "IBM Plex Mono", monospace; font-size: 0.875rem; font-variant-numeric: tabular-nums; text-align: center; }
.stepper__label { color: var(--muted); font-size: 0.78125rem; }

/* ── Grouped list — inset rows on a shared glass plate ───────────────── */
.grouped-list { overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--glass-surface); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); box-shadow: var(--edge), var(--shadow-xs); }
.grouped-list__caption { padding: 10px 14px 9px; border-bottom: 1px solid var(--rule); color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; }
.grouped-list__row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--rule); color: inherit; background: transparent; text-align: start; font: inherit; }
.grouped-list__row:last-child { border-bottom: 0; }
button.grouped-list__row, a.grouped-list__row { cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease-spring); }
button.grouped-list__row:hover, a.grouped-list__row:hover { background: color-mix(in srgb, var(--brand-soft) 55%, transparent); }
button.grouped-list__row:active, a.grouped-list__row:active { background: var(--brand-soft); transform: scale(.994); transition: transform 90ms var(--ease-press); }
.grouped-list__icon { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius-xs); color: var(--on-muted); background: linear-gradient(180deg, color-mix(in srgb, var(--muted) 84%, #fff), var(--muted)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.grouped-list__icon--brand { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 86%, #fff), var(--brand)); }
.grouped-list__icon--success { background: linear-gradient(180deg, color-mix(in srgb, var(--moss) 84%, #fff), var(--moss)); }
.grouped-list__icon--warning { background: linear-gradient(180deg, color-mix(in srgb, var(--yellow) 84%, #fff), var(--yellow)); }
.grouped-list__icon--critical { background: linear-gradient(180deg, color-mix(in srgb, var(--ember) 84%, #fff), var(--ember)); }
.grouped-list__copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
.grouped-list__copy strong { font-size: 0.84375rem; font-weight: 560; letter-spacing: -.005em; }
.grouped-list__copy small { overflow: hidden; color: var(--muted); font-size: 0.71875rem; text-overflow: ellipsis; white-space: nowrap; }
.grouped-list__trailing { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; color: var(--muted); font-size: 0.78125rem; }
.grouped-list__chevron { color: var(--rule-strong); }
.grouped-list__row--destructive .grouped-list__copy strong { color: var(--ember-text); }
.grouped-list__row--destructive:hover { background: color-mix(in srgb, var(--ember) 10%, transparent) !important; }

/* ── Action sheet — a native dialog pinned to the bottom edge ────────── */
.action-sheet { width: min(430px, calc(100vw - 24px)); max-height: calc(100vh - 32px); margin: auto auto 12px; overflow: auto; background: transparent; animation: arc-slide-up var(--dur-med) var(--ease); }
.action-sheet__group { overflow: hidden; border: 1px solid color-mix(in srgb, var(--rule-strong) 45%, transparent); border-radius: var(--radius-lg); background: var(--glass-surface-strong); -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); box-shadow: var(--edge), var(--shadow-xl); }
.action-sheet__group + .action-sheet__group { margin-top: 9px; }
.action-sheet__title { padding: 13px 16px; border-bottom: 1px solid var(--rule); color: var(--muted); font-size: 0.75rem; line-height: 1.45; text-align: center; }
.action-sheet__action { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--rule); color: var(--brand-text); background: transparent; cursor: pointer; font: inherit; font-size: 0.9375rem; font-weight: 560; transition: background var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease-spring); }
.action-sheet__action:last-child { border-bottom: 0; }
.action-sheet__action:hover { background: var(--brand-soft); }
.action-sheet__action:active { transform: scale(var(--press-scale)); transition: transform 90ms var(--ease-press); }
.action-sheet__action--destructive { color: var(--ember-text); }
.action-sheet__action--destructive:hover { background: color-mix(in srgb, var(--ember) 12%, transparent); }
.action-sheet__action--cancel { font-weight: 620; }

/* ── Notice — an inbound message banner ──────────────────────────────── */
.notice { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--rule-strong) 38%, transparent); border-radius: var(--radius-md); background: var(--glass-surface); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); box-shadow: var(--edge), var(--shadow-sm); }
.notice__icon { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius-xs); color: var(--on-brand); background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 94%, #fff), var(--brand)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.notice--success .notice__icon { background: linear-gradient(180deg, color-mix(in srgb, var(--moss) 84%, #fff), var(--moss)); }
.notice--warning .notice__icon { background: linear-gradient(180deg, color-mix(in srgb, var(--yellow) 84%, #fff), var(--yellow)); }
.notice--error .notice__icon { background: linear-gradient(180deg, color-mix(in srgb, var(--ember) 84%, #fff), var(--ember)); }
.notice__copy { display: grid; flex: 1; gap: 3px; min-width: 0; }
.notice__copy strong { font-size: 0.8125rem; font-weight: 600; letter-spacing: -.005em; }
.notice__copy p { margin: 0; color: var(--muted); font-size: 0.75rem; line-height: 1.45; }
.notice__time { flex: 0 0 auto; color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 0.625rem; }

/* ── Count badge ─────────────────────────────────────────────────────── */
.count-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); color: var(--on-critical); background: var(--ember); font-size: 0.65625rem; font-weight: 620; font-variant-numeric: tabular-nums; line-height: 1; }
.count-badge--brand { color: var(--on-brand); background: var(--brand); }
.count-badge--neutral { color: var(--text); background: var(--panel); }

@media (max-width: 720px) {
  .grouped-list__row, .action-sheet__action, .stepper__control button { min-height: var(--touch-target); }
  .action-sheet { width: calc(100vw - 20px); margin-bottom: 10px; }
  .notice { padding: 11px 12px; }
  .button, .button--sm, .icon-button, .icon-button--sm, .segmented-control__option, .toggle, .check-control,
  .tabs__tab, .app-sidebar-demo button, .mobile-bottom-nav button, .dropdown-menu__panel button,
  .accordion h3 button, .command-palette [role="option"] { min-height: var(--touch-target); }
  /* Text entry was the gap in that list: every button lifted to the touch
     floor while the controls a form is actually made of stayed at 36px, and
     the combobox toggle at 28. */
  .field__control, .field__input, .select-field__control, .select-field__control select,
  .textarea-field, .combobox__input, .date-field__control, .date-field__control input { min-height: var(--touch-target); }
  .combobox__toggle { width: var(--touch-target); height: var(--touch-target); }
  /* Breadcrumb links are 15px tall in a row of their own, not runs of text in
     a sentence, so the inline exception does not cover them. */
  .breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--touch-target); }
  .icon-button, .icon-button--sm { width: var(--touch-target); height: var(--touch-target); }
  .pagination > button:not(.icon-button) { width: var(--touch-target); height: var(--touch-target); }
  /* Modals become bottom sheets; the drawer already owns the full width. */
  .drawer--right, .drawer--left { width: 100%; }
  .modal { width: 100%; max-width: 100%; max-height: 94vh; margin: auto auto 0; border-inline-end: 0; border-bottom: 0; border-inline-start: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation-name: arc-slide-up; }
  .modal > footer, .drawer > footer { position: sticky; bottom: 0; background: var(--surface); }
  .system-toast { inset-inline-end: 16px; bottom: 16px; }
  .command-palette { width: 100%; max-width: 100%; margin: 72px auto auto; }
}

/* ── Windows High Contrast / forced-colors ───────────────────────────────
   In forced-colors mode the OS replaces every colour with its own palette and
   ignores background-color entirely. Three things break as a result: state
   that was carried by a tinted fill becomes invisible, glass and shadows
   render as flat nothing, and 1px hairlines disappear. So state is re-stated
   with borders and system colours, decoration is dropped, and anything that
   only existed as a tint gets an explicit outline. */
@media (forced-colors: active) {
  /* Let the OS colour text and icons, and keep gradients from washing out. */
  .arcline * { forced-color-adjust: auto; }

  /* Decoration that cannot survive: blur, shadow, and the specular rim. */
  .glass, .panel, .modal, .drawer, .action-sheet__group, .command-palette,
  .dropdown-menu__panel, .popover__panel, .system-toast, .notice,
  .grouped-list, .mobile-bottom-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    background: Canvas;
  }
  .specular::after { display: none; }

  /* Every floating surface needs a real border or it merges into the page. */
  .modal, .drawer, .action-sheet__group, .command-palette, .dropdown-menu__panel,
  .popover__panel, .system-toast, .notice, .panel, .grouped-list, .tooltip__bubble {
    border: 1px solid CanvasText;
  }

  /* Selection was a tint; restate it as a border plus the system accent. */
  .button--primary, .button--secondary, .button--destructive,
  .button--destructive-solid, .button--plain, .button--tertiary {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
  .button:hover:not(:disabled), .button:focus-visible { border-color: Highlight; color: Highlight; }
  .button:disabled, .button[aria-disabled="true"] { color: GrayText; border-color: GrayText; opacity: 1; }

  .segmented-control__option--selected,
  .tabs__tab.is-active,
  .app-sidebar-demo button.is-active,
  .mobile-bottom-nav button.is-active,
  .command-palette [role="option"]:focus,
  .dropdown-menu__panel button:hover {
    outline: 2px solid Highlight;
    outline-offset: -2px;
    color: Highlight;
  }

  /* Status badges lose their tinted fills, so the border carries the meaning.
     Colour alone never conveyed status here — the label always does — but the
     badge still needs an edge to read as a badge at all. */
  .status-badge, .count-badge { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }

  /* Controls whose entire appearance was a coloured fill. */
  .toggle__track { border: 1px solid CanvasText; background: Canvas; }
  .toggle__input:checked + .toggle__track { background: Highlight; }
  .toggle__thumb { background: CanvasText; }
  .toggle__input:checked + .toggle__track .toggle__thumb { background: Canvas; }
  .check-control__indicator { border: 1px solid CanvasText; background: Canvas; }
  .check-control__input:checked + .check-control__indicator { background: Highlight; color: Canvas; }

  /* Progress and range tracks are pure background colour. */
  .progress-bar__track, .range-field input[type="range"]::-webkit-slider-runnable-track { border: 1px solid CanvasText; }
  .progress-bar__track i { background: Highlight; }
  .progress-arc__indicator { stroke: Highlight; }
  .progress-arc__track { stroke: CanvasText; }

  /* The scrim is a translucent colour, so the dialog needs its own separation. */
  .arc-dialog::backdrop { background: Canvas; }

  /* Focus must remain visible against the system palette. */
  .arcline :where(button, a, input, [tabindex]):focus-visible { outline: var(--focus-ring) solid Highlight; outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner svg, .skeleton__line, .button__spinner, .progress-arc--indeterminate .progress-arc__svg { animation: none; }
  .arcline *, .arcline *::before, .arcline *::after,
  .dropdown-menu__panel, .popover__panel, .tooltip__bubble, .arc-dialog, .arc-dialog::backdrop,
  .modal, .drawer, .action-sheet, .system-toast, .command-palette { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}