/* Layout: a drafting desk. Interview tabs across the top, question tabs below; the drawing sheet sits left (sticky on wide screens) when a question has one, the interviewer's panel right. */
/* The artifact's colour names, mapped onto the Amodo app design system's tokens (design-system/tokens.css).
   Light and dark come from the tokens: theme.js sets data-theme on the root element. */
:root {
  --paper: var(--color-surface);
  --sheet: var(--color-surface-raised);
  --ink: var(--color-text);
  --muted: var(--color-muted);
  --rule: color-mix(in srgb, var(--color-text) 20%, var(--color-surface));
  --accent: var(--color-ramp-4);
  --accent-wash: var(--color-selected);
  --load: var(--color-data-2);
  --load-wash: color-mix(in srgb, var(--color-data-2) 16%, var(--color-surface-raised));
  --react: var(--color-data-5);
  --choice: var(--color-success);
  --choice-wash: color-mix(in srgb, var(--color-success) 16%, var(--color-surface-raised));
  --mark: var(--color-data-3);
  --cand: var(--color-data-4);   /* what the candidate draws, and their pointer */
  --steel: color-mix(in srgb, var(--color-text) 10%, var(--color-surface-raised));
  --steel-2: color-mix(in srgb, var(--color-text) 28%, var(--color-surface-raised));
  --steel-3: color-mix(in srgb, var(--color-text) 50%, var(--color-surface-raised));
  --wind: var(--color-faint);
  --dot-good: var(--color-success);
  --dot-bad: var(--color-danger);
  --on-load: var(--color-surface-raised);
  --font-mono: var(--font-data);
}
html { color-scheme: light; background: var(--color-surface); }
html[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.55; }
.wrap { max-width: 1320px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: 0.01em; text-wrap: balance; margin: 0; line-height: 1.1; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Header: rows of one height at every width, so nothing below them moves as the window changes.
   Home and past candidates show the title. An interview shows Home and the candidate, with the three
   interviews on a row of their own underneath. */
.top { border-bottom: 1px solid var(--rule); background: var(--sheet); }
.top-inner { display: flex; flex-wrap: nowrap; gap: 14px; align-items: center; height: 48px; }
h1 { font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body[data-screen="interview"] .top-title { display: none; }
/* Home and the candidate share one row at every width: the candidate box takes what is left and shrinks. */
.top-controls { display: flex; flex: 1 1 auto; flex-wrap: nowrap; gap: 10px 14px; align-items: center; min-width: 0; }
.cand { display: flex; gap: 8px; align-items: center; flex: 1 1 auto; min-width: 0; }
.cand select { flex: 0 1 260px; min-width: 0; }
.script-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 5px 10px; }
.cand label { font-size: 12.5px; color: var(--muted); }
.cand input { width: 200px; max-width: 52vw; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 7px; overflow: hidden; background: var(--paper); }
.seg a, .seg button { padding: 6px 12px; font-size: 13px; text-decoration: none; color: var(--muted); border: 0; background: transparent; cursor: pointer; }
.seg a + a, .seg button + button { border-left: 1px solid var(--rule); }
.seg .on { background: var(--ink); color: var(--sheet); }

/* The three interviews: a row of their own under Home and the candidate. */
.itabs { display: flex; flex-wrap: nowrap; height: 36px; }
.itab { display: flex; align-items: center; gap: 6px; padding-top: 3px; margin-right: 20px; text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.itab .n { font-family: var(--font-mono); font-size: 11px; }
.itab .nm { font-family: var(--font-display); font-size: 17px; font-weight: var(--weight-display); color: var(--muted); line-height: 1.1; }
.itab[aria-current="page"] { border-bottom-color: var(--accent); }
.itab[aria-current="page"] .nm { color: var(--ink); }
.itab:hover .nm { color: var(--ink); }

/* Question bar */
.qwrap { padding-block: 16px 0; display: flex; flex-direction: column; gap: 10px; }
.qbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
/* The section tabs: one row of one height at every width, in one of two forms (renderQSteps and
   fitSectionTabs in render.js). Full: timing over name on every tab. When those would not fit the bar,
   codes: the current tab stays as it is and the others shrink to their start minute over a short code. The page
   measures the full form and switches only when it has to. */
.steps { height: 63px; flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: nowrap; overflow: hidden; border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); }
.steps button { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border: 0; border-right: 1px solid var(--rule); background: transparent; cursor: pointer; text-align: left; color: var(--muted); white-space: nowrap; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num marks" "nm nm"; align-items: center; row-gap: 1px; }
.steps button:last-child { border-right: 0; }
.steps button[aria-current="step"] { background: var(--accent-wash); box-shadow: inset 0 -3px 0 var(--accent); }
.steps .num, .steps .short { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.steps .num { grid-area: num; overflow: hidden; text-overflow: ellipsis; }
.steps .num .code + .tm::before { content: " · "; }
.steps .nm { grid-area: nm; font-family: var(--font-display); font-size: 17px; line-height: 1.1; font-weight: var(--weight-display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.steps .marks { grid-area: marks; flex: none; }
.steps .short, .steps .tms { display: none; }
.steps .now { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; background: var(--load); color: var(--sheet); font-size: 9.5px; letter-spacing: 0.06em; font-family: var(--font-mono); text-transform: uppercase; }
.steps.measuring button { flex: 0 0 auto; }   /* each tab at the width its words need, to see whether they fit */

/* Codes: used when the full tabs would not fit. */
.steps.codes button { flex: 0 0 auto; padding: 9px 6px; }
.steps.codes button[aria-current="step"] { flex: 1 1 0; }
.steps.codes button:not([aria-current="step"]) :is(.code, .tm, .nm) { display: none; }
.steps.codes button:not([aria-current="step"]) .tms { display: inline; font-size: 9.5px; letter-spacing: 0; }
.steps.codes button:not([aria-current="step"]) .short { display: block; grid-area: nm; font-size: 13px; letter-spacing: 0.02em; text-transform: none; color: var(--ink); }
.steps.codes button:not([aria-current="step"]) .marks .now { display: none; }
.warn { padding: 9px 14px; border-radius: 8px; background: var(--load-wash); color: var(--ink); font-size: 14px; border: 1px solid var(--load); }
.warn b { color: var(--load); }

/* Main grid */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 16px 40px; }
.grid.solo { max-width: 920px; }
@media (min-width: 1080px) {
  .grid:not(.solo) { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); align-items: start; }
  .vis-card { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); }
}
.vis-card, .panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; min-width: 0; }
.vis-card { padding: 14px; }
.vis { display: flex; flex-direction: column; gap: 10px; }
.vis-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.vis-head h3 { font-size: 19px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar .lbl, .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); font-size: 13px; cursor: pointer; color: var(--muted); }
.chip .sw { width: 10px; height: 10px; border-radius: 2px; background: var(--steel-3); }
.chip[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); background: var(--sheet); }
.chip[data-layer="loads"] .sw { background: var(--load); }
.chip[data-layer="reactions"] .sw { background: var(--react); }
.chip[data-layer="choice"] .sw { background: var(--choice); }
.chip[data-tool] .sw { background: var(--mark); }
.chip.plain { border-radius: 6px; }
.spacer { flex: 1; }
.svgbox { overflow: hidden; border: 1px solid var(--rule); border-radius: 8px; background: var(--sheet); }
.svgbox svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
#dia.drawing { cursor: crosshair; touch-action: none; }
.labelin { width: 70px; padding: 4px 8px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); font-family: var(--font-mono); font-size: 13px; }
.legend { margin: 0; font-size: 12.5px; color: var(--muted); }

