/* Finite reader theme tokens. Keep this registry synchronized with docs/DESIGN_SYSTEM.md. */
:root {
  color-scheme: light;

  /* Palette */
  --color-page: #f6f8fa;
  --color-surface: #fff;
  --color-text: #1f2328;
  --color-nav-text: #24292f;
  --color-muted: #57606a;
  --color-border: #d0d7de;
  --color-border-strong: #8c959f;
  --color-card-border: #ccd4df;
  --color-figure-border: #ccd7d8;
  --color-accent: #0969da;
  --color-link: #0550ae;
  --color-hover: #eaeef2;
  --color-highlight: #ffdf70;
  --color-example-surface: #f9f4e7;
  --color-example-accent: #d6a533;
  --color-target-accent: #d1a02b;
  --color-target-label: #956500;
  --color-faq-label: #a16b00;
  --color-chapter-label: #9a6700;
  --color-result-title: #155a80;
  --color-result-text: #536872;
  --color-result-border: #ccd6d5;
  --color-dialog-backdrop: #07121de6;

  /* Semantic roles used by the current library. */
  --color-faq-identity: #6a343a;
  --width-faq-accent: 4px;
  --shadow-faq: 0 3px 12px #20283012;
  --color-selected-surface: #e7f1ff;
  --color-selected-border: #a9c5e6;
  --color-builder-signature-surface: #fff4f4;
  --color-builder-signature-text: #9b293a;
  --color-status-saved: #25633d;
  --color-status-saved-surface: #e8f4eb;
  --color-status-draft: #825b16;
  --color-status-draft-surface: #fff4d9;
  --color-status-error: #a3261a;
  --color-status-error-surface: #fff0ec;
  --color-status-info: #245887;
  --color-status-info-surface: #e8f1fb;
  --color-action: var(--color-accent);
  --color-action-text: #fff;
  --color-identity-surface: #edf1f5;
  --color-identity-text: #414b57;
  --color-signature: #414b57;
  --color-signature-text: #fff;
  --layout-section: var(--space-2);
  --layout-group: var(--space-1);
  --layout-item: var(--space-075);
  --layout-inset: var(--space-125);

  /* Typography */
  --font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-size-kicker: 0.6875rem;
  --font-size-caption: 0.75rem;
  --font-size-small: 0.8125rem;
  --font-size-nav: 0.875rem;
  --font-size-body: 1rem;
  --font-size-lead: 1.0625rem;
  --font-size-subheading: 1.1875rem;
  --font-size-index: 1.5rem;
  --font-size-rule-heading: 1.5625rem;
  --font-size-rule-subheading: 1.4375rem;
  --font-size-card-id: 0.85em;
  --font-size-page-heading: clamp(2rem, 3vw, 2.625rem);
  --font-size-home-heading: clamp(2.375rem, 5vw, 3.5rem);
  --font-weight-medium: 650;
  --font-weight-label: 750;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-weight-saved: 500;
  --line-height-tight: 1.15;
  --line-height-heading: 1.2;
  --line-height-copy: 1.6;
  --line-height-reading: 1.65;
  --line-height-compact: 1.35;
  --line-height-result: 1.45;
  --line-height-card: 1.5;
  --line-height-subheading: 1.25;
  --tracking-kicker: 0.1em;
  --tracking-navigation: 0.07em;
  --tracking-page-heading: -0.035em;
  --tracking-card-heading: -0.025em;

  /* Spacing scale in rem; at the 16px root these are exact px equivalents. */
  --space-025: 0.25rem;
  --space-0375: 0.375rem;
  --space-05: 0.5rem;
  --space-0625: 0.625rem;
  --space-075: 0.75rem;
  --space-0875: 0.875rem;
  --space-1: 1rem;
  --space-1125: 1.125rem;
  --space-125: 1.25rem;
  --space-15: 1.5rem;
  --space-175: 1.75rem;
  --space-2: 2rem;
  --space-25: 2.5rem;
  --space-375: 3.75rem;
  --space-5: 5rem;

  /* Layout, controls and component geometry */
  --width-sidebar: 280px;
  --width-reader: 1000px;
  --width-reading-column: 760px;
  --width-home-intro: 700px;
  --width-footer: 830px;
  --width-miniature: 500px;
  --width-search: min(430px, 40vw);
  --width-dialog: min(98vw, 1200px);
  --height-dialog: min(96vh, 1000px);
  --height-dialog-max: 96vh;
  --height-dialog-bar: 52px;
  --height-header: 76px;
  --height-header-mobile: 64px;
  --width-brand: 150px;
  --height-brand: 60px;
  --width-brand-mobile: 128px;
  --height-brand-mobile: 50px;
  --width-card-list-min: 15rem;
  --width-destination-tile-min: 140px;
  --width-local-index-min: 200px;
  --width-image-zoom: max(200%, 1200px);
  --width-main-gutter: clamp(28px, 5vw, 72px);
  --width-main-gutter-mobile: 18px;
  --height-search-button: 36px;
  --height-search-results: min(65vh, 550px);
  --height-search-results-mobile: 50vh;
  --height-sidebar-mobile: 65vh;
  --height-nav-link: 40px;
  --height-touch-target: 44px;
  --offset-search-area: 11px;
  --offset-search-label: 3px;
  --space-nav-heading-top: 22px;
  --space-nav-rail: 7px;
  --space-example-inset: 3px;
  --space-rule-figure: 22px;
  --space-result-row: 18px;
  --space-result-paragraph: 7px;
  --space-list-indent: 1.5em;
  --size-chevron: 20px;
  --layer-header: 5;
  --layer-search: 6;
  --width-focus-outline: 2px;
  --width-active-marker: 3px;
  --width-border: 1px;
  --radius-control: 6px;
  --radius-card: 6px;
  --radius-search-button: 4px;
  --offset-rule-anchor: 75px;
  --offset-faq-anchor: 90px;
  --offset-rule-anchor-mobile: 16px;
  --breakpoint-mobile: 760px;
  --breakpoint-card-stack: 700px;

  /* Interaction shadows use the accepted site palette. */
  --shadow-tile: 0 3px 12px #1f23281a;
  --shadow-results: 0 8px 24px #140c2b26;
  --shadow-dialog: 0 20px 80px #0008;
  --tracking-minor-heading: -0.015em;

  font-family: var(--font-family-base);
  color: var(--color-text);
  background: var(--color-page);
  font-size: var(--font-size-body);
  scroll-behavior: auto;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
a {
  color: var(--color-link);
  text-decoration-thickness: var(--width-border);
  text-underline-offset: var(--space-025);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex="0"]:focus-visible {
  outline: var(--width-focus-outline) solid var(--color-accent);
  outline-offset: var(--space-025);
}

/* Shared page frame, header and search. */
.top {
  position: relative;
  z-index: var(--layer-header);
  display: flex;
  align-items: center;
  height: var(--height-header);
  gap: var(--space-1);
  padding: 0 var(--space-15);
  color: var(--color-text);
  background: var(--color-surface);
  border-bottom: var(--width-border) solid var(--color-border);
}
.brand {
  display: flex;
  align-items: center;
  color: var(--color-text);
  text-decoration: none;
}
.brand[aria-current="page"] {
  box-shadow: inset 0 calc(-1 * var(--width-focus-outline)) 0 0 var(--color-accent);
}
.brand img {
  display: block;
  width: var(--width-brand);
  height: var(--height-brand);
  object-fit: contain;
}
.search-area {
  position: absolute;
  z-index: var(--layer-search);
  top: var(--offset-search-area);
  right: var(--space-15);
  width: var(--width-search);
}
.search-area label {
  display: block;
  margin: 0 0 var(--offset-search-label);
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
}
.saved-label { display: none; font-weight: var(--font-weight-saved); }
.saved-query:not(:focus-within) .saved-label { display: inline; }
.searchbox {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 var(--space-025) 0 var(--space-0625);
  background: var(--color-surface);
  border: var(--width-border) solid var(--color-border-strong);
  border-radius: var(--radius-control);
}
.searchbox:focus-within {
  outline: var(--width-focus-outline) solid var(--color-accent);
  outline-offset: 0;
}
.searchbox input {
  width: 100%;
  min-width: 0;
  height: 38px;
  background: transparent;
  border: 0;
  outline: 0;
}
.searchbox input:focus-visible { outline: 0; }
.searchbox input::-webkit-search-cancel-button { display: none; }
.searchbox button {
  min-width: var(--height-search-button);
  min-height: var(--height-search-button);
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-search-button);
  color: var(--color-muted);
}
.searchbox button:hover { background: var(--color-hover); }
.searchbox button[hidden],
.search-results[hidden] { display: none; }
.search-results {
  position: absolute;
  top: calc(100% + var(--space-0375));
  right: 0;
  left: 0;
  max-height: var(--height-search-results);
  overflow-y: auto;
  padding: 0 var(--space-1);
  background: var(--color-surface);
  border: var(--width-border) solid var(--color-border);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-results);
  overscroll-behavior: contain;
}
.result {
  display: block;
  padding: var(--space-result-row) 0;
  color: inherit;
  text-decoration: none;
  border-top: var(--width-border) solid var(--color-result-border);
}
.result strong {
  display: block;
  color: var(--color-result-title);
  font-size: var(--font-size-subheading);
}
.result p {
  margin: var(--space-result-paragraph) 0;
  color: var(--color-result-text);
  line-height: var(--line-height-result);
  overflow-wrap: anywhere;
}
.search-results .result { padding: var(--space-075) 0; }
.search-results button { min-height: var(--height-touch-target); }
.search-results p { overflow-wrap: anywhere; }
.searchbox input:disabled { cursor: not-allowed; }
mark { color: inherit; background: var(--color-highlight); }
.nav-toggle { display: none; }

