/* ══════════════════════════════════════════════════════════════════════════
   Sight — components.
   The design system's 28 components, translated from React inline styles to
   CSS classes. Hover/press/selected/disabled are :hover / :active /
   [aria-selected] / [disabled] rather than useState.

   Requires ds/tokens.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Button ──────────────────────────────────────────────────────────────
   Four variants, three sizes. Mono uppercase label at tracked 0.12em.
   Ember is the action colour and appears once per view. */

.s-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-mono);font-size:var(--text-mono-sm);font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  padding:11px 18px;
  border:1px solid transparent;border-radius:var(--radius-sm);
  transition:var(--transition-control),transform var(--dur-instant) var(--ease-out);
  text-decoration:none;white-space:nowrap;cursor:pointer;
  background:none;color:inherit;
}
.s-btn:hover{text-decoration:none}
.s-btn:active:not([disabled]){transform:translateY(1px)}
.s-btn--sm{padding:7px 13px;font-size:var(--text-mono-xs)}
.s-btn--lg{padding:14px 24px;font-size:var(--text-mono)}
.s-btn--block{display:flex;width:100%}

.s-btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.s-btn--primary:hover{background:var(--action-primary-hover);color:var(--action-primary-fg)}

.s-btn--accent{background:var(--action-accent-bg);color:var(--action-accent-fg)}
.s-btn--accent:hover{background:var(--action-accent-hover);color:var(--action-accent-fg)}
.s-btn--accent:active:not([disabled]){background:var(--action-accent-press)}

.s-btn--outline{background:transparent;color:var(--text-strong);border-color:var(--line-2)}
.s-btn--outline:hover{background:var(--surface-hover);border-color:var(--line-strong);color:var(--text-strong)}

.s-btn--quiet{background:transparent;color:var(--action-quiet-fg)}
.s-btn--quiet:hover{background:var(--surface-hover);color:var(--text-strong)}

.s-btn[disabled],.s-btn[aria-disabled="true"]{
  background:var(--action-disabled-bg);color:var(--action-disabled-fg);
  border-color:transparent;cursor:not-allowed;transform:none;
}

/* Icon-only: square, no label. Always carries a title. */
.s-btn--icon{padding:0;min-width:40px;height:40px}
.s-btn--icon.s-btn--sm{min-width:32px;height:32px}

/* ── Pill ────────────────────────────────────────────────────────────────
   Severity and status. The dot inherits currentColor. */

.s-pill{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-muted);background:transparent;border:1px solid var(--line-2);
}
.s-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.s-pill--nodot::before{display:none}
.s-pill--critical{color:var(--sev-critical);background:var(--sev-critical-tint);border-color:color-mix(in oklab,var(--sev-critical) 40%,transparent)}
.s-pill--high{color:var(--sev-high);background:var(--sev-high-tint);border-color:color-mix(in oklab,var(--sev-high) 40%,transparent)}
.s-pill--moderate{color:var(--sand-500);background:var(--sev-moderate-tint);border-color:color-mix(in oklab,var(--sev-moderate) 40%,transparent)}
.s-pill--low{color:var(--slate-600);background:var(--sev-low-tint);border-color:color-mix(in oklab,var(--sev-low) 40%,transparent)}
.s-pill--nominal{color:var(--text-faint);background:transparent;border-color:var(--line)}
[data-theme="ops"] .s-pill--moderate{color:var(--sand-400)}
[data-theme="ops"] .s-pill--low{color:var(--slate-400)}

/* ── Card ────────────────────────────────────────────────────────────────
   No shadow at rest. Hairline first. Gold corner ticks mark anything
   measured. */

.s-card{
  position:relative;display:block;width:100%;text-align:left;
  background:var(--surface-card);color:var(--text-body-color);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);padding:20px 22px;
  transition:var(--transition-control),transform var(--dur-fast) var(--ease-out);
  text-decoration:none;font:inherit;
}
.s-card--sunken{background:var(--surface-sunken)}
.s-card--inverse{background:var(--surface-inverse);color:var(--paper)}
.s-card--pad-none{padding:0}
.s-card--pad-sm{padding:14px 16px}
.s-card--pad-lg{padding:28px 30px}
.s-card--interactive{cursor:pointer}
.s-card--interactive:hover{border-color:var(--line-strong);transform:translateY(-1px);text-decoration:none}
.s-card__foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

