/* ══════════════════════════════════════════════════════════════════════════════
   ASTRA · DPO/DARS Accessibility Console — design system
   Aesthetic: mission-control instrument panel. Carbon field, teal signal, corner
   ticks, fine grid atmosphere. Two voices:
     JetBrains Mono  = the machine (telemetry, labels, ids, nav, verdicts)
     Inter           = the human  (explanations, guidance, prose)
   ══════════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'JBMono'; font-weight: 400; font-display: swap; src: url('/fonts/jbmono-400.woff2') format('woff2'); }
@font-face { font-family: 'JBMono'; font-weight: 500; font-display: swap; src: url('/fonts/jbmono-500.woff2') format('woff2'); }
@font-face { font-family: 'InterUI'; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'InterUI'; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'InterUI'; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'InterUI'; font-weight: 700; font-display: swap; src: url('/fonts/inter-700.woff2') format('woff2'); }

:root {
  --void: #06080d;
  --carbon: #0a0e16;
  --panel: #0f141f;
  --panel-2: #131a26;
  --elev: #19212f;
  --line: #1d2634;
  --line-2: #2b3648;

  --text: #e9eef6;
  --dim: #9aa7ba;
  --mute: #5f6d82;

  --signal: #3dd6c4;
  --signal-2: #7ef0e2;
  --signal-dim: #176f66;
  --pass: #3fb950;
  --fail: #ff5f54;
  --review: #f0b429;
  --vision: #bc8cff;
  --tmodel: #58a6ff;
  --act: #ff9f43;

  --mono: 'JBMono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans: 'InterUI', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r: 12px;
  --r-sm: 8px;
  --sb: 232px;
}

* { box-sizing: border-box; }
/* `display` on a class must never beat the hidden attribute (grid/flex would otherwise win) */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--carbon); color: var(--text);
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* atmosphere: fine grid + a slow radial breath behind the content */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(61,214,196,.028) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(61,214,196,.028) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 30%, transparent 78%);
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(900px 600px at 78% -8%, rgba(61,214,196,.07), transparent 62%),
              radial-gradient(700px 520px at 8% 108%, rgba(88,166,255,.05), transparent 62%);
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(61,214,196,.28); }

/* Visible focus everywhere — this console is held to the standard it measures (WCAG 2.4.7). */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--signal); color: #04211e; font: 500 12.5px/1 var(--mono); transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* scrollbars — thin, instrument-like */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a4759; }

.mono { font-family: var(--mono); }
.muted { color: var(--dim); }
.mute { color: var(--mute); }

/* ── shell ────────────────────────────────────────────────────────────────── */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: var(--sb) 1fr; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(15,20,31,.92), rgba(8,11,18,.92));
  border-right: 1px solid var(--line); backdrop-filter: blur(8px);
}
.sb-brand { display: flex; align-items: center; gap: 11px; padding: 18px 18px 16px; border-bottom: 1px solid var(--line); }
.mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none; position: relative;
  background: conic-gradient(from 210deg, var(--signal), #6b8cff 55%, var(--vision));
  box-shadow: 0 0 18px -3px var(--signal-dim);
}
.mark::after { content: ''; position: absolute; inset: 7px; border-radius: 3px; background: var(--void); }
.sb-brand b { font-family: var(--mono); font-weight: 500; letter-spacing: .16em; font-size: 13px; }
.sb-brand span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--mute); margin-top: 2px; }

.sb-nav { padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.nav-sec { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; color: var(--mute); padding: 14px 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 12.5px; color: var(--dim); position: relative;
  border: 1px solid transparent; transition: background .14s, color .14s, border-color .14s;
}
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: linear-gradient(90deg, rgba(61,214,196,.14), rgba(61,214,196,.03)); color: var(--signal-2); border-color: rgba(61,214,196,.24); }
.nav-item.active::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--signal); border-radius: 0 3px 3px 0; box-shadow: 0 0 10px var(--signal); }
.nav-ico { width: 15px; text-align: center; opacity: .9; font-size: 13px; }
.nav-badge {
  margin-left: auto; font-size: 10.5px; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px;
  display: grid; place-items: center; background: rgba(240,180,41,.16); color: var(--review); border: 1px solid rgba(240,180,41,.34);
}
.nav-badge.live { background: rgba(61,214,196,.16); color: var(--signal); border-color: rgba(61,214,196,.36); animation: pulse 2s infinite; }

