/* =========================================================================
   The Center Road - a2d-history
   Single stylesheet. No build step, no external fonts, no CDN.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: dark light;

  --left:   #3d97ff;
  --right:  #f4605f;
  --pros:   #e6bf62;
  --valley: #8fa3b8;

  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1240px;

  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --focus: 2px solid #8fc2ff;
}

/* dark is the default look */
:root,
:root[data-theme="dark"] {
  --bg:      #05070a;
  --bg-2:    #080c11;
  --panel:   #0b1016;
  --panel-2: #10161e;
  --border:  #26313d;
  --border-2:#374553;
  --text:    #eef2f7;
  --muted:   #9dabb9;
  --link:    #b9d7ff;
  --grid:    rgba(180, 198, 216, .13);
  --road:    #e9eef4;
  --chip:    #131c25;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:      #f5f7fa;
  --bg-2:    #ffffff;
  --panel:   #ffffff;
  --panel-2: #f0f4f8;
  --border:  #d5dee7;
  --border-2:#b9c6d4;
  --text:    #10161d;
  --muted:   #55636f;
  --link:    #1257a8;
  --grid:    rgba(30, 50, 70, .12);
  --road:    #33414f;
  --chip:    #eaf0f6;
  --left:    #1667d6;
  --right:   #cc2f2f;
  --pros:    #9a7212;
  --valley:  #5b6d80;
  --shadow:  0 8px 24px rgba(19, 38, 57, .10);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg:      #f5f7fa;
    --bg-2:    #ffffff;
    --panel:   #ffffff;
    --panel-2: #f0f4f8;
    --border:  #d5dee7;
    --border-2:#b9c6d4;
    --text:    #10161d;
    --muted:   #55636f;
    --link:    #1257a8;
    --grid:    rgba(30, 50, 70, .12);
    --road:    #33414f;
    --chip:    #eaf0f6;
    --left:    #1667d6;
    --right:   #cc2f2f;
    --pros:    #9a7212;
    --valley:  #5b6d80;
    --shadow:  0 8px 24px rgba(19, 38, 57, .10);
  }
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

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

h1 { font-size: clamp(28px, 4.6vw, 50px); line-height: 1.06; letter-spacing: -.028em; margin: 0 0 14px; }
h2 { font-size: clamp(20px, 2.4vw, 27px); line-height: 1.18; letter-spacing: -.018em; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 0 0 6px; }
p  { margin: 0 0 12px; }

button, input, select, textarea { font: inherit; color: inherit; }

:where(a, button, input, select, textarea, canvas, [tabindex]):focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--panel); border: 1px solid var(--border-2);
  padding: 10px 14px; border-radius: 8px; text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 8px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 22px 18px 48px; }
.wrap.narrow { max-width: 900px; }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }

.eyebrow {
  color: var(--pros);
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  margin: 0 0 8px;
}

.lead { max-width: 74ch; color: var(--muted); font-size: clamp(15px, 1.6vw, 17.5px); }

/* ----------------------------------------------------------------- head */
.site-head {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.head-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: 0 0 auto; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  background:
    linear-gradient(90deg, var(--left) 0 42%, var(--road) 42% 58%, var(--right) 58% 100%);
}
.brand-text b { display: block; font-size: 15px; letter-spacing: -.01em; line-height: 1.15; }
.brand-text small { display: block; color: var(--muted); font-size: 11.5px; }

.site-nav {
  display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto;
  overflow-x: auto; scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  text-decoration: none; color: var(--muted);
  padding: 7px 11px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap; font-size: 14px;
}
.site-nav a:hover { color: var(--text); background: var(--panel-2); }
.site-nav a[aria-current="page"] {
  color: var(--text); background: var(--panel-2); border-color: var(--border-2);
}

.icon-btn {
  flex: 0 0 auto;
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; font-size: 16px; line-height: 1;
}
.icon-btn:hover { border-color: var(--border-2); }

/* ---------------------------------------------------------------- views */
.view[hidden] { display: none; }

