/* ============================================================
   controls.css — Web controls for Charts & Vectors
   ============================================================
   First production set of UI components, derived per
   SYSTEM.md §15. Buttons, fields, selects, switches, tabs,
   badges, alerts, tables, cards, navigation, tooltips, modal,
   and more.

   Every component composes from existing tokens in `tokens.css`
   and the semantic layer in `colors_and_type.css`. No new
   colors, no new sizes, no new motion values.

   Discipline (from SYSTEM.md §12):
     • No gradients, glass, oversized rounded buttons.
     • Hierarchy comes from type/weight/case/color — not boxes,
       shadows or fills. Most surfaces are hairline-bordered.
     • Single brand accent per mode (sky-deep / amber).
     • Semantic colors only when status is being signaled.
     • Negative space carries weight. Generous padding.
   ============================================================ */

@import "colors_and_type.css";

/* ============================================================
   BUTTON
   ============================================================ */
.btn {
  --btn-pad-x: 18px;
  --btn-pad-y: 10px;
  --btn-size: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  padding: var(--btn-pad-y) var(--btn-pad-x);

  font-family: var(--font-mono);
  font-size: var(--btn-size);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;

  cursor: pointer;
  user-select: none;
  text-decoration: none;
  background: transparent;
  color: var(--fg-1);
  transition: background var(--dur-fast) var(--ease-instrument),
              border-color var(--dur-fast) var(--ease-instrument),
              color var(--dur-fast) var(--ease-instrument);
}
.btn:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
}
.btn .glyph,
.btn .nf {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0;
}

/* Primary — filled accent. The single most loaded mark on the page. */
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg-on-accent);
}
.btn--primary:hover:not(:disabled) {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
}
[data-mode="night"] .btn--primary:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--fg-on-accent);
}
.btn--primary:active:not(:disabled) {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
}

/* Secondary — outlined, transparent. The default. */
.btn--secondary {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--fg-1);
}
.btn--secondary:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.btn--secondary:active:not(:disabled) {
  background: var(--bg-elev-2);
}

/* Ghost — text-only, hover tints background. For low-weight inline use. */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-3);
  padding: var(--btn-pad-y) 12px;
}
.btn--ghost:hover:not(:disabled) {
  background: var(--bg-elev-2);
  color: var(--fg-1);
}

/* Destructive — alert color, used only for irreversible actions. */
.btn--destructive {
  background: transparent;
  border-color: var(--alert);
  color: var(--alert);
}
.btn--destructive:hover:not(:disabled) {
  background: var(--alert);
  border-color: var(--alert);
  color: var(--fg-on-accent);
}

/* Sizes */
.btn--sm {
  --btn-pad-x: 12px;
  --btn-pad-y: 6px;
  --btn-size: 11px;
  letter-spacing: 2px;
}
.btn--lg {
  --btn-pad-x: 24px;
  --btn-pad-y: 14px;
  --btn-size: 15px;
}

/* Icon-only square — keeps grid alignment with text buttons */
.btn--icon {
  padding: 0;
  width: 36px;
  height: 36px;
}
.btn--icon.btn--sm { width: 28px; height: 28px; }
.btn--icon.btn--lg { width: 44px; height: 44px; }

/* Button group — siblings share a border, single radius shell */
.btn-group {
  display: inline-flex;
}
.btn-group .btn {
  border-radius: 0;
  margin-left: -1px;
}
.btn-group .btn:first-child {
  border-top-left-radius: var(--radius-1);
  border-bottom-left-radius: var(--radius-1);
  margin-left: 0;
}
.btn-group .btn:last-child {
  border-top-right-radius: var(--radius-1);
  border-bottom-right-radius: var(--radius-1);
}
.btn-group .btn:hover,
.btn-group .btn:focus-visible {
  z-index: 1;
  position: relative;
}

/* ============================================================
   FIELD — input / textarea / select
   ============================================================
   A field carries: optional <label class="field__label">, the
   control itself, and optional <span class="field__help"> or
   <span class="field__error">. Stack vertically with gap 6px.
   ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field__label {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}
.field__label .req { color: var(--alert); margin-left: 2px; }
.field__help {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
}
.field__error {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--alert);
}

/* The input itself */
.input,
.textarea,
.select {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 100%;
  background: var(--field-bg);
  color: var(--field-text);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-1);
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-instrument);
}
/* Single-line inputs share a fixed height regardless of font-size variant
   (so .input--mono at 13px matches default at 15px). */
.input, .select { height: 40px; }
.textarea { padding: 10px 12px; min-height: 88px; line-height: 1.55; resize: vertical; }
.input::placeholder,
.textarea::placeholder {
  color: var(--field-placeholder);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.3px;
}
.input:hover:not(:disabled),
.textarea:hover:not(:disabled),
.select:hover:not(:disabled) {
  border-color: var(--field-border-hover);
}
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--field-border-focus);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--field-border-focus) 22%, transparent);
}
.input:disabled,
.textarea:disabled,
.select:disabled {
  background: var(--field-disabled-bg);
  color: var(--field-disabled-text);
  cursor: not-allowed;
}
.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: var(--alert);
}