/* Gold crosshair corner ticks — the brand's signature detail. */
.s-ticks{position:relative}
.s-ticks > .s-tick{position:absolute;width:9px;height:9px;pointer-events:none}
.s-tick--tl{top:-1px;left:-1px;border-top:1px solid var(--sand-400);border-left:1px solid var(--sand-400)}
.s-tick--tr{top:-1px;right:-1px;border-top:1px solid var(--sand-400);border-right:1px solid var(--sand-400)}
.s-tick--bl{bottom:-1px;left:-1px;border-bottom:1px solid var(--sand-400);border-left:1px solid var(--sand-400)}
.s-tick--br{bottom:-1px;right:-1px;border-bottom:1px solid var(--sand-400);border-right:1px solid var(--sand-400)}
.s-ticks--inset > .s-tick{width:10px;height:10px;z-index:3}
.s-ticks--inset > .s-tick--tl{top:8px;left:8px}
.s-ticks--inset > .s-tick--tr{top:8px;right:8px}
.s-ticks--inset > .s-tick--bl{bottom:8px;left:8px}
.s-ticks--inset > .s-tick--br{bottom:8px;right:8px}

/* ── Eyebrow ─────────────────────────────────────────────────────────── */

.s-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-weight:500;font-size:var(--text-mono-sm);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-muted);
}
.s-eyebrow--accent{color:var(--text-accent)}
.s-eyebrow--strong{color:var(--text-strong)}
.s-eyebrow--rule::before{content:"";width:26px;height:1px;background:var(--sand-400);flex:none}

/* ── EmptyState ──────────────────────────────────────────────────────────
   Complete sentences ending in a period. "No imagery yet." */

.s-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  padding:56px 28px;border:1px dashed var(--line-2);border-radius:var(--radius-lg);
  background:transparent;
}
.s-empty--solid{border-style:solid;border-color:var(--line)}
.s-empty--start{align-items:flex-start;text-align:left}
.s-empty__icon{
  width:52px;height:52px;display:grid;place-items:center;
  border:1px dashed var(--line-2);border-radius:50%;color:var(--text-muted);
}
.s-empty__title{
  font-family:var(--font-display);font-weight:500;font-size:var(--text-title-3);
  letter-spacing:var(--tracking-title);color:var(--text-strong);line-height:1.1;
}
.s-empty__body{font-size:var(--text-body-sm);color:var(--text-muted);max-width:40ch;line-height:1.6}

/* ── CrosshairFrame ──────────────────────────────────────────────────────
   Wraps imagery. Corner ticks, centre reticle, HUD label and meta. */

.s-frame{
  position:relative;overflow:hidden;aspect-ratio:16/9;
  background:var(--plum-900);border-radius:var(--radius-md);
}
.s-frame--free{aspect-ratio:auto}
.s-frame__reticle{position:absolute;inset:0;z-index:2;pointer-events:none}
.s-frame__reticle::before,.s-frame__reticle::after{
  content:"";position:absolute;top:50%;left:50%;background:rgba(244,242,237,0.4);
  transform:translate(-50%,-50%);
}
.s-frame__reticle::before{width:54px;height:1px}
.s-frame__reticle::after{width:1px;height:54px}
.s-frame__box{
  position:absolute;top:50%;left:50%;width:20px;height:20px;
  border:1px solid var(--sand-400);border-radius:2px;transform:translate(-50%,-50%);
}
.s-frame__hud{
  position:absolute;z-index:3;
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:rgba(244,242,237,0.82);text-shadow:0 1px 2px rgba(0,0,0,0.6);
}
.s-frame__hud--label{top:14px;left:16px}
.s-frame__hud--meta{bottom:14px;right:16px}

/* ── Survey grid ─────────────────────────────────────────────────────────
   The one repeating texture: 56px hairlines, radially masked. */

