/* Bud or Egg? v2 — MS-LS3-2.
   Layout follows the inheritance sim (`The Next Generation`): DOM panels on a
   CSS grid with inline SVG, rather than a fixed logical canvas letterboxed into
   whatever box it lands in. That is where its responsiveness comes from — the
   grid reflows and the art scales with its cell at any width. The palette and
   the hydra art are this sim's own. */

:root {
  --bg-top: #eaf3f6;
  --bg-bottom: #dfeef2;
  --panel: rgba(252, 254, 255, 0.92);
  --panel-strong: #ffffff;
  --panel-border: #a9c4ce;
  --text: #1F3540;
  --muted: #3B5563;
  --brand: #004445;
  --brand-dark: #00302f;
  --brand-soft: #dcefe6;
  --accent: #004445;
  --accent-light: #006668;
  --focus-glow: #FFD166;
  --control-line: #7E8E8E;
  --gold: #ECB606;
  --gold-edge: #C99A05;
  --gold-ink: #2A2000;
  --danger: #A8321E;
  --ok: #2F6B3E;
  --line: #cfe0e6;
  --water: #CFE6EE;
  --water-deep: #A9CEDD;
  --floor: #9AA894;
  --p1: #2E6E8E;
  --p2: #B0692B;
  --shadow: 0 18px 42px rgba(24, 55, 66, 0.12);
  --empty-cell: #eef5f7;
  --font-body: Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; width: 100%; }

body {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 88% 6%, rgba(255, 244, 205, 0.55), transparent 26%),
    radial-gradient(circle at 8% 22%, rgba(198, 230, 238, 0.9), transparent 26%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }

.sim-shell { width: 100%; display: flex; flex-direction: column; flex: 1; }

/* No top padding for the toolbar: shared/toolbar.js sets body padding-top. */
.sim-main {
  width: min(1180px, calc(100vw - 24px));
  margin: 12px auto 0;
  padding: 0 0 24px;
}

/* Reproduction and Parents are ONE card now: the route toggle above the animals
   and the actions below them. Two separate cards spent a lot of vertical space
   on two headings and two lots of padding, and pushed the pond below the fold. */
.sim-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "parents"
    "pond";
  gap: 14px;
  align-items: start;
}

.parents-panel { grid-area: parents; }
.pond-panel    { grid-area: pond; }

.panel-heading-row .panel-note { margin: 0; text-align: right; max-width: 46ch; }

.panel {
  position: relative;
  overflow: hidden;
  padding: 16px;
  background: var(--panel);
  border: 1px solid rgba(137, 167, 151, 0.5);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.panel::after {
  content: "";
  position: absolute;
  inset: auto -28px -46px auto;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 118, 0.22), transparent 72%);
  pointer-events: none;
}

.panel h2 { margin: 0; font-size: 1.35rem; letter-spacing: -0.02em; }

.panel-heading-row, .field-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  /* Wrap only when the row genuinely cannot fit. A breakpoint used to force
     these into a column, which put "Bring the cold" on its own line at widths
     with plenty of space beside the title. */
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.panel-note { margin: 0 0 12px; font-size: 0.86rem; line-height: 1.5; color: var(--muted); }

/* ── Route toggle ──
   The independent variable, made a control the student sets. */
.route-toggle { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.seg { flex: 0 1 190px; }

.seg {
  flex: 1 1 130px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  background: var(--panel-strong);
  color: var(--text);
  border: 1px solid var(--control-line);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
}
.seg .seg-title { font-weight: 700; font-size: 0.95rem; }
.seg .seg-sub { font-size: 0.78rem; color: var(--muted); }
.seg:hover { border-color: var(--accent); }
.seg.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.seg.on .seg-sub { color: rgba(255, 255, 255, 0.82); }

.bench-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* Bring the cold lives in the pond's own heading row, so it is next to the thing
   it acts on and never below the fold. */
.pond-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

button.step, button.secondary, #btn-cold {
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
}
button.step { background: var(--gold); border-color: var(--gold-edge); color: var(--gold-ink); }
button.step:hover:not(:disabled) { background: #F5C525; }
#btn-cold:hover:not(:disabled) { background: var(--accent-light); }
button.secondary { background: var(--panel-strong); color: var(--text); border-color: var(--control-line); }
button.secondary:hover { border-color: var(--accent); }
button:disabled { opacity: 0.45; cursor: default; }

:focus-visible {
  outline: 3px solid var(--focus-glow);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--accent);
}