.layout {
  display: grid;
  grid-template-columns: var(--width-sidebar) minmax(0, 1fr);
  margin: 0;
}
aside {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  padding: var(--space-15) var(--space-1);
  background: var(--color-surface);
  border-right: var(--width-border) solid var(--color-border);
}
#navigation { border: 0; padding: 0; }
#navigation a {
  display: flex;
  align-items: center;
  min-height: var(--height-nav-link);
  padding: var(--space-05) var(--space-075);
  color: var(--color-nav-text);
  font-size: var(--font-size-nav);
  line-height: var(--line-height-compact);
  text-decoration: none;
  border-radius: var(--radius-control);
}
#navigation a:hover,
#navigation a[aria-current="page"] {
  color: var(--color-link);
  background: var(--color-hover);
}
#navigation a[aria-current="page"] {
  font-weight: var(--font-weight-bold);
  box-shadow: inset var(--width-active-marker) 0 var(--color-accent);
}
#navigation .ancestor {
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
}
.nav-heading {
  margin: var(--space-nav-heading-top) var(--space-075) var(--space-05);
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-navigation);
  text-transform: uppercase;
}
.nav-utilities {
  padding-bottom: var(--space-075);
  border-bottom: var(--width-border) solid var(--color-border);
}
.nav-children {
  margin-left: var(--space-075);
  padding-left: var(--space-nav-rail);
  border-left: var(--width-border) solid var(--color-border);
}
.nav-children a { font-size: var(--font-size-small) !important; }

