/* Shared visual foundation. Load after guide-specific styles so these tokens
   also replace the legacy defaults in the AI guide's embedded chapters. */
:root {
  color-scheme: light dark;
  --bg: #f7f8fb;
  --surface: #fff;
  --border: #d5dce7;
  --border-bright: #7b889e;
  --text: #182337;
  --text-dim: #526079;
  --accent: #284fc7;
  --ok: #1d7443;
  --warn: #836000;
  --risk: #b3301d;
  --info: #1b6a94;
  --lift: rgb(18 22 20 / .12);
  --body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: var(--body);
  --display: var(--body);
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --t-label: .75rem;
  --t-small: .875rem;
  --t-body: 1rem;
  --t-lead: 1.25rem;
  --t-h2: 1.625rem;
  --t-h1: clamp(2.25rem, 5.5vw, 4rem);
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --r-1: 4px;
  --r-2: 10px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121722;
    --surface: #1b2332;
    --border: #36435a;
    --border-bright: #788ba8;
    --text: #edf1f9;
    --text-dim: #b0bdd1;
    --accent: #a2bcff;
    --ok: #6cc492;
    --warn: #e3b94d;
    --risk: #f0806b;
    --info: #6fb8dc;
    --lift: rgb(0 0 0 / .45);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f8fb;
  --surface: #fff;
  --border: #d5dce7;
  --border-bright: #7b889e;
  --text: #182337;
  --text-dim: #526079;
  --accent: #284fc7;
  --ok: #1d7443;
  --warn: #836000;
  --risk: #b3301d;
  --info: #1b6a94;
  --lift: rgb(18 22 20 / .12);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121722;
  --surface: #1b2332;
  --border: #36435a;
  --border-bright: #788ba8;
  --text: #edf1f9;
  --text-dim: #b0bdd1;
  --accent: #a2bcff;
  --ok: #6cc492;
  --warn: #e3b94d;
  --risk: #f0806b;
  --info: #6fb8dc;
  --lift: rgb(0 0 0 / .45);
}
:root[data-theme="light"] .primary { color: var(--surface); }
:root[data-theme="dark"] .primary { color: var(--bg); }

* { box-sizing: border-box; }
html { font-size: 17px; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--t-body)/1.55 var(--body);
  font-kerning: normal;
  font-synthesis: none;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -.04em; }
h2 { font-size: var(--t-h2); line-height: 1.2; letter-spacing: -.01em; }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select { font: inherit; }
button, select {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-1);
  padding: var(--s-2) var(--s-3);
  font: 400 var(--t-small)/1.4 var(--mono);
  min-height: 2.75rem;
}
button { cursor: pointer; }
button:hover, select:hover { border-color: var(--accent); }
button:disabled { cursor: not-allowed; color: var(--text-dim); border-color: var(--border); }
button.primary:disabled { color: var(--surface); }
@media (prefers-color-scheme: dark) {
  button.primary:disabled { color: var(--bg); }
}
#loop .loop-actions button.primary:disabled {
  color: var(--surface);
  background: var(--accent);
  border-color: var(--accent);
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
  #loop .loop-actions button.primary:disabled { color: var(--bg); }
}
#loop .loop-actions button:disabled:not(.primary) {
  color: var(--text);
  border-color: var(--border-bright);
  opacity: 1;
}
#loop .scenario {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
}
#loop .user-message {
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--accent);
  background: var(--bg);
}
#loop .user-message .micro { color: var(--accent); }
#loop .user-message p { margin-top: var(--s-1); }
#loop .scenario-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  margin: 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
}
#loop .scenario-controls legend {
  padding: 0 var(--s-1);
  font: var(--t-label) var(--mono);
  color: var(--text-dim);
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
input { accent-color: var(--accent); }
code, .mono { font-family: var(--mono); }
[hidden] { display: none !important; }

