/* RunCadre · Agent HQ office (/agent-hq/office/). Reads the role tokens from /styles.css
   (see website/design.md): the stage and panel are dark product UI (.on-ink), the list
   stands on light (.on-paper). Engine colours come from engines.css ([data-eng] -> --eng),
   generated from office.json, and are decoration only (dots, borders, stripes) — never text. */

.hq-page{--hq-h:clamp(600px,calc(100vh - 66px),860px)}
.hq-page :focus-visible{outline:2px solid var(--gold-mark);outline-offset:2px}

/* ---- stage (product UI: .on-ink) ------------------------------------------------------ */
.hq-stage{position:relative;height:var(--hq-h);border-bottom:1px solid var(--rule);overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 58% 42%,#30271d 0,#12100e 58%,#090807 100%);box-shadow:inset 0 -90px 130px #050403b8}
.hq-stage::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 21% 76%,#dc8a4e17 0,transparent 27%),radial-gradient(ellipse at 78% 72%,#dcb47a12 0,transparent 24%),linear-gradient(90deg,transparent 8%,#f1c18b0d 50%,transparent 92%);mix-blend-mode:screen}
.hq-view{position:absolute;inset:0}
.hq-static{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.06);transition:opacity .55s cubic-bezier(.22,1,.36,1)}
.hq-gl{position:absolute;inset:0;cursor:grab;touch-action:none}
.hq-gl.dragging{cursor:grabbing}
.hq-gl.over-agent{cursor:pointer}
.hq-gl canvas{display:block;width:100%;height:100%;opacity:0;filter:saturate(.92) contrast(1.04);transition:opacity .55s cubic-bezier(.22,1,.36,1)}
.hq-stage[data-mode="live"] .hq-gl canvas{opacity:1}
.hq-stage[data-mode="live"] .hq-static{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .hq-static,.hq-gl canvas{transition:none}
}

/* soft vignette so the HUD reads over the floor */
.hq-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,#0d0b09dc 0,transparent 25%,transparent 68%,#090807e8 100%),radial-gradient(circle at 58% 46%,transparent 28%,#050403a3 100%);box-shadow:inset 0 0 150px #000a}
.hq-view::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(112deg,transparent 15%,#f4c58b12 42%,transparent 66%);mix-blend-mode:screen}
.hq-view::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.hq-gl::after{content:"";position:absolute;inset:18px;z-index:1;pointer-events:none;border:1px solid #f4c58b1c;border-radius:18px;box-shadow:inset 0 0 70px #0007,0 24px 80px #0006}

/* glass for everything that floats over the floor */
.hq-label,.hq-chip,.hq-demo,.hq-nogl{background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(10px)}

/* ---- name labels + bubbles (projected from 3D each frame) --------------------------- */
.hq-labels,.hq-bubbles{position:absolute;inset:0;pointer-events:none;z-index:2}
/* names stay readable: labels sit above any speech bubble */
.hq-labels{z-index:3}
.hq-label{position:absolute;left:0;top:0;will-change:transform;pointer-events:auto;cursor:pointer;
  font:500 11px/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg);white-space:nowrap;
  padding:5px 8px 5px 7px;border-radius:999px;border:1px solid color-mix(in srgb,var(--eng) 55%,transparent);
  display:flex;align-items:center;gap:6px;user-select:none;box-shadow:0 9px 26px #000a,0 0 16px color-mix(in srgb,var(--eng) 16%,transparent);transition:background .2s ease,border-color .2s ease}
.hq-label:hover{background:color-mix(in srgb,var(--surface) 96%,transparent);border-color:var(--eng)}
.hq-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--eng)}
.hq-label.sel{background:var(--card);border-color:var(--eng);box-shadow:0 0 0 1px var(--eng)}
.hq-bubble{position:absolute;left:0;top:0;will-change:transform;max-width:230px;
  font:400 12.5px/1.35 var(--font-sans);color:var(--fg);
  padding:8px 11px 8px 13px;border-radius:12px;background:var(--card);border:1px solid var(--rule-strong);border-left:3px solid var(--eng);
  box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 45%,transparent);
  transform-origin:50% 100%;scale:.92;transition:scale .18s ease-out}
/* Text is never shown at partial opacity: a bubble pops (scale), it does not fade. */
.hq-bubble.on{scale:1}
.hq-bubble b{display:block;font:500 10px/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-mut);margin-bottom:5px}

