/* Pandora's Router.
   The drawing is pinned on the left and reads as the page's contents; the prose scrolls past it.
   Layout from the atlas mockup, drawing and warm-paper palette from the spine mockup.

   Colour tokens. Brand values come from the Hoplight token set. Four light values are darkened
   proposals, because the brand originals do not clear WCAG AA as text on these two grounds:
     stone     #8B8578 measured 3.37 on paper  -> --muted      #6B6459 measured 5.37
     gold deep #B8851F measured 3.01 on paper  -> --accent-ink #8A6310 measured 4.98
     flag      #B84A3E measured 4.30 on panel  -> --refuse     #8E2C20 measured 6.92
   The whole dark set is a proposal; the brand file carries no dark mode.
   Every pair is measured by contrast-proof.mjs in this folder. */

:root {
  --paper: #F7F5F0;
  --panel: #EFEAE1;
  --ink: #0A1628;
  --muted: #6B6459;
  --accent: #E8A838;
  --accent-ink: #8A6310;
  --refuse: #8E2C20;
  --code-bg: #0A1628;
  --code-fg: #F7F5F0;

  --rule: rgba(107, 100, 89, .32);
  --rule-soft: rgba(107, 100, 89, .17);
  --stripe: rgba(107, 100, 89, .13);
  --grid: rgba(107, 100, 89, .13);
  --node-ring: var(--panel);

  --sans: 'GT America', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'GT America Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;

  --measure: 64ch;
  --gutter: clamp(20px, 3.6vw, 52px);
  --shell: 1320px;
  --panel-w: clamp(330px, 34vw, 500px);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0C131C;
    --panel: #1C2836;
    --ink: #F0EBE1;
    --muted: #B8B0A2;
    --accent: #EFC06A;
    --accent-ink: #EFC06A;
    --refuse: #E27A69;
    --code-bg: #060B12;
    --code-fg: #E6E1D7;
    --rule: rgba(184, 176, 162, .34);
    --rule-soft: rgba(184, 176, 162, .18);
    --stripe: rgba(184, 176, 162, .10);
    --grid: transparent;
    --node-ring: var(--panel);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #0C131C;
  --panel: #1C2836;
  --ink: #F0EBE1;
  --muted: #B8B0A2;
  --accent: #EFC06A;
  --accent-ink: #EFC06A;
  --refuse: #E27A69;
  --code-bg: #060B12;
  --code-fg: #E6E1D7;
  --rule: rgba(184, 176, 162, .34);
  --rule-soft: rgba(184, 176, 162, .18);
  --stripe: rgba(184, 176, 162, .10);
  --grid: transparent;
  --node-ring: var(--panel);
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  background: var(--paper);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

/* the faint measure the drawing sits on */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .75) 180px, rgba(0, 0, 0, 0) 72%);
}

.shell {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-bottom-color: var(--accent-ink); }

a:focus-visible,
button:focus-visible,
.skip:focus-visible,
.plan a:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border: 0;
  z-index: 30;
}
.skip:focus { left: 12px; top: 12px; }

/* masthead ------------------------------------------------------------- */

.top { border-bottom: 1px solid var(--rule); background: var(--paper); position: relative; z-index: 2; }
.top .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  padding-top: 18px;
  padding-bottom: 16px;
}
.mark { font-weight: 500; letter-spacing: -.01em; border: 0; margin-right: auto; }
.top nav { display: flex; gap: 24px; font-size: 15.5px; }
.top nav a { border: 0; color: var(--muted); padding: 6px 0; }
.top nav a:hover { color: var(--ink); }
.top nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--rule); }

.mode {
  font: inherit;
  font-size: 14.5px;
  color: var(--muted);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 14px;
  min-height: 34px;
  cursor: pointer;
}
.mode:hover { color: var(--ink); border-color: var(--accent-ink); }
.mode .on { display: none; }
:root[data-theme="dark"] .mode .on { display: inline; }
:root[data-theme="dark"] .mode .off { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mode .on { display: inline; }
  :root:not([data-theme="light"]) .mode .off { display: none; }
}
:root[data-theme="light"] .mode .on { display: none; }
:root[data-theme="light"] .mode .off { display: inline; }

/* two columns: the drawing stays, the prose moves ----------------------- */