.hero { padding: 12px 0 4px; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; margin-top: 14px; }
.legend > * { display: inline-flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.dot-left  { background: var(--left); }
.dot-right { background: var(--right); }
.dot-pros  { background: var(--pros); }
.road-swatch {
  width: 26px; height: 8px; border-radius: 99px; flex: 0 0 auto;
  background: var(--panel-2); border: 1px solid var(--border-2); position: relative;
}
.road-swatch::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 2px;
  border-top: 1px dashed var(--road);
}

/* --------------------------------------------------------------- panels */
.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; margin-top: 18px;
}

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: start; }
.split > .panel { margin-top: 18px; }

.stat-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin-top: 20px;
}
.stat {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.stat span { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; }
.stat b { display: block; font-size: clamp(19px, 2.3vw, 25px); letter-spacing: -.02em; margin: 2px 0; }
.stat small { color: var(--muted); font-size: 12px; display: block; line-height: 1.35; }

/* --------------------------------------------------------------- chart */
.chart-card {
  margin: 20px 0 0;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}

.chart-head {
  display: flex; gap: 14px; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 12px;
}
.chart-head h2 { margin: 0 0 3px; }
.chart-head p { margin: 0; font-size: 13px; }
.chart-tools { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }

.chart-stage { position: relative; }

#mainChart, #compassCanvas {
  width: 100%; height: auto; display: block;
  aspect-ratio: 15 / 7;
  background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: crosshair; touch-action: pan-y;
}
#compassCanvas { aspect-ratio: 25 / 13; cursor: default; margin-top: 16px; }

@media (max-width: 700px) {
  #mainChart { aspect-ratio: 4 / 5; }
  #compassCanvas { aspect-ratio: 1 / 1; }
}

.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--panel-2); border: 1px solid var(--border-2);
  border-radius: 10px; padding: 9px 11px; box-shadow: var(--shadow);
  font-size: 12.5px; line-height: 1.45; max-width: 260px;
}
.chart-tip b { display: block; font-size: 14px; margin-bottom: 2px; }
.chart-tip dl { display: grid; grid-template-columns: auto auto; gap: 1px 10px; margin: 6px 0 0; }
.chart-tip dt { color: var(--muted); }
.chart-tip dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.range-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }

.readout {
  margin: 10px 0 0; color: var(--muted); font-size: 13px; min-height: 1.4em;
}

/* --------------------------------------------------------------- fields */
.field { display: grid; gap: 5px; min-width: 0; }
.field.grow { flex: 1 1 190px; }
.field > span {
  color: var(--muted); font-size: 12px; letter-spacing: .04em;
  display: flex; justify-content: space-between; gap: 8px;
}
.field output { color: var(--text); font-variant-numeric: tabular-nums; }

input[type="search"], input[type="text"], select {
  width: 100%; padding: 9px 11px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 9px;
}

input[type="range"] { width: 100%; accent-color: var(--road); }

.btn {
  cursor: pointer; padding: 9px 14px;
  background: var(--text); color: var(--bg);
  border: 1px solid transparent; border-radius: 9px; font-weight: 600;
}
.btn:hover { opacity: .88; }
.btn-quiet {
  background: var(--panel-2); color: var(--text); border-color: var(--border-2); font-weight: 500;
}
.btn-quiet:hover { background: var(--chip); opacity: 1; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.chip {
  cursor: pointer; padding: 6px 11px; font-size: 13px;
  background: var(--chip); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 999px;
}
.chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: transparent; }
.preset-row { display: flex; gap: 7px; flex-wrap: wrap; margin: 12px 0 4px; }

.weights { border: 0; border-top: 1px solid var(--border); margin: 14px 0 0; padding: 12px 0 0; }
.weights legend {
  padding: 0; color: var(--muted); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .1em;
}
.weight-row {
  display: grid; grid-template-columns: 118px 1fr 34px;
  align-items: center; gap: 10px; margin: 9px 0; font-size: 13.5px;
}
.weight-row output { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- extremes */
.extremes { display: grid; gap: 10px; }
.extreme {
  border-left: 3px solid var(--border-2); padding: 2px 0 2px 11px;
}
.extreme.is-left  { border-left-color: var(--left); }
.extreme.is-right { border-left-color: var(--right); }
.extreme.is-pros  { border-left-color: var(--pros); }
.extreme.is-valley{ border-left-color: var(--valley); }
.extreme span { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; display: block; }
.extreme b { font-size: 15px; }
.extreme small { display: block; color: var(--muted); font-size: 12.5px; }

/* ------------------------------------------------------------ milestones */
.milestone-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.milestone-list li { margin: 0; }
.milestone-list button {
  width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: baseline;
  background: transparent; border: 0; border-top: 1px solid var(--border);
  padding: 9px 4px; font-size: 14px;
}
.milestone-list li:first-child button { border-top: 0; }
.milestone-list button:hover { background: var(--panel-2); }
.milestone-list b { font-variant-numeric: tabular-nums; }
.milestone-list .ms-score { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--muted); }