/* Code-style mono input — for IDs, paths, technical values */
.input--mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.3px;
}

/* Input wrapper for prefix/suffix glyphs */
.input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.input-wrap .input { padding-left: 38px; }
.input-wrap__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg-3);
  pointer-events: none;
}

/* Native select — keep the system arrow */
.select {
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

/* ============================================================
   CHECKBOX / RADIO / SWITCH
   ============================================================
   The native control is hidden; we draw the visual using a span
   sibling. Stays accessible because focus and checked still
   apply to the real input.
   ============================================================ */
.check,
.radio,
.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--type-body);
  color: var(--fg-1);
}
.check input,
.radio input,
.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.check__box,
.radio__dot,
.switch__track {
  flex-shrink: 0;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}

.check__box {
  width: 16px; height: 16px;
  border-radius: var(--radius-1);
  position: relative;
}
.check input:checked ~ .check__box {
  background: var(--accent);
  border-color: var(--accent);
}
.check input:checked ~ .check__box::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid var(--fg-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
[data-mode="night"] .check input:checked ~ .check__box::after {
  border-color: var(--fg-on-accent);
}
.check input:focus-visible ~ .check__box {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}

.radio__dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  position: relative;
}
.radio input:checked ~ .radio__dot {
  border-color: var(--accent);
}
.radio input:checked ~ .radio__dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--accent);
  border-radius: 50%;
}
.radio input:focus-visible ~ .radio__dot {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}

/* Switch — instrumented toggle, more cockpit than iOS bubble */
.switch__track {
  width: 36px; height: 18px;
  border-radius: var(--radius-pill);
  position: relative;
  background: var(--bg-elev-2);
}
.switch__track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: var(--fg-3);
  border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-instrument),
              background var(--dur-fast) var(--ease-instrument);
}
.switch input:checked ~ .switch__track {
  background: var(--accent);
}
.switch input:checked ~ .switch__track::after {
  transform: translateX(18px);
  background: var(--fg-on-accent);
}
[data-mode="night"] .switch input:checked ~ .switch__track::after {
  background: var(--fg-on-accent);
}
.switch input:focus-visible ~ .switch__track {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   BADGE / CHIP / TAG
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  color: var(--fg-3);
  background: transparent;
}
.badge .nf, .badge .glyph { font-size: 11px; letter-spacing: 0; }

.badge--accent { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, transparent); }
.badge--warm   { color: var(--accent-warm); border-color: color-mix(in oklab, var(--accent-warm) 50%, transparent); }
.badge--ok     { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 50%, transparent); }
.badge--warn   { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 50%, transparent); }
.badge--alert  { color: var(--alert); border-color: color-mix(in oklab, var(--alert) 50%, transparent); }

/* Solid variant — filled status pill */
.badge--solid.badge--accent { background: var(--accent); color: var(--fg-on-accent); border-color: var(--accent); }
.badge--solid.badge--ok     { background: var(--ok-bg-tint); color: var(--ok); border-color: var(--ok); }
.badge--solid.badge--warn   { background: var(--warn-bg-tint); color: var(--warn); border-color: var(--warn); }
.badge--solid.badge--alert  { background: var(--alert-bg-tint); color: var(--alert); border-color: var(--alert); }
[data-mode="night"] .badge--solid.badge--ok    { background: color-mix(in oklab, var(--ok) 18%, var(--bg-elev-1)); }
[data-mode="night"] .badge--solid.badge--warn  { background: color-mix(in oklab, var(--warn) 18%, var(--bg-elev-1)); }
[data-mode="night"] .badge--solid.badge--alert { background: color-mix(in oklab, var(--alert) 18%, var(--bg-elev-1)); }

/* Pill — full pill rounding for navigation chips */
.badge--pill { border-radius: var(--radius-pill); padding: 4px 10px; }

/* Dismissible chip */
.chip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  width: 14px; height: 14px;
  border: 0; padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  font-family: var(--font-mono);
}
.chip-close:hover { opacity: 1; }
.chip-close:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   ALERT / CALLOUT BANNER
   ============================================================
   The system already specifies callouts in §10. This formalizes
   them as components. Border-left + tinted background.
   ============================================================ */
.alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--rule);
  border-left-width: 3px;
  background: var(--bg-elev-1);
  color: var(--fg-1);
}
.alert__icon {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--fg-3);
  line-height: 1.4;
}
.alert__body { min-width: 0; }
.alert__title {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-3);
  margin: 0 0 4px 0;
}
.alert__text {
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  line-height: 1.55;
  color: var(--fg-1);
}
.alert__close {
  background: transparent;
  border: 0;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  align-self: start;
}
.alert__close:hover { color: var(--fg-1); }
.alert__close:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}