.sb-foot { border-top: 1px solid var(--line); padding: 12px 14px; font-family: var(--mono); font-size: 10.5px; color: var(--mute); }
.sb-stat { display: flex; align-items: center; gap: 7px; padding: 3px 0; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); flex: none; }
.dot.ok { background: var(--pass); box-shadow: 0 0 7px var(--pass); }
.dot.live { background: var(--signal); box-shadow: 0 0 8px var(--signal); animation: pulse 1.6s infinite; }
.dot.warn { background: var(--review); box-shadow: 0 0 7px var(--review); }
.dot.err { background: var(--fail); box-shadow: 0 0 7px var(--fail); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px;
  padding: 0 26px; height: 60px; border-bottom: 1px solid var(--line);
  background: rgba(10,14,22,.82); backdrop-filter: blur(12px);
}
.tb-title { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; }
.tb-sub { color: var(--mute); font-family: var(--mono); font-size: 11px; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.user-chip { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); padding: 5px 11px; border: 1px solid var(--line); border-radius: 20px; }

.content { padding: 26px; max-width: 1400px; width: 100%; }
.content.wide { max-width: none; }

/* page heading */
.page-head { margin-bottom: 22px; }
.page-head h1 { font-family: var(--mono); font-weight: 500; font-size: 23px; letter-spacing: -.01em; margin: 0 0 7px; }
.page-head p { margin: 0; color: var(--dim); max-width: 76ch; }
.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--signal); margin-bottom: 9px; }

/* ── primitives ───────────────────────────────────────────────────────────── */
.panel {
  position: relative; background: linear-gradient(165deg, var(--panel), rgba(9,12,19,.9));
  border: 1px solid var(--line); border-radius: var(--r); padding: 18px;
}
/* instrument corner ticks */
.panel.ticks::before, .panel.ticks::after {
  content: ''; position: absolute; width: 9px; height: 9px; border-color: var(--line-2); border-style: solid;
}
.panel.ticks::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; border-top-left-radius: var(--r); border-color: var(--signal-dim); }
.panel.ticks::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; border-bottom-right-radius: var(--r); border-color: var(--signal-dim); }
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.panel-head h2 { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .16em; color: var(--dim); margin: 0; text-transform: uppercase; }
.panel-head .spacer { margin-left: auto; }

.btn {
  font: 500 12.5px/1 var(--mono); color: var(--text); background: var(--elev);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 15px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: all .14s; white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--signal-dim); background: var(--panel-2); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, var(--signal), #2bbfae); border-color: var(--signal); color: #04211e; font-weight: 500; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.09); box-shadow: 0 0 22px -6px var(--signal); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 7px 11px; font-size: 11.5px; }
.btn.danger { color: var(--fail); border-color: rgba(255,95,84,.3); }

.input, select.input, textarea.input {
  font: 400 13px/1.4 var(--sans); width: 100%; padding: 11px 13px; color: var(--text);
  background: var(--void); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(61,214,196,.1); }
.input::placeholder { color: var(--mute); }
.f-label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--mute); margin-bottom: 8px; text-transform: uppercase; }
.hint { font-size: 12.5px; color: var(--mute); margin-top: 8px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .09em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px;
  border: 1px solid var(--line-2); color: var(--dim); white-space: nowrap;
}
.pill.pass { color: var(--pass); border-color: rgba(63,185,80,.34); background: rgba(63,185,80,.1); }
.pill.fail { color: var(--fail); border-color: rgba(255,95,84,.34); background: rgba(255,95,84,.1); }
.pill.review, .pill.needs_review { color: var(--review); border-color: rgba(240,180,41,.34); background: rgba(240,180,41,.1); }
.pill.live { color: var(--signal); border-color: rgba(61,214,196,.36); background: rgba(61,214,196,.1); }
.pill.planned { color: var(--mute); }
.pill.running { color: var(--signal); border-color: rgba(61,214,196,.36); background: rgba(61,214,196,.1); }
.pill.done { color: var(--pass); border-color: rgba(63,185,80,.3); }
.pill.error { color: var(--fail); border-color: rgba(255,95,84,.3); }
.pill.blocking { color: var(--fail); border-color: rgba(255,95,84,.4); }
.pill.major { color: #ff9178; border-color: rgba(255,145,120,.3); }
.pill.minor { color: var(--review); border-color: rgba(240,180,41,.26); }
.pill.advisory { color: var(--mute); }
.crit { font-family: var(--mono); font-size: 10.5px; color: var(--signal); background: rgba(61,214,196,.1); border: 1px solid rgba(61,214,196,.24); padding: 2px 7px; border-radius: 4px; }

.bar { height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--signal-dim), var(--signal)); border-radius: 3px; }

