/* ==========================================================================
   Coding Planner documentation, as published on arlabs.tech/docs/coding-planner
   Warm technical print shop: cream paper, ink, violet, JetBrains Mono.
   Dependency-free. Pages are generated by scripts/build-coding-planner-docs.mjs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Colour - light */
  --bg: #F2EDE0;
  --fg: #26211D;
  --card: #FBF8EF;
  --card-fg: #26211D;
  --primary: #9977FF;
  --primary-fg: #26211D;
  --primary-deep: #6A4BD4;
  --secondary: #26211D;
  --secondary-fg: #F2EDE0;
  --accent: #3BB878;
  --accent-fg: #26211D;
  --muted-fg: #6B5F54;
  --border: #26211D;
  --input: #26211D;
  --ring: #26211D;
  --destructive: #D00000;

  /* Semantic derivations (token references only, no new literals).
     Every light/dark difference in this stylesheet is expressed here, so the
     component rules below are authored exactly once and carry no media query. */
  --gap-rule: var(--destructive);

  /* The violet chip idiom: a filled violet chip with ink text in light,
     an outlined violet chip with violet text in dark. Shared by .pill--tag,
     .callout--ccaf .callout-label, and the current .sidenav-list item. */
  --violet-chip-bg: var(--primary);
  --violet-chip-fg: var(--primary-fg);
  --violet-chip-border: var(--border);
  --nav-current-hover-bg: var(--primary);

  /* The inverse steering card */
  --steer-bg: var(--secondary);
  --steer-fg: var(--secondary-fg);
  --steer-label: var(--primary);
  --steer-border: var(--border);
  --steer-shadow: var(--shadow-neo-accent);

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Courier New", monospace;

  /* Modular scale, 1.25 on a 16px base */
  --fs--1: 0.9375rem;  /* 15   */
  --fs-0: 1.125rem;    /* 18   */
  --fs-1: 1.25rem;     /* 20   */
  --fs-2: 1.5625rem;   /* 25   */
  --fs-3: 1.9375rem;   /* 31   */
  --fs-4: 2.4375rem;   /* 39   */
  --fs-5: 3.0625rem;   /* 49   */
  --fs-6: 3.8125rem;   /* 61   */
  --fs-7: 4.8125rem;   /* 77   */

  --lh-body: 1.5;
  --lh-display: 1.02;
  --track-label: 0.08em;
  --track-kicker: 0.22em;
  --track-display: -0.02em;

  /* Space, 4px base */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Radius, soft-neo, never 0 */
  --radius: 6px;
  --radius-card: 12px;
  --radius-hub: 16px;
  --radius-code: 4px;
  --radius-bar: 2px;
  --radius-pill: 999px;

  /* Borders - widths halve in dark */
  --border-thin: 1.5px;
  --border-frame: 3px;
  --border-heavy: 4px;

  /* Shadows - hard offset, zero blur */
  --shadow-color: rgba(38, 33, 29, 0.55);
  --shadow-color-strong: rgba(38, 33, 29, 0.95);
  --shadow-neo-sm: 2px 2px 0 0 var(--shadow-color);
  --shadow-neo: 5px 5px 0 0 var(--shadow-color);
  --shadow-neo-lg: 7px 7px 0 0 var(--shadow-color-strong);
  --shadow-neo-accent: 6px 6px 0 0 #9977FF;

  /* Motion */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 300ms;
  --dur-spring: 320ms;
  --ease: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --measure: 74ch;
  --content-max: 1400px;
  --nav-w: 264px;

  /* Paper */
  --paper-dot: radial-gradient(rgba(38, 33, 29, 0.055) 1px, transparent 1px);
  --paper-size: 26px 26px;

  color-scheme: light dark;
}

