/* Console — dark instrument panel (single theme, dark-committed). */

/* ---------- tokens ---------- */
:root {
  --ground-0: #0C1220;
  --ground-1: #0E1626;
  --panel: rgba(16, 26, 46, 0.85);
  --panel-soft: rgba(16, 26, 46, 0.6);
  --panel-solid: #101A2E;
  --well: #0A1120;
  --line: #24344F;
  --line-soft: #1E2A42;
  --track: #1A2740;
  --ink: #DFE5F0;
  --bright: #F2F5FA;
  --dim: #A7B4CC;
  --faint: #5B6B8A;
  --accent: #6FD3E8;
  --accent-hi: #9AE2F1;
  --accent-ink: #08111E;
  --pass: #52D6A3;
  --fail: #E86A5A;
  --warn: #F2A85C;
  --hatch: repeating-linear-gradient(45deg, #3A4763 0 3px, #141D31 3px 6px);
  --meter-grad: linear-gradient(90deg, #52D6A3, #6FD3E8);
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 14px;
}

/* ---------- ground ---------- */
* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--ground-0);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(111, 211, 232, 0.07) 1px, transparent 0),
    linear-gradient(180deg, var(--ground-0) 0%, var(--ground-1) 100%);
  background-size: 28px 28px, 100% 100%;
  background-repeat: repeat, no-repeat;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
::selection { background: rgba(111, 211, 232, 0.25); }
code { font-family: var(--mono); font-size: 0.92em; color: var(--ink); }
.mono { font-family: var(--mono); }

main { max-width: 1180px; margin: 0 auto; padding: 0 32px 72px; }

/* ---------- topbar ---------- */
.topbar { border-bottom: 1px solid var(--line-soft); background: rgba(12, 18, 32, 0.7); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; }
.topbar-in { max-width: 1180px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--bright); }
.wordmark:hover { text-decoration: none; color: var(--bright); }
.wm-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px rgba(111, 211, 232, 0.7); }
.wm-name { font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; }
.wm-ver { font-family: var(--mono); font-size: 11px; color: var(--faint); border: 1px solid var(--line-soft); border-radius: 4px; padding: 2px 7px; }
.topnav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.topnav a { font-size: 14px; color: var(--dim); }
.topnav a:hover { color: var(--ink); text-decoration: none; }
.topnav a.active { color: var(--accent); }
.topnav a.ext { color: var(--accent); }

