/* ============================================================
   EXCAR Console — reusable components
   Every component here is shared. No page-specific duplicates.
   ============================================================ */

/* ---------- Card / Panel ---------- */
.card {
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.card-tight { padding: var(--space-4); }
.card-flush { padding: 0; overflow: hidden; }
.card-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-hairline);
}
.card-head .spacer { margin-left: auto; }
.card-body { padding: var(--space-5); }

/* ---------- MetricCard ---------- */
.kpi { display: flex; flex-direction: column; gap: var(--space-3); }
.kpi-top { display: flex; align-items: flex-start; gap: var(--space-3); }
.kpi-icon {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  background: var(--color-accent-subtle); color: var(--color-accent-text);
  display: grid; place-items: center; flex: none;
}
.kpi-icon svg { width: 18px; height: 18px; }
.kpi-value { font-size: var(--type-metric-size); line-height: var(--type-metric-lh); font-weight: 600; }
.kpi-name { font-size: var(--type-label-size); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: var(--color-text-secondary); }
.kpi-sub { font-size: var(--type-caption-size); color: var(--color-text-muted); }
.kpi-def {
  margin-left: auto; width: 18px; height: 18px; flex: none;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border-default);
  background: none; color: var(--color-text-muted);
  font-size: 11px; line-height: 1; cursor: pointer;
}
.kpi-def:hover { color: var(--color-accent-text); border-color: var(--color-accent-edge); }
/* Loading is never a zero. */
.skeleton {
  display: inline-block; height: 1em; min-width: 3.5ch; border-radius: 3px;
  background: linear-gradient(90deg, var(--color-background-elevated), var(--color-background-overlay), var(--color-background-elevated));
}

/* ---------- StatusBadge / EvidenceBadge ----------
   Three orthogonal axes: acquisition | origin | access.
   Never colour alone: glyph + label + (for charts) pattern. */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 8px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid; white-space: nowrap; vertical-align: middle;
}
.badge .glyph { font-size: 10px; line-height: 1; font-weight: 400; }

.badge-valid         { color: var(--color-state-success); border-color: color-mix(in srgb, var(--color-state-success) 34%, transparent); background: color-mix(in srgb, var(--color-state-success) 14%, transparent); }
.badge-suspect       { color: var(--color-state-suspect); border-color: color-mix(in srgb, var(--color-state-suspect) 34%, transparent); background: color-mix(in srgb, var(--color-state-suspect) 14%, transparent); }
.badge-stale         { color: var(--color-state-warning); border-color: color-mix(in srgb, var(--color-state-warning) 34%, transparent); background: color-mix(in srgb, var(--color-state-warning) 14%, transparent); }
.badge-failed        { color: var(--color-state-error);   border-color: color-mix(in srgb, var(--color-state-error) 34%, transparent);   background: color-mix(in srgb, var(--color-state-error) 14%, transparent); }
.badge-restricted    { color: var(--color-state-info);    border-color: color-mix(in srgb, var(--color-state-info) 34%, transparent);    background: color-mix(in srgb, var(--color-state-info) 14%, transparent); }
.badge-derived,
.badge-simulated     { color: var(--color-state-derived); border-color: color-mix(in srgb, var(--color-state-derived) 34%, transparent); background: color-mix(in srgb, var(--color-state-derived) 14%, transparent); }
.badge-info          { color: var(--color-state-info);    border-color: color-mix(in srgb, var(--color-state-info) 34%, transparent);    background: color-mix(in srgb, var(--color-state-info) 14%, transparent); }
/* unknown / missing / unsupported / not_attempted / withdrawn:
   label uses text.secondary because state.unknown is only 4.06:1 on overlay. */
.badge-unknown, .badge-missing, .badge-unsupported, .badge-not_attempted, .badge-withdrawn {
  color: var(--color-text-secondary);
  border-color: color-mix(in srgb, var(--color-state-unknown) 40%, transparent);
  background: color-mix(in srgb, var(--color-state-unknown) 12%, transparent);
}
.badge-unknown .glyph, .badge-missing .glyph, .badge-unsupported .glyph,
.badge-not_attempted .glyph, .badge-withdrawn .glyph { color: var(--color-state-unknown); }
.badge-withdrawn { text-decoration: line-through; }

.badge-sm { height: 17px; padding: 0 6px; font-size: 9.5px; }

