/* devintops.org: white sheet, ink, hairline rules, loop colors from the diagrams. No webfonts; small vanilla scripts enhance the model, the self-check and comments. */
:root {
  --ink: #0f172a;
  --body: #364152;
  --muted: #5f6b7a;
  --rule: #d9dee5;
  --hair: #e8ebef;
  --soft: #f5f7fa;
  --dev: #087481;
  --ops: #2442c8;
  --int: #5a2ccf;
  --action: #2442c8;
  --action-hover: #1d37a8;
  --action-active: #172d8a;
  --action-tint: #eef2fe;
  --action-pressed: #e6ebfc;
  --measure: 68ch;
  --wide: 76rem;
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--body);
  background: #fff;
  text-rendering: optimizeLegibility;
}

a { color: var(--ops); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, .button:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; background: #fff; padding: 6px 10px; z-index: 10; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header and footer */
.site-header .bar, .site-footer .bar {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.site-header { border-bottom: 1px solid var(--hair); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; }
.nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; }
.nav a { color: var(--body); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
.site-footer { border-top: 1px solid var(--hair); margin-top: 6rem; font-size: 14px; color: var(--muted); }
.site-footer .bar { padding-top: 24px; padding-bottom: 32px; }
.site-footer a { color: var(--muted); }

/* Layout */
main { padding: 0 24px; }
.measure { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.wide { max-width: var(--wide); margin-left: auto; margin-right: auto; }

/* Type */
h1, h2, h3 { color: var(--ink); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 3.6vw, 2.6rem); margin: 0; font-weight: 800; }
h2 { font-size: clamp(1.45rem, 2.6vw, 1.75rem); margin: 3.2rem 0 0.7rem; font-weight: 800; }
h3 { font-size: 1.18rem; margin: 2rem 0 0.4rem; font-weight: 750; }
p, ul, ol { margin: 0 0 1em; }
li { margin: 0.3em 0; }
strong { color: var(--ink); }
.lead { font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.byline { margin: 0.9rem 0 0; font-size: 15px; color: var(--muted); }
.dev { color: var(--dev); }
.ops { color: var(--ops); }
.int { color: var(--int); }

/* Buttons: Operations blue means "you can act", like links and focus rings. Ink stays for text. */
.actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  border: 0;
  border-radius: 2px;
  background: var(--action);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.button:hover { background: var(--action-hover); }
.button:active { background: var(--action-active); }
.button.secondary { background: #fff; color: var(--action); box-shadow: inset 0 0 0 1.5px var(--action); }
.button.secondary:hover { background: var(--action-tint); color: var(--action-hover); }

/* The reference sheet: the model at a glance */
.sheet {
  max-width: var(--wide);
  margin: 1.5rem auto 0;
  border: 1.5px solid var(--ink);
  background: #fff;
}

.ref { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.ref th, .ref td { text-align: left; vertical-align: top; padding: 0.5rem 1rem; border-bottom: 1px solid var(--hair); }
.ref thead th { padding-top: 0.9rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule); font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.ref thead th.dev { color: var(--dev); box-shadow: inset 0 3px 0 var(--dev); }
.ref thead th.ops { color: var(--ops); box-shadow: inset 0 3px 0 var(--ops); }
.ref thead th.int { color: var(--int); box-shadow: inset 0 3px 0 var(--int); }
.ref tbody th { width: 11rem; padding-left: 1.8rem; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.ref td { color: var(--body); }
.ref td:last-child { background: #f8f6fe; }
.ref tbody tr:last-child th, .ref tbody tr:last-child td { border-bottom: 0; }
.tag { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; vertical-align: 0.2em; color: #fff; background: var(--int); }


/* Figures and blocks */
figure { margin: 3rem auto; }
figure img { display: block; width: 100%; height: auto; }
figure > a { display: block; }
figure > a:focus-visible { outline-offset: 6px; }
figcaption { max-width: var(--measure); margin: 0.8rem auto 0; font-size: 14.5px; color: var(--muted); text-align: center; }
.note { background: var(--soft); border: 1px solid var(--hair); border-radius: 2px; padding: 1rem 1.2rem; margin: 1.6rem 0; font-size: 16px; }
.note p:last-child { margin-bottom: 0; }
.thesis { margin: 3.5rem auto; padding: 1.8rem 0; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); text-align: center; }
.thesis p { margin: 0.15em auto; max-width: 34ch; font-size: clamp(1.25rem, 2.6vw, 1.65rem); line-height: 1.35; font-weight: 800; color: var(--ink); text-wrap: balance; }
.thesis p.quiet { font-weight: 500; color: var(--body); }

.table-scroll { overflow-x: auto; margin: 1.3rem 0 1.8rem; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.table th, .table td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--hair); }
.table thead th { color: var(--ink); border-bottom: 1.5px solid var(--ink); }
.table tbody th { color: var(--ink); font-weight: 700; }
.table thead th.dev { color: var(--dev); }
.table thead th.ops { color: var(--ops); }
.table thead th.int { color: var(--int); }

.record { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.record th, .record td { text-align: left; padding: 0.55rem 0; border-bottom: 1px dashed var(--rule); vertical-align: top; }
.record th { width: 9.5rem; color: var(--muted); font-weight: 600; padding-right: 1rem; }
.pending { color: var(--muted); font-style: italic; }
.print-only { display: none; }

/* Version ledger: one row per published version */
.ledger { width: 100%; border-collapse: collapse; border: 1.5px solid var(--ink); font-size: 15px; line-height: 1.45; }
.ledger th, .ledger td { text-align: left; vertical-align: top; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--hair); }
.ledger thead th { color: var(--muted); font-weight: 600; font-size: 13.5px; border-bottom: 1.5px solid var(--ink); }
.ledger tbody th { color: var(--ink); font-weight: 800; }
.ledger-meta { margin: 0.8rem 0 1.4rem; font-size: 15px; color: var(--muted); }

/* Diagram text, native disclosure */
.diagram-text { margin: -1.2rem auto 3rem; font-size: 15.5px; }
.diagram-text summary { cursor: pointer; color: var(--ink); font-weight: 700; padding: 0.4rem 0; }
.diagram-text summary:focus-visible { outline: 3px solid var(--ops); outline-offset: 3px; }
.stages { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.3rem 1rem; margin: 0.8rem 0 0; }
.stages dt { font-weight: 750; }
.stages dd { margin: 0; }


.toc { margin: 2rem 0 0.5rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 15px; }
.toc summary { cursor: pointer; padding: 0.7rem 0; font-weight: 700; color: var(--ink); }
.toc summary:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.toc ol { margin: 0 0 0.9rem; padding-left: 1.7rem; columns: 2; column-gap: 2.5rem; }
.toc li { margin: 0.12em 0; break-inside: avoid; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
h2 .anchor { margin-left: 0.35em; color: var(--action); font-weight: 600; text-decoration: none; opacity: 0; transition: opacity 0.15s ease-out; }
h2:hover .anchor, h2 .anchor:focus-visible { opacity: 1; }

/* Citations and the reference list */
.cite { text-decoration: none; white-space: nowrap; font-size: 0.88em; }
.cite:hover { text-decoration: underline; }
.references { padding-left: 2.1rem; font-size: 15.5px; }
.references li { margin: 0.5rem 0; overflow-wrap: anywhere; }
.references li:target { background: var(--action-tint); }

/* Article header */
.article-head { margin-top: 2rem; margin-bottom: 1.4rem; }
.version-note { margin: 0 0 1rem; font-size: 15px; color: var(--muted); }
.article-head .lead { margin: 0.8rem 0 0; }
.status { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 1.2rem 0 0; font-size: 15px; color: var(--muted); }

@media (max-width: 760px) {
  body { font-size: 17px; }
  main { padding: 0 16px; }
  .ref thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ref, .ref tbody, .ref tr, .ref th, .ref td { display: block; width: auto; }
  .ref tbody tr { padding: 0.7rem 1.1rem 0.8rem; border-bottom: 1px solid var(--hair); }
  .ref tbody tr:last-child { border-bottom: 0; }
  .ref tbody th { padding: 0 0 0.25rem; border: 0; }
  .ref td { display: grid; grid-template-columns: 6.6rem 1fr; gap: 0.6rem; padding: 0.2rem 0; border: 0; background: none; }
  .ref td:last-child { background: none; }
  .ref td::before { content: attr(data-loop); font-weight: 800; font-size: 14px; }
  .ref td.dev::before { color: var(--dev); }
  .ref td.ops::before { color: var(--ops); }
  .ref td.int::before { color: var(--int); }
  .ref td.dev, .ref td.ops, .ref td.int { color: var(--body); }
  .toc ul { columns: 1; }
  .actions .button { flex: 1 1 auto; }
  .table-scroll .table { min-width: 34rem; }
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger, .ledger tbody, .ledger tr, .ledger th, .ledger td { display: block; width: auto; }
  .ledger tbody th { padding: 0.7rem 0.9rem 0.3rem; border: 0; }
  .ledger tbody th::before { content: "Version "; }
  .ledger td { display: grid; grid-template-columns: 6.2rem 1fr; gap: 0.6rem; padding: 0.15rem 0.9rem; border: 0; }
  .ledger tbody tr { padding-bottom: 0.6rem; }
  .ledger td::before { content: attr(data-label); color: var(--muted); font-weight: 600; font-size: 13.5px; font-style: normal; }
  .site-header .bar { padding: 12px 16px; }
  .brand { font-size: 17px; gap: 8px; }
  .brand img { width: 26px; height: 26px; }
  .nav { font-size: 14.5px; gap: 6px 14px; }
  .nav-version, .nav-wide { display: none; }
}

@media print {
  @page {
    size: A4;
    margin: 15mm 16mm 18mm;
    @bottom-right { content: counter(page) " / " counter(pages); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; font-size: 8pt; color: #5f6b7a; }
  }
  body { font-size: 10pt; line-height: 1.5; }
  .site-header, .site-footer, .no-print, .toc, .skip { display: none !important; }
  .print-only { display: block; }
  main { padding: 0; }
  .measure, .wide { max-width: none; }
  .article-head { margin-top: 0; }
  a { color: inherit; text-decoration: none; }
  h2 { break-after: avoid; margin-top: 1.8em; }
  h3 { break-after: avoid; }
  figure, table, pre, .note, .thesis { break-inside: avoid; }
  figure { margin: 1.2rem 0; }
}

/* Discussion: GitHub Discussions through giscus */
.discuss-box { margin-top: 1.4rem; }
.discuss-box .giscus { min-height: 1px; }
.discuss-cta { margin: 0.4rem 0 0; }
.discuss-note { display: none; margin: 0.8rem 0 0; font-size: 15px; color: var(--muted); }
.discuss-box[data-state="loading"] .discuss-cta { display: none; }
.discuss-box[data-state="loading"] .discuss-note { display: block; }


/* Landing: a slim title band, then the explorer */
.hero { max-width: var(--wide); margin: 1.4rem auto 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.9rem 2rem; padding-bottom: 1.1rem; border-bottom: 1.5px solid var(--ink); }
.wordmark { margin: 0; font-size: clamp(2.5rem, 5vw, 3.6rem); line-height: 0.95; letter-spacing: -0.035em; }

/* The model at a glance: the reference sheet, lower on the landing page */
.sheet.glance { margin: 3.6rem auto 0; }
.glance-head { padding: 1.3rem 1.8rem 1rem; border-bottom: 1.5px solid var(--ink); }
.glance-head h2 { margin: 0; }

/* Model explorer: the three-loops diagram, explorable word by word (assets/explorer.js) */
.explorer { max-width: var(--wide); margin: 1.6rem auto 3rem; }
.explorer-figure { margin: 0; }
.explorer.is-live .explorer-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: start; }
.explorer.is-live .static-figure { display: none; }
.explorer-home.is-live .explorer-figure figcaption { display: none; }
.explorer-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: 0.7rem; }
.explorer-controls:empty { display: none; }
.valence-label { font-size: 14.5px; color: var(--muted); }

.seg-control { display: inline-flex; border: 1px solid #868fa0; border-radius: 2px; background: #fff; }
.seg-control button { font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; min-height: 44px; padding: 0 0.85rem; border: 0; background: none; color: var(--ink); cursor: pointer; transition: background-color 0.2s ease-out, color 0.2s ease-out; }
.seg-control button + button { box-shadow: inset 1px 0 0 var(--rule); }
.seg-control button:hover { background: var(--action-tint); }
.seg-control button[aria-pressed="true"] { background: var(--action-pressed); color: var(--action-hover); box-shadow: inset 0 0 0 2px var(--action); }

.model { display: block; width: 100%; height: auto; overflow: visible; -webkit-tap-highlight-color: transparent; }
.model .loop { transition: opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.model .loop[data-loop="dev"] { color: var(--dev); }
.model .loop[data-loop="ops"] { color: var(--ops); }
.model .loop[data-loop="int"] { color: var(--int); }
.model .hot { cursor: pointer; outline: none; transition: filter 0.3s ease-out; }
/* With a selection, the other parts lose color but keep their brightness, so every label stays as readable. */
.model.has-focus .hot:not(.is-lit):not(.is-active):not(.hub) { filter: saturate(0.2); }
/* A segment lifts its ribbon only. The label never scales or moves, so it stays sharp while the ribbon grows
   and casts its shadow under it. Lit and active come from explorer.js, after the pointer settles on a part. */
.model .seg > path:first-child { transform-box: fill-box; transform-origin: center; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.28s ease-out; }
.model .seg.is-lit > path:first-child { transform: scale(1.03); filter: drop-shadow(0 5px 8px rgb(15 23 42 / 0.26)); }
.model .seg.is-active > path:first-child { transform: scale(1.045); filter: drop-shadow(0 6px 8px rgb(15 23 42 / 0.28)); }
.model .seg:focus-visible > path:first-child { stroke: var(--action); stroke-width: 7px; paint-order: stroke; }
.model .proc .hit { stroke: currentColor; transition: stroke-opacity 0.2s ease-out; }
.model .proc.is-lit .hit { stroke-opacity: 0.1; }
.model .proc.is-active .hit { stroke-opacity: 0.16; }
.model .proc:focus-visible .hit { stroke-opacity: 1; }
.model .proc:focus-visible text { fill: #fff; }
.model .core .hit { fill: currentColor; transition: fill-opacity 0.2s ease-out; }
.model .core.is-lit .hit { fill-opacity: 0.06; }
.model .core.is-active .hit { fill-opacity: 0.1; }
.model .core:focus-visible .hit { fill-opacity: 0.12; stroke: currentColor; stroke-width: 3px; }
.model .hub > circle:first-child { stroke: var(--ink); stroke-width: 3px; stroke-opacity: 0; transition: stroke-opacity 0.2s ease-out; }
.model .hub.is-active > circle:first-child { stroke-opacity: 1; }
.model .hub:focus-visible > circle:first-child { stroke: var(--action); stroke-width: 6px; stroke-opacity: 1; }
.model[data-valence="1"] .loop[data-loop="ops"],
.model[data-valence="1"] .loop[data-loop="int"],
.model[data-valence="2"] .loop[data-loop="int"] { opacity: 0.06; pointer-events: none; }
.model.is-tour .seg.is-lit > path:first-child { animation: lit-pulse 1.6s ease-in-out 2; }
@keyframes lit-pulse { 50% { filter: drop-shadow(0 9px 12px rgb(15 23 42 / 0.34)) brightness(1.1); } }

.explorer-panel { padding: 0 0 0.4rem; background: #fff; font-size: 16px; line-height: 1.55; }
/* Without the script the panel follows the figure in plain flow, at the live stacked layout's row gap. */
.explorer:not(.is-live) .explorer-panel { margin-top: 1.5rem; }
/* Live, the panel reserves room for the views it covers (explorer.js measures them all at the panel's width),
   so moving among them swaps the text in place and moves nothing: not the panel, not its buttons, not the page
   below. Each kind of view keeps its navigation where its tallest covered member puts it; stacked, part
   navigation follows its text. A view taller than the reserve makes the page longer only when selected, and a
   shorter view after it keeps the height until the change is out of sight. */
.explorer.is-live .panel-body { display: flow-root; min-height: var(--reserve-panel, 0px); }
.panel-main { display: flow-root; }
.panel-main.is-part { min-height: var(--reserve-part, 0px); }
.panel-main.is-tour { min-height: var(--reserve-tour, 0px); }
.panel-main.is-valence { min-height: var(--reserve-valence, 0px); }
.panel-body p { margin: 0 0 0.8em; }
.panel-title { margin: 0; font-size: clamp(1.45rem, 2.4vw, 1.8rem); line-height: 1.15; outline: none; }
.panel-title:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
.panel-title .tag { vertical-align: 0.3em; }
.panel-lead { font-size: clamp(1.3rem, 2.1vw, 1.55rem); line-height: 1.25; }
.panel-verbs { list-style: none; margin: 1rem 0; padding: 0; font-size: 17px; }
.panel-verbs li { margin: 0.25rem 0; }
.panel-verbs b { font-weight: 800; }
.panel-body .panel-thesis { font-weight: 750; color: var(--ink); }
.panel-body .panel-cta { margin: 1.2rem 0 0.8rem; }
.panel-hint { font-size: 14.5px; color: var(--muted); }
.panel-body .panel-meta { margin: 0.3rem 0 0; font-size: 14.5px; color: var(--muted); }
.panel-body .panel-summary { margin: 0.95rem 0 0.7rem; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.45; }
.panel-note { padding: 0.75rem 0.95rem; background: var(--soft); font-size: 15px; line-height: 1.5; }
.panel-note.is-int { background: #f8f6fe; }
.panel-note strong { color: var(--ink); }
.panel-note.is-int strong { color: var(--int); }
.panel-how { margin-top: 1.1rem; }
.panel-how h4 { margin: 0 0 0.35rem; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.panel-facts { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 0.3rem 1rem; margin: 0 0 0.8rem; font-size: 15px; line-height: 1.45; }
.panel-facts dt { color: var(--muted); font-weight: 600; }
.panel-facts dd { margin: 0; }
.panel-body .panel-related { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 1rem 0 0; font-size: 14px; }
.panel-related > span { color: var(--muted); font-weight: 600; margin-right: 2px; }
/* The reserved block ends at its last line; the gap below it belongs to what follows. */
.panel-body .panel-main > :last-child { margin-bottom: 0; }
.panel-body .panel-add { margin-top: 0.7rem; }
.panel-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--hair); font-size: 15px; }
/* Previous, Overview and next keep fixed columns, so each stays under the pointer from part to part. */
.panel-nav.is-part { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; }
.panel-nav.is-part [data-nav="prev"] { justify-self: stretch; text-align: left; }
.panel-nav.is-part [data-overview] { justify-self: center; }
.panel-nav.is-part [data-nav="next"] { justify-self: stretch; text-align: right; }
.panel-body .panel-exit { margin: 0.7rem 0 0; font-size: 14.5px; }
.explorer-panel .button { font-size: 15px; min-height: 40px; padding: 0.5rem 1rem; }
.tour-track { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin: 0 0 0.9rem; }
.tour-track span { height: 6px; transition: background-color 0.3s ease-out; }
.tour-track .is-ops { background: #d3d9f4; }
.tour-track .is-int { background: #ddd5f5; }
.tour-track .is-ops.is-reached { background: var(--ops); }
.tour-track .is-int.is-reached { background: var(--int); }

.chip { font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; padding: 0.4rem 0.65rem; border: 1px solid #b6bfcc; border-radius: 2px; background: #fff; color: var(--ink); cursor: pointer; transition: border-color 0.2s ease-out, background-color 0.2s ease-out; }
.chip.dev { color: var(--dev); }
.chip.ops { color: var(--ops); }
.chip.int { color: var(--int); }
.chip:hover { border-color: currentColor; background: var(--action-tint); }
.link-button { font: inherit; padding: 0.55rem 0; border: 0; background: none; color: var(--action); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link-button:hover { color: var(--action-hover); text-decoration-thickness: 2px; }
.link-button:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.chip:focus-visible, .link-button:focus-visible, .seg-control button:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }

/* Self-check: six yes/no questions with a live verdict (assets/selfcheck.js) */
ol[data-selfcheck] > li { margin: 0.9rem 0; }
.answers { display: inline-flex; margin-top: 0.5rem; border: 1px solid #868fa0; border-radius: 2px; background: #fff; }
.answers label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 4.4rem; min-height: 44px; padding: 0 0.9rem; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; transition: background-color 0.2s ease-out; }
.answers label + label { box-shadow: inset 1px 0 0 var(--rule); }
.answers input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.answers label:hover { background: var(--action-tint); }
.answers label:has(input:checked) { background: var(--action-pressed); color: var(--action-hover); box-shadow: inset 0 0 0 2px var(--action); }
.answers label:has(input:focus-visible) { outline: 3px solid var(--action); outline-offset: 2px; z-index: 1; }
.verdict { margin: 1.5rem 0 0; padding: 1.1rem 1.3rem 0.9rem; border: 1.5px solid var(--ink); }
.verdict[data-level="pending"] { border-color: var(--rule); }
.verdict-title { margin: 0 0 0.3rem; font-size: 1.3rem; font-weight: 800; line-height: 1.25; color: var(--ink); }
.verdict[data-level="bivalent"] .verdict-title { color: var(--ops); }
.verdict[data-level="unproven"] .verdict-title, .verdict[data-level="fragile"] .verdict-title, .verdict[data-level="trivalent"] .verdict-title { color: var(--int); }
.verdict[data-level="pending"] .verdict-title { font-size: 1.05rem; color: var(--muted); }
.verdict-text { margin: 0 0 0.6rem; }
.verdict-link { margin: 0 0 0.7rem; font-weight: 600; }
.verdict-link:empty { display: none; }
.verdict-foot { margin: 0; padding-top: 0.6rem; border-top: 1px solid var(--hair); font-size: 14px; color: var(--muted); }
.verdict-foot .link-button { padding: 0.2rem 0; }

/* Vocabulary, folded until opened or deep-linked (assets/site.js) */
.vocab-more { margin-top: 1rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.vocab-more summary { cursor: pointer; padding: 0.8rem 0; font-weight: 700; color: var(--ink); }
.vocab-more summary:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.vocab-more[open] { padding-bottom: 1rem; }
.vocab { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.55rem 1.4rem; margin: 0.4rem 0 0; font-size: 16.5px; line-height: 1.55; }
.vocab dt { font-weight: 750; color: var(--ink); }
.vocab dd { margin: 0; }
.vocab dt:target, .vocab dt:target + dd { background: #f8f6fe; }

@media (min-width: 761px) {
  .check-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center; }
  .check-row .answers { margin-top: 0; }
}

@media (max-width: 960px) {
  .explorer.is-live .explorer-body { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .hero { margin-top: 1rem; gap: 0.8rem; }
  .hero .actions { width: 100%; }
  .glance-head { padding-left: 1.1rem; padding-right: 1.1rem; }
  .article-head { margin-top: 1.5rem; }
  .toc ol { columns: 1; }
  /* The diagram runs edge to edge and scrolls with the page; selecting a part scrolls its text into view. */
  .explorer.is-live .explorer-figure { margin: 0 -16px; padding: 4px 0 8px; }
  .explorer-controls { margin-top: 0.3rem; padding: 0 16px; }
  .valence-label { display: none; }
  .seg-control button { padding: 0 0.75rem; }
  .vocab { grid-template-columns: 1fr; gap: 0.1rem; }
  .vocab dd { margin-bottom: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .model .loop, .model .hot, .model .seg > path:first-child, .model .hit, .chip, .seg-control button, .answers label, .tour-track span { transition: none; }
  .model.is-tour .seg.is-lit > path:first-child { animation: none; }
}

@media print {
  .explorer .model, .explorer-controls, .explorer-panel, .answers, .verdict, h2 .anchor { display: none !important; }
  .explorer .static-figure { display: block !important; }
  .explorer.is-live .explorer-body { display: block; }
  .explorer { margin: 1.2rem 0; }
}
.after-check { margin-top: 1.6rem; }

/* Landing: the key lines. The thesis band, wide, under the model, with three supporting punchlines (setup quiet, punchline ink). */
.thesis-home { max-width: var(--wide); }
.thesis-home .thesis-lead p { max-width: 36ch; font-size: clamp(1.45rem, 2.6vw, 1.75rem); }
.thesis-lines { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.5rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--rule); }
.thesis-lines li { margin: 0; padding: 0 1.4rem; font-size: 17px; line-height: 1.45; text-wrap: balance; }
.thesis-lines li + li { border-left: 1px solid var(--rule); }
.thesis-lines span { display: block; }
.thesis-lines .quiet { color: var(--body); font-weight: 500; }
.thesis-lines span:last-child { color: var(--ink); font-weight: 750; }
@media (max-width: 760px) {
  .thesis-lines { grid-template-columns: 1fr; padding-top: 0; }
  .thesis-lines li { padding: 1rem 0.25rem; }
  .thesis-lines li + li { border-left: 0; border-top: 1px solid var(--hair); }
}