/* Capifiq interviewer-console hero component.
   Extracted from capifiq-console-only-standalone.html.
   Every selector is scoped under .cqhc and the component sets its own
   custom properties, so it does not read from or write to pages.css.
   Uses container queries (container-type: inline-size) - breakpoints are
   @container, not @media, so the console responds to its column width
   rather than the viewport. */

/* Guard against bare-element rules in pages.css leaking in.
   The component uses semantic <footer> twice, and pages.css styles bare
   `footer` for the page footer: `.section,.cta,footer{color:light;background:
   light-canvas}` plus 27px of padding and a border. That painted two panels
   inside this dark console white with dark text.

   This must stay ABOVE the component's own rules: `.cqhc footer` and
   `.cqhc-drawer > footer` have equal specificity (0,1,1), so source order
   decides, and the component has to win for its own footers. It beats the
   unscoped pages.css `footer` (0,0,1) from anywhere in the file.
   Audited: `footer` is the only bare-element rule in pages.css that this
   component's markup collides with. */
.cqhc footer{background:transparent;border:0;color:inherit;padding:0}

/* Capifiq interviewer-console hero — all selectors are scoped under .cqhc */
.cqhc {
  --ink: #0e1116;
  --ink-2: #141920;
  --ink-3: #1b222b;
  --ink-4: #242d38;
  --line: #232b36;
  --amber: #f5a623;
  --amber-soft: rgba(245, 166, 35, 0.12);
  --red: #e24b4a;
  --green: #4e9e6a;
  --text: #e6eaf0;
  --dim: #8b97a7;
  --faint: #5a6472;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
  --ui: Inter, Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  container-type: inline-size;
  font-family: var(--ui);
  isolation: isolate;
  position: relative;
  width: 100%;
}

.cqhc *, .cqhc *::before, .cqhc *::after { box-sizing: border-box; }
.cqhc button, .cqhc textarea { font: inherit; }
.cqhc button { color: inherit; cursor: pointer; }
.cqhc button:focus-visible, .cqhc textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.cqhc svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
/* That rule exists for the line-icon sprites, but it also inherits to <text>,
   which meant every glyph on the whiteboard carried a 1.8px near-white stroke
   on top of its fill - roughly 13% of the glyph height at 14px. It fattened the
   letterforms into a smudge and drowned out the intended text colour. Glyphs
   are filled shapes; they must never be stroked here. */
.cqhc svg text { stroke: none; paint-order: normal; }
.cqhc-sprite { height: 0; left: -9999px; overflow: hidden; position: absolute; width: 0; }