/* ---------- DataTable ---------- */
.table-wrap { overflow-x: auto; }
table.dt { width: 100%; border-collapse: collapse; font-size: 13px; }
table.dt thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--color-background-elevated);
  border-bottom: 1px solid var(--color-border-hairline);
  padding: var(--space-2) var(--space-4);
  text-align: left; white-space: nowrap;
  font-size: var(--type-label-size); letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 600; color: var(--color-text-secondary);
}
table.dt thead th.num, table.dt tbody td.num { text-align: right; }
table.dt tbody td {
  padding: 0 var(--space-4); height: var(--row-height);
  border-bottom: 1px solid var(--color-border-hairline);
  vertical-align: middle; white-space: nowrap;
}
table.dt tbody tr { cursor: default; }
table.dt tbody tr[data-href] { cursor: pointer; }
table.dt tbody tr[data-href]:hover { background: var(--color-background-elevated); }
table.dt tbody tr[aria-selected="true"] { background: var(--color-accent-subtle); box-shadow: inset 2px 0 0 var(--color-accent-edge); }
table.dt tbody tr:last-child td { border-bottom: 0; }
.table-foot {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-hairline);
  font-size: 12px; color: var(--color-text-muted);
}
.table-foot .spacer { margin-left: auto; }
.cell-strong { font-weight: 600; }
.cell-sub { display: block; font-size: 11.5px; color: var(--color-text-muted); }

/* ---------- FilterBar ---------- */
.filterbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-4);
}
.chip {
  height: 30px; padding: 0 var(--space-3); display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--color-text-secondary); cursor: pointer;
}
.chip:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
.chip[aria-pressed="true"] {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent-edge);
  color: var(--color-accent-text);
}
.chip .glyph { font-size: 10px; }
.filterbar .spacer { margin-left: auto; }

/* ---------- CoverageStrip ---------- */
.coverage { display: block; width: 100%; height: 8px; border-radius: 2px; overflow: hidden; }
.coverage-lg { height: 24px; border-radius: var(--radius-sm); }
.cov-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 11.5px; color: var(--color-text-muted); margin-top: var(--space-2); }
.cov-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

/* ---------- Bars (signal coverage list) ---------- */
.bar-row { display: grid; grid-template-columns: 150px 1fr 52px; align-items: center; gap: var(--space-3); height: 26px; }
.bar-track { height: 6px; background: var(--color-background-inset); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--color-accent-excar); border-radius: 3px; }
.bar-row .num { text-align: right; font-size: 12.5px; }
.bar-row .name { font-size: 12.5px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; }

/* ---------- Sorted bar list (replaces the mockup's donut) ---------- */
.dist-row { display: grid; grid-template-columns: 168px 1fr 92px; align-items: center; gap: var(--space-3); height: 28px; }
.dist-row .name { font-size: 12.5px; color: var(--color-text-secondary); display: flex; align-items: center; gap: 7px; }
.dist-row .name i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.dist-track { height: 8px; background: var(--color-background-inset); border-radius: 2px; overflow: hidden; }
.dist-fill { height: 100%; border-radius: 2px; }
.dist-row .val { text-align: right; font-size: 12.5px; }
.dist-row .val span { color: var(--color-text-muted); font-size: 11px; margin-left: 5px; }

/* ---------- VehicleCard ---------- */
.vcard { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-hairline); }
.vcard:last-child { border-bottom: 0; }
.vcard-thumb {
  width: 76px; height: 48px; flex: none; border-radius: var(--radius-sm);
  background: var(--color-background-inset);
  border: 1px solid var(--color-border-hairline);
  display: grid; place-items: center; overflow: hidden;
}
.vcard-thumb svg { width: 56px; height: 26px; opacity: 0.5; }
/* Explicit no-image state. A placeholder that could be mistaken for evidence
   is exactly the class of error this product exists to prevent. */
