/* MAGI's page: the shared skin is ../module.css (site/public/module.css), which lays out the stage and draws its
   controls, gold like every page. This is only what MAGI's stage has of its own: the tiles' light over the face
   (js/panel2d.js), and the verdicts in the scope box (js/stage.js), drawn as the other pages' screens are: Space Mono
   labels in the dim grey, values in gold. The tiles' amber, orange and red are the module's own lights, on its panel
   only. */

/* the light of the tiles, over the face */
.p2-light {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  mix-blend-mode: screen; pointer-events: none;
}

/* ---------- the verdicts: the brains, the votes, the alarm ---------- */
.verdicts .ro { display: grid; gap: 7px; }
.ro-k, .ro-v, .ro-key, .stages span { font-family: "Space Mono", ui-monospace, monospace; }
.ro-k { font-size: 0.7rem; line-height: 1.4; color: var(--dim); white-space: nowrap; }
.ro-v { font-size: 0.72rem; line-height: 1.4; color: var(--gold-hi); text-align: right; font-variant-numeric: tabular-nums; }
.ro-key { font-size: 0.66rem; line-height: 1.35; color: var(--dim); opacity: 0.75; margin: -3px 0 3px 6.2rem; }
.brain, .ro-row { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) 3.2rem; align-items: center; gap: 0.6rem; }

/* a brain: its surprise at the last note against its threshold (the tick); its name warms as its suspicion nears the
   threshold, and lights when it votes */
.brain { --susp: 0; }
.brain .ro-k { color: color-mix(in srgb, var(--gold-hi) calc(var(--susp) * 100%), var(--dim)); transition: color 0.2s; }
.brain.flash .ro-k { color: var(--screen); background: var(--gold-hi); text-shadow: none; transition: none; }
.bar, .risk { position: relative; height: 0.62rem; background: rgba(163, 160, 148, 0.1); }
.bar-fill, .risk-fill { position: absolute; inset: 0 auto 0 0; width: 0; }
.bar-fill { background: rgba(212, 175, 55, 0.55); transition: width 0.15s; }
.brain.voted .bar-fill { background: var(--gold-hi); }
.bar-th { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 2px; margin-left: -1px; background: var(--ink); }

/* the last sixteen notes, by how many brains agreed: none, one, two, all three */
.history { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; }
.hist {
  aspect-ratio: 1.15; background: rgba(163, 160, 148, 0.07);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.hist.n0 { background: rgba(163, 160, 148, 0.24); }
.hist.n1 { background: rgba(212, 175, 55, 0.45); }
.hist.n2 { background: var(--gold); }
.hist.n3 { background: var(--gold-hi); }

/* RISK, and the gates: WATCH, WARN, EMERGENCY and VOTE, lit while high */
.risk-fill { background: var(--gold); }
.stages { display: flex; flex-wrap: wrap; gap: 5px; margin-left: 6.2rem; }
.stages span {
  font-size: 0.64rem; font-weight: 700; line-height: 1; letter-spacing: 0.05em;
  padding: 0.3rem 0.42rem; border: 1px solid var(--s-line); color: rgba(163, 160, 148, 0.5);
}
.stages span.on { color: var(--screen); background: var(--gold-hi); border-color: var(--gold-hi); text-shadow: none; }

/* the knob a visitor last turned, in its own units (as THUMP's) */
.readout {
  text-align: center; min-height: 1.4em;
  font: italic 700 0.78rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--ink);
}
#patch-note { min-height: 6.4em; }

@media (max-width: 520px) {
  .brain, .ro-row { grid-template-columns: 4.6rem minmax(0, 1fr) 3rem; gap: 0.45rem; }
  .ro-key, .stages { margin-left: 5.05rem; }
}