/* ════════════════════════════════════════════════════════════
   PM Field Kit
   Tokens → layout → components → responsive → print
   ════════════════════════════════════════════════════════════ */

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

:root {
  color-scheme: light;

  --bg:            #F8FAFC;
  --surface:       #FFFFFF;
  --surface-2:     #F1F5F9;
  --border:        #E2E8F0;
  --border-strong: #CBD5E1;

  --text:        #0F172A;
  --text-body:   #1E293B;
  --text-muted:  #5A6B84;
  --text-faint:  #64748B;
  --heading:     #0F1F3D;
  --rule:        #0F1F3D;

  --accent:        #2563EB;
  --accent-hover:  #1D4ED8;
  --accent-contrast:#FFFFFF;
  --accent-soft:   #EFF6FF;
  --accent-line:   #DBEAFE;

  --sidebar-bg:     #0F1F3D;
  --sidebar-bg-2:   #1B3160;
  --sidebar-border: #243D72;
  --sidebar-text:   #A8B6CC;

  --code-bg:     #0F1F3D;
  --code-bar:    #1B3160;
  --code-border: #243D72;
  --code-text:   #D3DCE8;
  --code-label:  #93C5FD;
  --code-field:  #FCD34D;
  --code-note:   #8FA0B8;

  --amber:        #B45309;
  --amber-bg:     #FFFBEB;
  --amber-line:   #FDE68A;
  --star:         #D97706;
  --success:      #047857;
  --mark-bg:      #FEF08A;
  --mark-text:    #422006;

  --shadow-sm: 0 1px 2px rgba(15, 31, 61, .06);
  --shadow-md: 0 4px 16px rgba(15, 31, 61, .10);
  --shadow-lg: 0 16px 48px rgba(15, 31, 61, .22);

  --sidebar-w:  280px;
  --content-max: 760px;
  /* Kept in sync with the real bar by app.js; this is its resting desktop
     height, used until the first measurement lands. */
  --header-h:   54px;
  --radius:     10px;
  --radius-sm:  6px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0A111F;
  --surface:       #111A2D;
  --surface-2:     #17223A;
  --border:        #243252;
  --border-strong: #32446B;

  --text:        #EDF2FB;
  --text-body:   #C9D5E8;
  --text-muted:  #97A6BF;
  --text-faint:  #7C8BA6;
  --heading:     #EDF2FB;
  --rule:        #32446B;

  --accent:        #6BA5FB;
  --accent-hover:  #93BDFC;
  --accent-contrast:#08101F;
  --accent-soft:   rgba(107, 165, 251, .10);
  --accent-line:   rgba(107, 165, 251, .30);

  --sidebar-bg:     #070F1C;
  --sidebar-bg-2:   #142441;
  --sidebar-border: #1E3157;
  --sidebar-text:   #9DACC4;

  --code-bg:     #060D1A;
  --code-bar:    #101B30;
  --code-border: #1E2F4E;
  --code-text:   #C9D5E8;
  --code-label:  #93C5FD;
  --code-field:  #FBBF24;
  --code-note:   #8093AE;

  --amber:        #FBBF24;
  --amber-bg:     rgba(251, 191, 36, .08);
  --amber-line:   rgba(251, 191, 36, .28);
  --star:         #FBBF24;
  --success:      #34D399;
  --mark-bg:      #7C5E06;
  --mark-text:    #FEF3C7;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);
}

/* Follow the OS when the visitor has not chosen a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            #0A111F;
    --surface:       #111A2D;
    --surface-2:     #17223A;
    --border:        #243252;
    --border-strong: #32446B;

    --text:        #EDF2FB;
    --text-body:   #C9D5E8;
    --text-muted:  #97A6BF;
    --text-faint:  #7C8BA6;
    --heading:     #EDF2FB;
    --rule:        #32446B;

    --accent:        #6BA5FB;
    --accent-hover:  #93BDFC;
    --accent-contrast:#08101F;
    --accent-soft:   rgba(107, 165, 251, .10);
    --accent-line:   rgba(107, 165, 251, .30);

    --sidebar-bg:     #070F1C;
    --sidebar-bg-2:   #142441;
    --sidebar-border: #1E3157;
    --sidebar-text:   #9DACC4;

    --code-bg:     #060D1A;
    --code-bar:    #101B30;
    --code-border: #1E2F4E;
    --code-text:   #C9D5E8;
    --code-label:  #93C5FD;
    --code-field:  #FBBF24;
    --code-note:   #8093AE;

    --amber:        #FBBF24;
    --amber-bg:     rgba(251, 191, 36, .08);
    --amber-line:   rgba(251, 191, 36, .28);
    --star:         #FBBF24;
    --success:      #34D399;
    --mark-bg:      #7C5E06;
    --mark-text:    #FEF3C7;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);
  }
}

/* ── BASE ─────────────────────────────────────────────────── */
html { height: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-body);
  background: var(--bg);
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

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

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 8px; }

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.link-btn:hover { color: var(--accent-hover); }