.empty { padding: 34px; text-align: center; color: var(--mute); border: 1px dashed var(--line-2); border-radius: var(--r); font-family: var(--mono); font-size: 12.5px; }
.err-box { padding: 16px; border: 1px solid rgba(255,95,84,.35); background: rgba(255,95,84,.07); color: #ffb0a8; border-radius: var(--r); }
.loading { padding: 40px; color: var(--mute); font-family: var(--mono); font-size: 12px; }

/* segmented filters */
.seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--void); border: 1px solid var(--line); border-radius: var(--r-sm); flex-wrap: wrap; }
.seg button {
  font: 400 11.5px/1 var(--mono); color: var(--dim); background: transparent; border: 0;
  padding: 7px 11px; border-radius: 6px; cursor: pointer; transition: all .12s;
}
.seg button:hover { color: var(--text); background: var(--panel-2); }
.seg button.active { background: var(--elev); color: var(--signal-2); box-shadow: inset 0 0 0 1px rgba(61,214,196,.22); }

/* staggered entrance */
.rise { animation: rise .42s cubic-bezier(.22,.68,.24,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* ── overview ─────────────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { position: relative; padding: 16px 17px; background: linear-gradient(165deg, var(--panel), rgba(9,12,19,.86)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tile::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line-2); }
.tile.acc-fail::after { background: linear-gradient(90deg, var(--fail), transparent); }
.tile.acc-review::after { background: linear-gradient(90deg, var(--review), transparent); }
.tile.acc-pass::after { background: linear-gradient(90deg, var(--pass), transparent); }
.tile.acc-signal::after { background: linear-gradient(90deg, var(--signal), transparent); }
.tile-l { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--mute); text-transform: uppercase; }
.tile-v { font-family: var(--mono); font-weight: 500; font-size: 30px; letter-spacing: -.02em; margin-top: 9px; line-height: 1; }
.tile-s { font-size: 11.5px; color: var(--mute); margin-top: 7px; }
.tile a.tile-s { color: var(--signal); }

/* quick start — the one-step demo path */
.qs { margin-bottom: 18px; border-color: rgba(61,214,196,.26); background: linear-gradient(150deg, rgba(61,214,196,.06), var(--panel) 46%); }
.qs .panel-head h2 { color: var(--signal); }
.qs-row { display: grid; grid-template-columns: 1.5fr 1.5fr auto; gap: 12px; align-items: end; }
.qs-row .qs-go { padding-bottom: 1px; }
.qs-row .qs-go .btn { width: 100%; justify-content: center; }
.qs select.input { cursor: pointer; font-family: var(--mono); font-size: 12.5px; }
.qs > input[type="url"] { margin-top: 12px; }
@media (max-width: 820px) { .qs-row { grid-template-columns: 1fr; } }

.grid-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1080px) { .grid-2 { grid-template-columns: 1fr; } }

