/* Article Anatomy — presentation only. Behaviour lives in js/app.js, content in standards/.

   Two states of one board:
     .is-assembled  the article as a reader sees it: one continuous sheet, no call-outs
     .is-exploded   the article taken apart: each field a separate, colour-coded layer, with a
                    leader line out to its call-out
   js/app.js animates between them (FLIP), so every rule here describes a resting state. */

/* ------------------------------------------------------------------ tokens */

:root {
  --ground: #EEF1ED;
  --sheet: #FFFFFF;
  --sheet-2: #F6F8F5;
  --ink: #18201C;
  --ink-2: #45514B;
  --ink-3: #626D67;
  --line: #D5DBD5;
  --line-2: #B7C0B9;

  --accent: #2742B8;
  --accent-2: #1D338F;
  --accent-soft: #E7EBFA;
  --on-accent: #FFFFFF;
  --req: #B3261E;
  --good: #1E6B3A;
  --bad: #9E2A1F;

  /* One hue per field, always paired with its number, never colour alone. */
  --h-title: #C2412B;
  --h-opening: #0B7F74;
  --h-environment: #3E7A1F;
  --h-cause: #7B3DA6;
  --h-fix: #A65207;
  --h-additional: #2F55D4;
  --h-internal: #8A6800;
  --h-properties: #56625C;
  --h-before: #A8316B;
  --h-limits: #11709C;
  --h-help: #A1222D;
  --on-hue: #FFFFFF;

  --shadow-plate: 0 1px 0 rgba(24, 32, 28, 0.05), 0 12px 26px -14px rgba(24, 32, 28, 0.32);
  --shadow-lift: 0 2px 0 rgba(24, 32, 28, 0.04), 0 28px 44px -18px rgba(24, 32, 28, 0.42);
  --shadow-panel: 0 30px 80px -20px rgba(10, 16, 13, 0.45);

  --font-display: "Bricolage Grotesque", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --r: 10px;
  --gutter: clamp(16px, 4vw, 40px);
  --col-gap: 3.5rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0F1311;
    --sheet: #171D1A;
    --sheet-2: #1D2421;
    --ink: #E4EAE6;
    --ink-2: #B2BDB7;
    --ink-3: #909C96;
    --line: #29312D;
    --line-2: #3A443F;
    --accent: #97A9FF;
    --accent-2: #BAC6FF;
    --accent-soft: #1F2747;
    --on-accent: #0D1330;
    --req: #FF8F85;
    --good: #7FD39A;
    --bad: #FF9A8C;
    --h-title: #F2826B;
    --h-opening: #3FC7B6;
    --h-environment: #8CC96A;
    --h-cause: #C99AF2;
    --h-fix: #F0A457;
    --h-additional: #97ACFF;
    --h-internal: #E3C45A;
    --h-properties: #A8B4AE;
    --h-before: #F08BB8;
    --h-limits: #6CC3EA;
    --h-help: #FF8A93;
    --on-hue: #0E1210;
    --shadow-plate: 0 1px 0 rgba(0, 0, 0, 0.3), 0 14px 28px -14px rgba(0, 0, 0, 0.7);
    --shadow-lift: 0 2px 0 rgba(0, 0, 0, 0.3), 0 30px 48px -16px rgba(0, 0, 0, 0.8);
    --shadow-panel: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground: #0F1311;
  --sheet: #171D1A;
  --sheet-2: #1D2421;
  --ink: #E4EAE6;
  --ink-2: #B2BDB7;
  --ink-3: #909C96;
  --line: #29312D;
  --line-2: #3A443F;
  --accent: #97A9FF;
  --accent-2: #BAC6FF;
  --accent-soft: #1F2747;
  --on-accent: #0D1330;
  --req: #FF8F85;
  --good: #7FD39A;
  --bad: #FF9A8C;
  --h-title: #F2826B;
  --h-opening: #3FC7B6;
  --h-environment: #8CC96A;
  --h-cause: #C99AF2;
  --h-fix: #F0A457;
  --h-additional: #97ACFF;
  --h-internal: #E3C45A;
  --h-properties: #A8B4AE;
  --h-before: #F08BB8;
  --h-limits: #6CC3EA;
  --h-help: #FF8A93;
  --on-hue: #0E1210;
  --shadow-plate: 0 1px 0 rgba(0, 0, 0, 0.3), 0 14px 28px -14px rgba(0, 0, 0, 0.7);
  --shadow-lift: 0 2px 0 rgba(0, 0, 0, 0.3), 0 30px 48px -16px rgba(0, 0, 0, 0.8);
  --shadow-panel: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

/* Field hues, by data attribute, so scripts never write styles. */
[data-hue="title"] { --hue: var(--h-title); }
[data-hue="opening"] { --hue: var(--h-opening); }
[data-hue="environment"] { --hue: var(--h-environment); }
[data-hue="cause"] { --hue: var(--h-cause); }
[data-hue="fix"] { --hue: var(--h-fix); }
[data-hue="additional"] { --hue: var(--h-additional); }
[data-hue="internal"] { --hue: var(--h-internal); }
[data-hue="properties"] { --hue: var(--h-properties); }
[data-hue="before"] { --hue: var(--h-before); }
[data-hue="limits"] { --hue: var(--h-limits); }
[data-hue="help"] { --hue: var(--h-help); }
[data-hue="topic"] { --hue: var(--accent); }

/* ------------------------------------------------------------------ base */

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1rem/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }
p { margin: 0; }
code { font-family: var(--font-mono); font-size: 0.86em; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.app {
  max-width: 76rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: 0 6rem;
}

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

/* Full width, so its background covers the window; the content keeps the page's column.
   Condensed once the page scrolls (.is-stuck, set by js/app.js): a smaller mark and wordmark,
   no tagline, a frosted ground and a hairline underneath. */

.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--ground);
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.topbar-inner {
  max-width: 76rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: clamp(1.25rem, 3vw, 2.5rem) 1rem;
  transition: padding 0.25s ease;
}