/* --------------------------------------------------------------------------
   1b. Dark tokens, and the explicit theme override
   --------------------------------------------------------------------------

   Three states:
     no data-theme          follow the OS
     data-theme="light"     force light, even on a dark OS
     data-theme="dark"      force dark, even on a light OS

   The :not([data-theme="light"]) guard on the media arm is load-bearing. Without
   it, a reader on a dark OS who explicitly picks light gets the dark tokens back
   through the media query and the override silently fails.

   The declaration list below appears twice, and that is the one piece of
   duplication in this file. Plain CSS cannot share a declaration body between a
   media-query-scoped rule and an unscoped one, and the portal ships without a
   build step, so there is no mixin to hoist it into. Everything else that used
   to differ between themes has been pushed into these tokens, so the component
   rules further down are authored once and carry no media query at all. Keep the
   two arms identical: change one, change the other.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Colour - dark */
    --bg: #191612;
    --fg: #F2EDE0;
    --card: #221E19;
    --card-fg: #F2EDE0;
    --primary: #9977FF;
    --primary-fg: #26211D;
    --primary-deep: #9977FF;
    --secondary: #4A4238;
    --secondary-fg: #F2EDE0;
    --accent: #62F6B5;
    --accent-fg: #000000;
    --muted-fg: #A89C8E;
    --border: #5C5851;
    --input: #807B73;
    --ring: #9977FF;
    --destructive: #B30000;

    /* #B30000 is unreadable against ink, so the gap rule falls back to a
       brighter warm hairline and the label chip carries the signal. */
    --gap-rule: var(--input);

    /* Accent migrates off fills and onto borders and text */
    --violet-chip-bg: transparent;
    --violet-chip-fg: var(--primary);
    --violet-chip-border: var(--primary);
    --nav-current-hover-bg: var(--bg);

    --steer-bg: var(--secondary);
    --steer-fg: var(--secondary-fg);
    --steer-label: var(--secondary-fg);
    --steer-border: var(--primary);
    --steer-shadow: none;

    /* The hairline idiom: every border width halves */
    --border-thin: 1px;
    --border-frame: 1.5px;
    --border-heavy: 2px;

    /* Interiors go flat. Only the single accent shadow survives. */
    --shadow-neo-sm: none;
    --shadow-neo: none;
    --shadow-neo-lg: none;
    --shadow-neo-accent: 6px 6px 0 0 #9977FF;

    --paper-dot: radial-gradient(rgba(242, 237, 224, 0.045) 1px, transparent 1px);

    color-scheme: dark;
  }
}

/* Second arm: identical body, reached when the reader forces dark. */
:root[data-theme="dark"],
:root.phosphor:not([data-theme="light"]) {
  /* Colour - dark */
  --bg: #191612;
  --fg: #F2EDE0;
  --card: #221E19;
  --card-fg: #F2EDE0;
  --primary: #9977FF;
  --primary-fg: #26211D;
  --primary-deep: #9977FF;
  --secondary: #4A4238;
  --secondary-fg: #F2EDE0;
  --accent: #62F6B5;
  --accent-fg: #000000;
  --muted-fg: #A89C8E;
  --border: #5C5851;
  --input: #807B73;
  --ring: #9977FF;
  --destructive: #B30000;

  /* #B30000 is unreadable against ink, so the gap rule falls back to a
     brighter warm hairline and the label chip carries the signal. */
  --gap-rule: var(--input);

  /* Accent migrates off fills and onto borders and text */
  --violet-chip-bg: transparent;
  --violet-chip-fg: var(--primary);
  --violet-chip-border: var(--primary);
  --nav-current-hover-bg: var(--bg);

  --steer-bg: var(--secondary);
  --steer-fg: var(--secondary-fg);
  --steer-label: var(--secondary-fg);
  --steer-border: var(--primary);
  --steer-shadow: none;

  /* The hairline idiom: every border width halves */
  --border-thin: 1px;
  --border-frame: 1.5px;
  --border-heavy: 2px;

  /* Interiors go flat. Only the single accent shadow survives. */
  --shadow-neo-sm: none;
  --shadow-neo: none;
  --shadow-neo-lg: none;
  --shadow-neo-accent: 6px 6px 0 0 #9977FF;

  --paper-dot: radial-gradient(rgba(242, 237, 224, 0.045) 1px, transparent 1px);

  color-scheme: dark;
}

/* Forcing light also pins color-scheme so form controls and scrollbars agree */
:root[data-theme="light"] {
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-6);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-0);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg);

  /* Paper: warm ground plus the dot grid. Cards stay untextured.
     Both variants come from tokens, so this rule serves all three theme states. */
  background-color: var(--bg);
  background-image: var(--paper-dot);
  background-size: var(--paper-size);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--primary);
  color: var(--primary-fg);
}

img,
svg {
  max-width: 100%;
}

hr {
  border: 0;
  border-top: var(--border-thin) solid var(--border);
  margin: var(--sp-7) 0;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 {
  font-weight: 900;
  font-size: clamp(var(--fs-4), 1.55rem + 3.1vw, var(--fs-6));
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}

h2 {
  font-weight: 800;
  font-size: clamp(var(--fs-2), 1.2rem + 1.4vw, var(--fs-3));
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: var(--sp-8);
}

h3 {
  font-weight: 700;
  font-size: var(--fs-2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: var(--sp-7);
}

h4 {
  font-weight: 700;
  font-size: var(--fs-1);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: var(--sp-6);
}

h5,
h6 {
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--muted-fg);
  margin: var(--sp-6) 0 var(--sp-3);
}

p {
  margin: 0 0 var(--sp-5);
}

ul,
ol {
  margin: 0 0 var(--sp-5);
  padding-left: var(--sp-6);
}

li {
  margin-bottom: var(--sp-2);
}

li::marker {
  color: var(--muted-fg);
}

strong,
b {
  font-weight: 700;
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

a {
  color: var(--primary-deep);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease),
    text-decoration-color var(--dur-fast) var(--ease);
}

a:hover {
  color: var(--fg);
  text-decoration-color: var(--primary);
  text-decoration-thickness: 2.5px;
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

code {
  font-size: 0.9em;
  letter-spacing: 0.01em;
  background: var(--card);
  border: var(--border-thin) solid var(--border);
  border-radius: var(--radius-code);
  padding: 0.1em 0.36em;
}

pre {
  font-size: var(--fs--1);
  line-height: 1.55;
  background: var(--card);
  color: var(--card-fg);
  border: var(--border-frame) solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-neo-sm);
  padding: var(--sp-5);
  margin: 0 0 var(--sp-5);
  overflow-x: auto;
  tab-size: 2;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}

blockquote {
  margin: 0 0 var(--sp-5);
  padding-left: var(--sp-5);
  border-left: var(--border-heavy) solid var(--primary);
}

/* --------------------------------------------------------------------------
   4. Focus, skip link, targets
   -------------------------------------------------------------------------- */

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

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

.skip {
  position: fixed;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 100;
  transform: translateY(calc(-100% - var(--sp-6) - 12px));
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  text-decoration: none;
  color: var(--secondary-fg);
  background: var(--secondary);
  border: var(--border-frame) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-neo);
  transition: transform var(--dur) var(--ease);
}