.mix { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--line); margin: 4px 0 12px; }
.mix i { display: block; height: 100%; }
.mix i.pass { background: var(--pass); } .mix i.fail { background: var(--fail); } .mix i.review { background: var(--review); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.legend span { display: flex; align-items: center; gap: 6px; }
.sw { width: 8px; height: 8px; border-radius: 2px; }

.crit-rows { display: flex; flex-direction: column; gap: 9px; }
.crit-row { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; }
.crit-row .nm { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crit-row .ct { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.stack { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: var(--line); margin-top: 5px; }
.stack i { height: 100%; }

.list-rows { display: flex; flex-direction: column; }
.lrow { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.lrow:last-child { border-bottom: 0; }
.lrow .grow { flex: 1; min-width: 0; }
.lrow .t { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .s { font-family: var(--mono); font-size: 10.5px; color: var(--mute); margin-top: 3px; }

/* ── projects / runs ──────────────────────────────────────────────────────── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 13px; }
.pcard { display: block; padding: 17px; background: linear-gradient(165deg, var(--panel), rgba(9,12,19,.86)); border: 1px solid var(--line); border-radius: var(--r); transition: all .15s; }
.pcard:hover { border-color: var(--signal-dim); transform: translateY(-2px); box-shadow: 0 12px 34px -14px rgba(0,0,0,.8); }
.pcard .nm { font-family: var(--mono); font-size: 14px; margin-bottom: 10px; }
.pcard .mt { font-family: var(--mono); font-size: 10.5px; color: var(--mute); display: flex; gap: 8px; flex-wrap: wrap; }

.rtable { display: flex; flex-direction: column; gap: 7px; }
.rrow {
  display: grid; grid-template-columns: 92px 1fr auto auto; gap: 14px; align-items: center;
  padding: 13px 15px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); transition: all .13s;
}
.rrow:hover { border-color: var(--signal-dim); background: var(--panel-2); }
.rrow .lbl { min-width: 0; }
.rrow .lbl .t { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .lbl .s { font-family: var(--mono); font-size: 10.5px; color: var(--mute); margin-top: 3px; }
.counts { display: flex; gap: 6px; }
.cnt { font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--mute); }
.cnt.fail[data-n]:not([data-n="0"]) { color: var(--fail); border-color: rgba(255,95,84,.3); }
.cnt.review[data-n]:not([data-n="0"]) { color: var(--review); border-color: rgba(240,180,41,.3); }
.cnt.pass[data-n]:not([data-n="0"]) { color: var(--pass); border-color: rgba(63,185,80,.3); }

/* new-run composer */
.modes { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.mode { font: 400 12.5px/1 var(--mono); color: var(--dim); background: transparent; border: 1px solid transparent; padding: 9px 14px; border-radius: var(--r-sm); cursor: pointer; }
.mode:hover { color: var(--text); background: var(--panel-2); }
.mode.active { background: var(--elev); border-color: var(--line-2); color: var(--signal-2); }
.checkline { display: flex; align-items: center; gap: 9px; margin-top: 13px; color: var(--dim); font-size: 13px; }
.soon { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--mute); border: 1px solid var(--line-2); border-radius: 10px; padding: 2px 7px; text-transform: uppercase; }
.packs { display: flex; flex-direction: column; gap: 9px; }
.pack { display: flex; gap: 12px; align-items: flex-start; padding: 13px; background: var(--void); border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; transition: all .13s; }
.pack:hover { border-color: var(--signal-dim); }
.pack.on { border-color: var(--signal); background: var(--panel-2); }
.pack input { margin-top: 3px; accent-color: var(--signal); }
.pack .nm { font-family: var(--mono); font-size: 12.5px; display: flex; align-items: center; gap: 9px; }
.pack .ds { font-size: 12.5px; color: var(--dim); margin-top: 4px; }
.badge-n { font-family: var(--mono); font-size: 9.5px; color: var(--mute); border: 1px solid var(--line-2); border-radius: 9px; padding: 1px 7px; }

.banner { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-radius: var(--r); margin-bottom: 16px; font-size: 13px; }
.banner.warn { background: rgba(240,180,41,.08); border: 1px solid rgba(240,180,41,.3); color: #f4cf7a; }
.banner.live { background: rgba(61,214,196,.07); border: 1px solid rgba(61,214,196,.28); color: var(--signal-2); }
.banner .spacer { margin-left: auto; }

/* ── coverage ─────────────────────────────────────────────────────────────── */
.cov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cov {
  position: relative; padding: 15px 16px; background: linear-gradient(165deg, var(--panel), rgba(9,12,19,.86));
  border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; transition: all .15s; text-align: left; width: 100%; font: inherit; color: inherit;
}
.cov:hover { border-color: var(--signal-dim); transform: translateY(-2px); }
.cov.is-live { border-left: 2px solid var(--signal); }
.cov.is-planned { opacity: .72; }
.cov-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.cov-id { font-family: var(--mono); font-size: 12px; color: var(--signal); }
.cov.is-planned .cov-id { color: var(--mute); }
.cov-nm { font-size: 13.5px; font-weight: 600; line-height: 1.35; margin-bottom: 7px; }
.cov-pl { font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.cov-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.tier { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--mute); }
.tier.Gold { color: #e5c46b; border-color: rgba(229,196,107,.3); }
.tier.Silver { color: #c8d2e0; border-color: rgba(200,210,224,.24); }
.tier.Bronze { color: #d9a273; border-color: rgba(217,162,115,.28); }
.tier.Elderly { color: var(--vision); border-color: rgba(188,140,255,.28); }
.tier.Friendly { color: var(--tmodel); border-color: rgba(88,166,255,.28); }

/* drawer for item detail */
.drawer-bg { position: fixed; inset: 0; background: rgba(3,5,9,.72); backdrop-filter: blur(3px); z-index: 40; animation: fade .2s both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 94vw); z-index: 41; overflow-y: auto;
  background: linear-gradient(180deg, var(--panel), var(--carbon)); border-left: 1px solid var(--line-2);
  padding: 26px; animation: slide .28s cubic-bezier(.22,.68,.24,1) both;
}
@keyframes slide { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer h2 { font-size: 19px; margin: 8px 0 12px; line-height: 1.3; }
.drawer .x { position: absolute; top: 18px; right: 20px; }
.dsec { margin-top: 22px; }
.dsec h3 { font-family: var(--mono); font-size: 10px; letter-spacing: .17em; color: var(--mute); text-transform: uppercase; margin: 0 0 10px; }
.dlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.dlist li { display: flex; gap: 10px; font-size: 13px; color: var(--dim); line-height: 1.5; }
.dlist li::before { content: '▸'; color: var(--signal); flex: none; font-size: 10px; margin-top: 4px; }
.kv { display: grid; grid-template-columns: 128px 1fr; gap: 9px 14px; font-size: 13px; }
.kv dt { font-family: var(--mono); font-size: 10.5px; color: var(--mute); letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.kv dd { margin: 0; color: var(--dim); }

/* ── how it works ─────────────────────────────────────────────────────────── */
.flow { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 18px; position: relative; padding-bottom: 26px; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ''; position: absolute; left: 25px; top: 44px; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--signal-dim), var(--line)); }
.step:last-child::before { display: none; }
.step-n {
  width: 52px; height: 44px; display: grid; place-items: center; font-family: var(--mono); font-size: 14px;
  color: var(--signal); background: var(--panel); border: 1px solid rgba(61,214,196,.28); border-radius: var(--r-sm); position: relative; z-index: 1;
}
.step h3 { font-family: var(--mono); font-weight: 500; font-size: 15px; margin: 0 0 8px; letter-spacing: -.01em; }
.step p { margin: 0 0 10px; color: var(--dim); max-width: 74ch; }

/* ── review queue ─────────────────────────────────────────────────────────── */
.q-list { display: flex; flex-direction: column; gap: 11px; }
.q-item { background: linear-gradient(165deg, var(--panel), rgba(9,12,19,.86)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.q-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.q-body { display: grid; grid-template-columns: 1fr 220px; gap: 18px; padding: 16px; }
@media (max-width: 860px) { .q-body { grid-template-columns: 1fr; } }
.q-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; line-height: 1.35; }
.q-why { color: var(--dim); font-size: 13px; line-height: 1.55; }
.q-src { font-family: var(--mono); font-size: 10.5px; color: var(--mute); margin-top: 10px; }
.q-shot { border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; background: var(--void); }
.q-shot img { display: block; width: 100%; height: auto; max-height: 168px; object-fit: cover; cursor: zoom-in; }
.q-acts { display: flex; gap: 8px; padding: 13px 16px; border-top: 1px solid var(--line); background: rgba(6,8,13,.4); flex-wrap: wrap; }
.q-acts .spacer { margin-left: auto; }

/* ── live console (mission control) ───────────────────────────────────────── */
.lc { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100vh; }
.lc-bar {
  display: flex; align-items: center; gap: 14px; padding: 0 20px; height: 54px; flex: none;
  border-bottom: 1px solid var(--line); background: rgba(10,14,22,.86); backdrop-filter: blur(12px);
}
.lc-bar .back { font-family: var(--mono); font-size: 11.5px; color: var(--dim); padding: 6px 10px; border-radius: 6px; }
.lc-bar .back:hover { background: var(--panel-2); color: var(--text); }
.lc-name { font-family: var(--mono); font-size: 12.5px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* progress hairline */
.prog { height: 2px; background: var(--line); flex: none; }
.prog > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--signal-dim), var(--signal)); box-shadow: 0 0 12px var(--signal); transition: width .5s ease; }

/* NOW strip — what the agent is doing this second */
.now {
  position: relative; flex: none; display: flex; align-items: center; gap: 16px; padding: 15px 20px;
  border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(61,214,196,.06), transparent 60%); overflow: hidden;
}
.now::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(61,214,196,.09), transparent);
  transform: translateX(-100%); animation: sweep 3.6s ease-in-out infinite;
}
.lc.is-done .now::after { animation: none; opacity: 0; }
@keyframes sweep { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.now-badge {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; color: var(--signal); text-transform: uppercase;
  border: 1px solid rgba(61,214,196,.34); border-radius: 5px; padding: 4px 9px; flex: none;
}
.now-txt { min-width: 0; flex: 1; }
.now-t { font-family: var(--mono); font-size: 14px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-s { font-family: var(--mono); font-size: 11px; color: var(--mute); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-counts { display: flex; gap: 7px; flex: none; }

/* criterion rail */
.rail { display: flex; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--line); flex: none; overflow-x: auto; }
.rc {
  display: flex; align-items: center; gap: 9px; padding: 8px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--panel); flex: none; min-width: 152px; transition: all .25s;
}
.rc .id { font-family: var(--mono); font-size: 11.5px; color: var(--mute); }
.rc .nm { font-family: var(--mono); font-size: 10px; color: var(--mute); letter-spacing: .06em; }
.rc .n { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--mute); }
.rc.done { border-color: rgba(63,185,80,.3); }
.rc.done .id { color: var(--pass); }
.rc.active { border-color: var(--signal); background: linear-gradient(180deg, rgba(61,214,196,.12), var(--panel)); box-shadow: 0 0 22px -8px var(--signal); }
.rc.active .id, .rc.active .nm { color: var(--signal-2); }

/* three streams */
.streams { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 1px; background: var(--line); min-height: 0; }
@media (max-width: 1100px) { .streams { grid-template-columns: 1fr; overflow-y: auto; } }
.stream { display: flex; flex-direction: column; background: var(--carbon); min-height: 0; }
.stream-head {
  display: flex; align-items: center; gap: 9px; padding: 11px 16px; flex: none; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--dim);
  background: rgba(15,20,31,.6);
}
.stream-head .ico { font-size: 12px; }
.stream-head .n { margin-left: auto; font-size: 10px; color: var(--mute); border: 1px solid var(--line-2); border-radius: 9px; padding: 1px 8px; }
#s-reason .stream-head .ico { color: var(--signal); }
#s-act .stream-head .ico { color: var(--act); }
#s-evidence .stream-head .ico { color: var(--vision); }
.stream-body { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; min-height: 0; }

.ent { animation: rise .3s ease both; }
.ent-r { border-left: 2px solid var(--signal-dim); padding: 10px 12px; background: var(--panel); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ent-r.src-vision-model { border-left-color: var(--vision); }
.ent-r.src-text-model { border-left-color: var(--tmodel); }
.ent-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.src {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px;
  border-radius: 3px; color: var(--signal); background: rgba(61,214,196,.1);
}
.src.vision-model { color: var(--vision); background: rgba(188,140,255,.12); }
.src.text-model { color: var(--tmodel); background: rgba(88,166,255,.12); }
.ent-r .tx { font-size: 12.5px; color: var(--dim); line-height: 1.55; }

.ent-a { font-family: var(--mono); font-size: 11.5px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); }
.ent-a .cmd { color: var(--act); }
.ent-a .arg { color: var(--mute); }
.ent-a .xy { color: var(--signal); font-size: 10.5px; }
.ent-a img, .ev img { display: block; width: 100%; border-radius: 6px; margin-top: 9px; border: 1px solid var(--line-2); cursor: zoom-in; }

.ev { padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); }
.ev-l { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }
.ev-l .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── results / findings ───────────────────────────────────────────────────── */
.res { flex: 1; display: grid; grid-template-columns: 372px 1fr; min-height: 0; background: var(--line); gap: 1px; }
@media (max-width: 1000px) { .res { grid-template-columns: 1fr; } }
.res-list { background: var(--carbon); display: flex; flex-direction: column; min-height: 0; }
.res-filters { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; flex: none; }
.res-items { overflow-y: auto; padding: 11px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.grp { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--mute); text-transform: uppercase; padding: 11px 4px 3px; }
.fi { display: block; width: 100%; text-align: left; font: inherit; color: inherit; padding: 12px 13px; background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; transition: all .13s; }
.fi:hover { border-color: var(--line-2); background: var(--panel-2); }
.fi.v-fail { border-left-color: var(--fail); }
.fi.v-needs_review { border-left-color: var(--review); }
.fi.v-pass { border-left-color: var(--pass); }
.fi.on { border-color: var(--signal); box-shadow: 0 0 0 1px rgba(61,214,196,.22); background: var(--panel-2); }
.fi-top { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; flex-wrap: wrap; }
.fi-t { font-size: 13px; line-height: 1.4; }
.fi-b { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.fi-b .bar { flex: 1; }
.fi-b .pc { font-family: var(--mono); font-size: 10.5px; color: var(--mute); }

.trace { background: var(--carbon); overflow-y: auto; padding: 24px 26px 60px; min-height: 0; }
.tr-head { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 18px; }
.tr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tr-head h2 { font-size: 21px; margin: 0 0 12px; line-height: 1.3; }
.tr-meta { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--mute); }
.tr-meta b { color: var(--dim); font-weight: 400; }

.verdict-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 12px; padding: 15px 17px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 16px; }
.vr { }
.vr .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--mute); text-transform: uppercase; }
.vr .v { font-family: var(--mono); font-size: 15px; margin-top: 7px; }
.vr .v.fail { color: var(--fail); } .vr .v.pass { color: var(--pass); } .vr .v.needs_review { color: var(--review); }

