/* pages.css — styles that only the NEW pages of the multi-page experience
   (TODO 117 §10, public/page.php) need: the detail-page head, breadcrumb,
   pager, the site-title link. method.css stays untouched until the swap so
   the live page's asset versions do not move. Theme tokens only. */

/* site title as a link (the page's own H1 is the question) */
.m-head--page .m-site-title {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 26px; line-height: 1.14; letter-spacing: -0.01em; color: var(--ink-hi);
}
.m-head--page .m-site-title a { color: inherit; text-decoration: none; }
.m-head--page .m-site-title a:hover { color: var(--ink); }
.m-head--page .m-deck { margin-top: 6px; font-size: 15px; }
.m-head--page .m-head-rule { margin-top: 14px; }

/* detail-page head */
.m-page-head { margin: 0 0 32px; display: flex; flex-direction: column; gap: 14px; }
.m-crumb {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-4);
}
.m-crumb a { color: var(--ink-3); text-decoration: none; }
.m-crumb a:hover { color: var(--ink); text-decoration: underline; }
.m-crumb .sep { margin: 0 8px; color: #333; }
.m-page-head .m-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.m-page-head h1 {
  margin: 0; max-width: 60ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: 34px; line-height: 1.18; letter-spacing: -0.01em; color: var(--ink-hi);
}
.m-summary {
  max-width: 74ch; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface-sunken); padding: 18px 24px 20px;
}
.m-summary p { margin: 10px 0 0; font-size: 16px; line-height: 1.64; color: var(--ink-body); }
.m-summary p:first-child { margin-top: 0; }

/* prev / next pager */
.m-pager {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start;
  margin: 64px 0 0; padding-top: 22px; border-top: 1px solid var(--rule);
}
.m-pager-link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink-2); }
.m-pager-link.next { text-align: right; }
.m-pager-link .k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-4);
}
.m-pager-link .t { font-family: var(--font-display); font-size: 18px; line-height: 1.3; color: var(--ink); }
.m-pager-link .t .num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-right: 8px; }
.m-pager-link:hover .t { color: var(--ink-hi); }
.m-pager-up {
  align-self: center; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); text-decoration: none; white-space: nowrap;
}
.m-pager-up:hover { color: var(--ink); }
@media (max-width: 640px) {
  .m-pager { grid-template-columns: 1fr; }
  .m-pager-link.next { text-align: left; }
  .m-page-head h1 { font-size: 26px; }
}

/* ---- verdict corpus page (/verdicts) + the expanded dossiers ------------ */
.m-p62-page { padding: 0; max-width: 78ch; }
.m-p62-page .m-p62-open { margin: 8px 0 0; }
.m-p62-page .m-p62-open .m-p62-detail { border-left: 1px solid var(--rule); padding-left: 16px; }
.m-p62-page .m-p62-row { margin: 28px 0; padding-bottom: 22px; border-bottom: 1px solid var(--rule-faint); }
.m-p62-page .m-p62-row:last-child { border-bottom: none; }
.m-p62-page h4 { margin: 44px 0 6px; }
.m-jump { margin: 22px 0 8px; }
.m-jump-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin: 8px 0; }
.m-jump-label {
  flex: 0 0 100%; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-4); margin-top: 6px;
}
.m-jump a {
  display: inline-block; min-width: 30px; padding: 3px 6px; text-align: center; text-decoration: none;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 3px; background: var(--surface);
}
.m-jump a:hover { color: var(--ink-hi); border-color: var(--rule-strong); }
.m-jump a.g-evidence { border-left: 3px solid var(--accent); }
.m-jump a.g-premise { border-left: 3px solid var(--ink-4); }
.m-jump-key { font-size: 13px; color: var(--ink-3); margin: 6px 0 0; }

/* the "Verdicts" pointer on /interpretation (same shell as the prompt viewer) */
a.m-verdicts-link {
  display: flex; align-items: center; gap: 12px; margin: 22px 0; padding: 12px 14px; min-height: 44px;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface-head);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-2); text-decoration: none;
}
a.m-verdicts-link:hover { border-color: var(--rule-strong); color: var(--ink); }
a.m-verdicts-link .m-toggle { font-size: 12px; }

/* verdict popup (in the run-overlay shell) */
.mro-verdict-ans { margin: 0 0 12px; }
.mro-verdict-sum { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--ink-body); }
.mro-verdict-more {
  margin: 16px 0 0; padding: 7px 12px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 3px;
}
.mro-verdict-more:hover { color: var(--ink-hi); }
.mro-verdict-full { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--ink-body); }
.mro-verdict-full h5 {
  margin: 14px 0 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-4);
}
.mro-verdict-full p { margin: 0 0 8px; }
.mro-verdict-full ul.m-p62-cites { padding-left: 18px; }
.mro-verdict-full ul.m-p62-cites li { margin: 6px 0; }

