/* The HUD round every lab: the same instrument panel as the episodes (HudScene, sim.py).
   Sizes are in vw against a 1920 px frame, so a recording at 1920x1080 matches the episodes'
   pixel sizes, and the page scales down on a laptop. Under 760 px wide it becomes a phone layout. */
@import url("../../brand/tokens.css");

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); overflow: hidden; }
canvas#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hud { position: fixed; inset: 0; pointer-events: none; --u: calc(100vw / 1920); }
.hud * { pointer-events: none; }
.hud .live-only, .hud .live-only * { pointer-events: auto; }
body.recorded .live-only { display: none !important; }

/* the four corners of the viewfinder */
.corners { position: absolute; inset: calc(57 * var(--u)); }
.corners i { position: absolute; width: calc(43 * var(--u)); height: calc(43 * var(--u)); border: 0 solid #2c3d5c; }
.corners i:nth-child(1) { left: 0; top: 0; border-width: 3px 0 0 3px; }
.corners i:nth-child(2) { right: 0; top: 0; border-width: 3px 3px 0 0; }
.corners i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 3px 3px; }
.corners i:nth-child(4) { right: 0; bottom: 0; border-width: 0 3px 3px 0; }

.mono { font-family: var(--mono); letter-spacing: .04em; }
.tag { position: absolute; left: calc(121 * var(--u)); top: calc(72 * var(--u)); font-size: calc(20 * var(--u)); color: #5b6b85; }
.clock { position: absolute; right: calc(121 * var(--u)); top: calc(72 * var(--u)); font-size: calc(20 * var(--u)); color: #5b6b85;
         display: flex; align-items: center; gap: calc(14 * var(--u)); }
.clock b { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: var(--see); box-shadow: 0 0 10px var(--see); }

.title { position: absolute; left: calc(121 * var(--u)); top: calc(118 * var(--u)); max-width: calc(820 * var(--u)); }
.title h1 { margin: 0; font-size: calc(56 * var(--u)); font-weight: 800; letter-spacing: .01em;
            background: var(--shine); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title p { margin: calc(12 * var(--u)) 0 0; font-size: calc(26 * var(--u)); color: var(--muted); line-height: 1.5; }

.panel { position: absolute; background: rgba(11, 17, 32, .78); border: 1px solid var(--line); border-radius: calc(18 * var(--u));
         backdrop-filter: blur(8px); padding: calc(24 * var(--u)) calc(28 * var(--u)); font-size: calc(22 * var(--u)); }
.panel h2 { margin: 0 0 calc(14 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 600; color: var(--muted);
            font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; }

/* the loop, always in this order */
.loop { display: flex; gap: calc(14 * var(--u)); align-items: stretch; }
.loop .step { border: 1px solid var(--line); border-radius: calc(14 * var(--u)); padding: calc(12 * var(--u)) calc(18 * var(--u));
              min-width: calc(210 * var(--u)); background: rgba(5, 7, 13, .6); transition: border-color .2s, box-shadow .2s; }
.loop .step b { display: block; font-size: calc(28 * var(--u)); font-weight: 800; }
.loop .step span { display: block; margin-top: calc(4 * var(--u)); font-size: calc(19 * var(--u)); color: var(--muted); font-family: var(--mono); white-space: nowrap; }
.loop .see b { color: var(--see); } .loop .think b { color: var(--think); } .loop .act b { color: var(--act); }
.loop .see.on { border-color: var(--see); box-shadow: 0 0 18px rgba(52, 211, 153, .35); }
.loop .think.on { border-color: var(--think); box-shadow: 0 0 18px rgba(167, 139, 250, .35); }
.loop .act.on { border-color: var(--act); box-shadow: 0 0 18px rgba(56, 189, 248, .35); }
.loop .arrow { align-self: center; color: #3a4a66; font-size: calc(24 * var(--u)); }

/* a label that follows a point in the scene */
.label { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font-size: calc(19 * var(--u)); }
.bracket { position: absolute; transform: translate(-50%, -50%); }
.bracket i { position: absolute; width: 26%; height: 26%; border: 0 solid currentColor; }
.bracket i:nth-child(1) { left: 0; top: 0; border-width: 3px 0 0 3px; }
.bracket i:nth-child(2) { right: 0; top: 0; border-width: 3px 3px 0 0; }
.bracket i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 3px 3px; }
.bracket i:nth-child(4) { right: 0; bottom: 0; border-width: 0 3px 3px 0; }

/* controls, live only */
.controls label { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(12 * var(--u)); font-size: calc(20 * var(--u)); color: var(--muted); cursor: pointer; }
.controls input[type=range] { flex: 1; accent-color: var(--act); min-width: 0; }
.controls input[type=checkbox] { accent-color: var(--think); width: 1.1em; height: 1.1em; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-top: calc(6 * var(--u)); }
.seg button { flex: 1; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: calc(20 * var(--u));
              padding: calc(10 * var(--u)) calc(14 * var(--u)); cursor: pointer; }
.seg button.on { background: rgba(56, 189, 248, .16); color: var(--ink); }
.hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(40 * var(--u)); font-size: calc(20 * var(--u)); color: #5b6b85; }

@media (max-width: 760px) {
  .hud { --u: calc(100vw / 820); }
  .title h1 { font-size: 24px; } .title p { font-size: 13px; }
  .tag { font-size: 10px; } .clock { display: none; }
  .panel { font-size: 13px; padding: 12px 14px; }
  .panel h2 { font-size: 10px; }
  .loop .step { min-width: 0; flex: 1; padding: 8px 10px; }
  .loop .step b { font-size: 16px; } .loop .step span { font-size: 10px; }
  .controls label, .seg button { font-size: 13px; }
  .label { font-size: 11px; }
  .hint { display: none; }
}