.s-grid-texture{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px var(--field-grid)),
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px var(--field-grid));
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0%,transparent 76%);
  mask-image:radial-gradient(ellipse at center,#000 0%,transparent 76%);
}
.s-grid-texture--fine{
  background-image:
    repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 28px);
}

/* ── TextField ───────────────────────────────────────────────────────── */

.s-field{display:flex;flex-direction:column;gap:7px}
.s-field__label{
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);
}
.s-field__label .req{color:var(--text-accent)}
.s-field__shell{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-card);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);padding:0 12px;height:var(--control-h);
  transition:var(--transition-control);
}
.s-field__shell:focus-within{border-color:var(--sand-400)}
.s-field__shell--multiline{align-items:flex-start;height:auto;padding:10px 12px}
.s-field__shell input,.s-field__shell textarea{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:var(--font-body);font-size:var(--text-body-sm);
  color:var(--text-strong);padding:0;
}
.s-field__shell textarea{resize:vertical}
.s-field__shell input::placeholder,.s-field__shell textarea::placeholder{color:var(--text-faint)}
.s-field__lead{display:flex;color:var(--text-faint)}
.s-field__trail{display:flex;color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-mono-sm)}
.s-field__hint{
  font-family:var(--font-mono);font-size:var(--text-clause);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint);
}
.s-field__error{font-family:var(--font-mono);font-size:var(--text-mono-sm);color:var(--sev-critical)}
.s-field--error .s-field__shell{border-color:color-mix(in oklab,var(--sev-critical) 60%,transparent)}
.s-field--disabled .s-field__shell{background:var(--surface-sunken)}

/* ── SelectField ─────────────────────────────────────────────────────── */

.s-select{position:relative;display:flex;align-items:center}
.s-select select{
  width:100%;height:var(--control-h);appearance:none;
  background:var(--surface-card);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);padding:0 34px 0 12px;
  font-family:var(--font-body);font-size:var(--text-body-sm);
  color:var(--text-strong);transition:var(--transition-control);
}
.s-select select:focus{outline:none;border-color:var(--sand-400)}
.s-select select:disabled{background:var(--surface-sunken)}
.s-select__chevron{position:absolute;right:12px;color:var(--text-muted);pointer-events:none}

/* ── Choice — checkbox, radio, switch; plain or boxed ────────────────── */

.s-choice{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  transition:var(--transition-control);position:relative;
}
.s-choice--stack{align-items:flex-start}
.s-choice input{position:absolute;opacity:0;width:0;height:0}
.s-choice__mark{
  width:16px;height:16px;flex:none;margin-top:1px;
  border-radius:var(--radius-xs);border:1px solid var(--line-2);
  background:transparent;display:grid;place-items:center;
  transition:var(--transition-control);
}
.s-choice:hover .s-choice__mark{border-color:var(--line-strong)}
.s-choice--radio .s-choice__mark{border-radius:50%}
.s-choice__mark svg{opacity:0}
.s-choice__mark::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--action-accent-bg);opacity:0}
.s-choice--radio input:checked ~ .s-choice__mark{border-color:var(--action-accent-bg)}
.s-choice--radio input:checked ~ .s-choice__mark::after{opacity:1}
.s-choice:not(.s-choice--radio):not(.s-choice--switch) .s-choice__mark::after{display:none}
.s-choice:not(.s-choice--radio) input:checked ~ .s-choice__mark{
  border-color:var(--action-accent-bg);background:var(--action-accent-bg);
}
.s-choice:not(.s-choice--radio) input:checked ~ .s-choice__mark svg{opacity:1}
.s-choice input:focus-visible ~ .s-choice__mark{outline:2px solid var(--focus-ring);outline-offset:2px}
.s-choice__text{flex:1;min-width:0}
.s-choice__label{display:block;font-size:var(--text-body-sm);color:var(--text-strong);font-weight:500}
.s-choice__desc{display:block;margin-top:3px;font-size:var(--text-caption);color:var(--text-muted);line-height:1.5}
.s-choice__trailing{
  text-align:right;font-family:var(--font-mono);font-size:var(--text-mono);
  color:var(--text-strong);font-variant-numeric:tabular-nums;
}
.s-choice--boxed{
  align-items:flex-start;padding:14px 16px;min-height:56px;
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-card);
}
.s-choice--boxed:has(input:checked){border-color:var(--line-strong);background:var(--surface-sunken)}
.s-choice--disabled{cursor:not-allowed;opacity:0.5}

