/* ==========================================================================
   LeadRefinery — How the Platform Works · shared stylesheet
   Owned by doc-page-stylist. Pages are plain semantic HTML plus the few
   classes documented here. No external fonts, scripts, or imports — ever.
   ========================================================================== */

/* ---- 1. Design tokens -------------------------------------------------- */
:root {
  --paper: #fdfcfa;            /* warm off-white page background            */
  --ink: #1a2333;              /* body text                                 */
  --accent: #0f766e;           /* deep teal — links, why-it-matters         */
  --accent-hover: #0c5f58;     /* teal, darkened for hover                  */
  --accent-2: #b45309;         /* amber — the-technical-bit                 */
  --muted: #5b6472;            /* secondary text, captions, teasers         */
  --line: #e2e8f0;             /* hairlines and borders                     */
  --accent-wash: #edf5f3;      /* faint teal fill behind callouts           */
  --accent-2-wash: #faf3e8;    /* faint amber fill behind callouts          */
  --diagram-paper: transparent;/* backing behind diagram images             */
  --diagram-paper-solid: #fdfcfa; /* diagrams over the lightbox backdrop, which
                                     is dark in BOTH themes                   */
  --sidebar-w: 17rem;          /* desktop sidebar column width              */

  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Dark theme — same tokens, swapped values. Contrast kept >= 4.5:1. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12161f;
    --ink: #e8e6e1;
    --accent: #2dd4bf;
    --accent-hover: #5eead4;
    --accent-2: #fbbf24;
    --muted: #a3adbd;
    --line: #2b3342;
    --accent-wash: #14211f;
    --accent-2-wash: #241d11;
    --diagram-paper: #fdfcfa;  /* diagrams are drawn for light paper        */
  }
}

/* ---- 2. Reset & base --------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--accent-wash); }

img { max-width: 100%; height: auto; }

/* ---- 3. Site shell -------------------------------------------------------
   Canonical page structure (in this order, directly inside <body>):

     <input type="checkbox" id="nav-open" class="nav-state">
     <header class="topbar">   site title + <label class="nav-toggle">      </header>
     <div class="shell">
       <nav class="site-nav">  site title + grouped nav (.nav-group)        </nav>
       <div class="content">   <header> breadcrumb, <main>, <footer>        </div>
     </div>

   ≥ 900px: two panes — sticky sidebar + content; the top bar is hidden.
   < 900px: sidebar hidden; sticky top bar with a CSS-only disclosure menu
   driven by the checkbox. No JavaScript anywhere.                          */

/* The checkbox that drives the mobile menu: visually hidden, focusable. */
.nav-state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.shell {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* -- The sidebar nav ------------------------------------------------------ */
nav.site-nav {
  padding: 1.4rem 1rem 2.25rem 1.25rem;
}

nav.site-nav .site-title {
  font-size: 1rem;
  margin: 0 0 1.4rem;
}

.nav-group + .nav-group { margin-top: 1.5rem; }

.nav-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}

nav.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav.site-nav li { margin: 0 0 0.15rem; }

nav.site-nav a {
  display: block;
  padding: 0.32rem 0.6rem 0.32rem 0.85rem;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
}

nav.site-nav a:hover {
  color: var(--accent-hover);
  background: var(--accent-wash);
}

/* Current page: accent tint + left rule. */
nav.site-nav a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-wash);
  border-left-color: var(--accent);
  font-weight: 600;
}

/* Blueprints are a second kind of page, so a rule separates them from the
   guides above. Their sections collapse with <details>, which needs no script;
   tools/documentation/build-nav.py writes the markup and opens the section
   that holds the current page. */
.nav-group.nav-blueprints {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

nav.site-nav .nav-sub { margin: 0 0 0.15rem; }

nav.site-nav .nav-sub > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.6rem 0.32rem 0.85rem;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}

nav.site-nav .nav-sub > summary::-webkit-details-marker { display: none; }

nav.site-nav .nav-sub > summary:hover {
  color: var(--accent-hover);
  background: var(--accent-wash);
}

