/* ==========================================================================
   instrument.css — the per-instrument detail page
   Consumes tokens.css. No hard-coded colors, so both themes work.
   ========================================================================== */

.instrument-page { padding-top: 96px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.inst-hero {
  border-bottom: 1px solid var(--hair-faint);
  padding: var(--space-32) 0 var(--space-48);
  background:
    radial-gradient(120% 100% at 0% 0%, var(--surface-strong), transparent 60%);
}

.crumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-24);
}

.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--fg-2); }
.crumbs span[aria-current] { color: var(--fg-2); }

/* The registry palette in instruments/data.js is tuned for the black canvas,
   and light is the default theme. Painted straight onto the cream one, the
   "brand" and "orchestration" categories are #FFFFFF: white on #FBFBF8 is
   1.04:1, which is not low contrast, it is an invisible line of text. Yellow
   landed at 1.6 and green at 1.9. So the category carries a name here, not a
   hex, and each one gets an ink for the cream canvas and a signal for the
   black one. */
.inst-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cat-ink, var(--orange));
  margin-bottom: var(--space-12);
}

.inst-cat[data-cat="meta"],
.inst-cat[data-cat="biometric"],
.inst-cat[data-cat="infra"],
.inst-cat[data-cat="hardware"] { --cat-ink: #B8410F; }
.inst-cat[data-cat="legal"],
.inst-cat[data-cat="creative"] { --cat-ink: #8A6100; }
.inst-cat[data-cat="civic"],
.inst-cat[data-cat="papers"] { --cat-ink: #0F6E56; }
/* The two neutral categories read as "no hue", which on cream means ink. */
.inst-cat[data-cat="brand"],
.inst-cat[data-cat="orchestration"] { --cat-ink: #14171C; }

html[data-theme="dark"] .inst-cat[data-cat="meta"],
html[data-theme="dark"] .inst-cat[data-cat="biometric"],
html[data-theme="dark"] .inst-cat[data-cat="infra"],
html[data-theme="dark"] .inst-cat[data-cat="hardware"] { --cat-ink: #FF6B35; }
html[data-theme="dark"] .inst-cat[data-cat="legal"],
html[data-theme="dark"] .inst-cat[data-cat="creative"] { --cat-ink: #FFBE0B; }
html[data-theme="dark"] .inst-cat[data-cat="civic"],
html[data-theme="dark"] .inst-cat[data-cat="papers"] { --cat-ink: #7DC9A2; }
html[data-theme="dark"] .inst-cat[data-cat="brand"],
html[data-theme="dark"] .inst-cat[data-cat="orchestration"] { --cat-ink: #FFFFFF; }

.inst-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  /* Instrument names are single unbreakable words, several of them long
     ("BYTEFRAME", "ALIGNMENT EXPERIMENT"), so the floor is set to what fits a
     390px phone rather than to what looks best on a laptop. */
  font-size: clamp(30px, 7.5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-8);
  overflow-wrap: break-word;
}

.inst-role {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--space-20);
}

.inst-tagline {
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 62ch;
  margin-bottom: var(--space-24);
}

/* ── Chips ───────────────────────────────────────────────────────────────── */

.inst-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
}

.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-pill);
  color: var(--fg-3);
  background: var(--surface);
  white-space: nowrap;
}

/* Stack chips carry one or two words and are right to keep on one line. The
   status chip carries a sentence ("Part 1 built, curriculum approved,
   companion game content complete"), and nowrap made that sentence 527px wide
   inside a 390px phone, which pushed the whole page sideways. It is the only
   chip allowed to wrap. */
.chip-status {
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  color: var(--green);
  white-space: normal;
  max-width: 100%;
}

.chip-link {
  border-color: color-mix(in srgb, var(--orange) 45%, transparent);
  color: var(--orange);
}

.chip-link:hover { background: color-mix(in srgb, var(--orange) 12%, transparent); }

/* ── Body layout ─────────────────────────────────────────────────────────── */

.inst-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-64);
  align-items: start;
  padding-top: var(--space-48);
  padding-bottom: var(--space-80);
}

@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr. A bare 1fr resolves its minimum to the track's
     max-content, so one wide <pre> in a code block pushes the whole column
     past the viewport and the page scrolls sideways on a phone. */
  .inst-body { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); }
}