/* SVG styling */
.s-tower { fill: var(--steel); stroke: var(--steel-3); stroke-width: 1.2; }
.s-nacelle { fill: var(--steel); fill-opacity: 0.55; stroke: var(--steel-3); stroke-width: 1.4; }
.s-part { fill: var(--steel-2); fill-opacity: 0.55; stroke: var(--steel-3); stroke-width: 1.2; }
.s-blade { fill: var(--steel-2); stroke: var(--steel-3); stroke-width: 1.2; }
.s-blade.far { fill-opacity: 0.45; }
.s-spinner { fill: var(--steel-2); stroke: var(--steel-3); stroke-width: 1.4; }
.s-shaft { fill: var(--steel-3); stroke: var(--ink); stroke-width: 1.2; }
.s-housing { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.6; }
.s-housing.sel { fill: var(--choice-wash); stroke: var(--choice); stroke-width: 2.2; }
.s-roller { fill: var(--choice); }
.s-txt { fill: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.svgbox text { paint-order: stroke; stroke: var(--sheet); stroke-width: 4px; stroke-linejoin: round; }
.s-tag { fill: var(--ink); font-family: var(--font-display); font-weight: var(--weight-display); font-size: 18px; }
.s-sea { fill: var(--wind); fill-opacity: 0.22; stroke: var(--wind); stroke-width: 1.2; }
.s-wind { stroke: var(--wind); stroke-width: 2; stroke-dasharray: 6 4; fill: none; }
.s-dim { stroke: var(--muted); stroke-width: 1; fill: none; }
.s-ext { stroke: var(--muted); stroke-width: 0.8; stroke-dasharray: 3 3; fill: none; }
.f-wind { fill: var(--wind); } .f-dim { fill: var(--muted); } .f-load { fill: var(--load); } .f-react { fill: var(--react); } .f-mark { fill: var(--mark); }
.a-load { stroke: var(--load); stroke-width: 3; fill: none; }
.a-react { stroke: var(--react); stroke-width: 3; fill: none; }
.a-mark { stroke: var(--mark); stroke-width: 2.6; fill: none; }
.t-load { fill: var(--load); font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; }
.t-react { fill: var(--react); font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; }
.t-choice { fill: var(--choice); font-family: var(--font-body); font-size: 14px; font-weight: 600; }
.t-mark { fill: var(--mark); font-family: var(--font-mono); font-size: 15px; font-weight: 500; }
.t-note { fill: var(--muted); font-family: var(--font-body); font-size: 12.5px; }
.a-cand { stroke: var(--cand); stroke-width: 2.6; fill: none; }
.t-cand { fill: var(--cand); font-family: var(--font-mono); font-size: 15px; font-weight: 500; }
.f-cand { fill: var(--cand); }
.cand-cursor { fill: var(--cand); fill-opacity: 0.55; stroke: var(--sheet); stroke-width: 2; pointer-events: none; }
/* The interviewer's strip under a diagram: the candidate's link, their code and whether they are connected. */
.cand-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border: 1px dashed var(--rule); border-radius: 8px; font-size: 13.5px; }
.cand-link:empty { display: none; }
.cand-link .code { font-family: var(--font-mono); font-size: 20px; font-weight: 500; letter-spacing: 0.14em; color: var(--ink); user-select: all; }
.cand-link .addr { font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: anywhere; user-select: all; }
.cand-link .who { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.cand-link .who::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--steel-3); }
.cand-link .who.on { color: var(--ink); }
.cand-link .who.on::before { background: var(--cand); }
.fbd-only { display: none; }
#dia.fbd :is(.scenery, .nac-only) { display: none; }
#dia.fbd .fbd-only { display: inline; }
.s-cog { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.5; }