.skip:focus,
.skip:focus-visible {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   5. Topbar and wordmark
   -------------------------------------------------------------------------- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-6);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  border-bottom: var(--border-frame) solid var(--border);
}

/* The toggle takes the right-hand end without moving the wordmark or the tag */
.topbar .themetoggle {
  margin-left: auto;
  align-self: center;
}

/* Under 700px, drop to an explicit two-row grid rather than letting flex wrap:
   wordmark and toggle share row 1, the tag takes row 2 on its own. Placement is
   by grid area, so it holds whatever order the markup emits the three in. */
@media (max-width: 700px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
  }

  /* justify-self keeps the wordmark shrink-to-fit, so .wordmark-rule stays a
     short accent bar instead of stretching across the whole grid column. */
  .topbar .wordmark {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .topbar .themetoggle {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
    justify-self: end;
  }

  .topbar .topbar-tag {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.wordmark {
  display: inline-block;
  text-decoration: none;
  color: var(--fg);
  padding: var(--sp-1) 0;
}

.wordmark:hover {
  color: var(--fg);
}

.wordmark-text {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-2);
  line-height: 0.95;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.wordmark-rule {
  display: block;
  width: 100%;
  min-width: 64px;
  height: 5px;
  margin-top: var(--sp-2);
  background: var(--primary);
  border-radius: var(--radius-bar);
}

.topbar-tag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--muted-fg);
}

/* Theme toggle ------------------------------------------------------------

   A three-state control: AUTO, LIGHT, DARK. Built on the .kbd chip idiom, so it
   reads as engineer's furniture rather than as a UI affordance bolted on.

   The state is carried in words by .themetoggle-text. The dot is a secondary,
   redundant cue and is aria-hidden, so nothing here is colour-only: the three
   states differ by label text, by dot fill, and by dot geometry (half / hollow /
   solid). A reader who cannot resolve the hues still reads the word.
   ------------------------------------------------------------------------- */

.themetoggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--card-fg);
  background: var(--card);
  border: var(--border-frame) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-neo-sm);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

/* Let the page hide the control for no-JS readers with the hidden attribute
   without display:inline-flex winning over the UA rule. */
.themetoggle[hidden] {
  display: none;
}

.themetoggle:hover {
  transform: translate(-1px, -1px);
}

.themetoggle:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

.themetoggle-text {
  display: inline-block;
  letter-spacing: var(--track-label);
}

.themetoggle-dot {
  flex: 0 0 auto;
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: var(--radius-pill);
  border: var(--border-thin) solid currentColor;
  background: transparent;
}

/* AUTO: half filled, quiet. The theme is whatever the OS says. */
.themetoggle[data-mode="auto"] {
  border-color: var(--border);
  color: var(--muted-fg);
}

.themetoggle[data-mode="auto"] .themetoggle-dot {
  background: linear-gradient(
    90deg,
    currentColor 0 50%,
    transparent 50% 100%
  );
}

/* LIGHT: hollow dot. An explicit override, so the frame picks up the accent. */
.themetoggle[data-mode="light"] {
  border-color: var(--primary);
  color: var(--fg);
}

.themetoggle[data-mode="light"] .themetoggle-dot {
  background: transparent;
}

/* DARK: solid dot. */
.themetoggle[data-mode="dark"] {
  border-color: var(--primary);
  color: var(--fg);
}

.themetoggle[data-mode="dark"] .themetoggle-dot {
  background: currentColor;
}

