:root {
  /* Field-notebook palette: warm cream paper, deep ink-blue, oxblood
     accent, sage green, dusty sepia for marginalia. */
  --paper: #f6efde;
  --paper-shade: #ecdfba;
  --ink: #1c2545;
  --ink-soft: #5d5b50;
  --accent: #1c4a6b;
  --accent-pale: #d6e4ee;
  --brick: #a02828;
  --brick-soft: #f4d6cf;
  --warn: #a02828;
  --warn-soft: #f4d6cf;
  --good: #2d6a4f;
  --good-soft: #d3e3d2;
  --sepia: #8a6a3a;
  --sepia-soft: #d8c69b;
  --shadow: 0 1px 0 rgba(0,0,0,.07), 0 6px 18px -8px rgba(28,37,69,.22);
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --hand: "Caveat", "Bradley Hand", cursive;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  --rounded: ui-rounded, -apple-system, "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.45 var(--rounded);
  color: var(--ink);
  background:
    /* faint horizontal ruling (notebook lines) */
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(28,74,107,.08) 26px 27px),
    /* faint vertical grid */
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(28,74,107,.05) 26px 27px),
    /* ruled left margin (red-pencil style) — sits just inside the page padding */
    linear-gradient(90deg, transparent 0 56px, rgba(160,40,40,.18) 56px 58px, transparent 58px),
    /* warm vignette so the page doesn't feel flat */
    radial-gradient(ellipse at 50% -10%, rgba(255,247,222,.6), transparent 50%),
    var(--paper);
}
/* Tiny graphite speckle adds paper grain without an image asset. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(28,37,69,.05) 0 1px, transparent 1.4px),
    radial-gradient(circle at 67% 41%, rgba(138,106,58,.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 73%, rgba(28,37,69,.04) 0 1px, transparent 1.3px);
  background-size: 320px 320px, 240px 240px, 380px 380px;
  opacity: .55;
}
.page {
  position: relative; z-index: 1;
  margin: 0 auto; padding: 24px 28px 50px;
}

header.book {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; margin-bottom: 22px;
  border-bottom: 2.5px solid var(--ink); position: relative;
}
header.book::before {
  /* second rule like a journal headband */
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  border-bottom: 1px solid var(--ink); opacity: .5;
}
.header-block { position: relative; min-width: 0; }
.volume-stamp {
  display: inline-block;
  font: 600 9.5px/1 var(--mono); letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sepia);
  padding: 4px 8px; margin-bottom: 6px;
  border: 1px solid var(--sepia); border-radius: 2px;
  background: rgba(216,198,155,.25);
  transform: rotate(-1.2deg);
}
h1.title {
  font: 600 italic 38px/1 var(--serif);
  font-variation-settings: "opsz" 144;
  margin: 0; letter-spacing: -.015em; color: var(--ink);
}
.title em {
  font-style: italic; color: var(--brick); font-weight: 400;
  font-variation-settings: "opsz" 144;
}
.subtitle {
  color: var(--ink-soft); margin: 6px 0 0;
  font: italic 17px/1.15 var(--hand); letter-spacing: .005em;
}
.header-rule {
  margin-left: auto; margin-right: 10px; align-self: center;
  font: italic 16px/1 var(--hand); color: var(--sepia);
  white-space: nowrap;
  transform: rotate(-1deg);
}