/* Runout explainer */
.ro-part { fill: var(--steel-2); stroke: var(--ink); stroke-width: 1.3; }
.ro-journal { fill: var(--steel); stroke: var(--steel-3); stroke-width: 1.2; }
.ro-vee { fill: var(--steel-2); stroke: var(--steel-3); stroke-width: 1; }
.ro-axis { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 10 4 2 4; fill: none; }
.ro-stripe { stroke: var(--ink); stroke-width: 2; }
.ro-ind { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.4; }
.ro-stem { fill: var(--steel-3); stroke: var(--ink); stroke-width: 1; }
.ro-tick { stroke: var(--muted); stroke-width: 1; }
.ro-needle { stroke: var(--load); stroke-width: 2.4; stroke-linecap: round; }
.ro-hub { fill: var(--ink); }
.ro-sec { fill: var(--steel-2); stroke: var(--ink); stroke-width: 1.2; }
.ro-dot { fill: var(--load); }
.ro-cross { stroke: var(--accent); stroke-width: 1; }
.ro-frame { fill: var(--sheet); stroke: var(--rule); }
.ro-grid { stroke: var(--rule); stroke-width: 1; }
.ro-zero { stroke: var(--steel-3); stroke-width: 1; }
.ro-trace { fill: none; stroke: var(--load); stroke-width: 2.2; }
.ro-trace.old { stroke: var(--steel-3); stroke-width: 1.4; }
.ro-lim { stroke: var(--react); stroke-width: 1.2; stroke-dasharray: 4 3; }
.ro-brk { stroke: var(--react); stroke-width: 1.6; fill: none; }
.ro-val { fill: var(--react); font-family: var(--font-display); font-size: 22px; font-weight: var(--weight-display); }
.ro-sweep { fill: var(--accent-wash); }
.ro-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.ro-ctl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 18px; }
.ro-ctl label { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--muted); }
.ro-ctl label span.v { font-family: var(--font-mono); color: var(--ink); font-size: 13px; }
.ro-ctl input[type=range] { width: 100%; accent-color: var(--accent); }
.ro-ctl label.off { opacity: 0.45; }
.pf { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; vertical-align: 3px; }
.pf.ok { background: var(--choice-wash); color: var(--choice); }
.pf.bad { background: var(--load-wash); color: var(--load); }

/* Diagram placeholders */
.ph-list { display: flex; flex-direction: column; gap: 12px; }
.ph { border: 1.5px dashed var(--steel-3); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 8px;
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, var(--steel) 11px 12px); }
.ph-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; justify-content: space-between; }
.ph-head h4 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: var(--weight-display); }
.ph-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--load); background: var(--sheet); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--load); }
.ph-box { min-height: 150px; display: grid; place-items: center; border-radius: 6px; background: var(--sheet); border: 1px solid var(--rule); color: var(--muted); font-size: 13px; text-align: center; padding: 12px; }
.ph-box img { max-width: 100%; max-height: 420px; border-radius: 4px; }
.ph p { margin: 0; font-size: 13.5px; color: var(--muted); max-width: 66ch; background: var(--sheet); }
.ph input[type=file] { font-size: 12.5px; color: var(--muted); max-width: 100%; }

