/* cad-agent web kit: the control-room HUD skin (Valpatel design language: a dark void, cyan hairlines and glows,
 * monospace telemetry). Adapted from the Moxie simulator's css/hud.css (mvalancy/moxie-robot-saver, MIT).
 *
 * Page shape: <div id="app"></div> (the WebGL stage, fixed fullscreen) under
 * <div id="hud"><header id="topbar">…</header><main id="stage-overlay">…</main><aside id="panel">…</aside></div>.
 * Link vendor/fonts/fonts.css before this file. */
@import url('/designer/kit/vendor/fonts/fonts.css?v=4b63380df54ac794752d');

:root {
  --void: #f4f0e6; --bg: #fffaf2; --surface-1: #ffffff; --surface-2: #f1f3e7; --surface-3: #e7ebdb; --hairline: #d2d8c9;
  --text: #263e35; --text-dim: #3d5147; --muted: #5d6c61; --muted-2: #5f6e64; --dim: #647169; --dimmer: #758175;
  --cyan: #ad421b; --cyan-dim: #bd582e; --amber: #966100; --mint: #227346; --magenta: #b3204b; --purple: #7854a2;
  --glow-06: rgba(201, 71, 24, 0.06); --glow-12: rgba(201, 71, 24, 0.12); --glow-30: rgba(201, 71, 24, 0.16);
  --font-ui: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --panel-w: 360px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; font: 14px/1.45 var(--font-ui); background: var(--bg); color: var(--text); }
a { color: var(--cyan); }

/* void atmosphere behind the alpha canvas, and a whisper of scanline over it */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(160deg, #fffaf2, #eef1e3); }
body::after { display: none; }
:focus-visible { outline: 3px solid #187a79; outline-offset: 3px; }
#app { position: fixed; inset: 0; z-index: 1; }
#app canvas { display: block; }

#hud { position: fixed; inset: var(--appnav-h, 0px) 0 0 0; z-index: 4; display: grid; pointer-events: none;
  grid-template-columns: minmax(0, 1fr) var(--panel-w); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "topbar topbar" "stage panel"; }
#topbar, #panel, .hud-card { pointer-events: auto; }

#topbar { grid-area: topbar; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px;
  background: linear-gradient(180deg, rgba(255,250,242,.96), rgba(255,250,242,.9)); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline); }
#topbar .glyph { width: 9px; height: 9px; background: var(--cyan); transform: rotate(45deg); box-shadow: 0 0 10px var(--glow-30); flex: none; }
#topbar h1 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
#topbar .spacer { flex: 1; }
.hud-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); border: 1px solid var(--hairline);
  border-radius: 4px; padding: 2px 7px; white-space: nowrap; text-decoration: none; text-transform: uppercase; }
a.hud-tag:hover { color: var(--cyan); border-color: var(--cyan-dim); }

#stage-overlay { grid-area: stage; position: relative; pointer-events: none; }
.hud-hint { position: absolute; left: 16px; bottom: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--dim); }
.hud-card { position: absolute; left: 16px; top: 16px; max-width: 340px; background: rgba(255,250,242,.94); backdrop-filter: blur(8px);
  border: 1px solid var(--hairline); border-radius: 8px; padding: 10px 12px; }

#panel { grid-area: panel; overflow-y: auto; margin: 10px; padding: 4px 10px 10px; background: rgba(255,250,242,.96);
  backdrop-filter: blur(10px); border: 1px solid var(--hairline); border-radius: 8px; box-shadow: 0 0 24px var(--glow-06); }

.hud-section { border-bottom: 1px solid var(--hairline); padding: 4px 0 10px; }
.hud-section > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 2px 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }
.hud-section > summary::-webkit-details-marker { display: none; }
.hud-section > summary .tick { width: 12px; height: 2px; background: var(--cyan); box-shadow: 0 0 6px var(--glow-30); }
.hud-section > summary .note { margin-left: auto; font-size: 9px; letter-spacing: 0.08em; color: var(--dim); text-transform: none; }
.hud-section .body { display: grid; gap: 8px; padding: 2px 2px 0; }