.modes {
  display: flex; gap: 6px; background: #fff;
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 4px; box-shadow: var(--shadow);
}
.mode {
  padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: 13px;
  color: var(--ink-soft); cursor: pointer; user-select: none;
  background: transparent; border: 0;
}
.mode.active { background: var(--ink); color: #fff7e6; }

/* Page grid: scenario controls live in a sticky sidebar on the left so
   you can keep adjusting sliders while reading the math on the right.
   The main column stacks: cage stage on top, habitat + math as
   neighbors below, advanced math at the bottom. */
.page-grid {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
/* .controls-sidebar.card uses double-class specificity so it beats the
   later `.card { position: relative }` rule. top: 0 keeps the sidebar
   flush with the top of the cage panel at scroll 0, then sticks to the
   viewport top once the user scrolls so sliders stay accessible while
   reading the math below. overflow stays visible so the Bird Mood
   tooltip can pop out into the main column without being clipped. */
.controls-sidebar.card {
  position: sticky;
  top: 0;
  align-self: start;
  padding: 14px 16px 16px;
  /* Sticky creates a stacking context; bump z so the Bird Mood tooltip
     paints over the main-column cards it pops out into. */
  z-index: 2;
}
.controls-sidebar .control { margin: 0 0 12px; }
.controls-sidebar .control:last-of-type { margin-bottom: 0; }
.controls-sidebar .control .name { font-size: 12px; color: var(--ink-soft); }
.controls-sidebar .control .val { font: 600 13px ui-rounded; }
/* Slider groups (Birds / Money / Cage). Headers mirror the project's
   existing "card label" style — mono uppercase, wide tracking — but
   one tier smaller and in sepia so they nest visually under the
   brick-dot SCENARIO header above. */
.controls-sidebar .control-group { margin: 0 0 14px; }
.controls-sidebar .control-group:last-of-type { margin-bottom: 0; }
.controls-sidebar .control-group-header {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sepia);
  margin: 0 0 10px;
}
/* Header row inside the sidebar: scenario picker, mood, reset — stacks
   vertically since horizontal space is tight. */
.controls-sidebar > .label {
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--sepia-soft);
}
.controls-sidebar .preset-picker {
  margin-left: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.controls-sidebar .preset-blurb {
  flex: 1 0 100%;
  max-width: none;
  white-space: normal;
  margin-top: 2px;
}
.controls-sidebar .verdict-label {
  margin-left: 0;
}
.controls-sidebar .verdict-indicator {
  /* Anchor tooltip to the right edge of the sidebar so it pops INTO
     the main content area instead of off the left of the screen. */
}
.controls-sidebar .verdict-tooltip {
  right: auto;
  left: calc(100% + 12px);
  top: 0;
}
.controls-sidebar .verdict-tooltip::before {
  top: 12px;
  left: -7px;
  right: auto;
  border-right: 0;
  border-bottom: 0;
  border-top: 1.5px solid var(--ink);
  border-left: 1.5px solid var(--ink);
  transform: rotate(-45deg);
}
.controls-sidebar .reset-defaults { margin-left: 0; }

/* Main column hosts the stacked content rows. min-width: 0 prevents
   inner grid children from blowing the column out. */
.main-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Habitat + Math side-by-side as neighbors. The math card will be
   replaced with a parallel food/allowance panel next, so this row is
   designed to host two roughly-equal modules. */
.content-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.preset-picker {
  font: 600 italic 13px/1.1 var(--serif);
  font-variation-settings: "opsz" 60;
  color: var(--ink);
  background: #fffcf0;
  border: 1.5px solid var(--ink); border-radius: 4px;
  padding: 4px 24px 4px 10px;
  margin-left: 6px;
  cursor: pointer;
  text-transform: none; letter-spacing: 0;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 12px) 56%, calc(100% - 7px) 56%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  box-shadow: 1.5px 1.5px 0 var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.preset-picker:hover { transform: translate(-1px, -1px); box-shadow: 2.5px 2.5px 0 var(--ink); }
.preset-picker:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }
.preset-blurb {
  font: italic 14px/1.1 var(--hand); color: var(--sepia);
  letter-spacing: .005em;
  text-transform: none;
  flex: 0 1 auto;
  max-width: 360px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reset-defaults {
  margin-left: 10px; padding: 2px 10px;
  font: 600 10px ui-rounded; letter-spacing: .12em;
  color: var(--ink-soft); background: transparent;
  border: 1px dashed #c4baa0; border-radius: 99px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.reset-defaults:hover {
  color: var(--accent); border-color: var(--accent);
  background: rgba(42,111,151,.06);
}

/* (Legacy `.hero-row` removed — page now uses `.page-grid` with a
    sidebar + main column, and the main column stacks its own rows.) */
.card {
  background: #fffcf0; border: 1.5px solid var(--ink); border-radius: 12px;
  padding: 14px 16px; box-shadow: var(--shadow); position: relative;
}
/* Inner ruled border on every card — gives the cards a proper field-notebook
   feel without a heavy second border. */
.card::after {
  content: ""; position: absolute; inset: 4px;
  border: 1px solid rgba(28,37,69,.12); border-radius: 8px;
  pointer-events: none;
}
.card .label {
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
  position: relative; z-index: 1;
}
.card .label .dot {
  width: 8px; height: 8px; background: var(--brick); border-radius: 50%;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--brick);
}

/* Controls */
.control { margin: 10px 0 14px; }
.control .row { display: flex; justify-content: space-between; align-items: baseline; }
.control .name { font-size: 13px; }
.control .val { font: 600 14px ui-rounded; color: var(--ink); }
.control .val .unit { color: var(--ink-soft); font-weight: 400; font-size: 12px; }
.control input[type=range] { width: 100%; accent-color: var(--accent); margin-top: 6px; }
.control input[type=range] + .hint { font-size: 11px; color: var(--ink-soft); margin-top: 4px; }

/* Stage — stretches to match the math panel's height so the cage and the
   numbers share the same top and bottom edge. The canvas grows; birds and
   cage are positioned with inset so they always center inside it. */
.stage { display: flex; flex-direction: column; }
.stage-canvas {
  flex: 1; min-height: 320px;
  border-radius: 10px; border: 1.5px dashed var(--ink);
  background: linear-gradient(180deg, #fff8d6 0%, #ffe9a8 70%, #f4c478 100%);
  margin: 14px 0 10px; position: relative; overflow: visible;
}
/* Field-guide annotations on the stage. Tiny handwritten labels with
   pointers to the cage parts. Pure CSS, no extra DOM. */
.stage-canvas::before {
  content: "fig. 1";
  position: absolute; top: -2px; right: 8px;
  font: 600 italic 13px/1 var(--hand); color: var(--sepia);
  background: var(--paper); padding: 0 6px;
  transform: rotate(-2deg);
}
/* Isometric birdcage: an SVG drawn in cabinet projection, sized to fit
   the stage canvas. The three sliders (length, width, height) each drive
   one visual axis of the cage so kids can see W/L/H change independently.
   Birds live inside an SVG <foreignObject> so their pixel positioning
   shares the SVG's viewBox coordinate system — they always sit on the
   perches no matter how the canvas is sized. */
.cage-iso {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.bird-layer {
  /* Stress vars consumed by .bird.crowded keyframes. Defaults are no-op. */
  --shake-amp: 0px; --shake-rot: 0deg; --shake-speed: 1.6s;
}
.bird {
  /* SVG <text>: font-size is set per-element; positioned via x/y attrs and
     text-anchor="middle". transform-box ensures keyframe transform-origins
     anchor on the bird's own bbox rather than the SVG viewBox origin. */
  transform-box: fill-box;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.2));
  transition: opacity .25s;
}
.bird.dim { opacity: .32; filter: grayscale(.7); }
/* Stress scales with density (set on .bird-layer as CSS vars).
   At density 1.0 the cage is full but not over — no shake.
   Past 1.0 the amplitude/rotation grow and the speed quickens. */
.bird.crowded {
  animation: shake var(--shake-speed) infinite ease-in-out;
  transform-origin: 50% 90%;
}
/* Lonely budgie: slight desaturation + a gentle slow sway so the kid can
   tell at a glance that a solo bird looks a little down. Non-fatal — no
   .dead state, just a mood. .crowded wins if both classes are present. */