/* Panel */
.panel { padding: 0; overflow: hidden; }
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.subtabs button { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--rule); background: var(--sheet); cursor: pointer; font-size: 13.5px; color: var(--ink); }
.subtabs button .c { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.subtabs button[aria-current="step"] { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.subtabs button[aria-current="step"] .c { color: var(--steel-2); }
.subtabs .dot, .steps .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 4px; vertical-align: 1px; }
.part { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.kicker { margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.part h2 { font-size: 27px; margin-top: -8px; }
.brief { border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
.brief summary { cursor: pointer; padding: 8px 12px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.brief .inner { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.say { border-left: 3px solid var(--ink); padding: 2px 0 2px 14px; }
.say .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.say p { margin: 2px 0 0; font-size: 17px; line-height: 1.5; max-width: 62ch; }
.brief .say p { font-size: 16px; }
.note { margin: 0; font-size: 14px; color: var(--muted); max-width: 66ch; }
.note b { color: var(--ink); font-weight: 600; }
.draft { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--load); border: 1px solid var(--load); border-radius: 4px; padding: 0 6px; margin-left: 6px; vertical-align: 2px; }
.part h3 { font-size: 19px; }
.sec { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--rule); padding-top: 14px; }
.sec-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; }
.count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.count b { color: var(--accent); font-weight: 500; }
.pts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pts label { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.pts label:hover { background: var(--paper); }
.pts input { margin: 3px 0 0; accent-color: var(--accent); width: 15px; height: 15px; }
.pts .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--rule); color: var(--muted); white-space: nowrap; margin-top: 2px; }
.pts .k.key { border-color: var(--accent); color: var(--accent); }
.pts .k.heavy { background: var(--accent); color: var(--sheet); border-color: var(--accent); }
.pts li.hit label { background: var(--accent-wash); }
.extra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.extra input { flex: 1 1 220px; min-width: 0; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); font-size: 14px; }
.xchips { display: flex; flex-wrap: wrap; gap: 6px; }
.xchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--accent-wash); font-size: 13px; }
.xchip button { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 0 6px; font-size: 15px; line-height: 1; }
.hints { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.hints b { font-weight: 600; }
.answer { border-left: 3px solid var(--choice); padding: 4px 0 4px 14px; font-size: 14.5px; max-width: 66ch; }
.answer .tag { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--choice); }
.givens { width: 100%; border-collapse: collapse; font-size: 14px; }
.givens th, .givens td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.givens th { font-weight: 500; color: var(--muted); width: 48%; }
.givens td { font-family: var(--font-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tablewrap { min-width: 0; }
.givens th, .givens td, .heat td.q, .heat th { overflow-wrap: anywhere; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.checklist label { display: flex; gap: 10px; align-items: start; cursor: pointer; }
.checklist input { margin-top: 4px; accent-color: var(--accent); }
.changes { margin: 0; padding-left: 20px; font-size: 14px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pick button { padding: 7px 16px; border-radius: 7px; border: 1px solid var(--rule); background: var(--paper); cursor: pointer; font-size: 14px; }
.pick button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.pick button.yes[aria-pressed="true"] { background: var(--choice); border-color: var(--choice); color: var(--sheet); }
.pick button.no[aria-pressed="true"] { background: var(--load); border-color: var(--load); color: var(--sheet); }

/* Scoring */
.score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 22px; align-items: start; }
@media (max-width: 560px) { .score { grid-template-columns: minmax(0, 1fr); } }
.sgrid-wrap { display: grid; grid-template-columns: 22px auto; grid-template-rows: auto 22px; gap: 4px; }
.yax { grid-row: 1; grid-column: 1; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.xax { grid-row: 2; grid-column: 2; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); align-self: center; }
.sgrid { grid-row: 1; grid-column: 2; display: grid; grid-template-columns: repeat(5, 34px); grid-template-rows: repeat(5, 34px); gap: 3px; }
.sgrid button { border: 1px solid var(--rule); background: var(--paper); border-radius: 4px; cursor: pointer; font-family: var(--font-mono); font-size: 10px; color: transparent; padding: 0; }
.sgrid button:hover { border-color: var(--accent); color: var(--muted); }
.sgrid button.row-on, .sgrid button.col-on { background: var(--accent-wash); }
.sgrid button.sug { border-color: var(--accent); border-style: dashed; }
.sgrid button.on { background: var(--accent); border-color: var(--accent); color: var(--sheet); font-weight: 500; font-size: 11px; }
.sread { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.sread b { font-family: var(--font-display); font-size: 22px; font-weight: var(--weight-display); margin-right: 2px; }
.anchors { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.anchors strong { color: var(--ink); font-weight: 600; }
.sside { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
textarea { width: 100%; min-height: 72px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); resize: vertical; font-size: 14px; }
.foot { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--rule); padding-top: 14px; }
.btn { padding: 7px 14px; border-radius: 7px; border: 1px solid var(--rule); background: var(--paper); cursor: pointer; font-size: 13.5px; }
.btn.primary { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.btn.danger { border-color: var(--load); color: var(--load); }
.btn.small { padding: 4px 10px; font-size: 12.5px; }
.btn:disabled { opacity: 0.4; cursor: default; }

/* Calculator */
.calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; }
.calc label { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--muted); }
.calc label span.v { font-family: var(--font-mono); color: var(--ink); font-size: 13px; }
.calc input[type=range] { width: 100%; accent-color: var(--accent); }
.calc-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.cell { border: 1px solid var(--rule); border-radius: 7px; padding: 8px 10px; background: var(--paper); }
.cell .n { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cell .val { font-family: var(--font-display); font-size: 22px; font-weight: var(--weight-display); font-variant-numeric: tabular-nums; }
.cell .val small { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 3px; }
.cell.ra .val, .cell.rb .val, .cell.fa .val { color: var(--react); }
.cell.w .val { color: var(--load); }
.formula { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); margin: 0; overflow-wrap: anywhere; }

/* Record */
.heat { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 13.5px; }
.heat th { font-weight: 500; color: var(--muted); font-size: 12px; text-align: left; padding: 4px 6px; }
.heat td { padding: 6px 8px; border-radius: 4px; vertical-align: middle; }
.heat td.q { background: var(--paper); }
.heat td.q .c { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-right: 6px; }
.heat td.v { width: 3.2em; text-align: center; font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-display); font-variant-numeric: tabular-nums; }
.heat td.p { font-family: var(--font-mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.hm-0 { background: var(--paper); color: var(--muted); }
.hm-1 { background: color-mix(in srgb, var(--load) 60%, var(--sheet)); }
.hm-2 { background: color-mix(in srgb, var(--load) 28%, var(--sheet)); }
.hm-3 { background: var(--steel); }
.hm-4 { background: color-mix(in srgb, var(--accent) 35%, var(--sheet)); }
.hm-5 { background: color-mix(in srgb, var(--accent) 75%, var(--sheet)); color: var(--sheet); }
.heat tr.avg td.q { background: transparent; font-weight: 600; }
.sanity { padding: 10px 14px; border-radius: 8px; background: var(--paper); font-size: 14px; }
.sanity.flag { background: var(--load-wash); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.status { font-size: 13px; color: var(--accent); }
#copyFallback { font-family: var(--font-mono); font-size: 12px; min-height: 150px; }

@media (prefers-reduced-motion: no-preference) { .steps button, .chip, .sgrid button, .subtabs button { transition: background-color .12s, border-color .12s, color .12s; } }

/* Shared editing, change log, comments, Claude's take */
.top-controls select { padding: 6px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); max-width: 52vw; font: inherit; font-size: 14px; }
.cand input { width: 180px; }
.btn.primary.iv { }
.editbar { background: var(--accent-wash); border-bottom: 1px solid var(--rule); }
.editbar .wrap { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding-block: 10px; font-size: 14px; }
.editbar b { color: var(--accent); }
.edbox { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px dashed var(--accent); border-radius: 8px; background: var(--paper); }
.edrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.edf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.edl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ed-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: start; }
.ed-item.two { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr) auto; }
@media (max-width: 560px) { .ed-item.two { grid-template-columns: minmax(0, 1fr) auto; } .ed-item.two textarea:nth-child(2) { grid-column: 1; } }
textarea.edt, .pt-ed textarea, .pt-ed input[type=text] { width: 100%; min-height: 0; padding: 7px 9px; border: 1px solid var(--rule); border-radius: 6px; background: var(--sheet); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.45; resize: vertical; }
textarea.edt:focus, .pt-ed textarea:focus { border-color: var(--accent); }
.xbtn { border: 1px solid var(--rule); background: var(--sheet); color: var(--muted); border-radius: 6px; width: 30px; height: 30px; cursor: pointer; font-size: 16px; line-height: 1; }
.xbtn:hover { color: var(--load); border-color: var(--load); }
.edbox .btn.small { align-self: flex-start; }
.pt-eds { display: flex; flex-direction: column; gap: 6px; }
.pt-ed { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px; align-items: center; padding: 6px; border-radius: 6px; background: var(--paper); }
.pt-ed.add { grid-template-columns: minmax(0, 1fr) auto auto; border: 1px dashed var(--rule); background: transparent; }
.pt-ed select, .wlab input, .top-controls select { font-size: 13.5px; }
.pt-ed select { padding: 5px 6px; border: 1px solid var(--rule); border-radius: 6px; background: var(--sheet); color: var(--ink); }
@media (max-width: 560px) { .pt-ed { grid-template-columns: minmax(0, 1fr) auto; } .pt-ed textarea { grid-column: 1 / -1; } }
.wlab { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.wlab input { width: 64px; padding: 5px 6px; border: 1px solid var(--rule); border-radius: 6px; background: var(--sheet); color: var(--ink); font-family: var(--font-mono); }
.proch { margin: 6px 0 0; font-family: var(--font-display); font-size: 16px; font-weight: var(--weight-display); }
.stamp { margin: 0; font-size: 12.5px; color: var(--muted); }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; text-align: left; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); z-index: 40; background: var(--sheet); border-left: 1px solid var(--rule); box-shadow: -10px 0 30px rgba(0,0,0,0.12); display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 14px) 16px; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.drawer-head h3 { font-size: 22px; }
#drawerFilter { margin: 10px 0; font-size: 13px; color: var(--muted); }
#drawerList { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; }
.chg { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--paper); }
.chg-h { font-size: 13px; color: var(--muted); }
.chg-h b { color: var(--ink); font-weight: 600; }
.chg-w { font-size: 13px; }
.chg-d { font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
.chg-d span:not(.del):not(.ins) { color: var(--muted); font-size: 12.5px; }
.del { color: var(--load); text-decoration: line-through; text-decoration-thickness: 1px; }
.ins { color: var(--choice); }
.mod .del { margin-right: 4px; }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; z-index: 60;
  background: var(--ink); color: var(--sheet); padding: 8px 14px; border-radius: 8px; font-size: 13.5px; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translateX(-50%); }