/* ---- HUD --------------------------------------------------------------------------- */
.hq-hud{position:absolute;inset:0;z-index:4;pointer-events:none;padding:30px 36px 26px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto auto;gap:14px 24px}
.hq-hud a,.hq-hud button{pointer-events:auto}
.hq-hud-tl{grid-column:1;grid-row:1}
.hq-hud-tr{grid-column:2;grid-row:1;text-align:right}
.hq-chips{grid-column:1;grid-row:3;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,252px));gap:7px;align-self:end}
.hq-chips .hq-chip:last-child:nth-child(odd){grid-column:1 / -1}
.hq-hint{grid-column:2;grid-row:4;align-self:end;font:500 10.5px/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-mut)}
.hq-demo{grid-column:1;grid-row:4;align-self:end;font:500 12px/1.3 var(--font-sans);color:var(--fg);
  display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:6px 11px;border-radius:8px;border:1px solid var(--rule-strong)}
.hq-demo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}

.hq-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;font:500 11px/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gold-text)}
.hq-crumb li+li::before{content:"/";margin-right:8px;color:var(--fg-mut)}
.hq-crumb a:hover{color:var(--fg)}
.hq-crumb [aria-current]{color:var(--fg)}
.hq-title{margin-top:14px;font-family:var(--font-sans);font-weight:600;font-size:clamp(30px,3.4vw,50px);line-height:1.02;letter-spacing:var(--track-display);text-transform:uppercase}
.hq-title em{font-style:italic;color:var(--gold-display)}

.hq-counters{display:flex;gap:22px;justify-content:flex-end}
.hq-counters>div{display:flex;flex-direction:column;gap:6px;min-width:64px}
.hq-counters dt{font:500 9.5px/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-mut)}
.hq-counters dd{font:500 22px/1 var(--mono);color:var(--fg);font-variant-numeric:tabular-nums}
.hq-clock dd{color:var(--gold-text)}
.hq-counters-note{margin-top:9px;font:400 11px/1.3 var(--font-sans);color:var(--fg-mut)}

.hq-chip{pointer-events:auto;display:flex;flex-wrap:wrap;align-items:center;gap:5px 7px;
  padding:7px 11px 8px 12px;border-radius:10px;border:1px solid var(--rule-strong);border-left:3px solid var(--eng);box-shadow:0 12px 28px #0004;transition:transform .28s var(--ease),background .28s var(--ease),border-color .28s var(--ease)}
.hq-chip:hover{transform:translateY(-3px) scale(1.012);background:color-mix(in srgb,var(--surface) 96%,transparent);border-color:color-mix(in srgb,var(--eng) 55%,var(--rule-strong));box-shadow:0 18px 36px #0008,0 0 24px color-mix(in srgb,var(--eng) 13%,transparent)}
.hq-chip-num{font:500 10px/1 var(--mono);color:var(--fg-mut)}
.hq-chip-name{font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.hq-chip-count{font:500 10px/1 var(--mono);color:var(--fg);border:1px solid var(--eng);border-radius:999px;padding:2px 6px}
.hq-chip-agents{flex-basis:100%;font:400 11.5px/1.25 var(--font-sans);color:var(--fg-mut)}

/* ---- side panel (product UI) ------------------------------------------------------------- */
.hq-panel{position:absolute;z-index:5;top:18px;right:18px;bottom:18px;width:min(360px,calc(100% - 36px));overflow:auto;
  padding:24px 24px 20px;border-radius:var(--r);background:var(--card);color:var(--fg);
  border:1px solid var(--rule-strong);border-top:3px solid var(--eng,var(--gold));
  box-shadow:0 24px 60px color-mix(in srgb,var(--ink) 60%,transparent)}
.hq-panel[hidden]{display:none}
.hq-panel-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--rule-strong);
  background:var(--surface);color:var(--fg);font-size:20px;line-height:1;cursor:pointer}
.hq-panel-close:hover{border-color:var(--gold-mark)}
.hq-panel-eng{color:var(--fg-mut);padding-right:40px;line-height:1.5}
.hq-panel-name{font-family:var(--font-sans);font-weight:600;font-size:34px;letter-spacing:var(--track-display);line-height:1;margin:10px 0 6px}
.hq-panel-state{font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mut);margin-bottom:18px}
.hq-panel h3{font:500 10px/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-mut);margin:18px 0 8px}
.hq-panel p{font-size:14.5px;color:var(--fg)}
.hq-panel-acts{list-style:none;counter-reset:a;display:grid;gap:8px}
.hq-panel-acts li{counter-increment:a;display:grid;grid-template-columns:22px 1fr;font-size:14px;color:var(--fg)}
.hq-panel-acts li::before{content:counter(a,decimal-leading-zero);font:500 10.5px/1.9 var(--mono);color:var(--gold-text)}
.hq-panel .hq-panel-foot{margin-top:22px;padding-top:14px;border-top:1px solid var(--rule);font-size:12px;color:var(--fg-mut)}

