/* mm-harness getting-started site — single stylesheet, no external assets. */

:root {
  --bg: #0e0f13;
  --bg-raised: #15171d;
  --surface: #1a1d25;
  --surface-2: #20242e;
  --line: #2b3040;
  --line-soft: #23272f;

  /* Every text token clears WCAG AA (4.5:1) against the darkest-to-lightest
     surfaces above; --text-faint is the floor at 5.2:1 on --surface-2. */
  --text: #e9eaf0;
  --text-dim: #b0b6c6;
  --text-faint: #9096a8;

  --accent: #f6851b;
  --accent-deep: #d4700f;
  --accent-soft: rgba(246, 133, 27, 0.14);
  --accent-line: rgba(246, 133, 27, 0.34);

  --pass: #58d68a;
  --fail: #f0736b;
  --warn: #f0c05a;
  --info: #6aa9f0;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.28);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

/* Clears the sticky bar plus the progress rail (114px together), so an anchor
   never parks its heading underneath them. */
html { scroll-behavior: smooth; scroll-padding-top: 116px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient wash — keeps the page from reading as a flat README. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(760px 380px at 12% -8%, rgba(246, 133, 27, 0.10), transparent 60%),
    radial-gradient(620px 320px at 92% 4%, rgba(106, 169, 240, 0.06), transparent 62%);
}

body > * { position: relative; z-index: 1; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 { line-height: 1.22; letter-spacing: -0.021em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); font-weight: 680; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 640; margin-top: 2.4em; }
h3 { font-size: 1.1rem; font-weight: 620; margin-top: 1.8em; }
p { margin: 0 0 1.1em; }
p, li { color: #d5d8e2; }

code {
  font-family: var(--mono);
  font-size: 0.885em;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 0.1em 0.38em;
  color: #f0d9bd;
}

strong { color: var(--text); font-weight: 620; }

/* ---------- layout ---------- */

.wrap { width: min(940px, calc(100% - 3rem)); margin: 0 auto; }
.wrap-wide { width: min(1160px, calc(100% - 3rem)); margin: 0 auto; }

main { padding-bottom: 6rem; }

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 15, 19, 0.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.topbar-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  min-height: 60px;
  padding: 0.5rem 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 640;
  color: var(--text);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }

.brand-mark { width: 22px; height: 22px; flex: none; display: block; }

.brand-name { font-family: var(--mono); font-size: 0.95rem; }

/* Six items fit a laptop on one line; below that they wrap onto a second row
   rather than scrolling a label out of sight. */
.nav {
  display: flex;
  gap: 0.3rem;
  margin-left: auto;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav a {
  flex: none;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 0.885rem;
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.nav a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

/* The way back to the setup prompt. It leads the nav and stays visible when the
   rest of the bar scrolls, because it is the one link every page owes a reader. */
.nav a.nav-cta { color: var(--accent); border: 1px solid var(--accent-line); }
.nav a.nav-cta:hover { background: var(--accent-soft); color: var(--accent); }

/* ---------- progress rail ---------- */

.progress-rail {
  position: sticky;
  top: 60px;
  z-index: 45;
  background: rgba(14, 15, 19, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  padding: 0.7rem 0;
}

.progress-inner { display: flex; align-items: center; gap: 1rem; }

.progress-track {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transition: width 0.4s var(--ease);
}

.progress-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.progress-reset {
  font: inherit;
  font-size: 0.78rem;
  color: var(--text-faint);
  background: none;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.22rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.16s var(--ease);
}
.progress-reset:hover { color: var(--text); border-color: var(--accent-line); }

/* ---------- hero ---------- */

.hero { padding: 4.5rem 0 2.5rem; }

.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 99px;
  padding: 0.3rem 0.8rem;
  margin-bottom: 1.4rem;
}

.hero h1 { max-width: 20ch; }

.lede {
  font-size: 1.14rem;
  color: var(--text-dim);
  max-width: 66ch;
  line-height: 1.68;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 1.6rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* ---------- lobby (front page) ----------
   The entry page carries one idea and one call to action: no nav, no rail, no
   checklist. Everything else in the site hangs off the single button below. */

.lobby {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 3rem 0 4rem;
}

.lobby-inner {
  width: min(760px, calc(100% - 3rem));
  margin: 0 auto;
  text-align: center;
}

.lobby-mark { display: block; width: 52px; height: 52px; margin: 0 auto 1.6rem; }

.lobby h1 {
  font-size: clamp(2rem, 4.6vw, 2.85rem);
  max-width: 24ch;
  margin: 0 auto 0.7rem;
  /* Break at the comma rather than orphaning the last word. */
  text-wrap: balance;
}

.lobby-lede {
  font-size: 1.11rem;
  line-height: 1.62;
  color: var(--text-dim);
  max-width: 60ch;
  margin: 0 auto 1.1rem;
}

.lobby-sub {
  font-size: 0.95rem;
  color: var(--text-faint);
  max-width: 54ch;
  margin: 0 auto 1.5rem;
}

/* Code is never centred, even when its surroundings are. */
.lobby .cmd { text-align: left; }

/* The prompt is meant to be copied, not read: keep it short enough that the
   button under it stays in view, and say so with a fade at the cut. */
/* Wider right gutter than the shared block: the copy control is bigger here. */
.lobby .cmd-hero pre { max-height: 15rem; font-size: 0.8rem; padding-right: 5rem; }

.lobby .cmd-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.6rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(11, 12, 16, 0), #0b0c10);
}

/* Copying is the call to action here, so the control is a button, not a hint. */
.lobby .cmd-hero .copy {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.38rem 0.85rem;
  color: #17120b;
  background: var(--accent);
  border-color: var(--accent);
}
.lobby .cmd-hero .copy:hover { color: #17120b; background: #ff9630; border-color: #ff9630; }
.lobby .cmd-hero .copy[data-copied="1"] {
  color: #0a1a10;
  background: var(--pass);
  border-color: var(--pass);
}

/* ---------- quick start (lobby) ----------
   Two steps: set up once, then pick the work. Left-aligned inside the centred
   lobby, because everything in here is read line by line. */

.qs { text-align: left; margin-top: 1.8rem; }

.qs-step + .qs-step { margin-top: 2.6rem; }

.qs-title {
  display: flex;
  align-items: center;
  font-size: 1.16rem;
  font-weight: 640;
  margin: 0 0 0.35rem;
}

/* The margin rather than a flex gap: the badge stays separated from the title
   even when the flex layout does not apply. */
.qs-num {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  margin-right: 0.75rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1;
}

.qs-why { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 0.9rem; }

/* ---------- tabs ---------- */

.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.tab {
  font: 560 0.9rem var(--sans);
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.4rem 1rem;
  cursor: pointer;
  transition: all 0.16s var(--ease);
}
.tab:hover { color: var(--text); border-color: var(--accent-line); }
.tab[aria-selected="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.qs-panel[hidden] { display: none; }
.qs-panel:focus-visible { outline-offset: 4px; }

.qs-panel-why { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 0.5rem; }

/* These prompts are the call to action too, so their copy control never hides. */
.qs-panel .cmd .copy { opacity: 1; }
.qs-panel .cmd pre { white-space: pre-wrap; word-break: break-word; font-size: 0.82rem; }

.lobby-cta { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.6rem; }

.lobby-fine {
  margin: 2.4rem auto 0;
  max-width: 56ch;
  font-size: 0.86rem;
  color: var(--text-faint);
}

/* ---------- cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 780px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* Entry-path cards (Step 0) */
.path-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-raised) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.path-card:hover { border-color: var(--accent-line); }
.path-card > :last-child { margin-top: auto; }

.path-tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.5rem;
}

/* ---------- code blocks ---------- */

.cmd {
  position: relative;
  background: #0b0c10;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin: 0.9rem 0;
  overflow: hidden;
}

.cmd pre {
  margin: 0;
  padding: 0.85rem 3.2rem 0.85rem 1rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.855rem;
  line-height: 1.6;
  color: #e6e8ef;
}

.cmd pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* The shell prompt marker is decorative — excluded from copy by JS. */
.cmd .p { color: var(--accent); user-select: none; }

.copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font: 500 0.72rem var(--sans);
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.24rem 0.55rem;
  cursor: pointer;
  opacity: 0;
  transition: all 0.16s var(--ease);
}
.cmd:hover .copy, .copy:focus-visible { opacity: 1; }
.copy:hover { color: var(--text); border-color: var(--accent-line); background: var(--accent-soft); }
.copy[data-copied="1"] { color: var(--pass); border-color: var(--pass); opacity: 1; }

@media (hover: none) { .copy { opacity: 1; } }

/* The one-prompt block is a call to action: its copy control never hides, and
   the prompt scrolls rather than pushing the page down. */
.cmd-hero .copy { opacity: 1; }
.cmd-hero pre {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 22rem;
  overflow-y: auto;
}

/* Expected-output block */
.out {
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  margin: 0.9rem 0;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.62;
  color: var(--text-dim);
  white-space: pre;
}

.out .ok { color: var(--pass); }
.out .bad { color: var(--fail); }
.out .hint { color: var(--accent); }
.out .dim { color: var(--text-faint); }

.out-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 1.2rem 0 0.1rem;
}

/* ---------- checklist steps ---------- */

.steps { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: step; }

.step {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.4rem 1.6rem 1.5rem 3.6rem;
  margin-bottom: 1rem;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 1.15rem;
  top: 1.45rem;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.76rem;
  transition: all 0.22s var(--ease);
}

.step[data-done="1"] { border-color: rgba(88, 214, 138, 0.34); background: rgba(88, 214, 138, 0.035); }
.step[data-done="1"]::before {
  content: "✓";
  background: rgba(88, 214, 138, 0.14);
  border-color: rgba(88, 214, 138, 0.4);
  color: var(--pass);
  font-size: 0.85rem;
}

.step-head {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.3rem;
}

.step-title { font-size: 1.06rem; font-weight: 620; margin: 0; flex: 1; letter-spacing: -0.012em; }

.step-check {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.22rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.step-why { color: var(--text-dim); font-size: 0.95rem; }

/* "if it fails" disclosure */
details.fail {
  margin-top: 0.9rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  overflow: hidden;
}

details.fail > summary {
  cursor: pointer;
  padding: 0.6rem 0.95rem;
  font-size: 0.86rem;
  font-weight: 560;
  color: var(--warn);
  list-style: none;
  transition: background 0.16s var(--ease);
}
details.fail > summary::-webkit-details-marker { display: none; }
details.fail > summary::before { content: "▸ "; color: var(--text-faint); }
details.fail[open] > summary::before { content: "▾ "; }
details.fail > summary:hover { background: var(--surface); }

.fail-body { padding: 0.2rem 0.95rem 0.9rem; font-size: 0.92rem; }
.fail-body > :last-child { margin-bottom: 0; }

/* ---------- callouts ---------- */

.note {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 0.95rem 1.15rem;
  margin: 1.4rem 0;
  font-size: 0.95rem;
}
.note > :last-child { margin-bottom: 0; }
.note-title { font-weight: 640; color: var(--text); display: block; margin-bottom: 0.25rem; }

.note.blue { border-left-color: var(--info); background: rgba(106, 169, 240, 0.09); }
.note.plain { border-left-color: var(--line); background: var(--surface); }

/* The doctrine banner — the one idea that must land. */
.doctrine {
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(246, 133, 27, 0.13), rgba(246, 133, 27, 0.03));
  padding: 1.3rem 1.5rem;
  margin: 1.5rem 0;
}
.doctrine p { margin: 0; font-size: 1.02rem; }
.doctrine .k { color: var(--accent); font-weight: 640; }

/* ---------- agent prompt card ---------- */

.agent-card {
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(246, 133, 27, 0.10), var(--surface) 55%);
  padding: 1.6rem 1.7rem;
  margin: 2.2rem 0;
  box-shadow: var(--shadow);
}
.agent-card h2 { margin-top: 0; }

