/* HOT SEAT — surge mode styles. Reuses css/sim.css variables (--bg, --panel, --ink,
   --hit/--partial/--miss, --accent, fonts) and its .bubble/.transcript/.choice classes.
   Only the surge-specific layout (two line cards, hold bars, event log, debrief) lives here.
   Dark palette + mobile-responsive (a @media query collapses the two-column grid). */

/* ---------- PRO pill ---------- */
.pro-pill{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:20px;
  font:700 10px/1.4 var(--mono);letter-spacing:.14em;
  color:#04121f;background:var(--accent);vertical-align:middle}

/* ---------- intro ---------- */
.hs-intro-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;margin:8px 0 24px}
.hs-rule{border:1px solid var(--line);border-radius:14px;padding:17px;
  background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 9%,var(--panel)), var(--panel));
  box-shadow:0 14px 38px -30px rgba(0,0,0,.9);transition:border-color .14s ease,transform .14s ease}
.hs-rule:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-2px)}
.hs-rule-k{font:700 11px/1 var(--mono);letter-spacing:.16em;color:var(--accent);margin-bottom:8px}
.hs-rule-v{font-size:.9rem;color:var(--ink-dim);line-height:1.5}
.hs-intro-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hs-start-btn{font-size:1.05rem;padding:14px 26px}
.hs-link{text-decoration:none;display:inline-flex;align-items:center}
.hs-scripted-note{margin-top:20px;max-width:720px;color:var(--un);font-size:.82rem;line-height:1.5}

/* ---------- top bar ---------- */
.hs-bar{display:flex;justify-content:space-between;align-items:center;
  border:1px solid var(--line);border-radius:14px;padding:12px 18px;margin-bottom:14px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--warm) 50%,var(--panel)), var(--panel))}
.hs-bar-left{display:flex;flex-direction:column;gap:3px}
.hs-bar-eyebrow{font:700 10px/1 var(--mono);letter-spacing:.2em;color:var(--accent)}
.hs-active-label{font:600 1rem/1.2 var(--mono);color:var(--ink)}

/* ---------- the surge grid ---------- */
.hs-grid{display:grid;grid-template-columns:320px 1fr;gap:14px;align-items:start}
.hs-lines{display:flex;flex-direction:column;gap:12px}

/* line cards */
.hs-line-card{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--panel);
  transition:border-color .15s,box-shadow .15s}
.hs-line-card.st-live{border-color:var(--hit);box-shadow:0 0 0 1px color-mix(in srgb,var(--hit) 50%,transparent)}
.hs-line-card.st-hold{border-color:var(--poor)}
.hs-line-card.st-ringing{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  animation:hs-ring 1.1s ease-in-out infinite}
.hs-line-card.st-abandoned{border-color:var(--miss);opacity:.78}
.hs-line-card.st-closed{border-color:var(--good);opacity:.9}
@keyframes hs-ring{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent)}}

.hlc-top{display:flex;justify-content:space-between;align-items:center}
.hlc-line{font:700 12px/1 var(--mono);letter-spacing:.14em;color:var(--ink-dim)}
.hlc-status{font:700 11px/1 var(--mono);letter-spacing:.08em}
.st-live .hlc-status{color:var(--hit)}
.st-hold .hlc-status{color:var(--poor)}
.st-ringing .hlc-status{color:var(--accent)}
.st-abandoned .hlc-status{color:var(--miss)}
.st-closed .hlc-status{color:var(--good)}
.hlc-id{font:600 .98rem/1.3 var(--mono);margin-top:8px}
.hlc-type{font-size:.82rem;color:color-mix(in srgb,var(--good) 70%,var(--ink));margin-top:4px;line-height:1.35}
.hlc-prio{margin-top:8px;font:700 10px/1.3 var(--mono);letter-spacing:.06em;padding:4px 8px;border-radius:8px;
  display:inline-block;border:1px solid var(--line)}
.prio-4{color:var(--fail);background:color-mix(in srgb,var(--fail) 14%,var(--panel));border-color:var(--fail)}
.prio-3{color:var(--poor);background:color-mix(in srgb,var(--poor) 14%,var(--panel));border-color:var(--poor)}
.prio-2{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--panel))}
.prio-1{color:var(--ink-dim)}

