/* hud.css — bridge, viewport frame, cassettes, transcript, dock, vault */
.lbl{font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:var(--acc);opacity:.85}
.num{font:13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:var(--mono);font-variant-numeric:tabular-nums}
.mono{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
.btn{padding:10px 12px;border-radius:8px;border:1px solid var(--acc);color:var(--acc);font:10px ui-monospace,monospace;letter-spacing:.14em;transition:background .2s}
.btn:active{background:var(--glow)} .btn:disabled{opacity:.5}
.row{display:flex;gap:8px;align-items:center}

/* ZONE 1 — TOP INTEL BRIDGE */
#bridge{display:flex;justify-content:space-between;align-items:center;padding:0 12px}
#bridge .wing{display:flex;flex-direction:column;gap:4px;width:30%;min-width:0}
#bridge .wing.right{flex-direction:row;justify-content:flex-end;gap:5px;width:38%}
.pill{font:7px/1 ui-monospace,monospace;letter-spacing:.1em;padding:6px 6px;min-width:0;overflow:hidden;text-overflow:ellipsis;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--ok);white-space:nowrap}
.pill.off{color:var(--alert)} #theme-pill{color:var(--acc)}

/* ZONE 2 — PRIMARY SPATIAL VIEWPORT */
#viewport{overflow:hidden}
#stage{position:absolute;inset:10px;transition:opacity .28s,filter .28s}
.swap #stage,.swap #cassettes{opacity:0;filter:blur(8px)}
#cassettes{transition:opacity .28s,filter .28s}
.reticle{position:absolute;inset:8px;pointer-events:none}
.reticle::before,.reticle::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--acc)}
.reticle::before{top:0;left:0;border-right:0;border-bottom:0}
.reticle::after{bottom:0;right:0;border-left:0;border-top:0}
#lens-tag{position:absolute;top:10px;right:16px;font:9px ui-monospace,monospace;letter-spacing:.2em;color:var(--acc);pointer-events:none}
canvas.fill{position:absolute;inset:0;width:100%;height:100%}
.legend{position:absolute;left:12px;bottom:10px;font:9px ui-monospace,monospace;letter-spacing:.12em;color:var(--mono);opacity:.7;pointer-events:none}

/* ZONE 3 — LIVE TELEMETRY CASSETTES */
#cassettes{display:flex;flex-direction:column;gap:8px;min-height:0}
.cassette{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;min-height:34px;transition-delay:calc(var(--i)*70ms)}
.cassette .num{font-size:15px}
.cassette .pipe{flex:1;height:22px;color:var(--ok)}
.bar{display:block;height:2px;width:30%;background:rgba(255,255,255,.08);position:relative;overflow:hidden;border-radius:2px}
.bar::after{content:"";position:absolute;inset:0;width:var(--v,0%);background:var(--acc);box-shadow:0 0 8px var(--glow);transition:width .9s cubic-bezier(.2,.8,.2,1)}

/* ASSISTANT TRANSCRIPT STREAM */
#transcript{display:flex;flex-direction:column;gap:6px;min-height:44px;opacity:0;transition:opacity .4s}
[data-phase=condense] #transcript,[data-phase=live] #transcript{opacity:1}
#lines{display:flex;flex-direction:column;gap:2px;font:10px/1.45 ui-monospace,monospace;color:var(--mono);min-height:14px}
#lines .you{color:var(--acc)}
#presets{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
#presets::-webkit-scrollbar{display:none}
.chip{flex:none;font:9px ui-monospace,monospace;letter-spacing:.1em;color:var(--acc);border:1px solid var(--acc);border-radius:999px;padding:4px 9px;opacity:.8}

/* ZONE 4 — THUMB-ZONE COMMAND DOCK */
#dock{padding:8px 10px;display:flex;flex-direction:column;gap:8px}
#wave{width:72px;height:26px;color:var(--acc)}
#cmd{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.12);color:var(--mono);font:12px ui-monospace,monospace;padding:4px 2px;outline:0;caret-color:var(--acc)}
#cmd::placeholder{color:rgba(255,255,255,.3)}
.ib{width:32px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--acc);font:9px ui-monospace,monospace;letter-spacing:.08em;display:grid;place-items:center}
.ib.on{color:var(--ok);border-color:var(--ok);box-shadow:0 0 10px rgba(0,229,153,.35)}
.ib.muted{color:var(--alert);border-color:var(--alert)}
.lenses{justify-content:space-between}
.lens{flex:1;min-width:0;height:30px;padding:0 2px;border-radius:8px;border:1px solid rgba(255,255,255,.1);color:var(--mono);font:8px ui-monospace,monospace;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lens.on{border-color:var(--acc);color:var(--acc);box-shadow:inset 0 0 12px var(--glow)}

/* BYOK KEY VAULT */
#vault{position:absolute;inset:0;z-index:30;display:none;place-items:center;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#vault.open{display:grid}
#vault .card{width:84%;padding:18px;border-radius:14px;background:var(--plate);border:1px solid var(--rim);display:flex;flex-direction:column;gap:10px}
#vault input,.field{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:10px;color:var(--mono);font:12px ui-monospace,monospace;outline:0;width:100%}