details.prompt > summary {
  cursor: pointer;
  display: inline-block;
  font: 560 0.9rem var(--sans);
  color: var(--bg);
  background: var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.05rem;
  list-style: none;
  transition: background 0.16s var(--ease), transform 0.16s var(--ease);
}
details.prompt > summary::-webkit-details-marker { display: none; }
details.prompt > summary:hover { background: #ff9630; }
details.prompt[open] > summary { background: var(--surface-2); color: var(--text); }

.prompt-body { margin-top: 1rem; }
.prompt-body .cmd pre { white-space: pre-wrap; word-break: break-word; max-height: 30rem; overflow-y: auto; }

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; margin: 1.2rem 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

th {
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-raised);
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: #d5d8e2;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(255, 255, 255, 0.018); }

td code { white-space: nowrap; }

/* Reference-table cells are their own copy button. */
code.copyable {
  cursor: pointer;
  transition: all 0.16s var(--ease);
}
code.copyable:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
code.copyable::after {
  content: "⧉";
  margin-left: 0.45em;
  opacity: 0;
  color: var(--text-faint);
  transition: opacity 0.16s var(--ease);
}
code.copyable:hover::after, code.copyable:focus-visible::after { opacity: 1; }
code.copyable.copied {
  color: var(--pass);
  border-color: rgba(88, 214, 138, 0.4);
  background: rgba(88, 214, 138, 0.1);
}
code.copyable.copied::after { content: ""; margin-left: 0; }

/* ---------- platform filter ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.5rem 0 0.5rem;
  align-items: center;
}

.filter-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-right: 0.4rem;
}

.chip {
  font: 500 0.85rem var(--sans);
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.34rem 0.9rem;
  cursor: pointer;
  transition: all 0.16s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--accent-line); }
.chip[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.filter-empty {
  color: var(--text-faint);
  font-style: italic;
  padding: 1.5rem 0;
}

tr[hidden], .filter-hidden { display: none !important; }

/* ---------- layer diagram ---------- */

.stack { display: flex; flex-direction: column; gap: 0.55rem; margin: 1.8rem 0; }

/* Names which end of the diagram is the one you touch. */
.stack-caption {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin: 1.6rem 0 0.55rem;
}
.stack-caption + .stack { margin-top: 0; }

.layer {
  width: 100%;
  text-align: left;
  font: inherit;
  /* Buttons do not inherit color; without this the UA default wins and the
     row titles render near-black on the dark surface. */
  color: var(--text);
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.95rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.2s var(--ease);
}
.layer:hover { border-color: var(--accent-line); transform: translateX(3px); }

/* Diagram rows that are illustration, not controls. */
.layer-static { cursor: default; }
.layer-static:hover { border-color: var(--line); transform: none; }
.layer[aria-expanded="true"] {
  border-color: var(--accent-line);
  background: linear-gradient(90deg, var(--accent-soft), var(--surface) 62%);
}

.layer-n {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1rem 0.4rem;
  flex: none;
}
.layer[aria-expanded="true"] .layer-n { color: var(--accent); border-color: var(--accent-line); }

.layer-name { font-weight: 620; letter-spacing: -0.01em; }
.layer-sub { color: var(--text-dim); font-size: 0.88rem; margin-left: auto; text-align: right; }

@media (max-width: 640px) {
  .layer { flex-wrap: wrap; }
  .layer-sub { margin-left: 0; width: 100%; text-align: left; }
}

.layer-detail {
  border: 1px solid var(--accent-line);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--bg-raised);
  padding: 1.1rem 1.3rem;
  margin: -0.55rem 0 0;
  font-size: 0.94rem;
}
.layer-detail > :last-child { margin-bottom: 0; }
.layer-detail[hidden] { display: none; }