.bird.lonely:not(.crowded) {
  filter: grayscale(.4) brightness(.94);
  animation: lonely-sway 3.4s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes lonely-sway {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(3px) rotate(3deg); }
}
@keyframes shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(calc(var(--shake-amp) * -1), calc(var(--shake-amp) * -0.4)) rotate(calc(var(--shake-rot) * -1)); }
  40% { transform: translate(var(--shake-amp), 0) rotate(var(--shake-rot)); }
  60% { transform: translate(calc(var(--shake-amp) * -0.7), calc(var(--shake-amp) * 0.3)) rotate(calc(var(--shake-rot) * -0.6)); }
  80% { transform: translate(calc(var(--shake-amp) * 0.7), 0) rotate(calc(var(--shake-rot) * 0.6)); }
}

.stage-banner {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  background: rgba(255,247,230,.96); border: 1.5px solid var(--ink);
  border-radius: 10px; padding: 6px 10px; font-size: 12px; box-shadow: var(--shadow);
  z-index: 3;
}
.badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; padding: 2px 8px; border-radius: 99px; font-size: 11px; }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.good { background: var(--good-soft); color: var(--good); }

.btn {
  background: var(--ink); color: #fff7e6; border: 1.5px solid var(--ink);
  padding: 8px 16px; border-radius: 99px; font: 600 13px ui-rounded;
  cursor: pointer; box-shadow: var(--shadow);
}
.btn.ghost { background: #fff; color: var(--ink); }

/* Math card — three columns of compact rows so the panel reads horizontally
   and everything (numbers AND plots) stays visible while sliders move.
   Section headers, the advanced-math disclosure, and the standards list
   span the whole grid. Chart modules span two columns to give the SVG
   room to breathe. */
.math-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  align-content: start;
  padding: 12px 14px;
  height: 100%;
}
.math-card > .label,
.math-card > .math-section,
.math-card > .standards,
.math-card > .advanced-math,
.math-card > .plots-row,
.math-card > .chart-card-bags { grid-column: 1 / -1; }

.plots-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
@media (max-width: 720px) {
  /* Squeeze math rows into a single column on very narrow viewports. */
  .math-card { grid-template-columns: minmax(0, 1fr); }
}

/* Inside the disclosure, sub-rows flow 2-up via a dedicated grid wrapper.
   `<details>` itself doesn't reliably accept display: grid in every engine,
   so we keep grid layout on a regular div child. */
.advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 12px;
  margin-top: 6px;
}

.math-row {
  background: #fffcf0; border: 1px solid var(--sepia-soft); border-radius: 8px;
  padding: 7px 10px 8px; margin: 0; min-width: 0; position: relative;
}
.math-row::before {
  /* faint left rule to mimic a marginalia annotation */
  content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px;
  width: 3px; background: var(--accent-pale); border-radius: 0 2px 2px 0;
}
.math-row.warn::before { background: var(--brick); }
.math-row.good::before { background: var(--good); }
.math-row .q {
  font: 600 10.5px var(--mono);
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: 4px;
}
.math-row .expr {
  font: 500 12.5px/1.2 var(--mono); color: var(--ink);
  padding: 1px 0 3px;
}
.math-row .answers { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
.math-row .answers > div {
  background: var(--paper); border: 1px solid var(--sepia-soft);
  padding: 3px 6px; border-radius: 5px;
  font: 600 12px var(--mono); color: var(--ink);
}
.math-row .answers .key {
  display: block; font: 600 8.5px var(--mono);
  letter-spacing: .2em; text-transform: uppercase; color: var(--sepia);
  margin-bottom: 1px;
}
.math-row.warn { background: var(--warn-soft); border-color: var(--brick); }
.math-row.good { background: var(--good-soft); border-color: var(--good); }

/* Habitat Needs vs. Capacity — a richer "teaching slide" inside the math
   card. Holds the prism viz on the left and three numbered math problems
   on the right. Spans the full math grid via grid-column: 1 / -1 (set on
   the .math-card child selector). Designed so a parallel "Food vs.
   Allowance" panel can reuse the same shell later. */
.habitat-card {
  margin: 0;
  padding: 14px 18px 16px;
  background: #fffcf0;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1;
  height: 100%;
}
.habitat-title {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--ink);
}
.habitat-title .habitat-title-text {
  font: 600 italic 18px/1.15 var(--serif);
  font-variation-settings: "opsz" 60;
  color: var(--brick);
  display: inline-flex; align-items: baseline; gap: 8px;
}
.habitat-title .habitat-title-text::before {
  content: "✦"; color: var(--sepia); font-size: 13px;
  font-style: normal; font-family: var(--rounded);
}
.habitat-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.habitat-viz {
  position: relative;
  padding: 6px 6px 4px;
  background: #fffdf6;
  border: 1px solid var(--sepia-soft);
  border-radius: 8px;
}
.habitat-viz .chart-host { line-height: 0; }
.habitat-viz .chart-svg {
  width: 100%; height: auto;
  max-height: 260px;
}
.habitat-viz .chart-zoom {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; font-size: 11px;
}