.manual {
  display: grid;
  grid-template-columns: var(--panel-w) minmax(0, 1fr);
  column-gap: clamp(32px, 4vw, 76px);
  padding-top: clamp(20px, 3vw, 34px);
}
.lane { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.head { grid-column: 2; grid-row: 1; }
.read { grid-column: 2; grid-row: 2; }

.lane {
  position: sticky;
  top: 16px;
  margin: 0;
  padding: 18px 18px 16px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 5px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lane .title {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-soft);
}

/* the drawing ----------------------------------------------------------- */

.plan {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.plan.narrow { display: none; }
.plan text { font-family: var(--sans); }
.plan .stage { font-size: 16px; font-weight: 500; fill: var(--ink); }
.plan .note { font-size: 13px; fill: var(--muted); }
.plan .refuse { font-family: var(--mono); font-size: 12.5px; fill: var(--refuse); letter-spacing: .01em; }
.plan .pass { font-family: var(--mono); font-size: 12.5px; fill: var(--accent-ink); }
.plan .line { stroke: var(--accent-ink); stroke-width: 2; fill: none; }
.plan .branch, .plan .dead { stroke: var(--refuse); stroke-width: 1.5; fill: none; }
.plan .node { fill: var(--accent); stroke: var(--accent-ink); stroke-width: 1.5; }
.plan .end { fill: var(--ink); stroke: var(--node-ring); stroke-width: 2.5; }
.plan .split { stroke: var(--rule-soft); stroke-width: 1; }
.plan .stop { fill: var(--refuse); }
.plan .abort { font-family: var(--mono); font-size: 12.5px; fill: var(--refuse); letter-spacing: .01em; }
.plan a { border: 0; }
.plan a:hover .stage { fill: var(--accent-ink); }
.plan a:hover .node { stroke-width: 3; }

/* selecting a half dims the other, so the drawing says where you are */
.plan .half { transition: opacity 180ms ease-out; }
body:has(#after:target) .plan .before-half,
body:has(#aborts:target) .plan .gates-half { opacity: .3; }
body:has(#before:target) .plan .after-half,
body:has(#gates:target) .plan .aborts-half { opacity: .3; }
@media (prefers-reduced-motion: reduce) { .plan .half { transition: none; } }

@media (prefers-reduced-motion: no-preference) {
  .plan .line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: draw 1000ms cubic-bezier(.2, .7, .3, 1) forwards;
  }
  .plan .drawn { opacity: 0; animation: settle 420ms ease-out forwards; }
  .plan .d1 { animation-delay: 240ms; }
  .plan .d2 { animation-delay: 360ms; }
  .plan .d3 { animation-delay: 480ms; }
  .plan .d4 { animation-delay: 600ms; }
  .plan .d5 { animation-delay: 720ms; }
  .plan .d6 { animation-delay: 830ms; }
  .plan .d7 { animation-delay: 940ms; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes settle { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* the text -------------------------------------------------------------- */

h1 {
  font-size: clamp(33px, 1.2rem + 2.5vw, 52px);
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -.022em;
  margin: 0 0 20px;
  max-width: 16ch;
  text-wrap: balance;
}

.lede {
  font-size: clamp(18px, 1rem + .45vw, 21px);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 0 28px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin: 0 0 clamp(30px, 4vw, 48px);
}
.button {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 13px 26px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 3px;
  min-height: 46px;
}
.button:hover { background: var(--accent-ink); color: var(--paper); }
:root[data-theme="dark"] .button:hover { color: var(--paper); }
.quiet { color: var(--muted); border-bottom-color: var(--rule-soft); }
.quiet:hover { color: var(--ink); }

section { padding-bottom: clamp(20px, 3vw, 36px); }

h2 {
  position: relative;
  font-size: clamp(23px, 1rem + 1vw, 28px);
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -.016em;
  margin: clamp(36px, 4.5vw, 56px) 0 14px;
  max-width: 32ch;
}
.read > section:first-child h2 { margin-top: 4px; }
.head h2 { margin-top: 0; }

h3 {
  font-size: 19.5px;
  font-weight: 500;
  letter-spacing: -.006em;
  margin: 32px 0 8px;
  font-family: var(--mono);
  color: var(--accent-ink);
}
p { max-width: var(--measure); margin: 0 0 18px; }

blockquote {
  margin: 26px 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--accent);
  max-width: var(--measure);
}
blockquote p { margin: 0; font-size: 18px; }

ul { max-width: var(--measure); padding-left: 20px; }
li { margin-bottom: 10px; }

code {
  font-family: var(--mono);
  font-size: .92em;
  background: var(--stripe);
  padding: 1px 5px;
  border-radius: 2px;
}
pre {
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--rule-soft);
  padding: 18px 22px;
  border-radius: 4px;
  overflow-x: auto;
  max-width: 100%;
  font-size: 13.5px;
  line-height: 1.7;
}
pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* the three verdict values ---------------------------------------------- */

.verdicts { list-style: none; padding: 0; margin: 22px 0; max-width: var(--measure); }
.verdicts li {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  margin: 0;
  border-top: 1px solid var(--rule-soft);
}
.verdicts li:last-child { border-bottom: 1px solid var(--rule-soft); }
.verdicts .v { font-family: var(--mono); font-size: 13.5px; color: var(--accent-ink); padding-top: 3px; }
.verdicts .hard .v { color: var(--refuse); }

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

.scroll { overflow-x: auto; margin: 22px 0; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: 12px 20px 12px 0;
  border-bottom: 1px solid var(--rule-soft);
}
thead th {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
}
tbody tr:nth-child(even) { background: var(--stripe); }
td.gate, th.gate { font-family: var(--mono); font-size: 13.5px; white-space: nowrap; color: var(--accent-ink); }
td.gate.fail { color: var(--refuse); }

/* footer ---------------------------------------------------------------- */

.bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--rule);
  margin-top: clamp(48px, 6vw, 80px);
  padding: 26px 0 52px;
  font-size: 15px;
  color: var(--muted);
}
.bottom a { color: var(--ink); }

/* one column: the drawing unpins and sits above the prose ---------------- */

@media (max-width: 1040px) {
  .manual { grid-template-columns: minmax(0, 1fr); }
  .head { grid-column: 1; grid-row: 1; }
  .lane { grid-column: 1; grid-row: 2; position: static; max-height: none; margin: 0 0 36px; max-width: 470px; }
  .read { grid-column: 1; grid-row: 3; }
  .actions { margin-bottom: 30px; }
  body::before { display: none; }
}

@media (max-width: 680px) {
  .plan.wide { display: none; }
  .plan.narrow { display: block; }
  .plan .stage { font-size: 17px; }
  .plan .note { font-size: 13.5px; }
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .top .shell { padding-top: 14px; padding-bottom: 12px; }
  .top nav { gap: 18px; font-size: 15px; }
  .button { width: 100%; text-align: center; }
  .verdicts li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lane { padding: 15px 14px 14px; }
}