.vcard-thumb.noimg { position: relative; }
.vcard-thumb.noimg::after {
  content: "NO IMAGE"; position: absolute; bottom: 2px; left: 0; right: 0;
  text-align: center; font-size: 7.5px; letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.vcard-main { flex: 1; min-width: 0; }
.vcard-name { font-weight: 600; font-size: 14px; }
.vcard-meta { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.vcard-stats { display: flex; gap: var(--space-6); text-align: right; }
.vcard-stat .v { font-size: var(--type-metric-sm-size); font-weight: 600; line-height: 1.1; }
.vcard-stat .k { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }

/* ---------- UserCard ---------- */
.ucard { display: flex; gap: var(--space-4); align-items: center; }
.ucard .avatar { width: 40px; height: 40px; font-size: 13px; }
.ucard-name { font-weight: 600; font-size: 15px; }
/* SUBJECT is a different kind of thing from a TEAM MEMBER and must look it. */
.type-tag {
  display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px;
  border-radius: 3px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.type-subject { background: color-mix(in srgb, var(--color-nocturne-pewter, #888470) 18%, transparent); color: #C6C0AE; border: 1px solid color-mix(in srgb, #888470 40%, transparent); }
.type-member  { background: var(--color-accent-subtle); color: var(--color-accent-text); border: 1px solid var(--color-accent-edge); }

/* ---------- States: Empty / Restricted / Unknown / Error / Loading ---------- */
.state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-10) var(--space-6); text-align: center;
  border-radius: var(--radius-md);
}
.state .state-glyph { font-size: 20px; line-height: 1; opacity: 0.85; }
.state .state-title { font-weight: 600; font-size: 13.5px; }
.state .state-body { font-size: 12.5px; color: var(--color-text-muted); max-width: 46ch; }
.state-empty     { background: var(--color-background-inset); }
.state-notacq    { background: var(--color-background-inset); }
.state-pending   { background: var(--color-background-inset); }
.state-error     { background: color-mix(in srgb, var(--color-state-error) 8%, var(--color-background-inset)); }
.state-unavail   { background: color-mix(in srgb, var(--color-state-warning) 8%, var(--color-background-inset)); }
/* Restricted carries a cross-hatch so it is never mistaken for empty. */
.state-restricted {
  background:
    repeating-linear-gradient(45deg, transparent 0 5px, color-mix(in srgb, var(--color-state-info) 10%, transparent) 5px 6px),
    var(--color-background-inset);
  border: 1px solid color-mix(in srgb, var(--color-state-info) 24%, transparent);
}
.state-restricted .state-glyph { color: var(--color-state-info); }
.state-loading { background: var(--color-background-inset); }

/* ---------- EvidenceDrawer ---------- */
.scrim {
  position: fixed; inset: 0; background: var(--color-background-scrim);
  opacity: 0; pointer-events: none; transition: opacity var(--motion-base) var(--easing); z-index: 40;
}
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 92vw; z-index: 50;
  background: var(--color-background-overlay);
  border-left: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-overlay);
  transform: translateX(100%); transition: transform var(--motion-base) var(--easing);
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-hairline);
}
.drawer-head .spacer { margin-left: auto; }
.drawer-body { overflow-y: auto; padding: var(--space-5); }
.drawer-close {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: none; border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary); cursor: pointer; line-height: 1;
}

/* Fixed field order — part of the contract, not a layout preference. */
.kv { display: grid; grid-template-columns: 132px 1fr; gap: var(--space-2) var(--space-4); align-items: baseline; }
.kv dt {
  font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  font-weight: 600; color: var(--color-text-muted); padding-top: 2px;
}
.kv dd { margin: 0; font-size: 13px; word-break: break-word; }
.kv dd .mono { color: var(--color-text-secondary); }

.hexwell {
  background: var(--color-background-inset); border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-sm); padding: var(--space-3);
  font-family: var(--font-mono); font-size: 11.5px; line-height: 18px;
  color: var(--color-text-secondary); white-space: pre-wrap; word-break: break-all;
}

/* ---------- Buttons ---------- */
.btn {
  height: 32px; padding: 0 var(--space-4); border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default); background: var(--color-background-elevated);
  color: var(--color-text-primary); font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { border-color: var(--color-border-strong); }
.btn-primary { background: var(--color-accent-excar); border-color: var(--color-accent-excar); color: var(--color-text-inverse); font-weight: 600; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: none; border-color: transparent; color: var(--color-text-secondary); }
.btn-ghost:hover { background: var(--color-background-elevated); }
.btn-danger { background: color-mix(in srgb, var(--color-state-error) 16%, transparent); border-color: color-mix(in srgb, var(--color-state-error) 50%, transparent); color: var(--color-state-error); }
.btn-sm { height: 26px; padding: 0 var(--space-3); font-size: 12px; }
.btn.is-disabled, .btn[aria-disabled="true"] { opacity:.45; pointer-events:none; }