.topbar.is-stuck {
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -18px rgba(10, 16, 13, 0.35);
}
.topbar.is-stuck .topbar-inner { padding-block: 0.6rem; }
.topbar.is-stuck .masthead { align-items: center; }
.topbar.is-stuck .tagline,
.topbar.is-stuck .standard-picker label { display: none; }
.topbar.is-stuck h1 { font-size: 1.45rem; }
.topbar.is-stuck .brand-rule { margin-top: 0.35rem; height: 3px; }
.topbar.is-stuck .brand-mark { width: 50px; height: 41px; }
.topbar.is-stuck .toolbar { margin-top: 0.6rem; }
.topbar.is-stuck .seg button { min-height: 36px; padding-block: 0.55rem; }

h1, .brand-mark { transition: font-size 0.25s ease, width 0.25s ease, height 0.25s ease; }

/* On a phone the stuck bar keeps only what you'd reach for: the mark, the picker, the tabs.
   The view toggle goes too, because the logomark itself toggles the view. */
@media (max-width: 40rem) {
  .topbar.is-stuck .brand-text,
  .topbar.is-stuck .seg-view { display: none; }
  .topbar.is-stuck .masthead { flex-wrap: nowrap; }
  .topbar.is-stuck .standard-picker { flex: 1; min-width: 0; }
  .topbar.is-stuck .standard-picker select { width: 100%; }
}

/* ------------------------------------------------------------------ the dock */

/* "Rules for every article" within reach from anywhere: a pill at the bottom that opens a panel of the
   topic cards. It steps aside (.is-away) while the section itself is on screen. */
.dock {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 25;
  width: min(58rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  transform: translateX(-50%);
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.25s ease;
}
.dock.is-away { transform: translate(-50%, calc(100% + 2rem)); opacity: 0; }
.dock > * { pointer-events: auto; }
.dock.is-away > * { pointer-events: none; }

.dock-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: 700 0.95rem/1 var(--font-body);
  color: var(--sheet);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 0.8rem 1.1rem 0.8rem 1rem;
  min-height: 46px;
  box-shadow: 0 14px 30px -12px rgba(10, 16, 13, 0.55), 0 0 0 1px color-mix(in srgb, var(--ink) 80%, transparent);
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.dock-toggle:hover { transform: translateY(-2px); }
.dock-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.dock-count {
  font: 600 0.72rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sheet) 16%, transparent);
}
.dock-chev { transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1); }
.dock.is-open .dock-chev { transform: rotate(180deg); }

