/* ============================================================
   SIM CORE — control + telemetry panel styling. Owner: agent E.
   Prefix: sim-. Palette rides the host variables.
   Layout: one dock top-left (below the host header) holding three
   collapsible cards — telemetry, controls, system. Collapsed cards
   keep a slim header row (controls/system heads carry a live
   readout). ≤700px: the header is gone (host hides it), so the dock
   becomes a single slim ROW of three tabs — not three stacked
   full-width bars — with the open card's body dropping down as one
   full-width overlay panel (accordion: opening one closes the
   others) so it never buries more of the model than one tap's worth.
   dB chips are screen-anchored to the bays.
   ============================================================ */

.sim-dock {
  position: fixed;
  top: 64px;
  left: 14px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 262px;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  pointer-events: none;
}

.sim-card {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  flex: none;
}

/* ---------------- card header (always visible) ---------------- */
.sim-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 7px 11px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  text-align: left;
}
.sim-head:hover .sim-chev { border-color: var(--ink); }

.sim-eyebrow {
  flex: 1;
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--soft);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.sim-eyebrow::before {
  content: "";
  width: 12px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.sim-headstat {
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sim-chev {
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 1px solid var(--soft);
  border-bottom: 1px solid var(--soft);
  transform: rotate(45deg);          /* open: points down */
  margin-top: -3px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.sim-collapsed .sim-chev {
  transform: rotate(-45deg);         /* collapsed: points right */
  margin-top: 0;
}

.sim-body { padding: 2px 12px 11px; }
.sim-collapsed .sim-body { display: none; }

/* ---------------- telemetry streams ---------------- */
.sim-stream { margin-bottom: 9px; }
.sim-stream + .sim-stream {
  border-top: 1px solid var(--rule);
  padding-top: 8px;
}
.sim-shead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.sim-dev {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sim-dev-puck { color: var(--gated); }
.sim-dev-vent { color: var(--open); }
.sim-reading {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.sim-spark {
  display: block;
  width: 100%;
  height: 30px;
  margin-bottom: 4px;
}
.sim-infer {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
}
.sim-infer.sim-ok    { color: var(--open); }
.sim-infer.sim-false { color: var(--critical); }
.sim-infer.sim-blind { color: var(--gated); }

/* PM2.5 line on the vent stream (band-colored).
   NO text-transform here: uppercase would turn 'µg' into 'Mg'. */
.sim-pm {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-top: 5px;
}
.sim-pm-good { color: var(--open); }
.sim-pm-mod  { color: var(--gated); }
.sim-pm-poor { color: var(--critical); }
.sim-cap {
  font-size: 0.52rem;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: color-mix(in srgb, var(--soft) 78%, transparent);
  margin-top: 2px;
}

/* ---------------- event log (last 2) ---------------- */
.sim-log {
  border-top: 1px solid var(--rule);
  padding-top: 6px;
  min-height: 18px;
}
.sim-logline {
  font-size: 0.55rem;
  letter-spacing: 0.03em;
  line-height: 1.55;
  color: color-mix(in srgb, var(--soft) 72%, transparent);
  margin-bottom: 3px;
}
.sim-logline.sim-log-new { color: var(--ink); }

/* ---------------- controls ---------------- */
.sim-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.sim-row:last-child { margin-bottom: 0; }
.sim-row-col {
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}
.sim-label {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--soft);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
}
.sim-label b {
  color: var(--ink);
  font-weight: 700;
}

.sim-seg {
  display: flex;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  flex: none;
}
.sim-seg button {
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--soft);
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  padding: 5px 8px;
  transition: color 0.12s ease, background-color 0.12s ease;
}
.sim-seg button:hover { color: var(--ink); }
.sim-seg button.sim-active {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

.sim-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--rule);
  accent-color: var(--accent);
  cursor: pointer;
  margin: 4px 0 2px;
}
.sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--rule);
}
.sim-slider::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--rule);
}

.sim-door {
  display: block;
  width: 100%;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  padding: 7px 10px;
  margin-bottom: 9px;
  transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.sim-door:hover { border-color: var(--soft); }
.sim-door.sim-on {
  color: var(--critical);
  border-color: color-mix(in srgb, var(--critical) 55%, var(--rule));
  background: color-mix(in srgb, var(--critical) 10%, var(--panel));
}
.sim-cook.sim-on {
  color: var(--gated);
  border-color: color-mix(in srgb, var(--gated) 55%, var(--rule));
  background: color-mix(in srgb, var(--gated) 10%, var(--panel));
}

.sim-step {
  display: flex;
  align-items: center;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  flex: none;
}
.sim-step button {
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--soft);
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.7rem;
  line-height: 1;
  padding: 5px 9px;
  transition: color 0.12s ease;
}
.sim-step button:hover { color: var(--ink); }
.sim-step b {
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 5px 9px;
  min-width: 26px;
  text-align: center;
}

/* ---------------- dB chips (screen-anchored to the bays) ---------------- */
.sim-dbchip {
  position: fixed;
  z-index: 4;
  transform: translate(-50%, -130%);
  pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: var(--soft);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 2px 7px;
}

/* ---------------- small screens (≤700px) ----------------
   Row of three slim tabs, not three stacked full-width bars — the
   host header is gone here, so the row starts near the top. Cards
   start collapsed (set in JS); opening one is an accordion (JS
   closes the others) and drops a single full-width overlay panel
   below the row instead of pushing anything — it never grows past
   one card's worth of screen. */
@media (max-width: 700px) {
  .sim-dock {
    left: 10px;
    right: 10px;
    top: 10px;
    width: auto;
    flex-direction: row;
    gap: 6px;
    max-height: none;
    overflow: visible;
  }
  .sim-card { flex: 1 1 0; min-width: 0; }
  .sim-head { min-height: 40px; padding: 10px 8px; }
  .sim-eyebrow { min-width: 0; }
  .sim-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .sim-headstat { display: none; }
  .sim-body {
    /* fixed (not absolute+top:100%) so the panel reliably spans the
       full dock width regardless of which of the three tabs opened it —
       57px mirrors the dock's own top:10px + the 41px tab-row height */
    position: fixed;
    top: 57px;
    left: 10px;
    right: 10px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    backdrop-filter: blur(12px) saturate(1.15);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    /* JS reparents the open body to <body> on mobile (see sim-core.js),
       so it's a sibling of the dock (z-index 5) and balloons (z-index 4),
       not a descendant — needs its own stacking priority over both */
    z-index: 6;
  }
  .sim-eyebrow, .sim-headstat { font-size: 0.64rem; }
  .sim-label, .sim-infer { font-size: 0.64rem; }
  .sim-logline { font-size: 0.62rem; }
  .sim-dev { font-size: 0.64rem; }
  .sim-seg button {
    font-size: 0.62rem;
    padding: 10px 12px;
    min-height: 36px;
  }
  .sim-step button {
    padding: 10px 13px;
    min-height: 36px;
  }
  .sim-step b { padding: 10px 12px; }
  .sim-door { padding: 11px 10px; font-size: 0.64rem; }
  .sim-slider { height: 4px; margin: 8px 0 4px; }
  .sim-slider::-webkit-slider-thumb { width: 16px; height: 16px; }
  .sim-slider::-moz-range-thumb { width: 14px; height: 14px; }
  .sim-dbchip { display: none; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .sim-chev,
  .sim-seg button,
  .sim-step button,
  .sim-door {
    transition: none;
  }
}