.cqhc-frame {
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 1px solid rgba(139, 151, 167, 0.22);
  border-radius: clamp(8px, 1.1cqi, 16px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255,255,255,.018) inset;
  display: flex;
  flex-direction: column;
  min-height: 430px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Top rail */
.cqhc-rail {
  align-items: center;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex: 0 0 clamp(38px, 3.75cqi, 48px);
  gap: clamp(8px, 1.35cqi, 20px);
  min-width: 0;
  padding: 0 clamp(10px, 1.35cqi, 18px);
  position: relative;
  z-index: 5;
}
.cqhc-brand { font-size: clamp(11px, 1.06cqi, 14px); font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; }
.cqhc-brand span { color: var(--amber); }
.cqhc-vr { background: var(--line); display: block; flex: 0 0 1px; height: clamp(14px, 1.55cqi, 20px); }
.cqhc-meta { align-items: baseline; color: var(--dim); display: flex; font-family: var(--mono); font-size: clamp(8px, .88cqi, 11.5px); gap: .55em; min-width: 0; white-space: nowrap; }
.cqhc-meta b { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.cqhc-observation-state { align-items: center; color: var(--dim); display: flex; font-size: clamp(8px, .9cqi, 12px); gap: .55em; white-space: nowrap; }
.cqhc-dot { background: var(--dim); border-radius: 50%; display: block; height: clamp(5px, .52cqi, 7px); width: clamp(5px, .52cqi, 7px); }
.cqhc-dot--ok { background: var(--green); box-shadow: 0 0 0 3px rgba(78,158,106,.08); }
.cqhc-dot--paused { background: var(--amber); box-shadow: 0 0 0 3px rgba(245,166,35,.08); }
.cqhc-connection { align-items: center; background: transparent; border: 0; color: var(--dim); display: flex; font-size: clamp(8px, .9cqi, 12px); gap: .6em; margin-left: auto; padding: .4em 0; white-space: nowrap; }
.cqhc-connection:hover { color: var(--text); }
.cqhc-bars { align-items: flex-end; display: flex; gap: 2px; height: 12px; }
.cqhc-bars i { background: var(--green); border-radius: 1px; display: block; width: 2px; }
.cqhc-bars i:nth-child(1){height:4px}.cqhc-bars i:nth-child(2){height:7px}.cqhc-bars i:nth-child(3){height:10px}.cqhc-bars i:nth-child(4){height:12px}
.cqhc-connection-pop { background: var(--ink-3); border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 16px 38px rgba(0,0,0,.5); display: none; padding: 10px 12px; position: absolute; right: 12px; top: calc(100% - 4px); width: clamp(210px, 21cqi, 270px); z-index: 80; }
.cqhc-connection-pop.is-open { display: block; }
.cqhc-connection-pop div { color: var(--dim); display: flex; font-size: clamp(8px,.82cqi,11px); justify-content: space-between; padding: 5px 0; }
.cqhc-connection-pop b { color: var(--text); font-family: var(--mono); font-weight: 500; }

/* Core layout */
.cqhc-main { display: grid; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr) clamp(225px, 26.6cqi, 342px); min-height: 0; }
.cqhc-work { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.cqhc-tabs { background: var(--ink-2); border-bottom: 1px solid var(--line); display: flex; flex: 0 0 clamp(32px, 3.1cqi, 40px); padding-left: clamp(4px,.5cqi,8px); }
.cqhc-tab { align-items: center; background: transparent; border: 0; color: var(--dim); display: flex; font-size: clamp(8px, .94cqi, 12.5px); gap: .5em; padding: 0 clamp(8px, 1cqi, 14px); position: relative; white-space: nowrap; }
.cqhc-tab:hover { color: var(--text); }
.cqhc-tab[aria-selected="true"] { color: var(--text); }
.cqhc-tab[aria-selected="true"]::after { background: var(--amber); bottom: -1px; content: ""; height: 2px; left: 10px; position: absolute; right: 10px; }
.cqhc-tab span { border: 1px solid var(--line); border-radius: 3px; color: var(--faint); font-family: var(--mono); font-size: .78em; padding: 1px 4px; }
.cqhc-panes { flex: 1 1 auto; min-height: 0; position: relative; }
.cqhc-pane { background: #0b0e13; display: none; flex-direction: column; inset: 0; min-height: 0; position: absolute; }
.cqhc-pane--active { display: flex; }

/* Meeting pane */
.cqhc-meeting-grid { display: grid; flex: 1 1 auto; gap: clamp(6px,.8cqi,10px); grid-template-columns: minmax(0,1fr) clamp(116px,15.5cqi,200px); min-height: 0; padding: clamp(7px,.9cqi,12px); }
.cqhc-meeting-main, .cqhc-mini-video { background: var(--ink-2); border: 1px solid transparent; border-radius: 6px; min-height: 0; overflow: hidden; position: relative; }
.cqhc-meeting-main img, .cqhc-mini-video img { height: 100%; object-fit: cover; width: 100%; }
.cqhc-meeting-main img { object-position: center 24%; }
.cqhc-mini-video img { object-position: center 22%; }
.cqhc-speaking { border-color: rgba(245,166,35,.7) !important; box-shadow: 0 0 0 1px rgba(245,166,35,.08) inset; }
.cqhc-video-label { background: rgba(11,14,19,.78); border-radius: 3px; bottom: 7px; color: var(--dim); font-family: var(--mono); font-size: clamp(7px,.72cqi,10px); left: 8px; padding: 3px 7px; position: absolute; }
.cqhc-live-pip { background: var(--green); border-radius: 50%; display: inline-block; height: 5px; margin-right: 5px; vertical-align: 1px; width: 5px; }
.cqhc-participant-state { bottom: 7px; display: flex; gap: 4px; position: absolute; right: 7px; }
.cqhc-participant-state svg, .cqhc-media-state svg { background: rgba(11,14,19,.82); border-radius: 4px; color: var(--dim); height: clamp(17px,1.6cqi,21px); padding: 4px; width: clamp(17px,1.6cqi,21px); }
.cqhc-meeting-side { display: grid; gap: clamp(5px,.6cqi,8px); grid-template-rows: 1.2fr .7fr .7fr; min-height: 0; }
.cqhc-avatar-tile { align-items: center; background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; display: flex; flex-direction: column; justify-content: center; min-height: 0; position: relative; }
.cqhc-avatar-tile > span { align-items: center; background: var(--ink-3); border-radius: 50%; color: var(--faint); display: flex; font-size: clamp(9px,1cqi,14px); font-weight: 600; height: clamp(27px,3cqi,42px); justify-content: center; width: clamp(27px,3cqi,42px); }
.cqhc-avatar-tile small { color: var(--dim); font-family: var(--mono); font-size: clamp(6px,.66cqi,9px); margin-top: .5em; }
.cqhc-avatar-tile em { bottom: 5px; color: var(--faint); font-family: var(--mono); font-size: clamp(5px,.54cqi,8px); font-style: normal; position: absolute; right: 6px; }
.cqhc-meeting-foot { align-items: center; border-top: 1px solid var(--line); color: var(--faint); display: flex; flex: 0 0 clamp(27px,2.7cqi,35px); font-family: var(--mono); font-size: clamp(7px,.72cqi,10px); justify-content: space-between; padding: 0 clamp(8px,1cqi,13px); }
.cqhc-meeting-pill { align-items: center; color: var(--green); display: flex; gap: .45em; }
.cqhc-meeting-pill svg { height: 1.2em; width: 1.2em; }

/* Code surface */
.cqhc-code-head, .cqhc-board-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex: 0 0 clamp(29px,2.75cqi,36px); gap: clamp(7px,.9cqi,12px); padding: 0 clamp(8px,1cqi,13px); }
.cqhc-file { color: var(--faint); font-family: var(--mono); font-size: clamp(7px,.86cqi,11.5px); }
.cqhc-pen-state { align-items: center; color: var(--dim); display: flex; font-size: clamp(7px,.88cqi,12px); gap: .55em; }
.cqhc-pen-state i { background: var(--amber); border-radius: 50%; height: 6px; width: 6px; }
.cqhc-pen-state.is-yours i { background: var(--green); }
.cqhc-code-head .cqhc-small-btn { margin-left: auto; }
.cqhc-small-btn { background: transparent; border: 1px solid var(--line); border-radius: 4px; color: var(--dim); font-size: clamp(7px,.82cqi,11px); padding: .38em .8em; white-space: nowrap; }
.cqhc-small-btn:hover { border-color: var(--faint); color: var(--text); }
.cqhc-small-btn--primary { background: var(--amber); border-color: var(--amber); color: #1a1206; font-weight: 600; }
.cqhc-small-btn--primary:hover { background: #ffb33a; color: #1a1206; }
.cqhc-editor { counter-reset: line; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: clamp(7px,.8cqi,11px) 0; position: relative; }
.cqhc-line { align-items: baseline; color: #cbd3de; display: grid; font-family: var(--mono); font-size: clamp(7.2px,.9cqi,12px); grid-template-columns: clamp(24px,3cqi,42px) 1fr; line-height: 1.7; min-height: 1.7em; padding-right: 10px; white-space: pre; }
/* Gutter numbers were #3b4553 = 1.99:1 on the #0b0e13 pane. Editors do mute
   these, but 1.99 is past muted into invisible. #78849a clears 4.5:1 and
   still reads as secondary against the #cbd3de code. */
.cqhc-line > span { color: #78849a; padding-right: .8em; text-align: right; user-select: none; }
.cqhc-line code { color: inherit; font-family: inherit; overflow: hidden; text-overflow: clip; }
.cqhc-line--active { background: rgba(255,255,255,.025); }
.cqhc-line .kw { color: #c792ea; font-weight: 500; }
.cqhc-line .fn { color: #82aaff; font-weight: 500; }
.cqhc-line .cls { color: #ffcb6b; font-weight: 500; }
.cqhc-line .str { color: #c3e88d; font-style: normal; }
.cqhc-line .num { color: #f78c6c; font-style: normal; }
/* Comments at #4e5a6b were 2.76:1. Kept visibly softer than live code, but
   readable - this one is a real sentence a visitor may try to read. */
.cqhc-line .cm { color: #78849a; font-style: italic; }
.cqhc-cursor { background: var(--amber); height: 1.35em; left: 53%; opacity: 0; position: absolute; top: 31%; width: 1px; }
.cqhc-editor.is-editing .cqhc-cursor { animation: cqhc-blink 1s steps(1) infinite; opacity: 1; }
@keyframes cqhc-blink { 0%,48%{opacity:1} 49%,100%{opacity:0} }

/* Board */
.cqhc-board-head { color: var(--faint); font-family: var(--mono); font-size: clamp(7px,.78cqi,10.5px); }
.cqhc-board-head > span { margin-left: auto; }
.cqhc-tool { background: transparent; border: 0; border-radius: 3px; color: var(--dim); padding: .35em .7em; }
.cqhc-tool:hover, .cqhc-tool.is-active { background: var(--ink-3); color: var(--text); }
.cqhc-board { background-color: #0b0e13; background-image: linear-gradient(var(--ink-3) 1px, transparent 1px), linear-gradient(90deg,var(--ink-3) 1px, transparent 1px); background-size: clamp(17px,2cqi,26px) clamp(17px,2cqi,26px); flex: 1 1 auto; min-height: 0; overflow: hidden; }
.cqhc-board svg { height: 100%; width: 100%; }
.cqhc-board-lines path { marker-end: url(#cqhc-arrow); stroke: #526070; stroke-width: 2; }
.cqhc-board-node rect { fill: #141920; stroke: #4f5b6a; stroke-width: 1.5; }
.cqhc-board-node text { fill: #dbe1e9; font-family: var(--ui); font-size: 14px; text-anchor: middle; }
/* Sub-labels were #687484 at 11px - 3.72:1 on the #141920 node fill, below AA.
   var(--dim) clears 4.5:1 and is the component's own secondary-text token, so
   it tracks the palette instead of drifting. Size nudged too: these are the
   finest text in the diagram. */
.cqhc-board-node text + text { fill: var(--dim); font-family: var(--mono); font-size: 12px; }
.cqhc-board-note path { fill: none; stroke: var(--amber); stroke-dasharray: 5 5; stroke-width: 2; }
.cqhc-board-note text { fill: var(--amber); font-family: var(--mono); font-size: 12px; }

/* Displays */
.cqhc-display-picker { align-items: center; display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 20px; }
.cqhc-display-picker > p { color: var(--dim); font-size: clamp(7px,.88cqi,12px); line-height: 1.5; margin: 0 0 clamp(9px,1.3cqi,18px); max-width: 360px; text-align: center; }
.cqhc-display-picker > div { display: flex; gap: clamp(7px,.9cqi,12px); }
.cqhc-display-picker button { background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; display: flex; flex-direction: column; padding: clamp(7px,.9cqi,12px); text-align: left; width: clamp(110px,14cqi,180px); }
.cqhc-display-picker button:hover { border-color: var(--faint); transform: translateY(-1px); }
.cqhc-display-picker button > span { align-items: center; background: var(--ink-3); border-radius: 4px; color: var(--faint); display: flex; font-family: var(--mono); font-size: clamp(6px,.7cqi,9px); height: clamp(46px,6cqi,80px); justify-content: center; margin-bottom: .7em; }
.cqhc-display-picker button b { font-size: clamp(8px,.88cqi,12px); font-weight: 500; }
.cqhc-display-picker button small { color: var(--faint); font-family: var(--mono); font-size: clamp(6px,.66cqi,9px); margin-top: .25em; }
.cqhc-display-live { display: flex; flex: 1; flex-direction: column; }
.cqhc-display-live > div { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex: 0 0 35px; font-size: clamp(7px,.82cqi,11px); gap: 1em; padding: 0 12px; }
.cqhc-display-live > div b { font-weight: 500; }
.cqhc-display-live > div span { align-items: center; color: var(--amber); display: flex; font-family: var(--mono); font-size: .86em; gap: .4em; }
.cqhc-display-live > div span i { background: var(--amber); border-radius: 50%; height: 5px; width: 5px; }
.cqhc-display-live > div button { background: transparent; border: 1px solid var(--line); border-radius: 4px; color: var(--dim); margin-left: auto; padding: .3em .7em; }
.cqhc-display-live > section { align-items: center; color: var(--faint); display: flex; flex: 1; flex-direction: column; font-family: var(--mono); font-size: clamp(7px,.84cqi,11px); gap: .7em; justify-content: center; }
.cqhc-display-live > section svg { height: clamp(28px,3.2cqi,44px); width: clamp(28px,3.2cqi,44px); }
.cqhc-display-live > section small { color: #3d4754; }

/* Right candidate/question column */
.cqhc-side { background: var(--ink-2); display: flex; flex-direction: column; min-height: 0; }
.cqhc-candidate-video { aspect-ratio: 4 / 3; background: #0b0e13; border-bottom: 1px solid var(--line); flex: 0 0 auto; overflow: hidden; position: relative; }
.cqhc-candidate-video img { height: 100%; object-fit: cover; object-position: center 23%; width: 100%; }
.cqhc-vtag { background: rgba(14,17,22,.76); border-radius: 3px; color: var(--dim); font-family: var(--mono); font-size: clamp(6px,.7cqi,9.5px); left: 9px; padding: 3px 7px; position: absolute; top: 9px; }
.cqhc-media-state { display: flex; gap: 4px; position: absolute; right: 7px; top: 7px; }
.cqhc-captions { background: linear-gradient(transparent, rgba(11,14,19,.96) 45%); bottom: 0; left: 0; padding: clamp(18px,3cqi,38px) clamp(8px,1cqi,13px) clamp(7px,.9cqi,12px); position: absolute; right: 0; }
.cqhc-captions.is-hidden { display: none; }
.cqhc-captions > span { color: var(--faint); display: block; font-family: var(--mono); font-size: clamp(5px,.58cqi,8px); letter-spacing: .06em; margin-bottom: .4em; text-transform: uppercase; }
.cqhc-captions p { color: #cbd3de; font-size: clamp(7px,.9cqi,12.5px); line-height: 1.38; margin: 0; }
.cqhc-question { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: clamp(9px,1.1cqi,15px); }
.cqhc-question-top { align-items: center; color: var(--faint); display: flex; font-family: var(--mono); font-size: clamp(5.5px,.61cqi,8.5px); letter-spacing: .07em; text-transform: uppercase; }
.cqhc-question-top button { background: transparent; border: 1px solid var(--line); border-radius: 4px; color: var(--dim); font-family: var(--ui); font-size: clamp(6px,.67cqi,9px); letter-spacing: 0; margin-left: auto; padding: .32em .65em; text-transform: none; }
.cqhc-question > p { font-size: clamp(8px,1cqi,14px); line-height: 1.47; margin: clamp(6px,.75cqi,10px) 0 clamp(7px,.9cqi,12px); }
.cqhc-question-meta { color: var(--faint); display: flex; font-family: var(--mono); font-size: clamp(5.5px,.62cqi,8.5px); gap: 1.4em; margin-bottom: clamp(7px,.85cqi,11px); }
.cqhc-question-meta b { color: var(--dim); font-weight: 400; }
.cqhc-followups { border-top: 1px solid var(--line); padding-top: clamp(6px,.75cqi,10px); }
.cqhc-followups > span { color: var(--faint); display: block; font-family: var(--mono); font-size: clamp(5.5px,.6cqi,8px); letter-spacing: .06em; margin-bottom: .35em; text-transform: uppercase; }
.cqhc-followups button { background: transparent; border: 0; border-radius: 4px; color: var(--dim); display: block; font-size: clamp(6.5px,.78cqi,10.5px); line-height: 1.35; padding: .42em .55em; text-align: left; width: 100%; }
.cqhc-followups button:hover { background: var(--ink-3); color: var(--text); }
.cqhc-question textarea { background: var(--ink); border: 1px solid var(--line); border-radius: 5px; color: var(--text); display: block; font-size: clamp(6.5px,.76cqi,10px); height: clamp(34px,4.2cqi,58px); margin-top: clamp(6px,.75cqi,10px); padding: .65em .75em; resize: none; width: 100%; }
.cqhc-question textarea::placeholder { color: var(--faint); }

/* Controls */
.cqhc-controls { align-items: center; background: var(--ink-2); border-top: 1px solid var(--line); display: flex; flex: 0 0 clamp(42px,4.2cqi,54px); gap: clamp(3px,.5cqi,8px); justify-content: center; padding: 0 clamp(6px,.8cqi,12px); position: relative; z-index: 8; }
.cqhc-controls > button { align-items: center; background: var(--ink-3); border: 0; border-radius: 6px; color: var(--text); display: flex; font-size: clamp(7px,.82cqi,11px); gap: .55em; padding: .58em .9em; white-space: nowrap; }
.cqhc-controls > button:hover { background: var(--ink-4); }
.cqhc-controls > button[aria-pressed="false"]:not(.cqhc-pause) { color: var(--faint); }
.cqhc-controls svg { height: 1.15em; width: 1.15em; }
.cqhc-controls .cqhc-pause { background: transparent; border: 1px solid var(--line); margin-left: clamp(3px,.5cqi,8px); }
.cqhc-controls .cqhc-pause[aria-pressed="true"] { background: var(--amber-soft); border-color: rgba(245,166,35,.35); color: var(--amber); }
.cqhc-controls .cqhc-leave { background: transparent; color: var(--red); }
.cqhc-controls .cqhc-leave:hover { background: rgba(226,75,74,.1); }
.cqhc-pending { background: transparent !important; color: var(--dim) !important; margin-left: auto; padding-left: .5em !important; }
.cqhc-pending b { align-items: center; background: var(--amber); border-radius: 9px; color: #1a1206; display: flex; font-family: var(--mono); font-size: .86em; height: 1.55em; justify-content: center; min-width: 1.55em; padding: 0 .3em; }

/* Corroborated observation band */
.cqhc-noted { align-items: center; background: var(--ink-2); border-top: 1px solid var(--line); display: none; flex: 0 0 auto; gap: clamp(5px,.65cqi,9px); padding: clamp(6px,.75cqi,10px) clamp(9px,1.2cqi,16px); position: relative; z-index: 7; }
.cqhc-noted::before { background: var(--amber); bottom: 0; content: ""; left: 0; position: absolute; top: 0; width: 2px; }
.cqhc-noted.is-visible { animation: cqhc-rise .24s ease-out; display: flex; }
.cqhc-noted > div { min-width: 0; }
.cqhc-noted > div b { display: block; font-size: clamp(7px,.85cqi,11.5px); font-weight: 500; }
.cqhc-noted > div span { color: var(--faint); display: block; font-size: clamp(6px,.7cqi,9.5px); margin-top: .15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cqhc-noted > button:first-of-type { margin-left: auto; }
@keyframes cqhc-rise { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* Session ribbon */
.cqhc-ribbon { background: var(--ink); border-top: 1px solid var(--line); flex: 0 0 auto; position: relative; z-index: 6; }
.cqhc-ribbon-head { align-items: center; color: var(--faint); display: flex; font-family: var(--mono); font-size: clamp(5.5px,.64cqi,8.5px); gap: 1em; letter-spacing: .05em; padding: clamp(5px,.55cqi,7px) clamp(10px,1.2cqi,16px) clamp(3px,.35cqi,5px); text-transform: uppercase; }
.cqhc-ribbon-head b { color: var(--dim); font-weight: 400; letter-spacing: 0; text-transform: none; }
.cqhc-ribbon-head button { background: transparent; border: 0; color: var(--dim); font-family: var(--ui); font-size: 1.05em; letter-spacing: 0; margin-left: auto; text-transform: none; }
.cqhc-track { background: var(--ink-2); border: 0; border-radius: 3px; display: block; height: clamp(19px,2.5cqi,32px); margin: 0 clamp(10px,1.2cqi,16px) clamp(4px,.5cqi,7px); overflow: hidden; padding: 0; position: relative; width: calc(100% - clamp(20px,2.4cqi,32px)); }
.cqhc-coverage, .cqhc-view-span { bottom: 0; position: absolute; top: 0; }
.cqhc-coverage--full { background: rgba(78,158,106,.07); }
.cqhc-coverage--reduced { background: rgba(245,166,35,.09); }
.cqhc-view-span { background: rgba(245,166,35,.12); border-left: 1px solid rgba(245,166,35,.4); border-right: 1px solid rgba(245,166,35,.4); }
.cqhc-tick { background: var(--text); border-radius: 1px; bottom: 5px; opacity: .55; position: absolute; top: 5px; width: 2px; }
.cqhc-tick--paired { background: var(--amber); opacity: .9; }
.cqhc-now { background: var(--amber); bottom: 0; position: absolute; top: 0; width: 1px; }
.cqhc-now::after { background: var(--amber); border-radius: 50%; content: ""; height: 6px; left: -2.5px; position: absolute; top: -1px; width: 6px; }
.cqhc-scale { color: #3b4553; display: flex; font-family: var(--mono); font-size: clamp(5px,.55cqi,7.5px); justify-content: space-between; padding: 0 clamp(10px,1.2cqi,16px) clamp(5px,.55cqi,7px); }
.cqhc-log { border-top: 1px solid transparent; max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.cqhc-log.is-open { border-top-color: var(--line); max-height: clamp(120px,17cqi,220px); overflow-y: auto; padding: clamp(6px,.8cqi,10px) clamp(10px,1.2cqi,16px); }
.cqhc-log-group { color: var(--faint); font-family: var(--mono); font-size: clamp(5.5px,.62cqi,8.5px); letter-spacing: .05em; margin: .5em 0 .3em; text-transform: uppercase; }
.cqhc-log button { align-items: baseline; background: transparent; border: 0; border-radius: 4px; display: flex; gap: 1em; padding: .5em .65em; text-align: left; width: 100%; }
.cqhc-log button:hover { background: var(--ink-2); }
.cqhc-log time { color: var(--dim); flex: 0 0 44px; font-family: var(--mono); font-size: clamp(6px,.73cqi,10px); }
.cqhc-log button > span { min-width: 0; }
.cqhc-log button b { display: block; font-size: clamp(7px,.82cqi,11px); font-weight: 400; }
.cqhc-log button small { color: var(--faint); display: block; font-size: clamp(6px,.7cqi,9.5px); margin-top: .15em; }
.cqhc-log button em { color: var(--amber); font-family: var(--mono); font-size: clamp(5.5px,.62cqi,8.5px); font-style: normal; margin-left: auto; opacity: 0; white-space: nowrap; }
.cqhc-log button:hover em { opacity: 1; }

/* Evidence drawer */
.cqhc-drawer-scrim { background: rgba(6,8,11,.58); inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity .2s ease; z-index: 88; }
.cqhc-drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.cqhc-drawer { background: var(--ink-2); border-left: 1px solid var(--line); bottom: 0; display: flex; flex-direction: column; position: absolute; right: 0; top: 0; transform: translateX(102%); transition: transform .22s ease; width: min(39%, 460px); z-index: 90; }
.cqhc-drawer.is-open { transform: none; }
.cqhc-drawer > header { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex: 0 0 clamp(38px,4cqi,52px); font-size: clamp(8px,.95cqi,13px); font-weight: 600; padding: 0 clamp(10px,1.2cqi,16px); }
.cqhc-drawer > header button { background: transparent; border: 0; color: var(--dim); margin-left: auto; padding: 4px; }
.cqhc-drawer > header svg { height: clamp(14px,1.4cqi,19px); width: clamp(14px,1.4cqi,19px); }
.cqhc-drawer-body { flex: 1; min-height: 0; overflow: auto; padding: clamp(10px,1.25cqi,16px); }
.cqhc-drawer-when { color: var(--dim); font-family: var(--mono); font-size: clamp(6px,.72cqi,10px); margin-bottom: .4em; }
.cqhc-drawer-title { font-size: clamp(9px,1.05cqi,15px); line-height: 1.4; margin-bottom: 1em; }
.cqhc-evidence-card { border: 1px solid var(--line); border-radius: 6px; margin-bottom: clamp(7px,.9cqi,12px); overflow: hidden; }
.cqhc-evidence-card > header { align-items: center; background: var(--ink-3); color: var(--dim); display: flex; font-family: var(--mono); font-size: clamp(5.5px,.65cqi,9px); padding: .65em .9em; }
.cqhc-evidence-card > div { padding: clamp(8px,1cqi,13px); }
.cqhc-evidence-text { color: #cbd3de; font-family: var(--mono); font-size: clamp(6px,.72cqi,10px); line-height: 1.65; white-space: pre-wrap; }
.cqhc-kv { border-bottom: 1px solid rgba(35,43,54,.65); color: var(--dim); display: flex; font-size: clamp(6px,.72cqi,10px); justify-content: space-between; padding: .48em 0; }
.cqhc-kv:last-child { border-bottom: 0; }
.cqhc-kv b { color: var(--text); font-family: var(--mono); font-weight: 500; }
.cqhc-caveat { border-left: 2px solid var(--line); color: var(--faint); font-size: clamp(6px,.71cqi,9.5px); line-height: 1.55; padding: .7em .85em; }
.cqhc-drawer > footer { align-items: center; border-top: 1px solid var(--line); color: var(--dim); display: flex; flex: 0 0 clamp(38px,4cqi,52px); font-size: clamp(6px,.72cqi,10px); gap: .6em; padding: 0 clamp(10px,1.2cqi,16px); }
.cqhc-drawer > footer svg { height: 1.25em; width: 1.25em; }
.cqhc-drawer > footer b { color: var(--green); font-family: var(--mono); font-weight: 500; margin-left: auto; }

/* Question modal */
.cqhc-question-modal { align-items: center; background: rgba(6,8,11,.72); display: flex; inset: 0; justify-content: center; opacity: 0; padding: 5%; pointer-events: none; position: absolute; transition: opacity .18s ease; z-index: 95; }
.cqhc-question-modal.is-open { opacity: 1; pointer-events: auto; }
.cqhc-question-modal > div { background: var(--ink-2); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 24px 64px rgba(0,0,0,.55); display: flex; flex-direction: column; max-height: 82%; overflow: hidden; transform: translateY(5px); transition: transform .18s ease; width: min(620px, 72%); }
.cqhc-question-modal.is-open > div { transform: none; }
.cqhc-question-modal header { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex: 0 0 clamp(38px,4cqi,52px); font-size: clamp(8px,.95cqi,13px); font-weight: 600; padding: 0 14px; }
.cqhc-question-modal header button { background: transparent; border: 0; color: var(--dim); margin-left: auto; }
.cqhc-question-modal header svg { height: 17px; width: 17px; }
.cqhc-question-modal section { display: grid; gap: 6px; overflow: auto; padding: 12px; }
.cqhc-question-modal section button { background: transparent; border: 1px solid var(--line); border-radius: 5px; color: var(--dim); font-size: clamp(7px,.85cqi,11.5px); line-height: 1.4; padding: .75em .9em; text-align: left; }
.cqhc-question-modal section button:hover, .cqhc-question-modal section button.is-active { background: var(--ink-3); color: var(--text); }
.cqhc-question-modal section button.is-active { border-left: 2px solid var(--amber); }
.cqhc-question-modal footer { align-items: center; border-top: 1px solid var(--line); color: var(--faint); display: flex; font-size: clamp(6px,.72cqi,10px); padding: 9px 12px; }
.cqhc-question-modal footer button { margin-left: auto; }

/* End state and toast */
.cqhc-ended { align-items: center; background: rgba(6,8,11,.78); display: flex; inset: 0; justify-content: center; position: absolute; z-index: 100; }
.cqhc-ended[hidden] { display: none; }
.cqhc-ended > div { align-items: center; background: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; display: flex; font-size: clamp(8px,.95cqi,13px); gap: 18px; padding: 16px 18px; }
.cqhc-toast { background: rgba(27,34,43,.96); border: 1px solid var(--line); border-radius: 5px; bottom: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.4); color: var(--text); font-size: clamp(7px,.8cqi,11px); left: 50%; opacity: 0; padding: .6em .9em; pointer-events: none; position: absolute; transform: translate(-50%, 8px); transition: opacity .17s ease, transform .17s ease; z-index: 110; }
.cqhc-toast.is-visible { opacity: 1; transform: translate(-50%,0); }

/* Medium component widths */
@container (max-width: 900px) {
  .cqhc-frame { aspect-ratio: 14 / 9; }
  .cqhc-main { grid-template-columns: minmax(0,1fr) clamp(190px,29cqi,245px); }
  .cqhc-vr-optional { display: none; }
  .cqhc-meta b { max-width: 150px; }
  .cqhc-controls > button { padding-left: .65em; padding-right: .65em; }
  .cqhc-pending span { display: none; }
  .cqhc-drawer { width: 48%; }
}

@container (max-width: 700px) {
  .cqhc-frame { aspect-ratio: auto; min-height: 470px; }
  .cqhc-main { display: block; min-height: 0; position: relative; }
  .cqhc-work { border-right: 0; bottom: 0; height: auto; left: 0; position: absolute; right: 0; top: 0; }
  .cqhc-side { background: transparent; display: block; pointer-events: none; position: absolute; right: 7px; top: 41px; width: 29%; z-index: 12; }
  .cqhc-candidate-video { border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 9px 26px rgba(0,0,0,.45); }
  .cqhc-question { display: none; }
  .cqhc-vtag { left: 5px; top: 5px; }
  .cqhc-media-state { display: none; }
  .cqhc-captions { display: none; }
  .cqhc-meeting-grid { grid-template-columns: 1fr 27%; padding-right: 31%; }
  .cqhc-controls { justify-content: flex-start; overflow: hidden; }
  .cqhc-controls > button span { display: none; }
  .cqhc-controls > button { flex: 0 0 auto; padding: .65em; }
  .cqhc-controls .cqhc-pause { margin-left: 0; }
  .cqhc-pending { margin-left: auto; }
  .cqhc-pending b { display: flex; }
  .cqhc-noted > div span, .cqhc-noted > button:last-child { display: none; }
  .cqhc-ribbon-head { padding-top: 4px; }
  .cqhc-track { height: 22px; }
  .cqhc-scale { display: none; }
  .cqhc-drawer { width: min(88%, 420px); }
  .cqhc-question-modal > div { width: 88%; }
}

@container (max-width: 520px) {
  .cqhc-frame { min-height: 430px; }
  .cqhc-rail { gap: 7px; padding: 0 8px; }
  .cqhc-meta { display: none; }
  .cqhc-observation-state { margin-left: 2px; }
  .cqhc-connection > span:last-child { display: none; }
  .cqhc-tabs { overflow: hidden; }
  .cqhc-tab { padding: 0 7px; }
  .cqhc-meeting-grid { padding-right: 7px; }
  .cqhc-side { right: 8px; top: 42px; width: 34%; }
  .cqhc-pane[data-cqhc-pane="code"] .cqhc-code-head { flex: 0 0 36px; padding-right: 37%; }
  .cqhc-pane[data-cqhc-pane="code"] .cqhc-editor { padding-right: 36%; }
  .cqhc-line { font-size: 7.4px; grid-template-columns: 22px 1fr; line-height: 1.55; }
  .cqhc-line:nth-child(n+11) { display: none; }
  .cqhc-board-node text { font-size: 13px; }
  .cqhc-controls .cqhc-leave { display: none; }
  .cqhc-noted { padding-left: 9px; }
  .cqhc-noted > div b { max-width: 225px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cqhc-ribbon-head button { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .cqhc *, .cqhc *::before, .cqhc *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Homepage hero integration.

   The live console appears only at >=1120px, and everything narrower gets a
   static 1280px frame. That threshold is measured, not conventional: the
   component sizes from its container and bottoms out at its minimum clamps
   below it. At a 717px container, control labels render at 7px and code at
   7.2px. A crisp screenshot of the console at its designed width is more
   legible on a tablet than a live copy squeezed into one.

   The console markup lives in a <template>, hydrated by hero-console.js only
   at >=768px. A <template> is inert: nothing inside it is parsed as content
   or fetched, so phones never download the two portraits or run the driver.
   Do not move the markup out of the template to "simplify" this - that is
   what stops the fetch.
   --------------------------------------------------------------------------- */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-only-focusable:focus,.sr-only-focusable:focus-visible{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;display:inline-block;padding:8px 14px;background:var(--cf-amber,#f5a623);color:#171109;border-radius:8px;font-weight:650}

.hero-console-static{display:block;width:100%;height:auto;border-radius:14px;border:1px solid rgba(139,151,167,.22);box-shadow:0 28px 80px rgba(0,0,0,.42)}
/* Reserve the console's exact box before hydration. The frame is width x 9/16
   (measured 1200x675 at the shipped width), so an identical aspect-ratio here
   means expanding the template changes nothing about layout. Without this the
   template contributes zero height at first paint and then inserts 675px,
   which measured CLS 0.294 against a 0.023 baseline. */
.hero-console-live{display:none;aspect-ratio:16/9;min-height:430px}

@media (min-width:1120px){
    .hero-console-static{display:none}
    .hero-console-live{display:block}
}

/* The frame reserves its own box via aspect-ratio, so hydration causes no CLS. */
.hero-console-live .cqhc{width:100%}

/* The hero stacks rather than sitting in two columns, because this component
   sizes itself from its container and bottoms out at its minimum clamps in a
   narrow one. Measured:

        container   control label   code line   rail meta
        717px       7.0px           7.2px       8.0px
        1200px      9.8px           10.8px      10.6px
        1400px      11.0px          12.0px      11.5px

   In a 717px column nine operable controls carried 6-7px labels and failed
   contrast - not fixable with colour, since a 7px button label is not usable
   at any contrast. Full container width is what makes the console legible and
   its controls genuinely operable. Do not put it back in a side column.

   pages.css already stacks .hero-grid below 1050px; this extends that upward.
   Loaded after pages.css, so equal specificity resolves in source order. */
@media (min-width:1120px){
    .hero-grid{grid-template-columns:1fr;gap:26px}
        /* A stacked hero is naturally taller, and the console is 651px on its own.
       Without tightening, its top edge landed at y=853 - below the fold on
       every common laptop, which defeats the point of putting it in the hero.
       These reclaim ~200px so the console breaks the fold and invites scroll. */
    /* .site-header is position:absolute and 73px tall, so the hero's top
       padding is what keeps the badge clear of it - do not drop below ~96px. */
    .hero{padding-top:100px}
    /* pages.css caps bare `h1` at max-width:600px, which wrapped this headline
       to four lines and cost ~134px of hero height. Lifting the cap and giving
       the block 66rem lets each sentence hold one line, so it sets in two.
       The paragraph keeps its own measure so the reading line stays sane. */
    .hero-copy{max-width:66rem}
    .hero-copy h1{max-width:none;margin-bottom:14px}
    .hero-copy p{max-width:44rem;margin-bottom:20px}
}

/* ---------------------------------------------------------------------------
   WCAG 1.4.3 fixes for the operable controls.

   The component is a simulation, but its 39 controls are real, focusable and
   clickable, so the "incidental text / part of a picture" exception does not
   cover them. Audited at the shipped width with alpha correctly composited
   against the stacked backgrounds - low-alpha overlays read as opaque white if
   you skip that, which invents failures that are not there.

   Three causes, all colour-only. No geometry changes.
   --------------------------------------------------------------------------- */

/* 1. Near-white on amber was 1.68:1. Dark ink on amber is 9.2:1 and matches
      how the marketing pages already treat amber buttons. */
.cqhc .cqhc-small-btn--primary{color:#171109}
.cqhc .cqhc-small-btn--primary svg{color:#171109}

/* 2. --faint (#5a6472) sat at 2.7-3.2:1 wherever it labelled a control.
      #7f8b9c clears 4.5:1 on every surface the component actually uses. */
.cqhc{--faint:#7f8b9c}

/* 3. "Leave" landed on 4.49:1 - one hundredth short, which still fails. */
.cqhc .cqhc-leave{color:#e8615f}

/* Timeline tick labels are non-interactive chrome inside the simulation, but
   1.95:1 is poor by any reading, so they come up with everything else. */
.cqhc .cqhc-scale span{color:#7a8494}

/* The display-view caption states the session-only guarantee, so it should be
   readable even though it is not interactive. #3d4754 gave 2.05:1. */
.cqhc .cqhc-display-live small{color:#7f8b9c}

/* WCAG 2.2 AA 2.5.8 Target Size (Minimum): 24x24 CSS px, or enough spacing
   that 24px circles centred on adjacent targets do not intersect. The
   follow-up list and the timeline toggle were under it. Padding only - the
   text size and the component's layout are unchanged. */
.cqhc .cqhc-followups button{min-height:24px;padding-top:.5em;padding-bottom:.5em}
.cqhc .cqhc-ribbon-head button{min-height:24px;padding:0 8px}