/* ==========================================================================
   Knowledge Library - Core Design System
   Theme-neutral. Pair with one shared/themes/<name>.css.
   Vanilla CSS. No build step. No external fonts or libraries.
   ========================================================================== */

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

:root {
  /* Neutral surface palette */
  --bg:            #FAFAFA;
  --surface:       #FFFFFF;
  --surface-2:     #F4F4F5;
  --surface-3:     #EFEFF1;

  /* Text */
  --text:          #18181B;
  --text-2:        #52525B;
  --text-3:        #696972;

  /* Lines */
  --border:        #DEDEE2;
  --border-strong: #CBCBD2;
  --control-line:  #8E8E98;

  /* Accent - warm terracotta */

  /* Semantic */
  --warn:          #92400E;
  --warn-soft:     #FEF6E7;
  --warn-line:     #F3DFB8;
  --ok:            #15803D;
  --ok-soft:       #F0FAF3;
  --ok-line:       #C3E8D0;
  --info:          #1D4ED8;
  --info-soft:     #F1F5FE;
  --info-line:     #CFDDF8;
  --bad:           #B91C1C;
  --bad-soft:      #FEF2F2;
  --bad-line:      #F5CFCF;

  /* Code surface */
  --code-bg:       #1B1B1F;
  --code-fg:       #E6E6EA;
  --code-dim:      #9A9AA6;
  --code-str:      #B8D9A0;
  --code-key:      #E4A672;
  --code-flag:     #9CC7E8;
  --code-num:      #D9B0E0;
  --code-punct:    #A9A9B4;
  --code-head:     #2A2A30;

  /* Type scale */
  --f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", "Courier New", monospace;

  --t-h1: 2.25rem;   /* 36px */
  --t-h2: 1.75rem;   /* 28px */
  --t-h3: 1.3125rem; /* 21px */
  --t-h4: 1rem;      /* 16px */
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --t-code: 0.875rem;

  /* Geometry */
  --nav-w: 292px;
  --toc-w: 236px;
  --topbar-h: 56px;
  --read-w: 44rem;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --shadow-1: 0 1px 2px rgba(24, 24, 27, 0.05);
  --shadow-2: 0 4px 16px -4px rgba(24, 24, 27, 0.10),
               0 1px 3px rgba(24, 24, 27, 0.06);
  --shadow-3: 0 18px 48px -12px rgba(24, 24, 27, 0.22);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Section label scale (eyebrows, block titles) */
  --t-label: 0.8125rem;
  --label-track: 0.055em;

  /* Diagram palette - deliberately separate from semantic colours so
     flow steps stay legible when a diagram sits inside a callout. */
  --dg-panel:      #F4F4F5;
  --dg-dot:        #E2E2E6;
  --dg-line:       #85858E;
  --dg-step-bg:    #FFFFFF;
  --dg-step-line:  #8C8C95;
  --dg-step-text:  #27272A;
  --dg-ai-bg:      #F1F5FE;
  --dg-ai-line:    #6389D2;
  --dg-ai-text:    #1B49C0;
  --dg-ok-bg:      #F0FAF3;
  --dg-ok-line:    #4E966B;
  --dg-ok-text:    #127036;
  --dg-index:      #FFFFFF;
}

/* Dark theme */
[data-theme="dark"] {
  --bg:            #0F0F11;
  --surface:       #161619;
  --surface-2:     #1C1C20;
  --surface-3:     #232328;

  --text:          #ECECEF;
  --text-2:        #B4B4BD;
  --text-3:        #92929C;

  --border:        #2A2A31;
  --border-strong: #3A3A43;
  --control-line:  #666671;

  --warn:          #E8B563;
  --warn-soft:     #231C10;
  --warn-line:     #453619;
  --ok:            #6EDB98;
  --ok-soft:       #101F16;
  --ok-line:       #1F4430;
  --info:          #82AFF7;
  --info-soft:     #131A28;
  --info-line:     #26364F;
  --bad:           #F08B8B;
  --bad-soft:      #241414;
  --bad-line:      #4A2626;

  --code-bg:       #131316;
  --code-head:     #1D1D22;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 16px -4px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 18px 48px -12px rgba(0, 0, 0, 0.7);

  --dg-panel:      #161619;
  --dg-dot:        #26262D;
  --dg-line:       #6E6E7A;
  --dg-step-bg:    #1D1D22;
  --dg-step-line:  #66666F;
  --dg-step-text:  #E4E4E9;
  --dg-ai-bg:      #141C2C;
  --dg-ai-line:    #4A6698;
  --dg-ai-text:    #93BAFA;
  --dg-ok-bg:      #102218;
  --dg-ok-line:    #3D7A55;
  --dg-ok-text:    #7FE3A6;
  --dg-index:      #0F0F11;
}

/* --------------------------------------------------------------------------
   2. Base
 -------------------------------------------------------------------------- */

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

html {
 -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.7;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
}

h1, h2, h3, h4 {
  color: var(--text);
  font-weight: 640;
  letter-spacing: -0.018em;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration-color: var(--accent-line);
  text-underline-offset: 3px;
}
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

strong { font-weight: 630; color: var(--text); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.35em; }
li { margin: 0.3em 0; }
li::marker { color: var(--text-3); }

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

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

::selection { background: var(--accent-line); color: var(--text); }

/* Inline code */
code {
  font-family: var(--f-mono);
  font-size: 0.875em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.1em 0.36em;
  color: var(--text);
  word-break: break-word;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--r-sm) 0;
  font-size: var(--t-small);
  font-weight: 600;
}
.skip-link:focus { left: 0; }

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

/* --------------------------------------------------------------------------
   3. App shell
 -------------------------------------------------------------------------- */

.app {
  --lead-w: var(--nav-w);
  display: grid;
  grid-template-columns: var(--lead-w) minmax(0, 1fr) var(--toc-w);
  min-height: calc(100vh - var(--topbar-h));
}

/* ---- Sidebar ---- */

.sidebar {
  grid-column: 1;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 60;
}

/* ---- Brand row + collapse control ---- */