/* hold patience bar */
.hlc-hold{margin-top:10px}
.hlc-holdlabel{font:700 10px/1 var(--mono);letter-spacing:.08em;color:var(--poor);margin-bottom:5px}
.hlc-bar{height:7px;border-radius:6px;background:var(--panel2);overflow:hidden;border:1px solid var(--line)}
.hlc-bar-fill{height:100%;background:var(--poor);transition:width .9s linear}
.hlc-bar-fill.hot{background:var(--fail)}

.hlc-actions{margin-top:12px}
.hlc-pickup,.hlc-hold-btn{width:100%;cursor:pointer;border-radius:10px;padding:10px;
  font:700 12px/1 var(--mono);letter-spacing:.08em;border:1px solid var(--line);color:var(--ink)}
.hlc-pickup{background:color-mix(in srgb,var(--accent) 18%,var(--panel));border-color:var(--accent)}
.hlc-pickup:hover{background:color-mix(in srgb,var(--accent) 30%,var(--panel))}
.hlc-hold-btn{background:color-mix(in srgb,var(--poor) 16%,var(--panel));border-color:var(--poor)}
.hlc-hold-btn:hover{background:color-mix(in srgb,var(--poor) 26%,var(--panel))}

/* surge event log */
.hs-eventlog-wrap{border:1px solid var(--line);border-radius:14px;background:var(--panel2);padding:12px;margin-top:4px}
.hs-eventlog-title{font:700 10px/1 var(--mono);letter-spacing:.16em;color:var(--ink-dim);margin-bottom:8px}
.hs-eventlog{max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.hs-ev{font:500 .8rem/1.4 var(--mono);padding:6px 8px;border-radius:8px;border-left:3px solid var(--line);background:var(--panel)}
.ev-system{color:var(--ink-dim)}
.ev-hold{border-left-color:var(--poor);color:color-mix(in srgb,var(--poor) 80%,var(--ink))}
.ev-resume{border-left-color:var(--hit);color:color-mix(in srgb,var(--hit) 80%,var(--ink))}
.ev-escalate{border-left-color:var(--ok);color:color-mix(in srgb,var(--ok) 85%,var(--ink))}
.ev-abandon{border-left-color:var(--miss);color:color-mix(in srgb,var(--miss) 85%,var(--ink));font-weight:700}
.ev-done{border-left-color:var(--good);color:color-mix(in srgb,var(--good) 80%,var(--ink))}

/* ---------- workspace (active line) ---------- */
.hs-work{min-height:74vh}
.hs-nowork{border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:16px;
  min-height:74vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:color-mix(in srgb,var(--accent) 5%,var(--panel))}
.hs-nowork-big{font:700 1.5rem/1.2 var(--mono);letter-spacing:.06em;color:var(--accent)}
.hs-nowork-sub{margin-top:10px;color:var(--ink-dim);font-size:.92rem;max-width:380px;line-height:1.5}
.hs-nowork kbd{font:700 11px/1 var(--mono);padding:2px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel2)}

.hs-workspace{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);
  display:flex;flex-direction:column;min-height:74vh}
/* Fixed 2026-07-06 (go-live QA sweep finding B2, same bug class as the
   live_caller.js show() fix): setActiveWorkspace() in hotseat.js toggles
   these two panes via the `hidden` attribute, but both classes above declare
   `display:flex` unconditionally, and an author stylesheet rule always beats
   the UA default `[hidden]{display:none}` -- so `hidden` never actually hid
   either pane. Mirrors the existing override pattern already used for
   .bcast-modal[hidden] / .consent-modal[hidden] in sim.css. */
.hs-workspace[hidden],.hs-nowork[hidden]{display:none}
.hs-ws-top{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 18px;gap:10px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--hit) 12%,var(--panel)), var(--panel));
  border-bottom:1px solid var(--line)}