/* Switch */
.s-choice--switch .s-choice__mark{
  width:34px;height:20px;border-radius:var(--radius-pill);
  background:var(--paper-3);position:relative;place-items:stretch;margin-top:0;
}
.s-choice--switch .s-choice__mark::after{
  content:"";display:block;position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;background:var(--surface-card);
  box-shadow:0 1px 2px rgba(34,29,35,0.25);opacity:1;
  transition:left var(--dur-fast) var(--ease-out);
}
.s-choice--switch input:checked ~ .s-choice__mark{background:var(--action-accent-bg);border-color:var(--action-accent-bg)}
.s-choice--switch input:checked ~ .s-choice__mark::after{left:16px;background:#fff}

/* ── DropZone ────────────────────────────────────────────────────────── */

.s-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;padding:40px 28px;cursor:pointer;
  border:1px dashed var(--line-2);background:transparent;
  border-radius:var(--radius-lg);transition:var(--transition-control);
}
.s-drop.is-over{border-color:var(--sand-400);background:color-mix(in oklab,var(--sand-400) 8%,transparent)}
.s-drop__title{
  font-family:var(--font-display);font-weight:500;font-size:var(--text-title-3);
  letter-spacing:var(--tracking-title);color:var(--text-strong);
}
.s-drop__body{font-size:var(--text-body-sm);color:var(--text-muted);max-width:44ch}
.s-drop__meta{
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint);
}
.s-drop__bar{width:220px;height:2px;background:var(--paper-3);position:relative;margin-top:4px}
.s-drop__bar > i{position:absolute;inset:0 auto 0 0;background:var(--action-accent-bg)}

/* ── TopBar ──────────────────────────────────────────────────────────── */

.s-topbar{
  position:sticky;top:0;z-index:50;height:var(--row);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:0 var(--gutter);border-bottom:1px solid var(--line);
  background:color-mix(in oklab,var(--surface-page) 88%,transparent);
  backdrop-filter:var(--blur-chrome);-webkit-backdrop-filter:var(--blur-chrome);
}
.s-topbar__brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.s-topbar__brand:hover{text-decoration:none}
.s-topbar__brand img{width:26px;height:26px;border-radius:var(--radius-xs);object-fit:cover}
.s-topbar__wordmark{
  font-family:var(--font-display);font-weight:500;font-size:20px;
  letter-spacing:-0.01em;color:var(--text-strong);
}
.s-topbar__nav{
  display:flex;gap:2px;padding:3px;border:1px solid var(--line);
  border-radius:var(--radius-pill);background:var(--surface-card);
}
.s-topbar__nav a{
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  padding:7px 14px;border-radius:var(--radius-pill);text-decoration:none;
  color:var(--text-muted);background:transparent;transition:var(--transition-control);
}
.s-topbar__nav a:hover{color:var(--text-strong);text-decoration:none}
.s-topbar__nav a[aria-current="page"]{color:var(--action-primary-fg);background:var(--action-primary-bg)}
.s-topbar__right{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.s-topbar__session{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:var(--text-mono-sm);color:var(--text-muted);
}
/* The only looping animation in the system. */
.s-session-dot{width:6px;height:6px;border-radius:50%;background:var(--sand-400);flex:none;animation:sight-pulse 2.4s ease-in-out infinite}
.s-session-dot--off{background:var(--ink-4);animation:none}

/* ── ConsoleToolbar / PaneHead ───────────────────────────────────────── */

.s-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px var(--gutter);border-bottom:1px solid var(--line);
  background:var(--surface-card);
}
.s-toolbar__spacer{flex:1}
.s-toolbar__count{
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint);
}
.s-panehead{
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:24px;padding:22px var(--gutter) 20px;
  border-bottom:1px solid var(--line);
}
.s-panehead h1{
  font-family:var(--font-display);font-weight:400;font-size:var(--text-title-1);
  letter-spacing:var(--tracking-title);color:var(--text-strong);line-height:1;
}
.s-panehead__sub{
  margin-top:8px;font-family:var(--font-mono);font-size:var(--text-mono-sm);
  letter-spacing:var(--tracking-mono);color:var(--text-muted);
}
.s-panehead__actions{display:flex;gap:8px}