/* ----------------------------------------------------------------- data */
.filter-bar {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin: 18px 0 6px;
  padding: 14px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius);
}

.table-wrap {
  overflow: auto; max-height: 74vh;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-2);
}

#dataTable { width: 100%; border-collapse: collapse; min-width: 1180px; font-size: 12.5px; }
#dataTable th, #dataTable td {
  padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; text-align: left;
}
#dataTable thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel-2); border-bottom: 1px solid var(--border-2);
  padding: 0; white-space: nowrap;
}
.th-sort {
  width: 100%; background: none; border: 0; cursor: pointer;
  padding: 9px 10px; text-align: left; font-weight: 600; font-size: 12px;
  color: var(--text);
}
.th-sort:hover { color: var(--link); }
th.num .th-sort { text-align: right; }
#dataTable td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#dataTable td.ctx { min-width: 340px; max-width: 460px; color: var(--muted); line-height: 1.42; }
#dataTable tbody tr:hover { background: var(--panel-2); }
#dataTable tbody tr.is-milestone td:first-child { box-shadow: inset 3px 0 0 var(--pros); }

.year-btn {
  background: none; border: 0; cursor: pointer; padding: 0;
  font: inherit; font-weight: 700; color: var(--link);
  font-variant-numeric: tabular-nums;
}
.pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  background: var(--chip); border: 1px solid var(--border-2); color: var(--muted); white-space: nowrap;
}
.v-left  { color: var(--left); }
.v-right { color: var(--right); }
.v-pros  { color: var(--pros); }
.v-valley{ color: var(--valley); }

th[aria-sort="ascending"] .th-sort::after  { content: " \2191"; }
th[aria-sort="descending"] .th-sort::after { content: " \2193"; }