.hud-slider { display: grid; gap: 2px; min-width: 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
.hud-slider .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; }
.hud-slider .val { color: var(--cyan); font-weight: 600; white-space: nowrap; }
input[type=range] { appearance: none; -webkit-appearance: none; display: block; width: 100%; min-width: 0; height: 40px; margin: 0;
  background: transparent; accent-color: var(--cyan); cursor: pointer; touch-action: pan-y; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; background: #718477; border-radius: 999px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  border: 3px solid var(--bg); background: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
input[type=range]::-moz-range-track { height: 6px; background: #718477; border-radius: 999px; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--bg);
  background: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
input[type=range]:focus-visible { border-radius: 8px; }

.hud-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hud-chip { width: 44px; height: 44px; padding: 6px; border-radius: 6px; border: 1px solid var(--hairline); background: var(--surface-2);
  color: var(--text-dim); cursor: pointer; }
.hud-chip svg { width: 100%; height: 100%; }
.hud-chip:hover { color: var(--cyan); border-color: var(--cyan-dim); }
.hud-chip.active { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px var(--glow-12); background: var(--glow-06); }

.hud-btn { font: 600 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 12px; border-radius: 6px;
  border: 1px solid var(--hairline); background: var(--surface-2); color: var(--text); cursor: pointer; }
.hud-btn:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 10px var(--glow-12); }
.hud-btn.primary { border-color: var(--cyan); background: var(--glow-06); color: var(--cyan); }

.hud-toggle { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); cursor: pointer; }
.hud-toggle input { accent-color: var(--cyan); }

.hud-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font: 600 11px var(--font-mono);
  letter-spacing: 0.12em; border: 1px solid var(--hairline); color: var(--dim); background: transparent; cursor: pointer; }
.hud-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dimmer); }
.hud-pill.on { color: var(--mint); border-color: rgba(34,115,70,.35); background: rgba(34,115,70,.07); box-shadow: 0 0 14px rgba(34,115,70,.08); }
.hud-pill.on .dot { background: var(--mint); box-shadow: 0 0 8px rgba(34,115,70,.15); animation: hud-pulse 2s ease-in-out infinite; }
@keyframes hud-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hud-readouts { display: grid; gap: 2px; font-family: var(--font-mono); font-size: 11px; }
.hud-readouts .r { display: flex; justify-content: space-between; gap: 8px; padding: 3px 6px; border-radius: 4px; color: var(--muted); }
.hud-readouts .r b { color: var(--text); font-weight: 500; }
.hud-readouts .r.ok b { color: var(--mint); } .hud-readouts .r.warn b { color: var(--amber); } .hud-readouts .r.fail b { color: var(--magenta); }
.hud-readouts .r.fail { background: rgba(255, 42, 109, 0.08); }
.hud-note { font-size: 12px; color: var(--muted); margin: 0; }

/* collapsible side panel (panel.js collapsiblePanel) */
#hud.panel-collapsed { grid-template-columns: minmax(0, 1fr) 0; }
#hud.panel-collapsed #panel { display: none; }
.hud-panel-tab { position: absolute; top: 58px; right: calc(var(--panel-w) - 10px); z-index: 5; pointer-events: auto; width: 22px; height: 44px;
  background: rgba(255,250,242,.96); color: var(--cyan); border: 1px solid var(--hairline); border-right: none; border-radius: 6px 0 0 6px;
  font-size: 12px; cursor: pointer; }
.hud-panel-tab:hover { border-color: var(--cyan-dim); }
#hud.panel-collapsed .hud-panel-tab { right: 0; }

@media (max-width: 820px) {
  .hud-panel-tab { display: none; }
  #hud { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) 46vh; grid-template-areas: "topbar" "stage" "panel"; }
  #panel { margin: 0 8px 8px; }
  #topbar { flex-wrap: wrap; padding: 8px 12px; }
}

body.has-appnav #app { top: var(--appnav-h, 0px); }

/* Report pages keep wide engineering tables inside their own scroll region. */
main.prog { margin-inline: auto; overflow-wrap: anywhere; }
main.prog .card { box-shadow: 0 5px 18px #263e3505; }
main.prog > div:has(> table), main.prog #shop { overflow-x: auto; }
main.prog .gallery { min-width: 0; }
main.prog .portal-intro { border-left: 3px solid var(--cyan); background: #edf1df; padding: 14px 18px; margin-top: 24px; border-radius: 0 12px 12px 0; font-size: 13px; }
main.prog .portal-intro strong { display: block; margin-bottom: 3px; }
main.prog .portal-footer { border-top: 1px solid var(--hairline); padding-top: 22px; margin-top: 40px; font-size: 11px; color: var(--muted); }
@media(max-width:600px) { main.prog h1 { font-size: 27px; } main.prog .sec { letter-spacing: .06em; line-height: 1.5; } }

.thumb.source { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #eff1e4; color: #536947; text-decoration: none; border: 1px solid #d8decc; font: 10px/1.3 var(--font-ui); }
.thumb.source span { font-size: 22px; }