.brand-mark {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  background: var(--accent);
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--shadow-1);
}

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  justify-content: center;
}
.brand-title {
  font-size: 0.9375rem;
  font-weight: 660;
  letter-spacing: -0.015em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.14s var(--ease);
}
.brand-sub {
  font-size: 0.6563rem;
  color: var(--text-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* Collapse button: a real, findable control rather than a faint glyph. */
/* Back to the library landing, sitting left of the brand. */
.hub-link {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--control-line);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-2);
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: color 0.14s var(--ease), background 0.14s var(--ease),
              border-color 0.14s var(--ease);
}
.hub-link:hover {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.hub-link svg { width: 17px; height: 17px; display: block; }

/* A hairline between the two shell controls and the brand. */
.topbar-rule {
  flex: 0 0 1px;
  width: 1px;
  height: 22px;
  margin: 0 0.25rem;
  background: var(--border-strong);
}

.collapse-btn {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--control-line);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-2);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
              color 0.15s var(--ease), transform 0.15s var(--ease);
}
.collapse-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.collapse-btn:active { transform: scale(0.94); }

/* Sidebar toggle. The filled column is the sidebar: solid when open, faint
   when railed. Same affordance editors use, so it needs no explanation. */
.collapse-btn svg { width: 17px; height: 17px; display: block; }

.ci-frame {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.ci-panel {
  fill: currentColor;
  transition: opacity 0.22s var(--ease);
}
.collapse-btn[aria-expanded="false"] .ci-panel { opacity: 0.22; }

/* Progress */
.progress {
  padding: 1.125rem 1.25rem 0.875rem;
  flex-shrink: 0;
}
.progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--text-3);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 550;
  margin-bottom: 0.4rem;
}
.progress-pct {
  margin-left: auto;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Reset sits with the thing it resets. */
.progress-reset {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.14s var(--ease), background 0.14s var(--ease);
}
.progress-reset:hover { color: var(--accent); background: var(--surface-2); }
.progress-reset svg { width: 13px; height: 13px; }
.progress-track {
  height: 4px;
  border-radius: 99px;
  background: var(--surface-3);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: var(--accent);
  transition: width 0.45s var(--ease);
}

/* Search trigger */
.search-trigger {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem 0 0.625rem;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-3);
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.search-trigger:hover { border-color: var(--border-strong); background: var(--surface-3); }
/* The icon is injected as an unsized <svg>; constrain its wrapper. */
.search-trigger-icon {
  flex: 0 0 15px;
  width: 15px; height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.search-trigger-icon svg { width: 15px; height: 15px; display: block; }
.search-trigger-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-trigger .kbd { flex-shrink: 0; }

.kbd-sep {
  font-size: 0.6875rem;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

.kbd {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  padding: 0.1rem 0.32rem;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-3);
  white-space: nowrap;
}

/* Nav list */
.nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0.625rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
  border: 2px solid var(--surface);
}
.nav::-webkit-scrollbar-track { background: transparent; }

.nav-group { margin-bottom: 0.125rem; }

.nav-group-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.625rem;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.nav-group-btn:hover { color: var(--text-2); background: var(--surface-2); }

.nav-caret {
  width: 9px; height: 9px;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
  opacity: 0.65;
}
.nav-group-btn[aria-expanded="true"] .nav-caret { transform: rotate(90deg); }

.nav-group-done {
  margin-left: auto;
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text-3);
  opacity: 0.8;
  text-transform: none;
  font-weight: 550;
}
.nav-group-done[data-complete="true"] { color: var(--ok); }

.nav-items { list-style: none; margin: 0 0 0.35rem; padding: 0 0 0 0.35rem; }
.nav-items[hidden] { display: none; }

.nav-link {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.34rem 0.625rem;
  border-radius: var(--r-sm);
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.8438rem;
  line-height: 1.45;
  border-left: 2px solid transparent;
  margin-left: 0.3rem;
  transition: color 0.13s var(--ease), background 0.13s var(--ease);
}
.nav-link:hover { color: var(--text); background: var(--surface-2); }

.nav-num {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  color: var(--text-3);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.nav-label { flex: 1 1 auto; min-width: 0; }

.nav-tick {
  flex-shrink: 0;
  width: 12px; height: 12px;
  align-self: center;
  color: var(--ok);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.nav-link[data-done="true"] .nav-tick { opacity: 1; }
.nav-link[data-done="true"] .nav-num { opacity: 0.5; }

.nav-link[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-left-color: var(--accent);
  font-weight: 570;
}
.nav-link[aria-current="page"] .nav-num { color: var(--accent); opacity: 1; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: 0 0 32px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.14s var(--ease), background 0.14s var(--ease),
              border-color 0.14s var(--ease);
}
.icon-btn:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}
.icon-btn svg { width: 16px; height: 16px; display: block; }

/* Website: an "M" monogram so it stays recognisable at rail width. */
.author-mark {
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  border: 1.5px solid currentColor;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.author-site:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }

.author-link:hover { color: #0A66C2; background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .author-link:hover { color: #70B5F9; }

/* --------------------------------------------------------------------------
   4. Top bar and mobile drawer
   The bar spans the full width above the shell, so the brand and search stay
   put whether the sidebar is expanded, railed or closed.
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 70;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem 0 1.125rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.topbar-left { flex: 1 1 auto; }
.topbar .topbar .brand-mark { width: 28px; height: 28px; flex-basis: 28px; font-size: 13px; }
.topbar .search-trigger { width: 15.5rem; }
.topbar-right { flex: 0 0 auto; }

.topbar-menu {
  display: none;
  align-items: center;
  gap: 0.4rem;
  height: 34px;
  padding: 0 0.7rem;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 560;
  cursor: pointer;
}
.topbar-menu svg { width: 15px; height: 15px; }

/* The current section, shown only where the sidebar is hidden. */
.topbar-title {
  display: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(9, 9, 11, 0.45);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease);
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------------------
   5. Main reading column
 -------------------------------------------------------------------------- */

.main {
  grid-column: 2;
  min-width: 0;

  /* The side columns are rarely equal, so a measure centred inside the middle
     column does not sit on the page's centre line. This pads the shorter side
     by the difference, clamped to the slack available, so the correction can
     never eat into the reading width. */
  --centre-shift: calc(var(--toc-w) - var(--lead-w));
  --centre-slack: max(0px, calc(100% - var(--read-w)));
  padding-inline-start: clamp(0px, var(--centre-shift), var(--centre-slack));
  padding-inline-end: clamp(0px, calc(-1 * var(--centre-shift)), var(--centre-slack));
}

.reader { scroll-margin-top: var(--topbar-h); }

.reader {
  max-width: var(--read-w);
  margin: 0 auto;
  padding: 4rem 2.5rem 6rem;
}

.section[hidden] { display: none; }

/* Before JS boots, show only the first section so a JS failure still
   leaves a readable page rather than a wall of every topic at once. */
html:not([data-booted]) .section ~ .section { display: none; }

.section > h1 {
  font-size: var(--t-h1);
  margin-bottom: 0.75rem;
}

.lede {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 2.25rem;
  text-wrap: pretty;
}

.section h2 {
  font-size: var(--t-h2);
  margin: 3rem 0 1rem;
  scroll-margin-top: calc(var(--topbar-h) + 1.25rem);
}

.section h3 {
  font-size: var(--t-h3);
  margin: 2.25rem 0 0.75rem;
  scroll-margin-top: calc(var(--topbar-h) + 1.25rem);
}

.section h4 {
  font-size: var(--t-h4);
  font-weight: 650;
  margin: 1.5rem 0 0.5rem;
}

/* A labelled block heading, e.g. "Why this matters" */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-label);
  font-weight: 670;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--accent);
  margin: 2.75rem 0 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   6. Learning components
 -------------------------------------------------------------------------- */

