/*
  Evolution Study Guide - shared stylesheet
  ==========================================
  Single stylesheet for the entire site (build spec section 6). No page may
  duplicate these rules in a page-specific <style> block. New visual patterns
  should be added here as reusable classes rather than inline.

  Phase 2 note: the callout, figure/figcaption, hero-banner, and
  <details>/<summary> conventions below are the hardened contract every
  content page (Phases 3-7) should build on as-is -- if a content phase
  seems to need a new callout type or structural pattern this file
  doesn't already provide, that's a contract change and should be flagged
  to the orchestrator rather than added ad hoc in a content fragment.

  Table of contents:
    1. Custom properties / reset
    2. Base typography
    3. Layout (header, nav, main, footer)
    4. Skip link
    5. Mobile navigation toggle
    6. Chapter navigation (prev/next/back-to-top)
    7. Cards
    8. Callouts
    9. Tables
    10. Figures
    11. Details / summary
    12. Source labels
    13. Glossary links
    14. Focus and accessibility states
    15. Print rules
    16. Reduced motion
*/

/* 1. Custom properties / reset ------------------------------------------ */

:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f4f6f8;
  --color-text: #1a1d21;
  --color-text-muted: #4b5158;
  --color-border: #d3d8dd;
  --color-link: #1b4b91;
  --color-link-visited: #5a3d91;
  --color-focus: #1b4b91;
  --color-brand: #16324f;

  --color-evidence: #1e6e3c;
  --color-evidence-bg: #eaf6ee;
  --color-challenge: #a3401b;
  --color-challenge-bg: #fbeee6;
  --color-limit: #55606b;
  --color-limit-bg: #eef1f3;
  --color-open-question: #6a3d9a;
  --color-open-question-bg: #f2ecf9;
  --color-falsification: #1b4b91;
  --color-falsification-bg: #e9f0fa;
  --color-assessment: #0f6f6a;
  --color-assessment-bg: #e6f5f4;
  --color-summary: #7a5b00;
  --color-summary-bg: #fbf3df;

  /* Source-type badge palette (section 13/16): deliberately a different
     hue set from the callout palette above so a "source type" badge next
     to a citation is never visually confusable with an "evidence" or
     "open question" callout box elsewhere on the page. All pairs below
     are contrast-checked at >=4.5:1 (WCAG AA, normal text). */
  --color-src-primary: #0b5fa5;
  --color-src-primary-bg: #e8f2fb;
  --color-src-theoretical: #8a4b12;
  --color-src-theoretical-bg: #faf1e6;
  --color-src-review: #146b5c;
  --color-src-review-bg: #e6f5f1;
  --color-src-methods: #3d5a73;
  --color-src-methods-bg: #e7eef3;
  --color-src-critique: #5a3d8a;
  --color-src-critique-bg: #efe9f7;
  --color-src-org: #2f6b1f;
  --color-src-org-bg: #eef6e9;
  --color-src-id: #883e7a;
  --color-src-id-bg: #f9eef6;
  --color-src-creationist: #9c3b2e;
  --color-src-creationist-bg: #fbebe8;
  --color-src-historical: #55606b;
  --color-src-historical-bg: #eef1f3;

  --content-max-width: 72ch;
  --wide-max-width: 90rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --radius: 0.375rem;
}

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

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Georgia", "Cambria", "Times New Roman", serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-link);
}

