/* ==========================================================================
   Shared stylesheet for the Iwahori–Matsumoto explanation site.
   This file is the only place font sizes are set: every element uses one
   of the five sizes below (type scale, A11). Light palette only.
   ========================================================================== */
:root {
  --fs-body: 1rem;      /* body text */
  --fs-small: 0.88rem;  /* captions, labels, tables, controls, tags */
  --fs-h1: 1.72rem;
  --fs-h2: 1.3rem;
  --fs-h3: 1.08rem;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --bg: #fbfaf7; --surface: #ffffff; --ink: #1d1d1f; --muted: #5d5d66; --rule: #e3e0d8;
  --accent: #4a90d9; --accent-ink: #2667a8; --accent-soft: #edf5fd; --accent-fill: #d4e8fb;
  --warm: #c8642f; --warm-soft: #fbe9df;
  --green: #1f7a4d; --green-soft: #e3f4ea;
  /* claim labels (A10): one colour pair per label, shared with roadmap nodes */
  --def: #4b5563;  --def-bg: #eef0f3;
  --cite: #1f7a4d; --cite-bg: #e3f4ea;
  --here: #2667a8; --here-bg: #e3f0fc;
  --heur: #8a6100; --heur-bg: #fbf1d9;
  --open: #a3324a; --open-bg: #f9e3e8;
  --ctx: #6b4fa0;  --ctx-bg: #efe9f8;
  --q: #0f766e;    --q-bg: #dcf2ef;
}
* { box-sizing: border-box; }
html { font-size: 17px; overflow-x: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: var(--fs-body); line-height: 1.62; }
main { max-width: 800px; margin: 0 auto; padding: 26px 16px 72px; }
h1 { font-size: var(--fs-h1); line-height: 1.25; margin: 4px 0 8px; }
h2 { font-size: var(--fs-h2); line-height: 1.3; margin: 40px 0 12px; }
h3 { font-size: var(--fs-h3); line-height: 1.35; margin: 26px 0 8px; }
p { margin: 0 0 14px; }
a { color: var(--accent-ink); }
[id] { scroll-margin-top: 110px; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-small); }
.katex { font-size: 1.08em; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; margin: 12px 0; }
.sans, nav, button, label, select, input, .tag, .legend, table, .ctrl, .readout, .kicker, .pager, figcaption, .small, .lede-meta, .stmt-head, .proof > summary, .qa { font-family: var(--sans); }
.small, figcaption, .legend, table, .ctrl, .readout, .kicker, .pager, .tag, nav.site, button, select, input, textarea, .lede-meta, .stmt-head, .proof > summary, .qa, sup.qnote { font-size: var(--fs-small); }
.muted { color: var(--muted); }

/* ---------- nav (A14): Home, primary tabs, a second row for a topic's sub-pages, utilities right ---------- */
nav.site { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--rule); }
nav.site .inner { max-width: 1100px; margin: 0 auto; padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
nav.site a, nav.site button { text-decoration: none; color: var(--muted); padding: 4px 10px; border-radius: 999px; white-space: nowrap; border: 0; background: none; cursor: pointer; font-family: var(--sans); font-size: var(--fs-small); }
nav.site a:hover, nav.site button:hover { color: var(--ink); background: var(--accent-soft); }
nav.site a.here { color: var(--ink); background: var(--accent-fill); }
nav.site a.grp.here { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent-fill); background: none; }
nav.site a.home { font-weight: 700; color: var(--ink); }
nav.site .util { margin-left: auto; display: flex; gap: 4px; align-items: center; }
nav.site .util a, nav.site .util button { color: var(--accent-ink); }
nav.site .util button[aria-pressed="true"] { background: var(--accent-fill); color: var(--ink); }
nav.site .subrow { border-top: 1px dashed var(--rule); background: var(--accent-soft); }
nav.site .subrow .inner { padding-top: 6px; padding-bottom: 6px; }
nav.site .subrow a { background: var(--bg); }
nav.site .subrow a.here { background: var(--accent-fill); }
@media (max-width: 640px) { nav.site .inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } nav.site .util { margin-left: 8px; } }