/* ── Parent cards ── */
/* Capped: a single parent card stretched the full panel width and left the
   karyotype floating in a lot of empty space. */
/* TWO columns are always reserved, even on the budding route where only one is
   filled. With auto-fit the single card stretched to the full 780px and grew
   taller with it (the karyotype scales with width), so switching route resized
   the card and the animal inside it. A fixed two-column track keeps one parent
   exactly the size of each of two. */
.parent-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 780px;
}

.parent-card {
  display: flex;
  flex-direction: column;
  /* Centres the contents in the card, so the hydra sits on the card's middle
     line rather than being pushed down by whatever is above it. */
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.parent-card:hover { border-color: var(--accent); }
/* Name above count, both flush to the karyotype's left edge, so the count lines
   up with the chromosomes it is counting. Side by side, the name pushed the
   count off that edge. Stacking here does not unbalance the hydra: the column
   grows, the body grows with it, and the hydra stays centred on the body. */
.parent-card .pc-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-left: 2px;
  line-height: 1.3;
}
.parent-card .pc-name { font-weight: 700; font-size: 0.92rem; }
/* Carries a tooltip, so it gets the help cursor and a focus ring like the other
   explainable bits of the interface. */
.parent-card .pc-count {
  cursor: help;
  font-size: 0.74rem;
  color: var(--muted);
  text-align: left;
  padding-left: 2px;
}
/* A two column, two row grid so the hydra can sit in the SAME row as the
   chromosomes and centre against them. As a plain flex row it centred against
   the head text plus the chromosomes, which left it sitting low. */
.parent-card .pc-body {
  display: grid;
  /* A fraction, not `auto`: with an auto track the hydra's percentage width had
     nothing to resolve against and collapsed to its 68px floor. */
  grid-template-columns: minmax(68px, 0.4fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
}
.parent-card .pc-head { grid-column: 2; grid-row: 1; }
/* The hydra spans BOTH rows and centres on the pair, so it sits on the card's
   own middle line rather than on the chromosomes' middle line. Confined to the
   chromosome row it sat low, because the name and count occupy the row above. */
.parent-card .hydra-svg { grid-column: 1; grid-row: 1 / 3; }
.parent-card .pc-karyo { grid-column: 2; grid-row: 2; }
/* Scales with the card. Pinned at 84px it stayed the same size at every width
   while the karyotype beside it grew, so the animal shrank in relative terms
   exactly when space got tight. */
.parent-card .hydra-svg {
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 116px;
  height: auto;
}
.parent-card .pc-karyo { min-width: 0; display: block; }
/* No max-width needed now that the card itself is capped at every breakpoint;
   the karyotype simply takes the space the hydra does not. */
.parent-card .pc-karyo svg { width: 100%; height: auto; }

/* ── Chips ── */
.trial-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 28px; padding: 4px 12px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; font-weight: 700; font-size: 0.86rem; white-space: nowrap;
}
/* Readouts, not controls. The old pills sat on a filled rounded background and
   read as a row of buttons you could press. These are plain stacked figures with
   a hairline between them, which is what a readout looks like. */
.trial-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin: 2px 0 14px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 20px 2px 0;
  margin-right: 20px;
  border-right: 1px solid var(--line);
  cursor: help;
}
.stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.stat:focus { outline: none; }
.stat:focus-visible .stat-label,
.stat:hover .stat-label { color: var(--brand); }
.stat-label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ── The pond ──
   A CSS grid, so fifty cells reflow at any width and the SVG inside each scales
   with it. `aspect-ratio` keeps the cells square without any measuring in JS. */
