/* Who Survives the Hunt? */

:root {
  --accent:       #004445;
  --accent-light: #006668;
  --focus-glow:   #FFD166;
  --ink:          #2C3E3E;
  --muted:        #5A6E6E;
  --line:         #D9D3C3;
  /* Separate from --line. WCAG 2.1 SC 1.4.11 wants 3:1 for the visual boundary of an
     interactive control, and --line manages only 1.49:1 on white -- fine for a decorative
     divider like the setup bar's underline, not for a select or button edge. 3.42:1. */
  --control-line: #7E8E8E;
  /* Darkened from #C98A1B, which gave white text only 2.94:1 against 4.5:1 required.
     4.58:1. --skip-mark keeps the original brighter gold for marks drawn ON the dark
     habitat, where the contrast problem runs the other way. */
  --skip:         #8A5D0C;
  --skip-mark:    #F2B233;
  --danger:       #A8321E;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: #FFFFFF;
  font-family: Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* NO top padding to clear the toolbar. shared/toolbar.js already sets
   body.style.paddingTop to the toolbar height, so reserving it again here pushed the
   control bar 40px clear of the toolbar and left an empty white band between them. */
#sim-app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Setup bar (top) ──
   Everything the student sets, plus the generation readout, in one strip above
   the stage. Play / Reset / Collect / Clear are the shared toolbar's. */
#setup {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 8px 14px;
  padding: 8px 10px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
}

/* Readouts, as a full-width strip flush against the bottom of the habitat and closed
   with a hairline, so they read as the scene's own instrument footer.
   NOT in cards: a rounded bordered box is the visual language of the CONTROLS above, so
   boxing the readouts would put five look-alike boxes on screen and undo the
   control-versus-output distinction that moving them below the scene created. The strip
   gives them a home while borrowing nothing, and adds no colour. */
#statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 4px 30px;
  width: 100%;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
}

/* Each value centred under its own label, so the strip reads as deliberate rather
   than left-ragged. The top bar stays left-aligned within its fields. */
#statusbar .fld { align-items: center; }

.fld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Back to 12px/0.04em. The row was squeezed to 11px when it carried five fields; with
   the two readouts moved below the scene, three fields have room to spare. */
.fld label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.fld .row { display: flex; align-items: center; gap: 6px; }

/* Readout numbers. Sized to hold their own next to the controls rather than to
   whisper, and given the controls' height so every field's baseline lines up. */
.count {
  display: inline-flex;
  align-items: center;
  min-height: 33px;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.count small { font-size: 15px; font-weight: 400; color: var(--muted); margin-left: 3px; }
.count .dead { color: var(--danger); font-size: 15px; }

/* Matched to the combo buttons' height and given real width, so the run length reads
   as a control rather than as the readout's denominator. */
#len { min-width: 70px; height: 32px; padding: 0 6px 0 8px; font-weight: 500; }

select, button {
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--control-line);
  border-radius: 6px;
  padding: 7px 9px;
}
select { max-width: 100%; }
button { cursor: pointer; }

/* ── Combo (habitat / predator) ──
   Closed it shows only the short name, which is what keeps this row compact.
   Open, each option carries the description that makes the choice meaningful —
   a native <select> cannot do that, it renders the same text in both states. */
.combo { position: relative; }

.combo-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 96px;
  width: 100%;
  text-align: left;
  font-weight: 500;
}
.combo-btn .caret {
  margin-left: auto;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--muted);
  flex: 0 0 auto;
}
.combo-btn[aria-expanded="true"] { border-color: var(--accent); }