/* ── SegmentedControl ────────────────────────────────────────────────── */

.s-seg{
  display:inline-flex;padding:3px;gap:2px;
  border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface-card);
}
.s-seg--block{display:flex;width:100%}
.s-seg--block button{flex:1}
.s-seg button{
  border:none;cursor:pointer;padding:7px 14px;border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  background:transparent;color:var(--text-muted);transition:var(--transition-control);
}
.s-seg--sm button{padding:5px 14px}
.s-seg button[aria-pressed="true"]{background:var(--action-primary-bg);color:var(--action-primary-fg)}

.s-seg--underline{display:flex;padding:0;gap:0;border:none;border-bottom:1px solid var(--line);border-radius:0;background:none}
.s-seg--underline button{
  border-radius:0;border-bottom:2px solid transparent;
  padding:7px 14px 9px;margin-bottom:-1px;background:none;
}
.s-seg--underline button[aria-pressed="true"]{background:none;color:var(--text-strong);border-bottom-color:var(--action-accent-bg)}

/* ── FilterChip ──────────────────────────────────────────────────────── */

.s-chip{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;
  border-radius:var(--radius-pill);cursor:pointer;
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  background:transparent;color:var(--text-muted);
  border:1px solid var(--line-2);transition:var(--transition-control);
}
.s-chip:hover{background:var(--surface-hover);color:var(--text-strong)}
.s-chip[aria-pressed="true"]{background:var(--surface-sunken);color:var(--text-strong);border-color:var(--line-strong)}
.s-chip__count{color:var(--text-faint);font-variant-numeric:tabular-nums}

/* ── Breadcrumbs ─────────────────────────────────────────────────────── */

.s-crumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--text-muted);
}
.s-crumbs a{color:var(--text-muted);text-decoration:none}
.s-crumbs a:hover{color:var(--text-strong);text-decoration:none}
.s-crumbs > *:last-child{color:var(--text-strong)}
.s-crumbs__sep{color:var(--text-faint)}

/* ── StatGrid ────────────────────────────────────────────────────────── */

.s-stats{
  display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius-md);overflow:hidden;
}
.s-stats--bare{background:transparent;border:none;gap:16px}
.s-stats > div{background:var(--surface-card);padding:13px 16px}
.s-stats--bare > div{background:transparent;padding:0}
.s-stats__k{
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-faint);margin-bottom:5px;
}
.s-stats__v{
  font-family:var(--font-mono);font-size:var(--text-body-sm);
  font-variant-numeric:tabular-nums;color:var(--text-strong);
}
.s-stats__v--muted{color:var(--text-muted)}

/* ── MetricBig ───────────────────────────────────────────────────────── */

.s-metric{display:flex;flex-direction:column;gap:10px}
.s-metric__value{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(3.5rem,8vw,6.5rem);line-height:0.9;
  letter-spacing:var(--tracking-hero);color:var(--text-strong);
  font-variant-numeric:tabular-nums;
}
.s-metric__unit{color:var(--text-muted)}
.s-metric__unit--accent{color:var(--text-accent)}
.s-metric__caption{font-family:var(--font-mono);font-size:var(--text-mono);color:var(--text-muted)}
.s-metric__label{
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-faint);
}

/* ── SeverityBar ─────────────────────────────────────────────────────── */

.s-sevbar__track{display:flex;height:4px;border-radius:1px;overflow:hidden;background:var(--paper-3)}
.s-sevbar__track > i{display:block}
.s-sevbar__legend{
  display:flex;justify-content:space-between;margin-top:6px;
  font-family:var(--font-mono);font-size:var(--text-clause);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);
}
.s-sev-critical{background:var(--sev-critical)}
.s-sev-high{background:var(--sev-high)}
.s-sev-moderate{background:var(--sev-moderate)}
.s-sev-low{background:var(--sev-low)}
.s-sev-nominal{background:var(--paper-3)}