/* Common collection navigation, independent of each guide's local navigation. */
.site-nav { border-bottom: 1px solid var(--border); background: var(--bg); }
.site-nav-inner {
  max-width: 64rem;
  margin: auto;
  padding: var(--s-3) var(--s-5);
}
.site-home { font: 600 var(--t-small)/1.5 var(--mono); text-decoration: none; }
.site-home:hover { text-decoration: underline; }
.footer-meta {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
.footer-credit { margin: 0; }
.footer-credit a { margin-right: 0; }
.footer-meta .theme-toggle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  min-height: 2.5rem;
  padding: var(--s-2);
  border-color: transparent;
  background: transparent;
  color: var(--text);
}
.footer-meta .theme-toggle:hover { background: var(--surface); }
.footer-meta .theme-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 700px) {
  .footer-meta { flex-wrap: wrap; }

  .site-nav-inner { padding-inline: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  :root {
    color-scheme: light;
    --bg: #fff;
    --surface: #fff;
    --text: #182337;
    --text-dim: #526079;
    --border: #d5dce7;
    --border-bright: #7b889e;
    --accent: #284fc7;
    --ok: #1d7443;
    --warn: #836000;
    --risk: #b3301d;
    --info: #1b6a94;
    --lift: none;
  }
  .site-nav { display: none; }
}

/* Focused, card-based chapters: the AI guide is the visual reference. */
.concept-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,13rem),1fr)); gap: var(--s-3); margin-block: var(--s-4); }
.concept-card { min-width: 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-1); background: var(--surface); font-size: var(--t-small); }
.concept-card > strong, .concept-card > span { display: block; }
.concept-card > span, .concept-card > p { color: var(--text-dim); margin-top: var(--s-1); }
.concept-card h3, .concept-card h4 { margin: 0 0 var(--s-1); font-size: 1rem; line-height: 1.4; }
.guide-dock { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border); }
.guide-dock-inner { max-width: 64rem; margin: auto; padding: var(--s-3) var(--s-5) var(--s-2); }
.guide-dock-heading { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); font: var(--t-label)/1.5 var(--mono); color: var(--text-dim); }
.guide-dock-heading strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.guide-dock-heading span { flex-shrink: 0; }
.guide-tabs { display: grid; grid-template-columns: repeat(var(--guide-count),minmax(6.3rem,1fr)); gap: var(--s-2); overflow-x: auto; scrollbar-width: thin; padding: 3px 3px var(--s-2); margin: -3px; scroll-padding: 3px; }
.guide-tab { display: block; min-width: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--border-bright); border-radius: var(--r-1); text-decoration: none; color: var(--text); background: var(--surface); font: var(--t-small)/1.4 var(--mono); }
.guide-tab strong { display: block; font-weight: 400; }
.guide-tab small { display: block; margin-top: var(--s-1); color: var(--text-dim); font: var(--t-label)/1.4 var(--body); }
.guide-tab[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 -3px var(--accent); }
.guide-tab:hover { border-color: var(--accent); }
.guide-enhanced main { max-width: 64rem; margin: auto !important; padding: var(--s-5) var(--s-5) var(--s-6); }
.guide-enhanced main h1 { font-size: clamp(1.875rem,3.7vw,2.75rem); margin-block: var(--s-2) var(--s-3); max-width: none; }
.guide-enhanced main > header:not(.guide-panel) { margin-bottom: var(--s-5); }
.guide-enhanced main > header .lead { font-size: 1.1rem; max-width: 65ch; }
.guide-enhanced .section-nav, .guide-enhanced > .nav { display: none !important; }
.guide-enhanced .guide-panel { padding-top: 0 !important; scroll-margin-top: calc(var(--guide-dock-height,8rem) + 1rem); }
.guide-enhanced main[id], .guide-enhanced .guide-panel [id] { scroll-margin-top: calc(var(--guide-dock-height,8rem) + 1rem); }
.guide-panel > .eyebrow, .guide-panel > .section-head { padding-top: 0 !important; border-top: 0 !important; }
.guide-panel > h2, .guide-panel > .section-head h2 { margin-block: var(--s-2) var(--s-3); }
.guide-panel > p { margin-bottom: var(--s-4); }
.guide-enhanced .panel, .guide-enhanced .frame { padding: var(--s-4); }
.guide-enhanced .narration { margin-top: var(--s-4); min-height: 6rem; }
.guide-enhanced .narration h3 { font-size: 1.1rem; }
.guide-enhanced .rt-caption { min-height: 6rem; margin-top: var(--s-4); }
.guide-enhanced .rt-inbox { min-height: 6rem; }
.guide-enhanced #journey-player { top: var(--guide-dock-height,8rem); }
.guide-enhanced .note, .guide-enhanced .takeaway, .guide-enhanced figcaption { font-size: var(--t-small); margin-top: var(--s-4); }
.guide-enhanced .takeaway { font-weight: 500; }
.guide-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); border-top: 1px solid var(--border); padding-top: var(--s-4); }
.guide-pager span { font: var(--t-small)/1.4 var(--mono); color: var(--text-dim); }
.guide-enhanced main > footer { margin-top: var(--s-5); padding-top: 0; border-top: 0; }
.guide-sources { margin-top: var(--s-4); border-top: 1px solid var(--border); padding-top: var(--s-3); font-size: var(--t-small); }
.guide-sources summary, .model-notes summary { cursor: pointer; color: var(--text-dim); font-size: var(--t-small); }
.model-notes { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.model-notes p { margin-top: var(--s-2); color: var(--text-dim); font-size: var(--t-small); }
.choice-field { min-width: 0; display: grid; gap: var(--s-2); }
.toolbar > .choice-field { flex: 1 1 100%; width: 100%; }
.guide-enhanced .timing-details .timeline { border-top: 0; margin-top: var(--s-3); }
.guide-enhanced .simulator, .guide-enhanced .preview { min-height: 19rem; }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,7.5rem),1fr)); gap: var(--s-2); min-width: 0; width: 100%; flex: 1 1 100%; }
.choice-cards.is-compact { grid-template-columns: repeat(auto-fit,minmax(min(100%,3rem),1fr)); }
.choice-card { text-align: left; overflow-wrap: anywhere; min-width: 0; padding: var(--s-2) var(--s-3); }
.choice-card strong { display: block; font-weight: 400; }
.choice-card small { display: block; margin-top: var(--s-1); font: var(--t-label)/1.4 var(--body); color: var(--text-dim); }
.choice-card[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 -3px var(--accent); }
.choice-card:disabled { opacity: .65; }
.choice-cards.is-compact .choice-card { text-align: center; padding-inline: var(--s-1); }
@media (max-width:700px) {
  .guide-dock-inner { padding-inline: var(--s-4); }
  .guide-enhanced main { padding: var(--s-4); }
  .guide-tabs { grid-template-columns: repeat(var(--guide-count),minmax(6.75rem,1fr)); }
  .guide-tab { padding: var(--s-2); }
  .guide-tab small { display: none; }
  .guide-enhanced main > header .lead { font-size: 1rem; }
  .guide-enhanced .narration { min-height: 0; }
  .guide-pager button { font-size: var(--t-label); }
}
@media print {
  .guide-dock, .guide-pager, .choice-cards { display: none !important; }
  select.choice-native[hidden] { display: inline-block !important; }
  .guide-enhanced .guide-panel[hidden], .guide-enhanced main > header[hidden] { display: block !important; }
  .guide-enhanced main { margin: 0 !important; padding: 0; }
  .guide-enhanced .guide-panel { margin-top: 2rem; }
  .guide-enhanced #journey-player { position: static; }
}