.combo-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  min-width: 268px;
  max-width: 76vw;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #FFFFFF;
  border: 1px solid var(--control-line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.combo-list[hidden] { display: none; }

.combo-opt {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.combo-opt .opt-name { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.combo-opt .opt-desc { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 1px; }
.combo-opt:hover { background: #EEF4F3; }
/* The keyboard's roving highlight. #EEF4F3 alone is 1.11:1 against white, which a
   keyboard user cannot reliably see, so the active option carries a real 3px accent
   ring -- this is the only thing telling them where Enter will land. */
.combo-opt.active {
  background: #EEF4F3;
  box-shadow: inset 0 0 0 3px var(--accent);
}
.combo-opt[aria-selected="true"] { background: var(--accent); }
.combo-opt[aria-selected="true"] .opt-name,
.combo-opt[aria-selected="true"] .opt-desc { color: #FFFFFF; }
.combo-opt[aria-selected="true"].active { box-shadow: inset 0 0 0 3px var(--focus-glow); }
/* The listbox itself takes focus (the aria-activedescendant pattern), so it must show
   it -- otherwise focus appears to vanish when the list opens. */
.combo-list:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.45; cursor: default; }

button.skip {
  background: var(--skip);
  border-color: var(--skip);
  color: #FFFFFF;
  font-weight: 500;
}
button.skip[aria-pressed="true"] { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72); }

/* Two-tone focus ring. COLOR-1 prescribes the gold --focus-glow, but gold is 1.44:1
   against white and SC 1.4.11 wants 3:1 for a focus indicator, so gold ALONE is not a
   compliant indicator on this page. The accent ring sits in the outline-offset gap and
   supplies the contrast; the gold stays as the house identity. */
:focus-visible {
  outline: 3px solid var(--focus-glow);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--accent);
}
/* Re-stated because the pressed state also sets box-shadow and would otherwise drop
   the dark half of the ring exactly while fast-forwarding. */
button.skip[aria-pressed="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72), 0 0 0 2px var(--accent);
}

/* ── Stage ── */
/* The scene and its readouts are one group, pinned to the top of the pane. The spare
   room below is the SAME white as the control bar, so bar, surround and page are one
   surface and the habitat is the only coloured thing on screen. */
#stage-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Top-aligned, not centred. Centring split the spare room into a band above the
     scene and a band below it, which reads as the scene floating; kept at the top the
     whole surplus collects in one block under the readouts and reads as page. */
  justify-content: flex-start;
  overflow: hidden;
  background: #FFFFFF;
}

/* #scene holds the world's aspect ratio, so the canvas element is exactly the habitat.
   The canvas used to fill the whole pane and letterbox itself, which left the progress
   bar stranded at the bottom of the iframe instead of over the scene. */
#scene {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  aspect-ratio: 720 / 460;
  max-height: 100%;
}

#sim-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

#sim-canvas:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: -2px;
}

/* Skip-ahead progress, overlaid on the bottom of the HABITAT (it is a child of #scene,
   not of the pane) so it sits where the eye already is. Translucent on purpose: the
   world keeps running behind it at its sped-up rate rather than hiding behind a modal. */
#ffbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  padding: 26px 12px 11px;
  color: #FFFFFF;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
}
#ffbar.on { display: block; }

.ff-row { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; }
.ff-track {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.ff-fill { height: 100%; width: 0%; background: var(--skip-mark); }
.ff-pulse {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--skip-mark);
  animation: pulse 1s ease-in-out infinite;
}
#ffGen { font-variant-numeric: tabular-nums; white-space: nowrap; }

@keyframes pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .ff-pulse { animation: none; opacity: 0.9; }
}

/* Narrow pane (the sim shares the window with Tuva Data Tools, and the student can
   drag that divider hard left). The row wraps rather than squeezing controls below
   a usable size, and the readout stops floating right once it has wrapped. */
@media (max-width: 720px) {
  .combo-btn { min-width: 92px; }
}
@media (max-width: 560px) {
  #setup { gap: 8px 12px; padding: 8px 10px; }
  .count { font-size: 20px; }
  .combo-btn { min-width: 104px; font-size: 14px; padding: 7px 8px; }
  .combo-list { min-width: 220px; }
}

/* ── Accessibility ── */
.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;
}

/* ── 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;
}

/* Standards chips in the For Teachers tab. Copied verbatim from the reference sim
   (orbital_motion.css) -- this one is per-sim, the toolbar does not inject it. */
.dialog-body .standard-tag { display:inline-block; background:#E8F5F5; color:var(--accent); font-weight:700; font-size:12px; padding:2px 8px; border-radius:4px; margin-right:6px; }

.dialog-body details { margin-top: 10px; }
.dialog-body summary { cursor: pointer; color: #5c4738; font-weight: 600; }