/* --------------------------------------------------------------------------
   6. Shell, sidenav, main
   -------------------------------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: minmax(0, var(--nav-w)) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-6) var(--sp-9);
}

.sidenav {
  position: sticky;
  top: var(--sp-5);
  align-self: start;
  max-height: calc(100vh - var(--sp-8));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-5);
  background: var(--card);
  color: var(--card-fg);
  border: var(--border-frame) solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-neo);
}

.sidenav-label {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--muted-fg);
}

.sidenav-label + .sidenav-list,
.sidenav-label + .sidenav-toc {
  margin-top: 0;
}

.sidenav-list,
.sidenav-toc {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
}

.sidenav-toc {
  margin-bottom: 0;
  border-left: var(--border-thin) solid var(--border);
  padding-left: var(--sp-3);
}

.sidenav-list li,
.sidenav-toc li {
  margin: 0;
}

.sidenav-list a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  border-left: var(--border-frame) solid transparent;
  font-size: var(--fs--1);
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.sidenav-list a:hover {
  background: var(--bg);
  color: var(--fg);
}

.sidenav-toc a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--muted-fg);
  text-decoration: none;
}

.sidenav-toc a:hover {
  color: var(--fg);
  background: var(--bg);
}

.num {
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 700;
  letter-spacing: var(--track-label);
  font-variant-numeric: tabular-nums;
  color: var(--muted-fg);
}

/* Current chapter: violet fill in light, violet text plus selected border in dark */
.sidenav-list a[aria-current="page"] {
  background: var(--violet-chip-bg);
  color: var(--violet-chip-fg);
  font-weight: 700;
  border-left-color: var(--violet-chip-border);
}

.sidenav-list a[aria-current="page"]:hover {
  background: var(--nav-current-hover-bg);
  color: var(--violet-chip-fg);
}

.sidenav-list a[aria-current="page"] .num {
  color: var(--violet-chip-fg);
}

main {
  display: block;
  min-width: 0;
}

main > * + * {
  margin-top: 0;
}

/* Single column under about 900px: the sidenav becomes a normal block above */
@media (max-width: 900px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    padding: var(--sp-6) var(--sp-4) var(--sp-8);
  }

  .sidenav {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .sidenav-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-1);
  }

  .topbar {
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
  }
}

/* --------------------------------------------------------------------------
   7. Reading column
   -------------------------------------------------------------------------- */

.prose {
  max-width: 100%;
}

.prose > * {
  max-width: var(--measure);
}

.prose > .wide,
.wide {
  max-width: none;
  width: 100%;
}

/* Current guides: short sections with explicit headings and compact references. */
.doc-section {
  margin: var(--sp-7) 0;
  padding-top: var(--sp-5);
  border-top: var(--border-thin) solid var(--border);
}

.doc-section > h2 {
  margin-top: 0;
}

.doc-section > p,
.doc-section > ul,
.doc-section > ol.seq,
.doc-section > details {
  max-width: var(--measure);
}

.doc-page .seq h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-1);
}

.doc-page td,
.doc-page th,
.doc-page code {
  overflow-wrap: anywhere;
}

.source-note {
  font-size: var(--fs--1);
  color: var(--muted-fg);
}

.run-cycle {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  padding: 0;
  list-style: none;
}

.run-cycle li {
  padding: var(--sp-4);
  border-top: var(--border-heavy) solid var(--primary);
  background: var(--card);
}

.run-cycle strong,
.run-cycle span {
  display: block;
}

.run-cycle span {
  margin-top: var(--sp-2);
  font-size: var(--fs--1);
}

@media (max-width: 640px) {
  .run-cycle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .doc-page table {
    min-width: 520px;
  }

  main {
    overflow-wrap: anywhere;
  }

  main .pill {
    max-width: 100%;
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   8. Page furniture
   -------------------------------------------------------------------------- */

.kicker {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--muted-fg);
}

.standfirst {
  max-width: 62ch;
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-1);
  font-weight: 300;
  line-height: 1.45;
  color: var(--fg);
}

.rule {
  display: block;
  width: 72px;
  height: 5px;
  margin: 0 0 var(--sp-6);
  padding: 0;
  border: 0;
  background: var(--primary);
  border-radius: var(--radius-bar);
}

/* Layers ------------------------------------------------------------------ */

.layer {
  display: block;
  margin: 0 0 var(--sp-9);
  padding-top: var(--sp-6);
  border-top: var(--border-frame) solid var(--border);
}

.layer:first-child {
  border-top: 0;
  padding-top: 0;
}

.layer > h2:first-of-type {
  margin-top: 0;
}

.layer-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--fg);
  background: var(--card);
  border: var(--border-thin) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-neo-sm);
}

.layer--orientation {
  /* Layer 1 reads first and loudest: nothing extra needed beyond scale */
  font-size: var(--fs-0);
}

.layer--orientation > .layer-tag {
  border-left: var(--border-heavy) solid var(--primary);
}

.layer--mechanics {
  font-size: var(--fs-0);
}

/* Layer 3: a reference appendix. Quieter, denser, mono-leaning. */
.layer--contract {
  padding: var(--sp-6);
  background: var(--card);
  color: var(--card-fg);
  border: var(--border-thin) solid var(--border);
  border-radius: var(--radius-card);
  font-size: var(--fs--1);
  line-height: 1.5;
}