.alert--note {
  background: var(--bg-callout);
  border-color: var(--accent-warm);
}
.alert--note .alert__icon,
.alert--note .alert__title { color: var(--accent-warm); }

.alert--ok    { background: var(--ok-bg-tint);    border-color: var(--ok); }
.alert--warn  { background: var(--warn-bg-tint);  border-color: var(--warn); }
.alert--alert { background: var(--alert-bg-tint); border-color: var(--alert); }
.alert--ok    .alert__icon, .alert--ok    .alert__title { color: var(--ok); }
.alert--warn  .alert__icon, .alert--warn  .alert__title { color: var(--warn); }
.alert--alert .alert__icon, .alert--alert .alert__title { color: var(--alert); }

/* ============================================================
   CARD / PANEL
   ============================================================
   Hairline border, sharp corners (radius-3 max), no shadow by
   default. The system's `corner-brackets` modifier draws the
   four registration marks from SYSTEM.md §6.
   ============================================================ */
.card {
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  padding: 28px;
  position: relative;
}
.card__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h2);
  letter-spacing: var(--track-h2);
  line-height: 1.2;
  color: var(--fg-1);
}
.card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.card__meta {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: right;
  line-height: 1.7;
}
.card__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 18px;
  margin-top: 24px;
  border-top: 1px solid var(--rule);
}

/* Stripe variant — top accent stripe */
.card--stripe {
  border-top: var(--bw-stripe) solid var(--accent);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Corner brackets — uses :before/:after pairs at all 4 corners */
.card--brackets { border: 0; padding: 32px; }
.card--brackets::before,
.card--brackets::after,
.card--brackets > .br-tr,
.card--brackets > .br-bl {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 1px solid var(--rule-anchor);
}
.card--brackets::before  { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.card--brackets::after   { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.card--brackets > .br-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.card--brackets > .br-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }

/* ============================================================
   TABS / SEGMENTED
   ============================================================ */
.tabs {
  display: inline-flex;
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
  gap: 0;
}
.tabs__tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-3);
  cursor: pointer;
  position: relative;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.tabs__tab:hover { color: var(--fg-1); }
.tabs__tab[aria-selected="true"],
.tabs__tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tabs__tab:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}

/* Segmented control — pill-style tabs for terse choices */
.segmented {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-1);
  padding: 2px;
  background: var(--bg-elev-1);
}
.segmented__item {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-3);
  cursor: pointer;
  border-radius: var(--radius-1);
}
.segmented__item:hover { color: var(--fg-1); }
.segmented__item:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}
.segmented__item.is-active,
.segmented__item[aria-pressed="true"] {
  background: var(--accent);
  color: var(--fg-on-accent);
}
[data-mode="night"] .segmented__item.is-active,
[data-mode="night"] .segmented__item[aria-pressed="true"] { color: var(--fg-on-accent); }

/* ============================================================
   TABLE
   ============================================================
   Engineering-spec sheet: light dividers, mono headers, dense
   rows. Status carried by semantic glow on the value cell.
   ============================================================ */
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  color: var(--fg-1);
}
.table th,
.table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-3);
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--rule-strong);
}
.table tbody tr:hover { background: var(--bg-elev-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .mono { font-family: var(--font-mono); font-size: 12px; }
.table .num  { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 var(--space-7);
  height: 64px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--fg-1);
  text-decoration: none;
}
.topbar__brand .em { color: var(--accent); }
.topbar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.topbar__nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-1);
  border-bottom: 0;
  color: var(--fg-3);
}
.topbar__nav a:hover { color: var(--fg-1); background: var(--bg-elev-2); }
.topbar__nav a:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}
.topbar__nav a[aria-current="page"],
.topbar__nav a.is-active {
  color: var(--accent);
}
.topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Sidebar nav — vertical, dense */
.sidenav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 24px;
  border-right: 1px solid var(--rule);
  background: var(--bg);
  min-width: 240px;
}
.sidenav__label {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 16px 12px 6px;
}
.sidenav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-3);
  text-decoration: none;
  border-radius: var(--radius-1);
  border-bottom: 0;
}
.sidenav__item .nf { font-size: 13px; color: var(--fg-3); }
.sidenav__item:hover { color: var(--fg-1); background: var(--bg-elev-2); }
.sidenav__item:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}
.sidenav__item:hover .nf { color: var(--accent); }
.sidenav__item[aria-current="page"],
.sidenav__item.is-active {
  color: var(--accent);
  background: var(--bg-elev-2);
}
.sidenav__item.is-active .nf { color: var(--accent); }

/* Breadcrumbs */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fg-3);
}
.crumbs a { color: var(--fg-3); border-bottom: 0; }
.crumbs a:hover { color: var(--accent); }
.crumbs a:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}
.crumbs__sep { color: var(--rule-strong); }
.crumbs > :last-child { color: var(--fg-1); }