/* ---------- shared blocks ---------- */
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; margin: 0 0 6px; }
.eyebrow .live-dot { display: inline-block; text-shadow: 0 0 10px rgba(111, 211, 232, 0.8); }
.page-title { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--bright); margin: 0 0 10px; }
.body-copy { color: var(--dim); max-width: 62ch; }
.body-copy strong { color: var(--ink); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.panel-pad { padding: 22px 24px; }

.btn { display: inline-block; background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 12px 20px; font-weight: 600; font-size: 15px; }
.btn:hover { background: var(--accent-hi); color: var(--accent-ink); text-decoration: none; }
.btn-outline { display: inline-block; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 11px 19px; font-weight: 500; font-size: 15px; background: var(--panel-solid); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* ---------- grade chips (status elements — glow allowed) ---------- */
.grade-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; line-height: 1;
  background: var(--well); border: 1px solid var(--line); border-radius: 8px;
}
.gc-sm { min-width: 34px; height: 34px; padding: 0 7px; font-size: 15px; }
.gc-md { min-width: 46px; height: 46px; padding: 0 9px; font-size: 20px; }
.gc-lg { min-width: 60px; height: 60px; padding: 0 11px; font-size: 27px; border-radius: 10px; }
.g-pass { color: var(--pass); border-color: rgba(82, 214, 163, 0.5); text-shadow: 0 0 9px rgba(82, 214, 163, 0.55); box-shadow: 0 0 14px rgba(82, 214, 163, 0.18), inset 0 0 10px rgba(82, 214, 163, 0.08); }
.g-warn { color: var(--warn); border-color: rgba(242, 168, 92, 0.5); text-shadow: 0 0 9px rgba(242, 168, 92, 0.5); box-shadow: 0 0 14px rgba(242, 168, 92, 0.15), inset 0 0 10px rgba(242, 168, 92, 0.07); }
.g-fail { color: var(--fail); border-color: rgba(232, 106, 90, 0.55); text-shadow: 0 0 9px rgba(232, 106, 90, 0.5); box-shadow: 0 0 14px rgba(232, 106, 90, 0.18), inset 0 0 10px rgba(232, 106, 90, 0.08); }
.g-na { color: var(--faint); border-color: var(--line); }
.prov-tag { font-family: var(--mono); font-size: 11px; color: var(--warn); border: 1px solid rgba(242, 168, 92, 0.45); border-radius: 4px; padding: 2px 7px; letter-spacing: 0.04em; vertical-align: middle; }
.prov-flag { color: var(--warn); font-style: normal; }

/* ---------- meters ---------- */
.meter { margin: 0; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; color: var(--dim); margin-bottom: 5px; }
.meter-pct { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--dim); }
.meter-pct.pct-ok { color: var(--ink); }
.meter-pct.pct-low { color: var(--warn); }
.meter-pct.pct-none { color: var(--faint); }
.meter-track { display: flex; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.mfill { display: block; height: 100%; width: var(--w); }
.m-pass { background: var(--meter-grad); box-shadow: 0 0 10px rgba(82, 214, 163, 0.5); }
.m-fail { background: var(--fail); opacity: 0.85; }
.m-unv { background: var(--hatch); }
.meter-stack { display: flex; flex-direction: column; gap: 13px; }

/* home-hero orchestrated fill: script adds .is-live after first paint */
.tm-anim .mfill { width: 0; transition: width 0.9s cubic-bezier(0.22, 0.9, 0.3, 1); }
.tm-anim .meter:nth-child(1) .mfill { transition-delay: 0.05s; }
.tm-anim .meter:nth-child(2) .mfill { transition-delay: 0.17s; }
.tm-anim .meter:nth-child(3) .mfill { transition-delay: 0.29s; }
.tm-anim .meter:nth-child(4) .mfill { transition-delay: 0.41s; }
.tm-anim .meter:nth-child(5) .mfill { transition-delay: 0.53s; }
.tm-anim.is-live .mfill { width: var(--w); }
@media (prefers-reduced-motion: reduce) {
  .tm-anim .mfill { transition: none; width: var(--w); }
}

/* compact per-row meters (directory) */
.pmeters { display: flex; flex-direction: column; gap: 5px; min-width: 210px; }
.pmeter { display: grid; grid-template-columns: 26px 1fr 48px; align-items: center; gap: 8px; }
.pm-label { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.pm-track { display: flex; height: 5px; border-radius: 2.5px; background: var(--track); overflow: hidden; }
.pm-pct { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; color: var(--dim); }
.pm-pct.pct-low { color: var(--warn); }
.pm-pct.pct-none { color: var(--faint); }
.bar-empty { font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: center; padding: 68px 0 56px; }
.hero-hl { font-size: clamp(34px, 5.5vw, 54px); font-weight: 600; line-height: 1.06; letter-spacing: -0.025em; color: var(--bright); margin: 14px 0 0; }
.hero .lede { font-size: 17px; line-height: 1.65; color: var(--dim); max-width: 48ch; margin: 20px 0 0; }
.hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.install-pill { font-family: var(--mono); background: var(--panel-solid); border: 1px solid var(--line); border-radius: 8px; padding: 12px 18px; font-size: 14px; color: var(--ink); margin: 0; overflow-x: auto; }
.install-pill .prompt { color: var(--faint); }
.hero-count { font-family: var(--mono); font-size: 12px; color: var(--dim); margin: 14px 0 0; }

.telemetry { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; backdrop-filter: blur(6px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.tm-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.tm-repo { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--dim); }
.tm-repo:hover { color: var(--accent); }
.tm-foot { font-family: var(--mono); font-size: 11.5px; color: var(--dim); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }

/* ---------- stat tiles ---------- */
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 8px 0 40px; }
.stat-tile { background: var(--panel-soft); border: 1px solid var(--line-soft); border-radius: 10px; padding: 20px 22px; }
.stat-val { font-family: var(--mono); font-size: 24px; font-weight: 700; color: var(--bright); }
.stat-val.accent { color: var(--accent); text-shadow: 0 0 12px rgba(111, 211, 232, 0.4); }
.stat-copy { font-size: 13px; color: var(--dim); margin-top: 4px; }

/* ---------- lanes strip (home) ---------- */
.lane-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lane-cellblock { background: var(--panel-soft); border: 1px solid var(--line-soft); border-radius: 10px; padding: 22px 24px; }
.lane-cellblock h2 { font-size: 18px; font-weight: 600; color: var(--bright); margin: 8px 0 8px; }
.lane-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--faint); }