/* ── FaultRow ────────────────────────────────────────────────────────── */

.s-fault{
  display:grid;grid-template-columns:3px 54px 1fr auto;gap:12px;align-items:center;
  padding:11px 18px;border-bottom:1px solid var(--line);cursor:pointer;
  background:transparent;border-left:0;border-right:0;border-top:0;
  width:100%;text-align:left;font:inherit;color:inherit;
  transition:background var(--dur-fast) var(--ease-out);
}
.s-fault:hover{background:var(--surface-hover)}
.s-fault[aria-selected="true"]{background:color-mix(in oklab,var(--ember-500) 7%,transparent)}
.s-fault__sev{align-self:stretch;border-radius:1px;background:var(--sev-moderate)}
.s-fault__id{
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  color:var(--text-muted);letter-spacing:var(--tracking-mono);
}
.s-fault__main{min-width:0}
.s-fault__class{
  display:block;font-size:var(--text-body-sm);color:var(--text-strong);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.s-fault__src{
  display:block;font-family:var(--font-mono);font-size:var(--text-clause);
  color:var(--text-faint);letter-spacing:var(--tracking-mono);
}
.s-fault__conf{
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  color:var(--text-body-color);font-variant-numeric:tabular-nums;
}

/* ── DataTable ───────────────────────────────────────────────────────── */

.s-table{
  border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;background:var(--surface-card);
}
.s-table table{width:100%;border-collapse:collapse}
.s-table th{
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);
  background:var(--surface-sunken);
  font-family:var(--font-mono);font-weight:500;font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint);
}
.s-table td{
  padding:14px 16px;border-bottom:1px solid var(--line);
  font-size:var(--text-body-sm);color:var(--text-body-color);
}
.s-table tr:last-child td{border-bottom:none}
.s-table .num,.s-table th.num{text-align:right}
.s-table .mono,.s-table td.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.s-table__empty td{padding:48px 16px;text-align:center}

/* ── SiteCard ────────────────────────────────────────────────────────── */

.s-site{
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  background:var(--surface-card);border-radius:var(--radius-lg);
  border:1px solid var(--line);
  transition:var(--transition-control),transform var(--dur-fast) var(--ease-out);
}
.s-site:hover{border-color:var(--line-strong);transform:translateY(-1px);text-decoration:none}
.s-site__plot{position:relative;height:132px;background:var(--surface-sunken);overflow:hidden}
.s-site__coords{
  position:absolute;left:12px;bottom:10px;
  font-family:var(--font-mono);font-size:var(--text-clause);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint);
}
.s-site__body{display:flex;flex-direction:column;gap:14px;padding:16px 18px 18px}
.s-site__name{
  display:block;font-family:var(--font-display);font-weight:500;font-size:17px;
  letter-spacing:var(--tracking-title);color:var(--text-strong);
}
.s-site__loc{
  display:block;margin-top:4px;font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint);
}
.s-site__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:14px;border-top:1px solid var(--line);
}
.s-site__open{
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);
}

/* ── SubstringMeter ──────────────────────────────────────────────────── */

.s-subs{display:inline-flex;align-items:center;gap:7px}
.s-subs__ticks{display:inline-flex;gap:2px}
.s-subs__ticks > i{width:4px;height:13px;border-radius:1px;display:block;background:transparent;border:1px solid var(--line-2)}
.s-subs__ticks > i.on{background:var(--sand-400);border-color:var(--sand-400)}
.s-subs__n{
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  font-variant-numeric:tabular-nums;color:var(--text-strong);
}
.s-subs--partial .s-subs__n{color:var(--state-deviation);border-bottom:1px dotted var(--state-deviation)}
.s-subs__label{
  font-family:var(--font-mono);font-size:var(--text-clause);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint);
}

/* ── CoaChip — IEC condition of acceptance ───────────────────────────── */