/* Pagination */
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pagination__link {
  min-width: 32px; height: 32px;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--fg-3);
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
}
.pagination__link:hover { color: var(--fg-1); border-color: var(--rule); }
.pagination__link:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}
.pagination__link[aria-current="page"] {
  color: var(--accent);
  border-color: var(--accent);
}
.pagination__ellipsis { padding: 0 6px; color: var(--fg-3); font-family: var(--font-mono); }

/* ============================================================
   MODAL / DIALOG
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-overlay[hidden] { display: none; }
.drawer-overlay[hidden],
.drawer[hidden] { display: none; }
.modal {
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  border-top: var(--bw-stripe) solid var(--accent);
  border-radius: var(--radius-3);
  width: min(560px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
}
.modal__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--rule);
}
.modal__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.4px;
  color: var(--fg-1);
}
.modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.modal__body { padding: 20px 28px; overflow-y: auto; }
.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 28px 24px;
  border-top: 1px solid var(--rule);
}

/* ============================================================
   TOOLTIP & POPOVER
   ============================================================ */
.tooltip {
  display: inline-block;
  padding: 6px 10px;
  background: var(--bg-inverse);
  color: var(--fg-inverse);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: var(--radius-1);
  border: 1px solid var(--bg-inverse);
}

.popover {
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  padding: 14px 16px;
  box-shadow: var(--shadow-popover);
  font-size: var(--type-body-sm);
}

/* ============================================================
   AVATAR
   ============================================================ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 500;
  color: var(--fg-3);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 24px; height: 24px; font-size: 9px; }
.avatar--lg { width: 48px; height: 48px; font-size: 14px; }

/* ============================================================
   PROGRESS / METER
   ============================================================ */
.progress {
  width: 100%;
  height: 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-instrument);
}
.progress--ok .progress__bar    { background: var(--ok); }
.progress--warn .progress__bar  { background: var(--warn); }
.progress--alert .progress__bar { background: var(--alert); }

/* ============================================================
   KBD — keyboard chip
   ============================================================ */
kbd, .kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: var(--radius-1);
  background: var(--bg-elev-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--fg-1);
  line-height: 1;
}

/* ============================================================
   STAT (cockpit-style metric box)
   ============================================================ */
.stat {
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  padding: 14px 18px;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.stat__label .nf { color: var(--accent); margin-right: 6px; }
.stat__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.5px;
  color: var(--fg-1);
  line-height: 1;
}
.stat__value .unit {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--accent);
  margin-left: 2px;
}

/* ============================================================
   BANNER — full-width page-top status / system message
   ============================================================
   Distinct from `.alert`: banners run flush across the top of
   a page or layout region, are 36–44 px tall, and carry one
   semantic role. Use sparingly — they take the most visual
   weight on the surface.
   ============================================================ */
.banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  background: var(--bg-callout);
  border-bottom: 1px solid var(--rule);
  border-top: 3px solid var(--accent-warm);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.banner .nf, .banner__icon { font-size: 12px; color: var(--accent-warm); }
.banner__title { font-weight: 600; }
.banner__text {
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-1);
  flex: 1;
}
.banner__actions { display: flex; gap: 8px; margin-left: auto; }
.banner__close {
  background: transparent; border: 0; padding: 4px 6px;
  font-family: var(--font-mono); color: var(--fg-3);
  cursor: pointer;
}
.banner__close:hover { color: var(--fg-1); }
.banner__close:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}
.banner--ok    { background: var(--ok-bg-tint);    border-top-color: var(--ok); }
.banner--warn  { background: var(--warn-bg-tint);  border-top-color: var(--warn); }
.banner--alert { background: var(--alert-bg-tint); border-top-color: var(--alert); }
.banner--ok    .nf, .banner--ok    .banner__icon { color: var(--ok); }
.banner--warn  .nf, .banner--warn  .banner__icon { color: var(--warn); }
.banner--alert .nf, .banner--alert .banner__icon { color: var(--alert); }

/* ============================================================
   TOAST / SNACKBAR — transient, dismissible, bottom-right stack
   ============================================================
   Visually similar to `.alert` but compact, fixed-positioned,
   and intended to auto-dismiss. The `.toast-stack` container
   holds 1–3 of them.
   ============================================================ */
.toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 60;
  pointer-events: none;
}
.toast-stack > .toast { pointer-events: auto; }

.toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-width: 320px;
  max-width: 440px;
  padding: 12px 14px;
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-popover);
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  color: var(--fg-1);
  animation: toast-in var(--dur-base) var(--ease-instrument);
}
.toast__icon {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg-3);
  line-height: 1;
}
.toast__title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-3);
  margin-bottom: 2px;
}
.toast__close {
  background: transparent; border: 0; padding: 0 4px;
  font-family: var(--font-mono); font-size: 14px;
  color: var(--fg-3); cursor: pointer;
}
.toast__close:hover { color: var(--fg-1); }
.toast__close:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}