a:visited {
  color: var(--color-link-visited);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: var(--color-brand);
  line-height: 1.25;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

main :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

p,
ul,
ol,
dl {
  margin-top: 0;
  margin-bottom: var(--space-md);
}

/* 3. Layout --------------------------------------------------------------- */

.site-header {
  background: var(--color-brand);
  color: #fff;
  padding: var(--space-lg) var(--space-md);
}

.site-header__inner {
  max-width: var(--wide-max-width);
  margin: 0 auto;
  position: relative;
}

.site-header__eyebrow {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c8d6e8;
}

.site-header__brand {
  display: block;
  color: #fff;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  margin: var(--space-xs) 0;
}

.site-header__brand:visited {
  color: #fff;
}

.site-header__tagline {
  margin: 0;
  color: #dbe4ee;
  max-width: 60ch;
}

main {
  display: block;
  max-width: var(--wide-max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
}

main > .page-content {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/* --content-max-width (72ch) is tuned for comfortable line length, but
   left flat it pins .page-content to the same ~650px column on a
   1440-1920px desktop as on a tablet, wasting the width `main` (capped
   at --wide-max-width, 90rem) already allows -- and it caps .card-grid /
   .table-wrapper / figure to that same column, so they can't use the
   extra room either. Widen the variable in two desktop tiers so prose
   still reads well (line length stays under ~100ch) while wider
   viewports get a noticeably wider column; `margin: 0 auto` above keeps
   it centered in `main` at every width instead of hugging the left edge.
   Breakpoints chosen to sit above the existing 48em mobile-nav breakpoint
   (section 5) and match common tablet-landscape / desktop steps. */
@media (min-width: 60em) {
  :root {
    --content-max-width: 88ch;
  }
}

@media (min-width: 80em) {
  :root {
    --content-max-width: 100ch;
  }
}

.site-footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding: var(--space-lg) var(--space-md);
}

.site-footer__inner {
  max-width: var(--wide-max-width);
  margin: 0 auto;
}

.site-footer__note {
  color: var(--color-text-muted);
  max-width: var(--content-max-width);
  font-size: 0.9rem;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

/* 4. Skip link ------------------------------------------------------------ */

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background: #fff;
  color: var(--color-brand);
  padding: var(--space-sm) var(--space-md);
  z-index: 1000;
}

.skip-link:focus {
  left: var(--space-md);
  top: var(--space-sm);
  width: auto;
  height: auto;
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* 5. Mobile navigation toggle ---------------------------------------------- */

.nav-toggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-md);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  cursor: pointer;
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.primary-nav {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.primary-nav__list {
  list-style: none;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  max-width: var(--wide-max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}

.primary-nav__list a {
  display: inline-block;
  padding: var(--space-xs) var(--space-xs);
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 2px solid transparent;
}

.primary-nav__list a:hover {
  border-bottom-color: var(--color-link);
}

.primary-nav__list a[aria-current="page"] {
  font-weight: 700;
  border-bottom-color: var(--color-brand);
}

@media (max-width: 48em) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
  }

  /* The toggle button is `position: absolute; top: 0; right: 0` inside
     `.site-header__inner` (see section 3/5), so it's removed from normal
     flow and the header text has no automatic awareness of it. Without
     this reserved right-hand gutter, the eyebrow/brand/tagline text can
     render underneath the button at narrow widths (verified by reading
     the layout, not in a real browser -- flagged for Phase 9 visual
     check at 320px) instead of wrapping around it. Reserving space here,
     scoped to the same breakpoint the button becomes visible at, avoids
     that without affecting the desktop layout at all. */
  .site-header__inner {
    padding-right: 5rem;
  }

  .primary-nav__list {
    flex-direction: column;
    gap: 0;
  }

  .primary-nav__list a {
    padding: var(--space-sm) var(--space-xs);
    border-bottom: 1px solid var(--color-border);
  }

  /* JS toggles the [hidden] attribute on #primary-navigation. With
     JavaScript disabled the attribute is never applied, so the menu
     remains visible and usable, per the no-JS requirement. */
}

/* 5b. In-page quick navigation ---------------------------------------------- */

.quick-nav {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
}

.quick-nav__label {
  margin: 0 0 var(--space-xs);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.quick-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}

.quick-nav__list a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.quick-nav__list a:hover,
.quick-nav__list a:focus {
  border-bottom-color: var(--color-link);
}

/* 6. Chapter navigation ---------------------------------------------------- */

.chapter-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.chapter-nav__prev,
.chapter-nav__next,
.chapter-nav__top {
  text-decoration: none;
}

.chapter-nav__next {
  margin-left: auto;
  text-align: right;
}

/* 7. Cards ------------------------------------------------------------------ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  background: var(--color-bg-alt);
}

.card h3 {
  margin-top: 0;
}

/* 8. Callouts ---------------------------------------------------------------- */

/*
  Seven reusable evidence-pattern classes (build spec section 10, plan
  Phase 2 task list): .callout.evidence / .challenge / .limit /
  .open-question / .falsification / .assessment / .summary.

  Mapping from build-spec section 10's seven *conceptual* labels onto
  these seven *class names* (documented here since the two lists don't
  name-match one-for-one):
    Evidence                  -> .callout.evidence
    Challenge                 -> .callout.challenge
    What This Shows           -> (no dedicated class -- state the narrow
                                   defensible inference as plain prose
                                   immediately before/after .limit; it is
                                   normally one sentence, not a boxed
                                   callout, and pairs directly with...)
    What This Does Not Prove  -> .callout.limit (the inferential-boundary
                                   box; labeled "What This Does Not Prove"
                                   below, reusing the spec's own phrase
                                   directly as the visible category label)
    Open Question              -> .callout.open-question
    Falsification Test         -> .callout.falsification
    Assessment                  -> .callout.assessment
    (none in section 10)        -> .callout.summary (end-of-section
                                   "Key Takeaways" box per section 18 /
                                   the chapter-conclusion pattern in
                                   section 17 -- a distinct wrap-up
                                   pattern, not one of section 10's
                                   evidence/challenge pairing, but
                                   required as its own class by the plan)

  Each class gets a colored left border + background tint (visual
  reinforcement only) *and* an always-present text label generated via
  ::before (the actual accessibility guarantee -- see note below). No
  required information is conveyed by color alone: remove all color and
  the label text, border weight, and background-box shape still identify
  the category (verify by reading in grayscale / print preview).

  Accessibility note (verified by reading the CSS, not in a real
  screen reader -- flag for Phase 9 manual QA): generated ::before
  content is announced by NVDA, JAWS, and VoiceOver in their default
  configurations, but support has historically been inconsistent across
  AT/browser combinations. Content authors in Phases 3-7 who want a
  guaranteed-in-the-DOM heading (e.g. for a screen-reader "list headings"
  jump, not just linear reading) can additionally add a real heading or
  a `.callout__label` element as the callout's first child; `.callout__label`
  is intentionally left available for that purpose (or for a custom title
  distinct from the generic category badge, e.g. "Case Study: Chromosome 2").
*/

.callout {
  border: 1px solid var(--color-border);
  border-left-width: 0.3rem;
  border-radius: var(--radius);
  padding: var(--space-md);
  margin: var(--space-lg) 0;
  background: var(--color-bg-alt);
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout::before {
  display: inline-block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  margin-bottom: var(--space-sm);
  color: #fff;
  background: var(--color-limit);
}

.callout__label {
  display: block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin: var(--space-sm) 0;
}

.callout.evidence {
  border-left-color: var(--color-evidence);
  background: var(--color-evidence-bg);
}
.callout.evidence::before {
  content: "Evidence";
  background: var(--color-evidence);
}

.callout.challenge {
  border-left-color: var(--color-challenge);
  background: var(--color-challenge-bg);
}
.callout.challenge::before {
  content: "Challenge";
  background: var(--color-challenge);
}

.callout.limit {
  border-left-color: var(--color-limit);
  background: var(--color-limit-bg);
}
.callout.limit::before {
  content: "What This Does Not Prove";
  background: var(--color-limit);
}

.callout.open-question {
  border-left-color: var(--color-open-question);
  background: var(--color-open-question-bg);
}
.callout.open-question::before {
  content: "Open Question";
  background: var(--color-open-question);
}

.callout.falsification {
  border-left-color: var(--color-falsification);
  background: var(--color-falsification-bg);
}
.callout.falsification::before {
  content: "Falsification Test";
  background: var(--color-falsification);
}

.callout.assessment {
  border-left-color: var(--color-assessment);
  background: var(--color-assessment-bg);
}
.callout.assessment::before {
  content: "Assessment";
  background: var(--color-assessment);
}

.callout.summary {
  border-left-color: var(--color-summary);
  background: var(--color-summary-bg);
}
.callout.summary::before {
  content: "Summary";
  background: var(--color-summary);
}

/* 9. Tables ------------------------------------------------------------------ */

.table-wrapper {
  overflow-x: auto;
  margin: var(--space-lg) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
}

/*
  .table-breakout: lets a wide, column-heavy table (the evidence matrix,
  common descent's prediction table) use the page's full --wide-max-width
  (90rem) instead of being squeezed into .page-content's prose column
  (--content-max-width, capped at 100ch -- comfortably narrower than
  --wide-max-width even at its widest tier). Without this, a 7-column
  table has to divide ~900-960px across its columns, which forces either
  one-word-per-line wrapping in some columns or a horizontal scrollbar in
  others (both observed before this rule existed).

  The outer .table-breakout expands to the full viewport width via the
  standard "vw breakout" trick -- this works regardless of how narrow
  .page-content's own max-width is, since it's computed from the
  viewport, not the parent. The nested .table-wrapper then re-centers
  itself inside that full-width strip, capped at --wide-max-width, so it
  ends up matching `main`'s own outer width (see section 3) rather than
  spanning edge-to-edge on an ultra-wide monitor. Scoped to the same 48em
  breakpoint as the .matrix-table stacking below it turns on at, since
  below that width the stacked-card layout already uses the full
  available width and doesn't need extra room.
*/
@media (min-width: 48em) {
  .table-breakout {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 var(--space-md);
  }

  .table-breakout > .table-wrapper {
    max-width: var(--wide-max-width);
    margin-left: auto;
    margin-right: auto;
  }

  /* table-layout:fixed hands column width entirely to the <col>
     percentages below, instead of the browser's auto-layout algorithm --
     which was giving very uneven results (some columns crushed to one
     word per line, others left wide enough to force the horizontal
     scrollbar this rule exists to avoid). Each table's <colgroup> in its
     content fragment supplies one <col> per column, in column order;
     widths are set here (rather than inline on <col>) to keep styling in
     this stylesheet per this file's own no-inline-styles convention. */
  .matrix-table {
    table-layout: fixed;
  }

  .evidence-matrix-table col:nth-child(1) { width: 22%; }
  .evidence-matrix-table col:nth-child(2) { width: 78%; }

  .common-descent-table col:nth-child(1) { width: 26%; }
  .common-descent-table col:nth-child(2) { width: 37%; }
  .common-descent-table col:nth-child(3) { width: 37%; }

  .sources-table col:nth-child(1) { width: 52%; }
  .sources-table col:nth-child(2) { width: 16%; }
  .sources-table col:nth-child(3) { width: 14%; }
  .sources-table col:nth-child(4) { width: 18%; }

  /* Matrix column's own field/content split, mirroring the outer
     evidence-matrix-table's col widths above -- .evidence-fields has no
     <colgroup> of its own, so this is set directly on <th>. */
  .evidence-fields th {
    width: 30%;
  }
}

caption {
  text-align: left;
  font-weight: 700;
  padding: var(--space-sm);
  font-family: "Helvetica Neue", Arial, sans-serif;
}

th,
td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  /* Fixed-width columns (table-layout:fixed, used by .matrix-table at
     desktop widths -- see below) can't grow a column to fit content the
     way auto layout does; a run with no normal break opportunity (e.g. a
     slash-joined "genotype/phenotype/selection" with no surrounding
     spaces) would otherwise overflow past the column's fixed width
     instead of wrapping. This only ever engages as a fallback for text
     that has nowhere else to break -- ordinary space-separated prose is
     unaffected. */
  overflow-wrap: break-word;
}

thead th {
  background: var(--color-bg-alt);
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/*
  .evidence-fields: the nested table inside each evidence-matrix row's
  "Matrix" cell -- one field/content pair per row (Evidence For, Strongest
  Challenge, What Is Directly Observed, What Is Inferred, Open Question).
  Base rules here cover both breakpoints' shared look (the field name
  reads as a small-caps label, not a second prose column); the
  min-width:48em block above sets the desktop side-by-side width split,
  and the max-width:48em block below stacks field above content on
  narrow screens, matching this file's other in-cell label pattern.
*/
.evidence-fields {
  width: 100%;
  border-collapse: collapse;
}

.evidence-fields th,
.evidence-fields td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px dotted var(--color-border);
}

.evidence-fields tr:last-child th,
.evidence-fields tr:last-child td {
  border-bottom: none;
}

.evidence-fields th {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

/*
  .matrix-table: opt-in modifier for tables whose cells hold paragraph-length
  content (the evidence matrix's 7 columns, common descent's prediction-
  comparison table) rather than short values. A plain horizontal scroll
  (the default table-wrapper behavior above) leaves these unreadable on
  narrow screens -- each column ends up a sliver a few words wide. Below
  the same 48em breakpoint used for nav collapse, these tables instead
  reflow into one stacked card per row, full-width, with each cell's
  column heading printed above it via the `data-label` attribute content
  authors add to every non-topic <td>. Ordinary short-content tables
  (e.g. the sources index) keep the horizontal-scroll default -- they
  don't opt into this class and don't need `data-label`.
*/
@media (max-width: 48em) {
  .matrix-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .matrix-table,
  .matrix-table caption,
  .matrix-table > tbody,
  .matrix-table > tbody > tr,
  .matrix-table > tbody > tr > td {
    display: block;
    width: 100%;
  }

  .matrix-table {
    min-width: 0;
  }

  /*
    Scoped with a `> tbody > tr` / `> tbody > tr > td` child chain rather
    than a plain descendant selector (`.matrix-table tr`, `.matrix-table
    td`): the evidence-matrix's "Matrix" cell nests a second table
    (.evidence-fields, styled separately below) inside a <td> of *this*
    table, and a plain descendant selector would also match that inner
    table's own <tr>/<td> -- which is how its rows first ended up with
    this card's own rounded border wrapped around every field instead of
    the intended plain divider line.
  */
  .matrix-table > tbody > tr {
    padding: var(--space-sm);
    margin-bottom: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .matrix-table > tbody > tr:last-child {
    margin-bottom: 0;
  }

  .matrix-table > tbody > tr > td {
    padding: var(--space-sm) 0;
    border-bottom: 1px dotted var(--color-border);
  }

  .matrix-table > tbody > tr > td:last-child {
    border-bottom: none;
  }

  /* First column (the topic name + status) reads as the card's title,
     not a labeled field, so it's styled bigger/bolder instead of getting
     a "Topic" heading printed above it. */
  .matrix-table > tbody > tr > td:first-child {
    padding-top: 0;
    font-size: 1.05rem;
    font-weight: 700;
  }

  .matrix-table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-xs);
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
  }

  /* The evidence-matrix's inner .evidence-fields table (field name +
     content per row) stacks the same way the outer .matrix-table does --
     field name above, content below, full width -- rather than staying a
     cramped two-column table inside an already-narrow card. */
  .evidence-fields,
  .evidence-fields tbody,
  .evidence-fields tr,
  .evidence-fields th,
  .evidence-fields td {
    display: block;
    width: 100%;
  }

  /* .evidence-fields is itself a <table> and so also picks up the generic
     `table { min-width: 32rem; }` rule above -- without resetting it here
     (as .matrix-table already does for itself just above), that 512px
     floor forces this nested table wider than its card on narrow phones,
     overflowing text past the card's border. */
  .evidence-fields {
    min-width: 0;
  }

  .evidence-fields tr {
    padding: var(--space-sm) 0;
    border-bottom: 1px dotted var(--color-border);
  }

  .evidence-fields tr:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  .evidence-fields th,
  .evidence-fields td {
    padding: 0;
    border-bottom: none;
  }

  .evidence-fields th {
    margin-bottom: var(--space-xs);
  }

  /* Each row is already its own bordered card once stacked, so the
     wrapper's outer border/padding would just double it up. :has()
     support is wide enough (Chromium, Safari, Firefox 121+) to treat
     this as a progressive enhancement -- browsers without it simply
     keep the harmless extra border. */
  .table-wrapper:has(.matrix-table) {
    border: none;
    border-radius: 0;
    overflow-x: visible;
  }
}

/* 10. Figures ------------------------------------------------------------------ */

/*
  Reusable wrapper for every diagram embed (build spec sections 6/11/12/19):
  a bordered, shaded box so a <figure> reads as clearly separated from
  surrounding body prose, a centered responsively-scaled image/SVG
  (max-width: 100% / height: auto -- see the global img/svg rule near the
  top of this file, restated here for clarity), and a left-aligned
  <figcaption> styled distinctly from body text. Diagram content itself
  (the SVG source) is responsible for not encoding information in color
  alone and for neutral labeling of competing interpretations (spec
  section 12); this stylesheet cannot enforce that, only provide the
  frame it's presented in.
*/

figure {
  margin: var(--space-lg) 0;
  padding: var(--space-md);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-align: center;
  max-width: 100%;
  overflow-x: auto;
}

figure img,
figure svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

figcaption {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-align: left;
}

figcaption::before {
  content: "Figure. ";
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

/*
  Hero banner -- index page only (build spec section 10: "the hero PNG
  only as the index-page orientation banner"). Two hard requirements:

  1. Readable overlaid text at every viewport. The previous version used
     a left-to-right fade (opaque at the left, ~15% opaque at the right),
     which is only safe if the text block is known to stay in the opaque
     zone -- with flex's default `align-items: stretch` the text block
     spans the *full* banner width, so a long heading/tagline that wraps
     could land partly over the near-transparent right edge and fail
     contrast against an unpredictable (user-supplied) photo. Replaced
     with a flat, uniform scrim: at the chosen alpha (0.78), white text
     keeps a >=4.5:1 contrast ratio (WCAG AA, normal text) even in the
     worst case of a pure-white pixel directly behind it -- verified by
     computing relative luminance / contrast ratio by hand for that
     worst case, not by rendering the actual photo. A uniform scrim
     therefore doesn't depend on where the text happens to wrap, at any
     of the three required breakpoints.
  2. No semantic information may exist only in the image. This banner is
     purely decorative chrome (image + heading/tagline text that must
     also be meaningful copy in its own right); it is not a substitute
     for the "what evolution does and does not mean" prose the index
     page's content fragment provides in ordinary text.

  Expected markup (for the Phase 3 index.html content fragment):

    <div class="hero-banner">
      <img src="images/evolution-study-guide-hero.png" alt="<meaningful alt text>">
      <div class="hero-banner__text">
        <div class="hero-banner__text-inner">
          <h1>...</h1>
          <p>...</p>
        </div>
      </div>
    </div>

  The <h1> belongs here (build spec section 19: "correct heading
  hierarchy" / one <h1> per page) -- the index page should have no other
  top-level heading, since this *is* the page's one required <h1>.
*/
.hero-banner {
  position: relative;
  margin: 0 auto var(--space-lg);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-brand);
}

/* Capped to --hero-banner's own max-width (50rem) rather than stretching
   to fill .page-content: the image's aspect ratio means a wider render
   is also a taller one, and .page-content can now run up to 100ch wide
   (see the --content-max-width breakpoints above) -- without this cap
   the banner would grow tall enough to push the page's actual content
   below the fold on a wide desktop viewport. */
.hero-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-banner__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-lg);
  background: linear-gradient(
    180deg,
    rgba(22, 50, 79, 0.82) 0%,
    rgba(22, 50, 79, 0.78) 100%
  );
  color: #fff;
}

