@import url("tokens.css");

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: var(--az-type-body); color: var(--az-ink); background: var(--az-surface); min-height: var(--vh, 100vh); }
a { color: var(--az-cyann-blue); }
h1, h2, h3 { margin: 0 0 var(--az-space-md); }
h1 { font: var(--az-type-h1); letter-spacing: var(--az-tracking-h1); }
h2 { font: var(--az-type-h2); letter-spacing: var(--az-tracking-h2); }
h3 { font: var(--az-type-h3); }
p { margin: 0 0 var(--az-space-md); }
.muted { color: var(--az-muted); }
.small { font: var(--az-type-small); }
.pay { color: var(--az-violet); }
.eyebrow { font: var(--az-type-eyebrow); letter-spacing: var(--az-tracking-eyebrow); text-transform: uppercase; color: var(--az-violet); margin-bottom: var(--az-space-sm); }
.hidden { display: none !important; }
.grow { flex: 1; min-width: 0; }
main.narrow { max-width: 760px; margin: 48px auto; padding: 0 16px; }
ul.links li { margin: 8px 0; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* header */
.bar { background: var(--az-midnight-purple); color: #fff; display: flex; align-items: center; gap: 16px; padding: 12px 24px; min-height: 64px; position: sticky; top: 0; z-index: 5; }
.bar img { height: 36px; display: block; }
.bar .role { color: #D9D5EA; font: var(--az-type-small); border-left: 1px solid #3B3752; padding-left: 16px; }
.bar .spacer { flex: 1; }
.rec { display: inline-flex; align-items: center; gap: 8px; color: #fff; font: 600 14px/1 var(--az-font); padding: 8px 14px; border-radius: 999px;
  background: rgba(255,45,154,.14); border: 1px solid rgba(255,45,154,.5); }
.rec i { width: 10px; height: 10px; border-radius: 50%; background: var(--az-electric-pink); animation: pulse 1.6s ease-in-out infinite; }
/* on the candidate's own video while it is being recorded (above the mic-paused cover) */
.recbadge { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: rgba(15,11,30,.75); color: #fff; font: 700 12px/1 var(--az-font); letter-spacing: 1.5px; }
.recbadge i { width: 10px; height: 10px; border-radius: 50%; background: var(--az-electric-pink); box-shadow: 0 0 0 3px rgba(255,45,154,.3);
  animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.timer { font: 600 18px/1 var(--az-font); font-variant-numeric: tabular-nums; padding: 9px 16px; border-radius: 999px; background: var(--az-deep-plum); border: 1px solid #3B3752; color: #fff; }
.timer.low { background: #8A4B00; border-color: #8A4B00; }

/* cards, buttons, chips */
.card { background: var(--az-white); border: 1px solid var(--az-line); border-radius: var(--az-radius-lg); padding: 32px; }
.card.center { text-align: center; }
.wrap { max-width: 1040px; margin: 32px auto 56px; padding: 0 16px; }
.narrowcard { max-width: 640px; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: var(--az-radius-chip); padding: 14px 28px;
  background: var(--az-cyann-blue); color: #fff; font: 600 15px/1 var(--az-font); cursor: pointer; text-decoration: none; transition: background .15s; }
.btn:hover:not(:disabled) { background: var(--az-indigo-blue); }
.btn:disabled { background: var(--az-subtle); cursor: not-allowed; }
.ghost { display: inline-flex; align-items: center; gap: 8px; background: var(--az-white); color: var(--az-slate); border: 1px solid var(--az-line); border-radius: var(--az-radius-chip);
  padding: 11px 20px; font: 500 14px/1 var(--az-font); cursor: pointer; transition: border-color .15s, background .15s; }
.ghost:hover:not(:disabled) { border-color: var(--az-violet); color: var(--az-violet); }
.ghost:disabled { opacity: .45; cursor: not-allowed; }
.ghost.danger:hover { border-color: #8A4B00; color: #8A4B00; background: #FFF1E0; }
.link { background: none; border: 0; padding: 8px 4px; color: var(--az-cyann-blue); font: 500 14px/1.4 var(--az-font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.btn:focus-visible, .ghost:focus-visible, .link:focus-visible, input:focus-visible, textarea:focus-visible, .choice label:focus-within { outline: none; box-shadow: var(--az-focus); }
.bar .ghost { background: transparent; color: #D9D5EA; border-color: #3B3752; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.chip svg { width: 14px; height: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--az-radius-chip); padding: 6px 14px; font: 500 13px/1.2 var(--az-font); background: var(--az-lavender); color: var(--az-violet); }
.chip.tech { background: #E5EFFF; color: #0B5BD3; }
.chip.warn { background: #FFF1E0; color: #8A4B00; }
.chip.ok { background: #E3F7F3; color: #0B6B5C; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; margin-top: 8px; }
.tile { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--az-radius-icon-tile); background: var(--az-gradient-icon-tile); color: #fff; flex: 0 0 auto; }
.tile svg { width: 24px; height: 24px; }
.tile.big { width: 72px; height: 72px; margin-bottom: 20px; }
.tile.big svg { width: 34px; height: 34px; }

/* stepper */
.stepper { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 20px; flex-wrap: wrap; }
.stepper li { display: flex; align-items: center; gap: 10px; font: 500 14px/1 var(--az-font); color: var(--az-muted); }
.stepper li + li::before { content: ""; width: 32px; height: 1px; background: var(--az-line); margin-right: 2px; }
.stepper b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--az-line); background: var(--az-white); font: 600 13px/1 var(--az-font); }
.stepper b svg { width: 14px; height: 14px; }
.stepper .now { color: var(--az-ink); }
.stepper .now b { background: var(--az-violet); border-color: var(--az-violet); color: #fff; }
.stepper .done b { background: #E3F7F3; border-color: #E3F7F3; color: #0B6B5C; }

/* welcome / consent */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.summary { background: var(--az-gradient-night); color: #fff; border-radius: var(--az-radius-lg); padding: 28px; position: sticky; top: 88px; }
.summary .eyebrow { color: var(--az-teal-accent); }
.summary .small { color: #C9C5DA; margin: 20px 0 0; }
.summary .rolename { font: 600 18px/1.35 var(--az-font); margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid #3B3752; }
.facts { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 14px; }
.facts li { display: flex; align-items: center; gap: 12px; font: 500 15px/1.3 var(--az-font); }
.facts svg { color: var(--az-teal-accent); }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; font: var(--az-type-small); }
.steps li { counter-increment: s; display: flex; gap: 14px; align-items: flex-start; }
.steps li::before { content: counter(s); flex: 0 0 32px; height: 32px; border-radius: 22.5%; background: var(--az-gradient-icon-tile);
  color: #fff; font: 600 14px/32px var(--az-font); text-align: center; }
.consent { display: grid; gap: 4px; margin: 0 0 24px; padding: 8px; background: var(--az-surface); border-radius: var(--az-radius-md); }
.consent label { display: flex; gap: 12px; align-items: flex-start; font: var(--az-type-small); cursor: pointer; padding: 12px; border-radius: 12px; }
.consent label:hover { background: var(--az-white); }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--az-violet); flex: 0 0 auto; }

/* device check: camera on the left, microphone / sound / headphones on the right */
.checks { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.panel { border: 1px solid var(--az-line); border-radius: var(--az-radius-lg); padding: 20px; background: var(--az-white); min-width: 0; }
.panel p { margin-bottom: 12px; }
.ph { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ph h3 { margin: 0; }
.tile.sm { width: 36px; height: 36px; }
.tile.sm svg { width: 18px; height: 18px; }
.devsel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; max-width: 440px; margin: 4px 0 12px; font: 500 13px/1.3 var(--az-font); color: var(--az-muted); }
/* width 100% + min-width 0: a long device name ("Microphone Array (Intel® Smart Sound…)") must not widen the card */
.devsel select { width: 100%; min-width: 0; text-overflow: ellipsis; padding: 10px 12px; border: 1px solid var(--az-line); border-radius: var(--az-radius-md); background: var(--az-white);
  color: var(--az-ink); font: var(--az-type-small); cursor: pointer; }
.devsel select:focus-visible { outline: none; box-shadow: var(--az-focus); }
.meter { position: relative; height: 12px; border-radius: 999px; background: var(--az-line); overflow: hidden; margin: 8px 0 12px; }
.meter > i { display: block; height: 100%; width: 0; background: var(--az-violet); transition: width .08s; }
.meter > .mark { position: absolute; top: 0; bottom: 0; left: 25%; width: 2px; background: var(--az-ink); }
.meter.ok > i { background: #0B6B5C; }
.choice { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
.choice label { position: relative; border: 1px solid var(--az-line); border-radius: var(--az-radius-md); padding: 16px 16px 16px 44px; cursor: pointer; display: grid; gap: 4px; transition: border-color .15s; }
.choice label:has(input:checked) { border-color: var(--az-violet); background: var(--az-lavender); }
.choice input { position: absolute; left: 16px; top: 18px; accent-color: var(--az-violet); }
.choice b { font: 600 15px/1.3 var(--az-font); }
.choice span { font: var(--az-type-small); color: var(--az-muted); }
/* Every step of the candidate page (.fitpage) fills the window under the header: no scroll, and no empty band below. The page is one design
   size zoomed to the window (fit script in interview.html), so this only has to fill the design-size window: the
   camera preview takes the spare height, the panels on the right share the rest. Heading and steps on one line,
   each panel's hint beside its title, sound and headphones in one panel. Phones get one scrolling column. */
.fitpage { display: flex; flex-direction: column; height: calc(var(--vh, 100vh) - 64px); min-height: 540px;
  max-width: clamp(1040px, calc((var(--vh, 100vh) - 64px) * 1.75), 1640px); margin: 0 auto; padding: 14px 24px; }
.check-head { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-bottom: 12px; }
.check-head h2 { margin: 0; font-size: 28px; letter-spacing: -0.3px; }
.check-head .stepper { margin: 0; }
#vCheck .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 16px; }
#vCheck .checks { flex: 1 1 auto; min-height: 0; align-items: stretch; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); }
#vCheck .checks, #vCheck .stack { gap: 12px; }
#vCheck .checks > .panel, #vCheck .stack > .panel { display: flex; flex-direction: column; min-height: 0; }
#vCheck .stack { display: flex; flex-direction: column; min-height: 0; }
#vCheck .stack > .panel { flex: 0 0 auto; }
#vCheck .start-row { margin-top: auto; display: grid; gap: 8px; padding-top: 4px; }
#vCheck .start-row .btn { justify-content: center; width: 100%; }
#vCheck .panel .ghost#micRetry { margin-top: 10px; }
#vCheck .panel { padding: 16px; }
#vCheck .ph { flex: 0 0 auto; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
#vCheck .ph h3 { font: 600 16px/1.3 var(--az-font); }
#vCheck .ph p { margin: 1px 0 0; font-size: 13px; line-height: 1.4; }
#vCheck .tile.sm { width: 32px; height: 32px; }
#vCheck .cam { flex: 1 1 auto; min-height: 150px; height: auto; aspect-ratio: auto; margin-bottom: 10px; }
#vCheck .ghost { padding: 9px 16px; }
#vCheck .devsel { max-width: none; margin: 0 0 10px; }
#vCheck .devsel select { padding: 10px; }
#vCheck .meter { height: 12px; margin: 4px 0 10px; }
#vCheck .panel p.small:not(.muted) { margin: 0; }
.sound-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.sound-row .devsel { flex: 1; min-width: 0; margin: 0 !important; }
.sound-row .ghost { flex: 0 0 auto; }
#vCheck .choice { grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
#vCheck .choice label { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
#vCheck .choice .ico { color: var(--az-violet); }
#vCheck .choice .ico svg { width: 26px; height: 26px; }
#vCheck .choice .opt { display: flex; align-items: center; gap: 8px; }
#vCheck .choice input { position: static; margin: 0; }
#vCheck .choice b { font-size: 14px; white-space: nowrap; }
#vCheck .choice span { font-size: 12.5px; line-height: 1.4; }


/* interview room */
.room { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; max-width: 1240px; margin: 24px auto; padding: 0 16px; }
.stage { display: grid; gap: 20px; align-content: start; }
/* two video-call tiles: the interviewer and you */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vtile { position: relative; aspect-ratio: 16 / 10; border-radius: var(--az-radius-xl); overflow: hidden; background: var(--az-midnight-purple); }
.vtile .label { position: absolute; left: 14px; bottom: 12px; font: 600 13px/1 var(--az-font); color: #fff; background: rgba(15,11,30,.65); padding: 7px 12px; border-radius: 999px; }
.vtile.ai { display: grid; place-content: center; justify-items: center; gap: 4px; padding: 24px 24px 48px; text-align: center; color: #fff;
  background: radial-gradient(circle at 50% 38%, rgba(90,46,214,.5), transparent 55%), var(--az-gradient-night); }
.vtile.ai .orb { margin-bottom: 14px; }
.vtile.ai .state { font: var(--az-type-h3); }
.vtile.ai .hint { font: var(--az-type-small); color: #C9C5DA; }
.vtile.you video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.vtile.you .mic { position: absolute; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(15,11,30,.65); border: 0; }
.controls { justify-content: space-between; }
.orb { width: 96px; height: 96px; border-radius: 50%; flex: 0 0 auto; position: relative;
  background: radial-gradient(circle at 35% 30%, #8B6BF0, var(--az-violet) 55%, var(--az-royal-purple)); box-shadow: 0 0 40px rgba(90,46,214,.55); }
.orb::before, .orb::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(201,184,255,.45); opacity: 0; }
.orb.speaking::before { animation: ring 1.4s ease-out infinite; }
.orb.speaking::after { animation: ring 1.4s ease-out .7s infinite; }
.orb.listening { background: radial-gradient(circle at 35% 30%, #6FE3E3, #0D6EFA 60%, var(--az-indigo-blue)); box-shadow: 0 0 40px rgba(0,200,200,.4); }
.orb.thinking { animation: breathe 1.2s ease-in-out infinite; }
@keyframes ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
@keyframes breathe { 50% { transform: scale(.94); } }
.mic { display: grid; justify-items: center; gap: 6px; padding: 12px 16px; border-radius: var(--az-radius-md); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--az-teal-accent); }
.mic em { font: 500 12px/1 var(--az-font); font-style: normal; color: #C9C5DA; }
.mic.paused { color: var(--az-subtle); }
/* the candidate's mic, impossible to miss: paused = self-view dimmed with a big mic-off badge; your turn = a teal ring
   and a teal chip; on (headphones, while the interviewer talks) = as before */
.vtile.you::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.vtile.you.turn::after { box-shadow: inset 0 0 0 4px var(--az-teal-accent); animation: turn-in .5s ease-out; }
.vtile.you video { transition: filter .15s; }
.vtile.you.paused video { filter: brightness(.3) saturate(.4); }
.mic-cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 16px 16px 44px;
  text-align: center; color: #fff; opacity: 0; transition: opacity .15s; pointer-events: none; }
.vtile.you.paused .mic-cover { opacity: 1; }
.mic-cover .off { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; margin-bottom: 8px;
  background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.4); }
.mic-cover .off svg { width: 28px; height: 28px; }
.mic-cover b { font: 600 20px/1.2 var(--az-font); }
.mic-cover span:last-child { font: var(--az-type-small); color: #D9D5EA; }
.vtile.you .mic.paused { background: var(--az-midnight-purple); color: #fff; }
.vtile.you .mic.paused em { color: #fff; }
.vtile.you .mic.turn { background: var(--az-teal-accent); color: var(--az-midnight-purple); }
.vtile.you .mic.turn em { color: var(--az-midnight-purple); font-weight: 600; }
.vtile.you .mic.turn .bars i { background: rgba(15,11,30,.22); }
.vtile.you .mic.turn .bars i.on { background: var(--az-midnight-purple); }
.micpill { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--az-radius-chip);
  font: 600 14px/1.2 var(--az-font); background: var(--az-lavender); color: var(--az-violet); transition: background .15s, color .15s; }
.micpill svg { width: 18px; height: 18px; }
.micpill.paused { background: var(--az-midnight-purple); color: #fff; }
.micpill.turn { background: var(--az-teal-accent); color: var(--az-midnight-purple); animation: turn-pop .5s ease-out; }
@keyframes turn-in { from { box-shadow: inset 0 0 0 14px rgba(0,200,200,.55); } }
@keyframes turn-pop { 40% { transform: scale(1.06); } }
/* camera: preview and photo on the device check, a small self-view in the room (mirrored, like a mirror) */
.cam { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--az-radius-md); overflow: hidden; background: var(--az-ink, #0F0B1E); margin-bottom: 12px; }
.cam video, .cam img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the preview is mirrored (as people expect to see themselves); the photo is shown mirrored the same way so it
   doesn't seem to flip. The stored photo is the true, unmirrored image (what the reviewer sees). */
.cam video, .cam img { transform: scaleX(-1); }
.media { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin: 12px 0; }
.media img { width: 160px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--az-radius-md); border: 1px solid var(--az-line); }
.media video { flex: 1; min-width: 260px; max-width: 640px; border-radius: var(--az-radius-md); background: #000; }
.bars { display: flex; gap: 3px; align-items: flex-end; height: 18px; }
.bars i { width: 4px; border-radius: 2px; background: rgba(255,255,255,.18); }
.bars i:nth-child(1) { height: 6px; } .bars i:nth-child(2) { height: 10px; } .bars i:nth-child(3) { height: 14px; }
.bars i:nth-child(4) { height: 16px; } .bars i:nth-child(5) { height: 18px; }
.bars i.on { background: var(--az-teal-accent); }
.qcard { background: var(--az-white); border: 1px solid var(--az-line); border-radius: var(--az-radius-xl); padding: 36px; min-height: 240px; display: flex; flex-direction: column; }
.qcard .qtext { font: 600 26px/1.4 var(--az-font); margin: 12px 0 0; flex: 1; min-height: 0; overflow: auto; }
.qcard .qtext.long { font-size: 21px; }
.progress { display: flex; gap: 6px; margin-top: 28px; }
.progress i { flex: 1; height: 6px; border-radius: 999px; background: var(--az-line); }
.progress i.done { background: var(--az-violet); }
.progress i.now { background: var(--az-cyann-blue); }
.banner { border-radius: var(--az-radius-md); padding: 14px 18px; font: var(--az-type-small); background: var(--az-lavender); color: var(--az-slate); }
.banner.warn { background: #FFF1E0; color: #6B3A00; }
/* covers the interview while the candidate is out of full screen (the conversation keeps going underneath) */
.fs-cover { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgba(15, 11, 30, .92); }
.fs-cover.hidden { display: none; }
.fs-box { background: var(--az-white); border-radius: var(--az-radius-lg); padding: 28px; max-width: 460px; text-align: center; }
.fs-box h3 { margin: 0 0 10px; }
.fs-box p { margin: 0 0 16px; color: var(--az-slate); }
.fs-count { color: #6B3A00; font-weight: 600; }
.fs-count:empty { display: none; }
.fs-actions { justify-content: center; gap: 10px; }
.captions { background: var(--az-white); border: 1px solid var(--az-line); border-radius: var(--az-radius-lg); display: flex; flex-direction: column; height: calc(var(--vh, 100vh) - 112px); min-height: 420px; position: sticky; top: 88px; }
.captions h3 { display: flex; align-items: center; gap: 10px; padding: 20px 20px 14px; margin: 0; font-size: 16px; border-bottom: 1px solid var(--az-line); }
.captions h3 svg { color: var(--az-violet); }
.captions .log:empty::before { content: "Captions appear here."; color: var(--az-subtle); font: var(--az-type-small); }
.captions .log { overflow-y: auto; padding: 16px 20px 20px; display: grid; gap: 10px; align-content: start; flex: 1; }
.line { font: var(--az-type-small); padding: 10px 14px; border-radius: 14px; max-width: 92%; }
.line b { display: block; font-size: 12px; color: var(--az-muted); font-weight: 600; margin-bottom: 2px; }
.line.ai { background: var(--az-lavender); border-top-left-radius: 4px; }
.line.you { background: var(--az-surface); border: 1px solid var(--az-line); justify-self: end; border-top-right-radius: 4px; }
.line.live span::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: text-bottom; background: var(--az-violet); animation: pulse 1s steps(1) infinite; }

/* note */
textarea { width: 100%; min-height: 180px; border: 1px solid var(--az-line); border-radius: var(--az-radius-md); padding: 14px; font: var(--az-type-body); resize: vertical; }

/* review */
.review { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; max-width: 1280px; margin: 24px auto; padding: 0 16px; }
.slist { display: grid; gap: 8px; align-content: start; }
.sitem { text-align: left; background: var(--az-white); border: 1px solid var(--az-line); border-radius: var(--az-radius-md); padding: 14px; cursor: pointer; font: var(--az-type-small); }
.sitem.on { border-color: var(--az-violet); box-shadow: 0 0 0 1px var(--az-violet); }
.sitem b { display: block; font-size: 15px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 24px; }
.kpi { background: var(--az-white); border: 1px solid var(--az-line); border-radius: var(--az-radius-md); padding: 16px; }
.kpi .v { font: 700 28px/1.1 var(--az-font); }
.kpi .l { font: var(--az-type-small); color: var(--az-muted); }
.qa { border-top: 1px solid var(--az-line); padding: 18px 0; display: grid; gap: 8px; }
.qa .q { font-weight: 600; }
.qa .lf { font: var(--az-type-small); color: var(--az-muted); }
.qa .ans { font: var(--az-type-small); background: var(--az-surface); border-radius: 12px; padding: 12px 14px; }
.score { font: 700 15px/1 var(--az-font); color: var(--az-violet); }
.sig { display: flex; gap: 12px; font: var(--az-type-small); padding: 8px 0; border-bottom: 1px solid var(--az-line); }
.sig time { color: var(--az-muted); flex: 0 0 76px; }
section.card + section.card { margin-top: 24px; }

/* the welcome step: compact (nearly one screen on a laptop), and instructions 1-6 come in one after another, then each
   number lights up softly once, so people read them. Subtle on purpose; off with reduced motion (rule at the end). */
#vWelcome .stepper { margin-bottom: 14px; }
#vWelcome .card { padding: 24px 28px; }
#vWelcome h1 { font-size: 36px; margin-bottom: 14px; }
#vWelcome h3 { font: 600 18px/1.3 var(--az-font); margin-bottom: 10px; }
#vWelcome .steps { gap: 10px 20px; margin-bottom: 18px; }
#vWelcome .steps li { gap: 12px; animation: step-in .6s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--i) * 120ms + 150ms); }
#vWelcome .steps li::before { flex: 0 0 26px; height: 26px; font-size: 13px; line-height: 26px;
  animation: step-glow 1.6s ease-in-out both; animation-delay: calc(var(--i) * 700ms + 1.2s); }
.steps li:nth-child(1) { --i: 0; } .steps li:nth-child(2) { --i: 1; } .steps li:nth-child(3) { --i: 2; }
.steps li:nth-child(4) { --i: 3; } .steps li:nth-child(5) { --i: 4; } .steps li:nth-child(6) { --i: 5; }
/* "Your room.": a night panel, like the interview summary, so it stands apart from the instructions */
.room-box { background: var(--az-gradient-night); color: #C9C5DA; border-radius: var(--az-radius-md); padding: 18px 20px 20px;
  margin: 0 0 18px; animation: step-in .6s cubic-bezier(.2, .7, .3, 1) both; animation-delay: 850ms; }
.room-box .eyebrow { color: var(--az-teal-accent); margin-bottom: 4px; }
#vWelcome .room-box h3 { color: #fff; margin-bottom: 12px; }
.rules { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rules li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12); font: var(--az-type-small); animation: step-in .6s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 120ms + 1s); }
.rules li b { color: #fff; }
.rules li:nth-child(2) { --i: 1; } .rules li:nth-child(3) { --i: 2; }
.rules .ico { flex: 0 0 34px; height: 34px; border-radius: 22.5%; background: var(--az-gradient-icon-tile); display: grid; place-items: center; }
.rules .ico svg { width: 18px; height: 18px; color: #fff; }
#vWelcome .consent { margin-bottom: 18px; padding: 6px; gap: 0; }
#vWelcome .consent label { padding: 8px 10px; }
/* the welcome step on one screen: how it works and the room on the left; the interview and the consents on the
   right, Continue at the bottom of the consents */
#vWelcome .check-head .stepper { margin: 0; }
#vWelcome .check-head .eyebrow { margin-bottom: 4px; }
#vWelcome .check-head h1 { font-size: 32px; margin: 0; }
.welcome-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(460px, 1fr); gap: 12px; }
#vWelcome .how { display: flex; flex-direction: column; min-height: 0; padding: 20px 24px; }
#vWelcome .how .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin: 4px 0 16px; font-size: 15px; line-height: 1.5; }
#vWelcome .how .room-box { margin: auto 0 0; }   /* level with the foot of the consents */
.welcome-grid .side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
#vWelcome .summary { position: static; padding: 16px 22px; }
#vWelcome .summary .rolename { font-size: 17px; margin: 0 0 12px; padding-bottom: 12px; }
#vWelcome .facts { grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0; }
#vWelcome .facts li { font-size: 14px; }
#vWelcome .summary .small { margin: 12px 0 0; }
#vWelcome .agree { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 18px 20px; }
#vWelcome .agree .consent { margin: 0 0 14px; }
#vWelcome .agree .consent label { padding: 7px 10px; font-size: 15px; line-height: 1.45; }
#vWelcome .agree .row { margin-top: auto; }
/* the interview room fills the window too: the video tiles and the question card share the height, the captions
   run the full height */
#vRoom { height: calc(var(--vh, 100vh) - 64px); min-height: 560px; grid-template-rows: minmax(0, 1fr); margin: 0 auto; padding: 20px 16px; }
#vRoom .stage { display: flex; flex-direction: column; min-height: 0; }
#vRoom .tiles { flex: 1 1 0; min-height: 200px; grid-template-rows: minmax(0, 1fr); }
#vRoom .vtile { aspect-ratio: auto; }
#vRoom .qcard { flex: 1 1 0; min-height: 200px; overflow: hidden; }
#vRoom .captions { height: auto; min-height: 0; position: static; }
/* the written note fills the window (the box grows); the last page sits in the middle of it */
#vNote .card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#vNote textarea { flex: 1 1 auto; min-height: 120px; resize: none; }
#doneTitle .pay { display: block; }
#vDone { min-height: calc(var(--vh, 100vh) - 64px); display: flex; flex-direction: column; justify-content: center; margin: 0 auto; padding: 24px 16px; }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes step-glow { 40% { box-shadow: 0 0 0 5px rgba(90, 46, 214, .14); transform: scale(1.04); } }

@media (max-width: 900px) {
  .room, .review, .split, .checks, .steps { grid-template-columns: minmax(0, 1fr); }
  .vtile.ai { padding: 12px 12px 36px; gap: 2px; }
  .vtile.ai .hint { display: none; }
  .vtile.ai .orb { width: 48px; height: 48px; margin-bottom: 8px; }
  .vtile.ai .state { font: 600 14px/1.3 var(--az-font); }
  .vtile .label { font-size: 12px; left: 10px; bottom: 8px; }
  .stage, .stage > * { min-width: 0; }
  .bar { padding: 10px 16px; gap: 12px; }
  .bar img { height: 30px; }
  .rec { font-size: 0; gap: 0; padding: 8px; }
  .recbadge { left: 8px; top: 8px; padding: 4px 8px; font-size: 10px; }
  .orb { width: 64px; height: 64px; }
  .qcard { padding: 24px; min-height: 0; }
  .mic { margin-left: auto; }
  /* a small tile: the mic-off badge only (the chip under it says "Mic paused") */
  .mic-cover { padding: 8px 8px 40px; }
  .mic-cover .off { width: 40px; height: 40px; margin: 0; }
  .mic-cover .off svg { width: 20px; height: 20px; }
  .mic-cover b, .mic-cover span:last-child { display: none; }
  .vtile.you .mic { padding: 5px 10px; gap: 6px; }
  .vtile.you .mic em { white-space: nowrap; }
  .summary, .captions { position: static; }
  .captions { height: 360px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .choice, #vCheck .choice { grid-template-columns: 1fr; }
  .check-head h2 { font-size: 22px; }
  .fitpage { height: auto; min-height: 0; max-width: none; padding: 12px 16px 24px; }
  .welcome-grid, #vWelcome .how .steps, #vWelcome .facts { grid-template-columns: minmax(0, 1fr); }
  #vWelcome .check-head h1 { font-size: 26px; }
  #vNote textarea { min-height: 180px; }
  #vRoom { height: auto; min-height: 0; }
  #vRoom .tiles, #vRoom .qcard { flex: none; min-height: 0; }
  #vRoom .vtile { aspect-ratio: 16 / 10; }
  #vRoom .captions { height: 360px; }
  #vCheck .checks { grid-template-columns: minmax(0, 1fr); }
  #vCheck .cam { flex: none; aspect-ratio: 16 / 9; }
  h1 { font-size: 34px; }
  #vWelcome h1 { font-size: 28px; }
  .rules { grid-template-columns: minmax(0, 1fr); }
  .qcard .qtext { font-size: 21px; }
  .night { flex-wrap: wrap; padding: 24px; }
  .bar .role { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}