/* ---------- directory ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding: 48px 0 22px; }
.dir-controls { margin: 0 0 14px; }
#dir-filter { width: 100%; max-width: 420px; font-family: var(--mono); font-size: 14px; color: var(--ink); background: var(--panel-solid); border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px; }
#dir-filter::placeholder { color: var(--faint); }
#dir-filter:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.dir-filter-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--faint); margin-bottom: 7px; }

/* unified scan intake — revealed by filter.js when the query is a repo slug
   with no directory row (quiet callout, not a hero) */
#dir-scan { margin-top: 12px; max-width: 640px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 16px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#dir-scan[hidden] { display: none; }
.scan-copy { flex: 1 1 260px; font-size: 13px; color: var(--dim); margin: 0; }
.scan-eyebrow { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--accent); border: 1px solid rgba(111, 211, 232, 0.4); border-radius: 4px; padding: 1px 7px; margin-right: 8px; vertical-align: middle; white-space: nowrap; }
#dir-scan .btn { white-space: nowrap; }
.scan-status { flex-basis: 100%; font-family: var(--mono); font-size: 12.5px; color: var(--dim); margin: 0; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.scan-status a { color: var(--accent); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
table.directory { width: 100%; border-collapse: collapse; min-width: 860px; }
table.directory th { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); }
table.directory td { padding: 15px 16px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
table.directory tbody tr:first-child td { border-top: none; }
table.directory tbody tr:hover { background: rgba(111, 211, 232, 0.04); }
.repo-name { font-family: var(--mono); font-size: 14.5px; font-weight: 500; color: var(--bright); }
.repo-name:hover { color: var(--accent); }
.desc { display: block; font-size: 13px; color: var(--dim); max-width: 46ch; margin-top: 3px; }
.meta-line { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--dim); margin-top: 5px; }
.date-cell { font-family: var(--mono); font-size: 12.5px; color: var(--dim); white-space: nowrap; }

.lane { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; border-radius: 6px; padding: 3px 9px; white-space: nowrap; }
.lane-auth { color: var(--accent); border: 1px solid rgba(111, 211, 232, 0.55); box-shadow: 0 0 10px rgba(111, 211, 232, 0.15); }
.lane-ext { color: var(--dim); border: 1px solid var(--line); }
.lane-unsigned { color: var(--warn); border: 1px solid rgba(242, 168, 92, 0.5); }
/* Local lane reads quieter than auth on purpose: attributable, weaker evidence. */
.lane-local { color: var(--dim); border: 1px dashed var(--line); }
.lane-local-overlay {
  margin-left: 6px; font-size: 10px; padding: 2px 7px;
  color: var(--dim); border: 1px dashed var(--line);
}
.cov-note {
  display: block; margin-top: 6px; font-family: var(--mono); font-size: 11.5px;
  line-height: 1.6; color: var(--warn); max-width: 66ch;
}
.cov-tag {
  display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 4px;
  font-size: 10px; letter-spacing: 0.1em; color: var(--warn);
  border: 1px solid rgba(242, 168, 92, 0.45);
}
.cov-note code { color: var(--bright); }
.cov-cmd {
  overflow-x: auto; background: var(--panel-soft); border: 1px solid var(--line-soft);
  border-radius: 8px; padding: 12px 14px; font-family: var(--mono); font-size: 12.5px;
}
.nudge-local { border-left: 2px dashed var(--line); padding-left: 16px; }
.nudge-coverage { border-left: 2px solid var(--warn); padding-left: 16px; }
.dir-sortbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--faint);
}
.dir-sortbar select {
  font: inherit; letter-spacing: 0; padding: 4px 8px; border-radius: 6px;
  background: var(--panel-soft); color: var(--bright); border: 1px solid var(--line);
}
.dir-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.dir-count { margin-left: auto; color: var(--dim); }
.repo-hero .lane { align-self: center; }

.key-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--dim); margin-top: 14px; }
.key-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--faint); }
.key-item { display: inline-flex; align-items: center; gap: 7px; }
.key-swatch { width: 22px; height: 8px; border-radius: 2px; display: inline-block; border: 1px solid var(--line-soft); }
.key-pass { background: var(--meter-grad); border-color: transparent; }
.key-fail { background: var(--fail); border-color: transparent; }
.key-unv { background: var(--hatch); }