/* 6.1 One-sentence definition */
.one-sentence {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1rem 1.25rem;
  margin: 0 0 1.75rem;
  font-size: 1.0625rem;
}
.one-sentence p { margin: 0; }
.one-sentence .os-label {
  display: block;
  font-size: var(--t-label);
  font-weight: 670;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}

/* 6.2 Analogy */
.analogy {
  position: relative;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent-soft) 70%, var(--surface)) 0%,
      var(--surface) 62%);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  padding: 1.375rem 1.5rem 1.375rem 1.625rem;
  margin: 2rem 0;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.analogy::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent));
}
.analogy-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-label);
  font-weight: 670;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.analogy-label svg { width: 15px; height: 15px; }
.analogy p {
  font-size: 1.0313rem;
  color: var(--text);
}
.analogy p + p { color: var(--text-2); }
.analogy-link {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--accent-line);
  background: var(--surface);
  font-size: 0.9688rem;
  color: var(--text-2);
  line-height: 1.6;
}
.analogy-link strong { color: var(--accent); font-weight: 660; }

/* 6.3 Callouts */
.callout {
  display: flex;
  gap: 0.875rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 1rem 1.125rem;
  margin: 1.75rem 0;
  font-size: 0.9688rem;
}
.callout-icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 0.18rem;
}
.callout-body { min-width: 0; }
.callout-title {
  display: block;
  font-weight: 660;
  font-size: 1.0156rem;
  letter-spacing: -0.006em;
  margin-bottom: 0.3rem;
}

.callout[data-kind="warn"]   { background: var(--warn-soft); border-color: var(--warn-line); }
.callout[data-kind="warn"]   .callout-icon, .callout[data-kind="warn"] .callout-title { color: var(--warn); }
.callout[data-kind="secure"] { background: var(--info-soft); border-color: var(--info-line); }
.callout[data-kind="secure"] .callout-icon, .callout[data-kind="secure"] .callout-title { color: var(--info); }
.callout[data-kind="note"]   { background: var(--surface-2); border-color: var(--border); }
.callout[data-kind="note"]   .callout-icon, .callout[data-kind="note"] .callout-title { color: var(--text-2); }
.callout[data-kind="key"]    { background: var(--accent-soft); border-color: var(--accent-line); }
.callout[data-kind="key"]    .callout-icon, .callout[data-kind="key"] .callout-title { color: var(--accent); }

/* 6.4 Disclosure */
.disclose {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  margin: 1.25rem 0;
  overflow: hidden;
}
.disclose + .disclose { margin-top: -0.5rem; }

.disclose > summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem 0.625rem 1rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 0.9063rem;
  font-weight: 570;
  color: var(--text-2);
  user-select: none;
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary:hover { background: var(--surface-2); color: var(--text); }

.disclose-caret {
  flex-shrink: 0;
  width: 11px; height: 11px;
  color: var(--text-3);
  transition: transform 0.22s var(--ease);
}
.disclose[open] > summary .disclose-caret { transform: rotate(90deg); }
.disclose[open] > summary { color: var(--text); border-bottom: 1px solid var(--border); }

.disclose-tag {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 0.6rem;
  font-size: 0.6563rem;
  font-weight: 640;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
}
.disclose[open] > summary .disclose-tag {
  background: var(--surface);
  border-color: var(--border-strong);
}

.disclose-body { padding: 1.125rem 1.125rem 1.25rem; }
.disclose-body > :first-child { margin-top: 0; }
.disclose-body > :last-child { margin-bottom: 0; }

/* Variants */
.disclose[data-kind="mistake"] > summary { color: var(--bad); }
.disclose[data-kind="mistake"][open] > summary { background: var(--bad-soft); border-bottom-color: var(--bad-line); }
.disclose[data-kind="deep"] > summary { color: var(--info); }
.disclose[data-kind="deep"][open] > summary { background: var(--info-soft); border-bottom-color: var(--info-line); }

/* 6.5 Code block */
.codeblock {
  margin: 1.5rem 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--code-bg);
  box-shadow: var(--shadow-1);
}
.codeblock-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem 0.4rem 0.875rem;
  background: var(--code-head);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.codeblock-lang {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--code-dim);
  font-weight: 600;
}
.copy-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--r-sm);
  color: var(--code-dim);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 570;
  cursor: pointer;
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.copy-btn:hover { background: rgba(255, 255, 255, 0.11); color: var(--code-fg); }
.copy-btn svg { width: 12px; height: 12px; }
.copy-btn[data-copied="true"] { color: var(--code-str); border-color: rgba(184, 217, 160, 0.35); }
.copy-btn:focus-visible { outline-color: var(--code-fg); }

.codeblock pre {
  margin: 0;
  padding: 0.875rem 1rem;
  overflow-x: auto;
  font-family: var(--f-mono);
  font-size: var(--t-code);
  line-height: 1.65;
  color: var(--code-fg);
  tab-size: 2;
}
.codeblock pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre;
}