/* ---- Level-2 summaries (src/page/summaries/*, plan §8) ------------------ */
.m-sum-answer { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-hi); text-wrap: pretty; }
ul.m-sum-findings { margin: 12px 0 0; list-style: none; padding: 0; }
ul.m-sum-findings li {
  position: relative; padding: 5px 0 5px 22px; margin: 0; border-bottom: none;
  font-size: 15.5px; line-height: 1.6; color: var(--ink-body); text-wrap: pretty;
}
ul.m-sum-findings li::before {
  content: "–"; position: absolute; left: 2px; top: 5px;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-4);
}
.m-sum-caveat { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }
.m-sum-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-right: 8px;
}
.m-summary .m-sum-answer { margin: 0; }
/* objections matrix */
/* rows breathe and are divided (Zapador, review note #373, 2026-09-04) */
table.m-objections { border-collapse: collapse; width: 100%; font-size: 14.5px; }
table.m-objections th {
  text-align: left; padding: 8px 14px 10px 0; border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 400;
}
table.m-objections td { padding: 12px 14px 13px 0; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.55; }
table.m-objections tr:last-child td { border-bottom: 0; }
table.m-objections td:nth-child(1) { width: 30%; color: var(--ink); }
table.m-objections td:nth-child(2) { white-space: nowrap; }
table.m-objections td:last-child { padding-right: 0; }
.m-status {
  display: inline-block; padding: 2px 8px; border-radius: 3px; border: 1px solid var(--rule-strong);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.m-status-tested { color: var(--accent); border-color: var(--accent); }
.m-status-partial { color: var(--ink-2); }
.m-status-addressed { color: var(--ink-2); }
.m-status-ack { color: var(--ink-4); }
.mro-verdict { padding: 14px 18px 18px; }

/* ---- overview page (plan §3.1) ------------------------------------------ */
.m-orient { margin: 8px 0 40px; }
.m-orient p { margin: 0; max-width: 74ch; font-size: 17px; line-height: 1.64; color: var(--ink-body); text-wrap: pretty; }
.m-findings { margin: 0 0 56px; }
.m-stats.m-stats-findings { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; }
.m-stats-findings .m-stat { font-size: 13.5px; }
.m-group-label { margin: 0 0 22px; }
/* group labels are sentences, not "SECTION 02" tags: let them wrap (the
   interpretation label forced a 650 px line on phones, 2026-09-04) */
.m-group-label .m-eyebrow { white-space: normal; }
.m-cards { margin: 0 0 64px; }
.m-card {
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface);
  padding: 22px 26px 20px; margin: 0 0 22px;
}
.m-card--fig { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px 32px; align-items: start; }
.m-card h3 { margin: 10px 0 14px; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.22; letter-spacing: -0.008em; }
.m-card h3 a { color: var(--ink-hi); text-decoration: none; }
.m-card h3 a:hover { color: var(--accent); }
.m-card .m-sum-answer { font-size: 16.5px; }
.m-card-cta { margin: 16px 0 0; }
.m-card-cta a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent;
}
.m-card-cta a:hover { border-bottom-color: var(--accent); }
.m-card--interp { border-color: var(--accent); background: var(--surface-sunken); }
.m-card--interp .m-eyebrow { color: var(--ink-3); }
.m-fig--mini { margin: 0; }
.m-fig--mini .m-fig-bar { padding: 8px 12px; }
.m-fig--mini .m-fig-bars { padding: 12px 14px 8px; background: var(--chart); }
.m-fig--mini .m-bars { padding: 0; gap: 6px; }
.m-fig--mini .m-bar-row { grid-template-columns: 110px 1fr; gap: 8px; }
.m-fig--mini .m-bar-key { padding: 10px 14px 10px; gap: 6px 14px; font-size: 10.5px; }
.m-fig--mini .m-bar-axis { padding: 6px 0 0; margin-left: 118px; }
.m-fig--mini .m-fig-note { font-size: 12px; line-height: 1.5; color: var(--ink-2); padding: 10px 14px; }
.m-fig--mini .m-odpanels--one { display: block; padding: 8px 12px; background: var(--chart); }
.m-fig--mini .m-odpanels--one h4 { display: none; }
.m-objections-sec { margin: 0 0 64px; }
.m-objections-sec h2 { margin: 6px 0 0; max-width: 60ch; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.22; color: var(--ink-hi); }
.m-objections-sec .m-what { margin: 10px 0 16px; max-width: 70ch; font-size: 15.5px; color: var(--ink-3); }
.m-objections-more { margin: 10px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.m-objections-more a { color: var(--accent); text-decoration: none; }
.m-foot-nav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px 32px;
  margin: 72px 0 0; padding-top: 28px; border-top: 1px solid var(--rule);
}
.m-foot-group { display: flex; flex-direction: column; gap: 6px; }
.m-foot-group a { font-size: 14.5px; color: var(--ink-2); text-decoration: none; }
.m-foot-group a:hover { color: var(--ink-hi); text-decoration: underline; }
.m-foot-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 4px;
}
.m-page--overview .m-postscript { margin-top: 64px; }
@media (max-width: 900px) {
  .m-card--fig { grid-template-columns: 1fr; }
}

/* ---- the reasoning section (TODO 117 stage 8): the standalone page's eight
   blocks demoted to subsections inside #exp-reasoning; the rt-* figure
   styles themselves are inlined by parts/reasoning-css (one source). ---- */