.dock-panel {
  width: 100%;
  max-height: min(62vh, 34rem);
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  transform-origin: 50% 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.3, 0.7, 0.2, 1), visibility 0s linear 0.3s;
}
.dock.is-open .dock-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.22s ease, transform 0.35s cubic-bezier(0.3, 1.25, 0.4, 1), visibility 0s;
}

.dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0.9rem 0.8rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.dock-head h2 { font-size: 1.12rem; font-weight: 720; letter-spacing: -0.01em; }
.dock-close {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--sheet);
  color: var(--ink);
  cursor: pointer;
}
.dock-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.dock-close:hover { border-color: var(--ink); }

.dock-topics {
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.2rem 1.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
}
.dock-topics .topic { padding: 0.85rem 0.95rem 0.9rem; }
.dock-topics .topic:hover { transform: none; }

.dock-toggle .icon,
.dock-toggle .dock-chev { stroke: currentColor; }

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

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

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

/* ---- the logomark: the tool in miniature ----------------------------------------------
   Three slabs drawn in isometric, like layers in a technical drawing. The .brand element's
   data-state (set by js/app.js in step with the board) picks the resting state:
     assembled  slabs stacked flush into one neutral block, leaders retracted
     exploded   slabs separated, each in its field colour, leader lines out to their dots
   Each state carries its own transition timing, so opening is springy and staggered top to
   bottom, and closing is quick and clean, leaders first. */

.brand-mark-btn {
  flex: none;
  line-height: 0;
  padding: 4px;
  margin: -4px;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: pointer;
}

.brand-mark { width: 76px; height: 62px; overflow: visible; }

.slab .face-top,
.slab .face-front,
.slab .face-side { stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }

.slab .face-top { fill: var(--sheet); }
.slab .face-front { fill: var(--ink-3); }
.slab .face-side { fill: var(--ink-2); }

.slab .leader-line {
  stroke: var(--hue);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.slab .leader-dot {
  fill: var(--hue);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}

/* Assembled: one block. Slabs sit 3 units apart, the thickness of a slab, so only the edges of
   the lower two show. Closing: leaders retract, colour drains, then the slabs close up. */
.brand[data-state="assembled"] .slab-1 { transform: translate(4px, 17px); }
.brand[data-state="assembled"] .slab-2 { transform: translate(4px, 20px); }
.brand[data-state="assembled"] .slab-3 { transform: translate(4px, 23px); }

.brand[data-state="assembled"] .slab {
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.2, 1) 0.18s;
}
.brand[data-state="assembled"] .slab :is(.face-top, .face-front, .face-side) {
  transition: fill 0.3s ease 0.12s;
}
.brand[data-state="assembled"] .slab .leader-line { transition: stroke-dashoffset 0.18s ease-in; }
.brand[data-state="assembled"] .slab .leader-dot { transition: transform 0.14s ease-in; }

/* Exploded: slabs lift apart top to bottom with a small overshoot, take their colours, then the
   leader lines draw out and the dots land. */
.brand[data-state="exploded"] .slab-1 { transform: translate(4px, 3px); }
.brand[data-state="exploded"] .slab-2 { transform: translate(4px, 20px); }
.brand[data-state="exploded"] .slab-3 { transform: translate(4px, 37px); }

.brand[data-state="exploded"] .slab {
  transition: transform 0.75s cubic-bezier(0.34, 1.5, 0.5, 1);
}
.brand[data-state="exploded"] .slab-2 { transition-delay: 0.08s; }
.brand[data-state="exploded"] .slab-3 { transition-delay: 0.16s; }