/* ── SIDEBAR ──────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 60;
}

#sidebar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 20px 16px 16px 20px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

/* Mark + name + tagline. The mark is an <img> so the one SVG serves the
   sidebar, the masthead and the 404 page from a single cached request. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}
.brand-mark {
  flex-shrink: 0;
  width: 27px;
  height: 33px;
  display: block;
}

.brand-name {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: .02em;
  line-height: 1.3;
}
.brand-sub {
  font-size: 11px;
  color: var(--sidebar-text);
  margin-top: 2px;
}

.icon-btn.drawer-close { display: none; color: var(--sidebar-text); border-color: var(--sidebar-border); }
.drawer-close:hover { color: #FFFFFF; background: var(--sidebar-bg-2); }

#nav {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-border) transparent;
}

.nav-section { padding: 4px 0; }

.nav-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--sidebar-text);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 20px 4px;
}

.nav-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 16px 6px 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sidebar-text);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
  line-height: 1.4;
}
.nav-item:hover { color: #FFFFFF; background: var(--sidebar-bg-2); }
.nav-item.active {
  color: #FFFFFF;
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.nav-item.nav-empty { opacity: .45; }

.nav-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--sidebar-text);
  background: var(--sidebar-bg-2);
  border-radius: 20px;
  padding: 1px 7px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.nav-item.active .nav-count,
.nav-item:hover .nav-count { color: #FFFFFF; }

#scrim {
  position: fixed;
  inset: 0;
  background: rgba(7, 15, 28, .55);
  z-index: 55;
  border: 0;
  padding: 0;
}
#scrim[hidden] { display: none; }

/* ── CONTENT COLUMN ───────────────────────────────────────── */
#content {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── HEADER ───────────────────────────────────────────────────
   One header for every view. It overlays the top of the reading pane
   instead of taking a row in the flex column, and #main reserves its
   height as padding (--header-h). That padding stays put whether the bar
   is shown or hidden, so sliding it away moves nothing else on the page:
   an earlier attempt collapsed the bar's height, which resized the scroll
   container mid-scroll and fed fresh scroll events straight back into the
   rule that had just hidden it.

   No `transform` in the resting state on purpose — any transform makes the
   header a containing block for the position:fixed settings panel inside
   it. The panel is only ever open while the header is shown. */
#toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  z-index: 20;
  transition: transform .24s ease, box-shadow .24s ease;
}
body.header-hidden #toolbar {
  transform: translateY(-100%);
  box-shadow: none;
}
#toolbar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
}

/* Names the page inside the bar itself, so the header reads the same in a
   section as it does on the way in. Hidden on a wide screen only because
   the sidebar is a permanent column there and already carries the name on
   this same row — printing it twice, 70px apart, reads as a mistake.
   Shrinks and ellipsises before it will push anything onto a second row. */
.toolbar-brand {
  display: none;
  flex: 0 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--heading);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toolbar-brand:hover { color: var(--accent); }

.icon-btn.menu-btn { display: none; }

.toolbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ghost-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.ghost-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 6px;
  color: var(--text-muted);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s, background .15s, border-color .15s;
}
.icon-btn:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.icon-btn svg { width: 100%; height: 100%; }

/* ── SETTINGS PANEL ───────────────────────────────────────── */
/* Positioned as a fixed-viewport overlay (top/right set by JS from the
   settings button's rect) rather than absolute inside .settings-wrap, so it
   isn't clipped by any ancestor when it opens. */
.settings-panel {
  position: fixed;
  z-index: 70;
  width: 220px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px;
}
.settings-panel[hidden] { display: none; }

.settings-group + .settings-group { margin-top: 14px; }

.settings-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}

.settings-row { display: flex; gap: 6px; }

.settings-option {
  flex: 1;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 0;
  text-align: center;
  color: var(--text-body);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.settings-option:hover { color: var(--accent); border-color: var(--accent-line); }
.settings-option[aria-checked="true"] {
  color: var(--accent-contrast);
  background: var(--accent);
  border-color: var(--accent);
}

/* ── MAIN ─────────────────────────────────────────────────── */
#main {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--header-h) + 44px) 40px 80px;
  scroll-behavior: smooth;
  outline: none;
}