/* ---------- repo detail ---------- */
.crumbs { padding: 28px 0 0; font-family: var(--mono); font-size: 13px; }
.repo-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 0 6px; }
.repo-title { font-family: var(--mono); font-size: clamp(22px, 4vw, 32px); font-weight: 600; letter-spacing: -0.01em; color: var(--bright); margin: 0; overflow-wrap: anywhere; }
.repo-meta { font-family: var(--mono); font-size: 12.5px; color: var(--dim); line-height: 2; margin: 6px 0 0; overflow-wrap: anywhere; }
.score-line { font-size: 15px; color: var(--dim); margin: 12px 0 18px; }
.score-line strong { color: var(--bright); font-family: var(--mono); }
.detail-meters { max-width: 720px; }

.nudge { margin: 34px 0 10px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 24px 26px; }
.nudge-title { font-size: 20px; font-weight: 600; color: var(--bright); margin: 0 0 8px; }

.controls-title { font-size: 22px; font-weight: 600; color: var(--bright); margin: 38px 0 8px; }
.transparency-note { font-size: 13.5px; color: var(--dim); max-width: 78ch; margin: 0 0 14px; }
table.controls { width: 100%; border-collapse: collapse; min-width: 720px; }
table.controls th { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
table.controls td { padding: 12px 14px; border-top: 1px solid var(--line-soft); vertical-align: top; font-size: 13.5px; }
table.controls tbody tr:first-child td { border-top: none; }
table.controls .outcome { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
tr.oc-pass .outcome { color: var(--pass); }
tr.oc-fail .outcome { color: var(--fail); }
tr.oc-gap .outcome { color: var(--warn); }
tr.oc-unverified .outcome { color: var(--dim); }
tr.oc-unverified .outcome .oc-chip { background: var(--hatch); border-radius: 3px; padding: 1px 6px; }
tr.oc-info .outcome { color: var(--faint); }
tr.out-of-scope td { opacity: 0.45; }
.oos { font-family: var(--mono); font-size: 10.5px; color: var(--faint); border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 6px; }
.raw { display: inline-block; font-family: var(--mono); font-size: 10.5px; color: var(--warn); border: 1px dashed rgba(242, 168, 92, 0.5); border-radius: 4px; padding: 1px 6px; margin-left: 7px; }
.reason { color: var(--dim); }
table.controls details { margin-top: 4px; }
table.controls summary { cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--accent); }
table.controls details ul { margin: 6px 0 2px; padding-left: 18px; color: var(--dim); font-size: 12.5px; }
table.controls details li { font-family: var(--mono); overflow-wrap: anywhere; }

/* ---------- methodology ---------- */
.method-wrap { max-width: 860px; }
.method-nav { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; margin: 8px 0 30px; }
.method-nav a { color: var(--dim); border: 1px solid var(--line-soft); border-radius: 6px; padding: 4px 11px; }
.method-nav a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.method-section { margin: 36px 0; }
.method-section h2 { font-size: 22px; font-weight: 600; color: var(--bright); margin: 0 0 10px; }
.method-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.prose p, .prose li { color: var(--dim); }
.prose strong { color: var(--ink); }
.prose ol, .prose ul { padding-left: 22px; }
.prose li { margin: 6px 0; }

.honesty { border-left: 3px solid var(--accent); }
.honesty-head { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); padding: 14px 24px 0; }
.honesty-body { color: var(--dim); padding: 8px 24px 20px; }
.honesty-body strong { color: var(--ink); }

.terminal { background: var(--well); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.terminal-head { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 0.1em; padding: 9px 16px; border-bottom: 1px solid var(--line-soft); background: var(--panel-solid); }
.terminal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(111, 211, 232, 0.6); }
.terminal pre { margin: 0; padding: 18px 20px; font-family: var(--mono); font-size: 13.5px; line-height: 1.8; color: var(--ink); overflow-x: auto; }
.terminal .t-dim { color: var(--faint); }