/* ---- narrow + no-WebGL fallbacks -------------------------------------------------------- */
.hq-narrow,.hq-nogl{display:none}
.hq-nogl:not([hidden]){display:block;position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);max-width:420px;
  padding:14px 18px;border-radius:12px;border:1px solid var(--rule-strong);font-size:14px;text-align:center;color:var(--fg)}

@media (max-width:899.98px){
  /* One column: title, still, demo line, "Open op desktop", engines. The HUD box
     dissolves so its parts can sit around the still. */
  .hq-stage{height:auto;display:flex;flex-direction:column;overflow:visible;padding:24px 16px 26px;gap:18px}
  .hq-stage::after{display:none}
  .hq-hud{display:contents}
  .hq-hud-tl{order:1}
  .hq-view{position:relative;order:2;aspect-ratio:1440 / 800;margin:0 -16px}
  .hq-gl,.hq-bubbles{display:none}
  .hq-narrow{display:block;order:4}
  .hq-narrow p{color:var(--fg-mut);font-size:14.5px;margin-bottom:14px}
  .hq-narrow .hq-narrow-msg:empty{display:none}
  .hq-narrow .hq-narrow-msg{margin-top:12px;color:var(--fg);word-break:break-all}
  .hq-chips{order:5;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .hq-demo{order:3;align-self:flex-start}
  /* no simulation runs here, so the demo counters stay hidden */
  .hq-hud-tr,.hq-hint{display:none}
  .hq-panel{display:none}
}

/* ---- roster on light (.on-paper): what screen readers and search engines read ----------- */
.hq-roster .sec-head{margin-bottom:28px}
.hq-search{display:grid;gap:8px;max-width:520px;margin-bottom:34px}
.hq-search label{font:500 10.5px/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-mut)}
.hq-search input{font:400 15px/1.4 var(--font-sans);color:var(--fg);background:var(--lift);border:1px solid var(--rule-strong);
  border-radius:12px;padding:12px 14px}
.hq-search input::placeholder{color:var(--fg-mut)}
.hq-search-count{font-size:13px;color:var(--fg-mut)}
.hq-eng{padding:30px 0 34px;border-top:1px solid var(--rule-strong)}
.hq-eng[hidden]{display:none}
.hq-eng-eyebrow{display:flex;align-items:center;gap:8px}
.hq-eng-eyebrow::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--eng)}
.hq-eng-title{font-family:var(--font-sans);font-weight:600;font-size:clamp(24px,3vw,34px);letter-spacing:var(--track-display);line-height:1.1;margin:10px 0 12px}
.hq-eng-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.hq-eng-chips li{font:500 10.5px/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;padding:6px 9px 6px 8px;border-radius:999px;
  border:1px solid var(--rule-strong);color:var(--fg);display:inline-flex;align-items:center;gap:6px}
.hq-eng-chips li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--eng)}
.hq-eng-lede{max-width:75ch;color:var(--fg-mut);font-size:15px;margin-bottom:22px}
.hq-agents{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.hq-agent{padding:18px 18px 16px;border-radius:14px;background:var(--lift);border:1px solid var(--rule);border-top:3px solid var(--eng)}
.hq-agent[hidden]{display:none}
.hq-agent-name{font-family:var(--font-sans);font-weight:600;font-size:22px;letter-spacing:var(--track-display);line-height:1.1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hq-agent-role{font:500 10px/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-mut)}
.hq-agent-tag{margin:8px 0 6px;color:var(--fg);font-size:14.5px}
.hq-agent-over{color:var(--fg-mut);font-size:13.5px;margin-bottom:10px}
.hq-agent-over b{color:var(--fg);font-weight:500}
.hq-agent-takes{list-style:none;display:grid;gap:5px;font-size:13.5px;color:var(--fg-mut)}
.hq-agent-takes li{padding-left:14px;position:relative}
.hq-agent-takes li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:2px;background:var(--eng)}
.hq-agent-show{margin-top:14px;font:500 10.5px/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg);
  background:transparent;border:1px solid var(--rule-strong);border-radius:999px;padding:8px 12px;cursor:pointer}
.hq-agent-show:hover{border-color:var(--gold-mark)}
.hq-search-empty{color:var(--fg-mut);padding:20px 0}

/* ---- capture mode (scripts/agent_hq/render_static.mjs): scene only -------------------- */
.hq-capture .hq-hud,.hq-capture .hq-stage::after,.hq-capture .hq-bubbles{display:none}
.hq-capture nav.site,.hq-capture .cookie-banner{display:none!important}
.hq-capture .hq-stage{height:800px}

.hq-fps{position:absolute;z-index:5;right:10px;bottom:44px;font:500 11px/1.3 var(--mono);color:var(--fg);background:var(--surface);padding:4px 7px;border-radius:6px;white-space:pre}