.layer--contract > .layer-tag {
  background: var(--bg);
  box-shadow: none;
}

.layer--contract h2,
.layer--contract h3,
.layer--contract h4 {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-0);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted-fg);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}

.layer--contract p,
.layer--contract ul,
.layer--contract ol,
.layer--contract .table-wrap,
.layer--contract pre {
  margin-bottom: var(--sp-4);
}

.layer--contract li {
  margin-bottom: var(--sp-1);
}

.layer--contract table {
  font-size: var(--fs--1);
}

.layer--contract th,
.layer--contract td {
  padding: var(--sp-2) var(--sp-3);
}

.layer--contract pre {
  box-shadow: none;
  border-width: var(--border-thin);
  background: var(--bg);
}

/* Next / previous --------------------------------------------------------- */

.nextprev {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: var(--sp-9) 0 0;
  padding-top: var(--sp-6);
  border-top: var(--border-frame) solid var(--border);
}

.nextprev-prev,
.nextprev-next {
  flex: 1 1 240px;
  display: block;
  min-height: 44px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--card);
  color: var(--card-fg);
  border: var(--border-frame) solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-neo-sm);
  text-decoration: none;
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease);
}

.nextprev-next {
  text-align: right;
}

.nextprev-prev:hover,
.nextprev-next:hover {
  color: var(--card-fg);
  transform: translate(-1px, -1px);
}

.nextprev-prev::before,
.nextprev-next::before {
  display: block;
  margin-bottom: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--muted-fg);
}

.nextprev-prev::before {
  content: "< Previous";
}

.nextprev-next::before {
  content: "Next >";
}

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

.stamp {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-6);
  border-top: var(--border-frame) solid var(--border);
}

.stamp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  margin: 0;
  border: var(--border-thin) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}

.stamp-grid > div {
  padding: var(--sp-3) var(--sp-4);
  border-right: var(--border-thin) solid var(--border);
}

.stamp-grid > div:last-child {
  border-right: 0;
}

.stamp-grid dt {
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--muted-fg);
  margin-bottom: var(--sp-1);
}

.stamp-grid dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 500;
  letter-spacing: var(--track-label);
  color: var(--card-fg);
}

@media (max-width: 640px) {
  .stamp-grid > div {
    border-right: 0;
    border-bottom: var(--border-thin) solid var(--border);
  }

  .stamp-grid > div:last-child {
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   9. Content blocks
   -------------------------------------------------------------------------- */

.card {
  display: block;
  padding: var(--sp-5) var(--sp-5) var(--sp-5);
  background: var(--card);
  color: var(--card-fg);
  border: var(--border-frame) solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-neo-lg);
}

.card > :last-child {
  margin-bottom: 0;
}

.card > h2,
.card > h3,
.card > h4 {
  margin-top: 0;
}

.card > h3,
.card > h4 {
  font-size: var(--fs-1);
}

a.card {
  text-decoration: none;
  color: var(--card-fg);
  transition: transform var(--dur-fast) var(--ease);
}

a.card:hover {
  color: var(--card-fg);
  transform: translate(-2px, -2px);
}

.card-grid {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--sp-6);
  margin: 0 0 var(--sp-6);
  padding: 0;
  list-style: none;
}

@media (max-width: 1100px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The single inverse ink emphasis surface. One per page. */
.steer {
  display: block;
  margin: var(--sp-7) 0;
  padding: var(--sp-6);
  background: var(--steer-bg);
  color: var(--steer-fg);
  /* Accent shadow in light; flat with a violet hairline in dark. Both come
     from tokens, so this rule serves all three theme states. */
  border: var(--border-heavy) solid var(--steer-border);
  border-radius: var(--radius-hub);
  box-shadow: var(--steer-shadow);
}

.steer > :last-child {
  margin-bottom: 0;
}

.steer h2,
.steer h3,
.steer h4 {
  color: var(--steer-fg);
  margin-top: 0;
}

.steer .kicker {
  color: var(--steer-label);
}

/* .callout-label is a standalone chip and is legitimate anywhere, including
   here. On the inverse ink surface it must drop its paper fill, otherwise the
   label sits on a cream patch and the accent text falls to 2.72:1. Unfilled,
   it measures 4.89:1 (violet on ink, light) and 8.44:1 (creme on #4A4238, dark). */
.steer .callout-label {
  background: none;
  border-color: var(--steer-label);
  color: var(--steer-label);
}

.steer .rule {
  background: var(--primary);
}

.steer a {
  color: var(--secondary-fg);
  text-decoration-color: var(--primary);
  text-decoration-thickness: 2px;
}

.steer a:hover {
  color: var(--secondary-fg);
  text-decoration-thickness: 3px;
}

.steer .muted {
  color: var(--secondary-fg);
  opacity: 0.82;
}

.steer code,
.steer .mono,
.steer .pathref,
.steer .kbd {
  color: var(--secondary-fg);
  background: none;
  border-color: var(--secondary-fg);
}

/* Callouts ---------------------------------------------------------------- */

.callout {
  display: block;
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  background: var(--card);
  color: var(--card-fg);
  border: var(--border-thin) solid var(--border);
  border-left: var(--border-heavy) solid var(--border);
  border-radius: var(--radius-card);
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout-label {
  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--muted-fg);
  background: var(--bg);
  border: var(--border-thin) solid var(--border);
  border-radius: var(--radius);
}

.callout--ccaf {
  border-left-color: var(--primary);
}

.callout--ccaf .callout-label {
  background: var(--violet-chip-bg);
  color: var(--violet-chip-fg);
  border-color: var(--violet-chip-border);
}

.callout--note {
  border-left-color: var(--border);
}

.callout--note .callout-label {
  background: var(--bg);
  color: var(--muted-fg);
}

.callout--gap {
  border-left-color: var(--gap-rule);
}

.callout--gap .callout-label {
  background: var(--destructive);
  color: var(--secondary-fg);
  border-color: var(--destructive);
}


/* Disclosure: .drill (Layer 2 inline) and .contract-block (Layer 3) -------- */

.drill,
.contract-block {
  display: block;
  margin: var(--sp-5) 0;
  border-radius: var(--radius-card);
}

.drill > summary,
.contract-block > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg);
  border-radius: var(--radius);
  transition: background-color var(--dur-fast) var(--ease);
}