.s-coa{
  display:inline-flex;align-items:center;gap:6px;padding:3px 9px;
  border-radius:var(--radius-xs);border:1px solid var(--slate-400);
  background:transparent;color:var(--state-conforming);
  font-family:var(--font-mono);font-size:var(--text-clause);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
}
.s-coa strong{font-weight:600}
.s-coa span{opacity:0.85}
.s-coa--2{border-color:var(--sand-400);color:var(--sand-500)}
.s-coa--3{border-color:var(--crimson-700);background:var(--crimson-700);color:var(--paper)}
[data-theme="ops"] .s-coa{color:var(--slate-400)}
[data-theme="ops"] .s-coa--2{color:var(--sand-400)}
[data-theme="ops"] .s-coa--3{color:#F4F2ED}

/* ── ClauseRef ───────────────────────────────────────────────────────── */

.s-clause{
  font-family:var(--font-mono);font-size:var(--text-clause);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-faint);white-space:nowrap;
}
.s-clause--block{display:block}

/* ── Marker — provenance. Absence is stated, never zeroed. ───────────── */

.s-marker{
  display:inline-flex;align-items:center;gap:5px;padding:2px 7px;
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:var(--text-clause);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
}
.s-marker--measured{color:var(--state-measured);border:1px solid color-mix(in oklab,var(--state-measured) 45%,transparent)}
.s-marker--literature{color:var(--text-muted);border:1px dashed color-mix(in oklab,var(--text-muted) 45%,transparent)}
.s-marker--assumed,.s-marker--estimate{color:var(--state-estimated);border:1px dashed color-mix(in oklab,var(--state-estimated) 45%,transparent)}
.s-marker--unverified{color:var(--state-deviation);border:1px dashed color-mix(in oklab,var(--state-deviation) 45%,transparent);border-radius:var(--radius-xs)}
.s-marker--verified{color:var(--state-conforming);border:1px solid color-mix(in oklab,var(--state-conforming) 45%,transparent);border-radius:var(--radius-xs)}
/* "not measured" — bare, with the reason on hover. Never a zero. */
.s-marker--absent{
  padding:0;border:none;border-radius:0;
  font-size:var(--text-mono-sm);text-transform:none;letter-spacing:0;
  color:var(--state-absent);border-bottom:1px dashed var(--line-2);cursor:help;
}
[data-theme="ops"] .s-marker--measured,[data-theme="ops"] .s-marker--verified{color:var(--slate-400)}

/* ── ConformanceGate ─────────────────────────────────────────────────── */

.s-gate{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-card);overflow:hidden}
.s-gate--blocked{border-color:color-mix(in oklab,var(--state-blocked) 45%,var(--line))}
.s-gate--deviation{border-color:color-mix(in oklab,var(--state-deviation) 45%,var(--line))}
.s-gate__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);
}
.s-gate--blocked .s-gate__head{background:color-mix(in oklab,var(--state-blocked) 8%,transparent)}
.s-gate__state{font-size:var(--text-mono-xs)}
.s-gate--blocked .s-gate__state{color:var(--state-blocked)}
.s-gate--deviation .s-gate__state{color:var(--state-deviation)}
.s-gate--conforming .s-gate__state{color:var(--state-conforming)}
.s-gate__body{padding:14px 18px;display:flex;flex-direction:column;gap:9px}
.s-gate__item{display:flex;gap:10px;align-items:flex-start}
.s-gate__mark{width:8px;height:8px;margin-top:6px;border-radius:1px;flex:none;background:transparent}
.s-gate__mark--missing{background:var(--state-blocked)}
.s-gate__mark--note{background:var(--state-absent)}
.s-gate__mark--deviation{border:1px solid var(--state-deviation)}
.s-gate__text{font-size:var(--text-body-sm);color:var(--text-body-color);line-height:1.5}
.s-gate__clause{
  display:block;margin-top:2px;font-family:var(--font-mono);font-size:var(--text-clause);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint);
}

/* ── OrderSummary ────────────────────────────────────────────────────── */