.habitat-problems {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.habitat-problem {
  background: var(--paper);
  border: 1px solid var(--sepia-soft);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 9px 12px 10px 14px;
}
.habitat-problem.good { border-left-color: var(--good); }
.habitat-problem.warn {
  border-left-color: var(--brick);
  background: #fff4ec;
}
.habitat-problem > header {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 6px;
}
.habitat-problem .hprob-q {
  font: 600 14.5px/1.2 var(--rounded);
  color: var(--ink);
  letter-spacing: .005em;
}
.habitat-problem .work {
  display: flex; flex-direction: column; gap: 2px;
  color: var(--ink);
}
.habitat-problem .step {
  padding: 1px 0;
}
/* Explanation lines (setup, headers, prose) use the proportional UI font
   so they read as sentences. Inline measurements inside an explanation
   can use <span class="num"> to render in monospace, which lets numbers
   visually pop out of the prose without breaking sentence flow. */
.habitat-problem .step.explain {
  font: 500 14.5px/1.4 var(--rounded);
  color: var(--ink);
}
.habitat-problem .step.explain .num {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13.5px;
}
/* Math lines indent slightly and use monospace so equations look like
   equations. The LHS/eq/RHS columns line up in a single row that wraps
   gracefully on narrow screens. */
.habitat-problem .step.math {
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap;
  padding-left: 14px;
  font: 500 14px/1.55 var(--mono);
  color: var(--ink);
}
.habitat-problem .step.math .lhs { color: var(--ink); }
.habitat-problem .step.math .eq {
  color: var(--sepia); font-weight: 700;
  flex-shrink: 0;
}
.habitat-problem .step.math .rhs {
  color: var(--ink); font-weight: 600;
}
/* Small breathing room when a new explanation section follows math. */
.habitat-problem .step.math + .step.explain {
  margin-top: 5px;
}
/* Sub-section header inside a problem — visually distinct from prose
   explanation lines so the eye can pick out the two parallel parts
   (e.g. 3a vs 3b). Tiny left accent stripe ties it back to the
   problem's left rule. */
.habitat-problem .step.subhead {
  font: 600 13.5px/1.2 var(--rounded);
  color: var(--accent);
  letter-spacing: .005em;
  margin-top: 10px;
  padding: 4px 0 4px 10px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-pale), transparent 70%);
  border-radius: 0 4px 4px 0;
}
.habitat-problem .step.subhead:first-child {
  margin-top: 0;
}
.habitat-problem.warn .step.subhead {
  color: var(--brick);
  border-left-color: var(--brick);
  background: linear-gradient(90deg, var(--warn-soft), transparent 70%);
}
.habitat-problem .answer {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 11px;
  background: var(--good-soft); color: var(--good);
  border: 1.25px solid var(--good); border-radius: 5px;
  font: 700 13.5px/1.2 var(--mono);
  box-shadow: 1.5px 1.5px 0 var(--good);
}
.habitat-problem .answer.warn {
  background: var(--warn-soft); color: var(--brick);
  border-color: var(--brick);
  box-shadow: 1.5px 1.5px 0 var(--brick);
}

/* Charts living inside the math card become compact modules that match
   the math-row look — no nested-card chrome, tight padding, smaller SVG.
   The existing zoom button still pops them out at full size. */
.math-card .chart-card {
  padding: 8px 10px 6px;
  background: #fffcf0;
  border: 1px solid var(--sepia-soft);
  border-radius: 8px;
  box-shadow: none;
  position: relative;
}
.math-card .chart-card::after { display: none; }
.math-card .chart-card h2 {
  font: 600 italic 13px/1.15 var(--serif);
  font-variation-settings: "opsz" 60;
  margin: 0 0 4px; color: var(--ink);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
}
.math-card .chart-card h2 em {
  font: 500 italic 12px/1.1 var(--hand);
  color: var(--sepia); letter-spacing: .005em;
}
.math-card .chart-card .row-standard { font-size: 8px; }
.math-card .chart-card .chart-host { line-height: 0; }
.math-card .chart-card .chart-svg {
  width: 100%; height: auto; max-height: 140px;
}
.math-card .chart-card .chart-zoom {
  width: 20px; height: 20px; top: 6px; right: 6px; font-size: 10px;
}
.math-card .chart-card:hover { transform: none; }

/* Verdict indicator — compact pill in the controls header. Color-coded
   dot + label gives the at-a-glance read; hovering reveals the factors. */