.hero-banner__text-inner {
  max-width: 40rem;
}

.hero-banner__text h1 {
  color: #fff;
  margin: 0 0 var(--space-sm);
  font-size: clamp(1.5rem, 4vw + 1rem, 2.5rem);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.hero-banner__text p {
  margin: 0;
  max-width: 55ch;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* `.hero-banner` is `position: relative` with no fixed height, so its
   own height is driven by the <img>'s rendered height (intrinsic aspect
   ratio preserved via `width: 100%; height: auto`); the absolutely
   positioned `.hero-banner__text` (`inset: 0`) then exactly overlays
   that rendered image at every viewport width, including 320px where a
   wide source photo renders shortest. `.hero-banner__text-inner`'s
   40rem max-width keeps heading/tagline lines from stretching
   uncomfortably wide on a 1440px desktop banner. */

/* The source photo is a wide 21:9 crop, so its rendered height at a
   narrow (sub-48em) viewport is only a couple hundred px -- too short
   for the overlay's heading + tagline to fit inside `inset: 0` without
   spilling past the image's own edges. Rather than shrinking the type
   until it's illegible, drop the overlay and stack the text in normal
   flow below the image instead; the text block's height is then
   whatever the content needs, so it can never overflow. `--color-brand`
   (the gradient's underlying color, see `.hero-banner`'s own background
   above) keeps the same dark panel look without the gradient, which has
   nothing to fade over once it's not on top of the photo. */
@media (max-width: 48em) {
  .hero-banner {
    display: flex;
    flex-direction: column;
  }

  .hero-banner__text {
    position: static;
    background: var(--color-brand);
  }

  .hero-banner__text-inner {
    max-width: none;
  }
}

/* 11. Details / summary ---------------------------------------------------------- */

/*
  Used for the study-questions / glossary "reveal the answer" pattern
  (build spec section 5.15 / 7 / 18: use native <details>/<summary>
  rather than JavaScript for simple collapsible content). Requirements
  covered here:
    - a visible expand/collapse affordance that is not color-only (a
      rotating triangle glyph -- a shape change, not a color change --
      backed by the browser's own native open/closed semantics, so it
      also works with any assistive technology that exposes <details>'
      built-in expanded/collapsed state);
    - a real focus-visible ring on <summary> (it's a native interactive/
      focusable element, so it's already covered by section 14's shared
      a/button/input/summary/[tabindex] focus-visible rule below -- nothing
      additional needed here, just verified by reading that rule again);
    - legible styling in both the open and closed states;
    - forced-open content in print (see section 15) so a printed page
      never silently omits an answer that happened to be collapsed on
      screen.
*/

details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  background: var(--color-bg-alt);
}