.arrow {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.9rem;
  line-height: 1;
  margin: -0.15rem 0;
}

/* ---------- video cards ---------- */

.vid {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.vid:hover { border-color: var(--accent-line); transform: translateY(-2px); }

.vid-thumb {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(420px 200px at 30% 20%, rgba(246, 133, 27, 0.16), transparent 70%),
    linear-gradient(150deg, var(--surface-2), var(--bg-raised));
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  place-items: center;
  position: relative;
}

.vid-id {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 600;
  color: #d98b3a;
  letter-spacing: 0.04em;
}

.vid-body { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.vid-body h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.vid-body p { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 0.9rem; }
.vid-foot { margin-top: auto; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }

.badge {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--line);
  color: var(--text-faint);
  white-space: nowrap;
}
.badge.soon { color: var(--warn); border-color: rgba(240, 192, 90, 0.35); background: rgba(240, 192, 90, 0.08); }
.badge.live { color: var(--pass); border-color: rgba(88, 214, 138, 0.35); background: rgba(88, 214, 138, 0.08); }
.badge.dur { font-family: var(--mono); }

/* ---------- annotated evidence ---------- */

.annot { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.1rem; margin: 1.4rem 0; align-items: start; }

@media (max-width: 900px) { .annot { grid-template-columns: 1fr; } }

.annot-notes { display: flex; flex-direction: column; gap: 0.7rem; }

.annot-note {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}
.annot-note > :last-child { margin-bottom: 0; }
.annot-note b { color: var(--accent); font-family: var(--mono); font-size: 0.85rem; font-weight: 600; }

.verdict { font-family: var(--mono); font-weight: 600; }
.verdict.pass { color: var(--pass); }
.verdict.fail { color: var(--fail); }

/* ---------- dependency map ----------
   A column of nodes with the edge label between them, so the direction reads
   top to bottom without a diagram library. */

.map { margin: 1.5rem 0 2.5rem; }

.node {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-raised) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
}
.node:hover { border-color: var(--accent-line); }