.verdict-label {
  margin-left: auto;
  font: 600 italic 15px/1 var(--hand);
  color: var(--sepia);
  letter-spacing: .01em;
  text-transform: none;
  transform: rotate(-1.5deg);
}
.verdict-indicator {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px 4px 10px;
  background: #fffdf6;
  border: 1.5px solid var(--ink); border-radius: 99px;
  box-shadow: 1.5px 1.5px 0 var(--ink);
  cursor: help;
  text-transform: none; letter-spacing: 0;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.verdict-indicator:hover, .verdict-indicator:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 2.5px 2.5px 0 var(--ink);
  outline: none;
}
.verdict-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink-soft);
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.18);
}
.verdict-text {
  font: 700 11px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
}
.verdict-indicator[data-state=good]   { background: #eef5ec; border-color: var(--good); box-shadow: 1.5px 1.5px 0 var(--good); }
.verdict-indicator[data-state=good]:hover,
.verdict-indicator[data-state=good]:focus-visible { box-shadow: 2.5px 2.5px 0 var(--good); }
.verdict-indicator[data-state=good]   .verdict-dot { background: var(--good); }
.verdict-indicator[data-state=good]   .verdict-text { color: var(--good); }
.verdict-indicator[data-state=mixed]  { background: #fff5d6; border-color: #b58a14; box-shadow: 1.5px 1.5px 0 #b58a14; }
.verdict-indicator[data-state=mixed]:hover,
.verdict-indicator[data-state=mixed]:focus-visible { box-shadow: 2.5px 2.5px 0 #b58a14; }
.verdict-indicator[data-state=mixed]  .verdict-dot { background: #d9a13b; }
.verdict-indicator[data-state=mixed]  .verdict-text { color: #7a5a08; }
.verdict-indicator[data-state=bad]    { background: #fbe8e3; border-color: var(--brick); box-shadow: 1.5px 1.5px 0 var(--brick); }
.verdict-indicator[data-state=bad]:hover,
.verdict-indicator[data-state=bad]:focus-visible { box-shadow: 2.5px 2.5px 0 var(--brick); }
.verdict-indicator[data-state=bad]    .verdict-dot { background: var(--brick); }
.verdict-indicator[data-state=bad]    .verdict-text { color: var(--brick); }

.verdict-tooltip {
  position: absolute; top: calc(100% + 8px); right: -2px;
  width: 280px; padding: 12px 14px 10px;
  background: #fffdf6; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 10px;
  box-shadow: 0 12px 28px -10px rgba(31,34,51,.35), 1.5px 1.5px 0 var(--ink);
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 30;
  text-align: left;
}
.verdict-tooltip::before {
  content: ""; position: absolute; top: -7px; right: 22px;
  width: 11px; height: 11px;
  background: #fffdf6;
  border: 1.5px solid var(--ink); border-right: 0; border-bottom: 0;
  transform: rotate(45deg);
}
.verdict-indicator:hover .verdict-tooltip,
.verdict-indicator:focus-visible .verdict-tooltip,
.verdict-indicator:focus-within .verdict-tooltip {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.verdict-tooltip-head {
  font: 600 italic 16px/1.2 var(--serif);
  font-variation-settings: "opsz" 60;
  color: var(--ink); margin-bottom: 8px;
}
.verdict-tooltip-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.verdict-tooltip-list li {
  font: 500 12.5px/1.3 var(--rounded);
  display: flex; align-items: baseline; gap: 6px;
}
.verdict-tooltip-list .mark { font-weight: 700; font-size: 13px; }
.verdict-tooltip-list .ok   { color: var(--good); }
.verdict-tooltip-list .warn { color: #8a6a14; }
.verdict-tooltip-list .bad  { color: var(--brick); }

.math-section {
  display: flex; align-items: baseline; gap: 12px;
  font: 600 italic 16px/1 var(--serif);
  font-variation-settings: "opsz" 60;
  color: var(--brick);
  margin: 14px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--ink);
  text-transform: none; letter-spacing: 0;
  position: relative;
}
.math-section::before {
  content: "✦"; color: var(--sepia); font-size: 12px;
  font-style: normal; font-family: var(--rounded);
}
.math-section::after {
  /* tiny chapter index, e.g. § II */
  content: attr(data-chapter);
  margin-left: auto;
  font: 500 10px var(--mono); letter-spacing: .18em;
  color: var(--sepia); text-transform: uppercase;
}
.math-section:first-of-type { margin-top: 6px; }

/* Advanced math sits in its own row below the cage + math hero so opening
   it never stretches the cage. The disclosure widget is self-styled (no
   surrounding card chrome needed). */
.advanced-math-row { margin: 0 0 18px; }
.advanced-math-row .advanced-math { margin-top: 0; }

/* Advanced math disclosure — collapsed by default, expands inline. */
.advanced-math { margin-top: 8px; }
.advanced-math > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; margin: 12px 0 6px;
  background: #fffdf6; border: 1.25px dashed #c4baa0; border-radius: 8px;
  transition: background 120ms ease, border-color 120ms ease;
}
.advanced-math > summary::-webkit-details-marker { display: none; }
.advanced-math > summary:hover { background: #fff8e1; border-color: var(--accent); }
.advanced-math > summary .math-section {
  margin: 0; padding: 0; border: 0; display: inline;
}
.advanced-math > summary::after {
  content: "▸"; color: var(--accent); font-size: 14px;
  transition: transform 160ms ease; margin-left: 6px;
}
.advanced-math[open] > summary::after { transform: rotate(90deg); display: inline-block; }
.advanced-math[open] > summary .advanced-hint::before { content: "showing "; }
.advanced-math .advanced-hint {
  font: italic 14px "Caveat", "Bradley Hand", cursive;
  color: var(--ink-soft); margin-left: auto; margin-right: 8px;
}
.math-row .q { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.row-standard {
  position: relative;
  font: 600 9.5px var(--mono);
  color: var(--accent); background: var(--accent-pale);
  padding: 2px 7px;
  border: 1.25px solid var(--accent);
  border-radius: 3px;
  letter-spacing: .04em; flex-shrink: 0;
  box-shadow: 1.5px 1.5px 0 var(--accent);
  transform: rotate(-1.2deg);
  text-transform: lowercase;
  cursor: help;
  transition: transform 120ms ease;
  white-space: nowrap;
}
.row-standard:hover { transform: rotate(0) translate(-1px, -1px); box-shadow: 2.5px 2.5px 0 var(--accent); }
/* On hover, slide in an inverted overlay that shows the underlying
   standard code. Reads via the data-code attribute. */
.row-standard::after {
  content: attr(data-code);
  position: absolute; inset: -1.25px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--paper);
  border-radius: inherit;
  font: 700 9px var(--mono); letter-spacing: .08em;
  text-transform: none;
  opacity: 0; transform: scaleY(.6);
  transform-origin: center;
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}
.row-standard:hover::after { opacity: 1; transform: scaleY(1); }
.chart-card h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.standards {
  margin-top: 14px;
  font: 600 9.5px var(--mono); color: var(--sepia);
  letter-spacing: .22em; text-transform: uppercase;
  border-top: 1px solid var(--sepia-soft); padding-top: 10px;
}
.standards > div { margin-top: 6px; }
.standards .row-standard { margin: 4px 5px 0 0; }
.standards span:not(.row-standard) {
  display: inline-block; padding: 2px 7px;
  border: 1.25px solid var(--accent); border-radius: 3px;
  margin: 4px 5px 0 0;
  background: var(--accent-pale); color: var(--accent);
  box-shadow: 1.5px 1.5px 0 var(--accent);
  font: 700 9px var(--mono); letter-spacing: .08em;
}

/* Charts */
/* Legacy 3-up charts row preserved as fallback selector for any callers
   still searching for it; layout is mostly delivered by .charts-area now. */
.charts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.chart-svg .tick { font: 500 10px "JetBrains Mono", ui-monospace, monospace; fill: var(--ink-soft); }
.chart-card { position: relative; }
.chart-card h2 {
  font: 600 italic 18px/1.1 var(--serif);
  font-variation-settings: "opsz" 60;
  margin: 0 0 8px; color: var(--ink);
}

/* Zoom-in button per chart card. Sits in the upper-right corner. */
.chart-zoom {
  position: absolute; top: 8px; right: 10px;
  width: 26px; height: 26px;
  background: var(--paper); color: var(--ink);
  border: 1.25px solid var(--ink); border-radius: 4px;
  cursor: pointer;
  font: 700 13px var(--mono); line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .55;
  box-shadow: 1.5px 1.5px 0 var(--ink);
  transition: opacity 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  z-index: 2;
}
.chart-zoom:hover {
  opacity: 1; transform: translate(-1px, -1px);
  box-shadow: 2.5px 2.5px 0 var(--ink);
}
.chart-zoom:focus-visible { outline: 2px dashed var(--accent); outline-offset: 2px; }
.charts-area .chart-zoom { width: 22px; height: 22px; font-size: 11px; top: 6px; right: 8px; }

/* Lock background scroll while modal is open. */
body.modal-open { overflow: hidden; }

/* Chart zoom modal — full-detail copy of the active chart, kept in sync
   with the controls below. */
.chart-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.chart-modal[hidden] { display: none; }
.chart-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(28, 37, 69, .55);
  backdrop-filter: blur(3px);
  cursor: zoom-out;
  animation: fade-in 180ms ease-out;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.chart-modal-panel {
  position: relative; z-index: 1;
  width: min(92vw, 880px);
  max-height: 92vh;
  background: var(--paper);
  border: 2.25px solid var(--ink); border-radius: 14px;
  padding: 26px 32px 22px;
  box-shadow: 0 24px 60px -10px rgba(28,37,69,.55), 1.5px 1.5px 0 var(--ink);
  animation: pop-in 220ms cubic-bezier(.2,.7,.3,1.15);
  overflow: auto;
}
.chart-modal-panel::after {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(28,37,69,.18); border-radius: 9px;
  pointer-events: none;
}
@keyframes pop-in {
  0%   { transform: scale(.92) translateY(8px); opacity: 0; }
  100% { transform: scale(1) translateY(0);     opacity: 1; }
}
.chart-modal-heading {
  font: 600 italic 22px/1.15 var(--serif);
  font-variation-settings: "opsz" 144;
  margin: 0 40px 12px 0; color: var(--ink);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
}
.chart-modal-heading em {
  font: 500 italic 16px var(--hand); color: var(--sepia);
  letter-spacing: .005em;
}
.chart-modal-host { position: relative; }
.chart-modal-host .chart-svg {
  width: 100%; height: auto; max-height: 64vh;
}
.chart-modal-close {
  position: absolute; top: 12px; right: 14px;
  width: 32px; height: 32px;
  border: 1.25px solid var(--ink); border-radius: 50%;
  background: var(--paper); color: var(--ink);
  cursor: pointer; font: 700 13px var(--mono);
  box-shadow: 1.5px 1.5px 0 var(--ink);
  z-index: 2;
}
.chart-modal-close:hover { transform: translate(-1px,-1px); box-shadow: 2.5px 2.5px 0 var(--ink); }
.chart-modal-hint {
  margin: 14px 0 0;
  font: italic 16px var(--hand); color: var(--sepia);
  text-align: center;
}
.chart-card h2 em {
  font: 500 italic 13px var(--hand); color: var(--sepia);
  letter-spacing: .005em;
}
.chart-svg { width: 100%; height: 240px; }
.chart-svg .axis { stroke: var(--ink); stroke-width: 1.5; }
.chart-svg .demand-line { stroke: var(--accent); stroke-width: 2.5; fill: none; }
.chart-svg .budget-cap { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
.chart-svg .cage-cap { stroke: #a8761c; stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
.chart-svg .frontier { stroke: var(--accent); stroke-width: 2.5; fill: none; }
.chart-svg .feasible { fill: rgba(45,106,79,.16); stroke: rgba(45,106,79,.35); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-svg .point { fill: var(--ink); stroke: #fff; stroke-width: 2; }
.chart-svg .label-pill { fill: #fff7e6; stroke: var(--ink); stroke-width: 1.25; }
.chart-svg .label-text { font: 600 11px "JetBrains Mono", monospace; fill: var(--ink); }

/* Cage volume prism — faux-3D wireframe of L × W × H with bird markers
   inside and overflow markers below. Back/top/side faces are subtly
   tinted so the prism reads as solid; front face stays paper-pale so
   the bird circles pop. */
.chart-svg .volume-back  { fill: rgba(28,74,107,.05); }
.chart-svg .volume-top   { fill: rgba(28,74,107,.10); }
.chart-svg .volume-side  { fill: rgba(28,74,107,.07); }
.chart-svg .volume-front { fill: rgba(255,255,240,.55); }
.chart-svg .volume-edge-front { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.chart-svg .volume-edge-back  { stroke: var(--ink); stroke-width: 1.0; stroke-dasharray: 3 3; fill: none; opacity: .55; }
.chart-svg .volume-edge-depth { stroke: var(--ink); stroke-width: 1.0; fill: none; opacity: .7; }
.chart-svg .volume-edge-label { font: 600 10px "JetBrains Mono", monospace; fill: var(--ink); }
.chart-svg .volume-bird { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
.chart-svg .volume-overflow { fill: var(--warn); stroke: #fff; stroke-width: 1.5; }
.chart-svg .volume-overflow-label { font: 600 10px ui-rounded; fill: var(--warn); }
.chart-svg .volume-summary { font: 600 11px "JetBrains Mono", monospace; fill: var(--ink-soft); }

/* Food + budget chart: bag silhouettes + horizontal allowance/cost bar. */
.chart-svg .bag-outline { fill: #fffdf6; stroke: var(--ink); stroke-width: 1.4; }
.chart-svg .bag-fill    { fill: var(--sepia-soft); opacity: .9; }
.chart-svg .bag-neck    { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.chart-svg .bag-label   { font: 600 9.5px var(--mono); fill: var(--ink-soft); }
.chart-svg .bag-extra   { font: italic 12px var(--hand); fill: var(--sepia); }
.chart-svg .money-track { fill: #fffdf6; stroke: var(--ink); stroke-width: 1.25; }
.chart-svg .money-cost  { stroke: var(--ink); stroke-width: 1; }
.chart-svg .money-cost.ok   { fill: rgba(45,106,79,.55); }
.chart-svg .money-cost.over { fill: rgba(160,40,40,.55); }
.chart-svg .money-allowance { stroke: var(--ink); stroke-width: 1.75; stroke-dasharray: 3 3; }
.chart-svg .money-allowance-label { font: 600 10px var(--mono); fill: var(--ink); }
.chart-svg .money-cost-label { font: 600 10.5px var(--mono); fill: var(--ink); }

/* Wild visits bar chart */
.chart-svg .bar-label { font: 500 11px ui-rounded; fill: var(--ink); }
.chart-svg .bar-value { font: 600 11px "JetBrains Mono", monospace; fill: var(--ink-soft); }
.chart-svg .bar-match { fill: var(--accent); }
.chart-svg .bar-dim { fill: rgba(91,94,117,.28); }

/* Variety vs visits scatter */
.chart-svg .quad-label { font: italic 10px "Caveat", "Bradley Hand", cursive; fill: var(--ink-soft); opacity: .65; font-size: 13px; }
.chart-svg .axis-label { font: 600 10px ui-rounded; fill: var(--ink-soft); letter-spacing: .04em; }

/* Polish: handwriting accent for marginalia */
.subtitle { font-family: "Caveat", "Bradley Hand", cursive; font-size: 18px; line-height: 1.1; }

/* Pin button gets its own row spot when it appears */
header.book #pin {
  margin-left: auto;
  margin-right: 14px;
  font: 600 13px ui-rounded;
}
header.book #pin:hover { background: #fff7e6; }

/* Polished button states — tactile lift, sharp shadow on press */
.btn { transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 10px 22px -10px rgba(31,34,51,.28); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.btn:focus-visible, .mode:focus-visible, #pin:focus-visible {
  outline: 2px dashed var(--accent); outline-offset: 3px;
}

/* Mode pill hover */
.mode { transition: background 120ms ease, color 120ms ease; }
.mode:not(.active):hover { background: rgba(31,34,51,.06); color: var(--ink); }

/* Slider: visible thumb with hover */
.control input[type=range] { height: 22px; }
.control input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--paper);
  box-shadow: 0 1px 0 rgba(0,0,0,.2); cursor: grab;
  transition: transform 120ms ease;
}
.control input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.control input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
.control input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--paper);
  box-shadow: 0 1px 0 rgba(0,0,0,.2); cursor: grab;
}

/* Select dropdowns match the notebook style */
.control select {
  margin-top: 4px; padding: 4px 8px;
  font: 500 13px ui-rounded; color: var(--ink);
  background: #fffdf6; border: 1.25px solid #c4baa0; border-radius: 6px;
  cursor: pointer;
}
.control select:focus-visible { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* Math row: brief flash on render so kids see what just changed */
.math-row { animation: math-pop 220ms ease; }
@keyframes math-pop {
  0%   { transform: translateY(2px); opacity: .6; }
  100% { transform: translateY(0);   opacity: 1; }
}

/* Smoother stage transitions */
.stage-canvas { transition: background 320ms ease; }
.bird { transition: opacity .35s ease, filter .35s ease, transform .45s cubic-bezier(.5,-.4,.7,1.4); }
/* Dead bird: stop shaking, flip upside down (legs up), drop a few px,
   fade and desaturate. !important so the .crowded shake doesn't fight us. */
.bird.dead {
  animation: none !important;
  transform: rotate(180deg) translateY(6px) !important;
  opacity: .42;
  filter: grayscale(.85);
}
/* Explosion: bigger, brighter, debris-y. Bird itself does a cartoon
   pop-and-fade; .particle children fly outward radially. */
.bird.exploding {
  animation: bird-explode 700ms cubic-bezier(.18,.7,.3,1.2) forwards !important;
  z-index: 5;
}
@keyframes bird-explode {
  0%   { transform: scale(1) rotate(0); filter: brightness(1); }
  18%  { transform: scale(2) rotate(60deg);
         filter: brightness(1.9) saturate(2.4) drop-shadow(0 0 8px #ffb547); }
  45%  { transform: scale(3.4) rotate(220deg);
         filter: brightness(1.7) saturate(1.5) hue-rotate(15deg)
                 drop-shadow(0 0 18px #ff7a1a) drop-shadow(0 0 32px #ffd166); }
  72%  { transform: scale(2.6) rotate(420deg);
         filter: brightness(1.1) saturate(.7) drop-shadow(0 0 6px #ff7a1a);
         opacity: .55; }
  100% { transform: scale(.45) rotate(560deg); filter: brightness(.7); opacity: .12; }
}

/* Daily mood pop: a small reaction emoji floats up above the bird
   when something happens to it (fed, hungry, crowded). */
.mood-pop {
  position: absolute;
  font-size: 18px;
  pointer-events: none;
  z-index: 5;
  animation: mood-float 820ms cubic-bezier(.2,.7,.3,1) forwards;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
}
@keyframes mood-float {
  0%   { transform: translate(-50%, 6px) scale(.5) rotate(-10deg);  opacity: 0; }
  18%  { transform: translate(-50%, -6px) scale(1.15) rotate(2deg); opacity: 1; }
  60%  { transform: translate(-50%, -28px) scale(1.05) rotate(-3deg); opacity: 1; }
  100% { transform: translate(-50%, -46px) scale(.85) rotate(2deg); opacity: 0; }
}

/* Debris emojis spawned around the exploding bird. dx/dy set inline. */
.particle {
  position: absolute;
  font-size: 22px;
  pointer-events: none;
  z-index: 6;
  animation: particle-fly 760ms cubic-bezier(.2,.7,.25,1) forwards;
}
@keyframes particle-fly {
  0%   { transform: translate(-50%, -50%) scale(.3) rotate(0);   opacity: 0; }
  18%  { transform: translate(-50%, -50%) scale(1.25) rotate(15deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)),
                              calc(-50% + var(--dy, 0px)))
                    scale(.55) rotate(var(--rot, 240deg));
         opacity: 0; }
}

/* Stage flash: a quick warm glow across the canvas when an explosion fires. */
.stage-canvas.flash::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255,180,30,.55), rgba(255,90,30,.18) 60%, transparent 80%);
  animation: stage-flash 480ms ease-out forwards;
  z-index: 4;
}
@keyframes stage-flash {
  0% { opacity: 0; }
  10% { opacity: 1; }
  100% { opacity: 0; }
}

/* Secret-options affordance: tiny faint ✨ in the header, brightens on hover.
   Clicking it reveals a small panel anchored below. */
.secret-toggle {
  margin-left: 6px; padding: 0; width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
  font-size: 14px; opacity: .35;
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
}
.secret-toggle:hover, .secret-toggle:focus-visible { opacity: 1; background: rgba(42,111,151,.08); }
.secret-toggle.is-on { opacity: 1; transform: rotate(20deg); background: #fff3c4; }

.secret-panel {
  position: absolute; right: 32px; top: 70px; z-index: 30;
  width: 280px; padding: 14px 16px;
  background: #fffdf6; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 12px;
  box-shadow: 0 12px 28px -10px rgba(31,34,51,.35);
}
.secret-panel[hidden] { display: none; }
.secret-panel h3 { margin: 0 0 4px; font: 600 14px ui-rounded; }
.secret-panel .secret-hint {
  margin: 0 0 10px; font: italic 14px "Caveat", "Bradley Hand", cursive;
  color: var(--ink-soft);
}
.secret-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px; border-radius: 6px; cursor: pointer;
  transition: background 120ms ease;
}
.secret-row:hover { background: rgba(42,111,151,.06); }
.secret-row input { accent-color: var(--accent); }

/* Wild empty-state card */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 20px; text-align: center;
  font-family: "Caveat", "Bradley Hand", cursive; font-size: 18px; color: var(--ink-soft);
}
.empty-state .doodle { font-size: 38px; letter-spacing: 8px; opacity: .8; }

/* Chart card titles get a small italic accent */
.chart-card h2 em { font-style: italic; color: var(--accent); font-weight: 500; }
.chart-card { transition: transform 200ms ease; }
.chart-card:hover { transform: translateY(-1px); }

/* Standards pills become more clickable-looking */
.standards span { transition: background 120ms ease, border-color 120ms ease; }
.standards span:hover { background: #fff3c4; border-color: var(--accent); }

/* Tablet portrait — collapse the habitat/math side-by-side once it gets
   cramped. The sidebar still sits to the left at this size. */
@media (max-width: 1080px) {
  .content-row { grid-template-columns: 1fr; }
}
/* Below this width the sidebar drops above the main content as a
   horizontal strip again so the slider controls aren't squeezed. */
@media (max-width: 900px) {
  .page { padding: 24px 22px 50px; }
  .page-grid { grid-template-columns: 1fr; }
  .controls-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .controls-sidebar > .label {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .controls-sidebar .preset-blurb {
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
  }
  .controls-sidebar .verdict-tooltip {
    /* Re-anchor below for narrow screens. */
    left: auto; right: -2px;
    top: calc(100% + 8px);
  }
  .controls-sidebar .verdict-tooltip::before {
    top: -7px; left: auto; right: 22px;
    border-top: 0; border-left: 0;
    border-right: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    transform: rotate(-135deg);
  }
}
@media (max-width: 880px) {
  .charts-row { grid-template-columns: 1fr; }
  header.book { flex-wrap: wrap; gap: 10px; }
  header.book #pin { margin-left: 0; }
  h1.title { font-size: 26px; }
}
@media (max-width: 520px) {
  .page { padding: 16px 14px 40px; }
  .stage-canvas { min-height: 200px; }
}

/* Narrow viewports: wrap the 7 sliders into a tight 2-column grid so the
   controls strip doesn't dominate the page once it drops above the main
   column. Matches the 900px breakpoint where the sidebar goes horizontal. */
@media (max-width: 900px) {
  .controls-sidebar.card {
    padding: 12px 12px 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 8px;
  }
  .controls-sidebar > .label {
    grid-column: 1 / -1;
    margin: 0;
    padding-bottom: 6px;
  }
  /* Each group becomes its own row of the outer grid spanning both
     columns; inside that row its sliders go back to a 2-col layout so
     the page stays compact. */
  .controls-sidebar .control-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 8px;
    margin: 0;
  }
  .controls-sidebar .control-group-header {
    grid-column: 1 / -1;
    margin: 0;
  }
  .controls-sidebar .control { margin: 0; }
  .controls-sidebar .control input[type=range] { margin-top: 2px; }
  .controls-sidebar .control .name { font-size: 11px; }
  .controls-sidebar .control .val { font-size: 12px; }
}

.compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 880px) {
  .compare-row { grid-template-columns: 1fr; }
}
.compare-col h3 { font: 600 13px ui-rounded; margin: 0 0 6px; }
.compare-col.pinned h3 { color: var(--accent); }
.changed { background: #fff3c4; border-radius: 4px; padding: 2px 6px; margin: 0 -6px; }