/* -------------------------------------------------------------- compass */
.scale-ends {
  display: flex; justify-content: space-between;
  color: var(--muted); font-size: 11.5px; margin-top: 4px;
}
.compass-result { margin-top: 18px; display: grid; gap: 12px; }
.match-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.match-card .verdict { font-size: clamp(18px, 2.6vw, 24px); letter-spacing: -.02em; margin: 0 0 6px; }
.match-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.match-list li {
  display: grid; grid-template-columns: 58px 1fr auto; gap: 12px;
  align-items: baseline; padding: 7px 0; border-top: 1px solid var(--border);
  font-size: 14px;
}
.match-list li b { font-variant-numeric: tabular-nums; }
.match-list li span:last-child { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- compass quiz + result */
.compass-intro h2, .compass-result-panel h2 { margin: 0 0 8px; font-size: clamp(19px, 2.6vw, 24px); }
.compass-intro p { margin: 0 0 12px; }

.quiz-panel { display: grid; gap: 14px; }
.quiz-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  color: var(--muted); font-size: 13px;
}
.quiz-axis {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid var(--border-2); border-radius: 999px; padding: 2px 9px;
}
.quiz-progress {
  height: 6px; border-radius: 99px; background: var(--panel-2);
  border: 1px solid var(--border); overflow: hidden;
}
.quiz-progress i { display: block; height: 100%; background: var(--pros); transition: width .25s ease; }
.quiz-q {
  font-size: clamp(18px, 3vw, 26px); line-height: 1.35; letter-spacing: -.01em;
  margin: 6px 0 4px; text-wrap: balance;
}
.quiz-answers { display: grid; gap: 8px; }
.quiz-a {
  font: inherit; text-align: left; cursor: pointer;
  padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text);
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.quiz-a:hover { border-color: var(--link); transform: translateX(2px); }
.quiz-a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.quiz-a.is-picked { border-color: var(--pros); box-shadow: inset 3px 0 0 var(--pros); }
/* the two ends get a hint of temperature so the scale reads at a glance */
.quiz-a--yes-strong { border-left: 3px solid #2e7d32; }
.quiz-a--yes        { border-left: 3px solid #4caf50; }
.quiz-a--neutral    { border-left: 3px solid var(--border-2); }
.quiz-a--no         { border-left: 3px solid #ef5350; }
.quiz-a--no-strong  { border-left: 3px solid #b71c1c; }

.compass-plot-wrap { display: grid; place-items: center; margin: 4px 0 16px; }
.compass-plot {
  width: 100%; max-width: 520px; aspect-ratio: 1 / 1; height: auto;
  display: block; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-2);
}

.axis-bars { display: grid; gap: 16px; }
.axis-bar-title {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  margin-bottom: 5px;
}
.axis-bar-title b { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.axis-bar-track {
  display: flex; height: 26px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border); background: var(--panel-2);
}
.axis-bar-track i {
  display: grid; place-items: center; font-style: normal; font-size: 11.5px;
  font-variant-numeric: tabular-nums; color: #fff; min-width: 0; overflow: hidden;
  transition: width .35s ease;
}
.axis-bar-track i span { padding: 0 6px; }
.axis-bar-track--right .lo { background: #3d97ff; }
.axis-bar-track--right .hi { background: #f4605f; }
.axis-bar-track--auth  .lo { background: #6bbf59; }
.axis-bar-track--auth  .hi { background: #d4913a; }
.axis-bar-track--prog  .lo { background: #8b7355; }
.axis-bar-track--prog  .hi { background: #9b6bd6; }
.axis-bar-ends {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; color: var(--muted); margin-top: 4px;
}
.axis-bar-ends b { color: var(--text); }
.axis-bar-ends span > b + em { margin-left: 5px; }
.axis-bar-ends span > em + b { margin-left: 5px; }
.axis-bar-ends em { font-style: normal; }
.axis-bar-ends span:last-child { text-align: right; }

.match-section { margin-top: 26px; }
.match-section h2 { font-size: clamp(18px, 2.4vw, 22px); margin: 0 0 6px; }

.compass-credit {
  margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 13px;
}
.compass-credit p { margin: 0 0 6px; }
.compass-credit .small { font-size: 12px; }

@media (max-width: 560px) {
  .axis-bar-ends { font-size: 11px; }
  .quiz-a { padding: 12px 13px; }
}

/* -------------------------------------------------------------- journey */
.view-journey { padding: 0; }
.journey-mount {
  position: relative;
  width: 100%;
  /* --head-h is measured from the sticky header by main.js, because the nav
     wraps to a second row on narrow screens and a fixed guess clips the HUD. */
  height: calc(100dvh - var(--head-h, 57px));
  min-height: 420px;
  background: #020304;
  overflow: hidden;
}
.journey-mount .loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #9aa7b4; margin: 0;
}
body.is-journey { overflow: hidden; }
/* The journey sizes itself to the viewport, so the footer has nowhere to go.
   Left in place it either strands text below a page that cannot scroll, or —
   on a phone, where the dynamic viewport keeps changing — rides up over the
   animation and squeezes it. The same note is on the Method page. */
body.is-journey .site-foot { display: none; }

/* A landscape phone has less height than the floor above, and the overflow
   would be clipped rather than scrolled. */
@media (max-height: 560px) {
  .journey-mount { min-height: 0; }
}

/* --------------------------------------------------------------- dialog */
.point-dialog {
  width: min(640px, calc(100vw - 28px));
  max-height: min(86vh, 780px);
  padding: 0; border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--panel); color: var(--text); box-shadow: var(--shadow);
}
.point-dialog::backdrop { background: rgba(2, 4, 7, .66); backdrop-filter: blur(3px); }
.dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--panel); z-index: 2;
}
.dialog-head h2 { margin: 0; font-size: 19px; }
.dialog-body { padding: 16px; overflow: auto; }
.dialog-foot {
  display: flex; gap: 8px; justify-content: space-between;
  padding: 12px 16px; border-top: 1px solid var(--border);
  position: sticky; bottom: 0; background: var(--panel);
}

.reading-grid { display: grid; gap: 8px; margin: 14px 0; }
.reading {
  display: grid; grid-template-columns: 96px 1fr 52px; gap: 10px; align-items: center; font-size: 13.5px;
}
.reading .bar {
  position: relative; height: 9px; border-radius: 99px;
  background: var(--panel-2); border: 1px solid var(--border); overflow: hidden;
}
.reading .bar::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--border-2);
}
.reading .bar i { position: absolute; top: 0; bottom: 0; display: block; border-radius: 99px; }
.reading b { text-align: right; font-variant-numeric: tabular-nums; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 13px; margin: 12px 0 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* ---------------------------------------------------------------- prose */
.prose h2 { margin-top: 30px; }
.prose h3 { margin-top: 20px; font-size: 16.5px; }
.prose ul { padding-left: 20px; color: var(--muted); }
.prose li { margin-bottom: 7px; }
.prose li b { color: var(--text); }
.prose code {
  font-family: var(--mono); font-size: .9em;
  background: var(--panel-2); border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 5px;
}
.formula {
  border-left: 3px solid var(--pros); background: var(--panel);
  padding: 12px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14.5px;
}
.callouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.callout {
  border: 1px solid var(--border); background: var(--panel);
  border-radius: var(--radius-sm); padding: 14px;
}
.callout h3 { margin: 0 0 5px; }
.callout p { margin: 0; color: var(--muted); font-size: 13.5px; }

.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; margin-top: 10px; }
.keys dt { font-family: var(--mono); color: var(--text); }
.keys dd { margin: 0; color: var(--muted); }

/* ----------------------------------------------------------------- foot */
.site-foot { border-top: 1px solid var(--border); margin-top: 10px; }
.site-foot .wrap { padding-top: 20px; padding-bottom: 30px; }
.site-foot p { color: var(--muted); font-size: 13px; max-width: 80ch; }

/* ---------------------------------------------------------------- error */
.app-error {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 90; max-width: min(560px, calc(100vw - 24px));
  background: var(--panel); border: 1px solid var(--right);
  border-radius: var(--radius-sm); padding: 12px 16px; box-shadow: var(--shadow);
  font-size: 13.5px;
}
.app-error[hidden] { display: none; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 940px) {
  .split { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .callouts { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .head-inner { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .brand-text small { display: none; }
  .site-nav { order: 3; width: 100%; margin-left: 0; padding-bottom: 2px; }
  /* At 11px of side padding the five links overflow a 390px screen by nine
     pixels and wrap, costing 42px of header height on every page. */
  .site-nav a { padding: 7px 9px; }
  .wrap { padding: 16px 12px 40px; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat small { display: none; }
  .weight-row { grid-template-columns: 96px 1fr 30px; }
  .chart-tools { width: 100%; }
  .chart-tools .field { flex: 1 1 auto; }
  .milestone-list button { grid-template-columns: 54px 1fr; row-gap: 2px; }
  .milestone-list .ms-score { grid-column: 2; }
}

/* Small Android phones. The five nav links still overflow 360px at the sizes
   above and wrap, which costs another 42px of header on the one view that
   measures itself against what the header leaves behind. */
@media (max-width: 400px) {
  .site-nav a { padding: 7px 8px; font-size: 13px; }
}

/* --------------------------------------------------------------- print */
@media print {
  :root { --bg: #fff; --panel: #fff; --panel-2: #fff; --text: #000; --muted: #333; --border: #bbb; --border-2: #888; }
  body { background: #fff; color: #000; }
  .site-head, .site-foot, .skip-link, .chart-tools, .range-row, .filter-bar,
  .preset-row, .btn-row, .icon-btn, .app-error, #chartTip { display: none !important; }
  .view[hidden] { display: block !important; }
  .table-wrap { max-height: none; overflow: visible; border: 0; }
  #dataTable { min-width: 0; font-size: 9pt; }
  #dataTable td.ctx { max-width: none; }
  #dataTable thead th { position: static; }
  .panel, .chart-card, .callout { border: 1px solid #bbb; break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
  h1, h2 { break-after: avoid; }
}