/* The one you install. */
.node-key { border-color: var(--accent-line); }

.node-tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.35rem;
}

.node-name { font-size: 1.12rem; font-weight: 640; margin: 0 0 0.4rem; }
.node-what { font-size: 0.94rem; color: var(--text-dim); margin-bottom: 0.7rem; }

.node-list {
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  font-size: 0.86rem;
}
.node-list li { color: var(--text-dim); }

.node-url {
  display: block;
  font-family: var(--mono);
  font-size: 0.8rem;
  word-break: break-all;
  margin-bottom: 0.15rem;
}

.node .badge { margin: 0.55rem 0.4rem 0 0; display: inline-block; }
.node-more { display: block; font-size: 0.88rem; margin-top: 0.6rem; }

/* Edge labels carry the verb; the arrow alone would not say what flows. */
.map-edge {
  margin: 0.7rem 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-faint);
}

.map-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.map-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }

@media (max-width: 780px) {
  .map-split { grid-template-columns: 1fr; }
  .map-split .map-edge:last-child { margin-top: 0; }
  .map-row { grid-template-columns: 1fr; }
}

/* ---------- misc ---------- */

.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }

.btn {
  display: inline-block;
  font: 560 0.92rem var(--sans);
  border-radius: var(--radius-sm);
  padding: 0.62rem 1.25rem;
  border: 1px solid transparent;
  transition: all 0.18s var(--ease);
}
.btn-primary { background: var(--accent); color: #17120b; }
.btn-primary:hover { background: #ff9630; text-decoration: none; transform: translateY(-1px); }
.btn-ghost { border-color: var(--line); color: var(--text-dim); }
.btn-ghost:hover { border-color: var(--accent-line); color: var(--text); text-decoration: none; }

.sep { border: none; border-top: 1px solid var(--line-soft); margin: 3rem 0; }

.footer {
  border-top: 1px solid var(--line-soft);
  padding: 2.2rem 0 3rem;
  color: var(--text-faint);
  font-size: 0.86rem;
}
.footer p { color: var(--text-faint); margin-bottom: 0.5rem; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #17120b;
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 100;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}