.toast--ok    { border-left-color: var(--ok); }
.toast--warn  { border-left-color: var(--warn); }
.toast--alert { border-left-color: var(--alert); }
.toast--ok    .toast__icon, .toast--ok    .toast__title { color: var(--ok); }
.toast--warn  .toast__icon, .toast--warn  .toast__title { color: var(--warn); }
.toast--alert .toast__icon, .toast--alert .toast__title { color: var(--alert); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   DROPDOWN MENU — click-to-open menu list
   ============================================================
   Pure-presentation: pair with your own open/close state. The
   wrapper `.menu-anchor` is just a positioning context.
   ============================================================ */
.menu-anchor { position: relative; display: inline-block; }
.menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-popover);
  padding: 6px;
  z-index: 40;
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
}
.menu[hidden] { display: none; }
.menu--right { left: auto; right: 0; }

.menu__label {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 8px 12px 4px;
}
.menu__item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  border-radius: var(--radius-1);
  cursor: pointer;
  border-bottom: 0;
  text-decoration: none;
}
.menu__item:hover { background: var(--bg-elev-2); color: var(--fg-1); }
.menu__item:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}
.menu__item .nf { font-size: 13px; color: var(--fg-3); line-height: 1; }
.menu__item:hover .nf { color: var(--accent); }
.menu__item kbd,
.menu__item .kbd { font-size: 9px; padding: 1px 5px; }
.menu__item--danger { color: var(--alert); }
.menu__item--danger:hover { background: var(--alert-bg-tint); }
.menu__item--danger .nf { color: var(--alert); }
.menu__item[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.menu__divider {
  height: 1px;
  background: var(--rule);
  margin: 6px 4px;
  border: 0;
}

/* ============================================================
   CODE BLOCK — pre/code formatting for technical snippets
   ============================================================ */
pre.codeblock,
.codeblock {
  display: block;
  background: var(--bg-elev-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  padding: 14px 16px;
  margin: 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--type-code);
  line-height: 1.6;
  color: var(--fg-1);
  white-space: pre;
}
.codeblock .tk-key  { color: var(--accent); }
.codeblock .tk-str  { color: var(--accent-warm); }
.codeblock .tk-num  { color: var(--ok); }
.codeblock .tk-com  { color: var(--fg-3); font-style: italic; }
.codeblock .tk-glow { color: var(--accent-soft); }

/* Header strip — filename / lang label */
.codeblock-frame {
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  overflow: hidden;
}
.codeblock-frame__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-elev-2);
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
}
.codeblock-frame__head .nf { color: var(--accent); margin-right: 6px; }
.codeblock-frame .codeblock {
  border: 0;
  border-radius: 0;
  background: var(--bg-elev-1);
}

/* ============================================================
   EMPTY STATE — "no data" placeholder
   ============================================================ */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-3);
  background: transparent;
  color: var(--fg-3);
}
.empty__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--fg-3);
}
.empty__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--fg-1);
  letter-spacing: -0.2px;
}
.empty__text {
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  line-height: 1.55;
  color: var(--fg-3);
  max-width: 340px;
}
.empty__actions {
  display: flex; gap: 8px;
  margin-top: 6px;
}

/* ============================================================
   SPINNER — async indicator
   ============================================================ */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 720ms linear infinite;
  vertical-align: middle;
}
.spinner--sm { width: 12px; height: 12px; border-width: 1.5px; }
.spinner--lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton block (loading placeholder) */
.skel {
  display: inline-block;
  background: var(--bg-elev-2);
  border-radius: var(--radius-1);
  position: relative;
  overflow: hidden;
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--fg-3) 8%, transparent) 50%,
    transparent 100%);
  animation: skel-shimmer 1.4s linear infinite;
}
.skel--line { height: 12px; width: 100%; }
.skel--title { height: 22px; width: 50%; }
@keyframes skel-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ============================================================
   RANGE SLIDER — value selection
   ============================================================ */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.range:focus { outline: none; }
.range::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
}
.range::-moz-range-track {
  height: 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  margin-top: -6px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-instrument);
}
.range::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
}
.range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-ring) 30%, transparent);
}
.range:hover::-webkit-slider-thumb { background: var(--accent-warm); }
[data-mode="night"] .range:hover::-webkit-slider-thumb { background: var(--accent-soft); }

/* Pair the slider with a label + value readout */
.range-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
}
.range-field .field__label { grid-column: 1; }
.range-field__value {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  grid-column: 2;
  grid-row: 1;
}
.range-field .range { grid-column: 1 / -1; }