/* ---------- page header, pager ---------- */
.kicker { text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.lede { color: var(--muted); margin: 0 0 18px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--rule); }
.pager a { text-decoration: none; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 8px; max-width: 40%; }
.pager a:hover { border-color: var(--accent); }
.pager .pos { color: var(--muted); white-space: nowrap; }

/* ---------- claim labels (A10) ---------- */
.tag { display: inline-block; font-weight: 600; letter-spacing: .02em; padding: 1px 9px; border-radius: 999px; vertical-align: 1px; margin-right: 6px; white-space: nowrap; line-height: 1.5; }
.t-def  { color: var(--def);  background: var(--def-bg); }
.t-cite { color: var(--cite); background: var(--cite-bg); }
.t-here { color: var(--here); background: var(--here-bg); }
.t-heur { color: var(--heur); background: var(--heur-bg); }
.t-open { color: var(--open); background: var(--open-bg); }
.t-ctx  { color: var(--ctx);  background: var(--ctx-bg); }
.t-q    { color: var(--q);    background: var(--q-bg); }

/* ---------- boxed statements (A13): only Definitions, Lemmas, Propositions, Examples and the target are boxed ---------- */
.stmt { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--def); border-radius: 0 10px 10px 0; padding: 12px 18px; margin: 18px 0; }
.stmt > :last-child { margin-bottom: 0; }
.stmt[data-kind="def"] { border-left-color: var(--def); }
.stmt[data-kind="lemma"], .stmt[data-kind="prop"] { border-left-color: var(--here); }
.stmt[data-kind="ex"] { border-left-color: var(--ctx); }
.stmt.target { border-left-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-fill); }
.stmt-head { font-weight: 600; margin: 0 0 6px; display: block; }
.stmt-head .stmt-label { color: var(--ink); margin-right: 4px; }
.stmt-head .name { font-weight: 400; color: var(--muted); }
.stmt .clause { margin: 8px 0 8px 2px; padding-left: 12px; border-left: 2px dotted var(--rule); }
.clause .lbl { font-family: var(--sans); font-size: var(--fs-small); font-weight: 700; color: var(--muted); margin-right: 6px; }
.key { background: var(--accent-soft); border-radius: 8px; padding: 6px 10px; margin: 10px 0; }
.key .katex-display { margin: 4px 0; }
details.proof { margin: 10px 0 0; border-top: 1px dashed var(--rule); }
details.proof > summary { cursor: pointer; color: var(--accent-ink); padding: 6px 0; list-style: none; }
details.proof > summary::-webkit-details-marker { display: none; }
details.proof > summary::before { content: "▸ "; color: var(--accent); }
details.proof[open] > summary::before { content: "▾ "; }
details.proof > div { padding: 4px 0 6px; }
details.proof > div > :last-child { margin-bottom: 0; }
ol.steps { padding-left: 0; list-style: none; counter-reset: st; }
ol.steps > li { counter-increment: st; margin: 8px 0; padding-left: 2.4em; position: relative; }
ol.steps > li::before { content: "Step " counter(st); position: absolute; left: 0; top: 2px; font-family: var(--sans); font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
ol.steps > li.named::before { content: attr(data-n); }

/* ---------- blocks ---------- */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 18px; margin: 16px 0; }
.card > :last-child { margin-bottom: 0; }
.inst { background: var(--accent-soft); border-radius: 8px; padding: 10px 14px; margin: 12px 0 18px; }
.inst > :last-child { margin-bottom: 0; }
.inst .kicker { color: var(--accent-ink); display: block; margin-bottom: 2px; }
.dont { border-left: 3px solid var(--warm); background: var(--warm-soft); border-radius: 0 8px 8px 0; padding: 8px 14px; margin: 14px 0; }
.dont > :last-child { margin-bottom: 0; }
.dont .kicker { color: var(--warm); display: block; }
.quote { border-left: 3px solid var(--muted); padding: 6px 14px; margin: 12px 0; background: var(--surface); }
.quote .src { display: block; color: var(--muted); font-family: var(--sans); font-size: var(--fs-small); margin-top: 4px; }
table { border-collapse: collapse; width: 100%; margin: 10px 0; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
td .katex { font-size: 1.1em; }
.tablewrap { overflow-x: auto; margin: 10px 0; }
.tablewrap table { margin: 0; }
.tablewrap caption, table caption { caption-side: top; text-align: left; color: var(--muted); font-family: var(--sans); font-size: var(--fs-small); padding: 0 0 6px; }
ul, ol { padding-left: 22px; margin: 0 0 14px; }
li { margin: 4px 0; }
figure { margin: 18px 0; overflow-x: auto; }
figcaption { color: var(--muted); margin-top: 6px; }
img.fig { width: 100%; height: auto; display: block; border-radius: 8px; }
svg.fig-svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
svg.fig-svg text, .widget svg text { font-family: var(--sans); font-size: var(--fs-small); fill: var(--ink); }
dl.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; margin: 0; }
dl.kv dt { font-family: var(--sans); font-size: var(--fs-small); font-weight: 600; color: var(--muted); padding-top: 2px; }
dl.kv dd { margin: 0; }
@media (max-width: 520px) { dl.kv { grid-template-columns: 1fr; gap: 0; } dl.kv dd { margin-bottom: 8px; } }