/* ---------- Staff authentication ---------- */
.auth-gate {
  min-height:100vh; padding:28px clamp(22px,5vw,72px); display:grid;
  grid-template-rows:auto 1fr; background:
    radial-gradient(circle at 72% 38%, rgba(57,150,239,.075), transparent 26%),
    linear-gradient(115deg, #0a0a09 0 48%, #10100f 100%);
}
.auth-brand { display:flex; align-items:center; gap:12px; color:var(--color-text-muted); font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.auth-brand img { width:auto; height:23px; }
.auth-brand span { padding-left:12px; border-left:1px solid var(--color-border-default); }
.auth-panel { position:relative; align-self:center; width:min(620px,100%); margin-left:clamp(0px,7vw,110px); overflow:hidden; padding:52px 54px 30px; border:1px solid var(--color-border-hairline); border-radius:var(--radius-xl); background:rgba(18,18,17,.88); box-shadow:var(--shadow-modal); }
.auth-light { position:absolute; top:-30px; right:-12%; width:62%; height:2px; background:linear-gradient(90deg,transparent,var(--color-accent-excar),transparent); box-shadow:0 0 24px 5px rgba(57,150,239,.18); transform:rotate(-6deg); }
.auth-panel h1 { margin:16px 0 18px; font-size:clamp(38px,6vw,68px); line-height:1.04; font-weight:500; letter-spacing:-.045em; }
.auth-panel h1 .editorial { color:var(--color-text-secondary); }
.auth-panel > p { max-width:52ch; margin:0; color:var(--color-text-secondary); font-size:13px; line-height:21px; }
.auth-message { min-height:18px; margin-top:22px; color:var(--color-text-muted); font-size:11px; }
.auth-submit { height:42px; margin-top:12px; padding:0 18px; }
.auth-foot { display:flex; justify-content:space-between; gap:18px; margin-top:46px; padding-top:15px; border-top:1px solid var(--color-border-hairline); color:var(--color-text-faint); font-size:8px; letter-spacing:.12em; text-transform:uppercase; }

.auth-health { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-bottom:14px; overflow:hidden; border:1px solid var(--color-border-hairline); border-radius:var(--radius-lg); background:var(--color-border-hairline); }
.auth-health > div { display:flex; flex-direction:column; gap:6px; min-height:110px; padding:18px; background:var(--color-background-surface); }
.auth-health strong { font-size:17px; font-weight:600; }
.auth-health span:last-child { color:var(--color-text-muted); font-size:10px; line-height:15px; }
.inline-control { width:auto; min-width:112px; }
.form-message { min-height:17px; margin-top:10px; color:var(--color-text-muted); font-size:10px; line-height:15px; }
.session-list { display:flex; flex-direction:column; }
.session-row { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:64px; padding:11px 16px; border-bottom:1px solid var(--color-border-hairline); }
.session-row:last-child { border-bottom:0; }
.session-row > div { display:flex; align-items:center; gap:9px; }
.session-row > div:first-child { align-items:flex-start; flex-direction:column; gap:3px; }
.session-row strong { font-size:12px; }
.session-row span:not(.badge) { color:var(--color-text-muted); font-size:10px; }

/* ---------- Meta line (watermark / generation) ---------- */
.metaline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  font-size: 11.5px; color: var(--color-text-muted);
  padding: var(--space-3) 0 0; border-top: 1px solid var(--color-border-hairline); margin-top: var(--space-6);
}
.metaline b { font-weight: 600; color: var(--color-text-secondary); }

/* ---------- Tooltip (definition popover) ---------- */
.pop {
  position: fixed; z-index: 60; max-width: 380px;
  background: var(--color-background-overlay);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-overlay);
  padding: var(--space-4); font-size: 12.5px; display: none;
}
.pop.open { display: block; }
.pop h4 { margin: 0 0 var(--space-2); font-size: 13px; }
.pop .kv { grid-template-columns: 104px 1fr; }
.pop .kv dd { font-size: 12px; }