@media (prefers-reduced-motion: no-preference) { .toast { transition: opacity .2s, transform .2s; } }
body.cmode [data-anchor] { outline: 1px dashed var(--accent); outline-offset: 3px; cursor: copy; border-radius: 3px; }
body.cmode [data-anchor]:hover { background: var(--accent-wash); }
.cbadge { display: inline-block; margin-left: 6px; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--mark); color: var(--sheet); font-family: var(--font-mono); font-size: 10px; text-align: center; line-height: 16px; vertical-align: 1px; }
.take { border: 1px solid var(--rule); border-left: 3px solid var(--mark); border-radius: 8px; padding: 12px 16px; background: var(--paper); font-size: 14.5px; max-width: 72ch; }
.take h4 { margin: 12px 0 4px; font-family: var(--font-display); font-size: 17px; font-weight: var(--weight-display); color: var(--mark); }
.take h4:first-child { margin-top: 0; }
.take p { margin: 0 0 6px; }
.take ul { margin: 0 0 6px; padding-left: 20px; }
.baseline summary, .brief summary { cursor: pointer; }
.baseline summary { font-size: 13px; color: var(--accent); }
.baseline .inner { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.heat th[colspan] { text-align: center; }
#outcomeSel { padding: 6px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; max-width: 100%; align-self: flex-start; }
.sgrid button:disabled { cursor: not-allowed; opacity: 0.5; }
.pick button:disabled { opacity: 0.5; cursor: not-allowed; }

[hidden] { display: none !important; }

/* Process reference diagrams (interviewer only) */
.figtabs { gap: 6px; margin: 10px 0 8px; }
.figtabs button { padding: 5px 11px; font-size: 13px; }
.figbox { display: flex; justify-content: center; }
svg.fig { display: block; width: 100%; max-width: 560px; height: auto; }
.fg-tx { fill: var(--ink); font-family: var(--font-body); font-size: 10.5px; }
.fg-cap { fill: var(--muted); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; }
.fg-ld { stroke: var(--muted); stroke-width: 0.7; fill: none; }
.fg-dot { fill: var(--ink); }
.fg-st { fill: var(--steel); stroke: var(--steel-3); stroke-width: 1; stroke-linejoin: round; }
.fg-st.b { fill: var(--steel-2); }
.fg-tool { fill: var(--steel-3); stroke: var(--ink); stroke-width: 0.7; stroke-linejoin: round; }
.fg-pt { fill: var(--accent-wash); fill: color-mix(in srgb, var(--accent) 26%, var(--sheet)); stroke: var(--accent); stroke-width: 1.2; stroke-linejoin: round; }
.fg-void { fill: var(--sheet); stroke: var(--accent); stroke-width: 1.2; }
.fg-void.bad { stroke: var(--load); stroke-width: 1.8; }
.fg-cool { fill: var(--react); }
.fg-cl { stroke: var(--muted); stroke-width: 0.9; stroke-dasharray: 9 3 2 3; fill: none; }
.fg-hot { stroke: var(--load); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.fg-arr, .fg-dim { stroke: var(--ink); stroke-width: 1.1; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fg-fl { stroke: var(--sheet); stroke-width: 1; fill: none; }
.fg-sup { stroke: var(--steel-3); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.fg-lay { stroke: var(--accent); stroke-width: 0.6; opacity: 0.5; fill: none; }
.fg-fil { stroke: var(--accent); stroke-width: 2.4; fill: none; }
.fg-hatch { stroke: var(--accent); stroke-width: 1.4; opacity: 0.55; fill: none; }
.fg-inf { fill: url(#fgp-inf); stroke: none; }
.fg-per { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.fg-sheet { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linejoin: round; }
.figgloss { margin: 8px 0 0; max-width: 70ch; }
.presay.skip { opacity: 0.55; }

/* Notes handed from one interview to the next */
.handover { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--accent); border-left-width: 3px; border-radius: 8px; padding: 10px 14px; background: var(--accent-wash); }
.handover .note { white-space: pre-wrap; color: var(--ink); margin: 0; }
.handover-sec textarea { min-height: 88px; }

/* Interviewer chat, with a veto */
.chat { position: fixed; z-index: 35; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(72px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.chat > * { pointer-events: auto; }
.chat-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--sheet); color: var(--ink); cursor: pointer; font-family: var(--font-display); font-weight: var(--weight-display); font-size: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); max-width: min(320px, calc(100vw - 32px)); }
.chat-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat.open .chat-pill { display: none; }
.chat-badge { flex: none; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--sheet); font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 18px; text-align: center; }
.chat-panel { width: min(340px, calc(100vw - 32px)); max-height: min(470px, calc(100vh - 150px)); display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); overflow: hidden; }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--rule); }
.chat-head h3 { font-size: 18px; }
.chat-sub { margin: 0; font-size: 12px; color: var(--muted); }
.chat-vbar { padding: 7px 12px; font-size: 13.5px; font-weight: 600; background: var(--load-wash); color: var(--ink); border-bottom: 1px solid var(--load); }
.chat-list { flex: 1 1 auto; min-height: 96px; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-list .note { margin: 0; font-size: 13px; }
.cm { display: flex; flex-direction: column; gap: 1px; max-width: 88%; align-self: flex-start; }
.cm.me { align-self: flex-end; align-items: flex-end; }
.cm-h { font-size: 11px; color: var(--muted); }
.cm-t { padding: 6px 10px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.cm.me .cm-t { background: var(--accent-wash); border-color: transparent; }
.cm.sys .cm-t { background: var(--load); color: var(--on-load); border-color: var(--load); font-weight: 600; letter-spacing: 0.06em; }
.cm.sys.un .cm-t { background: none; color: var(--muted); border: 1px dashed var(--steel-3); font-weight: 400; letter-spacing: 0; }
.chat-form { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--rule); background: var(--sheet); }
.chat-form input { flex: 1 1 auto; min-width: 0; padding: 7px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); font-size: 14px; }
.chat-actions { display: flex; align-items: center; gap: 10px; padding: 0 12px 10px; background: var(--sheet); }
.chat-actions .note { font-size: 12px; margin: 0; }
.btn.veto { background: var(--load); border-color: var(--load); color: var(--on-load); font-weight: 600; letter-spacing: 0.08em; }
.chat.veto .chat-pill { background: var(--load); border-color: var(--load); color: var(--on-load); }
.chat.veto .chat-badge { background: var(--on-load); color: var(--load); }
.chat.veto .chat-panel { border: 2px solid var(--load); }
.chat.veto .chat-list { background: var(--load-wash); }
.chat.veto .chat-head { background: var(--load); color: var(--on-load); border-bottom-color: var(--load); }
.chat.veto .chat-sub { color: var(--on-load); opacity: 0.85; }
.chat.veto .chat-head .btn { background: transparent; color: var(--on-load); border-color: var(--on-load); }
.pc-out.o-veto { border-color: var(--load); background: var(--load); color: var(--on-load); }

/* Past candidates: filters and per-interview rows */
.pfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.pf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pfilters .pick { gap: 6px; }
.pfilters .pick button { padding: 4px 11px; font-size: 13px; }

/* Screens: home, past candidates, interview */
body:not([data-screen="interview"]) :is(.top-controls, .itabs, .editbar, .qwrap, .grid, .mbar) { display: none !important; }
.wrap.landing { max-width: 980px; padding-block: 28px 56px; display: flex; flex-direction: column; gap: 18px; }
.land-head { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.land-head h2 { font-size: clamp(26px, 3.4vw, 34px); }
/* Home has two layouts only: the three boxes in a row at one height, or stacked in a narrow window. */
.land-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (min-width: 760px) { .land-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.land-card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; min-width: 0; }
.land-btn { display: flex; flex-direction: column; gap: 6px; width: 100%; min-height: 128px; text-align: left; padding: 22px; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; }
.land-btn:hover { background: var(--accent-wash); }
.lb-t { font-family: var(--font-display); font-size: 27px; font-weight: var(--weight-display); line-height: 1.1; }
.lb-t::after { content: " →"; color: var(--accent); }
.lb-d { font-size: 14px; color: var(--muted); max-width: 40ch; }
.newform { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; }
.newform h3 { font-size: 25px; }
.newform input[type=text] { width: 100%; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); font-size: 16px; }
.newform .note:empty { display: none; }
.past-tools { display: flex; gap: 10px; align-items: center; }
.past-tools input { flex: 1 1 auto; min-width: 0; max-width: 360px; padding: 7px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--sheet); color: var(--ink); font: inherit; }
#pastList { display: flex; flex-direction: column; gap: 10px; }
.pc { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.pc-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.pc-name { border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); font-family: var(--font-display); font-size: 21px; font-weight: var(--weight-display); text-align: left; }
.pc-meta { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pc-del { font-size: 12.5px; color: var(--muted); }
.pc-del:hover { color: var(--load); }
.pc-delbox { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--load); border-radius: 7px; background: var(--load-wash); }
.pc-delbox .note { color: var(--ink); }
.pc-delbox .note:empty { display: none; }
.pc-delbox input { width: 110px; padding: 6px 9px; border: 1px solid var(--rule); border-radius: 6px; background: var(--sheet); color: var(--ink); font: inherit; }
.pc-name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.pc-round { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 12px; border: 1px solid var(--rule); border-radius: 7px; background: var(--paper); padding-right: 10px; }
.pc-round:hover { border-color: var(--accent); }
.pc-ropen { flex: 1 1 300px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; text-align: left; padding: 8px 0 8px 10px; border: 0; border-radius: 7px; background: none; color: var(--ink); cursor: pointer; font-size: 13.5px; }
.pc-rdel { padding: 4px 0; white-space: nowrap; }
.pc-rn { flex: 0 0 150px; font-weight: 600; display: flex; flex-direction: column; }
.pc-rn .c { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.pc-rows { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pc-s { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.pc-end { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pv { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 15px; padding: 0 7px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.pc-g { color: var(--muted); font-size: 12.5px; }
.pc-lean { font-size: 12.5px; color: var(--mark); }
.pc-out { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--rule); color: var(--muted); white-space: nowrap; }
.o-invited, .o-offered { border-color: var(--choice); color: var(--choice); background: var(--choice-wash); }
.o-rejected { border-color: var(--load); color: var(--load); background: var(--load-wash); }
.sc-sec { position: relative; display: flex; flex-direction: column; gap: 10px; }
.sc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; color: var(--ink); }
.sc-key { display: inline-flex; align-items: center; gap: 6px; }
.sc-how { color: var(--muted); flex: 1 1 100%; font-size: 12.5px; }
.sc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sc-card { min-width: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 10px 4px; }
.sc-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; padding: 0 2px 4px; }
.sc-h h3 { font-size: 18px; }
.sc-h h3 .c { font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.sc-card svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.sc-gl { stroke: var(--rule); stroke-width: 1; }
.sc-tx { fill: var(--muted); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; }
.sc-empty { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; }
.sdot .m { stroke: var(--sheet); stroke-width: 2; }
.sdot.good .m { fill: var(--dot-good); }
.sdot.bad .m { fill: var(--dot-bad); }
.sdot.none .m { fill: var(--sheet); stroke: var(--steel-3); }
.sdot.hot .m { stroke: var(--ink); stroke-width: 2.5; }
.sc-tip { position: absolute; z-index: 5; pointer-events: none; max-width: min(380px, 100%); background: var(--sheet); color: var(--ink); border: 1px solid var(--ink); border-radius: 8px; padding: 8px 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); font-size: 12.5px; display: flex; flex-direction: column; gap: 8px; }
.tip-b + .tip-b { border-top: 1px solid var(--rule); padding-top: 8px; }
.tip-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.tip-a { color: var(--muted); }
.tip-a b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tip-t { border-collapse: collapse; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tip-t th { font-weight: 500; color: var(--muted); font-size: 11.5px; text-align: center; padding: 1px 6px; }
.tip-t td { padding: 1px 6px; text-align: center; border-top: 1px solid var(--rule); }
.tip-t td:first-child { text-align: left; padding-left: 0; color: var(--muted); }
@media (max-width: 560px) { .sc-grid { grid-template-columns: minmax(0, 1fr); } }
.intro-sec textarea { min-height: 112px; }
.prevnotes { display: flex; flex-direction: column; gap: 6px; }
.prevnotes .note, .recnotes .note { white-space: pre-wrap; }
.clock.over .t, .mclock.over { color: var(--load); }
/* The clock floats in the corner so it stays in view while the script scrolls */
/* Spacing and box sizes: one set at every width, so nothing changes size as the window is dragged. */
.wrap.landing { padding-block: 16px 40px; gap: 14px; }
/* The admins' footer sits at the bottom of the window, or under the boxes when the page is longer. */
#home { min-height: calc(100dvh - 49px); }
.land-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.land-btn { min-height: 0; height: 100%; padding: 16px; }
.newform { padding: 14px 16px; }
@media (max-width: 560px) {
  .pc-rn { flex-basis: 100%; flex-direction: row; gap: 6px; align-items: baseline; }
}

/* Text sizes: one set at every width (these were once the narrow window's). */
.top-controls .btn { padding: 5px 10px; font-size: 12.5px; }
.seg a, .seg button { padding: 5px 10px; font-size: 12.5px; }
.warn { font-size: 13px; padding: 7px 10px; }
.part h2 { font-size: 22px; margin-top: -6px; }
.say p, .brief .say p { font-size: 15.5px; }
.note { font-size: 13.5px; }
.subtabs button { font-size: 12.5px; padding: 4px 9px; }
.pts label { padding: 6px 4px; gap: 8px; font-size: 13.5px; }
.pts .k { font-size: 9.5px; padding: 1px 4px; }
.anchors { font-size: 12px; }
.take { padding: 10px 12px; font-size: 14px; }
.lb-t { font-size: 23px; }
.mbar .btn.fin { padding: 7px 12px; font-size: 14px; }
.heat { font-size: 12.5px; }
.heat td.v { font-size: 16px; }
.editbar .wrap { font-size: 13px; }

/* Side panel: a narrow window beside a video call (about a third to a quarter of a laptop screen) */

/* The show/hide bar on every diagram, at any screen size. Hidden, the diagram's card is a single bar above the panel. */
.vis-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 8px; border: 0; background: none; padding: 2px 0; color: var(--ink); cursor: pointer; font-family: var(--font-display); font-size: 16px; font-weight: var(--weight-display); text-align: left; }
.vis-card:not(.collapsed) .vis-toggle { margin-bottom: 8px; }
.vis-card.collapsed > .vis { display: none !important; }
.grid.vis-collapsed { grid-template-columns: minmax(0, 1fr); max-width: 920px; }
.grid.vis-collapsed .vis-card { position: static; }
.top-controls { gap: 6px 8px; }
.grid { gap: 10px; }
.vis-card { padding: 10px 12px; }
.part { padding: 14px 14px 18px; gap: 12px; }
.say { padding-left: 10px; }
.subtabs { padding: 8px 10px; gap: 4px; }
.score { gap: 10px; }
.sgrid { grid-template-columns: repeat(5, 32px); grid-template-rows: repeat(5, 32px); }
.heat { border-spacing: 2px; }
.heat td.v { width: auto; padding: 4px 2px; }
.heat td.q { padding: 5px 6px; }
.editbar .wrap { padding-block: 8px; }
.edbox { padding: 10px; }
.figtabs button { padding: 4px 9px; font-size: 12.5px; }
/* What is left for a narrow window is layout only: things that go full width or stack. */
@media (max-width: 560px) {
  .chat { left: 8px; right: 8px; align-items: stretch; }
  .chat-panel { width: auto; max-height: min(62vh, 440px); }
  .figbox { margin-inline: -8px; }
}

/* New interview form: picking who is interviewing with you */
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.chk input { accent-color: var(--accent); }

/* Drop-downs for picking co-interviewers */
#newIntSel, #addInterviewerSel { display: block; width: 100%; max-width: 360px; padding: 7px 10px; border: 1px solid var(--rule); border-radius: 7px; background: var(--paper); color: var(--ink); font: inherit; }
.newform .xchips, .sec .xchips { margin-bottom: 8px; }

/* Home: interviews in progress */
.land-card.resume { margin-bottom: 16px; padding: 16px; }
.land-card.resume h3 { font-size: 22px; }
.resume-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.resume-list li { display: flex; align-items: center; gap: 12px; }
.resume-what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }

/* The script editor: its own screens, marked so they can't be taken for a candidate's interview. */
body[data-mode="script"] .top { box-shadow: inset 0 3px 0 var(--accent); }
body[data-mode="script"] :is(.clock, .mclock, .chat) { display: none !important; }
.editbar-actions { display: inline-flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-left: auto; }
.land-card.script-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.land-card.script-card h3 { font-size: 22px; }

/* The bottom bar: one row at every width. Back, where you are, chat, the clock, forward.
   Narrow, it is arrows, an icon and the time. Wide, the arrows name where they lead, the chat
   button has its title, and the clock has its Start, Pause and Reset buttons. */
.mbar { display: flex; flex-wrap: nowrap; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; align-items: center; gap: 8px; background: var(--sheet); border-top: 1px solid var(--rule); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.mbar .btn { flex: none; min-width: 46px; padding: 7px 10px; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mbar .mlabel { display: none; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26ch; }
.mbar .btn.fin .mlabel { display: inline; }
.mbar .btn.fin { padding: 7px 12px; font-size: 14px; }
.mwhere { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-weight: var(--weight-display); font-size: 15.5px; }
.mclock { flex: none; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); cursor: pointer; padding: 5px 8px; font-family: var(--font-display); font-weight: var(--weight-display); font-size: 16px; font-variant-numeric: tabular-nums; }
.mclock.on { border-color: var(--load); color: var(--load); }
.mchat { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 32px; padding: 0 8px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.mchat .mlabel { font-weight: 400; letter-spacing: 0; }
.mchat.veto { background: var(--load); border-color: var(--load); color: var(--on-load); }
.mchat .chat-badge { position: absolute; top: -8px; right: -8px; }
.mbar .clock { display: none; flex: none; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
.mbar .clock .t { font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-display); font-variant-numeric: tabular-nums; min-width: 3.4ch; }
.mbar .clock .btn { min-width: 0; padding: 5px 9px; font-size: 13px; }
.mbar .clock.on { border-color: var(--accent); }
.mbar .clock.over { border-color: var(--load); }
.foot { display: none; }          /* the bottom bar does this job at every width */
.chat-pill { display: none; }     /* the chat opens from the bottom bar */
.chat { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
.grid { padding-block-end: 88px; }
.toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); }
/* The chat title and the clock's buttons need little room, so they come first. */
@media (min-width: 540px) {
  .mbar .mchat .mlabel { display: inline; }
  .mbar .mclock { display: none; }
  .mbar .clock { display: flex; }
}
/* The arrows' names need more. */
@media (min-width: 860px) {
  .mbar .mlabel { display: inline; }
  .mbar #mPrev, .mbar #mNext { flex: 0 1 auto; min-width: 0; }
}