.brand[data-state="exploded"] .slab .face-top { fill: var(--hue); }
.brand[data-state="exploded"] .slab .face-front { fill: color-mix(in srgb, var(--hue) 68%, var(--ink)); }
.brand[data-state="exploded"] .slab .face-side { fill: color-mix(in srgb, var(--hue) 50%, var(--ink)); }
.brand[data-state="exploded"] .slab :is(.face-top, .face-front, .face-side) {
  transition: fill 0.4s ease 0.15s;
}

.brand[data-state="exploded"] .slab .leader-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.42s cubic-bezier(0.3, 0.7, 0.2, 1) 0.42s;
}
.brand[data-state="exploded"] .slab-2 .leader-line { transition-delay: 0.5s; }
.brand[data-state="exploded"] .slab-3 .leader-line { transition-delay: 0.58s; }

.brand[data-state="exploded"] .slab .leader-dot {
  transform: scale(1);
  transition: transform 0.32s cubic-bezier(0.3, 1.8, 0.5, 1) 0.78s;
}
.brand[data-state="exploded"] .slab-2 .leader-dot { transition-delay: 0.86s; }
.brand[data-state="exploded"] .slab-3 .leader-dot { transition-delay: 0.94s; }

/* Hover: exploded fans out a little further; assembled lifts the top slab to peek inside. */
.brand[data-state] .brand-mark-btn:hover .slab { transition-delay: 0s; transition-duration: 0.35s; }
.brand[data-state="exploded"] .brand-mark-btn:hover .slab-1 { transform: translate(4px, 0); }
.brand[data-state="exploded"] .brand-mark-btn:hover .slab-3 { transform: translate(4px, 40px); }
.brand[data-state="assembled"] .brand-mark-btn:hover .slab-1 { transform: translate(4px, 11px) rotate(-3deg); }
.brand-mark-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* The rule under the wordmark echoes the mark: one grey line assembled, three coloured
   segments exploded. */
.brand-rule {
  display: flex;
  height: 4px;
  margin-top: 0.55rem;
  gap: 0;
}
.brand-rule i {
  flex: 1;
  background: var(--line-2);
  border-radius: 0;
}
.brand-rule i:first-child { border-radius: 2px 0 0 2px; }
.brand-rule i:last-child { border-radius: 0 2px 2px 0; }

.brand[data-state="assembled"] .brand-rule { transition: gap 0.4s cubic-bezier(0.55, 0, 0.2, 1) 0.18s; }
.brand[data-state="assembled"] .brand-rule i { transition: background-color 0.3s ease 0.12s, border-radius 0.3s ease 0.18s; }

.brand[data-state="exploded"] .brand-rule {
  gap: 7px;
  transition: gap 0.7s cubic-bezier(0.34, 1.5, 0.5, 1) 0.1s;
}
.brand[data-state="exploded"] .brand-rule i {
  background: var(--hue);
  border-radius: 2px;
  transition: background-color 0.4s ease 0.3s, border-radius 0.3s ease 0.1s;
}
.brand[data-state="exploded"] .brand-rule i:nth-child(2) { transition-delay: 0.38s, 0.1s; }
.brand[data-state="exploded"] .brand-rule i:nth-child(3) { transition-delay: 0.46s, 0.1s; }

h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
  font-weight: 760;
  letter-spacing: -0.025em;
  line-height: 1;
}

.tagline { color: var(--ink-2); margin-top: 0.5rem; }