summary {
  cursor: pointer;
  font-weight: 700;
  font-family: "Helvetica Neue", Arial, sans-serif;
  padding: var(--space-xs) var(--space-xs) var(--space-xs) 0;
  list-style: none;
}

/* Hide the native marker so the custom ::before glyph below is the only
   one shown (Chrome/Safari use ::-webkit-details-marker; Firefox and
   current Chromium/Safari also respect `list-style: none` on summary's
   native `display: list-item`, so both rules together cover the
   evergreen-browser set without depending on ::marker content overrides,
   which have spottier support specifically for <summary>). */
summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "\25B8"; /* ▸ closed-state triangle */
  display: inline-block;
  width: 1.1em;
  color: var(--color-brand);
}

details[open] > summary::before {
  content: "\25BE"; /* ▾ open-state triangle -- a shape change, not a
                        color change, so the state is legible without
                        color and in print/grayscale. */
}

summary:hover {
  text-decoration: underline;
}

details[open] summary {
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

/*
  .source-id: the SRC-### registry id, folded into the front of each
  sources.html row's Citation cell (see build/sources.py
  render_sources_index) instead of its own table column -- a bare id
  isn't a meaningful card title on its own, so the citation link is what
  gets the .matrix-table first-child title treatment, with this badge
  just providing the id for cross-reference back to the registry.
*/
.source-id {
  display: inline-block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

/* 12. Source labels ------------------------------------------------------------- */

/*
  .source-label + nine --source-label--<slug> modifiers: one per
  CANONICAL_CATEGORIES entry in build/sources.py (the actual 9-category
  classification scheme used for sources.html grouping and inline
  citation brackets), used by the static source-key legend
  (partials/source-key.html) to give each category a distinct,
  contrast-checked color identity. Kept as a separate palette from the
  callout colors above so a source-type badge is never visually
  confusable with an evidence/challenge/open-question callout box.
*/

.source-label {
  display: inline-block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
  white-space: nowrap;
}

.source-label--primary-research {
  color: var(--color-src-primary);
  background: var(--color-src-primary-bg);
  border-color: var(--color-src-primary);
}
.source-label--primary-theoretical-research-modeling {
  color: var(--color-src-theoretical);
  background: var(--color-src-theoretical-bg);
  border-color: var(--color-src-theoretical);
}
.source-label--review-synthesis {
  color: var(--color-src-review);
  background: var(--color-src-review-bg);
  border-color: var(--color-src-review);
}
.source-label--methods-conceptual {
  color: var(--color-src-methods);
  background: var(--color-src-methods-bg);
  border-color: var(--color-src-methods);
}
.source-label--scholarly-critique-response {
  color: var(--color-src-critique);
  background: var(--color-src-critique-bg);
  border-color: var(--color-src-critique);
}
.source-label--scientific-organization {
  color: var(--color-src-org);
  background: var(--color-src-org-bg);
  border-color: var(--color-src-org);
}
.source-label--id-advocate {
  color: var(--color-src-id);
  background: var(--color-src-id-bg);
  border-color: var(--color-src-id);
}
.source-label--creationist-research-organization {
  color: var(--color-src-creationist);
  background: var(--color-src-creationist-bg);
  border-color: var(--color-src-creationist);
}
.source-label--historical-source {
  color: var(--color-src-historical);
  background: var(--color-src-historical-bg);
  border-color: var(--color-src-historical);
}

.source-key__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.source-key__list li {
  margin-bottom: var(--space-sm);
}

/*
  Per-chapter "Sources for This Chapter" section (build spec section 14),
  generated by build/sources.py's render_chapter_sources_section(). The
  markup it emits (verified by reading build/sources.py directly):
    <section id="chapter-sources" class="chapter-sources">
      <h2 id="chapter-sources-heading">Sources for This Chapter</h2>
      <ul class="chapter-sources__list">
        <li><span class="chapter-sources__type">[Category]</span>
            <a ...>descriptive label</a></li>
        ...
      </ul>
    </section>
  .chapter-sources__type does not carry a per-category modifier class (it
  is literal bracketed text, not one of the nine .source-label--* slugs
  above), so it gets one neutral badge treatment rather than nine colors
  -- the full color-coded breakdown lives on the source-key legend and
  sources.html instead, where the category *is* the organizing structure.
*/

.chapter-sources {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.chapter-sources__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chapter-sources__list li {
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px dotted var(--color-border);
}

.chapter-sources__list li:last-child {
  border-bottom: none;
}

.chapter-sources__type {
  display: inline-block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Empty-category note on sources.html (build spec 5.16: retain the
   heading with an explanatory note when a required category has no V1
   source, rather than omitting the heading). */
.sources-empty-note {
  font-style: italic;
  color: var(--color-text-muted);
}

/* 13. Glossary links -------------------------------------------------------------- */

a.glossary-link {
  text-decoration-style: dotted;
}

/* 14. Focus and accessibility states ------------------------------------------------ */

a,
button,
input,
summary,
[tabindex] {
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Fallback for browsers without :focus-visible support. */
a:focus,
button:focus,
input:focus,
summary:focus,
[tabindex]:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* 15. Print rules ------------------------------------------------------------------- */

@media print {
  .site-header,
  .nav-toggle,
  .primary-nav,
  .chapter-nav,
  .skip-link,
  .site-footer {
    display: none;
  }

  main,
  .page-content {
    max-width: none;
    padding: 0;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: var(--color-text-muted);
  }

  .callout,
  details,
  figure {
    border: 1px solid #999;
    break-inside: avoid;
  }

  /* Callout category badges (section 8) use white text on a saturated
     color background; many browsers omit that background by default
     when printing, which would leave white-on-white, illegible text.
     The !important overrides are required here because the per-category
     rules (e.g. `.callout.evidence::before`) are more specific than a
     plain `.callout::before` selector and would otherwise win over an
     ordinary print-media override regardless of source order. */
  .callout::before {
    background: none !important;
    color: var(--color-text) !important;
    border: 1px solid #999;
  }

  /* <details> answers must not be silently dropped from a printout just
     because they were left collapsed on screen. This overrides the
     browser's default "hide everything but <summary> when closed" rule
     for print only; the interactive marker/toggle affordance is hidden
     since there is nothing to toggle on paper. Supported in current
     Chromium, Firefox, and Safari (the closed-state hiding is itself an
     ordinary, author-overridable UA-stylesheet display:none rule, not a
     special browser lock) -- flagged for a real print-preview check in
     Phase 9 since this repo has no way to render one. */
  details:not([open]) > summary ~ * {
    display: block !important;
  }
  summary::before {
    display: none;
  }

  /* The hero banner's overlaid white text depends on its dark scrim
     background for contrast; many browsers omit CSS background color/
     image by default when printing (a user-configurable "print
     background graphics" setting), which would otherwise leave white
     text with no guaranteed-dark backdrop. Drop the overlay entirely for
     print and fall back to plain dark-on-white text -- this is always
     legible regardless of that setting, at the cost of no longer
     overlaying the photo. */
  .hero-banner {
    background: none;
  }
  .hero-banner__text {
    position: static;
    background: none;
    padding: 0;
  }
  .hero-banner__text-inner {
    max-width: none;
  }
  .hero-banner__text h1,
  .hero-banner__text p {
    color: var(--color-text);
    text-shadow: none;
  }
}

/* 16. Reduced motion ------------------------------------------------------------------ */

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