/* ============================================================
   STEPPER — numbered process flow (linear)
   ============================================================ */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.stepper__step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  position: relative;
  color: var(--fg-3);
}
.stepper__step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
  margin: 0 14px;
}
.stepper__num {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--bg-elev-1);
  color: var(--fg-3);
  flex-shrink: 0;
}
.stepper__label { white-space: nowrap; font-weight: 500; }

.stepper__step.is-complete .stepper__num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg-on-accent);
}
[data-mode="night"] .stepper__step.is-complete .stepper__num { color: var(--fg-on-accent); }
.stepper__step.is-complete { color: var(--fg-1); }
.stepper__step.is-complete:not(:last-child)::after { background: var(--accent); }

.stepper__step.is-current .stepper__num {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-elev-1);
}
.stepper__step.is-current { color: var(--accent); }

/* ============================================================
   AVATAR GROUP — overlapping avatars with optional overflow chip
   ============================================================ */
.avatar-group {
  display: inline-flex;
  align-items: center;
}
.avatar-group .avatar {
  margin-left: -8px;
  border: 2px solid var(--bg);
  background: var(--bg-elev-2);
}
.avatar-group .avatar:first-child { margin-left: 0; }
.avatar-group__more {
  margin-left: -8px;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  border: 2px solid var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--fg-3);
}

/* ============================================================
   DRAWER / SIDE SHEET — slide-in panel (left or right)
   ============================================================
   Pair with your own open/close state. `.drawer-overlay` is
   optional; use when the drawer should dim the page beneath.
   ============================================================ */
.drawer-overlay {
  position: fixed; inset: 0;
  background: var(--scrim-soft);
  z-index: 50;
}

.drawer {
  position: fixed;
  top: 0; bottom: 0;
  right: 0;
  width: min(420px, calc(100vw - 32px));
  background: var(--bg-elev-1);
  border-left: 1px solid var(--rule);
  box-shadow: var(--shadow-modal);
  z-index: 51;
  display: flex;
  flex-direction: column;
  animation: drawer-in var(--dur-base) var(--ease-instrument);
}
.drawer--left {
  right: auto; left: 0;
  border-left: 0;
  border-right: 1px solid var(--rule);
  animation: drawer-in-left var(--dur-base) var(--ease-instrument);
}
.drawer__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--rule);
}
.drawer__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.4px;
  color: var(--fg-1);
}
.drawer__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.drawer__body { padding: 20px 28px; overflow-y: auto; flex: 1; }
.drawer__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 28px 24px;
  border-top: 1px solid var(--rule);
}

@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes drawer-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* ============================================================
   ACCORDION / DISCLOSURE — uses native <details>/<summary>
   ============================================================
   Each item collapses independently. No JS required for the
   open/close itself; the chevron rotates via [open] state.
   ============================================================ */
.accordion {
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  overflow: hidden;
}
.accordion__item {
  border-bottom: 1px solid var(--rule);
}
.accordion__item:last-child { border-bottom: 0; }
.accordion__item > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-1);
  background: var(--bg-elev-1);
}
.accordion__item > summary::-webkit-details-marker { display: none; }
.accordion__item > summary:hover { background: var(--bg-elev-2); }
.accordion__item > summary:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}
.accordion__num {
  font-size: var(--type-meta);
  letter-spacing: 1px;
  color: var(--accent);
}
.accordion__chevron {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  transition: transform var(--dur-fast) var(--ease-instrument);
}
.accordion__item[open] > summary { color: var(--accent); }
.accordion__item[open] > summary .accordion__chevron { transform: rotate(90deg); color: var(--accent); }
.accordion__body {
  padding: 16px 20px 20px;
  background: var(--bg-elev-1);
  border-top: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  line-height: 1.65;
  color: var(--fg-1);
}

/* ============================================================
   NUMBER INPUT — stepper buttons flanking the field
   ============================================================ */
.number-input {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-1);
  background: var(--field-bg);
  overflow: hidden;
}
.number-input:focus-within { border-color: var(--field-border-focus); }
.number-input__btn {
  appearance: none;
  background: transparent;
  border: 0;
  width: 32px;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
}
.number-input__btn:hover:not(:disabled) { background: var(--bg-elev-2); color: var(--fg-1); }
.number-input__btn:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}
.number-input__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.number-input__btn--minus { border-right: 1px solid var(--rule); }
.number-input__btn--plus  { border-left:  1px solid var(--rule); }
.number-input .input {
  border: 0;
  border-radius: 0;
  text-align: center;
  width: 60px;
  font-family: var(--font-mono);
  font-size: 13px;
  background: transparent;
}
.number-input .input:focus { box-shadow: none; }

/* ============================================================
   BUTTON · LOADING — inline spinner replaces leading content
   ============================================================ */
.btn--loading {
  position: relative;
  pointer-events: none;
}
.btn--loading::before {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 720ms linear infinite;
  margin-right: 8px;
  vertical-align: -1px;
}
.btn--loading.btn--lg::before { width: 14px; height: 14px; }
.btn--loading.btn--sm::before { width: 10px; height: 10px; border-width: 1px; }