/* Prompt-style block (something you type to Claude) */
.codeblock[data-lang="prompt"] { background: var(--surface); border-color: var(--border-strong); }
.codeblock[data-lang="prompt"] .codeblock-head {
  background: var(--surface-2);
  border-bottom-color: var(--border);
}
.codeblock[data-lang="prompt"] .codeblock-lang { color: var(--text-3); }
.codeblock[data-lang="prompt"] .copy-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-3);
}
.codeblock[data-lang="prompt"] .copy-btn:hover { color: var(--text); background: var(--surface-3); }
.codeblock[data-lang="prompt"] pre { color: var(--text); }
.codeblock[data-lang="prompt"] pre code { white-space: pre-wrap; }

/* Token colours */
.tok-comment { color: var(--code-dim); font-style: italic; }
.tok-string  { color: var(--code-str); }
.tok-cmd     { color: var(--code-key); font-weight: 600; }
.tok-flag    { color: var(--code-flag); }
.tok-num     { color: var(--code-num); }
.tok-punct   { color: var(--code-punct); }
.tok-path    { color: var(--code-fg); }
.tok-head    { color: var(--code-key); font-weight: 700; }
.tok-bullet  { color: var(--code-flag); }
.tok-inline  { color: var(--code-str); }
.tok-keyword { color: var(--code-key); font-weight: 650; }
.tok-fn      { color: var(--code-flag); }
.tok-prop    { color: #D8C49B; }
.tok-type    { color: var(--code-num); }
.tok-literal { color: #C8A8E9; font-weight: 600; }

/* The same panel, but following prose or a list rather than a code block,
   so it needs its own top edge instead of butting onto one. */
.note-after-list {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1.125rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 0.9063rem;
  color: var(--text-2);
}
.note-after-list > :last-child { margin-bottom: 0; }

/* Explanation under a code block */
.code-note {
  margin: -0.75rem 0 1.5rem;
  padding: 0.875rem 1.125rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: 0.9063rem;
  color: var(--text-2);
}
.code-note > :last-child { margin-bottom: 0; }

/* 6.6 Command breakdown */
.cmd-parts {
  list-style: none;
  margin: 1.25rem 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.cmd-parts li {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0.7rem 1rem;
  font-size: 0.9375rem;
  border-top: 1px solid var(--border);
}
.cmd-parts li:first-child { border-top: 0; }
.cmd-parts .cmd-token {
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  color: var(--accent);
  font-weight: 600;
  word-break: break-all;
  padding-top: 0.1rem;
}
.cmd-parts .cmd-desc { color: var(--text-2); }

/* 6.7 Flow diagram
   Steps are auto-numbered. Connectors are drawn with a real arrowhead so the
   direction of travel is visible at a glance in both themes. */
.flow {
  counter-reset: flowstep;
  margin: 2rem 0;
  padding: 1.5rem 1.375rem 1.75rem;
  background:
    radial-gradient(circle at 1px 1px, var(--dg-dot) 1px, transparent 0) 0 0 / 18px 18px,
    var(--dg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-1);
}

.flow-caption {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-label);
  font-weight: 670;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 1.375rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-strong);
}
.flow-caption::before {
  content: "";
  width: 14px; height: 2px;
  border-radius: 2px;
  background: var(--text-2);
  flex-shrink: 0;
}

.flow-step {
  counter-increment: flowstep;
  position: relative;
  width: 100%;
  max-width: 27rem;
  padding: 0.8rem 2.75rem;
  text-align: center;
  border: 1.5px solid var(--dg-step-line);
  border-radius: var(--r-md);
  background: var(--dg-step-bg);
  color: var(--dg-step-text);
  font-size: 0.9688rem;
  font-weight: 570;
  line-height: 1.45;
  box-shadow: var(--shadow-1);
}
.flow-step::before {
  content: counter(flowstep);
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--dg-step-text);
  color: var(--dg-index);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}
/* Single-line steps read better without the sub-label gutter imbalance. */
.flow-step small { text-align: center; }
.flow-step small {
  display: block;
  font-weight: 450;
  font-size: 0.8438rem;
  color: var(--text-3);
  margin-top: 0.15rem;
  line-height: 1.5;
}
.flow-step code {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-color: color-mix(in srgb, currentColor 22%, transparent);
  color: inherit;
}

/* Role colouring */
.flow-step[data-tone="you"] {
  background: var(--dg-you-bg);
  border-color: var(--dg-you-line);
  color: var(--dg-you-text);
}
.flow-step[data-tone="you"]::before { background: var(--dg-you-text); }

.flow-step[data-tone="claude"] {
  background: var(--dg-ai-bg);
  border-color: var(--dg-ai-line);
  color: var(--dg-ai-text);
}
.flow-step[data-tone="claude"]::before { background: var(--dg-ai-text); }

.flow-step[data-tone="check"] {
  background: var(--dg-ok-bg);
  border-color: var(--dg-ok-line);
  color: var(--dg-ok-text);
}
.flow-step[data-tone="check"]::before { background: var(--dg-ok-text); }

.flow-step[data-tone] small { color: currentColor; opacity: 0.85; }

/* Connector with a real arrowhead */
.flow-arrow {
  width: 26px;
  height: 30px;
  flex-shrink: 0;
  display: block;
  position: relative;
}
.flow-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 9px;
  width: 2.5px;
  margin-left: -1.25px;
  border-radius: 2px;
  background: var(--dg-line);
}
.flow-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 10px; height: 10px;
  margin-left: -5px;
  border-right: 2.5px solid var(--dg-line);
  border-bottom: 2.5px solid var(--dg-line);
  border-bottom-right-radius: 2px;
  transform: rotate(45deg);
}

/* Branching row */
.flow-branch {
  display: flex;
  gap: 0.625rem;
  width: 100%;
  max-width: 34rem;
  flex-wrap: wrap;
  justify-content: center;
}
.flow-branch + .flow-branch { margin-top: 0.625rem; }

.flow-branch .flow-step {
  flex: 1 1 9.5rem;
  max-width: none;
  padding: 0.7rem 0.875rem;
  text-align: center;
  font-size: 0.9063rem;
}
.flow-branch .flow-step::before { display: none; }
.flow-branch .flow-step small { text-align: center; }

/* A flow used purely as a caution (the "what to avoid" pattern) */
.flow[data-tone="avoid"] {
  border-color: var(--bad-line);
  background:
    radial-gradient(circle at 1px 1px, var(--bad-line) 1px, transparent 0) 0 0 / 18px 18px,
    var(--bad-soft);
}
.flow[data-tone="avoid"] .flow-caption { color: var(--bad); border-bottom-color: var(--bad-line); }
.flow[data-tone="avoid"] .flow-caption::before { background: var(--bad); opacity: 1; }
.flow[data-tone="avoid"] .flow-arrow::before,
.flow[data-tone="avoid"] .flow-arrow::after { background: var(--bad); border-color: var(--bad); }
.flow[data-tone="avoid"] .flow-arrow::before { background: var(--bad); }