.standard-picker { display: grid; gap: 0.3rem; }
.standard-picker label,
.eyebrow {
  font: 600 0.72rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

select {
  font: inherit;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 0.55rem 2.2rem 0.55rem 0.8rem;
  min-height: 44px;
  max-width: 100%;
}

.blurb {
  margin-top: 0.75rem;
  max-width: 66ch;
  font-size: 1.06rem;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------ toolbar */

.toolbar {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.seg button {
  font: 600 0.95rem/1 var(--font-body);
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1.05rem;
  min-height: 40px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.seg button:hover { color: var(--ink); background: var(--sheet-2); }
.seg button[aria-checked="true"],
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }

.seg-view button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* Example picker: step through a template's example articles. It takes a row of its own under
   the tabs, so a long article title has room; the ::before is the line break before it, there
   only while the picker shows. */
.seg-view { order: 1; }
.toolbar:has(.examples-bar:not([hidden]))::before {
  content: "";
  order: 2;
  flex-basis: 100%;
  height: 0;
  margin-top: -0.35rem;
}
.examples-bar {
  order: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 1 40rem;
  min-width: 0;
  padding: 4px 4px 4px 0.9rem;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.examples-bar[hidden] { display: none; }
.examples-bar select {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  border: 0;
  background: transparent;
  font-weight: 700;
  padding: 0.4rem 1.8rem 0.4rem 0.4rem;
  text-overflow: ellipsis;
}
.ex-step {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--sheet-2);
  color: var(--ink);
  cursor: pointer;
}
.ex-step:hover { background: var(--ink); color: var(--sheet); }
.ex-step .icon { width: 18px; height: 18px; }
.examples-label,
.examples-count {
  flex: none;
  padding-right: 0.7rem;
  font: 600 0.72rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.examples-label { padding-right: 0.3rem; }

/* On a phone the picker takes the full row and drops its label, so the title has the room;
   tabs that wrap to several lines get a card's corners rather than a stretched pill. */
@media (max-width: 40rem) {
  .examples-bar { flex-basis: 100%; padding-left: 4px; }
  .examples-label { display: none; }
  .examples-count { padding-right: 0.45rem; }
  #templates { border-radius: 22px; }
}

.template-use {
  margin-top: 0.6rem;
  color: var(--ink-2);
  min-height: 1.55em;
}
.template-use .share { color: var(--ink-3); }

/* ------------------------------------------------------------------ the board */

.anatomy { margin-top: 1.5rem; }

/* Assembled, the article runs the full width. Exploded, the fields keep the larger share and
   the call-outs take the rest. */
.board {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: var(--col-gap);
  row-gap: 1.1rem;
  align-items: start;
  perspective: 1800px;
  perspective-origin: 30% 20%;
}

.board.is-assembled {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}

/* A plate is one field of the article editor. Its content sits in .plate-inner, so the
   animation can resize the box while counter-scaling the text (see js/app.js). */
.plate {
  grid-column: 1;
  position: relative;
  overflow: hidden;
  background: var(--sheet);
  border: 1.5px solid color-mix(in srgb, var(--hue, var(--line-2)) 72%, var(--line));
  border-radius: var(--r);
  box-shadow: var(--shadow-plate);
  transform-origin: 0 0;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, border-radius 0.35s ease;
}
.plate-inner { padding: 0.85rem 1.1rem 1rem; transform-origin: 0 0; }
.plate:has(.plate-open:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }

.board.is-exploded .plate:not(.chrome):hover {
  border-color: var(--hue);
  box-shadow: var(--shadow-lift);
}

.board.is-assembled .plate {
  border-color: var(--line);
  border-radius: 0;
  border-top-width: 0;
  box-shadow: none;
}
.board.is-assembled .plate.is-first { border-top-width: 1.5px; border-radius: var(--r) var(--r) 0 0; }
.board.is-assembled .plate.is-last { border-radius: 0 0 var(--r) var(--r); }

.plate-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  font: 600 0.72rem/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.marker {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--hue);
  color: var(--on-hue);
  border: 1.5px solid var(--hue);
  font: 600 0.74rem/1 var(--font-mono);
  letter-spacing: 0;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.board.is-assembled .plate .marker {
  background: transparent;
  color: var(--ink-3);
  border-color: var(--line-2);
}

.req-star { color: var(--req); font-weight: 700; }
.req-soft { color: var(--ink-3); text-transform: none; letter-spacing: 0; font-weight: 500; }

.plate-body { color: var(--ink); font-size: 0.98rem; }

/* ---- article content blocks -----------------------------------------------------------
   The typography the standard asks articles to use, applied to every sample: on the board's
   plates and in the full view's "What it looks like". Space above a heading is bigger than
   space below it, so a heading belongs to what follows. A lead-in line sits close to its list.
   Notes are labelled, never colour alone. */
:is(.plate-body, .specimen) > * { margin: 0; }
:is(.plate-body, .specimen) > * + * { margin-top: 0.6rem; }
:is(.plate-body, .specimen) > * + .blk-h { margin-top: 1.15rem; }
:is(.plate-body, .specimen) > .blk-h + * { margin-top: 0.35rem; }
:is(.plate-body, .specimen) > p + :is(ul, ol) { margin-top: 0.3rem; }

:is(.plate-body, .specimen) :is(ul, ol) { padding-left: 1.35rem; }
:is(.plate-body, .specimen) li { padding-left: 0.15rem; }
:is(.plate-body, .specimen) li + li { margin-top: 0.35rem; }
:is(.plate-body, .specimen) ol > li::marker { font-weight: 700; color: var(--ink-2); }
:is(.plate-body, .specimen) ul > li::marker { color: var(--ink-3); }

.blk-h {
  font: 700 0.98rem/1.3 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--ink);
}

.blk-hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: 1.15rem !important;
}
:is(.plate-body, .specimen) > .blk-hr + .blk-h { margin-top: 0; }

.blk-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.blk-table table { width: 100%; border-collapse: collapse; font-size: 0.93em; }
.blk-table th {
  text-align: left;
  font: 600 0.68rem/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--sheet-2);
  padding: 0.5rem 0.7rem;
}
.blk-table td { padding: 0.5rem 0.7rem; border-top: 1px solid var(--line); vertical-align: top; }
.blk-table td:first-child { font-weight: 700; }

.blk-note {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sheet-2);
  font-size: 0.95em;
}
.blk-label {
  display: inline-block;
  margin-right: 0.5rem;
  font: 600 0.68rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.blk-note.is-verify { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); background: color-mix(in srgb, var(--good) 7%, var(--sheet)); }