.pond-grid {
  display: grid;
  /* auto-fill rather than a fixed column count: the number of columns follows
     the available width, so cells stay a sensible size instead of ballooning to
     180px square at desktop (which pushed the pond off the bottom of the page)
     and no breakpoint has to guess. */
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 2px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--water) 0%, var(--water-deep) 100%);
}
.pond-cell {
  position: relative;
  cursor: help;
  display: grid;
  place-items: end center;
  aspect-ratio: 1;
  min-height: 34px;
  background: transparent;
  border: none;
  padding: 0 0 5px;
  cursor: pointer;
}
/* Every row sits on a strip of pond floor. */
.pond-cell::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--floor);
  opacity: 0.85;
}
.pond-cell .hydra-svg { position: relative; z-index: 1; width: 88%; height: auto; }
.pond-cell.is-empty { cursor: default; }
.pond-cell:hover:not(.is-empty) { background: rgba(0, 68, 69, 0.07); }
.pond-grid.is-cold { filter: saturate(0.75) brightness(0.97); }
.pond-grid.is-cold::after { content: none; }


/* ── Chromosome tooltips ──
   Replaces the parent pop-up: the gene behind `Rr` is revealed in place, on
   hover and on keyboard focus, without a modal interrupting anything. */
/* ONLY the gene-carrying pairs are interactive. They are the only ones with a
   tabindex, but the hover style was matching every pair, which made all fifteen
   look clickable when twelve of them do nothing. */
.karyo-pair[data-tip] { cursor: help; }
.parent-card .pc-count:focus { outline: none; }
.parent-card .pc-count:focus-visible,
.parent-card .pc-count:hover { color: var(--brand); text-decoration: underline dotted; }
.karyo-pair[data-tip]:focus { outline: none; }
.karyo-pair[data-tip]:focus-visible rect:first-of-type,
.karyo-pair[data-tip]:hover rect:first-of-type { stroke: var(--accent); stroke-width: 2; }
.karyo-pair--plain { cursor: default; pointer-events: none; }

.karyo-tip {
  position: fixed;
  z-index: 9600;
  max-width: 280px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #12333c;
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.35;
  /* Pointer events stay ON: SC 1.4.13 requires the pointer to be able to move
     onto the tooltip without dismissing it. */
  pointer-events: auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}
.karyo-tip[hidden] { display: none; }

/* The offspring tooltip carries a whole karyotype, so it needs more room than a
   line of text. */
.karyo-tip.is-wide { max-width: 320px; padding: 10px 12px; }
.karyo-tip .tip-head { font-weight: 700; margin-bottom: 6px; }
/* The karyotype keeps the SAME blue/orange it has on the parents, so the two can
   be compared, which means it needs a light panel to sit on inside a dark
   tooltip. On the dark ground the allele letters were all but invisible. */
.karyo-tip svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 2px 0 7px;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 5px 4px;
}
.karyo-tip .tip-note { font-size: 0.78rem; opacity: 0.88; margin-top: 3px; }

/* ── The pond, its overlays and its animations ── */
/* overflow:hidden because the cold veil animates its OWN transform from -100%
   to 100%; without clipping here it slid up out of the pond and washed over the
   stat chips above it. */
.pond-wrap { position: relative; overflow: hidden; border-radius: 14px; }

/* The cold veil is clipped to the pond; the transfer layer deliberately is NOT.
   It sits fixed above the whole page so the piece travelling from the parent to
   the pond is visible for the entire journey — inside the clipped pond wrapper
   it only appeared once it had already arrived. */
.cold-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 14px;
  overflow: hidden;
}

.transfer-layer {
  position: fixed;
  inset: 0;
  z-index: 9400;
  pointer-events: none;
  overflow: visible;
}

.transfer-piece {
  position: absolute;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 1s cubic-bezier(0.4, 0.05, 0.35, 1), opacity 0.3s ease;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.18));
}
.transfer-piece .xfer-karyo { width: 132px; height: auto; }
.transfer-piece .hydra-svg { width: 54px; height: auto; }

/* A replaced parent pops in, so pressing New parent(s) visibly produces a
   different animal rather than silently swapping pixels. */