/* 6.8 Mental model card */
.mental-model {
  margin: 2rem 0;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  padding: 1.375rem 1.5rem;
}
.mm-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.6875rem;
  font-weight: 680;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.875rem;
}
.mm-label svg { width: 13px; height: 13px; }
.mm-equation {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.9375rem;
}
.mm-term {
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.875rem;
  color: var(--text);
  font-weight: 550;
  text-align: center;
}
.mm-op {
  text-align: center;
  color: var(--accent);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
}
.mm-result {
  margin-top: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 620;
  text-align: center;
}

/* 6.9 Quick check */
.quickcheck {
  margin: 2rem 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 1.25rem 1.375rem;
  box-shadow: var(--shadow-1);
}
.qc-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.6875rem;
  font-weight: 660;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.6rem;
}
.qc-label svg { width: 13px; height: 13px; }
.qc-q { font-weight: 570; margin-bottom: 0.875rem; }
.qc-options { display: flex; flex-direction: column; gap: 0.4rem; }
.qc-option {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.14s var(--ease), background 0.14s var(--ease);
}
.qc-option:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-2); }
.qc-option:disabled { cursor: default; }
.qc-key {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 650;
  color: var(--text-3);
}
.qc-option[data-state="correct"] {
  border-color: var(--ok-line);
  background: var(--ok-soft);
}
.qc-option[data-state="correct"] .qc-key {
  border-color: var(--ok);
  background: var(--ok);
  color: var(--surface);
}
.qc-option[data-state="wrong"] {
  border-color: var(--bad-line);
  background: var(--bad-soft);
}
.qc-option[data-state="wrong"] .qc-key { border-color: var(--bad); color: var(--bad); }

.qc-feedback {
  margin-top: 0.875rem;
  padding: 0.8rem 1rem;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.qc-feedback[hidden] { display: none; }
.qc-feedback strong { display: block; margin-bottom: 0.2rem; }
.qc-feedback[data-result="correct"] { border-color: var(--ok-line); background: var(--ok-soft); }
.qc-feedback[data-result="correct"] strong { color: var(--ok); }
.qc-feedback[data-result="wrong"] { border-color: var(--warn-line); background: var(--warn-soft); }
.qc-feedback[data-result="wrong"] strong { color: var(--warn); }

/* 6.10 Try it yourself */
.tryit {
  margin: 2rem 0;
  border: 1px solid var(--ok-line);
  border-left: 3px solid var(--ok);
  border-radius: var(--r-md);
  background: var(--ok-soft);
  padding: 1.125rem 1.25rem;
}
.tryit-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.6875rem;
  font-weight: 660;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ok);
  margin-bottom: 0.6rem;
}
.tryit-label svg { width: 13px; height: 13px; }
.tryit .codeblock { margin: 1rem 0; }
.tryit > :last-child { margin-bottom: 0; }

/* 6.11 Comparison table */
.table-wrap {
  margin: 1.75rem 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
th, td {
  text-align: left;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
thead th {
  background: var(--surface-2);
  font-size: 0.6875rem;
  font-weight: 660;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td:first-child { color: var(--text); font-weight: 550; }
td code { white-space: nowrap; }

/* 6.12 Glossary term */
.term {
  font: inherit;
  background: none;
  border: 0;
  padding: 0 0 1px;
  color: inherit;
  cursor: help;
  text-align: left;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 52%, transparent);
  border-radius: 2px;
  transition: background 0.13s var(--ease), border-color 0.13s var(--ease), color 0.13s var(--ease);
}
.term:hover,
.term:focus-visible,
.term[aria-expanded="true"] {
  background: var(--accent-soft);
  border-bottom-color: var(--accent);
  border-bottom-style: solid;
  color: var(--accent);
}

.tip {
  position: absolute;
  z-index: 120;
  max-width: 20rem;
  padding: 0.75rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-2);
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
  transition: opacity 0.14s var(--ease), transform 0.14s var(--ease);
}
.tip[data-open="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tip-term {
  display: block;
  color: var(--text);
  font-weight: 640;
  font-size: 0.8125rem;
  margin-bottom: 0.2rem;
}

/* 6.14 Related links */
.related {
  margin: 2.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.related-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: border-color 0.14s var(--ease), color 0.14s var(--ease);
}
.related-chip:hover { border-color: var(--accent-line); color: var(--accent); }
.related-chip::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--border-strong);
}
.related-chip:hover::before { background: var(--accent); }

/* --------------------------------------------------------------------------
   7. Section footer: mark understood + prev/next
 -------------------------------------------------------------------------- */

.section-foot {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

.mark-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  background: var(--surface);
  color: var(--text-2);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 560;
  cursor: pointer;
  transition: all 0.16s var(--ease);
}
.mark-btn:hover { border-color: var(--ok); color: var(--ok); }
.mark-btn svg { width: 14px; height: 14px; }
.mark-btn[aria-pressed="true"] {
  background: var(--ok-soft);
  border-color: var(--ok-line);
  color: var(--ok);
}

.pager {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.pager-link {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  min-width: 0;
}
.pager-link:hover { border-color: var(--accent-line); box-shadow: var(--shadow-1); }
.pager-dir {
  font-size: 0.6875rem;
  font-weight: 640;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pager-name {
  font-size: 0.9375rem;
  font-weight: 570;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.pager-link:hover .pager-name { color: var(--accent); }
.pager-link[data-dir="next"] { text-align: right; }
.pager-slot-empty { flex: 1 1 0; }

/* --------------------------------------------------------------------------
   8. Home / orientation hero
 -------------------------------------------------------------------------- */

.hero { margin-bottom: 2.5rem; }
.hero h1 { font-size: 2.5rem; margin-bottom: 0.875rem; }
.hero-sub {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 34rem;
  margin-bottom: 1.75rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 580;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-ghost {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-2);
}
.btn-ghost:hover { border-color: var(--text-3); color: var(--text); }

.hero-meta {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--text-3);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.hero-meta svg { width: 13px; height: 13px; opacity: 0.75; }

/* Path chooser */
.paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}
.path-card {
  display: block;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.path-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-1); }
.path-who {
  font-size: 0.9375rem;
  font-weight: 610;
  color: var(--text);
  margin-bottom: 0.15rem;
}
.path-card:hover .path-who { color: var(--accent); }
.path-route {
  font-size: 0.8125rem;
  color: var(--text-3);
  font-family: var(--f-mono);
}

/* --------------------------------------------------------------------------
   9. Search overlay
 -------------------------------------------------------------------------- */

.search-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  padding: 8vh 1rem 1rem;
  justify-content: center;
  align-items: flex-start;
}
.search-modal[data-open="true"] { display: flex; }