/* Same reason: these are grid and flow children of a constrained track, and
   each needs an explicit zero minimum before its own overflow rule can take
   effect. Without this the <pre>'s overflow-x never engages, because the
   column simply grows to fit it. */
.inst-prose,
.prose-block,
.codeblock,
.faq dd {
  min-width: 0;
}

/* ── Prose ───────────────────────────────────────────────────────────────── */

.prose-block { margin-bottom: var(--space-48); }

.inst-prose h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--space-16);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--hair-faint);
}

.inst-prose h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 17px;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-8);
  color: var(--fg);
}

.inst-prose p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 68ch;
  margin-bottom: var(--space-16);
}

.inst-prose p:last-child { margin-bottom: 0; }

.inst-prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface-strong);
  border: 1px solid var(--hair-faint);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--fg);
}

.differ {
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--hair-faint);
}

.differ:last-child { border-bottom: 0; }

.status-note {
  font-size: 14px !important;
  color: var(--muted) !important;
  border-left: 2px solid var(--hair);
  padding-left: var(--space-16);
}

.status-note a { color: var(--orange); text-decoration: underline; }

/* ── Code blocks ─────────────────────────────────────────────────────────── */

.codeblock {
  margin: 0 0 var(--space-32);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--lift);
}

.codeblock figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--hair-faint);
  background: var(--surface);
}

.codeblock pre {
  margin: 0;
  padding: var(--space-16);
  overflow-x: auto;
  background: var(--canvas);
  /* A long line scrolls inside the block; the page never scrolls sideways. */
  max-width: 100%;
}

/* Scoped to the <pre>: an inline <code> inside a caption or a note must stay
   inline, so this cannot be `.codeblock code`. */
.codeblock pre code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--fg-2);
  background: none;
  border: 0;
  padding: 0;
  white-space: pre;
  display: block;
  /* Tabs in source excerpts should not blow the line out to 8 columns. */
  tab-size: 2;
}

.codenote {
  font-size: 14px !important;
  line-height: 1.6;
  color: var(--fg-3) !important;
  padding: var(--space-12) var(--space-16);
  border-top: 1px solid var(--hair-faint);
  background: var(--surface);
  margin: 0 !important;
  max-width: none !important;
}

.codenote code { font-size: 12px; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.faq dt {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  color: var(--fg);
  margin-top: var(--space-20);
  margin-bottom: var(--space-8);
}

.faq dt:first-child { margin-top: 0; }

.faq dd {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0 0 var(--space-8);
  padding-left: var(--space-16);
  border-left: 2px solid var(--hair);
  max-width: 68ch;
}

/* ── Aside ───────────────────────────────────────────────────────────────── */

.inst-aside { position: sticky; top: 96px; }

@media (max-width: 900px) {
  .inst-aside { position: static; }
}

.inst-aside h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-12);
  font-weight: var(--fw-regular);
}

.rel-list {
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--hair-faint);
  border: 1px solid var(--hair-faint);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-24);
}

.rel-list a {
  display: block;
  padding: var(--space-12) var(--space-16);
  background: var(--canvas);
  transition: background 0.18s ease;
}

.rel-list a:hover { background: var(--surface-strong); }

.rel-list .rn {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg);
}

.rel-list .rr {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.aside-cta {
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: var(--space-20);
  background: var(--surface);
}

.aside-cta p {
  font-size: 14px;
  color: var(--fg-2);
  margin-bottom: var(--space-12);
}

.aside-cta .btn { width: 100%; justify-content: center; margin-bottom: var(--space-8); }
.aside-cta .btn:last-child { margin-bottom: 0; }

/* ── Depth rail (catalog index) ──────────────────────────────────────────
   The fifteen entries with source excerpts and measured results, surfaced
   above the full catalog so a first-time reader lands on a page that has
   something to read rather than on entry 47.                              */

.depth-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--hair-faint);
  border: 1px solid var(--hair-faint);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.depth-rail a {
  display: block;
  padding: var(--space-12) var(--space-16);
  background: var(--canvas);
  transition: background 0.18s ease;
}

.depth-rail a:hover { background: var(--surface-strong); }

.depth-rail .dn {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.07em;
  color: var(--fg);
}

.depth-rail .dd {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}