.blk-note.is-verify .blk-label { color: var(--good); }
.blk-note.is-verify .blk-label::before { content: "✓ "; }
.blk-note.is-important { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--accent-soft); }
.blk-note.is-important .blk-label { color: var(--accent); }
.blk-note.is-warning { border-color: color-mix(in srgb, var(--req) 45%, var(--line)); background: color-mix(in srgb, var(--req) 7%, var(--sheet)); }
.blk-note.is-warning .blk-label { color: var(--req); }
.blk-note.is-warning .blk-label::before { content: "! "; }
.plate[data-field="title"] .plate-body {
  font: 700 1.28rem/1.25 var(--font-display);
  letter-spacing: -0.01em;
}
.plate[data-field="internal"] { background: color-mix(in srgb, var(--h-internal) 7%, var(--sheet)); }

/* The whole plate opens its guidance. */
.plate-open {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: inherit;
  cursor: pointer;
}
.plate-open:focus-visible { outline: none; }

/* Properties plate: three small fields side by side. */
.props { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.prop {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0.45rem 0.6rem;
  background: var(--sheet-2);
}
.prop-label { display: block; font: 600 0.68rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.prop-value { display: block; font-weight: 700; overflow-wrap: anywhere; }

/* The editor chrome at the top of the sheet. */
.plate.chrome { --hue: var(--line-2); background: var(--sheet-2); }
.plate.chrome .plate-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.7rem 1.1rem;
}
.chrome-title { font: 700 1rem/1.2 var(--font-display); }
.chrome-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chrome-actions span {
  font: 600 0.72rem/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  background: var(--sheet);
}

/* ------------------------------------------------------------------ call-outs */

.callout {
  grid-column: 2;
  position: relative;
  padding-top: 0.3rem;
  max-width: 34rem;
}
.board.is-assembled .callout { display: none; }

/* The leader line: from the plate's edge across the gap to the call-out, like a drawing. */
.leader {
  position: absolute;
  top: 1.1rem;
  left: calc(-1 * var(--col-gap));
  width: calc(var(--col-gap) - 0.75rem);
  height: 0;
  border-top: 1.5px solid var(--hue);
  transform-origin: 0 50%;
}
.leader::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4.75px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hue);
}

.callout-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.callout h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }

