/*
  app.css — the viewer's one stylesheet.

  Dark, one accent (UR blue), two semantic colours that must never be confused with each
  other or with the accent: GREEN = measured, AMBER = assumed, RED = a cap exceeded or a
  ticket refused. If a number is amber it has not been measured. That is the whole
  legend, and it is the reason the palette is this restrained.

  Layout: a 3D stage plus a fixed-width readout rail; the rail drops under the stage
  below 1180px so a laptop keeps both without either becoming useless.
*/

:root {
  --bg: #0b0e11;
  --panel: #12171b;
  --panel-2: #171d22;
  --line: #222b32;
  --ink: #e4e9ed;
  --ink-2: #9aa7b1;
  --ink-3: #66727c;
  --accent: #7dadcc;
  --measured: #6fbf8b;
  --assumed: #d9a441;
  --alert: #e0655a;
  --radius: 10px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

code { font-family: var(--mono); font-size: 0.92em; }
h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }

/* --- header ------------------------------------------------------------------------ */

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #10151a, var(--bg));
}
.brand { display: flex; align-items: baseline; gap: 14px; }
.mark { font-weight: 700; letter-spacing: 0.14em; font-size: 15px; }
.mark i { color: var(--accent); font-style: normal; }
.tagline { color: var(--ink-3); font-size: 12.5px; }