/* Chevron: points right when closed, down when open. */
nav.site-nav .nav-sub > summary::after {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  margin: 0 0.15rem 0 0;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

nav.site-nav .nav-sub[open] > summary::after { transform: rotate(45deg); }

nav.site-nav .nav-count {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* The section that holds the current page reads as current while closed. */
nav.site-nav .nav-sub:has(a[aria-current="page"]) > summary {
  color: var(--accent);
  font-weight: 600;
}

nav.site-nav .nav-sub > ul {
  margin: 0.1rem 0 0.5rem 0.85rem;
  padding-left: 0.4rem;
  border-left: 1px solid var(--line);
}

@media (prefers-reduced-motion: reduce) {
  nav.site-nav .nav-sub > summary::after { transition: none; }
}

/* -- The mobile top bar ---------------------------------------------------- */
header.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

header.topbar > * { max-width: none; margin: 0; }

.nav-toggle {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.nav-state:checked ~ .topbar .nav-toggle {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-wash);
}

.nav-state:focus-visible ~ .topbar .nav-toggle {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* -- Two panes at >= 900px -------------------------------------------------- */
@media (min-width: 900px) {
  header.topbar { display: none; }
  .nav-state { display: none; }

  .shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  }

  nav.site-nav {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    border-right: 1px solid var(--line);
  }
}

/* -- Disclosure menu below 900px -------------------------------------------- */
@media (max-width: 899.98px) {
  html { scroll-padding-top: 4.25rem; }

  nav.site-nav { display: none; }

  .nav-state:checked ~ .shell nav.site-nav {
    display: block;
    border-bottom: 1px solid var(--line);
    padding: 1rem 1.25rem 1.5rem;
  }

  /* The top bar already shows the site title. */
  nav.site-nav .site-title { display: none; }
}

/* ---- 4. Page frame — prose column and the .wide breakout --------------- */
main {
  flex: 1;
  width: 100%;
  max-width: calc(46rem + 2.5rem);   /* 46rem of prose + side padding */
  margin-inline: auto;
  padding: 2.5rem 1.25rem 3rem;
}

/* A section (or figure) holding a diagram may widen to 72rem. */
.wide {
  width: min(72rem, 100vw - 2.5rem);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Inside the shell, the content pane is the viewport minus the sidebar. */
@media (min-width: 900px) {
  .shell .wide {
    width: min(72rem, 100vw - var(--sidebar-w) - 2.5rem);
  }
}

/* Prose inside a wide section stays at a readable measure. */
.wide > :not(figure):not(table) {
  max-width: 46rem;
  margin-inline: auto;
}

/* ---- 5. Content header & breadcrumb ------------------------------------- */
header {
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 1.25rem;
}

header > * {
  max-width: 46rem;
  margin-inline: auto;
}

.site-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.site-title a { color: var(--ink); text-decoration: none; }
.site-title a:hover { color: var(--accent); }

nav.breadcrumb {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}

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

/* Breadcrumbs written as a list get their arrows drawn for them. */
nav.breadcrumb ol,
nav.breadcrumb ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

nav.breadcrumb li { margin: 0; }

nav.breadcrumb li + li::before {
  content: "\2192";              /* → */
  margin: 0 0.45rem;
  color: var(--muted);
}

/* ---- 6. Title block & standfirst ---------------------------------------- */
h1 {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

p.standfirst {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 2.5rem;
}

/* ---- 7. Body typography ------------------------------------------------- */
h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.25;
  margin: 2.4em 0 0.6em;
}

h2 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }

/* A short lead-in line ending in a colon hugs the list it introduces, and the
   pair gets a touch more air above it. Progressive enhancement: browsers
   without :has() simply keep the default paragraph spacing. */
:is(p, ul, ol) + p:has(+ :is(ul, ol)) { margin-top: 1.4em; }
p:has(+ :is(ul, ol)) { margin-bottom: 0.55em; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.15em;
}

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

/* Lists share the body's 1.8 leading, with air between items and a
   comfortable indent; a little extra space follows each list. */
ul, ol { margin: 0 0 1.45em; padding-left: 1.6rem; }
li { margin-bottom: 0.45em; }

/* Nested lists sit slightly tighter than their parents. */
li > ul, li > ol { margin-top: 0.4em; margin-bottom: 0.2em; }
li li { margin-bottom: 0.3em; }

/* Ordered-list numbers read as quiet labels, not shouted digits. */
ol > li::marker { color: var(--muted); font-weight: 600; }

strong { font-weight: 650; }

blockquote {
  margin: 1.75em 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-family: var(--font-serif);
  font-style: italic;
}

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

/* ---- 8. Figures & diagrams ---------------------------------------------- */
figure {
  margin: 2.25rem 0;
  text-align: center;
}

figure img {
  display: block;
  margin-inline: auto;
  background: var(--diagram-paper);  /* light backing in dark mode */
  border-radius: 8px;
}

@media (prefers-color-scheme: dark) {
  figure img { padding: 0.75rem; }
}

figcaption {
  max-width: 40rem;
  margin: 0.75rem auto 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}

/* ---- 9. Tables & inline code (used sparingly) ---------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75em 0;
  font-size: 0.95rem;
}

th {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: left;
}

th, td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

/* A table wider than a phone scrolls inside its own box, never the page. */
.table-scroll {
  overflow-x: auto;
  margin: 1.75em 0;
}

.table-scroll > table { margin: 0; }

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--accent-wash);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* ---- 10. Callouts ---------------------------------------------------------
   The label inside each callout is an <h3>, styled as a small-caps kicker. */
aside.why-it-matters,
aside.tech-bit {
  margin: 2.25rem 0;
  padding: 1.1rem 1.4rem;
  border-radius: 0 8px 8px 0;
}

aside.why-it-matters {
  border-left: 4px solid var(--accent);
  background: var(--accent-wash);
}

aside.tech-bit {
  border-left: 4px solid var(--accent-2);
  background: var(--accent-2-wash);
}

aside.why-it-matters h3,
aside.tech-bit h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

aside.why-it-matters h3 { color: var(--accent); }
aside.tech-bit h3       { color: var(--accent-2); }

/* Lists inside callouts read exactly like body lists, on the callout's
   slightly tighter measure. */
aside.why-it-matters ul, aside.why-it-matters ol,
aside.tech-bit ul, aside.tech-bit ol { padding-left: 1.35rem; }

aside.why-it-matters > :last-child,
aside.tech-bit > :last-child { margin-bottom: 0; }

/* ---- 10a. Inline status markers -------------------------------------------
   For pages that mix built behaviour with proposals. Each list item ends with
   its status in the text: <span class="status status-built">(built)</span>.
   The words carry the meaning; the colour only helps a reader scan. Never
   transform the text — the marker must read exactly as it is written. */
.status {
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.status-built    { color: var(--accent); }
.status-proposed { color: var(--accent-2); }
.status-open     { color: var(--accent-2); }
.status-person   { color: var(--muted); }

/* ---- 11. "Where to next" nav block ---------------------------------------
   Shape: nav.where-next > h2 (or h3) + ul > li > a — teaser text.
   The link carries the accent; teaser text after it reads muted. */
nav.where-next {
  margin: 3.5rem 0 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}

nav.where-next h2,
nav.where-next h3 {
  margin: 0 0 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

nav.where-next ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav.where-next li {
  margin: 0;
  padding: 0.6rem 0;
  color: var(--muted);           /* teaser text after the link */
}

nav.where-next li + li { border-top: 1px solid var(--line); }

nav.where-next a { font-weight: 600; text-decoration: none; }
nav.where-next a:hover { text-decoration: underline; }

/* ---- 12. Prev/next pager --------------------------------------------------
   Shape: nav.pager > a[rel=prev] and/or a[rel=next], each holding
   <span class="pager-kicker"> + <span class="pager-title">.
   Last element inside <main>, after "Where to next", before the footer. */
nav.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem 0 1rem;
}

nav.pager a {
  flex: 1 1 0;
  max-width: 48%;
  display: block;
  padding: 0.7rem 1rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
}

nav.pager a:hover { border-color: var(--accent); }

nav.pager a[rel="prev"] { margin-right: auto; text-align: left; }
nav.pager a[rel="next"] { margin-left: auto; text-align: right; }

.pager-kicker {
  display: block;
  margin-bottom: 0.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.pager-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
}

nav.pager a:hover .pager-title { text-decoration: underline; }

/* ---- 13. Footer ---------------------------------------------------------- */
footer {
  border-top: 1px solid var(--line);
  margin-top: 2rem;
  padding: 1.5rem 1.25rem 3rem;
  font-size: 0.85rem;
  color: var(--muted);
}

footer > * { max-width: 46rem; margin: 0 auto; }
footer p { margin: 0; }

/* ---- 14. Small screens --------------------------------------------------- */
@media (max-width: 640px) {
  h1 { font-size: 2rem; }
  p.standfirst { font-size: 1.1rem; }
  h2 { font-size: 1.45rem; }
  main { padding-top: 1.75rem; }
  .wide { width: 100%; margin-left: 0; transform: none; }

  nav.pager { flex-direction: column; }
  nav.pager a { max-width: none; width: 100%; }
  nav.pager a[rel="prev"] { margin-right: 0; }
  nav.pager a[rel="next"] { margin-left: 0; }
}

/* ---- 12. Blueprints ----------------------------------------------------
   Code-level diagrams, one per epic. The rest of this site explains the
   platform to someone who operates it; a Blueprint explains it to someone who
   is about to change it, so it names files and line numbers and shows the real
   control flow rather than a tidied version of it.

   Diagrams use the same <figure>/<img> pattern and the same SVG house style as
   the rest of the site — teal for the path that continues, amber for the one
   that stops, Georgia for titles. A Blueprint differs in what it shows, not in
   how it looks.
   -------------------------------------------------------------------------- */

/* Provenance. A Blueprint that cannot be traced back to code is decoration,
   so every one carries the commit it was read at and the files it came from. */
.bp-source {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted);
  border-left: 2px solid var(--line);
  padding: 0.15rem 0 0.15rem 0.85rem;
  margin: 1.2rem 0;
}
.bp-source strong { color: var(--ink); font-weight: 600; }
/* File paths have no spaces; without this they push a phone-width page sideways. */
.bp-source code { overflow-wrap: anywhere; }

/* The index: one card per epic, with drawn ones legible and undrawn ones
   visibly not pretending. */
.bp-grid { display: grid; gap: 0.9rem; margin: 1.6rem 0; }
@media (min-width: 46rem) { .bp-grid { grid-template-columns: 1fr 1fr; } }

.bp-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1rem 1.15rem;
}
.bp-card h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.bp-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.bp-card.pending { opacity: 0.72; }
.bp-card .bp-state {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.bp-card.drawn .bp-state { color: var(--accent); }

/* ---- 13. Diagram lightbox ----------------------------------------------
   Clicking a diagram opens it over a dimmed page. The behaviour lives in
   assets/lightbox.js — the site's only script, and the reason it exists is
   Escape: a lightbox you cannot dismiss with the key everyone reaches for is
   not a lightbox, and no amount of CSS provides a key handler.

   An earlier version of this did it with a hidden checkbox to avoid adding a
   script at all. It technically worked and felt wrong — no dimming, no Escape,
   and a close button that was really a toggle. Protecting the convention cost
   more than the convention was worth.
   -------------------------------------------------------------------------- */

a.zoom { display: block; cursor: zoom-in; }
/* The cursor has to be set on the image too: it is the thing actually under the
   pointer, and an <img> does not inherit the anchor's cursor in every engine. */
a.zoom img { display: block; cursor: zoom-in; }
a.zoom:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

dialog.lightbox {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: auto;
  /* Room for the close button to sit clear of the diagram. */
  padding: 3.5rem 1rem 2rem;
  cursor: zoom-out;
}
/* Clicking the diagram itself closes too. A lightbox where the middle of the
   screen is inert teaches you to aim for the edges, which is a worse thing to
   learn than a stray close. */
dialog.lightbox img { cursor: zoom-out; }
dialog.lightbox::backdrop {
  /* Dimmed, not blacked out: the page underneath stays legible enough that
     you can see where you came from. */
  background: rgba(12, 18, 28, 0.82);
}

dialog.lightbox img {
  display: block;
  margin: 0 auto;
  /* Wider than the column it came from — the whole point. On a narrow screen
     it overflows on purpose and the dialog scrolls, which beats shrinking an
     1100px diagram to phone width and calling it readable. */
  width: min(1400px, 190vw);
  max-width: none;
  height: auto;
  /* NOT var(--paper): in dark mode that is near-black, and these diagrams draw
     their text in dark ink on washes that assume light paper. The boxes with a
     solid white fill stayed readable and the washed ones vanished — dark text
     on a dark page. The site already solves this for inline figures with
     --diagram-paper; the lightbox needs the solid form because its backdrop is
     dark in both themes. */
  background: var(--diagram-paper-solid);
  padding: 0.75rem;
  border-radius: 6px;
}

dialog.lightbox .lightbox-close {
  position: fixed;
  top: 0.9rem;
  right: 1rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  cursor: pointer;
}
dialog.lightbox .lightbox-close:hover { color: var(--accent-hover); }
dialog.lightbox .lightbox-close:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Say the behaviour exists — a cursor change is not discoverable on touch. */
figure > a.zoom + figcaption::after,
figure > a.zoom ~ figcaption::after {
  content: " Click the diagram to enlarge it.";
  color: var(--muted);
}
@media (hover: none) {
  figure > a.zoom ~ figcaption::after { content: " Tap the diagram to enlarge it."; }
}

@media print {
  dialog.lightbox { display: none !important; }
  figure > a.zoom ~ figcaption::after { content: ""; }
}

/* ---- 14. Blueprint summaries -------------------------------------------
   Blueprint pages are written in Simplified Technical English and numbered.
   One idea per sentence, active voice, present tense, and the same word for
   the same thing every time. The reader is looking for a specific fact under
   time pressure, not reading the page from the top.
   -------------------------------------------------------------------------- */

.tldr {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-wash);
  padding: 1.15rem 1.4rem 1.15rem 1.2rem;
  margin: 1.6rem 0 2rem;
}
.tldr h2 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}
.tldr ol { margin-bottom: 0; }
.tldr li { margin-bottom: 0.35em; }

/* A fact that contradicts what the reader probably assumes. Used sparingly —
   if everything is flagged, nothing is. */
.bp-note {
  border-left: 3px solid var(--accent-2);
  background: var(--accent-2-wash);
  border-radius: 0 6px 6px 0;
  padding: 0.9rem 1.15rem;
  margin: 1.4rem 0;
}
.bp-note p { margin: 0; }
.bp-note strong { color: var(--accent-2); }