.hs-ws-line{font:700 12px/1 var(--mono);letter-spacing:.14em;color:var(--hit)}
.hs-ws-callerid{display:block;font:600 1rem/1.3 var(--mono);margin-top:5px}
.hs-ws-persona{font-size:.78rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.08em;text-align:right;max-width:55%;line-height:1.4}
.hs-transcript{flex:1;min-height:0;overflow-y:auto;padding:16px 18px}
.hs-ws-bottom{border-top:1px solid var(--line);padding:14px 18px;background:var(--panel2)}

/* ---------- debrief ---------- */
.hs-debrief{max-width:920px;margin:0 auto;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:26px}
.hsd-bucket{font:700 1.1rem/1 var(--mono);letter-spacing:.1em;padding:8px 14px;border-radius:10px;
  display:inline-block;border:1px solid var(--line)}
.hsd-bucket.bk-aced{color:#04121f;background:var(--hit)}
.hsd-bucket.bk-solid{color:#04121f;background:var(--good)}
.hsd-bucket.bk-mixed{color:#1a1606;background:var(--ok)}
.hsd-bucket.bk-rough{color:#fff;background:var(--poor)}
.hsd-bucket.bk-critical{color:#fff;background:var(--miss)}

.hsd-surge{display:flex;flex-direction:column;gap:10px}
.hsd-srow{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name state" "text text";
  gap:4px 12px;border-left:3px solid var(--line);background:var(--panel2);border-radius:0 10px 10px 0;padding:12px 14px}
.hsd-srow.st-hit{border-left-color:var(--hit)}
.hsd-srow.st-partial,.hsd-srow.st-na{border-left-color:var(--partial)}
.hsd-srow.st-miss{border-left-color:var(--miss)}
.hsd-sname{grid-area:name;font:700 .9rem/1.3 var(--mono);letter-spacing:.04em}
.hsd-sstate{grid-area:state;font:700 11px/1.6 var(--mono)}
.st-hit .hsd-sstate{color:var(--hit)}
.st-partial .hsd-sstate,.st-na .hsd-sstate{color:var(--partial)}
.st-miss .hsd-sstate{color:var(--miss)}
.hsd-stext{grid-area:text;color:var(--ink-dim);font-size:.88rem;line-height:1.5}
.hsd-blend{margin-top:14px;font:600 .85rem/1.5 var(--mono);color:var(--ink-dim);
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}

.hsd-lines{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hsd-linecard{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--panel2)}
.hsd-linecard.abandoned{border-color:var(--miss)}
.hsd-lc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hsd-lc-line{font:700 11px/1 var(--mono);letter-spacing:.12em;color:var(--ink-dim)}
.hsd-lc-prio{font:700 10px/1.2 var(--mono);padding:3px 7px;border-radius:7px;border:1px solid var(--line)}
.hsd-lc-pct{margin-left:auto;font:700 1.1rem/1 var(--mono);color:var(--ink)}
.hsd-linecard.abandoned .hsd-lc-pct{color:var(--miss);font-size:.95rem}
.hsd-lc-name{margin-top:8px;font-size:.86rem;color:var(--ink-dim);line-height:1.4}
.hsd-lc-chips{margin-top:10px;display:flex;flex-wrap:wrap;gap:5px}
.hsd-chip{font:600 9px/1 var(--mono);letter-spacing:.04em;padding:4px 7px;border-radius:16px;border:1px solid var(--line);color:var(--un)}
.hsd-chip.chip-hit{color:#0c1a14;background:var(--hit);border-color:var(--hit)}
.hsd-chip.chip-partial{color:#1a1606;background:var(--partial);border-color:var(--partial)}
.hsd-chip.chip-miss{color:#fff;background:var(--miss);border-color:var(--miss)}
.hsd-chip.chip-unaddressed{color:var(--un)}

.hsd-pronote{margin-top:18px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  border-radius:12px;background:color-mix(in srgb,var(--accent) 8%,var(--panel));
  color:var(--ink-dim);font-size:.85rem;line-height:1.55}

/* ---------- mobile ---------- */
@media(max-width:760px){
  .hs-grid{grid-template-columns:1fr}
  .hs-work,.hs-workspace,.hs-nowork{min-height:60vh}
  .hsd-lines{grid-template-columns:1fr}
  .hs-ws-persona{max-width:48%}
  .hs-intro-actions{flex-direction:column;align-items:stretch}
}