.search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 11, 0.42);
 -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.search-panel {
  position: relative;
  width: min(40rem, 100%);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.search-field svg { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
.search-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  outline: none;
}
.search-field input::placeholder { color: var(--text-3); }

.search-results {
  overflow-y: auto;
  padding: 0.375rem;
  list-style: none;
  margin: 0;
}
.search-results li { margin: 0; }

.search-hit {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
.search-hit:hover, .search-hit[data-active="true"] { background: var(--surface-2); }
.search-hit[data-active="true"] { box-shadow: inset 2px 0 0 var(--accent); }

.hit-group {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 620;
}
.hit-title { font-size: 0.9375rem; font-weight: 560; color: var(--text); }
.hit-snippet {
  font-size: 0.8125rem;
  color: var(--text-3);
  overflow: hidden;
  display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
  line-clamp: 2;
}
.hit-snippet mark, .hit-title mark {
  background: var(--accent-line);
  color: var(--text);
  border-radius: 2px;
  padding: 0 1px;
}

.search-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-3);
  font-size: 0.9375rem;
}

.search-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 0.5rem 0.875rem;
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--text-3);
  background: var(--surface-2);
}
.search-foot span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Flash highlight after search jump */
@keyframes flash {
  0%   { background: var(--accent-line); }
  100% { background: transparent; }
}
.flash { animation: flash 1.6s var(--ease); border-radius: var(--r-sm); }

/* --------------------------------------------------------------------------
   10. Toast
 -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 1rem);
  z-index: 200;
  padding: 0.55rem 1rem;
  border-radius: 99px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.8438rem;
  font-weight: 550;
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.toast[data-open="true"] { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   11. Cheat sheet layout
 -------------------------------------------------------------------------- */

.sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.875rem;
  margin: 1.5rem 0;
}
.sheet-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 1rem 1.125rem;
}
.sheet-card h3 {
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}
.sheet-card ul { margin: 0; padding-left: 1.1em; font-size: 0.9063rem; }
.sheet-card li { margin: 0.35em 0; color: var(--text-2); }
.sheet-card li strong { color: var(--text); }
.sheet-card code { font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
   12. Responsive
 -------------------------------------------------------------------------- */

@media (max-width: 1240px) {
  .app { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
  .app  .toc { display: none; }
}

@media (max-width: 1100px) {
  :root { --nav-w: 262px; }
  .reader { padding: 3rem 2rem 5rem; }
}

@media (max-width: 900px) {
  /* The sidebar is a drawer here, so it is out of the flow entirely and the
     measure is already centred. */
  .app { --lead-w: 0px; --toc-w: 0px; grid-template-columns: 1fr; }
  .main { padding-inline: 0; }
  [data-collapsed="true"] .sidebar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border-right-color: var(--border);
  }
  .app
  .topbar { padding: 0 0.75rem; gap: 0.625rem; }
  .topbar-menu { display: inline-flex; }
  .topbar-title { display: block; }
  .topbar .brand-text { display: none; }
  .topbar .hub-link,
  .topbar-rule { display: none; }
  .collapse-btn { display: none; }
  .topbar-right .author-site,
  .topbar-right .author-link { display: none; }
  .topbar .search-trigger { width: 36px; padding: 0; justify-content: center; }
  .topbar .search-trigger-label,
  .topbar .search-trigger .kbd { display: none; }
  .guide-menu { left: auto; right: 0; }

  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: min(320px, 86vw);
    height: 100dvh;
    transform: translateX(-102%);
    transition: transform 0.26s var(--ease);
    box-shadow: var(--shadow-3);
    z-index: 80;
  }
  .sidebar[data-open="true"] { transform: translateX(0); }

  .main { grid-column: 1; }
  .reader { padding: 2rem 1.25rem 4rem; }
  .tab-panel { padding: 1rem 1.125rem; }

  .hero h1 { font-size: 2rem; }
  .section > h1 { font-size: 1.875rem; }
  .section h2 { font-size: 1.5rem; margin-top: 2.5rem; }
  .lede, .hero-sub { font-size: 1.0625rem; }

  .pager { flex-direction: column; }
  .pager-link[data-dir="next"] { text-align: left; }
  .pager-slot-empty { display: none; }

  .cmd-parts li { grid-template-columns: 1fr; gap: 0.15rem; }

  .search-modal { padding: 4vh 0.75rem 0.75rem; }
  .search-panel { max-height: 82vh; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  /* Two levels is enough on a phone; the h1 repeats the last crumb anyway. */
  .crumb-group,
  .crumb-group + .crumb-sep { display: none; }
  .reader { padding: 1.5rem 1rem 3.5rem; }
  .hero h1 { font-size: 1.75rem; }
  .section > h1 { font-size: 1.625rem; }
  .flow { padding: 1.125rem 0.75rem; }
  .mm-equation { font-size: 0.875rem; }
  .search-foot { display: none; }
}

/* --------------------------------------------------------------------------
   14. Collapsed sidebar
   Collapse means gone: the column goes to zero and the reading area takes
   the space. No rail, no half state, nothing left to clip.

   The previous version kept a 56px rail and hid its labels through one long
   comma-separated selector. A later edit left a doubled prefix and a dangling
   selector in that list, and because a single invalid selector invalidates
   the whole rule in CSS, every label came back at once inside a 56px column.
   A single-property collapse cannot fail that way.
   -------------------------------------------------------------------------- */

.app { transition: grid-template-columns 0.28s var(--ease); }
.app[data-collapsed="true"] { --lead-w: 0px; }

.sidebar {
  overflow: hidden;
  transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease);
}