.drill > summary::-webkit-details-marker,
.contract-block > summary::-webkit-details-marker {
  display: none;
}

/* Non-colour-only open/closed affordance: a plus turns into a minus */
.drill > summary::before,
.contract-block > summary::before {
  content: "+";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  font-weight: 800;
  line-height: 1;
  color: var(--primary-deep);
  background: var(--card);
  border: var(--border-thin) solid var(--border);
  border-radius: var(--radius-code);
}

.drill[open] > summary::before,
.contract-block[open] > summary::before {
  content: "-";
}

.drill > summary:hover,
.contract-block > summary:hover {
  background: var(--card);
}

.drill {
  border-left: var(--border-heavy) solid var(--border);
  background: var(--card);
  border-top: var(--border-thin) solid var(--border);
  border-right: var(--border-thin) solid var(--border);
  border-bottom: var(--border-thin) solid var(--border);
}

.drill > summary {
  color: var(--muted-fg);
}

.drill[open] > summary {
  color: var(--fg);
  border-bottom: var(--border-thin) solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}

.drill > :not(summary) {
  padding: 0 var(--sp-5);
}

.drill > summary + * {
  padding-top: var(--sp-4);
}

.drill > :last-child:not(summary) {
  padding-bottom: var(--sp-4);
  margin-bottom: 0;
}

.contract-block {
  background: var(--bg);
  border: var(--border-thin) solid var(--border);
}

.contract-block > summary {
  font-size: var(--fs-0);
  letter-spacing: var(--track-label);
}

.contract-block[open] > summary {
  border-bottom: var(--border-thin) solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}

.contract-block > :not(summary) {
  padding: 0 var(--sp-5);
}

.contract-block > summary + * {
  padding-top: var(--sp-5);
}

.contract-block > :last-child:not(summary) {
  padding-bottom: var(--sp-5);
  margin-bottom: 0;
}

/* Figures ----------------------------------------------------------------- */

.figure {
  display: block;
  margin: var(--sp-7) 0;
  padding: 0;
  max-width: 100%;
}

.figure-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  /* Diagrams are transparent so the paper texture shows through */
  background: none;
}

.figcaption {
  display: block;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: var(--border-thin) solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--muted-fg);
}

/* Figure number stamp, same idiom as .kicker */
.figcaption-num {
  display: inline-block;
  margin-right: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--primary-deep);
}

/* A one-line pointer that sits directly under a figure */
.figure + .figure-more {
  margin-top: calc(-1 * var(--sp-5));
}

.figure-more {
  font-size: var(--fs--1);
  color: var(--muted-fg);
}

/* Linked diagrams: an SVG in an <object>, so its links work ------------- */

.figure-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.figure-obj {
  display: block;
  width: 100%;
  height: auto;
}

/* On a phone the diagrams keep a readable minimum width and scroll sideways. */
@media (max-width: 640px) {
  .figure-scroll .figure-obj {
    min-width: 820px;
  }
}

.map-sections {
  margin: 0 0 var(--sp-5);
  padding-left: var(--sp-5);
}

.map-sections li + li {
  margin-top: var(--sp-1);
}

/* Zoomable figure: a large diagram shown inline with pan and zoom -------- */

.zoomer {
  margin: var(--sp-6) 0 var(--sp-4);
  background: var(--card);
  color: var(--card-fg);
  border: var(--border-frame) solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-neo);
  overflow: hidden;
}

.zoomer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--border-thin) solid var(--border);
}