.req-chip {
  font: 600 0.7rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.45rem;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.req-chip.is-required { border-color: color-mix(in srgb, var(--req) 55%, var(--line)); color: var(--req); }

.callout ul { margin: 0.5rem 0 0.55rem; padding-left: 1.15rem; color: var(--ink-2); }
.callout li + li { margin-top: 0.2rem; }
.callout li::marker { color: var(--hue); }

.callout.intro { --hue: var(--line-2); }
.callout.intro p { color: var(--ink-2); max-width: 44ch; }
.callout.intro .eyebrow { display: block; margin-bottom: 0.35rem; }

/* "Full guidance": a real button, with the expand icon, because it opens the field larger. */
.more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
  font: 700 0.92rem/1 var(--font-body);
  color: var(--accent);
  background: var(--sheet);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  min-height: 42px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.more:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.more:active { transform: translateY(1px); }

.icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.more:hover .icon { transform: scale(1.12); }

/* ------------------------------------------------------------------ every article */

.every { margin-top: clamp(3rem, 6vw, 4.5rem); }
.every h2 { font-size: 1.55rem; font-weight: 720; letter-spacing: -0.015em; }
.every-sub { margin-top: 0.35rem; color: var(--ink-2); max-width: 60ch; }

.topics {
  margin-top: 1.1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.9rem;
}

.topic {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.1rem 1.05rem;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.topic:hover { border-color: var(--accent); box-shadow: var(--shadow-plate); transform: translateY(-2px); }
.topic h3 { font-size: 1.08rem; font-weight: 700; }
.topic p { color: var(--ink-2); font-size: 0.95rem; }
.topic .count { font: 600 0.72rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-top: 0.2rem; }

.colophon {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-3);
  max-width: 80ch;
}

/* ------------------------------------------------------------------ the full view */

dialog.detail {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  width: min(47rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  overflow: visible;
}
dialog.detail::backdrop { background: rgba(9, 13, 11, 0.58); }
dialog.detail[open]::backdrop { animation: backdrop-in 0.3s ease; }
@keyframes backdrop-in { from { background: rgba(9, 13, 11, 0); } }

.detail-panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2rem);
  background: var(--sheet);
  border-radius: 14px;
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  transform-origin: 0 0;
}

.detail-head {
  position: relative;
  padding: 1.25rem 3.75rem 1.1rem 1.5rem;
  background: color-mix(in srgb, var(--hue, var(--accent)) 11%, var(--sheet));
  border-bottom: 1px solid color-mix(in srgb, var(--hue, var(--accent)) 30%, var(--line));
}
.detail-kicker { display: flex; align-items: center; gap: 0.55rem; font: 600 0.72rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.detail-head h2 { margin-top: 0.5rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 760; letter-spacing: -0.02em; line-height: 1.1; }
.detail-meta { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; color: var(--ink-2); font-size: 0.92rem; }

.detail-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--sheet);
  color: var(--ink);
  cursor: pointer;
}
.detail-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.detail-close:hover { border-color: var(--ink); }

.detail-scroll {
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1.25rem 1.5rem 1.75rem;
  display: grid;
  gap: 1.6rem;
}

.detail-intro { font-size: 1.08rem; max-width: 62ch; }
.template-note {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sheet-2);
  color: var(--ink-2);
}
.template-note b { color: var(--ink); }

.section-label {
  display: block;
  font: 600 0.72rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.7rem;
}

.specimen {
  border: 1.5px solid color-mix(in srgb, var(--hue) 72%, var(--line));
  border-radius: var(--r);
  padding: 0.85rem 1rem;
  background: var(--sheet);
}
.specimen.is-title { font: 700 1.25rem/1.25 var(--font-display); }
.specimen-note { margin-top: 0.45rem; font-size: 0.85rem; color: var(--ink-3); }

/* Real search phrases, shown as typed: lower case, in the utility face, like a search box. */
.searches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.searches li {
  font: 500 0.86rem/1.3 var(--font-mono);
  padding: 0.4rem 0.65rem 0.4rem 1.85rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--sheet-2);
  position: relative;
  overflow-wrap: anywhere;
}
.searches li::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
  transform: translateY(-65%);
}
.searches li::after {
  content: "";
  position: absolute;
  left: 1.18rem;
  top: 50%;
  width: 0.3rem;
  height: 1.5px;
  background: var(--ink-3);
  transform: translateY(0.2rem) rotate(45deg);
}