[data-collapsed="true"] .sidebar {
  opacity: 0;
  border-right-color: transparent;
  pointer-events: none;
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   15. Return-to-previous trail
 -------------------------------------------------------------------------- */

.trail {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  border: 1px dashed var(--accent-line);
  background: var(--accent-soft);
  border-radius: 99px;
  font-size: 0.875rem;
  animation: trail-in 0.28s var(--ease);
}
.trail[data-show="true"] { display: inline-flex; }

@keyframes trail-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.trail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 580;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
}
.trail-back:hover { color: var(--accent-hover); text-decoration: underline; }
.trail-back svg { width: 13px; height: 13px; flex-shrink: 0; }

.trail-dismiss {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1;
}
.trail-dismiss:hover { background: var(--surface); color: var(--text); }

/* --------------------------------------------------------------------------
   16. Glossary
 -------------------------------------------------------------------------- */

.glossary-tools { margin: 1.75rem 0 1.25rem; }

.glossary-search {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.glossary-search:focus-within { border-color: var(--accent); }
.glossary-search > span[aria-hidden] { display: inline-flex; flex-shrink: 0; }
.glossary-search svg { width: 15px; height: 15px; color: var(--text-3); }
.glossary-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 0.9688rem;
  color: var(--text);
}
.glossary-count {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.glossary-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.75rem;
}
.gcat {
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface);
  color: var(--text-2);
  font-family: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.14s var(--ease);
}
.gcat:hover { border-color: var(--border-strong); color: var(--text); }
.gcat[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.glossary-list { margin-top: 0.5rem; }

.glossary-group { margin-top: 2rem; }
.glossary-group[hidden] { display: none; }
.glossary-group-title {
  font-size: var(--t-label);
  font-weight: 670;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
}

.gterm {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 1.5rem;
}
.gterm[hidden] { display: none; }
.gterm:last-child { border-bottom: 0; }

.gterm-name {
  font-size: 1rem;
  font-weight: 640;
  color: var(--text);
  margin-bottom: 0.2rem;
}
.gterm-name code { font-size: 0.9em; }
.gterm-plain { color: var(--text-2); font-size: 0.9688rem; margin-bottom: 0.3rem; }
.gterm-tech {
  font-size: 0.9063rem;
  color: var(--text-3);
  padding-left: 0.875rem;
  border-left: 2px solid var(--border-strong);
}
.gterm-tech::before {
  content: "More precisely: ";
  font-weight: 600;
  color: var(--text-2);
}
.gterm mark {
  background: var(--accent-line);
  color: var(--text);
  border-radius: 2px;
  padding: 0 1px;
}

.glossary-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text-3);
}
.glossary-empty[hidden] { display: none; }

/* Glossary tooltip gets a second definition line */
.tip-tech {
  display: block;
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-3);
}
.tip-more {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.75rem;
  color: var(--text-3);
}

/* On small screens the sidebar is a drawer, so the rail is switched off
   entirely and every label returns. */
@media (max-width: 900px) {
  .app                              }

/* --------------------------------------------------------------------------
   17. "Ten things to remember" - numbered cards linking to their section
 -------------------------------------------------------------------------- */

.remember {
  counter-reset: remember;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.remember li { margin: 0; display: flex; }

.remember-card {
  counter-increment: remember;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  width: 100%;
  padding: 1rem 1.125rem 1rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-decoration: none;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease),
              transform 0.16s var(--ease), background 0.16s var(--ease);
}
.remember-card:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
  color: var(--text-2);
}

.remember-card::before {
  content: counter(remember, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--accent);
  opacity: 0.55;
  transition: opacity 0.16s var(--ease);
  font-variant-numeric: tabular-nums;
}
.remember-card:hover::before { opacity: 1; }

.remember-body { min-width: 0; }
.remember-text { display: block; }
.remember-text strong { color: var(--text); font-weight: 620; }

.remember-go {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color 0.16s var(--ease);
}
.remember-card:hover .remember-go { color: var(--accent); }
.remember-go::after {
  content: "\2192";
  transition: transform 0.16s var(--ease);
}
.remember-card:hover .remember-go::after { transform: translateX(2px); }

@media (max-width: 560px) {
  .remember { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   19. On This Page
   A third column listing the current section's headings, with the one you
   are reading highlighted. Hidden below 1200px, where the space is better
   spent on the reading measure.
   -------------------------------------------------------------------------- */

.toc {
  grid-column: 3;
  position: sticky;
  top: var(--topbar-h);
  align-self: start;
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4rem 1.5rem 3rem 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.toc::-webkit-scrollbar { width: 8px; }
.toc::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
  border: 2px solid var(--bg);
}
.toc::-webkit-scrollbar-track { background: transparent; }

.toc[hidden] { display: none; }

.toc-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 680;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.875rem;
  padding-left: 0.75rem;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--border);
}
.toc-list li { margin: 0; }

.toc-link {
  display: block;
  padding: 0.3rem 0.75rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--text-3);
  font-size: 0.8125rem;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease);
}
.toc-link:hover { color: var(--text); }
.toc-link[data-level="3"] { padding-left: 1.5rem; font-size: 0.7813rem; }

.toc-link[aria-current="true"] {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 570;
}

/* Progress through the section, shown under the list. */
.toc-foot {
  margin-top: 1.25rem;
  padding-top: 0.875rem;
  padding-left: 0.75rem;
  border-top: 1px solid var(--border);
}
.toc-top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 560;
  color: var(--text-3);
  cursor: pointer;
}
.toc-top:hover { color: var(--accent); }
.toc-top svg { width: 12px; height: 12px; }

/* --------------------------------------------------------------------------
   20. Tabs
   For the same instruction expressed differently per platform or surface.
   Only one panel is in the DOM flow at a time, so the page never jumps.
   -------------------------------------------------------------------------- */