.local-disclosure {
  max-width: var(--width-reading-column);
  margin-bottom: var(--space-1);
}
.related {
  margin-top: var(--space-125);
  font-size: var(--font-size-small);
}
.related ul {
  margin: var(--space-025) 0;
  padding-left: var(--space-125);
  line-height: var(--line-height-compact);
}
.related li { margin: 0; }
.related li + li { margin-top: var(--space-025); }
.related a { display: inline; padding: 0; }

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-025);
  margin: 0 0 var(--space-1);
  padding: 0;
  list-style: none;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow-wrap: anywhere;
}
.breadcrumb-separator::before {
  margin: 0 var(--space-05);
  color: var(--color-muted);
  content: "›";
}
.breadcrumbs a {
  display: inline;
  min-height: 0;
  padding: 0;
  text-decoration: underline;
}
.breadcrumbs li:last-child {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

/* Reader frame and rule content. */
main {
  min-width: 0;
  padding: var(--space-25) var(--width-main-gutter) var(--space-5);
}
#content { max-width: var(--width-reader); margin-inline: auto; }
main h1 {
  margin: 0 0 var(--space-15);
  font-size: var(--font-size-page-heading);
  letter-spacing: var(--tracking-page-heading);
  line-height: var(--line-height-tight);
}
.home-intro {
  max-width: var(--width-home-intro);
  margin-bottom: var(--space-05);
}
.home-intro h1 {
  margin: var(--space-075) 0;
  font-size: var(--font-size-home-heading);
}
.home-intro p,
.index-intro {
  color: var(--color-muted);
  line-height: var(--line-height-copy);
}
.source,
.eyebrow {
  color: var(--color-muted);
  font-size: var(--font-size-kicker);
  font-weight: var(--font-weight-heavy);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}
.eyebrow::before {
  display: inline-block;
  width: var(--space-15);
  height: 3px;
  margin-right: var(--space-05);
  vertical-align: middle;
  content: "";
  background: var(--color-example-accent);
}
.rule {
  max-width: var(--width-reading-column);
  padding: var(--space-175) 0 var(--space-2);
  border-top: var(--width-border) solid var(--color-border);
  scroll-margin-top: var(--offset-rule-anchor);
}
.rule h2,
.rule h3,
.rule h4,
.rule h5,
.rule h6 {
  margin: var(--space-05) 0 var(--space-1);
  overflow-wrap: anywhere;
}
.rule h2,
.rule h3 {
  letter-spacing: var(--tracking-card-heading);
  line-height: var(--line-height-heading);
}
.rule h2 { font-size: var(--font-size-rule-heading); }
.rule h3 { font-size: var(--font-size-rule-subheading); }
.rule h4,
.rule h5,
.rule h6 {
  font-size: var(--font-size-subheading);
  letter-spacing: -0.015em;
  line-height: var(--line-height-subheading);
}
.rule p,
.rule li { line-height: var(--line-height-reading); }
.rule li { margin: var(--space-0375) 0; padding-left: var(--space-025); }
ol, ul { padding-left: var(--space-list-indent); }
.example {
  margin: var(--space-125) 0;
  padding: var(--space-example-inset) var(--space-1);
  background: var(--color-example-surface);
  border-left: var(--width-active-marker) solid var(--color-example-accent);
}
.figure { margin: var(--space-rule-figure) 0; }
.figure button {
  display: block;
  width: 100%;
  min-width: var(--height-touch-target);
  min-height: var(--height-touch-target);
  max-width: 100%;
  padding: var(--space-05);
  text-align: left;
  background: var(--color-surface);
  border: var(--width-border) solid var(--color-figure-border);
}
.figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.figure figcaption {
  margin-top: var(--space-05);
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}
.badge {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: 1.5em;
  vertical-align: middle;
}
.rule:target,
.faq:target { border-top-color: var(--color-target-accent); }
.rule:target > .source,
.faq:target > .faq-label { color: var(--color-target-label); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* One destination component across Home, rule and card indexes. */
.destination-grid, .card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--width-card-list-min)), 1fr));
  gap: var(--space-075);
}
.quick-links { margin: var(--space-075) 0 var(--space-15); }
.chapter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chapter-index { max-width: var(--width-reading-column); margin: 0 0 var(--space-1); }
.destination-tile {
  display: flex;
  min-width: 0;
  min-height: var(--height-touch-target);
  flex-direction: column;
  gap: var(--space-05);
  padding: var(--space-0875) var(--space-1125);
  color: var(--color-link);
  text-decoration: none;
  background: var(--color-surface);
  border: var(--width-border) solid var(--color-border);
  border-radius: var(--radius-card);
  overflow-wrap: anywhere;
}
.destination-title { color: var(--color-link); font-size: var(--font-size-lead); font-weight: var(--font-weight-bold); }
.destination-description, .destination-identifier { color: var(--color-muted); font-size: var(--font-size-small); line-height: var(--line-height-card); }
.destination-tile:hover { border-color: var(--color-accent); box-shadow: var(--shadow-tile); }
.index-heading { margin-bottom: var(--space-025); font-size: var(--font-size-index); }
.index-intro { margin-top: 0; }