.rt-block { margin: 44px 0 0; }
.rt-block:first-of-type { margin-top: 0; }
.rt-block-head { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.rt-block-head h3 {
  margin: 0; max-width: 60ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1.25; letter-spacing: -0.006em; color: var(--ink-hi);
}
.rt-block > h4 { margin: 26px 0 6px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.m-fig--mini .rt-panels--one { display: block; padding: 8px 12px 4px; background: var(--chart); }
.m-fig--mini .rt-panels--one .rt-panel { min-width: 0; }
/* Light theme (the standalone page is dark-only, so its rt-* colours are
   hard-coded for dark): on the new pages the CI panels sit on the dark chart
   ground like every other plot, and the answer-mix labels take theme ink. */
html.light-mode .rt-panels { background: var(--chart); padding: 14px 12px 8px; }
html.light-mode .rt-mixlab, html.light-mode .rt-key { color: var(--ink-2); }
html.light-mode .rt-mixout { color: #b5471c; }

/* ---- the second instrument section (2026-09-03): two scatter panels
   (compass score vs 8values percentage), the prompt-test bars, subheads. ---- */
.m-v8 h3 {
  margin: 44px 0 14px; max-width: 60ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1.25; letter-spacing: -0.006em; color: var(--ink-hi);
}
.m-v8panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px 24px; padding: 12px 12px 6px; background: var(--chart); }
.m-v8panel h4 { margin: 0 0 6px; font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8983; }
.m-v8svg { display: block; width: 100%; height: auto; }
.m-v8chart { padding: 12px 12px 8px; background: var(--chart); }
.m-v8chart .m-wtkey { padding: 8px 4px 0; }
.m-v8quote {
  margin: 14px 0 18px; padding: 12px 18px; max-width: 74ch;
  border-left: 3px solid var(--accent); background: var(--surface-sunken);
  font-size: 15px; line-height: 1.6; color: var(--ink-2);
}
.m-fig--mini .m-v8panels--one { display: block; padding: 8px 12px 4px; }
.m-fig--mini .m-v8panels--one h4 { display: none; }

/* ---- section 01 on the new pages: the stats as two list columns (2026-09-04) ---- */
.m-statlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 40px; margin: 22px 0; max-width: 74ch; }
.m-statlist dl { margin: 0; }
.m-statlist dl > div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.m-statlist dl > div:last-child { border-bottom: 0; }
.m-statlist dt { margin: 0; font-family: var(--font-mono); font-size: 16px; color: var(--ink-hi); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.m-statlist dd { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }

/* ---- the FAQ on the overview: collapsed accordion (2026-09-04) ---- */
.m-page--overview #s-faq { margin-top: 0; }
details.m-faq { border-top: 1px solid var(--rule); }
details.m-faq:last-of-type { border-bottom: 1px solid var(--rule); }
details.m-faq summary {
  cursor: pointer; list-style: none; padding: 14px 32px 14px 0; position: relative;
  font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.3; color: var(--ink-hi);
}
details.m-faq summary::-webkit-details-marker { display: none; }
details.m-faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 12px;
  font-family: var(--font-mono); font-size: 18px; color: var(--ink-4);
}
details.m-faq[open] summary::after { content: "–"; }
details.m-faq summary:hover { color: var(--accent); }
details.m-faq > p, details.m-faq > ul { margin-top: 0; }
details.m-faq > :last-child { margin-bottom: 18px; }
.m-card .m-sum-body { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.m-summary .m-sum-body { margin: 10px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--ink-body); }

/* ---- the appendices block on the overview (2026-09-04): one index entry, three links ---- */
.m-appendices { margin: 56px 0 0; }
.m-appx-list { list-style: none; margin: 0; padding: 0; max-width: 74ch; }
.m-appx-list li { display: grid; grid-template-columns: 36px 1fr; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
.m-appx-list li:last-child { border-bottom: 1px solid var(--rule); }
.m-appx-list .num { grid-row: 1 / span 2; font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); padding-top: 4px; }
.m-appx-list a { font-family: var(--font-display); font-size: 18px; line-height: 1.3; color: var(--ink-hi); text-decoration: none; }
.m-appx-list a:hover { color: var(--accent); }
.m-appx-blurb { font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* ---- anchor landing offset (Zapador 2026-09-04): a section reached from
   the index (or any #link) sits ~80 px below the top of the window, not
   flush against it — every anchor target of the new pages, desktop and
   phone alike (method.css gives .m-sec 24 px on the live page; the live
   page inherits this at the swap). ---- */
.m-page .m-sec, .m-page .m-card, .m-page .m-objections-sec, .m-page .m-cards, .m-page .m-appendices,
.m-page details.m-faq, .m-page .m-colophon, .m-page .m-music, .m-page .m-page-head, .m-page .m-postscript,
.m-page .m-p62 .m-p62-row, .m-page [id^="faq-"] { scroll-margin-top: 80px; }
/* the block just jumped to (pages.js): 80 px of empty space above it, so the
   band between the window top and the block shows nothing of the block
   before — exactly one element carries this at a time */
.m-page .m-landed { margin-top: 80px !important; }