table.method-table { width: 100%; border-collapse: collapse; min-width: 640px; }
table.method-table th { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
table.method-table td { padding: 13px 14px; border-top: 1px solid var(--line-soft); vertical-align: top; font-size: 13.5px; color: var(--dim); }
table.method-table tbody tr:first-child td { border-top: none; }
table.method-table td strong { color: var(--ink); }
table.method-table code { color: var(--accent); font-size: 12px; }

.grade-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 14px 0 16px; }
.grade-copy { font-size: 14px; color: var(--dim); max-width: 72ch; }
.mv { font-family: var(--mono); font-size: 15px; color: var(--faint); font-weight: 400; vertical-align: middle; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); margin-top: 40px; }
.footer-in { max-width: 1180px; margin: 0 auto; padding: 22px 32px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.footer-in .domain { color: var(--faint); }

/* ---------- design switcher (shared markup, styled here) ---------- */
.design-switcher {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 14px; font-family: var(--mono); font-size: 12px;
  backdrop-filter: blur(8px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.design-switcher .ds-label { color: var(--faint); letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; }
.design-switcher a { color: var(--dim); }
.design-switcher a:hover { color: var(--ink); text-decoration: none; }
.design-switcher a[aria-current="true"] { color: var(--accent); text-shadow: 0 0 8px rgba(111, 211, 232, 0.5); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 44px; }
  .telemetry { max-width: 520px; }
  .stat-tiles { grid-template-columns: repeat(2, 1fr); }
  .lane-strip { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  main { padding: 0 18px 56px; }
  .topbar-in { padding: 14px 18px; }
  .footer-in { padding: 18px; }
  .page-head { padding-top: 32px; }
  .design-switcher { right: 10px; bottom: 10px; padding: 6px 10px; gap: 8px; }
}
@media (max-width: 420px) {
  .stat-tiles { grid-template-columns: 1fr; }
  .hero-cta { align-items: stretch; flex-direction: column; }
  .btn { text-align: center; }
}

/* ── shared components (home panels, taxonomy, exposure) ───────────────── */
:root {
  --hp-surface: var(--panel-solid);
  --hp-ground: var(--ground-0);
  --hp-ink: var(--bright);
  --hp-dim: var(--dim);
  --hp-muted: var(--faint);
  --hp-line: var(--line-soft);
  --hp-line-strong: var(--line);
  --hp-accent: var(--accent);
  --hp-pass: var(--pass);
  --hp-fail: var(--fail);
  --hp-warn: var(--warn);
  --hp-hatch: var(--hatch);
  --hp-mono: var(--mono);
  --hp-display: var(--sans);
  --hp-radius: var(--radius);
  --hp-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --tap: 44px;
  --hp-s--2: clamp(0.78rem, 0.755rem + 0.13vw, 0.8125rem);
  --hp-s--1: clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem);
  --hp-s-0:  clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
  --hp-s-1:  clamp(1.0625rem, 1.02rem + 0.23vw, 1.1875rem);
  --hp-s-3:  clamp(1.4375rem, 1.24rem + 0.97vw, 1.875rem);
}

/* ── mobile hardening, in every design ─────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body { min-block-size: 100dvh; overflow-wrap: break-word; }
/* Under 16px a focused form control makes iOS Safari zoom the page, and the
   page is then wider than the screen. This is a correctness floor. */
/* Accessibility floor, deliberately !important. Under 16px, iOS Safari zooms
   the viewport when a text field or select takes focus, and the page is then
   wider than the screen — the exact horizontal-overflow bug this whole pass
   exists to remove. A design may restyle these controls any way it likes; it
   may not put them back under 16px. Measured live: console #dir-filter was
   14px and #dir-sort 11px, chain 14.5px and 11px, manual #dir-sort 13.5px.
   Checkboxes are exempt — they carry no text and do not trigger the zoom. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  font-size: max(16px, 1em) !important;
}
input[type="search"], select { min-block-size: var(--tap); }
input[type="checkbox"], input[type="radio"] { inline-size: 20px; block-size: 20px; }
.table-scroll, pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
nav a, .btn, .btn-outline, .btn-dark, summary {
  min-block-size: var(--tap); display: inline-flex; align-items: center;
}
summary { justify-content: flex-start; }
.design-switcher { max-inline-size: calc(100vw - 20px); flex-wrap: wrap; }
.design-switcher a { min-block-size: var(--tap); padding: 6px 10px; }
/* Clearance for the FIXED switcher, on <body> rather than <main>: scrolled to
   the end of the page the switcher covers the FOOTER, which is outside main,
   so main's own bottom padding could never reach it. The switcher's script
   measures itself into --switcher-clearance (its height is 56px at 390px wide
   and 102px at 320px, where the links wrap onto three rows); the literal is
   the no-JS fallback, sized for that worst case. */
body { padding-block-end: var(--switcher-clearance, 132px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* Landscape phones are height-constrained, not width-constrained. */
@media (max-height: 460px) and (orientation: landscape) {
  .hero { padding-block: 20px 24px; }
  .rail-sticky, .method-nav { position: static; }
}

/* ── the search-and-submit control ─────────────────────────────────────── */
.hp-search { margin-block: 14px; }
.hp-search-label {
  display: block; margin-block-end: 8px;
  font-family: var(--hp-mono); font-size: var(--hp-s--2); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--hp-muted);
}
.hp-search-input {
  inline-size: 100%; max-inline-size: 520px; padding: 12px 16px;
  min-block-size: var(--tap); border-radius: var(--hp-radius);
  border: 2px solid var(--hp-line-strong); background: var(--hp-surface);
  color: var(--hp-ink); font-family: var(--hp-mono); font-size: 16px;
}
.hp-search-input::placeholder { color: var(--hp-muted); }
.hp-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-block: 10px 0; font-size: var(--hp-s--2);
}
.hp-chips-label {
  font-family: var(--hp-mono); font-size: var(--hp-s--2);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--hp-muted);
}
.hp-chip {
  display: inline-flex; align-items: center; min-block-size: 36px;
  padding: 4px 10px; border: 1.5px solid var(--hp-line);
  border-radius: var(--hp-radius);
  font-family: var(--hp-mono); font-size: var(--hp-s--2);
  color: var(--hp-ink); text-decoration: none; background: var(--hp-surface);
}
.hp-chip:hover { border-color: var(--hp-accent); color: var(--hp-accent); }
/* A relative block that pushes the page down, never a floating dropdown. */
.dir-found {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  max-inline-size: 520px; margin-block-start: 14px; padding: 14px 16px;
  background: var(--hp-surface); border: 2px solid var(--hp-pass);
  border-radius: var(--hp-radius);
}
.dir-found-copy { margin: 0; font-size: var(--hp-s--1); color: var(--hp-dim); }
/* A class setting display:flex beats the user-agent rule that hides [hidden],
   so without this the "already listed" block is visible on every page load —
   it announced a match before anything had been typed. */
.dir-found[hidden], .dir-scan[hidden], [hidden] { display: none !important; }


/* ── exemplar panels ───────────────────────────────────────────────────── */
.hp-panels { display: grid; gap: clamp(28px, 5vw, 48px); padding-block: clamp(32px, 5vw, 56px); }
.hp-panel, .tx-strip { container-type: inline-size; min-inline-size: 0; }
.hp-panel-eyebrow {
  font-family: var(--hp-mono); font-size: var(--hp-s--2); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--hp-accent);
  margin: 0 0 6px;
}
.hp-panel-title {
  font-family: var(--hp-display); font-size: var(--hp-s-3);
  letter-spacing: -0.01em; margin: 0; color: var(--hp-ink);
}
.hp-panel-line { font-size: var(--hp-s-0); color: var(--hp-dim); margin: 8px 0 20px; max-inline-size: 60ch; }