/* In-page indexes, card browsing and card detail. */
.local-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--width-local-index-min)), 1fr));
  column-gap: var(--space-125);
  row-gap: 0;
  max-width: var(--width-reading-column);
  margin: 0 0 var(--space-1);
  padding: var(--space-1) var(--space-1125);
  background: var(--color-surface);
  border: var(--width-border) solid var(--color-border);
  border-radius: var(--radius-card);
}
.local-nav strong {
  grid-column: 1 / -1;
  margin-bottom: var(--space-0375);
  font-size: var(--font-size-nav);
}
.local-nav a {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: var(--space-025) 0;
  font-size: var(--font-size-nav);
  line-height: var(--line-height-compact);
}
.local-nav a:hover { text-decoration-thickness: var(--width-focus-outline); }
.local-disclosure .local-nav {
  margin: 0;
  padding-top: var(--space-05);
}
.pagination {
  display: flex;
  justify-content: space-between;
  gap: var(--space-125);
}
.pagination a { min-height: var(--height-touch-target); }
.card-type,
.card-set { margin-block: var(--space-15); }
.card-list { padding: 0; list-style: none; }
.card-list li { display: flex; min-width: 0; }
.card-list .destination-tile { width: 100%; }
.card-detail { max-width: var(--width-reader); }
.card-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-15);
  align-items: start;
}
.card-figure { margin: 0; }
.card-figure img { max-width: 100%; height: auto; }
.card-text-block h3 { margin-bottom: var(--space-025); }
.card-text-block p { margin-top: 0; white-space: pre-wrap; }
.diagram-description {
  margin-top: var(--space-075);
  padding: 0 var(--space-075);
  border-left: var(--width-active-marker) solid var(--color-example-accent);
}
.diagram-description h3 {
  margin: 0 0 var(--space-025);
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}
.diagram-description p { margin: 0; line-height: var(--line-height-copy); }
.miniature .figure { max-width: var(--width-miniature); }
.miniature img { max-width: 100%; height: auto; }

/* Shared image viewer frame; image_viewer.css owns fitted behavior. */
dialog {
  width: var(--width-dialog);
  height: var(--height-dialog);
  max-width: none;
  max-height: var(--height-dialog-max);
  overflow: hidden;
  padding: 0;
  background: var(--color-page);
  border: 0;
  box-shadow: var(--shadow-dialog);
}
dialog::backdrop { background: var(--color-dialog-backdrop); }
.dialog-bar {
  display: flex;
  align-items: center;
  gap: var(--space-05);
  min-height: var(--height-dialog-bar);
  padding: var(--space-025) var(--space-05);
  color: var(--color-surface);
  background: var(--color-text);
}
.dialog-bar span {
  margin-right: auto;
  font-size: var(--font-size-caption);
}
.dialog-bar button {
  min-height: var(--height-touch-target);
  padding: var(--space-05) var(--space-0875);
  white-space: nowrap;
  background: var(--color-surface);
  border: 0;
}
.image-scroll {
  height: calc(100% - var(--height-dialog-bar));
  max-height: none;
  overflow: auto;
  background: var(--color-surface);
  overscroll-behavior: contain;
}
.image-scroll img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}
.zoomed .image-scroll img {
  width: var(--width-image-zoom);
  max-width: none;
  height: auto;
  object-fit: contain;
}

footer {
  max-width: var(--width-footer);
  margin-top: var(--space-25);
  padding-top: var(--space-1);
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  border-top: var(--width-border) solid var(--color-border);
}

@media (max-width: 760px) {
  .top {
    height: var(--height-header-mobile);
    padding: 0 var(--space-1);
  }
  .brand img {
    width: var(--width-brand-mobile);
    height: var(--height-brand-mobile);
  }
  .nav-toggle {
    display: block;
    min-height: var(--height-touch-target);
    margin-left: auto;
    padding: var(--space-05) var(--space-075);
    color: var(--color-nav-text);
    background: var(--color-surface);
    border: var(--width-border) solid var(--color-border-strong);
    border-radius: var(--radius-control);
  }
  .nav-toggle[aria-expanded="true"] { background: var(--color-hover); }
  .search-area {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    padding: var(--space-0625) var(--space-1);
    background: var(--color-surface);
    border-bottom: var(--width-border) solid var(--color-border);
  }
  .search-results {
    top: 100%;
    right: var(--space-1);
    left: var(--space-1);
    max-height: var(--height-search-results-mobile);
  }
  .searchbox button {
    min-width: var(--height-touch-target);
    min-height: var(--height-touch-target);
  }
  .searchbox input {
    flex: 1 1 0;
    width: 0;
    height: var(--height-touch-target);
  }
  .layout { display: block; }
  aside {
    position: relative;
    top: auto;
    height: auto;
    display: none;
    max-height: var(--height-sidebar-mobile);
    overflow: auto;
    padding: var(--space-1);
    border-right: 0;
    border-bottom: var(--width-border) solid var(--color-border);
  }
  aside.open { display: block; }
  #navigation a,
  .nav-chapter > summary { min-height: var(--height-touch-target); }
  main {
    padding: var(--space-175) var(--width-main-gutter-mobile) var(--space-375);
  }
  .quick-links { margin-bottom: var(--space-15); }
  .chapter-grid { grid-template-columns: 1fr; }
  .rule { scroll-margin-top: var(--offset-rule-anchor-mobile); }
  .local-nav {
    grid-template-columns: 1fr;
    padding: var(--space-05) var(--space-0875);
  }
  .local-nav a {
    min-height: var(--height-touch-target);
    padding: var(--space-025) 0;
  }
  .local-disclosure .local-nav { padding-top: var(--space-05); }
  .dialog-bar { gap: var(--space-0375); }
  .dialog-bar span { font-size: var(--font-size-kicker); }
  .dialog-bar button { padding: var(--space-0375) var(--space-05); }
}

@media (max-width: 700px) {
  .card-detail-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
}