/* ============================================================
   STATUS DOT — non-text indicator, optionally pulsing
   ============================================================ */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fg-3);
  flex-shrink: 0;
  vertical-align: middle;
}
.dot--sm { width: 6px; height: 6px; }
.dot--lg { width: 10px; height: 10px; }
.dot--ok    { background: var(--ok); }
.dot--warn  { background: var(--warn); }
.dot--alert { background: var(--alert); }
.dot--info  { background: var(--accent); }
.dot--pulse { position: relative; }
.dot--pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  animation: dot-pulse 1.6s var(--ease-instrument) infinite;
}
.dot--pulse.dot--ok::after    { background-color: var(--ok); }
.dot--pulse.dot--warn::after  { background-color: var(--warn); }
.dot--pulse.dot--alert::after { background-color: var(--alert); }
.dot--pulse.dot--info::after  { background-color: var(--accent); }
@keyframes dot-pulse {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.2); }
}

/* ============================================================
   DROPZONE — drag-and-drop file region
   ============================================================ */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 24px;
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--radius-3);
  background: transparent;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  color: var(--fg-1);
}
.dropzone:hover,
.dropzone.is-drag-over {
  border-color: var(--accent);
  background: var(--bg-elev-2);
}
.dropzone:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}
.dropzone__icon {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--accent);
}
.dropzone__text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
}
.dropzone__text em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dropzone__hint {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ============================================================
   COMBOBOX — input + filterable menu (presentational only;
   pair with your own filtering logic)
   ============================================================ */
.combobox {
  position: relative;
  display: inline-block;
  width: 100%;
}
.combobox__input { padding-right: 36px; }
.combobox__caret {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  pointer-events: none;
}
.combobox__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-popover);
  padding: 4px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 40;
}
.combobox__menu[hidden] { display: none; }
.combobox__option {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  border-radius: var(--radius-1);
  cursor: pointer;
  border-bottom: 0;
}
.combobox__option:hover,
.combobox__option.is-active { background: var(--bg-elev-2); }
.combobox__option:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}
.combobox__option .nf { font-size: 12px; color: var(--fg-3); }
.combobox__option:hover .nf,
.combobox__option.is-active .nf { color: var(--accent); }
.combobox__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--fg-3);
  text-transform: uppercase;
}

/* ============================================================
   TAG INPUT — chips + bare entry field
   ============================================================ */
.tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-1);
  cursor: text;
  min-height: 38px;
  align-items: center;
}
.tag-input:focus-within { border-color: var(--field-border-focus); }
.tag-input .badge { margin: 1px 0; }
.tag-input__entry {
  flex: 1;
  min-width: 100px;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  outline: none;
  padding: 4px 2px;
}
.tag-input__entry::placeholder {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--field-placeholder);
  letter-spacing: 0.3px;
}

/* ============================================================
   STAT · TREND CHIP — appended inside .stat__value
   ============================================================ */
.stat__trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 500;
  text-transform: uppercase;
  vertical-align: middle;
}
.stat__trend--up   { color: var(--ok);    background: color-mix(in oklab, var(--ok) 14%, transparent); }
.stat__trend--down { color: var(--alert); background: color-mix(in oklab, var(--alert) 14%, transparent); }
.stat__trend--flat { color: var(--fg-3);  background: var(--bg-elev-2); }

/* ============================================================
   ICON BADGE — number / dot overlay on an icon, button or avatar
   ============================================================
   Apply `.has-icon-badge` to a positioning parent; the badge
   absolute-positions to the top-right corner.
   ============================================================ */
.has-icon-badge { position: relative; }
.icon-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: 0 4px;
  background: var(--alert);
  color: var(--fg-on-accent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--bg);
  line-height: 1;
}
.icon-badge--dot {
  min-width: 8px; width: 8px; height: 8px;
  padding: 0;
  top: -2px; right: -2px;
  font-size: 0;
}
.icon-badge--ok      { background: var(--ok); }
.icon-badge--warn    { background: var(--warn); }
.icon-badge--accent  { background: var(--accent); }

/* ============================================================
   TAB COUNT — small numeric pill next to a .tabs__tab label
   ============================================================ */
.tabs__count {
  display: inline-flex;
  align-items: center; justify-content: center;
  margin-left: 8px;
  min-width: 18px;
  padding: 0 5px;
  height: 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--fg-3);
  background: var(--bg-elev-2);
  border-radius: var(--radius-pill);
  line-height: 1;
}
.tabs__tab[aria-selected="true"] .tabs__count,
.tabs__tab.is-active .tabs__count {
  color: var(--fg-on-accent);
  background: var(--accent);
}
[data-mode="night"] .tabs__tab.is-active .tabs__count,
[data-mode="night"] .tabs__tab[aria-selected="true"] .tabs__count { color: var(--fg-on-accent); }
.tabs__count--alert { color: var(--alert) !important; background: var(--alert-bg-tint) !important; }