.tabs {
  margin: 1.75rem 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.tabs-list {
  display: flex;
  gap: 0.125rem;
  padding: 0.375rem 0.375rem 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-list::-webkit-scrollbar { display: none; }

.tab-btn {
  flex: 0 0 auto;
  position: relative;
  padding: 0.5rem 0.875rem;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: none;
  color: var(--text-3);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 560;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.14s var(--ease), background 0.14s var(--ease);
}
.tab-btn:hover { color: var(--text); }

.tab-btn[aria-selected="true"] {
  color: var(--accent);
  background: var(--surface);
  border-color: var(--border-strong);
  font-weight: 620;
}
.tab-btn[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--surface);
}

.tab-panel { padding: 1.25rem 1.375rem; }
.tab-panel[hidden] { display: none; }
.tab-panel > :first-child { margin-top: 0; }
.tab-panel > :last-child { margin-bottom: 0; }
.tab-panel .codeblock:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   21. Guide switcher
   Every reference docs site has a section switcher in the header. Ours moves
   between guides, so a reader never has to return to the landing page to
   change subject.
   -------------------------------------------------------------------------- */

.guide-switch { position: relative; min-width: 0; }

.guide-switch-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.3rem 0.5rem 0.3rem 0.375rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: none;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease);
}
.guide-switch-btn:hover,
.guide-switch-btn[aria-expanded="true"] {
  background: var(--surface-2);
  border-color: var(--border);
}
.guide-switch-btn .brand-text { align-items: flex-start; }
.guide-switch-caret {
  flex: 0 0 12px;
  width: 12px; height: 12px;
  color: var(--text-3);
  transition: transform 0.2s var(--ease);
}
.guide-switch-btn[aria-expanded="true"] .guide-switch-caret { transform: rotate(180deg); }

.guide-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 90;
  width: 21rem;
  max-width: calc(100vw - 2rem);
  max-height: min(28rem, calc(100vh - var(--topbar-h) - 2rem));
  overflow-y: auto;
  padding: 0.375rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
}
.guide-menu[hidden] { display: none; }

.guide-menu-head {
  padding: 0.5rem 0.625rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 680;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
}

.guide-menu-group { padding: 0.25rem 0 0.125rem; }
.guide-menu-group + .guide-menu-group {
  margin-top: 0.25rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}
.guide-menu-theme {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.625rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 660;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.guide-menu-theme::before {
  content: "";
  width: 12px; height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.guide-menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9063rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
a.guide-menu-item:hover { background: var(--surface-2); color: var(--text); }
.guide-menu-item[aria-disabled="true"] { cursor: default; color: var(--text-3); }

/* Marked, not offered. Nothing to click, so nothing that looks clickable. */
.guide-menu-item[aria-current="true"] {
  cursor: default;
  background: var(--accent-soft);
}

.guide-menu-name { flex: 1 1 auto; min-width: 0; }
.guide-menu-item[aria-current="true"] .guide-menu-name { color: var(--accent); font-weight: 600; }

.guide-menu-meta {
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 650;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.guide-menu-soon {
  flex: 0 0 auto;
  font-size: 0.625rem;
  font-weight: 640;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0.1rem 0.45rem;
}
.guide-menu-tick { flex: 0 0 14px; width: 14px; height: 14px; color: var(--accent); }

.guide-menu-foot {
  margin-top: 0.25rem;
  border-top: 1px solid var(--border);
  padding-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   22. Breadcrumb
   Where you are in the library, above the section title. Follows the docs-site
   convention of living in the content rather than the bar.
   -------------------------------------------------------------------------- */

.crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.375rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-3);
}

/* Carries the topic colour the section kicker used to. */
.crumb-mark {
  flex: 0 0 auto;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-right: 0.15rem;
}

.crumb-hub { font-weight: 550; }
.crumb[hidden] { display: none; }

/* Only the first two segments go anywhere, so only they look clickable. */
.crumb a {
  color: var(--text-3);
  text-decoration: none;
  border-radius: 3px;
}
.crumb a:hover { color: var(--accent); text-decoration: underline; }

.crumb-sep { opacity: 0.5; }

/* The part is a label. It has no page, so it is not offered as one. */
.crumb-group {
  white-space: nowrap;
  cursor: default;
}

.crumb-current {
  color: var(--text-2);
  font-weight: 550;
  cursor: default;
}

/* --------------------------------------------------------------------------
   13. Motion & print
 -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .sidebar, .topbar, .search-modal, .toast, .pager,
  .copy-btn, .mark-btn, .scrim { display: none !important; }
  .app { display: block; }
  .reader { max-width: none; padding: 0; }
  .section[hidden] { display: block !important; }
  .disclose > .disclose-body { display: block !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
}

/* ==========================================================================
   Definition cards
   A section carries one .define block: the crisp definition of the concept
   it teaches, plus one concrete example. The source is hidden where it sits,
   and rendered twice at boot. Once as a recap card closing its Part, once in
   the Definitions and Examples reference section.
   ========================================================================== */

.section > .define { display: none; }

/* --- one entry ---------------------------------------------------------- */

.define-row + .define-row {
  margin-top: 0.9375rem;
  padding-top: 0.9375rem;
  border-top: 1px solid var(--border);
}

.define-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.define-term {
  font-family: var(--f-mono);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--accent);
}

.define-jump {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-inline-start: auto;
  border-radius: var(--r-sm);
  color: var(--text-3);
  opacity: 0;
  transition: opacity 0.14s var(--ease), color 0.14s var(--ease),
              background 0.14s var(--ease);
}
.define-jump svg { width: 13px; height: 13px; }
.define-row:hover .define-jump,
.define-jump:focus-visible { opacity: 1; }
.define-jump:hover { color: var(--accent); background: var(--surface-3); }

p.define-what {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text);
}

p.define-eg {
  position: relative;
  margin: 0.375rem 0 0;
  padding-inline-start: 1.125rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-2);
}
p.define-eg::before {
  content: "\2192";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--accent);
  font-weight: 600;
}
p.define-eg code {
  font-size: 0.8125rem;
}

/* --- the recap card closing a Part -------------------------------------- */

.part-card {
  margin: 2.25rem 0 0;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.part-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6875rem 1.25rem;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-line);
}

.part-card-label {
  font-size: var(--t-label);
  font-weight: 670;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--accent);
}

.part-card-count {
  margin-inline-start: auto;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 620;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.part-card-body { padding: 1.125rem 1.25rem 1.25rem; }

/* --- the reference section ---------------------------------------------- */

.define-group { margin-bottom: 2.5rem; }

.define-group h2 {
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  padding-bottom: 0.5rem;
  margin-bottom: 1.125rem;
  border-bottom: 1px solid var(--border);
}

.define-group .define-row + .define-row {
  margin-top: 1rem;
  padding-top: 1rem;
}

.define-count {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .part-card-head { padding: 0.625rem 1rem; }
  .part-card-body { padding: 1rem; }
  .define-jump { opacity: 1; }
}

@media print {
  .define-jump { display: none; }
  .part-card { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  .define-jump { transition: none; }
}