/* ==========================================================================
 * Throwcast user manual — screen stylesheet.
 *
 * The palette is the app's own (src/styles.css), so the manual and the editor look like
 * one product and the dark screenshots sit on the page instead of glaring out of it.
 *
 * Two families of rule live here. The SHELL (topbar, sidebar, search, pager) is this page's
 * own furniture. The PROSE section restyles the classes that come out of manual.html, whose
 * stylesheet is for paper — every class the prose uses is answered below, so a figure or a
 * note renders the same here as it does in the PDF, in the other direction.
 * ========================================================================== */

:root {
  --bg: #1a1c1f;
  --panel: #232629;
  --panel-2: #2b2f33;
  --border: #3a3f44;
  --border-soft: #2e3237;
  --text: #d8dce0;
  --text-soft: #aab2b9;
  --text-dim: #8b9298;
  --accent: #4a9eff;
  --accent-2: #ffb347;

  /* The print stylesheet's names, remapped: a little of the prose carries inline
     `var(--ink-faint)` styles, which would otherwise resolve to nothing. */
  --ink: var(--text);
  --ink-soft: var(--text-soft);
  --ink-faint: var(--text-dim);
  --rule: var(--border);

  --topbar-h: 52px;
  --side-w: 300px;
  --measure: 920px;

  --mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  --sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: rgba(74, 158, 255, 0.3); }

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

/* ============================ top bar ============================
   Three columns so the search sits in the true centre of the window rather than the
   centre of whatever is left over after the brand. */

.topbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr minmax(240px, 520px) 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  z-index: 40;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 16px;
  font-weight: 640;
  letter-spacing: -0.01em;
  justify-self: start;
  padding: 4px 6px 4px 2px;
  border-radius: 6px;
}
.brand:hover { text-decoration: none; background: var(--panel-2); }
.brand .mark { flex: none; }
.brand-sub {
  color: var(--text-dim);
  font-weight: 500;
  font-size: 13.5px;
  padding-left: 9px;
  border-left: 1px solid var(--border);
}

.burger {
  display: none;
  background: none;
  border: 0;
  padding: 6px;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
}
.burger svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.burger:hover { background: var(--panel-2); }

.top-end { justify-self: end; display: flex; align-items: center; gap: 8px; }

.pdf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
}
.pdf:hover { text-decoration: none; color: var(--text); background: var(--panel-2); border-color: #4a5158; }
.pdf svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ============================ search ============================ */

.finder { position: relative; }

.finder input {
  width: 100%;
  height: 34px;
  padding: 0 62px 0 32px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.finder input::placeholder { color: var(--text-dim); }
.finder input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15); }

.finder-icon {
  position: absolute;
  left: 10px;
  top: 9px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--text-dim);
  stroke-width: 1.5;
  stroke-linecap: round;
  pointer-events: none;
}

.finder-key {
  position: absolute;
  right: 8px;
  top: 7px;
  font: 500 11px/18px var(--sans);
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 6px;
  pointer-events: none;
}
.finder input:focus ~ .finder-key { display: none; }

.results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(66vh, 560px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  z-index: 60;
}

