/* Shared public-site design foundation. Keep palette and radii aligned with
   apps/mobile/lib/theme/app_theme.dart, which serves web, iOS and Android. */
:root {
  color-scheme: light dark;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --c-bg: #faf8f3;
  --c-bg-alt: #f3f2ec;
  --c-card: #ffffff;
  --c-ink: #242824;
  --c-body: #373c35;
  --c-muted: #5b6056;
  --c-faint: #64695f;
  --c-line: #daddd3;
  --c-accent: #944c39;
  --c-on-accent: #ffffff;
  --c-accent-soft: #f0e5da;
  --c-header-bg: rgba(250, 248, 243, .94);
  --radius-control: 12px;
  --radius-card: 12px;
  /* The chapter reader consumes these semantic names. */
  --paper: var(--c-bg);
  --ink: var(--c-ink);
  --muted: var(--c-muted);
  --line: var(--c-line);
  --accent: var(--c-accent);
  --soft: var(--c-bg-alt);
  --serif: var(--font-serif);
  --sans: var(--font-sans);
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #171a17;
    --c-bg-alt: #22261f;
    --c-card: #1d201c;
    --c-ink: #eceee5;
    --c-body: #d8ddcf;
    --c-muted: #c4c9bc;
    --c-faint: #a8b19d;
    --c-line: #42483e;
    --c-accent: #dfaa93;
    --c-on-accent: #472a20;
    --c-accent-soft: #49332a;
    --c-header-bg: rgba(23, 26, 23, .94);
  }
}
.site-logo, .topbar .brand, #footer .brand {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -.035em;
}
.site-logo, .topbar .brand { color: var(--c-ink); font-size: 24px; }
.site-nav .site-nav__cta, .topbar .pill-link,
.web-hero .cta-btn, #submit-btn, .sticky-cta {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
  border-radius: var(--radius-control);
  font-weight: 600;
  min-height: 44px;
}
/* Existing page rules mark header CTA color important. */
.site-nav .site-nav__cta { color: var(--c-on-accent) !important; }
.web-hero .cta-btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line);
}
.book-preview, .mobile-companion, .plan, .book, .diagram,
.sample-video, .lab { border-radius: var(--radius-card); }
.book-preview, .book, .diagram { background: var(--c-card); color: var(--c-ink); }
.book-preview-caption, .diagram figcaption { border-color: var(--c-line); }
.book.final-stretch, .lab { background: var(--c-bg-alt); border-color: var(--c-line); }
.recall { background: var(--c-accent-soft); }
.lab .scale { color: var(--c-muted); }
.lab input { accent-color: var(--c-accent); }
.lab select { background: var(--c-card); color: var(--c-ink); border-color: var(--c-line); border-radius: var(--radius-control); }
.tool-result { border-color: var(--c-line); }
.topbar .pill-link { display: inline-flex; align-items: center; }
@media (max-width: 520px) { .topbar .pill-link { display: none; } }

/* Actual study screens stay large enough to inspect, with full-size access. */
#app-showcase.web-workspace > .inner { max-width: 1180px; padding: 0; text-align: left; }
.study-gallery { margin-top: 64px; scroll-margin-top: 100px; }
.study-feature { display: grid; grid-template-columns: minmax(210px, .75fr) minmax(0, 2fr); gap: 36px; align-items: center; padding: 44px 0; border-top: 1px solid var(--c-line); }
.study-feature-copy h3 { font-family: var(--font-serif); font-size: clamp(28px, 3vw, 38px); font-weight: 500; line-height: 1.14; letter-spacing: -.025em; margin: 18px 0; }
.study-feature-copy p { color: var(--c-muted); font-size: 15px; line-height: 1.8; margin-bottom: 22px; }
.study-feature-copy > a { color: var(--c-ink); font-size: 14px; font-weight: 600; text-underline-offset: 5px; }
.study-feature figure { margin: 0; min-width: 0; }
.study-capture { display: block; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius-card); background: #faf8f3; box-shadow: 0 12px 32px #2428240a; }
.study-capture img { display: block; width: 100%; height: auto; }
.study-capture video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 900; }
#flashcard-preview { scroll-margin-top: 100px; }
#flashcard-preview-toggle { font: inherit; color: var(--c-accent); background: transparent; border: 1px solid var(--c-line); border-radius: 6px; padding: 8px 12px; cursor: pointer; }
#flashcard-preview-toggle:focus-visible, .preview-transcript summary:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.preview-transcript { margin-top: 12px; color: var(--c-muted); font-size: 13px; line-height: 1.7; }
.preview-transcript summary { cursor: pointer; width: fit-content; }
.preview-transcript p { margin: 10px 0; }
.study-capture:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 5px; }
.study-feature figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--c-muted); line-height: 1.6; padding: 12px 2px 0; }
@media (max-width: 860px) { .study-feature { grid-template-columns: 1fr; gap: 24px; } .study-feature-copy { max-width: 540px; } .study-gallery { margin-top: 40px; } }

/* Public chapter shelf and responsive teaching figures. */
.free-chapters { padding: 32px 0 0; }
.sample-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 28px 0; }
.sample-next > a { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--c-line); background: var(--c-card); border-radius: var(--radius-card); color: var(--c-ink); text-decoration: none; }
.sample-next > a:hover { border-color: var(--c-accent); }
.sample-next small { color: var(--c-muted); font: 500 12px/1.6 var(--font-sans); }
.sample-next strong { font: 500 25px/1.2 var(--font-serif); }
.sample-next p { margin: 0; color: var(--c-muted); font: 400 14px/1.7 var(--font-sans); }
.sample-next .sample-action { margin-top: auto; font: 600 13px/1.6 var(--font-sans); color: var(--c-accent); }
.mechanism-figure { margin: 28px 0; padding: 28px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-card); }
.mechanism-figure figcaption { border-top: 1px solid var(--c-line); margin-top: 24px; padding-top: 18px; font-size: 13px; line-height: 1.7; color: var(--c-muted); }
.mechanism-flow { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0; }
.mechanism-flow li { border-top: 2px solid var(--c-accent); padding-top: 16px; }
.mechanism-flow span { color: var(--c-accent); font-size: 12px; }
.mechanism-flow strong, .mechanism-flow small { display: block; margin-top: 12px; line-height: 1.6; }
.mechanism-flow small { color: var(--c-muted); }
.signal-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.signal-pair h3 { font-size: 24px; }
.signal-pair svg { width: 100%; overflow: visible; }
.signal-pair p { font-size: 14px; margin: 12px 0 0; }
.signal-label { color: var(--c-muted); }
.signal-axis { stroke: var(--c-line); fill: none; stroke-width: 2; }
.signal-line { stroke: var(--c-accent); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.prose li { line-height: 1.8; margin: 12px 0; }
@media (max-width: 760px) { .sample-next { grid-template-columns: 1fr; } .mechanism-flow, .signal-pair { grid-template-columns: 1fr; } .mechanism-figure { padding: 20px; } }
.free-chapters { padding: 48px max(5vw, 20px); scroll-margin-top: 96px; }
.free-chapters > .inner { max-width: 1180px; padding: 0; }
.free-chapters .chapter-meta { font-size: 13px; color: var(--c-muted); padding-bottom: 24px; }