/* plain-language explanation — the human layer */
.plain-box { padding: 16px 18px; background: linear-gradient(165deg, rgba(61,214,196,.05), transparent); border: 1px solid rgba(61,214,196,.2); border-radius: var(--r); margin-bottom: 16px; }
.plain-box h3 { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--signal); text-transform: uppercase; margin: 0 0 9px; }
.plain-box p { margin: 0 0 9px; font-size: 14px; line-height: 1.6; }
.plain-box p:last-child { margin-bottom: 0; }
.plain-box .fix { color: var(--dim); font-size: 13px; }

/* evidence steps — narrative, source hidden behind Inspect */
.ev-step { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 11px; background: var(--panel); overflow: hidden; }
.ev-step-h { display: flex; align-items: center; gap: 10px; padding: 13px 15px; }
.ev-kind {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px;
  border-radius: 4px; background: var(--elev); color: var(--dim); flex: none;
}
.ev-kind.vision { background: rgba(188,140,255,.14); color: var(--vision); }
.ev-kind.text { background: rgba(88,166,255,.14); color: var(--tmodel); }
.ev-kind.action { background: rgba(255,159,67,.14); color: var(--act); }
.ev-kind.metric { background: rgba(61,214,196,.13); color: var(--signal); }
.ev-kind.screenshot, .ev-kind.dom { background: var(--elev); color: var(--dim); }
.ev-kind.escalate { background: rgba(240,180,41,.16); color: var(--review); }
/* an escalated step is the interesting one — the machine noticed it could be wrong */
.ev-step.escalated { border-color: rgba(240,180,41,.4); background: linear-gradient(165deg, rgba(240,180,41,.06), var(--panel) 60%); }
.ev-step-h .lb { font-size: 13px; font-weight: 500; }
.ev-step-h .sm { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--mute); text-align: right; }
.ev-step-b { padding: 0 15px 14px; }
.ev-step-b img { display: block; max-width: 100%; border-radius: var(--r-sm); border: 1px solid var(--line-2); cursor: zoom-in; }
.ev-note { font-size: 13px; color: var(--dim); line-height: 1.55; margin-bottom: 11px; }