.zoomer-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--card-fg);
  background: var(--bg);
  border: var(--border-thin) solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.zoomer-btn:hover {
  background: var(--card);
}

.zoomer-level {
  min-width: 5ch;
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-variant-numeric: tabular-nums;
  color: var(--muted-fg);
}

.zoomer-hint {
  margin: 0 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  color: var(--muted-fg);
}

/* Without the script the stage is a plain scroll box at the diagram's full size. */
.zoomer-stage {
  position: relative;
  height: min(78vh, 920px);
  overflow: auto;
  background: var(--bg);
}

.zoomer-stage.is-live {
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.zoomer-stage.is-dragging {
  cursor: grabbing;
}

.zoomer-stage:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: -3px;
}

.zoomer-img {
  display: block;
  max-width: none;
  height: auto;
}

.is-live > .zoomer-img {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  .zoomer-hint {
    flex-basis: 100%;
    margin-left: 0;
  }

  .zoomer-stage {
    height: 70vh;
  }
}

/* Tables ------------------------------------------------------------------ */

.table-wrap {
  display: block;
  margin: 0 0 var(--sp-6);
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: var(--border-thin) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-0);
  line-height: 1.4;
  text-align: left;
}

caption {
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--muted-fg);
  text-align: left;
}

th,
td {
  padding: var(--sp-3) var(--sp-4);
  vertical-align: top;
  /* Hairline row rules, no zebra */
  border-bottom: var(--border-thin) solid var(--border);
}

thead th {
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--muted-fg);
  white-space: nowrap;
  border-bottom: var(--border-frame) solid var(--border);
}

tbody th[scope="row"] {
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 700;
  letter-spacing: var(--track-label);
  color: var(--fg);
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   10. Inline furniture
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-3);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--card-fg);
  vertical-align: baseline;
}

.pill--neutral {
  background: var(--card);
  color: var(--card-fg);
  border-color: var(--border);
}

/* Violet fill with ink text in light; violet outline with violet text in dark */
.pill--tag {
  background: var(--violet-chip-bg);
  color: var(--violet-chip-fg);
  border-color: var(--violet-chip-border);
}

.pill--ok {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--border);
}

.pill--warn {
  background: var(--destructive);
  color: var(--secondary-fg);
  border-color: var(--destructive);
}

.kbd {
  display: inline-block;
  padding: 1px var(--sp-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  white-space: nowrap;
  color: var(--card-fg);
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-code);
  box-shadow: var(--shadow-neo-sm);
  vertical-align: baseline;
}

.pathref {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: 0.01em;
  word-break: break-word;
  padding: 0.1em 0.36em;
  border-radius: var(--radius-code);
  border: var(--border-thin) solid var(--border);
  color: var(--primary-deep);
  background: var(--card);
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.94em;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--muted-fg);
}

/* Term list --------------------------------------------------------------- */

.termlist {
  margin: 0 0 var(--sp-6);
  padding: 0;
}

.termlist dt {
  margin: var(--sp-5) 0 var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg);
}

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

.termlist dd {
  margin: 0;
  padding: 0 0 var(--sp-3) var(--sp-4);
  border-left: 3px solid rgba(128, 128, 128, 0.25);
  color: var(--fg);
}

.termlist dd > :last-child {
  margin-bottom: 0;
}

/* Sequence ---------------------------------------------------------------- */

.seq {
  counter-reset: seq;
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
}

.seq > li {
  counter-increment: seq;
  position: relative;
  margin: 0 0 var(--sp-5);
  padding-left: var(--sp-8);
  min-height: 32px;
}

.seq > li::before {
  content: counter(seq, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: var(--track-label);
  font-variant-numeric: tabular-nums;
  color: var(--primary-deep);
}

.seq > li > :last-child {
  margin-bottom: 0;
}

.seq .seq {
  margin-top: var(--sp-4);
}

/* Quote ------------------------------------------------------------------- */

.quote {
  margin: var(--sp-6) 0;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  border-left: var(--border-heavy) solid var(--primary);
  font-size: var(--fs-1);
  font-weight: 300;
  line-height: 1.45;
  color: var(--fg);
}

.quote > :last-child {
  margin-bottom: 0;
}

.quote p {
  margin-bottom: var(--sp-3);
}

.quote cite,
.quote footer {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--muted-fg);
}

/* --------------------------------------------------------------------------
   11. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-spring: 0.01ms;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  a.card:hover,
  .nextprev-prev:hover,
  .nextprev-next:hover,
  .themetoggle:hover {
    transform: none;
  }

  .skip {
    transform: none;
    top: auto;
    bottom: calc(100% + 100px);
  }

  .skip:focus,
  .skip:focus-visible {
    top: var(--sp-2);
    bottom: auto;
  }
}

/* --------------------------------------------------------------------------
   12. Print
   -------------------------------------------------------------------------- */