/* ============================================================
   INLINE EDIT — click-to-edit text/value pattern
   ============================================================
   The read state shows a hover affordance (subtle bg + edit
   glyph). The edit state replaces with .input.
   ============================================================ */
.inline-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: var(--radius-1);
  cursor: text;
  transition: background var(--dur-fast);
  border-bottom: 0;
}
.inline-edit:hover {
  background: var(--bg-elev-2);
}
.inline-edit:hover .inline-edit__icon { opacity: 1; }
.inline-edit:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}
.inline-edit__value {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.inline-edit__icon {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.inline-edit.is-editing { padding: 0; background: transparent; }
.inline-edit.is-editing .inline-edit__icon,
.inline-edit.is-editing .inline-edit__value { display: none; }

/* ============================================================
   TABLE · SORTABLE HEADER — clickable th with sort indicator
   ============================================================ */
.table th.is-sortable {
  cursor: pointer;
  user-select: none;
}
.table th.is-sortable:hover { color: var(--fg-1); }
.table__sort-icon {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--rule-strong);
  width: 0;
  letter-spacing: -2px;
}
.table__sort-icon::after { content: '⇅'; }
.table th.is-sortable.is-asc  .table__sort-icon::after { content: '↑'; color: var(--accent); }
.table th.is-sortable.is-desc .table__sort-icon::after { content: '↓'; color: var(--accent); }
.table th.is-sortable.is-asc,
.table th.is-sortable.is-desc { color: var(--accent); }

/* ============================================================
   TOOLTIP · DIRECTIONAL — adds a triangular arrow
   ============================================================
   Apply `.tooltip--top|right|bottom|left` to a positioned wrapper
   or directly on the tooltip span. The arrow uses a single
   ::after pseudo with a rotated square trick.
   ============================================================ */
.tooltip {
  position: relative;
}
.tooltip--top::after,
.tooltip--right::after,
.tooltip--bottom::after,
.tooltip--left::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  background: var(--bg-inverse);
  border: 1px solid var(--bg-inverse);
  border-top: 0; border-left: 0;
  transform: rotate(45deg);
}
.tooltip--top::after    { bottom: -4px; left: 50%; margin-left: -3px; }
.tooltip--bottom::after { top:    -4px; left: 50%; margin-left: -3px; transform: rotate(225deg); }
.tooltip--right::after  { left:   -4px; top:  50%; margin-top:  -3px; transform: rotate(135deg); }
.tooltip--left::after   { right:  -4px; top:  50%; margin-top:  -3px; transform: rotate(315deg); }

/* ============================================================
   COMMAND PALETTE — ⌘K spotlight overlay
   ============================================================ */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 70;
}
.cmdk-overlay[hidden] { display: none; }
.cmdk {
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  border-top: var(--bw-stripe) solid var(--accent);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cmdk__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.cmdk__icon {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--accent);
}
.cmdk__input {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-1);
  width: 100%;
  outline: none;
}
.cmdk__input::placeholder {
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.5px;
}
.cmdk__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 6px;
}
.cmdk__group + .cmdk__group { margin-top: 4px; }
.cmdk__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 10px 14px 6px;
}
.cmdk__item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  border-radius: var(--radius-1);
  cursor: pointer;
  border-bottom: 0;
}
.cmdk__item:hover,
.cmdk__item.is-active { background: var(--bg-elev-2); }
.cmdk__item:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}
.cmdk__item .nf { font-size: 14px; color: var(--fg-3); }
.cmdk__item:hover .nf,
.cmdk__item.is-active .nf { color: var(--accent); }
.cmdk__item__hint {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--fg-3);
  text-transform: uppercase;
}
.cmdk__foot {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px solid var(--rule);
  background: var(--bg-elev-2);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-3);
}
.cmdk__foot kbd { margin-right: 4px; }

/* ============================================================
   AVATAR · SYSTEM (instrument voice)
   ============================================================
   The system avatar is set apart from a plain `.avatar` by its
   mono typeface, not by any surface treatment. The attitude-
   indicator reference is carried where it belongs — the em-dash,
   the palette, the accent stripe. The avatar stays quiet: a flat
   surface neutral, legible as an identity chip first. No split,
   no gradient (§16.2).
   ============================================================ */
.avatar--ai {
  background: var(--bg-elev-1);
  color: var(--fg-1);
  border-color: var(--rule);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.6px;
}

button.avatar--ai {
  cursor: pointer;
  appearance: none;
  font-family: var(--font-mono);
}
button.avatar--ai:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   DIVIDER — section rule with mono label inline
   ============================================================ */
.section-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: var(--space-6) 0 var(--space-4);
}
.section-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}