/* the Inspect affordance — raw source only on demand */
details.inspect { margin-top: 11px; border-top: 1px dashed var(--line-2); padding-top: 10px; }
details.inspect > summary {
  cursor: pointer; list-style: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  color: var(--mute); display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px;
  border: 1px solid var(--line-2); border-radius: 5px; transition: all .13s; user-select: none;
}
details.inspect > summary::-webkit-details-marker { display: none; }
details.inspect > summary:hover { color: var(--signal); border-color: var(--signal-dim); }
details.inspect[open] > summary { color: var(--signal); border-color: var(--signal-dim); margin-bottom: 10px; }
details.inspect pre {
  margin: 0; padding: 13px; background: var(--void); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--dim); overflow-x: auto; max-height: 380px;
}

.remed { padding: 15px 17px; background: rgba(63,185,80,.05); border: 1px solid rgba(63,185,80,.22); border-radius: var(--r); margin-top: 16px; }
.remed .k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--pass); text-transform: uppercase; margin-bottom: 8px; }

/* human gate */
.gate { padding: 16px 18px; background: linear-gradient(165deg, rgba(240,180,41,.07), transparent); border: 1px solid rgba(240,180,41,.32); border-radius: var(--r); margin-bottom: 16px; }
.gate-h { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.gate-h .t { font-family: var(--mono); font-size: 12.5px; color: var(--review); }
.gate-h .st { margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line-2); border-radius: 9px; padding: 3px 9px; }
.gate-n { font-size: 13px; color: var(--dim); margin-bottom: 13px; line-height: 1.55; }
.gate-b { display: flex; gap: 8px; flex-wrap: wrap; }
.gb { font: 400 12px/1 var(--mono); padding: 9px 14px; border-radius: var(--r-sm); cursor: pointer; background: var(--elev); border: 1px solid var(--line-2); color: var(--text); transition: all .13s; }
.gb:hover { border-color: var(--dim); }
.gb.agree.on { background: rgba(240,180,41,.16); border-color: var(--review); color: var(--review); }
.gb.pass.on { background: rgba(63,185,80,.16); border-color: var(--pass); color: var(--pass); }
.gb.fail.on { background: rgba(255,95,84,.16); border-color: var(--fail); color: var(--fail); }
.decided { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; padding: 2px 7px; border-radius: 4px; background: var(--elev); color: var(--dim); }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; background: rgba(3,5,9,.9); backdrop-filter: blur(4px); padding: 34px; }
.lb.open { display: grid; animation: fade .18s both; }
.lb img { max-width: 100%; max-height: 100%; border-radius: var(--r); border: 1px solid var(--line-2); }

/* ── login ────────────────────────────────────────────────────────────────── */
body.auth { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.auth-card { position: relative; z-index: 1; width: 100%; max-width: 372px; padding: 32px 30px; background: linear-gradient(165deg, var(--panel), rgba(8,11,18,.95)); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); }
.auth-card .brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.auth-card h1 { font-family: var(--mono); font-weight: 500; font-size: 19px; margin: 0 0 7px; }
.auth-card .sub { color: var(--mute); font-size: 12.5px; margin: 0 0 22px; line-height: 1.5; }
.auth-card .fld { margin-bottom: 14px; }
.auth-card button { width: 100%; justify-content: center; margin-top: 8px; }
.auth-err { font-size: 12.5px; color: #ffb0a8; background: rgba(255,95,84,.09); border: 1px solid rgba(255,95,84,.28); border-radius: var(--r-sm); padding: 9px 12px; margin-bottom: 14px; }