@media print {
  body {
    background: none;
    background-image: none;
    color: var(--fg);
    font-size: 11pt;
  }

  .skip,
  .sidenav,
  .nextprev,
  .themetoggle {
    display: none !important;
  }

  .shell {
    display: block;
    max-width: none;
    padding: 0;
  }

  .topbar,
  .stamp {
    padding-left: 0;
    padding-right: 0;
  }

  /* Expand every disclosure so the contract layer prints */
  details {
    display: block !important;
  }

  details > summary {
    display: block !important;
    list-style: none;
  }

  details > *:not(summary) {
    display: block !important;
  }

  details::details-content {
    display: block !important;
    content-visibility: visible !important;
    block-size: auto !important;
  }

  /* Keep the diagrams */
  .figure,
  .figure-img {
    break-inside: avoid;
    page-break-inside: avoid;
    max-width: 100%;
  }

  .card,
  .steer,
  .callout,
  .quote,
  .table-wrap,
  pre {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  a {
    text-decoration: underline;
  }

  .layer {
    break-before: auto;
  }

  .prose > * {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Walkthrough rail (SAMPLE, 2026-08-22): two-column grid for the step-by-step
   walkthrough. Left column holds the sticky anatomy panel; right column holds
   the step prose. Collapses to one column under 1100px.
   -------------------------------------------------------------------------- */
.walkrail-grid {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.walkrail {
  margin: 0;
}

.walkrail .figure-img {
  width: 100%;
  height: auto;
}

@media (max-width: 1100px) {
  .walkrail-grid { display: block; }
  .walkrail { position: static; max-width: 400px; margin: var(--sp-6) 0; }
}

/* Full-width separator between walkthrough steps. */
.step-rule {
  border: 0;
  border-top: 1.5px solid var(--border);
  margin: var(--sp-7) 0;
  max-width: none;
}

/* Keep the guide introduction visible below navigation on narrow screens. */
@media (max-width: 640px) {
  .sidenav {
    padding: var(--sp-3);
  }

  .sidenav .sidenav-label,
  .sidenav .sidenav-toc {
    display: none;
  }

  .sidenav .sidenav-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
  }

  .sidenav .sidenav-list a {
    padding: var(--sp-2);
  }
}

/* --------------------------------------------------------------------------
   AR Labs integration: the site bar, the folding contents list, the footer,
   and markdown-rendered pages (the system reference and agent reference).
   -------------------------------------------------------------------------- */

/* A slim bar back to the rest of arlabs.tech, above the docs top bar. */
.sitebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-5);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border-bottom: var(--border-thin) solid var(--border);
}

.sitebar a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--fg);
  text-decoration: none;
}

.sitebar a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.sitebar-home {
  font-weight: 800;
}

.sitebar-sep {
  margin-left: calc(var(--sp-5) * -0.5);
  margin-right: calc(var(--sp-5) * -0.5);
  color: var(--muted-fg);
}

@media (max-width: 900px) {
  .sitebar {
    padding: var(--sp-2) var(--sp-4);
    gap: 0 var(--sp-4);
  }
}

/* The contents list is a <details>: always open on a wide screen (its summary
   hidden), folded by default under 900px so a phone opens on the page's text. */
.sidenav-summary {
  display: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  min-height: 44px;
  align-items: center;
}

.sidenav-summary::-webkit-details-marker {
  display: none;
}

.sidenav-summary::before {
  content: "+";
  display: inline-block;
  width: 1.4em;
  font-weight: 800;
}

.sidenav-fold[open] > .sidenav-summary::before {
  content: "\2212";
}

@media (max-width: 900px) {
  .sidenav {
    padding: var(--sp-2) var(--sp-4);
  }

  .sidenav-summary {
    display: flex;
  }

  .sidenav-fold[open] > .sidenav-summary {
    margin-bottom: var(--sp-4);
  }
}

.docs-footer {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-6) var(--sp-8);
  border-top: var(--border-thin) solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs--1);
  color: var(--muted-fg);
}

.docs-footer a {
  color: var(--fg);
}

@media (max-width: 900px) {
  .docs-footer {
    padding: var(--sp-5) var(--sp-4) var(--sp-7);
  }
}

/* Markdown pages: the intro and each h2 section share the guides' measure. */
.doc-intro {
  margin-top: var(--sp-6);
}

.doc-section > h3 {
  max-width: var(--measure);
}

/* Tables scroll inside their own frame, so a cell keeps whole words instead of
   shrinking to a few letters ("anywhere", set on main for narrow screens, would
   let it). Long inline code may still break, and each wrapped line of it keeps
   its own box. */
main .table-wrap td,
main .table-wrap th {
  overflow-wrap: break-word;
  min-width: 8rem;
}

main .table-wrap tbody > tr > :first-child {
  min-width: 10rem;
}

main .table-wrap code {
  overflow-wrap: anywhere;
}

main code {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* A row's name (a setting, an actor, a verb) reads as one token. */
main .table-wrap tbody > tr > :first-child code {
  white-space: nowrap;
}