/* IP-100 — Experiment Observatory: always-on room map + (future) replay stage.
 * Light portal theme; tokens only; radius 0; shadow none; 1px borders.
 */

/* ---- always-on room map ---- */
.obs-room-section { border-top: 1px solid var(--rule); }
.obs-room-head {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.obs-room-head .obs-room-meta { color: var(--ink-70); font-size: 0.82rem; }
.obs-room-layers {
  border: 0; padding: 0; margin: 0 0 0 auto; display: flex; gap: 0.85rem;
  font-size: 0.8rem; color: var(--ink-70);
}
.obs-room-layers label { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.obs-room-layers input { accent-color: var(--signal); }

.obs-room-map {
  width: 100%; height: 460px;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.obs-room-map .leaflet-container { background: var(--surface); font-family: var(--font-mono); }
.obs-room-map .leaflet-popup-content h3 { margin: 0 0 0.3rem; font-size: 0.9rem; }
.obs-room-map .leaflet-popup-content dl {
  display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.6rem; margin: 0; font-size: 0.78rem;
}
.obs-room-map .leaflet-popup-content dt { color: var(--ink-70); }
.obs-room-note { margin-top: 0.7rem; font-size: 0.85rem; }

@media (max-width: 720px) {
  .obs-room-map { height: 340px; }
  .obs-room-layers { margin-left: 0; }
}

/* ---- Observatory replay stage ---- */
/* The detail-page stage has no flex-column parent height, so flex:1 collapses
   to 0 and the zero-size guard never fires. Give it an explicit box. The run
   workbench (base_full flex column) keeps its own flex:1 sizing. */
.exp-replay-stage.stage-replay { height: 72dvh; min-height: 440px; max-height: 760px; }

.obs-pov { display: flex; gap: 0; border: 1px solid var(--rule); border-bottom: 0; }
.obs-pov-tab {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em;
  background: var(--paper-sunk); color: var(--ink-70);
  border: 0; border-right: 1px solid var(--rule); padding: 0.5rem 1rem; cursor: pointer;
}
.obs-pov-tab:last-child { border-right: 0; }
.obs-pov-tab.is-active { background: var(--signal); color: #fff; font-weight: 600; }
.obs-pov-tab:not(.is-active):hover { background: var(--signal-ghost); color: var(--signal); }

.obs-transport .obs-snap {
  font-family: var(--font-mono); font-size: 0.75rem; cursor: pointer;
  background: var(--paper-sunk); border: 1px solid var(--rule); color: var(--ink-70); padding: 0.3rem 0.6rem;
}
.obs-transport .obs-snap, .obs-transport .obs-rec {
  font-family: var(--font-mono); font-size: 0.75rem; cursor: pointer;
  background: var(--paper-sunk); border: 1px solid var(--rule); color: var(--ink-70); padding: 0.3rem 0.6rem;
}
.obs-transport .obs-snap:hover, .obs-transport .obs-rec:hover { border-color: var(--signal); color: var(--signal); }
.obs-transport .obs-rec[disabled] { color: var(--fault); border-color: var(--fault); cursor: default; }
.obs-transport .obs-arm { font-family: var(--font-mono); font-size: 0.75rem; max-width: 18ch; }
.obs-canvas-overlay { image-rendering: auto; }

/* ---- Signal POV: sparkline wall overlay (bottom of the stage canvas) ---- */
.obs-wall {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 600;
  background: rgba(255, 255, 255, 0.94); border-top: 1px solid var(--rule);
  padding: 0.4rem 0.6rem 0.55rem; max-height: 46%; overflow: auto;
}
.obs-wall-head { font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-70); margin-bottom: 0.35rem; font-family: var(--font-mono); }
.obs-wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.4rem; }
.obs-spark { border: 1px solid var(--rule); background: var(--surface); padding: 0.25rem 0.35rem; }
.obs-spark.flash { border-color: var(--fault); box-shadow: inset 0 0 0 1px var(--fault); }
.obs-spark-h { display: flex; justify-content: space-between; font-size: 0.64rem; font-family: var(--font-mono); color: var(--ink-70); margin-bottom: 0.1rem; }
.obs-spark-h .obs-liv { color: var(--stale); }
.obs-spark-v { color: var(--ink-70); }
.obs-spark canvas { display: block; width: 100%; height: 40px; }

/* ---- FSM POV: behaviour state-machine panel (right of the stage) ---- */
.obs-fsm {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 600; width: min(380px, 60%);
  background: rgba(255, 255, 255, 0.96); border: 1px solid var(--rule);
}
.obs-fsm-head { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--rule); }
.obs-fsm-name { color: var(--signal-ink); font-family: var(--font-mono); font-size: 0.82rem; }
.obs-fsm-who { color: var(--ink-70); font-size: 0.68rem; font-family: var(--font-mono); text-align: right; }
.obs-fsm svg { display: block; width: 100%; height: auto; }

.obs-pov-tab[data-pov="signal"].is-active { background: var(--stale); color: #3a2a00; }
.obs-pov-tab[data-pov="fsm"].is-active { background: var(--signal-ink); }

@media (max-width: 720px) { .obs-fsm { width: 78%; } .obs-wall { max-height: 52%; } }