.rules { list-style: none; margin: 0; padding: 0; }
.rules li { padding: 0.7rem 0; border-top: 1px solid var(--line); }
.rules li:last-child { border-bottom: 1px solid var(--line); }
.rules strong { display: block; font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; margin-bottom: 0.15rem; }
.rules span { color: var(--ink-2); }

ol.numbered { margin: 0; padding: 0; list-style: none; counter-reset: n; }
ol.numbered li { counter-increment: n; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.6rem; padding: 0.65rem 0; border-top: 1px solid var(--line); }
ol.numbered li:last-child { border-bottom: 1px solid var(--line); }
ol.numbered li::before {
  content: counter(n);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--hue, var(--accent));
  color: var(--ink);
  font: 600 0.78rem/1 var(--font-mono);
}
ol.numbered strong { display: block; font-weight: 700; }
ol.numbered span { color: var(--ink-2); }

.pattern {
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--sheet-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
  font: 500 0.86rem/1.6 var(--font-mono);
  white-space: pre;
}

.examples { display: grid; gap: 1rem; }
.example { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.example > div { border-radius: 8px; padding: 0.7rem 0.85rem; }
.example .not { border: 1px dashed var(--line-2); color: var(--ink-2); }
.example .yes { border: 1.5px solid color-mix(in srgb, var(--good) 55%, var(--line)); background: color-mix(in srgb, var(--good) 6%, var(--sheet)); }
.example .tag { display: block; font: 600 0.7rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4rem; }
.example .not .tag { color: var(--bad); }
.example .yes .tag { color: var(--good); }
.example .why { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.92rem; }

.evidence {
  padding: 0.95rem 1.05rem;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
}
.evidence p + p { margin-top: 0.45rem; }
.evidence .src { font-size: 0.85rem; color: var(--ink-2); }

.why-block { max-width: 64ch; }

.reuse-list { margin: 0; padding-left: 1.2rem; color: var(--ink-2); }
.reuse-list li + li { margin-top: 0.3rem; }
.reuse-list li::marker { color: var(--hue, var(--accent)); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table-wrap th {
  text-align: left;
  font: 600 0.72rem/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--sheet-2);
  padding: 0.6rem 0.8rem;
}
.table-wrap td { padding: 0.6rem 0.8rem; border-top: 1px solid var(--line); vertical-align: top; }
.table-wrap td:first-child { font-weight: 700; }

.plain-list { margin: 0; padding-left: 1.2rem; }
.plain-list li + li { margin-top: 0.3rem; }
.note { color: var(--ink-2); font-size: 0.95rem; }

.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.btn {
  font: 700 0.95rem/1 var(--font-body);
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  min-height: 44px;
  cursor: pointer;
}
.btn:hover { background: var(--accent-2); }
.copy-status { color: var(--ink-2); font-size: 0.92rem; }

.detail-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--sheet-2);
}
.nav-btn {
  font: 600 0.92rem/1.2 var(--font-body);
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  min-height: 44px;
  cursor: pointer;
  max-width: 48%;
  text-align: left;
}
.nav-btn[data-nav="next"] { text-align: right; margin-left: auto; }
.nav-btn:hover { border-color: var(--ink); }
.nav-btn[hidden] { display: none; }

/* ------------------------------------------------------------------ narrow screens */

@media (max-width: 54rem) {
  .board,
  .board.is-assembled { grid-template-columns: minmax(0, 1fr); }
  .board { row-gap: 0.6rem; }
  .callout {
    grid-column: 1;
    margin: 0 0 0.9rem 0.8rem;
    padding: 0.2rem 0 0 1rem;
    border-left: 1.5px solid var(--hue);
  }
  .callout.intro { border-left-color: var(--line-2); }
  .leader { display: none; }
  .props { grid-template-columns: minmax(0, 1fr); }
  .example { grid-template-columns: minmax(0, 1fr); }
  .detail-head { padding: 1.1rem 3.6rem 1rem 1.1rem; }
  .detail-scroll { padding: 1.1rem 1.1rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}