.s-order{
  background:var(--surface-sunken);box-shadow:var(--shadow-pop);
  border-radius:var(--radius-md);overflow:hidden;
}
.s-order__top{padding:24px 26px 22px}
.s-order__eyebrow{
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-muted);margin-bottom:10px;
}
.s-order__title{
  font-family:var(--font-display);font-weight:500;font-size:var(--text-title-2);
  letter-spacing:var(--tracking-title);color:var(--text-strong);margin-bottom:14px;
}
.s-order__features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.s-order__features li{display:flex;gap:10px;font-size:var(--text-body-sm);color:var(--text-body-color)}
.s-order__features svg{margin-top:3px;flex:none}
.s-order__lines{background:var(--surface-card);padding:20px 26px 24px}
.s-order__line{
  display:flex;justify-content:space-between;gap:16px;padding:7px 0;
  font-size:var(--text-body-sm);color:var(--text-body-color);
}
.s-order__line--strong{color:var(--text-strong)}
.s-order__line span:last-child{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.s-order__total{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:12px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--font-display);font-weight:500;font-size:var(--text-title-3);
  color:var(--text-strong);
}
.s-order__note{margin-top:10px;font-size:var(--text-caption);line-height:1.55;color:var(--text-muted)}

/* ── PlanCard ────────────────────────────────────────────────────────── */

.s-plan{
  display:flex;flex-direction:column;gap:16px;padding:26px 28px;
  background:var(--surface-card);border:1px solid var(--line);
  border-radius:var(--radius-lg);transition:var(--transition-control);
}
.s-plan--featured{border-color:var(--line-strong)}
.s-plan__price{
  font-family:var(--font-display);font-weight:300;font-size:var(--text-display-2);
  line-height:1;letter-spacing:var(--tracking-display);color:var(--text-strong);
  font-variant-numeric:tabular-nums;
}
.s-plan__period{font-family:var(--font-mono);font-size:var(--text-mono-sm);color:var(--text-muted)}
.s-plan__features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.s-plan__features li{display:flex;gap:10px;font-size:var(--text-body-sm);color:var(--text-body-color)}

/* ── OnboardingModal ─────────────────────────────────────────────────── */

.s-modal-scrim{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:var(--scrim-modal);backdrop-filter:var(--blur-overlay);
  animation:sight-rise var(--dur-slow) var(--ease-out) both;
}
.s-modal{
  width:100%;max-width:520px;background:var(--surface-card);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-modal);overflow:hidden;
}
.s-modal__head{padding:24px 28px 0}
.s-modal__body{padding:18px 28px 24px}
.s-modal__foot{
  display:flex;justify-content:flex-end;gap:8px;padding:18px 28px;
  border-top:1px solid var(--line);background:var(--surface-sunken);
}

/* ── MarketingFooter ─────────────────────────────────────────────────── */

.s-footer{
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  padding:26px var(--gutter);border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--text-faint);
}
.s-footer__links{display:flex;gap:20px}
.s-footer__links a{color:var(--text-muted);text-decoration:none}
.s-footer__links a:hover{color:var(--text-strong);text-decoration:none}

/* ── SectionHead ─────────────────────────────────────────────────────── */

.s-sechead{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:end;margin-bottom:48px}
.s-sechead h2{
  font-family:var(--font-display);font-weight:300;font-size:clamp(2.4rem,4.4vw,3.75rem);
  line-height:1;letter-spacing:var(--tracking-display);color:var(--text-strong);
}
.s-sechead p{font-size:var(--text-body);line-height:1.6;color:var(--text-muted);max-width:46ch}
@media (max-width:820px){.s-sechead{grid-template-columns:1fr;gap:24px}}

/* ── ΔT ramp legend ──────────────────────────────────────────────────── */

.s-ramp{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:var(--text-clause);
  letter-spacing:var(--tracking-mono);color:var(--text-faint);
}
.s-ramp__bar{
  display:block;width:120px;height:6px;border-radius:1px;
  background:linear-gradient(90deg,var(--ramp-0),var(--ramp-1),var(--ramp-2),var(--ramp-3),var(--ramp-4),var(--ramp-5));
}