.parent-card.is-new { animation: parentPop 420ms cubic-bezier(0.34, 1.5, 0.5, 1); }
@keyframes parentPop {
  0%   { transform: scale(0.86); opacity: 0; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* The bud fades out of the parent as its copy sets off, so the parent visibly
   loses the piece instead of keeping one while a duplicate travels. */
.hydra-svg .bud { transition: opacity 260ms ease; }
.hydra-svg .bud.is-detaching { opacity: 0; }
.transfer-layer.is-merging .transfer-piece { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }

/* The cold sweeps down the pond rather than arriving everywhere at once. */
.cold-veil { opacity: 0; }
.cold-veil.is-sweeping {
  opacity: 1;
  background: linear-gradient(180deg,
    rgba(126, 178, 214, 0.55) 0%, rgba(126, 178, 214, 0.28) 45%, rgba(126, 178, 214, 0) 60%);
  animation: coldSweep 2.1s linear forwards;
}
@keyframes coldSweep {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}

/* Offspring GROW rather than appearing at full size. */
.pond-cell .hydra-svg {
  transform-origin: 50% 92%;
  transform: scale(0.05);
  opacity: 0;
}
.pond-grid.is-grown .pond-cell .hydra-svg {
  transform: scale(1);
  opacity: 1;
  transition: transform 420ms cubic-bezier(0.34, 1.4, 0.5, 1),
              opacity 260ms ease;
  transition-delay: calc(var(--i, 0) * 26ms);
}

/* A hydra that has just frozen flinches; a survivor only shivers. */
.pond-cell.just-froze .hydra-svg { animation: froze 420ms ease-out; }
@keyframes froze {
  0%   { transform: scale(1.06) rotate(-3deg); }
  60%  { transform: scale(0.97) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
.pond-cell.shivered .hydra-svg { animation: shiver 380ms ease-in-out; }
@keyframes shiver {
  0%, 100% { transform: translateX(0) scale(1); }
  25% { transform: translateX(-1.5px) scale(1); }
  75% { transform: translateX(1.5px) scale(1); }
}

/* ── The parent's tentacles drift ── */
.hydra-svg.is-alive .tent { transform-origin: 50% 46%; }
.hydra-svg.is-alive .tent-0 { animation: sway 5.2s ease-in-out infinite; }
.hydra-svg.is-alive .tent-1 { animation: sway 4.4s ease-in-out infinite -0.7s; }
.hydra-svg.is-alive .tent-2 { animation: sway 5.8s ease-in-out infinite -1.4s; }
.hydra-svg.is-alive .tent-3 { animation: sway 4.9s ease-in-out infinite -2.1s; }
.hydra-svg.is-alive .tent-4 { animation: sway 6.1s ease-in-out infinite -2.8s; }
.hydra-svg.is-alive .tent-5 { animation: sway 4.6s ease-in-out infinite -3.5s; }
@keyframes sway {
  0%, 100% { transform: rotate(-2.6deg); }
  50%      { transform: rotate(2.6deg); }
}

/* Two parent columns still read down to here. Stacking at 680 made the single
   column WIDER than the two columns had been, so the card and its karyotype grew
   as the window shrank — the opposite of what a breakpoint is for. */
@media (max-width: 520px) {
  .parent-cards { grid-template-columns: 1fr; max-width: 420px; }
  /* Only stack the actions once they genuinely will not sit side by side —
     doing it at 680 cost height at widths that had room to spare. */
  .bench-actions button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hydra-svg.is-alive .tent,
  .cold-veil.is-sweeping,
  .pond-cell.just-froze .hydra-svg,
  .pond-cell.shivered .hydra-svg,
  .parent-card.is-new { animation: none; }
  .pond-grid.is-grown .pond-cell .hydra-svg { transition: none; transition-delay: 0s; }
  .transfer-piece { transition: none; }
}

/* SC 2.2.2 asks for a mechanism to stop motion that starts on its own and runs
   past five seconds. The tentacle sway is the only animation here that loops
   forever; everything else is a short response to something the student did, so
   this stills the sway and leaves that feedback alone. The media query above
   covers the device-level setting, and the checkbox in the About panel covers
   the student who has no such setting turned on. */
html[data-motion="still"] .hydra-svg.is-alive .tent { animation: none; }

.motion-row { margin: 6px 0 4px; }
.motion-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.motion-row input { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }
.motion-note { font-size: 0.86rem; opacity: 0.85; margin-top: 0; }

/* ── Close-up sheet ──
   Text-dense, so it is DOM and gets real layout, real focus order and real
   screen-reader semantics rather than being painted into the canvas. */
#sheet {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(31, 53, 64, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#sheet[hidden] { display: none; }

.sheet-panel {
  background: #FFFFFF;
  border-radius: 10px;
  max-width: 520px;
  width: 100%;
  max-height: 86%;
  overflow: auto;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.26);
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.sheet-head h2 { font-size: 16px; font-weight: 700; color: var(--ink); }

#sheetClose {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  padding: 6px 8px;
}
#sheetClose:hover { background: #E6EEF1; border-color: var(--control-line); }

.sheet-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }

.sheet-karyo { width: 100%; overflow-x: auto; }
/* Capped so the karyotype cannot push the outcome banner below the fold —
   at 12 to 15 pairs over two rows it grows tall enough to do exactly that. */
.sheet-karyo svg { width: 100%; min-width: 300px; height: auto; max-height: 200px; }

.sheet-note { font-size: 13px; line-height: 1.5; color: var(--muted); }

.sheet-genes { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.sheet-genes li { font-size: 13.5px; color: var(--ink); display: flex; align-items: baseline; gap: 7px; }
/* Ties each gene row to the tinted capsule of the pair that carries it. */
.gene-dot {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  transform: translateY(-1px);
}
.sheet-genes code {
  font-size: 13.5px;
  background: #E6EEF1;
  border-radius: 4px;
  padding: 1px 5px;
}

.sheet-trait { font-size: 14px; font-weight: 600; color: var(--ink); }

.sheet-effect {
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  padding: 8px 10px;
}
.sheet-effect.ok  { color: var(--ok);     background: #EAF3EC; }
.sheet-effect.bad { color: var(--danger); background: #F8ECE9; }

/* ── Info dialog ──
   The dialog is Tuva Sims "chrome", so its accent is the P1 purple (#5c4738),
   NOT the sim's green var(--accent). Header = purple with white text; active
   tab / h3 / footer button = purple; tabs/footer surface = #F8FBFB; body text =
   var(--ink). The shared toolbar stylesheet also injects these purple rules
   (scoped to #info-dialog) so existing green sims reskin automatically — keep
   this block in sync with it; do not redefine per sim. */
#info-dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  overflow: hidden;
  margin: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  background: #ffffff;
}

#info-dialog::backdrop {
  background: rgba(30, 16, 48, 0.55);
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #5c4738;
  color: #ffffff;
}

.dialog-header h2 {
  font-size: 16px;
  font-weight: 600;
}

#dialog-close-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#dialog-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

#dialog-close-btn:focus-visible {
  outline: 3px solid var(--focus-glow);
  outline-offset: 2px;
}

.dialog-tabs {
  display: flex;
  border-bottom: 2px solid #E5EAE9;
  background: #F8FBFB;
}

.tab-btn {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 0;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.tab-btn:hover {
  color: #5c4738;
}

.tab-btn.active,
.tab-btn[aria-selected="true"] {
  color: #5c4738;
  border-bottom-color: #5c4738;
}

.tab-btn:focus-visible {
  outline: 3px solid var(--focus-glow);
  outline-offset: -3px;
}

.dialog-body {
  padding: 16px 20px;
  overflow-y: auto;
  max-height: calc(100vh - 240px);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}

.dialog-body h3 {
  font-size: 14px;
  font-weight: 600;
  color: #5c4738;
  margin-top: 14px;
  margin-bottom: 6px;
}

.dialog-body h3:first-child {
  margin-top: 0;
}

.dialog-body p {
  margin-bottom: 8px;
}

.dialog-body ul,
.dialog-body ol {
  padding-left: 20px;
  margin-bottom: 8px;
}

.dialog-body li {
  margin-bottom: 4px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid #E5EAE9;
  background: #F8FBFB;
}

.dialog-close-footer {
  background: #5c4738;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.dialog-close-footer:hover {
  background: #7d6c60;
}

.dialog-close-footer:focus-visible {
  outline: 3px solid var(--focus-glow);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ── Reflow, do not shrink (responsive-layout-playbook move 4) ── */
@media (max-width: 900px) {
  .sim-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "route" "parents" "pond";
  }
}

@media (max-width: 680px) {
  .sim-main { width: min(100vw - 12px, 100%); }
  .panel { border-radius: 18px; padding: 14px; }
}