.runpicker { display: flex; gap: 22px; flex-wrap: wrap; }
.run-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.run-head {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin-right: 2px;
}
.run {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 6px 10px; cursor: pointer;
  background: var(--panel); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-size: 12px; line-height: 1.25;
  transition: border-color .12s, color .12s, background .12s;
}
.run:hover { color: var(--ink); border-color: #33404a; }
.run-seed { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.run.on { color: var(--ink); background: #182027; border-color: var(--accent); }
.run.refusal.on { border-color: var(--alert); }
.run.on .run-seed { color: var(--ink-2); }

/* --- layout ------------------------------------------------------------------------ */

main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 16px;
  padding: 16px 20px;
  align-items: start;
}
@media (max-width: 1180px) { main { grid-template-columns: minmax(0, 1fr); } }

.stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.canvas-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 380px;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #0e1215;
}
@media (max-width: 720px) { .canvas-wrap { aspect-ratio: 4 / 3; min-height: 300px; } }
#view { display: block; width: 100%; height: 100%; }

.stamp, .meshnote {
  position: absolute; left: 12px; max-width: 380px;
  padding: 7px 10px; border-radius: 7px;
  background: rgba(10, 14, 17, 0.78); border: 1px solid var(--line);
  color: var(--ink-3); font-size: 11px; line-height: 1.45;
  backdrop-filter: blur(6px);
}
.stamp { top: 12px; }
.stamp b { color: var(--ink-2); }
.meshnote { bottom: 12px; }
.meshnote b { color: var(--ink-2); }

.views { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; }
.views button {
  padding: 5px 11px; cursor: pointer; font: inherit; font-size: 11.5px;
  color: var(--ink-2); background: rgba(10, 14, 17, 0.78);
  border: 1px solid var(--line); border-radius: 6px;
}
.views button.on { color: var(--ink); border-color: var(--accent); }

/* the refusal overlay — the safety demo's loudest signal */
.overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ov-card {
  display: none; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 20px 30px; border-radius: 12px;
  background: rgba(24, 10, 10, 0.86); border: 1px solid var(--alert);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  max-width: 82%;
}
.is-refused .ov-card { display: flex; }
.is-refused .canvas-wrap { box-shadow: inset 0 0 0 2px rgba(224, 101, 90, 0.5); }
.ov-kind { font-size: 11px; letter-spacing: 0.2em; color: var(--alert); }
.ov-reason { font-size: 30px; font-weight: 650; letter-spacing: -0.01em; }
.ov-dq { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.ov-note { font-size: 12px; color: var(--ink-3); max-width: 42ch; line-height: 1.5; }

/* --- station strip ----------------------------------------------------------------- */

.strip {
  position: relative;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
}
@media (max-width: 720px) { .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st {
  padding: 9px 10px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .15s, background .15s;
}
.st.working { border-color: var(--accent); background: #141c22; }
.st-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.st-name { font-size: 12px; font-weight: 600; }
.st-mode { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.st.working .st-mode { color: var(--accent); }
.st-ing {
  font-size: 11px; color: var(--ink-2); margin: 3px 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 16px;
}
.st-bar { height: 3px; border-radius: 2px; background: #1e262c; overflow: hidden; }
.st-bar i { display: block; height: 100%; background: var(--accent); transition: width .1s linear; }
.st-util {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 10px; color: var(--ink-3); font-family: var(--mono);
}
.st-rail { grid-column: 1 / -1; position: relative; height: 20px; }
.st-tray {
  position: absolute; top: 2px; width: 52px; text-align: center;
  font-size: 10px; font-family: var(--mono); color: var(--bg);
  background: var(--accent); border-radius: 4px; padding: 2px 0;
  transition: left .35s cubic-bezier(.4, 0, .2, 1), opacity .3s;
}

/* --- transport ---------------------------------------------------------------------- */

.transport {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
}
.play, .speed {
  padding: 7px 16px; cursor: pointer; font: inherit; font-size: 12.5px;
  color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 7px;
}
.play { min-width: 76px; font-weight: 600; }
.play.on { border-color: var(--accent); color: var(--accent); }
.speed { min-width: 52px; font-family: var(--mono); }
.clock { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); min-width: 96px; }
.clock b { color: var(--ink); }
.scrub { flex: 1 1 220px; min-width: 160px; accent-color: var(--accent); }
.now {
  flex: 1 1 100%; font-size: 11px; color: var(--ink-3); font-family: var(--mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- cards -------------------------------------------------------------------------- */

.rail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card {
  padding: 14px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
}
.card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 10px; margin-bottom: 11px; border-bottom: 1px solid var(--line);
}
.card-head .sub, .card-head .verdict { font-size: 11px; color: var(--ink-3); }
.fine { font-size: 11px; line-height: 1.55; color: var(--ink-3); margin: 10px 0 0; }
.fine b { color: var(--ink-2); font-weight: 600; }
.empty { font-size: 12px; color: var(--ink-3); margin: 0; }
.warn {
  font-size: 11px; line-height: 1.55; color: var(--assumed);
  margin: 10px 0 0; padding: 8px 10px;
  border-left: 2px solid var(--assumed); background: rgba(217, 164, 65, 0.06);
}

.tag {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
}
.tag-measured { color: var(--measured); background: rgba(111, 191, 139, 0.12); }
.tag-assumed { color: var(--assumed); background: rgba(217, 164, 65, 0.12); }
.tag-over { color: var(--alert); background: rgba(224, 101, 90, 0.14); }

/* --- safety card -------------------------------------------------------------------- */

.safety.admitted { border-color: #2b4a3a; }
.safety.refused { border-color: var(--alert); background: #17100f; }
.safety .verdict {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  padding: 2px 8px; border-radius: 4px;
}
.safety.admitted .verdict { color: var(--measured); background: rgba(111, 191, 139, 0.12); }
.safety.refused .verdict { color: var(--alert); background: rgba(224, 101, 90, 0.16); }
.safety .reason { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.safety .reason code { color: var(--alert); }
.numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.num {
  padding: 10px 12px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.num .n { font-size: 26px; font-weight: 650; font-family: var(--mono); letter-spacing: -0.02em; }
.num .u { font-size: 12px; color: var(--ink-3); margin-left: 4px; }
.num .k { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.35; }
.num.zero .n { color: var(--measured); }

/* --- force panel -------------------------------------------------------------------- */

.force { padding: 10px 0; border-bottom: 1px solid var(--line); }
.force:last-of-type { border-bottom: 0; }
.f-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.f-name { font-size: 12.5px; font-weight: 600; }
.f-val { font-family: var(--mono); font-size: 12.5px; }
.f-val em { color: var(--ink-3); font-style: normal; font-size: 11px; }
.force.over .f-val { color: var(--alert); }
.f-bar {
  position: relative; height: 6px; margin: 7px 0 6px;
  border-radius: 3px; background: #1e262c; overflow: hidden;
}
.f-bar i { display: block; height: 100%; background: var(--measured); }
.force.over .f-bar i { background: var(--alert); }
.f-bar u {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--ink); opacity: 0.85;
}
.f-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  font-size: 10.5px; color: var(--ink-3);
}
.f-meta .method { border-bottom: 1px dotted var(--ink-3); cursor: help; }
.skipped { margin-top: 12px; }
.skipped summary { cursor: pointer; font-size: 11.5px; color: var(--ink-2); }
.skipped ul { margin: 8px 0 0; padding-left: 16px; }
.skipped li { font-size: 11px; color: var(--ink-3); margin-bottom: 7px; line-height: 1.5; }
.skipped li b { color: var(--ink-2); display: block; }

/* --- provenance --------------------------------------------------------------------- */

.prov { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.prov th {
  text-align: left; font-weight: 600; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-3); padding: 0 6px 6px 0;
}
.prov td { padding: 5px 6px 5px 0; border-top: 1px solid var(--line); }
.prov .num-cell { font-family: var(--mono); }
.prov .num-cell em { color: var(--ink-3); font-style: normal; font-size: 10px; }
.prov tr.assumed td { color: var(--ink-2); }
.prov tr.assumed .num-cell:first-of-type { border-bottom: 1px dashed rgba(217, 164, 65, 0.5); }
.prov .nil { color: var(--ink-3); }

.tact { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.tact-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--ink-2); margin-bottom: 8px;
}
.tact-bar {
  position: relative; height: 8px; border-radius: 4px;
  background: #1e262c; overflow: visible; margin-bottom: 8px;
}
.tact-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.tact-bar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.tact-nums { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tact-nums b { font-family: var(--mono); font-size: 17px; }
.tact-nums span { font-size: 11px; color: var(--ink-3); }

/* --- divergence + log --------------------------------------------------------------- */

.dv-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.dv { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.dv li { padding: 7px 0; border-top: 1px solid var(--line); font-size: 11.5px; }
.dv li:first-child { border-top: 0; }
.dv b { font-weight: 600; }
.dv-line { display: block; color: var(--ink-3); font-size: 11px; margin-top: 2px; line-height: 1.5; }
.dv code { color: var(--ink-2); }

.logl { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow-y: auto; }
.logl li {
  font-size: 11px; font-family: var(--mono); color: var(--ink-3);
  padding: 3px 0; opacity: 0.45; transition: opacity .2s;
}
.logl li.past { opacity: 1; color: var(--ink-2); }
.logl .t { display: inline-block; width: 52px; color: var(--ink-3); }

/* --- footer + boot ------------------------------------------------------------------ */

.foot { padding: 18px 20px 32px; border-top: 1px solid var(--line); }
.disclaimer {
  margin: 0 0 8px; font-size: 12px; color: var(--ink-2); max-width: 80ch; line-height: 1.6;
}
.credits { margin: 0; font-size: 11px; color: var(--ink-3); max-width: 90ch; line-height: 1.6; }

.boot {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--bg); color: var(--ink-3); font-size: 13px; z-index: 10;
}
.boot-fail { color: var(--alert); text-align: center; line-height: 1.7; }

/* --- mode switch and LIVE mode ------------------------------------------------------
   The page has two modes and they must never be mistaken for each other, so the switch
   is a full-width pair of cards with their own claim spelled out, and each mode hides
   everything belonging to the other. Live mode is tinted with the accent; playback is
   neutral. Nothing is shown in both unless it is true in both (the station strip is, and
   the 3D stage is, because in live mode it is parked and stamped as parked). */

.modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 12px 20px 0;
}
.modes button {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 10px 14px; cursor: pointer;
  background: var(--panel); color: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit;
}
.modes button:hover { border-color: #33404a; color: var(--ink-2); }
.modes button b { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.modes button span { font-size: 12px; line-height: 1.45; }
.modes button i { font-style: italic; color: var(--ink-2); }
.modes button.on { color: var(--ink); background: #182027; border-color: var(--accent); }
.modes button.on b { color: var(--accent); }
@media (max-width: 720px) { .modes { grid-template-columns: 1fr; } }

.stamp.live { border-color: var(--accent); color: var(--ink-2); }
.stamp.live b { color: var(--accent); }

/* Mode visibility. One rule each way, so adding a panel means picking a side. */
#stamp-live, #console, #live-gate, #live-log { display: none; }
body.is-live #stamp-playback,
body.is-live #transport,
body.is-live .runpicker,
body.is-live #safety,
body.is-live #forces,
body.is-live #provenance,
body.is-live #divergence,
body.is-live #log { display: none; }
body.is-live #stamp-live,
body.is-live #console { display: block; }
body.is-live #live-gate,
body.is-live #live-log { display: block; }

/* --- the live console --------------------------------------------------------------- */

.console {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.lv-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lv-head {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
  min-width: 210px;
}
.lv-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.lv-ticket, .lv-fault {
  padding: 6px 11px; cursor: pointer; font: inherit; font-size: 12px;
  background: var(--panel-2); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 7px;
}
.lv-ticket:hover, .lv-fault:hover { color: var(--ink); border-color: #33404a; }
.lv-ticket.ok { border-color: #2c4a38; color: var(--measured); }
/* A ticket that SHOULD be refused is red before it is clicked, because the point of the
   button is the refusal — not because the page knows the answer. The kernel does. */
.lv-ticket.bad { border-color: #4a2c2a; color: var(--alert); }
.lv-fine { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.console .clock { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.console .clock b { color: var(--ink); }
#live-log .logl { max-height: 240px; }
#live-log .logl li { font-family: var(--mono); font-size: 11.5px; }

/* --- scene switch + humanoid kitchen stage ------------------------------------------- */
.scenes { display: flex; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.scenes button {
  flex: 1 1 280px; text-align: left; padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--line, #232a30); background: var(--panel, #12171b);
  color: inherit; cursor: pointer; font: inherit;
}
.scenes button.on { border-color: #4d7fa8; background: #131c24; }
.scenes button b { display: block; font-size: 15px; margin-bottom: 4px; }
.scenes button span { display: block; font-size: 12.5px; color: var(--dim, #8b959d); line-height: 1.45; }
#kview, #rview, #fview { width: 100%; height: 100%; display: block; }
#ksteps .row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid var(--line, #232a30); font-size: 13px;
}
#ksteps .row:last-child { border-bottom: 0; }
#ksteps .warn { color: #d8a657; }
.transport { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.transport input[type=range] { flex: 1; }

/* `hidden` must win over .stage's own display rule, or a hidden scene still takes layout. */
[hidden] { display: none !important; }
#factory-stage .canvas-wrap, #kitchen-stage .canvas-wrap, #robocasa-stage .canvas-wrap { position: relative; aspect-ratio: 16 / 10; }
#factory-stage .overlay, #kitchen-stage .overlay, #robocasa-stage .overlay {
  /* The base .overlay is a full-bleed centred grid — it exists for the refusal card. Without
     resetting inset and display, this note inherits `place-items: center` and its sentences
     spread across the whole canvas. */
  inset: auto; display: block; place-items: initial;
  position: absolute; left: 14px; top: 14px; max-width: 420px; z-index: 2;
  font-size: 12px; line-height: 1.5; color: var(--dim, #8b959d);
  background: rgba(10,14,17,.82); border: 1px solid var(--line, #232a30);
  border-radius: 8px; padding: 10px 12px;
}
#factory-stage .views, #kitchen-stage .views, #robocasa-stage .views { position: absolute; right: 14px; top: 14px; z-index: 2; display: flex; gap: 6px; }
#factory-stage .note, #kitchen-stage .note, #robocasa-stage .note {
  position: absolute; left: 14px; bottom: 14px; z-index: 2; font-size: 12px;
  color: var(--dim, #8b959d); background: rgba(10,14,17,.82);
  border: 1px solid var(--line, #232a30); border-radius: 8px; padding: 8px 11px;
}

/* A scene button that is fetching its assets says so, rather than looking inert. */
.scenes button.loading { opacity: .72; cursor: progress; }
.scenes button.loading b::after { content: ' — loading…'; font-weight: 400; color: var(--dim, #8b959d); }

/* Factory scene */
.stamp-inline { font: 600 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; padding: 2px 5px;
  border: 1px solid currentColor; border-radius: 3px; color: #9fb4c0; }
#fstatus { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; }
#fstatus .k { font-size: 11px; color: var(--dim, #8b959d); text-transform: uppercase; letter-spacing: .06em; }
#fstatus .v { font: 600 20px/1.2 ui-monospace, Menlo, monospace; }
#fstatus .alarm { color: #e0655a; }
#fstatus .okc { color: #62b8a0; }
#fhonesty summary { cursor: pointer; color: var(--ink, #d7dde2); }
#fhonesty:not([open]) { max-width: 330px; }
.falarm { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 3;
  background: #5a1f1a; color: #ffd9d4; border: 1px solid #e0655a; border-radius: 8px;
  padding: 8px 14px; font: 600 14px/1.3 ui-sans-serif, system-ui, sans-serif; }
.fgrid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.6fr) minmax(220px, 1fr); gap: 22px; }
@media (max-width: 980px) { .fgrid { grid-template-columns: 1fr; } }
.fgrid h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim, #8b959d); margin: 0 0 8px; font-weight: 600; }
.fgrid label { display: block; margin: 10px 0 14px; font-size: 13px; }
.fgrid input[type=range] { width: 100%; margin-top: 6px; }
.fgrid .dim, .fgrid h3 .dim { color: var(--dim, #8b959d); font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 400; }
#fchart { width: 100%; height: auto; display: block; }
.flegend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; margin-top: 6px; }
.flegend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.fbar { display: grid; grid-template-columns: 76px 1fr 44px; gap: 8px; align-items: center; font-size: 12px; margin: 4px 0; }
.fbar span:nth-child(2) { height: 8px; background: #20282e; border-radius: 4px; overflow: hidden; }
.fbar span:nth-child(2) b { display: block; height: 100%; background: #7dadcc; }
.fbar.hot span:nth-child(2) b { background: #e0655a; }
.fcook { font-size: 12px; margin: 3px 0 10px; }
.fcook .busy { color: #62b8a0; }
.fcookrow { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 12px; margin: 3px 0 8px; }
.fcookrow .t { font-family: ui-monospace, Menlo, monospace; }
.fcookrow .safe { color: #62b8a0; } .fcookrow .heat { color: #d8a657; }

/* Phase 2 head scenes (H18+: #reception, #teach) — the same layout as the other 3D scenes */
#recview, #teachview, #singview { width: 100%; height: 100%; display: block; }
#reception-stage .canvas-wrap, #teach-stage .canvas-wrap, #sing-stage .canvas-wrap { position: relative; aspect-ratio: 16 / 10; }
#reception-stage .overlay, #teach-stage .overlay, #sing-stage .overlay {
  inset: auto; display: block; place-items: initial;
  position: absolute; left: 14px; top: 14px; max-width: 420px; z-index: 2;
  font-size: 12px; line-height: 1.5; color: var(--dim, #8b959d);
  background: rgba(10,14,17,.82); border: 1px solid var(--line, #232a30);
  border-radius: 8px; padding: 10px 12px;
}
#reception-stage .note, #teach-stage .note, #sing-stage .note {
  position: absolute; left: 14px; bottom: 14px; z-index: 2; font-size: 13px; max-width: 70%;
  color: #e8eef2; background: rgba(10,14,17,.86);
  border: 1px solid var(--line, #232a30); border-radius: 8px; padding: 8px 11px;
}
#recnotice p, #sing-stage .card p { margin: 6px 0; font-size: 13px; }
/* #sing, S3c: one screen at 1280x800 and up — big face | tongue + one tip line + big score, then the note lane, one
   control bar, the voice credit footer; long texts in the Info popover */
body:has(#sing-stage:not([hidden])) .scenes button { flex: 1 1 110px; padding: 8px 12px; }
body:has(#sing-stage:not([hidden])) .scenes button span { display: none; }     /* scene bar compact while singing */
body:has(#sing-stage:not([hidden])) .scenes button b { margin: 0; font-size: 14px; }
#sing-stage { grid-column: 1 / -1; gap: 8px; }
#sing-stage .sing-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 12px;
  height: clamp(300px, calc(100vh - 366px), 640px); }
#sing-stage .sing-row .canvas-wrap { aspect-ratio: auto; min-height: 0; height: 100%; }
#sing-stage .sing-row .overlay { top: auto; bottom: 8px; left: 8px; max-width: 300px; font-size: 10.5px; line-height: 1.35; padding: 5px 8px; opacity: .85; }
#sing-stage .sing-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
#singtonguebox { margin: 0; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 120px; }
#singtonguebox figcaption { font-size: 12px; opacity: .8; }
#singtongue { display: block; width: 100%; flex: 1 1 auto; min-height: 0; background: rgba(10,14,17,.6); border: 1px solid var(--line, #232a30); border-radius: 8px; }
#sing-stage .singtip { font-size: 15px; color: #e8eef2; background: rgba(10,14,17,.86); border: 1px solid var(--line, #232a30); border-radius: 8px; padding: 10px 12px; }
#singbig { display: flex; align-items: baseline; gap: 10px; }
#singbignum { font-size: 52px; line-height: 1; font-variant-numeric: tabular-nums; color: #62b8a0; }
#singbiglabel { font-size: 13px; color: var(--dim, #8b959d); }
#sing-stage .sing-side p { margin: 0; font-size: 12px; line-height: 1.4; }
#singlane { display: block; width: 100%; height: 84px; background: rgba(10,14,17,.6); border: 1px solid var(--line, #232a30); border-radius: 8px; }
#sing-stage .transport { gap: 6px 12px; padding: 6px 12px; font-size: 13px; flex-wrap: wrap; }
#singmicnote { font-size: 12px; }
#singsong { max-width: 210px; }
#singpitch:empty { display: none; }
#singcredit { margin: 0; font-size: 11px; }
#singinfopanel { max-width: min(520px, calc(100vw - 32px)); max-height: 80vh; overflow: auto; padding: 14px 18px; font-size: 13px; line-height: 1.5;
  color: #e8eef2; background: #10161a; border: 1px solid var(--line, #232a30); border-radius: 10px; }
#singinfopanel::backdrop { background: rgba(0,0,0,.35); }
#singinfopanel h3 { margin: 0 0 6px; font-size: 14px; }
#singinfopanel p { margin: 6px 0; }
@media (max-width: 720px) {     /* phones: stack */
  #sing-stage .sing-row { grid-template-columns: minmax(0, 1fr); height: auto; }
  #sing-stage .sing-row .canvas-wrap { aspect-ratio: 4 / 3; height: auto; }
  #singtonguebox { min-height: 0; }
  #singtongue { flex: none; height: 150px; }
  #sing-stage .sing-row .overlay { max-width: 62%; font-size: 9.5px; padding: 4px 6px; }
}
#singpitch { min-height: 1.3em; font-weight: 600; font-variant-numeric: tabular-nums; }
.dim { color: var(--dim, #8b959d); }

/* Prep room (#prep, PS5) */
#prep-stage { grid-column: 1 / -1; }
#pview { width: 100%; height: 100%; display: block; }
#prep-stage .canvas-wrap { position: relative; aspect-ratio: 16 / 9; }
#prep-stage .overlay { inset: auto; display: block; place-items: initial; position: absolute; left: 14px; top: 14px; max-width: 460px; z-index: 2;
  font-size: 12px; line-height: 1.5; color: var(--dim, #8b959d); background: rgba(10,14,17,.82); border: 1px solid var(--line, #232a30); border-radius: 8px; padding: 10px 12px; }
#phonesty summary { cursor: pointer; color: var(--ink, #d7dde2); }
#phonesty:not([open]) { max-width: 300px; }
#prep-stage .views { position: absolute; right: 14px; top: 14px; z-index: 2; display: flex; gap: 6px; }
#prep-stage .note { position: absolute; left: 14px; bottom: 14px; z-index: 2; font-size: 12px; color: var(--dim, #8b959d);
  background: rgba(10,14,17,.82); border: 1px solid var(--line, #232a30); border-radius: 8px; padding: 8px 11px; }
#prep-stage select { font: inherit; font-size: 12.5px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 6px; }
#probot { display: grid; grid-template-columns: 110px 1.6fr 1.6fr 160px 1.3fr 1.3fr; gap: 10px 18px; }
@media (max-width: 980px) { #probot { grid-template-columns: repeat(2, 1fr); } }
#probot .k { font-size: 11px; color: var(--dim, #8b959d); text-transform: uppercase; letter-spacing: .06em; }
#probot .v { font: 600 14px/1.35 ui-sans-serif, system-ui, sans-serif; margin-top: 3px; }
#probot .v .dim { font-weight: 400; font-size: 12px; }
.pbat { display: inline-block; width: 90px; height: 10px; background: #20282e; border-radius: 5px; overflow: hidden; vertical-align: -1px; }
.pbat b { display: block; height: 100%; }
#pgantt { width: 100%; height: auto; display: block; border-radius: 6px; }
.ph3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim, #8b959d); margin: 0 0 8px; font-weight: 600; }
.ph3 .dim { text-transform: none; letter-spacing: 0; font-weight: 400; }
.pgrid { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(360px, 1.6fr) minmax(240px, 1fr); gap: 22px; }
@media (max-width: 980px) { .pgrid { grid-template-columns: 1fr; } }
.prow { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; border-bottom: 1px solid var(--line, #232a30); }
.prow b { font-family: ui-monospace, Menlo, monospace; font-weight: 600; }
.pgrid .good, .prow .good { color: #62b8a0; } .prow .bad { color: #e0655a; }
.pgrid p { font-size: 12px; margin: 8px 0 0; }
.ptab { width: 100%; border-collapse: collapse; font-size: 12px; }
.ptab th { text-align: left; color: var(--dim, #8b959d); font-weight: 500; padding: 3px 6px 3px 0; }
.ptab td { padding: 3px 6px 3px 0; border-top: 1px solid var(--line, #232a30); font-family: ui-monospace, Menlo, monospace; }
.ptab td.pwarn { color: #d8a657; }
.palarmrow { display: grid; grid-template-columns: 64px 1fr; gap: 2px 8px; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--line, #232a30); }
.palarmrow b { color: #e0655a; }
.pseasonbar { padding: 0 0 8px; border: 0; background: none; }
#pseasonchart { width: 100%; height: auto; display: block; border-radius: 6px; }
#pseasonsum .pgrid { margin-top: 12px; }
/* Humanoid chef (#chef, HC12a) — same layout as #prep */
#chef-stage { grid-column: 1 / -1; }
#cview { width: 100%; height: 100%; display: block; }
#chef-stage .canvas-wrap { position: relative; aspect-ratio: 16 / 9; }
#chef-stage .overlay { inset: auto; display: block; place-items: initial; position: absolute; left: 14px; top: 14px; max-width: 460px; z-index: 2;
  font-size: 12px; line-height: 1.5; color: var(--dim, #8b959d); background: rgba(10,14,17,.82); border: 1px solid var(--line, #232a30); border-radius: 8px; padding: 10px 12px; }
#chonesty summary { cursor: pointer; color: var(--ink, #d7dde2); }
#chonesty:not([open]) { max-width: 330px; }
#chef-stage .views { position: absolute; right: 14px; top: 14px; z-index: 2; display: flex; gap: 6px; }
#chef-stage .note { position: absolute; left: 14px; bottom: 14px; z-index: 2; font-size: 12px; color: var(--dim, #8b959d);
  background: rgba(10,14,17,.82); border: 1px solid var(--line, #232a30); border-radius: 8px; padding: 8px 11px; }
#chef-stage .transport { flex-wrap: wrap; gap: 8px 14px; }
.ctabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ctabs button { font: inherit; font-size: 12.5px; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.ctabs button.on { color: var(--ink); border-color: var(--accent); }
#cstatus { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; }
#cstatus .k { font-size: 11px; color: var(--dim, #8b959d); text-transform: uppercase; letter-spacing: .06em; }
#cstatus .v { font: 600 14px/1.35 ui-sans-serif, system-ui, sans-serif; margin-top: 3px; overflow-wrap: anywhere; }
#cstatus .v .dim { font-weight: 400; font-size: 12px; }
#cstatus .good { color: #62b8a0; } #cstatus .bad { color: #e0655a; }
#ctimeline { width: 100%; height: auto; display: block; border-radius: 6px; cursor: pointer; }
/* DP3 phones: the scene starts on the first screen — compact scene bar (as #sing), and the cell's run picker only on #cell */
@media (max-width: 720px) {
  .scenes button { flex: 1 1 140px; padding: 8px 12px; }
  .scenes button span { display: none; }
  .scenes button b { margin: 0; font-size: 14px; }
  body:has(#stage[hidden]) #runpicker { display: none; }
  /* the "what is real here?" notes sit under the view buttons, not on them */
  #prep-stage .overlay, #factory-stage .overlay, #kitchen-stage .overlay, #robocasa-stage .overlay, #chef-stage .overlay { top: 54px; max-width: calc(100% - 28px); }
  #chef-stage .note { display: none; }
  /* #reception / #teach: the honesty note and the caption go under the picture instead of over the faces */
  #reception-stage .canvas-wrap, #teach-stage .canvas-wrap { aspect-ratio: auto; min-height: 0; }
  #recview, #teachview { height: 280px; }
  #reception-stage .overlay, #teach-stage .overlay, #reception-stage .note, #teach-stage .note { position: static; max-width: none; margin: 8px; font-size: 11.5px; }
  #pscen { max-width: 240px; }
}
/* DP3: the kitchen ingredient panel had no row style (its four fields ran together at every width) */
#kstate .row { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 5px 0; border-bottom: 1px solid var(--line, #232a30); font-size: 13px; }
#kstate .row:last-child { border-bottom: 0; }
/* Robot café (#cafe, CF5) — same layout as #chef */
#cafe-stage { grid-column: 1 / -1; }
#cafeview { width: 100%; height: 100%; display: block; }
#cafe-stage .canvas-wrap { position: relative; aspect-ratio: 16 / 9; }
#cafe-stage .overlay { inset: auto; display: block; place-items: initial; position: absolute; left: 14px; top: 14px; max-width: 460px; z-index: 2;
  font-size: 12px; line-height: 1.5; color: var(--dim, #8b959d); background: rgba(10,14,17,.82); border: 1px solid var(--line, #232a30); border-radius: 8px; padding: 10px 12px; }
#cafehonesty summary { cursor: pointer; color: var(--ink, #d7dde2); }
#cafehonesty:not([open]) { max-width: 330px; }
#cafe-stage .views { position: absolute; right: 14px; top: 14px; z-index: 2; display: flex; gap: 6px; }
#cafe-stage .note { position: absolute; left: 14px; bottom: 14px; right: 14px; z-index: 2; font-size: 12px; color: #e8eef2;
  background: rgba(10,14,17,.82); border: 1px solid var(--line, #232a30); border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; }
#cafe-stage .transport { flex-wrap: wrap; gap: 8px 14px; }
#cafestats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; }
#cafestats .k { font-size: 11px; color: var(--dim, #8b959d); text-transform: uppercase; letter-spacing: .06em; }
#cafestats .v { font: 600 14px/1.35 ui-sans-serif, system-ui, sans-serif; margin-top: 3px; }
#cafestats .dim { font-size: 11.5px; overflow-wrap: anywhere; }
.cafegrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 22px; }
#cafeboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; font-size: 12.5px; }
#cafeboard h4 { margin: 0 0 6px; font-size: 12px; color: var(--dim, #8b959d); font-weight: 600; }
#cafeboard .tk { padding: 3px 0; border-bottom: 1px solid var(--line, #232a30); overflow-wrap: anywhere; }
#cafeboard .tk.you { color: #62b8a0; }
#cafechat { max-height: 260px; overflow-y: auto; font-size: 13px; }
#cafechat .cl { padding: 5px 0; border-bottom: 1px solid var(--line, #232a30); overflow-wrap: anywhere; }
#cafechat .head b { color: #7dadcc; } #cafechat .cust b { color: #d8a657; }
.cafelive { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-size: 13px; }
.cafebox { border: 1px solid var(--line, #232a30); border-radius: 8px; padding: 10px 12px; width: 100%; box-sizing: border-box; }
.cafebox p { margin: 6px 0; line-height: 1.5; }
.cafemenu { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cafeairow { display: flex; gap: 6px; width: 100%; margin-bottom: 8px; }
.cafeairow input { flex: 1 1 auto; min-width: 0; font: inherit; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
#cafe-stage select, #cafe-stage button { font: inherit; font-size: 12.5px; }
@media (max-width: 720px) {
  #cafe-stage .canvas-wrap { aspect-ratio: 4 / 3; }
  #cafe-stage .overlay { top: 46px; left: 8px; max-width: calc(100% - 16px); }
  #cafe-stage .views { top: 8px; right: 8px; }
  #cafe-stage .note { font-size: 11px; left: 8px; right: 8px; bottom: 8px; }
  .cafegrid { grid-template-columns: minmax(0, 1fr); }
  #cafeboard { grid-template-columns: minmax(0, 1fr); }
}
/* end #cafe */

/* #cafe camera row (CF-D9) */
.cafecamrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
#cafecam { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; transform: scaleX(-1); background: #000; }
#caferemname { max-width: 10em; }