/* Hot Rock, Cool Shade */

:root {
  --accent:       #004445;
  --accent-light: #006668;
  --focus-glow:   #FFD166;
  --ink:          #2C3E3E;
  --muted:        #5A6E6E;
  --line:         #D9D3C3;
  /* Separate from --line: WCAG 1.4.11 wants 3:1 for the visual boundary of an
     interactive control, and --line manages only 1.49:1 on white. 3.42:1. */
  --control-line: #7E8E8E;
}

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

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

/* NO top padding for the toolbar: shared/toolbar.js already sets body.paddingTop to
   the toolbar height, and reserving it again leaves an empty white band. */
#sim-app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#stage-panel {
  flex: 1;
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #FFFFFF;
}

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

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

/* ── Keyboard proxy layer ──
   A transparent focusable button parked over each object in the scene, so the sun,
   the animals, the replica and the bush are all reachable by Tab rather than only the
   canvas as a whole. Pointer events stay off so the mouse passes straight through to
   the canvas, and the visible focus indicator is drawn on the canvas (drawKbFocus) —
   a DOM outline would sit at the proxy's rectangle rather than round the artwork. */
#kb-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
#kb-layer .kb-proxy {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
  color: transparent;
  /* Both halves of the page focus ring are cancelled here, not just the outline: the
     visible indicator for these is drawn on the canvas (drawKbFocus) so that it traces
     the artwork rather than the proxy's rectangle. */
  outline: none;
  box-shadow: none;
}

/* ── Environment readouts ──
   A full-width strip closed with a hairline, flush under the scene, so it reads as the
   scene's own instrument footer. Not in cards: a bordered box is the visual language of
   a control, and none of these are controls. The two BODY temperatures are deliberately
   absent — they live on the canvas gauge, where the preferred range is drawn behind
   them and the two subjects can be compared at a glance. */
#statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 4px 30px;
  width: 100%;
  padding: 9px 10px;
  border-top: 1px solid var(--line);
  background: #FFFFFF;
}

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

.fld label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.count {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

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

/* Narrow pane: the sim shares the window with Tuva Data Tools and that divider can be
   dragged hard left. The readouts wrap rather than squeezing below a usable size. */
@media (max-width: 560px) {
  #statusbar { gap: 4px 16px; padding: 7px 8px; }
  .count { font-size: 17px; }
  /* Not below 12px: the readouts wrap rather than shrinking past legibility. */
  .fld label { font-size: 12px; }
}

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

.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;
}


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