/* ---------- collapsible sections (A5): a section is a heading with a rule, unboxed ---------- */
details.step { border-top: 1px solid var(--rule); }
details.step > summary { list-style: none; cursor: pointer; }
details.step > summary::-webkit-details-marker { display: none; }
details.step > summary h2 { margin: 22px 0 12px; }
details.step > summary h2::before { content: "▸"; color: var(--accent); display: inline-block; width: 1em; margin-right: 4px; transition: transform .15s; }
details.step[open] > summary h2::before { transform: rotate(90deg); }
details.step > summary:hover h2 { color: var(--accent-ink); }
details.step > summary h2 .n { color: var(--muted); font-weight: 400; margin-right: 6px; }
details.step > summary h2 .tag { font-size: var(--fs-small); vertical-align: 3px; margin-left: 4px; }
details.step[open] { padding-bottom: 10px; }
details.how { margin: 10px 0 14px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
details.how > summary { cursor: pointer; color: var(--accent-ink); padding: 6px 12px; font-family: var(--sans); font-size: var(--fs-small); }
details.how > div { padding: 4px 14px 10px; }
details.how > div > :last-child { margin-bottom: 0; }

/* ---------- roadmap (A1) ---------- */
.roadmap { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px 10px; margin: 8px 0 22px; }
.rm-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rm-head .kicker { color: var(--accent-ink); }
.rm-head button { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--rule); background: var(--bg); color: var(--muted); cursor: pointer; margin-left: 4px; font-size: var(--fs-small); }
.rm-head button:hover { border-color: var(--accent); color: var(--ink); }
.roadmap svg { width: 100%; height: auto; display: block; }
.roadmap .legend { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 2px; align-items: center; color: var(--muted); }
.rm .nd { cursor: pointer; }
.rm .nd rect { stroke-width: 1.4; transition: stroke-width .12s; }
.rm .nd:hover rect, .rm .nd:focus rect { stroke-width: 2.8; }
.rm .nd:focus { outline: none; }
.rm .e { fill: none; stroke: var(--muted); stroke-opacity: .45; stroke-width: 1.4; }
.rm .e.hi { stroke: var(--accent); stroke-opacity: 1; stroke-width: 2.4; }
.rm .ah { fill: var(--muted); fill-opacity: .6; }
.rm foreignObject div { font-family: var(--sans); font-size: var(--fs-small); color: var(--ink); text-align: center; line-height: 1.25; }
.rm foreignObject .katex { font-size: 1em; }

/* ---------- inline definitions (A2) ---------- */
.knowl { border-bottom: 1.5px dotted var(--accent); cursor: pointer; }
.knowl:hover { background: var(--accent-soft); }
.knowl.open { background: var(--accent-soft); }
.knowl-box { display: block; margin: 8px 0 12px; padding: 10px 14px; border: 1px solid var(--accent-fill); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--surface); font-size: var(--fs-body); font-family: var(--serif); }
.knowl-box .kicker { display: block; color: var(--accent-ink); }
.knowl-box > :last-child { margin-bottom: 0; }
td .knowl-box { white-space: normal; }