/* Font-size setting scales the reading pane only, not the sidebar/toolbar
   chrome. "Small" is the library's original, unscaled size. */
:root[data-font-size="medium"] #main { zoom: 1.125; }
:root[data-font-size="large"] #main { zoom: 1.25; }

.page-header {
  max-width: var(--content-max);
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 2px solid var(--rule);
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hero-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}
.hero-mark {
  flex-shrink: 0;
  width: 52px;
  height: 64px;
  display: block;
}

.page-header h1 {
  font-size: 30px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* The logo's tagline, set as live text so it follows the theme and the
   reading-pane font size rather than being baked into the artwork. */
.hero-tagline {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lede {
  font-size: 14.5px;
  color: var(--text-muted);
  max-width: 560px;
  line-height: 1.6;
}

.how-to {
  max-width: var(--content-max);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 48px;
}

.how-to h2 {
  font-size: 13px;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 10px;
}

.how-to ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}

.how-to li {
  font-size: 13px;
  color: var(--text-body);
  padding-left: 14px;
  position: relative;
}
.how-to li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.how-to li strong { color: var(--heading); }

.how-to-foot {
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.55;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--accent-line);
}
.how-to-foot a { color: var(--accent); }


/* ── SECTION ──────────────────────────────────────────────── */
.section {
  max-width: var(--content-max);
  margin-bottom: 56px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.section[hidden] { display: none; }

.section-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--rule);
}

.section-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.section-heading h2 {
  font-size: 19px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.25;
}

.section-intro {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* ── CALLOUTS ─────────────────────────────────────────────── */
.callout {
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 16px;
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-body);
}
.callout.amber {
  border-color: var(--amber-line);
  border-left-color: var(--amber);
  background: var(--amber-bg);
}
.callout-title {
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 6px;
  font-size: 13px;
}
.callout.amber .callout-title { color: var(--amber); }
.callout ul { padding-left: 18px; margin-top: 4px; }
.callout li { margin-bottom: 4px; }

/* ── TABLES ───────────────────────────────────────────────── */
.ref-table, .tips-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 22px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.ref-table th, .tips-table th {
  background: var(--sidebar-bg);
  color: #FFFFFF;
  font-weight: 600;
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
}
.ref-table td, .tips-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.55;
}
.ref-table tr:last-child td, .tips-table tr:last-child td { border-bottom: none; }
.ref-table tr:nth-child(even) td, .tips-table tr:nth-child(even) td { background: var(--surface-2); }
.ref-table .kw { font-weight: 700; color: var(--heading); }
.ref-table .ph { font-style: italic; color: var(--text-muted); }
.tips-table td:first-child { font-weight: 600; color: var(--heading); width: 34%; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Wide worksheets scroll sideways rather than crushing a dozen columns. */
.ref-table.wide  { min-width: 760px; }
.ref-table.xwide { min-width: 1180px; }
.gate-table { min-width: 560px; }
.gate-table td:nth-child(3) { width: 14%; }
.gate-table td:nth-child(4) { width: 26%; }
.ref-table a { color: var(--accent); }
.ref-table .nowrap { white-space: nowrap; }

/* Blank worksheet rows: an ID, then empty cells tall enough to read as
   "fill this in", plus faint placeholder text for fixed-choice columns. */
.template-table td.id {
  font-weight: 700;
  color: var(--heading);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.template-table td:empty,
.template-table td.fill { height: 38px; min-width: 90px; }
.template-table td.ph { white-space: nowrap; font-size: 12px; }
.roadmap-table td.fill { height: 56px; width: 24%; }

/* 2×2 grids (TIME quadrants, WSJF × confidence) — row headers in the
   left column, each cell a labelled outcome. */
.quadrant-table thead td { background: var(--sidebar-bg); }
.quadrant-table tbody th {
  background: var(--sidebar-bg);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 12px;
  text-align: left;
  padding: 10px 14px;
  width: 26%;
  border-bottom: 1px solid var(--sidebar-border);
}
.quadrant-table tbody td { background: var(--surface) !important; }
.quadrant-table .q {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}
.q-invest    { color: var(--success); }
.q-migrate   { color: var(--accent); }
.q-tolerate  { color: var(--text-muted); }
.q-eliminate { color: var(--amber); }

.num-table td:not(:first-child),
.num-table th:not(:first-child) { text-align: center; font-variant-numeric: tabular-nums; }

.agenda-table .dur {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── PROSE ────────────────────────────────────────────────── */
.byline {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-faint);
}

.section h3 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--heading);
  margin: 28px 0 10px;
}
.section h3 .h-note { font-weight: 500; color: var(--text-muted); }