/* ---------- Two-column detail layout ---------- */
.detail { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-6); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* ---------- Timeline (epochs) ---------- */
.epoch-track { position: relative; height: 26px; background: var(--color-background-inset); border-radius: var(--radius-sm); overflow: hidden; }
.epoch-seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 8px; font-size: 11px; border-right: 1px solid var(--color-background-base); overflow: hidden; white-space: nowrap; }
.epoch-acq { background: color-mix(in srgb, var(--color-accent-excar) 18%, transparent); color: var(--color-accent-text); }
.epoch-base { background: color-mix(in srgb, var(--color-state-derived) 18%, transparent); color: var(--color-state-derived); }

/* ---- provenance -------------------------------------------------------- */
/* A synthetic fixture must never be able to read as real vehicle history, so
   it is labelled wherever it appears rather than inferred by the reader. */
.origin { display:inline-block; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.08em; padding:2px 6px; border-radius:3px; font-weight:700;
  border:1px solid transparent; white-space:nowrap; }
.origin-real_source      { background:color-mix(in srgb,var(--color-state-success) 16%,transparent);
                           color:var(--color-state-success);
                           border-color:color-mix(in srgb,var(--color-state-success) 40%,transparent); }
.origin-synthetic_fixture{ background:color-mix(in srgb,var(--color-accent) 14%,transparent);
                           color:var(--color-accent-text);
                           border-color:color-mix(in srgb,var(--color-accent) 45%,transparent); }
.origin-replay           { background:color-mix(in srgb,var(--color-state-warning) 16%,transparent);
                           color:var(--color-state-warning);
                           border-color:color-mix(in srgb,var(--color-state-warning) 40%,transparent); }
.origin-derived,
.origin-mixed            { background:var(--color-background-inset); color:var(--color-text-muted);
                           border-color:var(--color-border-hairline); }

.origin-banner { display:flex; flex-direction:column; gap:2px; margin-bottom:var(--space-5);
  padding:10px 14px; border-radius:var(--radius-md); font-size:12.5px;
  background:color-mix(in srgb,var(--color-accent) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--color-accent) 35%,transparent); }
.origin-banner strong { color:var(--color-accent-text); letter-spacing:.02em; }
.origin-banner span { color:var(--color-text-muted); }

/* ---- diagnostics ------------------------------------------------------- */
.dtc-row { display:grid; grid-template-columns:78px 1fr auto; gap:10px; align-items:start;
  padding:10px 0; border-bottom:1px solid var(--color-border-hairline); }
.dtc-row:last-child { border-bottom:0; }
.dtc-presence { font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.06em; padding:3px 6px; border-radius:3px; text-align:center; }
.tone-warning { background:color-mix(in srgb,var(--color-state-error) 16%,transparent);
                color:var(--color-state-error); }
.tone-success { background:color-mix(in srgb,var(--color-state-success) 16%,transparent);
                color:var(--color-state-success); }
.tone-unknown { background:var(--color-background-inset); color:var(--color-text-muted);
                border:1px dashed var(--color-border-hairline); }