/* Shared site hierarchy: links navigate; adjacent buttons only disclose. */
.tree-row { display: flex; align-items: stretch; min-width: 0; }
.tree-row > a { flex: 1 1 auto; min-width: 0; }
.tree-toggle {
  display: grid; place-items: center; flex: 0 0 var(--height-touch-target);
  min-height: var(--height-touch-target); padding: 0; border: 0;
  border-radius: var(--radius-control); background: transparent; color: var(--color-link);
}
.tree-toggle span { display: inline-block; font-size: var(--size-chevron); transform: rotate(90deg); }
.tree-toggle[aria-expanded="true"] span { transform: rotate(-90deg); }
.tree-toggle:hover { background: var(--color-hover); }
.tree-children[hidden] { display: none !important; }
.sidebar-tree .tree-children { margin-left: var(--space-075); padding-left: var(--space-nav-rail); border-left: var(--width-border) solid var(--color-border); }
.sidebar-tree .tree-children a { font-size: var(--font-size-small) !important; }
#navigation .tree-ancestor > .tree-row > a { color: var(--color-link); font-weight: var(--font-weight-medium); }
.home-tree > .tree-node { margin-bottom: var(--space-15); }
.home-tree > .tree-node > .tree-row > a { font-size: var(--font-size-index); }
.home-tree .tree-children { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--width-card-list-min)),1fr)); gap: var(--space-075); padding: var(--space-075) 0 0 var(--space-075); }
.home-tree .tree-row > .destination-tile { width: 100%; }
.home-tree .tree-toggle { margin-left: var(--space-025); border: var(--width-border) solid var(--color-border); background: var(--color-surface); }
.home-tree .tree-toggle:hover { background: var(--color-hover); }

/* Expanded Home branches use the full grid width so deeper labels remain readable. */
.home-tree .tree-node.expanded { grid-column: 1 / -1; }