.prose, .next-step {
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 16px;
}
.next-step {
  padding-top: 14px;
  border-top: 1px dashed var(--border-strong);
}
.prose a, .next-step a, .callout a, .meta a { color: var(--accent); }
.callout p + p { margin-top: 6px; }

.meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  margin: -12px 0 20px;
}
.meta-label {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 20px;
  padding: 1px 9px;
}

.prose-list {
  font-size: 14px;
  padding-left: 22px;
  margin-bottom: 18px;
}
.prose-list li { margin-bottom: 6px; padding-left: 2px; }
.prose-list li::marker { color: var(--accent); font-weight: 700; }

.formula {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 8px;
  font-size: 14px;
}
.formula p + p { margin-top: 6px; }
.formula-term { font-weight: 700; color: var(--heading); }

.tree {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--code-text);
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 18px;
  overflow-x: auto;
}
.tree-outcome { color: var(--code-field); font-weight: 700; }
.tree-opp     { color: var(--code-label); font-weight: 600; }
.tree-note    { color: var(--code-note); }

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer {
  max-width: var(--content-max);
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
}
.site-footer p + p { margin-top: 8px; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 980px) {
  #sidebar {
    position: fixed;
    inset-block: 0;
    left: 0;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  body.drawer-open #sidebar { transform: translateX(0); }
  .icon-btn.menu-btn, .icon-btn.drawer-close { display: inline-flex; }
  .toolbar-brand { display: block; }

  /* The drawer's close button eats into the brand block, so tighten the
     gutter and the tagline enough to keep it on one line. */
  #sidebar-header { padding-right: 10px; }
  .brand { gap: 8px; }
  .brand-sub { font-size: 10.5px; }

  #main { padding: calc(var(--header-h) + 28px) 20px 64px; }
  .page-header h1 { font-size: 24px; }
  .hero-lockup { gap: 13px; }
  .hero-mark { width: 42px; height: 52px; }
  .how-to ul { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  #toolbar-inner { padding: 8px 12px; gap: 6px; }
  /* Zero flex-basis, so the name gives up width and ellipsises before it
     will push the settings button onto a second row. */
  .toolbar-brand { flex: 1 1 0; font-size: 13px; }
  /* Stack the masthead lockup — beside a title that now wraps to two lines,
     a vertically centred mark reads as floating rather than as a lockup. */
  .hero-lockup { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section, .page-header, .how-to, .site-footer { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  #main { scroll-behavior: auto; }
}

/* ── PRINT ────────────────────────────────────────────────── */
@media print {
  :root { --heading: #000; --text-body: #111; --text-muted: #444; }
  body { display: block; height: auto; overflow: visible; background: #fff; color: #000; font-size: 11pt; }
  #sidebar, #scrim, #toolbar, .skip-link, .site-footer { display: none !important; }
  #content { display: block; overflow: visible; }
  #main { display: block; overflow: visible; padding: 0; zoom: 1; }
  .section, .page-header, .how-to { max-width: none; break-inside: auto; }
  .ref-table th, .tips-table th { background: #e8e8e8 !important; color: #000 !important; }
  .callout { background: #fafafa !important; border: 1px solid #ccc; }
  .quadrant-table tbody th, .quadrant-table thead td { background: #e8e8e8 !important; color: #000 !important; }
  .ref-table.wide, .ref-table.xwide, .gate-table { min-width: 0; font-size: 9pt; }
  .tree { background: #fafafa; color: #000; border-color: #ccc; }
  .tree span { color: #000 !important; }
}

/* ── 404 ──────────────────────────────────────────────────── */
body.error-page {
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100dvh;
  padding: 24px;
  overflow: auto;
}

.error-main {
  max-width: 480px;
  text-align: center;
}
.error-brand {
  display: inline-block;
  margin-bottom: 20px;
}
.error-brand img { display: block; }
.error-main h1 {
  font-size: 30px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.2;
  margin-bottom: 12px;
}
.error-main .lede { margin: 0 auto; }
.error-actions { margin-top: 28px; }

.error-cta {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.error-cta:hover { background: var(--accent-hover); }