.hit {
  display: block;
  padding: 9px 13px 11px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
}
.hit:last-child { border-bottom: 0; }
.hit:hover { text-decoration: none; background: var(--panel-2); }
.hit[aria-selected="true"] { background: #2f353c; }
.hit .where {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hit .what { display: block; font-size: 14.5px; font-weight: 620; line-height: 1.35; margin-top: 1px; }
.hit .what .n { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.hit .snip { display: block; font-size: 13px; line-height: 1.5; color: var(--text-soft); margin-top: 3px; }

.results .empty { padding: 16px 13px; color: var(--text-dim); font-size: 13.5px; }
.results .count {
  padding: 7px 13px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg);
  position: sticky;
  top: 0;
}

mark {
  background: rgba(255, 179, 71, 0.26);
  color: #ffd7a1;
  border-radius: 2px;
  padding: 0 1px;
}
.prose mark, .page > .unit-h mark { color: #ffe0b4; }
mark.on { background: rgba(255, 179, 71, 0.45); }

/* ============================ sidebar ============================ */

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 0 70px;
}

.nav-list, .nav-sub, .nav-sub .clip { list-style: none; margin: 0; padding: 0; }

.ch-row { display: flex; align-items: stretch; padding-right: 6px; }

/* A chapter row is a <button> (it opens its sub-sections, it does not navigate); the
   Contents row is an <a>. One rule dresses both, so they line up exactly. */
.ch-link {
  flex: 1;
  display: flex;
  gap: 9px;
  align-items: baseline;
  width: 100%;
  padding: 7px 8px 7px 14px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: inherit;
  text-align: left;
  min-width: 0;
  cursor: pointer;
}
.ch-link:hover { text-decoration: none; background: var(--panel-2); }
.ch-link .n { color: var(--accent-2); font-variant-numeric: tabular-nums; min-width: 15px; flex: none; }
.ch-link .t { flex: 1; min-width: 0; }
.ch-link.active { color: #fff; background: rgba(74, 158, 255, 0.14); }

.chev {
  flex: none;
  align-self: center;
  width: 10px;
  height: 10px;
  fill: none;
  stroke: var(--text-dim);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}
.ch-link:hover .chev { stroke: var(--text); }
.nav-ch.open .chev { transform: rotate(90deg); }

.nav-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}
.nav-ch.open .nav-sub { grid-template-rows: 1fr; }
/* Clipping alone would leave the collapsed links in the tab order and the accessibility
   tree. `visibility` takes them out of both; the delay holds them on screen for the length
   of the collapse so the rows do not blink out before they finish moving. */
.nav-sub > .clip {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s 0.2s;
}
.nav-ch.open .nav-sub > .clip { visibility: visible; transition: visibility 0s; }

.nav-sub a {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 5px 10px 5px 24px;
  margin-left: 14px;
  border-left: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 13.4px;
  line-height: 1.45;
}
.nav-sub a:hover { text-decoration: none; color: var(--text); background: var(--panel-2); }
.nav-sub a .n { color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 24px; flex: none; }
.nav-sub a.active {
  color: #fff;
  background: rgba(74, 158, 255, 0.14);
  border-left-color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-sub a.active .n { color: var(--accent); }

.nav-ch + .nav-ch { margin-top: 1px; }

.nav-home { padding-right: 6px; margin-bottom: 8px; }
.nav-home .ch-link .n { color: var(--accent-2); font-size: 9px; transform: translateY(-2px); }

.scrim { display: none; }

/* ============================ main ============================ */

/* No `scroll-behavior: smooth` here: switching page must land at the top instantly, and the
   one place a glide helps — scrolling to a search hit — asks for it explicitly. */
.main {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.page, .pager {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 40px;
}
.page { padding-top: 34px; }
.pager { margin-bottom: 60px; }

.eyebrow {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  font-size: 11.5px;
  font-weight: 620;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.eyebrow .k { color: var(--accent-2); }
.eyebrow:hover { text-decoration: none; }
.eyebrow:hover .s { text-decoration: underline; }

.unit-h {
  font-size: 30px;
  font-weight: 660;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.unit-h .n { color: var(--accent-2); font-variant-numeric: tabular-nums; }

/* ---- pager ---- */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.pager a {
  display: block;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.pager a:hover { text-decoration: none; border-color: var(--accent); background: var(--panel); }
.pager .dir { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.pager .ttl { display: block; font-size: 14px; font-weight: 600; margin-top: 2px; }
.pager .ttl .n { color: var(--accent-2); }
.pager .next { grid-column: 2; text-align: right; }

/* ==========================================================================
 * PROSE — the classes that arrive from manual.html.
 * ========================================================================== */

.prose > :first-child { margin-top: 0; }

.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 5px; }
.prose li > ul, .prose li > ol { margin-top: 5px; }
.prose strong { font-weight: 640; color: #e9edf1; }
.prose em { color: var(--text-soft); }

.prose h3 { font-size: 18px; font-weight: 640; line-height: 1.3; margin: 30px 0 10px; }
.prose h4 { font-size: 15px; font-weight: 640; margin: 22px 0 7px; color: var(--text-soft); }

p.lead { font-size: 17px; line-height: 1.6; color: var(--text-soft); margin-bottom: 24px; }

hr.sep { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }

/* ---- the contents page ---- */
.home-toc { list-style: none; margin: 0; padding: 0; }
.home-toc > li { margin-bottom: 26px; }
.home-ch {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 18px;
  font-weight: 640;
  color: var(--text);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.home-ch .n { color: var(--accent-2); min-width: 22px; font-variant-numeric: tabular-nums; }
/* The paragraph that used to open a chapter's own page. A chapter is not a page any more,
   so this is the only place it appears — and it reads better as a description here. */
.home-blurb { padding: 10px 0 2px 34px; }
.home-blurb .lead { font-size: 14.5px; line-height: 1.55; color: var(--text-soft); margin: 0; }
.home-sub {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px 24px;
}
.home-sub li { margin: 0; }
.home-sub a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 3px 0;
  color: var(--text-soft);
  font-size: 14px;
}
.home-sub a:hover { text-decoration: none; color: var(--text); }
.home-sub .n { color: var(--text-dim); min-width: 28px; flex: none; font-variant-numeric: tabular-nums; }

.xref { border-bottom: 1px dotted rgba(74, 158, 255, 0.5); }
.xref:hover { text-decoration: none; border-bottom-style: solid; }

/* ---- inline bits ---- */
code, kbd, .path { font-family: var(--mono); font-size: 0.88em; }
code {
  background: #2a2e33;
  border: 1px solid #363b41;
  border-radius: 4px;
  padding: 1px 4px;
  color: #e4e9ee;
}
kbd {
  display: inline-block;
  background: #31363c;
  border: 1px solid #474d55;
  border-bottom: 2px solid #21252a;
  border-radius: 4px;
  padding: 0 5px;
  font-size: 0.82em;
  line-height: 1.55;
  color: #e6ebf0;
  white-space: nowrap;
}
/* A UI label quoted in running text — the quotes are punctuation, not part of the label. */
.ui { font-weight: 600; color: #f0f3f6; white-space: nowrap; }
.ui::before { content: "\201C"; opacity: 0.35; }
.ui::after  { content: "\201D"; opacity: 0.35; }

/* ---- figures ---- */
.prose figure { margin: 26px 0 30px; }

.shot {
  position: relative;
  line-height: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #101215;
}
.shot img { width: 100%; height: auto; display: block; }

/* A venue render is a deliberately unlit room. On paper it needs a hard lift; on a dark
   screen a gentler one is enough to separate the geometry from the background. */
.lift img { filter: brightness(1.26) saturate(1.05); }
.lift-sm img { filter: brightness(1.12) saturate(1.02); }

/* Callout overlays: the badge sits in a gutter beside the screenshot and an arrow points
   back at the control, so nothing the reader is hunting for is covered up. Geometry is
   authored in the screenshot's own pixels and scales with the figure — see the manual's
   own stylesheet for the full note. */
.cal { position: relative; }
.cal.bleed { margin: 0; }          /* the bleed is a print trick; there is no page margin here */
.cal > img { position: absolute; border: 1px solid var(--border); border-radius: 4px; }
.cal > svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.cal .lead { fill: none; stroke: #e08a12; stroke-linecap: round; }
.cal marker path { fill: #e08a12; stroke: none; }
.cal .badge circle { fill: var(--accent-2); stroke: #6b4708; stroke-width: 2; }
.cal .badge text {
  fill: #241703;
  font-family: var(--sans);
  font-weight: 650;
  text-anchor: middle;
  dominant-baseline: central;
}

/* Figures open full size on click — a 1720-px window shot is half scale in this column. */
.shot, .cal { cursor: zoom-in; }
.shot::after, .cal::after {
  content: "⤢";
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: rgba(26, 28, 31, 0.85);
  border: 1px solid var(--border);
  color: var(--text);
  font: 400 14px/24px var(--sans);
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.shot:hover::after, .cal:hover::after { opacity: 1; }

figcaption { font-size: 13.5px; line-height: 1.55; color: var(--text-soft); padding-top: 9px; }
figcaption .fignum { font-weight: 650; color: var(--text); margin-right: 6px; }

/* A side panel is 360 × 940 px — tall and narrow. Full column width would be a screenful
   of one panel, so it sits beside its caption instead. */
.fig-panel { display: grid; grid-template-columns: 300px 1fr; gap: 0 24px; align-items: start; }
.fig-panel.narrow { grid-template-columns: 268px 1fr; }
.fig-panel.wide { grid-template-columns: 400px 1fr; }
.fig-panel figcaption { padding-top: 0; }

figcaption .keys {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 4px 22px;
  counter-reset: key;
}
.fig-panel figcaption .keys, figcaption .keys.one-col { grid-template-columns: 1fr; }
figcaption .keys li {
  counter-increment: key;
  position: relative;
  padding-left: 24px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
/* Numbered to match the amber badges on the figure itself. */
figcaption .keys li::before {
  content: counter(key);
  position: absolute;
  left: 0;
  top: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent-2);
  color: #241703;
  font: 650 11px/17px var(--sans);
  text-align: center;
}

/* ---- notes ---- */
.note {
  border-left: 3px solid var(--accent);
  background: rgba(74, 158, 255, 0.07);
  padding: 12px 16px 12px 14px;
  margin: 20px 0;
  font-size: 14.2px;
  line-height: 1.6;
  border-radius: 0 6px 6px 0;
}
.note p:last-child { margin-bottom: 0; }
.note .lbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.note.warn { border-left-color: #d99b3e; background: rgba(255, 179, 71, 0.08); }
.note.warn .lbl { color: var(--accent-2); }
.note.rule { border-left-color: #6d757c; background: var(--panel); }
.note.rule .lbl { color: #c3cad0; }

/* ---- tables ---- */
.prose table, .worked table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 22px;
  font-size: 13.8px;
}
caption {
  caption-side: top;
  text-align: left;
  font-size: 13.5px;
  color: var(--text-soft);
  padding-bottom: 7px;
}
caption .fignum { font-weight: 650; color: var(--text); margin-right: 6px; }
th {
  text-align: left;
  font-weight: 650;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1.5px solid var(--border);
  padding: 7px 12px 6px 0;
}
td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
td:last-child, th:last-child { padding-right: 0; }
tbody tr:hover td { background: rgba(255, 255, 255, 0.022); }
.t-key td:first-child, .t-key th:first-child { white-space: nowrap; width: 128px; }
.t-num td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 0.94em; }

/* ---- worked example ---- */
.worked {
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 0 0 6px 6px;
  padding: 14px 18px 8px;
  margin: 22px 0;
  background: #1f2226;
}
.worked h4 {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.worked table { margin: 0; font-size: 13.6px; }
.worked tr:last-child td { border-bottom: 0; }

/* ============================ lightbox ============================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(9, 10, 12, 0.94);
  display: grid;
  place-items: center;
  padding: 40px 28px;
  cursor: zoom-out;
}
/* `display` beats the `hidden` attribute, so a closed lightbox would sit invisible over the
   whole page and eat every click. Both overlays have to say it explicitly. */
.lightbox[hidden] { display: none; }
.lightbox .stage { width: min(1720px, 96vw); max-height: 92vh; overflow: auto; cursor: default; }
.lightbox .shot, .lightbox .cal { cursor: default; }
.lightbox .shot::after, .lightbox .cal::after { display: none; }
.lightbox .lift img, .lightbox .lift-sm img { filter: none; }

.lb-close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 36px;
  height: 36px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lb-close:hover { background: var(--panel-2); }

/* ============================ responsive ============================ */

@media (max-width: 1080px) {
  :root { --side-w: 264px; }
  .page, .pager { padding: 0 28px; }
  .page { padding-top: 28px; }
}

@media (max-width: 880px) {
  body { grid-template-columns: 1fr; }
  .burger { display: block; }
  .topbar { grid-template-columns: auto 1fr auto; gap: 10px; }
  .brand { display: none; }
  .finder { justify-self: stretch; max-width: none; }
  .finder-key { display: none; }

  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    bottom: 0;
    left: 0;
    width: 300px;
    max-width: 84vw;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .sidebar.open { transform: none; }
  .scrim {
    display: block;
    position: fixed;
    inset: var(--topbar-h) 0 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 45;
  }
  .scrim[hidden] { display: none; }

  .fig-panel, .fig-panel.narrow, .fig-panel.wide { grid-template-columns: 1fr; gap: 10px; }
  .fig-panel .shot, .fig-panel .cal { max-width: 320px; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: 1; }
}

@media (max-width: 560px) {
  body { font-size: 14.5px; }
  .page, .pager { padding: 0 16px; }
  .unit-h { font-size: 24px; }
  .top-end { display: none; }
}

/* ============================ print ============================
   The PDF is the printable manual — this only keeps a stray Ctrl-P from putting the
   furniture on paper. */
@media print {
  body { display: block; height: auto; background: #fff; color: #1c2024; }
  .topbar, .sidebar, .pager, .lightbox, .scrim, .shot::after, .cal::after { display: none !important; }
  .main { overflow: visible; }
  .page { max-width: none; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}