.responders { display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.responder { font-family:var(--font-mono); font-size:10.5px; padding:2px 6px; border-radius:3px;
  background:var(--color-background-inset); color:var(--color-text-muted); }
.responder.answered { color:var(--color-state-success); }
.responder.silent   { color:var(--color-state-error); }

.sev { font-size:10px; font-weight:700; letter-spacing:.06em; padding:2px 6px;
  border-radius:3px; font-family:var(--font-mono); }
.sev-serious       { background:color-mix(in srgb,var(--color-state-error) 16%,transparent);
                     color:var(--color-state-error); }
.sev-attention     { background:color-mix(in srgb,var(--color-state-warning) 16%,transparent);
                     color:var(--color-state-warning); }
.sev-informational { background:var(--color-background-inset); color:var(--color-text-muted); }

/* ---- at-cursor --------------------------------------------------------- */
.cursor-bar { display:flex; align-items:center; gap:12px; margin:10px 0 6px; }
.cursor-bar input[type=range] { flex:1; accent-color:var(--color-accent); }
.cursor-readout { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:8px; margin-top:8px; }
.cur { padding:8px 10px; border-radius:var(--radius-sm); background:var(--color-background-inset);
  border:1px solid var(--color-border-hairline); }
.cur-sig { font-family:var(--font-mono); font-size:10.5px; color:var(--color-text-muted); }
.cur-val { font-size:19px; font-weight:600; margin:2px 0; }
.cur-state { font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; }
.cur-note { font-size:11px; color:var(--color-text-muted); margin-top:3px; line-height:1.35; }
.acq-valid   { color:var(--color-state-success); }
.acq-suspect { color:var(--color-state-warning); }
.acq-stale   { color:var(--color-state-warning); }
.acq-missing, .acq-unknown, .acq-failed, .acq-not_attempted, .acq-unsupported {
  color:var(--color-text-muted); }

/* ========================================================================
   Nocturne operational layer
   ======================================================================== */

.card {
  background:var(--color-background-surface);
  border-color:var(--color-border-hairline);
  border-radius:var(--radius-lg);
  box-shadow:0 1px 0 rgba(255,255,255,.012);
}
.card:hover { border-color:#302f2c; }
.card-head { min-height:52px; padding:14px 18px; }
.card-body { padding:18px; }
.btn { border-radius:var(--radius-sm); font-size:11px; font-weight:600; letter-spacing:.01em; }
.btn-primary { box-shadow:0 0 0 1px rgba(57,150,239,.2), 0 8px 22px rgba(57,150,239,.10); }
.chip { border-radius:var(--radius-pill); padding:5px 11px; font-size:10px; }
.badge { height:19px; padding:0 7px; font-size:9px; letter-spacing:.075em; }
.origin { border-radius:var(--radius-pill); padding:2px 7px; font-size:9px; }

.overview-hero {
  position:relative;
  min-height:210px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  margin:-6px 0 16px;
  padding:34px 36px;
  border:1px solid var(--color-border-hairline);
  border-radius:var(--radius-xl);
  background:
    radial-gradient(ellipse 56% 100% at 76% 100%, rgba(57,150,239,.075), transparent 70%),
    linear-gradient(110deg, #111110 0%, #0c0c0b 58%, #101213 100%);
}
.overview-hero::before {
  content:"";
  position:absolute;
  right:-2%;
  top:17%;
  width:56%;
  height:64%;
  border-top:1px solid rgba(114,183,246,.42);
  border-radius:50% 48% 8% 20%;
  transform:skewX(-18deg) rotate(-5deg);
  filter:drop-shadow(0 0 8px rgba(57,150,239,.22));
  opacity:.75;
}
.overview-hero::after {
  content:"";
  position:absolute;
  right:7%;
  bottom:22%;
  width:38%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(57,150,239,.55),transparent);
  box-shadow:0 0 12px rgba(57,150,239,.28);
}
.hero-copy { position:relative; z-index:1; max-width:690px; }
.hero-kicker { margin-bottom:13px; color:var(--color-accent-text); font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.hero-title { margin:0; font-family:var(--font-serif); font-size:clamp(30px,4vw,47px); line-height:1.14; font-weight:400; letter-spacing:-.035em; }
.hero-title em { color:var(--color-text-primary); font-weight:400; }
.hero-sub { margin:11px 0 0; color:var(--color-text-secondary); font-size:13px; }
.hero-mark { position:absolute; right:28px; top:24px; color:var(--color-text-faint); font-family:var(--font-serif); font-style:italic; font-size:12px; text-align:right; }

.health-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-bottom:14px;
  border:1px solid var(--color-border-hairline);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--color-background-surface);
}
.health-item { min-width:0; padding:14px 16px; border-right:1px solid var(--color-border-hairline); }
.health-item:last-child { border-right:0; }
.health-label { display:flex; align-items:center; gap:7px; color:var(--color-text-muted); font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.health-label .icon { color:var(--color-text-faint); }
.health-value { margin-top:5px; color:var(--color-text-secondary); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.health-value strong { color:var(--color-text-primary); font-weight:600; }

.panel-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr); gap:14px; }
.panel-grid-balanced { grid-template-columns:repeat(2,minmax(0,1fr)); }
.panel-title-row { display:flex; align-items:baseline; gap:10px; }
.panel-note { margin-left:auto; color:var(--color-text-muted); font-size:10px; }

.activity-list { display:flex; flex-direction:column; }
.activity-row { display:grid; grid-template-columns:minmax(130px,1.3fr) minmax(110px,.9fr) auto; gap:16px; align-items:center; min-height:59px; padding:10px 18px; border-top:1px solid var(--color-border-hairline); color:inherit; }
.activity-row:first-child { border-top:0; }
.activity-row:hover { background:rgba(255,255,255,.014); }
.activity-primary { min-width:0; }
.activity-title { color:var(--color-text-primary); font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.activity-sub { margin-top:3px; color:var(--color-text-muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.activity-meta { color:var(--color-text-secondary); font-family:var(--font-mono); font-size:10px; }
.row-arrow { color:var(--color-text-faint); }

.attention-row { display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:12px; align-items:start; padding:14px 17px; border-top:1px solid var(--color-border-hairline); color:inherit; }
.attention-row:first-child { border-top:0; }
.attention-dot { width:7px; height:7px; margin-top:6px; border-radius:50%; background:var(--color-state-unknown); }
.attention-dot.serious { background:var(--color-state-error); box-shadow:0 0 8px rgba(231,119,112,.3); }
.attention-dot.attention { background:var(--color-state-warning); }
.attention-dot.informational { background:var(--color-state-info); }
.attention-copy strong { display:block; color:var(--color-text-primary); font-size:11px; font-weight:600; text-transform:capitalize; }
.attention-copy span { display:block; margin-top:3px; color:var(--color-text-muted); font-size:10px; }

.future-list { padding:4px 17px 14px; }
.future-row { display:flex; align-items:center; gap:11px; padding:12px 0; border-top:1px solid var(--color-border-hairline); }
.future-row:first-child { border-top:0; }
.future-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:var(--radius-sm); color:var(--color-text-faint); background:var(--color-background-inset); border:1px solid var(--color-border-hairline); }
.future-copy { min-width:0; }
.future-copy strong { display:block; font-size:11px; color:var(--color-text-secondary); }
.future-copy span { display:block; margin-top:2px; font-size:9.5px; color:var(--color-text-faint); }
.future-state { margin-left:auto; color:var(--color-text-faint); font-size:8px; letter-spacing:.1em; text-transform:uppercase; }

.entity-header { display:flex; align-items:center; gap:18px; margin-bottom:22px; padding:22px 24px; border:1px solid var(--color-border-hairline); border-radius:var(--radius-lg); background:var(--color-background-surface); }
.entity-mark { width:48px; height:48px; display:grid; place-items:center; flex:none; border-radius:var(--radius-lg); color:var(--color-accent-text); background:var(--color-accent-surface); border:1px solid var(--color-accent-edge); }
.entity-copy { min-width:0; }
.entity-copy h1 { margin:2px 0 0; font-size:25px; line-height:31px; letter-spacing:-.03em; font-weight:600; }
.entity-meta { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:7px; color:var(--color-text-muted); font-size:10px; }
.entity-actions { margin-left:auto; }

.definition-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; padding:1px; background:var(--color-border-hairline); border:1px solid var(--color-border-hairline); border-radius:var(--radius-lg); overflow:hidden; }
.definition { min-width:0; padding:15px 17px; background:var(--color-background-surface); }
.definition-label { color:var(--color-text-muted); font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.definition-value { margin-top:6px; color:var(--color-text-primary); font-size:18px; line-height:24px; font-weight:600; }
.definition-note { margin-top:3px; color:var(--color-text-faint); font-size:9.5px; }

.relationship-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; }
.relationship-card { padding:16px; border:1px solid var(--color-border-hairline); border-radius:var(--radius-md); background:var(--color-background-raised); }
.relationship-type { color:var(--color-text-muted); font-size:9px; letter-spacing:.11em; text-transform:uppercase; }
.relationship-name { margin-top:8px; color:var(--color-text-primary); font-size:14px; font-weight:600; }
.relationship-meta { margin-top:4px; color:var(--color-text-muted); font-size:10px; }
.relationship-status { margin-top:12px; }

.scope-card { padding:18px; border:1px solid var(--color-border-hairline); border-radius:var(--radius-lg); background:var(--color-background-surface); }
.scope-card-title { margin:0 0 12px; font-size:13px; }
.token-list { display:flex; flex-wrap:wrap; gap:6px; }
.token { display:inline-flex; align-items:center; min-height:24px; padding:3px 8px; border-radius:var(--radius-pill); background:var(--color-background-inset); border:1px solid var(--color-border-hairline); color:var(--color-text-muted); font-family:var(--font-mono); font-size:9px; }
.token.is-class { color:var(--color-accent-text); border-color:var(--color-accent-edge); background:var(--color-accent-surface); }

.notice { display:flex; align-items:flex-start; gap:11px; padding:13px 15px; border:1px solid var(--color-border-hairline); border-radius:var(--radius-md); background:var(--color-background-inset); color:var(--color-text-muted); font-size:11px; line-height:17px; }
.notice .icon { margin-top:1px; color:var(--color-accent-text); }
.notice strong { color:var(--color-text-secondary); }

.import-panel { padding:18px; border:1px dashed var(--color-border-default); border-radius:var(--radius-lg); background:var(--color-background-inset); }
.field-label { display:block; margin:12px 0 5px; color:var(--color-text-muted); font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.field-control { width:100%; min-height:34px; padding:6px 9px; background:var(--color-background-surface); border:1px solid var(--color-border-default); border-radius:var(--radius-sm); color:var(--color-text-secondary); font-size:11px; }

.recording-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:14px; align-items:start; }
.recording-main,.recording-side { display:flex; min-width:0; flex-direction:column; gap:14px; }
.signal-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.chart-wrap { position:relative; min-height:244px; padding:12px; background:var(--color-background-inset); border-color:var(--color-border-hairline); border-radius:var(--radius-md); }
.chart-wrap > svg { display:block; width:100%; max-width:100%; }
.chart-scale { display:flex; justify-content:space-between; margin-top:7px; color:var(--color-text-faint); font-family:var(--font-mono); font-size:9px; }
.legend { color:var(--color-text-muted); }

.system-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.system-card { padding:17px; border:1px solid var(--color-border-hairline); border-radius:var(--radius-lg); background:var(--color-background-surface); }
.system-card-head { display:flex; align-items:center; gap:9px; color:var(--color-text-secondary); font-size:11px; font-weight:600; }
.system-card-head .icon { color:var(--color-accent-text); }
.system-card-value { margin-top:14px; color:var(--color-text-primary); font-size:18px; font-weight:600; }
.system-card-note { margin-top:5px; color:var(--color-text-muted); font-size:10px; line-height:15px; }

.state { min-height:150px; }
.state-glyph { color:var(--color-text-faint); }
.metaline { margin-top:24px; padding:12px 0 0; border-top:1px solid var(--color-border-hairline); color:var(--color-text-faint); }
.metaline b { color:var(--color-text-muted); }
.drawer { width:min(470px,94vw); background:var(--color-background-raised); }
.drawer-head { min-height:70px; padding:16px 18px; }
.drawer-title { display:block; margin-top:3px; font-family:var(--font-serif); font-size:19px; font-weight:400; }
.drawer-body { padding:20px; }
.drawer.open { transform:translateX(0); }
.scrim { background:var(--color-background-scrim); }
.dt th { height:38px; color:var(--color-text-muted); font-size:9px; letter-spacing:.09em; }
.dt tbody tr { transition:background var(--motion-fast) var(--easing); }
.dt tbody tr:hover { background:rgba(255,255,255,.016); }
.dt td { color:var(--color-text-secondary); font-size:11px; }
.cell-strong { color:var(--color-text-primary); }

@media (max-width:1100px) {
  .health-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .health-item:nth-child(2) { border-right:0; }
  .health-item:nth-child(-n+2) { border-bottom:1px solid var(--color-border-hairline); }
  .panel-grid,.panel-grid-balanced,.recording-layout { grid-template-columns:1fr; }
  .definition-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .system-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:680px) {
  .auth-gate { padding:22px 16px; }
  .auth-panel { margin-left:0; padding:38px 24px 24px; }
  .auth-foot { flex-direction:column; }
  .auth-health { grid-template-columns:1fr; }
  .session-row { align-items:flex-start; flex-direction:column; }
  .overview-hero { min-height:260px; padding:27px 22px; }
  .overview-hero::before { width:90%; right:-35%; }
  .hero-mark { display:none; }
  .health-strip,.definition-grid,.system-grid { grid-template-columns:1fr; }
  .health-item { border-right:0; border-bottom:1px solid var(--color-border-hairline); }
  .health-item:last-child { border-bottom:0; }
  .activity-row { grid-template-columns:minmax(0,1fr) auto; }
  .activity-meta { display:none; }
  .entity-header { align-items:flex-start; padding:18px; }
  .entity-actions { display:none; }
  .table-wrap { overflow-x:auto; }
  .dt { min-width:720px; }
}