/* ---------- reader's notes (A13) ---------- */
sup.qnote { color: var(--accent-ink); cursor: pointer; margin-left: 2px; user-select: none; }
sup.qnote:hover { text-decoration: underline; }
body.no-notes sup.qnote { display: none; }
.qa { display: none; margin: 8px 0 14px; padding: 10px 14px; border: 1px solid var(--accent-fill); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--surface); font-size: var(--fs-body); font-family: var(--serif); }
.qa.show { display: block; }
.qa .qq { font-family: var(--sans); font-size: var(--fs-small); color: var(--accent-ink); font-weight: 600; display: block; margin-bottom: 4px; }
.qa > :last-child { margin-bottom: 0; }

/* ---------- timeline ---------- */
.tl { position: relative; margin: 20px 0; padding-left: 26px; }
.tl::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--rule); }
.tl .ev { position: relative; margin: 0 0 8px; }
.tl .ev::before { content: ""; position: absolute; left: -24px; top: 30px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); }
.tl .ev.main::before { background: var(--accent); border-color: var(--accent); }
.tl dl { margin: 6px 0 0; }
.tl dt { font-family: var(--sans); font-size: var(--fs-small); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tl dd { margin: 0 0 10px; }
.yr { font-family: var(--sans); font-weight: 700; color: var(--accent-ink); }

/* ---------- widgets (A4) ---------- */
.widget { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; margin: 16px 0; }
.widget .svgwrap { overflow-x: auto; }
.widget svg { display: block; margin: 0 auto; touch-action: manipulation; max-width: 100%; height: auto; }
.widget svg text.mut { fill: var(--muted); }
.ctrl { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 8px; }
.ctrl .grp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ctrl .lbl { color: var(--muted); }
.ctrl button, button.go, .ctrl select { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); cursor: pointer; font-size: var(--fs-small); }
.ctrl button:hover { border-color: var(--accent); }
.ctrl button.on { background: var(--accent-fill); border-color: var(--accent); }
.readout { color: var(--muted); margin-top: 8px; min-height: 2.6em; }
.readout b { color: var(--ink); }
.predict { font-family: var(--sans); font-size: var(--fs-small); color: var(--muted); margin: 0 0 8px; }

/* ---------- questions (A6) ---------- */
.q { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 18px; margin: 18px 0; }
.q .kind { font-family: var(--sans); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em; color: var(--q); font-weight: 600; }
.opts label { display: block; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; margin: 6px 0; cursor: pointer; font-family: var(--serif); font-size: var(--fs-body); }
.opts label:hover { border-color: var(--accent); }
.opts input { margin-right: 8px; }
textarea { width: 100%; min-height: 84px; font-family: var(--serif); font-size: var(--fs-body); padding: 8px 10px; border-radius: 8px; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); }
button.go { margin-top: 8px; border-color: var(--accent); background: var(--accent-fill); color: var(--ink); font-family: var(--sans); }
button.go:disabled { opacity: .4; cursor: not-allowed; }
.fb { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: var(--accent-soft); }
.fb.show { display: block; }
.fb > :last-child { margin-bottom: 0; }
.fb .verdict { font-family: var(--sans); font-weight: 700; }

/* ---------- box-and-arrow rows ---------- */
.flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 6px; margin: 14px 0; }
.flow .bx { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 10px; text-align: center; }
.flow .bx small { display: block; color: var(--muted); font-family: var(--sans); font-size: var(--fs-small); }
.flow .bx.hi { border-color: var(--accent); background: var(--accent-soft); }
.flow .ar { color: var(--muted); font-family: var(--sans); }

/* ---------- hub ---------- */
.goals li { margin: 6px 0; }
.status dl.kv dd .tag { margin: 2px 4px 2px 0; }
.ref { font-family: var(--sans); font-size: var(--fs-small); color: var(--muted); }