/* I17 fixed shell */
.top { position: fixed; inset: 0 0 auto; z-index: 20; height: 68px; background: #252a30; gap: 16px; }
.brand { flex: 0 0 auto; border: 0; box-shadow: none !important; }
.brand img { width: 145px; height: 54px; }
.search-area { position: relative; inset: auto; padding: 0; border: 0; background: transparent; width: min(420px, 100%); margin-left: auto; min-width: 0; }
.searchbox { border-radius: 999px; padding: 0 10px; gap: 8px; background: #fff; }
.searchbox input { width: 100%; height: 38px; }
.searchbox kbd { color: #666; white-space: nowrap; font-size: 12px; }
.search-results { top: calc(100% + 8px); left: 0; right: 0; max-height: min(70vh, 600px); }
.nav-toggle { display: block; flex: 0 0 44px; height: 44px; padding: 0; margin: 0; color: white; background: transparent; border: 0; font-size: 26px; }
.layout { display: block; padding-top: 68px; }
aside { display: block; position: fixed; z-index: 19; top: 68px; bottom: 0; left: 0; height: auto; max-height: none; width: min(360px, 90vw); padding: 16px; overflow: auto; transform: translateX(-105%); visibility: hidden; }
aside.open { display: block; transform: translateX(0); visibility: visible; }
aside.drawer-animating { transition: transform .18s ease, visibility .18s; }
#navBackdrop { position: fixed; z-index: 18; inset: 68px 0 0; background: #0009; }
#navBackdrop[hidden] { display: none; }
body.drawer-open { overflow: hidden; }
main { margin: 0 auto; }
[id] { scroll-margin-top: 85px; }
@media (max-width: 760px) {
 .top { padding: 0 10px; gap: 8px; }
 .brand img { width: 106px; height: 48px; }
 .search-area { width: auto; flex: 1 1 0; }
 .searchbox input { height: 38px; }
 .searchbox kbd { display: none; }
 .search-results { left: 0; right: -52px; }
 .nav-toggle { margin: 0; background: transparent; color: white; border: 0; padding: 0; }
 aside { position: fixed; top: 68px; bottom: 0; height: auto; max-height: none; border-right: 1px solid #bbb; }
 main { min-width: 0; }
}
.related + .related { margin-top: 4px; }
.related:not([open]) { margin-bottom: 0; }
.about-splash { overflow: hidden; width: 100%; aspect-ratio: 2 / 1; margin: 1.5rem 0; border-radius: 8px; background: #fff8e9; }
.about-splash > svg { display: block; width: 100%; height: 100%; }
.card-group { border-bottom: 2px solid #9f1824; margin-top: 1.4rem; }
@font-face { font-family: Orbitron; src: url('design/i17/Orbitron.ttf') format('truetype'); font-style: normal; font-weight: 400 900; font-display: swap; }
h1,h2,.card-group { font-family: Orbitron, sans-serif; font-weight: 800; overflow-wrap: anywhere; }
.top { background: #f8f8f8; border-bottom: 3px solid #a51625; }
.nav-toggle { color: #252a30; }


.search-icon { flex: 0 0 22px; width: 22px; height: 22px; fill: none; stroke: #323941; stroke-width: 2.4; stroke-linecap: round; }
@media (min-width: 761px) {
 aside { width: 280px; }
 body.desktop-drawer-open .layout { padding-left: 280px; }
}

/* Related navigation and reading headings. */
.related ul { list-style: disc; padding-left: var(--space-list-indent); margin: var(--space-075) 0; }
.related li + li { margin-top: var(--space-025); }
.related li a { display: inline; padding: 0; }
.reading-heading { font-family: var(--font-family-base); font-weight: 700; overflow-wrap: normal; }

/* I17 shared spacing roles: gutters, hierarchy, sections, disclosures and navigation. */
:root {
  --reader-gutter: clamp(20px, 4vw, 48px);
  --reader-top: clamp(28px, 3vw, 40px);
  --hierarchy-gap: 12px;
  --title-gap: 28px;
  --section-gap: 32px;
  --disclosure-gap: 4px;
  --disclosure-body-gap: 12px;
  --faq-card-pad: 20px;
  --bottom-nav-gap: 32px;
}
main { padding: var(--reader-top) var(--reader-gutter) 64px; }
.breadcrumbs ol { margin-bottom: var(--hierarchy-gap); row-gap: 6px; }
.breadcrumbs li { display: grid; grid-template-columns: auto minmax(0,1fr); max-width: 100%; align-items: baseline; }
.breadcrumbs li:first-child { display: block; }
.breadcrumbs li > a, .breadcrumbs li > [aria-current] { min-width: 0; overflow-wrap: anywhere; }
.card-detail > .source { margin-bottom: 8px; }
main h1 { margin-bottom: var(--title-gap); line-height: 1.18; }
.home-intro { margin-bottom: var(--section-gap); }
.home-intro h1 { margin: 0 0 var(--hierarchy-gap); }
.related + .related { margin-top: var(--disclosure-gap); }
.related ul { margin: var(--disclosure-body-gap) 0; }
.pagination { margin-top: var(--bottom-nav-gap); padding-top: 16px; border-top: 1px solid var(--color-border); flex-wrap: wrap; }
.pagination a { max-width: 100%; overflow-wrap: anywhere; }
@media(max-width: 760px) { :root { --reader-gutter: 20px; --reader-top: 28px; --title-gap: 24px; --section-gap: 28px; --faq-card-pad: 18px; --bottom-nav-gap: 28px; } }
/* FAQ: one pronounced shared card, including contextual appearances. */
.faq { max-width: var(--width-reading-column); padding: var(--faq-card-pad); scroll-margin-top: var(--offset-faq-anchor); background: var(--color-surface); border: var(--width-border) solid var(--color-border); border-left: var(--width-faq-accent) solid var(--color-signal); border-radius: var(--radius-card); box-shadow: var(--shadow-faq); margin: var(--space-1) 0; }
.faq-label { letter-spacing: .04em; color: var(--color-faq-identity); font-size: var(--font-size-caption); font-weight: 600; }
.faq h2, .faq h3 { font-family: var(--font-family-base); color: var(--color-text); font-size: var(--font-size-body); font-weight: 650; line-height: var(--line-height-card); margin: var(--space-05) 0 var(--space-1); }
.faq p { color: var(--color-text); line-height: var(--line-height-reading); white-space: pre-line; }

/* Keep the Search pill border visible around its controls. */
.searchbox { overflow: hidden; }
.searchbox button { flex: 0 0 38px; min-width: 38px; min-height: 38px; height: 38px; background: transparent; border-radius: 50%; }
.searchbox button:focus-visible { outline-offset: -4px; }
.related ul { margin-bottom: 0; }
/* Escape and outside click dismiss results; keep a single visible clear control. */
.searchbox #dismissSearch { display: none; }
/* Reserve the scrollbar gutter while the narrow drawer locks page scrolling. */
html { scrollbar-gutter: stable; }

.about-splash { display: block; width: 100%; height: auto; aspect-ratio: auto; }

/* I20 shared reader refinements. Values are registered in DESIGN_SYSTEM.md. */
:root {
  --color-structure: #252a30;
  --color-signal: #a51625;
  --color-result-title: var(--color-link);
  --color-result-text: var(--color-muted);
  --width-search-panel: 560px;
  --search-panel-gutter: 12px;
  --search-result-pad: 16px;
  --font-size-result-title: 1.0625rem;
  --font-size-result-copy: 0.875rem;
  --card-block-gap: 20px;
  --height-shell: 68px;
  --reader-anchor-gap: 17px;
}
.control-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.nav-toggle { display: grid; place-items: center; border-radius: var(--radius-control); }
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: var(--color-hover); }
.search-results { left: auto; right: 0; width: min(var(--width-search-panel), calc(100vw - 2 * var(--search-panel-gutter))); padding: 0; scroll-padding-block: var(--height-touch-target); }
.search-count { position: sticky; top: 0; z-index: 1; margin: 0; padding: var(--space-075) var(--search-result-pad); background: var(--color-surface); border-bottom: 1px solid var(--color-border); color: var(--color-muted); font-size: var(--font-size-small); }
.search-results .result { padding: var(--space-075) var(--search-result-pad); border-top: 0; border-bottom: 1px solid var(--color-border); }
.result .source { display: block; font-size: var(--font-size-kicker); letter-spacing: .035em; line-height: var(--line-height-card); margin-bottom: var(--space-025); }
.result strong { font-size: var(--font-size-result-title); line-height: var(--line-height-compact); }
.result p { font-size: var(--font-size-result-copy); line-height: var(--line-height-card); margin: var(--space-0375) 0 0; }
.result:hover, .result:focus-visible { background: var(--color-page); }
.result:focus-visible { outline-offset: -3px; }
.search-empty { margin: 0; padding: var(--search-result-pad); font-size: var(--font-size-nav); line-height: var(--line-height-card); }
.search-results #showAll { display: block; width: 100%; border: 0; background: var(--color-surface); color: var(--color-link); font-weight: var(--font-weight-bold); }
.search-results #showAll:hover { background: var(--color-hover); }
.search-results #showAll:focus-visible { outline-offset: -4px; }
.home-tree > .tree-node > .tree-row .destination-title { font-size: var(--font-size-subheading); }
.home-tree .tree-children { border-left: 1px solid var(--color-border); margin-left: var(--space-075); padding-left: var(--space-075); }
.card-detail-grid > section > h2 { margin-top: 0; }
.card-text-block { margin-block: var(--card-block-gap); }
.card-text-block h3, .card-text-block h4 { font-family: var(--font-family-base); font-size: var(--font-size-body); line-height: var(--line-height-compact); margin: 0 0 var(--space-0375); }
.card-text-block p { line-height: var(--line-height-copy); }
.card-group { margin-top: var(--section-gap); padding-bottom: var(--space-0375); border-bottom-color: var(--color-signal); }
@media(min-width: 761px) {
 .card-figure { position: sticky; top: calc(var(--height-shell) + var(--reader-anchor-gap)); }
 .card-figure img { max-height: calc(100dvh - var(--height-shell) - 2 * var(--reader-anchor-gap)); object-fit: contain; }
}
@media(max-width: 760px) {
 .search-results { position: fixed; top: calc(var(--height-shell) + 8px); left: var(--search-panel-gutter); right: calc(var(--search-panel-gutter) + env(safe-area-inset-right)); width: auto; max-height: calc(100dvh - var(--height-shell) - 2 * var(--search-panel-gutter)); }
}

/* Scenario maps preserve their aspect ratio. */
.scenario-map img { display:block; width:100%; height:auto; }
/* I45: the official goal card keeps its ratio at a readable card size. The overview reuses .card-reference-identity unchanged. */
.goal-card { max-width:560px; margin-bottom:var(--space-05); }
.goal-card img { display:block; width:100%; height:auto; }

.unit-title { display:flex; align-items:center; gap:1rem; margin-bottom:var(--title-gap); }
.unit-title-copy { min-width:0; }
.unit-title-copy .source { margin-bottom:8px; }
.unit-title-copy h1 { margin:0; }
.unit-artwork { flex:0 0 80px; width:80px; margin:0; }
.unit-artwork button { padding:0; }
.unit-artwork img { width:100%; max-height:80px; object-fit:contain; }
@media(max-width:600px) { .unit-artwork { flex-basis:64px; width:64px; } .unit-artwork img { max-height:64px; } }

.map-legend { list-style:none; padding:0; display:grid; gap:.4rem; }
.map-legend li { display:flex; align-items:center; gap:.6rem; }
.legend-symbol { display:inline-flex; align-items:center; justify-content:center; flex:0 0 2rem; width:2rem; height:2rem; }
.legend-symbol svg { display:block; width:100%; height:100%; }

/* I24: map keys use the same artwork as map tokens. */
.legend-symbol img { display:block; width:100%; height:100%; object-fit:contain; }

/* I43: one key line may carry its blue and red token together. */
.map-legend:has(.legend-symbol.pair) .legend-symbol { flex-basis:4.4rem; width:4.4rem; justify-content:flex-start; gap:.4rem; }
.map-legend:has(.legend-symbol.pair) .legend-symbol > * { flex:0 0 2rem; width:2rem; }

/* Glossary entries are direct children of the page title, with their existing term typography. */
.glossary-entry h2 { font-family:var(--font-family-base); font-size:var(--font-size-rule-subheading); font-weight:700; }

/* Shared content disclosure. Filter/settings summaries are menu-control variants. */
:root{--size-disclosure-chevron:7px;--width-disclosure-stroke:2px}
details:not(.filter-select):not(.game-settings)>summary{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-075);min-height:var(--height-touch-target);padding:0;list-style:none;cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-small);font-weight:600;line-height:1.4;color:var(--color-text);background:transparent;border:0}
details:not(.filter-select):not(.game-settings)>summary::-webkit-details-marker{display:none}
details:not(.filter-select):not(.game-settings)>summary::marker{content:""}
details:not(.filter-select):not(.game-settings)>summary::before{content:"";flex:0 0 var(--size-disclosure-chevron);width:var(--size-disclosure-chevron);height:var(--size-disclosure-chevron);margin-inline:3px;box-sizing:border-box;border-right:var(--width-disclosure-stroke) solid currentColor;border-bottom:var(--width-disclosure-stroke) solid currentColor;transform:rotate(45deg)}
details:not(.filter-select):not(.game-settings)[open]>summary::before{transform:rotate(225deg)}
details:not(.filter-select):not(.game-settings)>summary::after{content:none}
details:not(.filter-select):not(.game-settings)>summary:hover{color:var(--color-link)}
details:not(.filter-select):not(.game-settings)>summary:focus-visible{outline:var(--width-focus-outline) solid var(--color-accent);outline-offset:var(--space-025);border-radius:var(--radius-control)}
details:not(.filter-select):not(.game-settings)+details:not(.filter-select):not(.game-settings){margin-top:var(--disclosure-gap)}

/* Current composition roles: reading, navigation, reference and editing. */
body[data-route="faq"] #content,
body[data-route="about"] #content,
body[data-route="changelog"] #content,
body[data-route^="scenario-"] #content { max-width: var(--width-reading-column); }
.scenario-detail > p, .about-page p { line-height: var(--line-height-reading); }
.scenario-detail > h2, .about-page h2 { margin-top: var(--layout-section); margin-bottom: var(--layout-item); }
.home-tree > .tree-node { margin-bottom: var(--layout-section); }
.home-tree > .tree-node > .tree-row > .destination-tile { background: transparent; border-color: transparent; padding: var(--space-05) 0; box-shadow: none; }
.home-tree > .tree-node > .tree-row .destination-title { font-family: var(--font-family-base); font-size: var(--font-size-subheading); color: var(--color-link); }
.home-tree > .tree-node > .tree-row > .destination-tile:hover .destination-title { color: var(--color-link); text-decoration: underline; text-underline-offset: var(--space-025); }
.home-tree > .tree-node > .tree-row > .tree-toggle { background: transparent; border-color: transparent; }
.home-tree > .tree-node > .tree-children { margin-left: 0; padding-left: var(--space-075); }
.destination-tile { transition: border-color .12s ease, background-color .12s ease; }
.destination-tile:hover { background: var(--color-surface); }
.breadcrumbs { font-size: var(--font-size-nav); line-height: var(--line-height-card); }
@media (prefers-reduced-motion: reduce) { .destination-tile { transition: none; } }

/* Short textual product status, shared by navigation and page headings. */
.status-badge{display:inline-block;vertical-align:middle;margin-inline-start:.35em;padding:2px 6px;border:1px solid var(--color-border-strong);border-radius:4px;color:var(--color-muted);background:var(--color-surface);font:600 12px/1.4 var(--font-family-base);letter-spacing:0;white-space:nowrap}

/* I33 FAQ-local search and official filters. Reuses the builder's filter-select
   anatomy (40px control, label + value, popover with find field, pressed choices
   with counts, Clear/Done, removable chips) as a FAQ-scoped variant. */
.faq-tools { max-width: var(--width-reading-column); margin: 0 0 var(--space-15); display: grid; gap: var(--space-075); }
.faq-tools input[type="search"] { box-sizing: border-box; width: 100%; height: var(--height-touch-target); padding: 9px 12px; font: inherit; font-size: 1rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); }
.faq-tools input::placeholder { color: var(--color-muted); opacity: 1; }
.faq-tools input:focus-visible, .faq-tools button:focus-visible, .faq-filter > summary:focus-visible { outline: var(--width-focus-outline) solid var(--color-accent); outline-offset: 2px; }
.faq-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-05); }
.faq-filter { position: relative; margin: 0; font-size: var(--font-size-small); }
.faq-filter[open] { z-index: 30; }
.faq-filter > summary { box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-05); height: var(--height-touch-target); padding: 8px 34px 8px 12px; list-style: none; cursor: pointer; background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23414b57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); }
.faq-filter > summary::-webkit-details-marker { display: none; }
.faq-filter[open] > summary { border-color: var(--color-accent); background-color: var(--color-selected-surface); }
.faq-filter .field-label { color: var(--color-muted); font-weight: 500; }
.faq-filter .filter-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); }
.faq-filter .filter-value[data-active="true"] { color: var(--color-link); font-weight: 650; }
.faq-filter .filter-popover { position: absolute; top: calc(100% + 6px); left: 0; box-sizing: border-box; width: min(340px, calc(100vw - 32px)); padding: 12px; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 8px; box-shadow: 0 8px 24px #1f232820; }
.faq-filter[data-kind="product"] .filter-popover { left: auto; right: 0; }
.faq-filter .filter-popover input[type="search"] { height: 36px; font-size: var(--font-size-small); padding: 7px 10px; margin-bottom: var(--space-05); }
.faq-filter .trait-match { margin: 0 0 var(--space-05); color: var(--color-muted); font-size: var(--font-size-caption); line-height: 1.4; }
.faq-filter .filter-choices { display: flex; flex-direction: column; max-height: min(260px, 45vh); overflow: auto; overscroll-behavior: contain; }
.faq-filter .filter-choices button { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px; font: inherit; text-align: left; color: var(--color-text); background: transparent; border: 0; border-radius: var(--radius-control); cursor: pointer; }
.faq-filter .filter-choices button::before { content: ""; width: 14px; height: 14px; box-sizing: border-box; border: 1.5px solid var(--color-border-strong); border-radius: 3px; background: var(--color-surface) center / 12px no-repeat; }
.faq-filter .filter-choices button[aria-pressed="true"] { color: var(--color-link); background: var(--color-selected-surface); }
.faq-filter .filter-choices button[aria-pressed="true"]::before { border-color: var(--color-accent); background-color: var(--color-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5 9-10' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.faq-filter .filter-choices button:hover:not(:disabled) { background: var(--color-selected-surface); }
.faq-filter .filter-choices button:disabled { color: var(--color-muted); cursor: default; }
.faq-filter .filter-choices button[hidden] { display: none; }
.faq-filter .choice-count { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.faq-filter .filter-none { margin: var(--space-05) 0 0; color: var(--color-muted); }
.faq-filter .filter-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.faq-tools .filter-footer button, .faq-reset, .faq-active button { min-height: 36px; padding: 5px 12px; font: inherit; font-size: var(--font-size-small); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); cursor: pointer; }
.faq-tools .filter-footer button[data-done], .faq-reset { color: var(--color-link); border-color: var(--color-selected-border); }
.faq-filter-note { margin: 0; color: var(--color-muted); font-size: var(--font-size-caption); }
.faq-results-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-05); }
.faq-status { margin: 0; color: var(--color-muted); font-size: var(--font-size-small); font-weight: 600; }
.faq-active { display: contents; }
.faq-active button { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--color-link); background: var(--color-selected-surface); border-color: var(--color-selected-border); }
.faq-active button span { overflow-wrap: anywhere; text-align: left; }
.faq-active svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.faq-empty { max-width: var(--width-reading-column); color: var(--color-muted); }
.faq[hidden], .faq-empty[hidden] { display: none; }
.faq-groups { margin: var(--space-075) 0 0; display: flex; flex-wrap: wrap; gap: 2px var(--space-1); color: var(--color-muted); font-size: var(--font-size-caption); line-height: 1.5; }
.faq-groups > div { display: flex; gap: 6px; min-width: 0; }
.faq-groups dt { font-weight: 600; }
.faq-groups dt::after { content: ":"; }
.faq-groups dd { margin: 0; overflow-wrap: anywhere; }