/* Container queries: how many cards fit is a property of the PANEL's width,
   not the window's. */
.hp-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@container (min-width: 640px) { .hp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 900px) { .hp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

.hp-card {
  display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 8px;
  min-block-size: 224px; padding: 16px; text-decoration: none; color: var(--hp-ink);
  background: var(--hp-surface); border: 1.5px solid var(--hp-line-strong);
  border-radius: var(--hp-radius); box-shadow: var(--hp-shadow);
}
.hp-card:hover { border-color: var(--hp-accent); }
.hp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hp-grade {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 40px; block-size: 40px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--g, var(--hp-muted)); color: var(--g, var(--hp-muted));
  font-family: var(--hp-mono); font-weight: 700; font-size: var(--hp-s--1);
}
.hp-grade-aplus, .hp-grade-a, .hp-grade-b { --g: var(--hp-pass); }
.hp-grade-c { --g: var(--hp-warn); }
.hp-grade-d { --g: var(--hp-warn); }
.hp-grade-f { --g: var(--hp-fail); }
.hp-grade-na { --g: var(--hp-muted); }
.hp-src { font-family: var(--hp-mono); font-size: var(--hp-s--2); color: var(--hp-dim); text-align: end; line-height: 1.3; }
.hp-card-name {
  font-family: var(--hp-mono); font-size: var(--hp-s-0); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-card-desc {
  font-size: var(--hp-s--1); color: var(--hp-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden;
}
.hp-card-facts {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-family: var(--hp-mono); font-size: var(--hp-s--2); color: var(--hp-dim);
  border-block-start: 1px dashed var(--hp-line); padding-block-start: 8px;
}
.hp-fact-date { margin-inline-start: auto; }
.hp-card-note {
  font-size: var(--hp-s--2); color: var(--hp-warn); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden;
}
.hp-waiting {
  padding: clamp(16px, 3vw, 24px); background: var(--hp-surface);
  border: 2px dashed var(--hp-line-strong); border-radius: var(--hp-radius);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.hp-waiting-copy { margin: 0; font-size: var(--hp-s--1); color: var(--hp-dim); line-height: 1.55; max-inline-size: 62ch; }
.hp-waiting-link {
  font-weight: 600; font-size: var(--hp-s--1); color: var(--hp-ink);
  text-decoration: underline; text-underline-offset: 4px;
  display: inline-flex; align-items: center; min-block-size: var(--tap);
}
.hp-unans { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hp-unans-row {
  display: grid; gap: 4px 12px; align-items: center; grid-template-columns: minmax(0, 1fr);
  padding-block-end: 10px; border-block-end: 1px solid var(--hp-line);
}
@container (min-width: 620px) {
  .hp-unans-row { grid-template-columns: minmax(140px, 1fr) minmax(80px, 2fr) auto minmax(0, 2fr); }
}
.hp-unans-id { font-family: var(--hp-mono); font-size: var(--hp-s--1); overflow-wrap: anywhere; }
.hp-unans-q { font-size: var(--hp-s--1); color: var(--hp-ink); line-height: 1.4; }
.hp-unans-q .hp-unans-id {
  display: block; font-family: var(--hp-mono); font-size: var(--hp-s--2);
  color: var(--hp-muted); margin-block-start: 2px;
}
.tx-questions { margin-block-start: 24px; }
.tx-q-table { min-inline-size: 640px; }
.tx-q-groups { font-family: var(--hp-mono); white-space: nowrap; }

.hp-unans-track { display: block; block-size: 8px; background: var(--hp-line); }
.hp-unans-fill { display: block; block-size: 100%; background: var(--hp-hatch); }
.hp-unans-count {
  font-family: var(--hp-mono); font-size: var(--hp-s--2); color: var(--hp-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hp-unans-why { font-size: var(--hp-s--2); color: var(--hp-muted); }
.hp-unans-foot { font-size: var(--hp-s--1); color: var(--hp-dim); line-height: 1.55; max-inline-size: 68ch; margin-block-start: 16px; }
.hp-more {
  display: inline-flex; align-items: center; min-block-size: var(--tap);
  font-weight: 600; font-size: var(--hp-s--1); color: var(--hp-ink);
  text-decoration: underline; text-underline-offset: 4px;
}
.hero-count { font-size: var(--hp-s--1); color: var(--hp-dim); }

/* ── taxonomy ──────────────────────────────────────────────────────────── */
.tx-strip { padding-block: clamp(24px, 4vw, 40px); border-block-start: 1.5px solid var(--hp-line); }
.tx-chips { display: grid; grid-template-columns: 1fr; gap: 8px; margin-block-end: 18px; }
@container (min-width: 560px) { .tx-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 880px) { .tx-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tx-chip {
  display: flex; align-items: center; gap: 10px; min-block-size: var(--tap); padding: 8px 12px;
  background: var(--hp-surface); border: 1.5px solid var(--hp-line);
  border-radius: var(--hp-radius); color: var(--hp-ink); text-decoration: none;
  font-size: var(--hp-s--1);
}
.tx-chip:hover { border-color: var(--hp-accent); color: var(--hp-accent); }
.tx-chip-id { font-family: var(--hp-mono); font-weight: 700; font-size: var(--hp-s--2); color: var(--hp-accent); flex-shrink: 0; }
.tx-classes { display: grid; gap: 20px; }
.tx-class {
  padding: 16px; background: var(--hp-surface);
  border-inline-start: 3px solid var(--hp-line-strong); border-radius: var(--hp-radius);
}
.tx-class-title { font-family: var(--hp-display); font-size: var(--hp-s-1); margin: 0 0 6px; color: var(--hp-ink); }
.tx-class-line { margin: 0 0 8px; font-size: var(--hp-s-0); color: var(--hp-ink); }
.tx-class-controls { margin: 0 0 8px; font-size: var(--hp-s--1); overflow-wrap: anywhere; }
.tx-label {
  font-family: var(--hp-mono); font-size: var(--hp-s--2); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--hp-muted); margin-inline-end: 6px;
}
.tx-lineage { margin: 8px 0 0; font-family: var(--hp-mono); font-size: var(--hp-s--2); color: var(--hp-muted); }
.tx-incidents { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.tx-incident { display: grid; gap: 3px; font-size: var(--hp-s--1); }
.tx-incident-when { font-family: var(--hp-mono); font-size: var(--hp-s--2); color: var(--hp-muted); }
.tx-incident-what { color: var(--hp-dim); line-height: 1.5; }
.tx-reported {
  display: inline-block; font-family: var(--hp-mono); font-size: var(--hp-s--2);
  color: var(--hp-warn); border: 1px solid var(--hp-warn); padding: 0 6px; margin-inline-start: 6px;
}
.tx-sourcing { font-size: var(--hp-s--1); color: var(--hp-dim); }
.tx-defs { font-size: var(--hp-s-0); color: var(--hp-dim); line-height: 1.6; }
.tx-class-posture { border-inline-start-color: var(--hp-muted); border-inline-start-style: dashed; }

/* ── exposure panel ────────────────────────────────────────────────────── */
.exposure {
  margin-block: 32px; padding: clamp(16px, 3vw, 26px);
  background: var(--hp-surface); border: 1.5px solid var(--hp-line-strong);
  border-radius: var(--hp-radius);
}
.exposure .body-copy { color: var(--hp-dim); font-size: var(--hp-s--1); line-height: 1.55; margin: 0 0 18px; }
.ex-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ex-row { display: grid; gap: 5px; padding-inline-start: 12px; border-inline-start: 3px solid var(--hp-line); }
/* Marks the EVIDENCE state, not a severity ranking — the scan has no data
   with which to rank one group above another. */
.ex-none-found { border-inline-start-color: var(--hp-fail); }
.ex-partial { border-inline-start-color: var(--hp-warn); }
.ex-evidenced { border-inline-start-color: var(--hp-pass); }
.ex-not-observed { border-inline-start-color: var(--hp-muted); border-inline-start-style: dashed; }
.ex-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.ex-name {
  font-weight: 600; font-size: var(--hp-s-0); color: var(--hp-ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; min-block-size: 32px;
}
.ex-name:hover { color: var(--hp-accent); }
.ex-state {
  font-family: var(--hp-mono); font-size: var(--hp-s--2); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--hp-muted);
}
.ex-line { font-size: var(--hp-s--1); color: var(--hp-dim); }
.ex-detail { font-size: var(--hp-s--2); color: var(--hp-dim); line-height: 1.5; overflow-wrap: anywhere; }
.ex-detail-quiet { color: var(--hp-muted); }
.ex-detail-label {
  font-family: var(--hp-mono); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--hp-muted); margin-inline-end: 6px;
}
.ex-foot { margin-block-start: 18px; font-size: var(--hp-s--2); color: var(--hp-muted); line-height: 1.55; overflow-wrap: anywhere; }


/* ── tap targets, measured at 390px ────────────────────────────────────
   Each selector below was observed under 44px in a real render and is a
   standalone control, not a link inside a sentence (WCAG 2.5.8 exempts
   those). Named per design because the three alternates each ship their own
   class for the same thing. */
.wordmark, .m-wordmark,
.tm-repo, .method-link, .arrow-link, .entry-name, .repo-link {
  display: inline-flex; align-items: center; min-block-size: var(--tap);
}
.hp-search-label, .dir-filter-label, .dir-controls-label {
  display: flex; align-items: flex-end; min-block-size: var(--tap); padding-block-end: 6px;
}
.dir-check, .dir-sortbar label, .m-sortbar label {
  min-block-size: var(--tap); display: inline-flex; align-items: center;
}
.design-switcher a { min-block-size: var(--tap); }
.hp-chip { min-block-size: var(--tap); }

/* ── inline term definitions ───────────────────────────────────────────── */
.term { color: var(--hp-ink); }
.term-def { color: var(--hp-muted); font-style: italic; }
.key-note { font-size: var(--hp-s--1); color: var(--hp-dim); line-height: 1.6; max-inline-size: 70ch; margin-block: 6px 24px; }