/* assets/css/interview.css — AI Mock Interview styles
 *
 * Visual language matches the rest of the app (Tailwind + Inter/Sora,
 * indigo/magenta gradient accents, soft slate background).
 * ADHD-friendly: calm motion, generous whitespace, large readable text,
 * single primary action per panel, and an explicit focus mode that
 * hides everything except the orb + transcript.
 */

/* ---------- Shared ---------- */
.iv-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 18px -10px rgba(15, 23, 42, .08);
}
.iv-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 8px;
}
.iv-input {
  width: 100%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #0f172a;
  transition: border .15s, box-shadow .15s;
}
.iv-input:focus {
  outline: none;
  border-color: #6366f1;
  background: white;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.iv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  background: white;
  color: #0f172a;
  cursor: pointer;
  transition: background .15s, border .15s, transform .15s;
}
.iv-btn:hover         { background: #f8fafc; color: #0f172a; }
.iv-btn-ghost         { background: transparent; }
.iv-btn-ghost:hover   { background: rgba(15, 23, 42, .05); color: #0f172a; }

/* Dark-surface override.
   `.iv-btn-ghost` was designed for light cards — on the dark session
   stage (#iv-session bg ≈ #0f172a) the default `color: #0f172a` makes
   the text invisible against the dark surface. Re-skin ghost buttons
   to light text + subtle white overlay when nested under .iv-session. */
.iv-session .iv-btn-ghost {
  background: rgba(255, 255, 255, .06);
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, .12);
}
.iv-session .iv-btn-ghost:hover {
  background: rgba(255, 255, 255, .14);
  color: white;
  border-color: rgba(255, 255, 255, .22);
}
.iv-btn-danger {
  background: linear-gradient(90deg, #f43f5e, #e11d48);
  color: white; border: 0;
}
.iv-btn-danger:hover { filter: brightness(1.04); }

/* ---------- Sidebar / dashboard ---------- */
.iv-sidebar { }
.iv-sidebar-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 18px -10px rgba(15, 23, 42, .06);
}
.iv-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  white-space: nowrap;
}
.iv-nav-item:hover { background: #f1f5f9; color: #0f172a; }
.iv-nav-item.is-active {
  background: linear-gradient(90deg, rgba(99,102,241,.12), rgba(217,70,239,.10));
  color: #4f46e5;
}
.iv-nav-link { color: #4f46e5; }

.iv-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid;
  font-size: 13px;
  margin-bottom: 12px;
}
.iv-banner--good { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.iv-banner--warn { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.iv-banner--bad  { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

.iv-pane { animation: ivFade .25s ease-out both; }
@keyframes ivFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.iv-stat {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
}
.iv-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; }
.iv-stat-value { font-family: 'Sora', sans-serif; font-size: 28px; font-weight: 700; color: #0f172a; margin-top: 4px; }

/* Type cards */
.iv-type-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: white;
  cursor: pointer;
  transition: border .15s, transform .15s, box-shadow .15s;
}
.iv-type-card:hover {
  border-color: #c7d2fe;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -12px rgba(99,102,241,.35);
}
.iv-type-card.is-selected {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.iv-type-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid;
  border-radius: 10px;
}
.iv-type-label { font-weight: 600; color: #0f172a; font-size: 14px; }
.iv-type-tag   { color: #64748b; font-size: 12px; margin-top: 2px; }

/* Toggles + pills */
.iv-toggle {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  background: white;
}
.iv-toggle input { margin-top: 4px; }
.iv-toggle:has(input:checked) { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }

.iv-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 7px 14px; font-size: 13px; cursor: pointer; background: white;
  user-select: none;
}
.iv-pill input { display: none; }
.iv-pill:has(input:checked) { background: linear-gradient(90deg, #6366f1, #d946ef); color: white; border-color: transparent; }

/* Chip-style grid options (Technical sub-flow: industry + language/domain). */
.iv-chip-opt {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 13px; font-weight: 500;
  color: #334155;
  padding: 9px 12px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.iv-chip-opt:hover { border-color: #c7d2fe; background: #f8fafc; }
.iv-chip-opt.is-selected {
  border-color: #6366f1; background: #eef2ff; color: #4338ca;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
  font-weight: 600;
}

/* Voice picker — name on top, gender badge below. */
.iv-voice-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left;
  padding: 10px 14px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.iv-voice-opt:hover { border-color: #c7d2fe; background: #f8fafc; }
.iv-voice-opt.is-selected {
  border-color: #6366f1; background: #eef2ff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
}
.iv-voice-name {
  font-family: 'Sora', sans-serif;
  font-weight: 700; font-size: 14px; color: #0f172a;
}
.iv-voice-opt.is-selected .iv-voice-name { color: #4338ca; }
.iv-voice-gender {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #64748b;
  padding: 2px 7px; border-radius: 999px;
  background: #f1f5f9; border: 1px solid #e2e8f0;
}
.iv-voice-opt.is-selected .iv-voice-gender { background: #e0e7ff; border-color: #c7d2fe; color: #4338ca; }

/* JD textarea — uses iv-input + this height/resize override. */
.iv-textarea { resize: vertical; min-height: 96px; font-family: inherit; line-height: 1.55; }

/* ============================================================
 *  WIZARD — one-step-at-a-time Start flow
 *  ============================================================ */
.iv-wizard-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.iv-wizard-progress { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.iv-wizard-dot {
  display: inline-block; width: 22px; height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  transition: background .25s, transform .25s;
}
.iv-wizard-dot.is-done    { background: #c7d2fe; }
.iv-wizard-dot.is-current { background: linear-gradient(90deg, #6366f1, #d946ef); transform: scaleY(1.15); }

.iv-wizard-body { position: relative; min-height: 200px; }
.iv-wizard-step { display: none; animation: ivStepIn .22s ease-out both; }
.iv-wizard-step.is-active { display: block; }
@keyframes ivStepIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.iv-wizard-hint { font-size: 13px; color: #475569; line-height: 1.55; margin: 0; }

.iv-wizard-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.iv-wizard-foot .iv-btn { gap: 6px; }
.iv-wizard-foot .iv-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Bundle picker in modal */
.iv-bundle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid #e2e8f0; border-radius: 12px;
  cursor: pointer; background: white;
  transition: border .15s, box-shadow .15s;
}
.iv-bundle:hover { border-color: #c7d2fe; }
.iv-bundle.is-selected { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }

/* History */
.iv-history-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e2e8f0; border-radius: 12px;
  text-decoration: none;
  background: white;
  transition: background .15s;
}
.iv-history-row:hover { background: #f8fafc; }
.iv-history-type { font-weight: 600; color: #0f172a; }
.iv-history-meta { color: #64748b; font-size: 12px; margin-top: 2px; }
.iv-history-date { color: #94a3b8; font-size: 11px; margin-top: 2px; }
.iv-history-right { text-align: right; display: flex; align-items: center; gap: 14px; }
.iv-history-status {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 8px; border-radius: 999px; border: 1px solid;
}
.iv-history-status--completed { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.iv-history-status--active    { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.iv-history-status--abandoned { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.iv-history-status--created   { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }
.iv-history-score { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 22px; color: #0f172a; }
.iv-history-score-max { font-size: 11px; font-weight: 400; color: #94a3b8; }

/* Analytics */
.iv-analytic {
  background: white; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 14px 16px;
}
.iv-analytic-top { display: flex; justify-content: space-between; align-items: center; }
.iv-analytic-label { font-weight: 600; color: #0f172a; }
.iv-analytic-count { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.iv-analytic-score { font-family: 'Sora', sans-serif; font-size: 30px; font-weight: 700; color: #4f46e5; margin-top: 6px; }
.iv-analytic-max   { font-size: 12px; font-weight: 400; color: #94a3b8; }
.iv-analytic-bar   { height: 6px; background: #f1f5f9; border-radius: 999px; margin-top: 6px; overflow: hidden; }
.iv-analytic-fill  { height: 100%; background: linear-gradient(90deg, #6366f1, #d946ef); border-radius: 999px; }

/* ---------- Session screen ---------- */
.iv-session {
  display: grid;
  grid-template-rows: 64px 1fr;
  height: 100vh;
  background: #0f172a;
  color: #e2e8f0;
}
.iv-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  background: rgba(15, 23, 42, .92);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
.iv-topbar-left { display: flex; align-items: center; gap: 14px; }
.iv-back {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  color: #cbd5e1;
  text-decoration: none;
}
.iv-back:hover { background: rgba(255,255,255,.05); }
.iv-topbar-title { font-family: 'Sora', sans-serif; font-weight: 700; color: white; font-size: 15px; }
.iv-topbar-sub { font-size: 11px; color: #94a3b8; }
.iv-topbar-right { display: flex; align-items: center; gap: 10px; }
.iv-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #cbd5e1; }
.iv-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 0 0 rgba(100, 116, 139, 0);
}
.iv-status-dot--idle  { background: #64748b; }
.iv-status-dot--live  { background: #22c55e; animation: ivPulse 1.6s ease-out infinite; }
.iv-status-dot--error { background: #ef4444; }
@keyframes ivPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
  100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}
.iv-timer {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 14px;
  color: white;
  background: rgba(255,255,255,.05);
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  transition: background .2s, border-color .2s, color .2s;
}
.iv-timer--warn   { background: rgba(250, 204, 21, .15); border-color: rgba(250, 204, 21, .4); color: #fde68a; }
.iv-timer--danger { background: rgba(244, 63, 94, .20); border-color: rgba(244, 63, 94, .55); color: #fecaca; animation: ivPulse 1.4s ease-out infinite; }
.iv-progress {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #cbd5e1;
  background: rgba(255,255,255,.05);
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  font-variant: tabular-nums;
}
.iv-icon-btn {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  color: #cbd5e1;
  background: transparent;
  cursor: pointer;
}
.iv-icon-btn:hover { background: rgba(255,255,255,.05); }

.iv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr);
  gap: 0;
  min-height: 0;
}
@media (max-width: 900px) {
  .iv-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(180px, 50vh); }
}

/* Left stage */
.iv-stage {
  display: flex; flex-direction: column;
  min-height: 0;
  padding: 24px;
  background: radial-gradient(ellipse at top, rgba(99,102,241,.18), transparent 50%), #0a0820;
}
.iv-orb-wrap {
  flex: 1; min-height: 200px;
  display: grid; place-items: center;
}
.iv-orb {
  position: relative;
  width: clamp(180px, 32vh, 280px);
  height: clamp(180px, 32vh, 280px);
  border-radius: 50%;
  display: grid; place-items: center;
}
.iv-orb-inner {
  position: absolute; inset: 22%;
  background: radial-gradient(circle at 30% 30%, #818cf8, #6366f1 55%, #4f46e5 100%);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(99,102,241,.45);
  transition: transform .3s ease;
}
.iv-orb-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(99,102,241,.35), transparent 60%);
  filter: blur(20px);
  border-radius: 50%;
  opacity: .5;
  transition: opacity .25s ease, transform .25s ease;
}
.iv-orb-label {
  position: absolute; bottom: -42px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: #94a3b8; white-space: nowrap;
}
.iv-orb--listening .iv-orb-inner { transform: scale(.92); }
.iv-orb--listening .iv-orb-glow  { opacity: .35; }
.iv-orb--speaking  .iv-orb-inner { animation: ivOrbBeat 1.2s ease-in-out infinite; }
.iv-orb--speaking  .iv-orb-glow  { opacity: 1; }
.iv-orb--error     .iv-orb-inner { background: radial-gradient(circle, #fb7185, #e11d48); }
@keyframes ivOrbBeat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.iv-controls {
  display: flex; justify-content: center; gap: 12px;
  margin: 16px 0;
}
.iv-control {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  color: white;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.iv-control:hover { background: rgba(255,255,255,.12); }
.iv-control.is-muted  { background: rgba(244,63,94,.18); color: #fca5a5; border-color: rgba(244,63,94,.3); }
.iv-control.is-firing { background: rgba(99,102,241,.35); border-color: #818cf8; transform: scale(.96); }
.iv-control-primary {
  background: linear-gradient(90deg, #6366f1, #d946ef);
  border-color: transparent;
}
.iv-control-primary:hover { background: linear-gradient(90deg, #6366f1, #d946ef); filter: brightness(1.08); }
.iv-control-label { font-size: 13px; }

.iv-mic-live {
  display: flex; align-items: center; gap: 8px;
  margin: -4px auto 14px;
  padding: 6px 10px;
  max-width: 320px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: #94a3b8;
  font-size: 11px;
}
.iv-mic-live .iv-mic-meter {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,.08);
  border: 0;
  border-radius: 999px;
}
.iv-mic-live .iv-mic-meter-fill { background: linear-gradient(90deg, #34d399, #facc15, #f43f5e); }
.iv-mic-live-hint { font-variant: tabular-nums; min-width: 80px; text-align: right; }

.iv-transcript {
  max-height: 36vh; overflow-y: auto;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 14px;
  scrollbar-width: thin;
  scrollbar-color: #4338ca transparent;
}
.iv-empty { color: #64748b; font-size: 13px; padding: 24px; text-align: center; }
.iv-turn { padding: 8px 0; }
.iv-turn + .iv-turn { border-top: 1px solid rgba(255,255,255,.05); margin-top: 4px; }
.iv-turn-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: #94a3b8; font-weight: 700;
}
.iv-turn--ai .iv-turn-tag { color: #818cf8; }
.iv-turn--me .iv-turn-tag { color: #34d399; }
.iv-turn p {
  margin: 4px 0 0;
  color: #e2e8f0;
  font-size: 14px;
  line-height: 1.55;
}

/* Report page is on a light background — flip the transcript colours so
   the text is readable. The session screen lives on a dark background
   and keeps the original styles. We scope by #transcriptBlock which is
   the report-page transcript wrapper. */
#transcriptBlock .iv-turn { padding: 10px 12px; border-radius: 8px; background: #f8fafc; }
#transcriptBlock .iv-turn + .iv-turn { margin-top: 6px; border-top: 0; }
#transcriptBlock .iv-turn--ai { background: #eef2ff; }
#transcriptBlock .iv-turn--me { background: #ecfdf5; }
#transcriptBlock .iv-turn--ai .iv-turn-tag { color: #4f46e5; }
#transcriptBlock .iv-turn--me .iv-turn-tag { color: #047857; }
#transcriptBlock .iv-turn p  { color: #0f172a; }

/* Right side panel */
.iv-side {
  display: flex; flex-direction: column;
  min-height: 0;
  background: #11102b;
  border-left: 1px solid rgba(255,255,255,.06);
}
.iv-side-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 0 10px;
}
.iv-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 14px;
  font-size: 12px;
  color: #94a3b8;
  background: transparent; border: 0; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.iv-tab.is-active { color: white; border-bottom-color: #6366f1; }
.iv-side-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 12px; gap: 10px; }
.iv-side-body.hidden { display: none; }

.iv-code-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.iv-select {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: white;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
}
.iv-editor {
  flex: 1; min-height: 240px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
}
.iv-code-review {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 12px;
  font-size: 12px;
  color: #cbd5e1;
  max-height: 30vh;
  overflow: auto;
}
.iv-code-review strong { color: white; }
.iv-code-review ul { list-style: disc; padding-left: 18px; margin: 4px 0; }
.iv-review-loading, .iv-review-error, .iv-review-empty { color: #94a3b8; font-style: italic; }

.iv-notes {
  flex: 1; min-height: 240px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 12px;
  color: #e2e8f0;
  resize: none;
  font-size: 13px;
}
.iv-notes:focus { outline: none; border-color: #6366f1; }

/* Pre-flight checks */
.pf-check {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0; border-radius: 10px;
  background: white;
  color: #475569;
}
.pf-check .pf-icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #f1f5f9;
  color: #94a3b8;
  font-weight: 700;
  font-size: 12px;
}
.pf-check.is-progress .pf-icon { background: #eef2ff; color: #6366f1; animation: ivPulse 1.6s ease-out infinite; }
.pf-check.is-ok       .pf-icon { background: #ecfdf5; color: #047857; }
.pf-check.is-bad      .pf-icon { background: #fef2f2; color: #b91c1c; }
.pf-check.is-ok       { border-color: #a7f3d0; }
.pf-check.is-bad      { border-color: #fecaca; color: #b91c1c; }

.iv-mic-meter {
  height: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.iv-mic-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #34d399, #facc15, #f43f5e);
  transition: width 80ms linear;
}

/* Session-length picker (preflight modal). 5/10/15/… buttons that the
   user clicks to allocate interview time for this session. */
.iv-len-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.iv-len-opt {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 3px;
  padding: 10px 6px;
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 10px;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #0f172a;
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.iv-len-opt:hover { border-color: #c7d2fe; background: #f8fafc; }
.iv-len-opt.is-selected {
  border-color: #6366f1; background: #eef2ff; color: #4338ca;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.iv-len-unit { font-size: 10px; font-weight: 500; color: #64748b; margin-left: 2px; text-transform: uppercase; letter-spacing: .04em; }

.iv-btn-primary {
  background: linear-gradient(90deg, #6366f1, #d946ef);
  color: white; border-color: transparent;
}
/* Override the generic .iv-btn:hover light grey — that was erasing the
   gradient and making the white label invisible. Keep the gradient on
   hover and just brighten it slightly. */
.iv-btn-primary:hover { background: linear-gradient(90deg, #6366f1, #d946ef); color: white; filter: brightness(1.06); }
.iv-btn-primary:disabled,
.iv-btn-primary:disabled:hover { opacity: .55; cursor: not-allowed; filter: none; }

/* Click-flash for any .iv-btn — toggled briefly to acknowledge async actions
   like "Share with interviewer". Works on both .iv-btn-primary (gradient)
   and .iv-btn-ghost (transparent). */
.iv-btn.iv-btn-firing { transform: scale(.96); box-shadow: 0 0 0 3px rgba(99,102,241,.30); }

/* Whiteboard (system_design) */
.iv-wb-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
}
.iv-wb-tool {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: transparent; border: 1px solid rgba(255,255,255,.1);
  color: #cbd5e1; cursor: pointer;
}
.iv-wb-tool:hover { background: rgba(255,255,255,.06); }
.iv-wb-tool.is-active { background: rgba(99,102,241,.25); color: white; border-color: #818cf8; }
.iv-wb-colors { display: flex; gap: 4px; padding: 0 4px; border-left: 1px solid rgba(255,255,255,.1); border-right: 1px solid rgba(255,255,255,.1); }
.iv-wb-color {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  padding: 0;
}
.iv-wb-color.is-active { border-color: white; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.iv-wb-size { width: 80px; accent-color: #6366f1; }
.iv-wb-canvas {
  flex: 1; min-height: 280px; width: 100%;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: #0a0820;
  cursor: crosshair;
  touch-action: none;
}
.iv-wb-status { font-size: 11px; color: #94a3b8; padding: 4px 2px; }

/* ADHD-friendly focus mode: collapses everything else */
body.iv-focus-mode .iv-side,
body.iv-focus-mode .iv-topbar-left,
body.iv-focus-mode .iv-topbar-right > .iv-btn,
body.iv-focus-mode .iv-controls,
body.iv-focus-mode .iv-transcript,
body.iv-focus-mode .iv-mic-live { display: none !important; }
body.iv-focus-mode .iv-grid { grid-template-columns: 1fr; }
body.iv-focus-mode .iv-stage { padding: 40px; }

/* Wrap-up overlay shown the instant End is clicked or the AI concludes */
.iv-wrapup {
  position: fixed; inset: 0;
  background: rgba(7, 4, 23, .82);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  z-index: 100;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease-out;
}
.iv-wrapup.is-shown { opacity: 1; pointer-events: auto; }
.iv-wrapup-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 36px 44px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  color: white;
  min-width: 260px;
}
.iv-wrapup-spinner {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: #818cf8;
  animation: ivWrapSpin .9s linear infinite;
}
@keyframes ivWrapSpin { to { transform: rotate(360deg); } }
.iv-wrapup-title  { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px; }
.iv-wrapup-status { font-size: 12px; color: #94a3b8; min-height: 1.4em; text-align: center; }
.iv-wrapup-cancel {
  margin-top: 6px;
  padding: 9px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: white;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.iv-wrapup-cancel:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); }
.iv-wrapup-cancel.hidden { display: none; }

/* ---------- Report screen ---------- */
.iv-overall {
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(217,70,239,.08));
  border: 1px solid #c7d2fe;
  border-radius: 16px;
  padding: 18px 22px;
  text-align: center;
  min-width: 180px;
}
.iv-overall-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #4f46e5; font-weight: 700; }
.iv-overall-score {
  font-family: 'Sora', sans-serif;
  font-size: 48px; font-weight: 800; color: #4f46e5;
  margin-top: 4px;
}
.iv-overall-max { font-size: 14px; font-weight: 500; color: #94a3b8; margin-left: 4px; }

.iv-scorecard {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
}
.iv-scorecard-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #64748b; }
.iv-scorecard-value { font-family: 'Sora', sans-serif; font-size: 28px; font-weight: 700; color: #0f172a; margin-top: 6px; }
.iv-scorecard-bar  { height: 6px; background: #f1f5f9; border-radius: 999px; margin-top: 6px; overflow: hidden; }
.iv-scorecard-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #d946ef); border-radius: 999px; }

.iv-bullet { display: flex; align-items: flex-start; gap: 8px; }
.iv-pill-static {
  display: inline-flex; align-items: center;
  font-size: 11px; padding: 3px 9px;
  border-radius: 999px; border: 1px solid;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.iv-pill-static.is-good { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.iv-pill-static.is-bad  { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

.iv-audio { display: block; width: 100%; margin-top: 12px; }
.iv-audio::-webkit-media-controls-panel { background: linear-gradient(90deg, #eef2ff, #fdf4ff); }
.iv-audio--hidden { display: none !important; }

/* ============== MOBILE / TABLET — prevent horizontal overflow ============
 * The dashboard's grid item tracks default to "auto" on <lg, meaning a wide
 * descendant (eg. a horizontal nav, a long history line, or a no-wrap label)
 * grows the whole column past viewport width. These rules keep every nested
 * container within its parent on phones + tablets.
 */
@media (max-width: 1023.98px) {
  /* Every direct child of the dashboard section + the iv-sidebar / panes
     inside it shrink-to-fit instead of growing to match content width. */
  #dashboardPane,
  #dashboardPane > *,
  #dashboardPane .iv-sidebar,
  #dashboardPane .iv-sidebar-card,
  #dashboardPane .iv-pane,
  #dashboardPane .iv-card,
  #dashboardPane .iv-wizard,
  #dashboardPane .iv-wizard-body,
  #dashboardPane .iv-wizard-step {
    min-width: 0;
    max-width: 100%;
  }

  /* Sidebar menu: wrap to multiple rows instead of overflowing right. */
  #dashboardPane .iv-sidebar > .iv-sidebar-card:first-child nav.flex {
    flex-wrap: wrap;
  }
  #dashboardPane .iv-nav-item {
    flex: 0 1 auto;
  }

  /* "Buy more time" button is `w-full` — keep it inside the card padding. */
  #dashboardPane #buyCreditsBtn { max-width: 100%; }

  /* Wizard footer: Back/Next/Start buttons in a flex row already wrap, but
     the credit-line text can be wide. Force the whole row to flex-wrap and
     allow the inner button cluster to shrink. */
  #dashboardPane .iv-wizard-foot { flex-wrap: wrap; }
  #dashboardPane .iv-wizard-foot > div { min-width: 0; flex-wrap: wrap; }

  /* JS-populated grids: type cards, voice cards, industry/domain chips. */
  #typeGrid, #voiceGrid, #industryGrid, #domainGrid { min-width: 0; }
  #typeGrid > *, #voiceGrid > *, #industryGrid > *, #domainGrid > * { min-width: 0; }

  /* Long JD textareas / inputs already use width: 100% but their containers
     may have implicit min-width: auto. Lock them down. */
  #dashboardPane .iv-input,
  #dashboardPane .iv-textarea { max-width: 100%; }

  /* History + analytics rows — long role labels can break out. */
  .iv-history-item, .iv-analytics-row { min-width: 0; overflow-wrap: anywhere; }
}

/* ============ Custom audio player =================================== */
.iv-player {
  margin-top: 16px;
  background: linear-gradient(135deg, #eef2ff 0%, #fdf4ff 100%);
  border: 1px solid #e0e7ff;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}
.iv-player.is-error { background: linear-gradient(135deg, #fef2f2 0%, #fff7ed 100%); border-color: #fecaca; }

.iv-player-play {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, #6366f1, #d946ef);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(99, 102, 241, .35);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.iv-player-play:hover { transform: scale(1.05); box-shadow: 0 10px 28px rgba(99, 102, 241, .45); }
.iv-player-play:active { transform: scale(0.96); }
.iv-player-play svg { height: 22px; width: 22px; }
.iv-player.is-playing .iv-player-play { box-shadow: 0 8px 22px rgba(217, 70, 239, .40); }

.iv-player-main { flex: 1; min-width: 0; }

.iv-player-scrub {
  position: relative;
  height: 6px;
  background: rgba(99, 102, 241, .15);
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
  outline: none;
}
.iv-player-scrub:focus-visible { box-shadow: 0 0 0 3px rgba(99, 102, 241, .30); }
.iv-player-scrub-buffer {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: rgba(99, 102, 241, .25);
  border-radius: 999px;
  pointer-events: none;
}
.iv-player-scrub-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #6366f1, #d946ef);
  border-radius: 999px;
  pointer-events: none;
}
.iv-player-scrub-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  height: 14px; width: 14px;
  background: #fff;
  border: 2px solid #6366f1;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
  pointer-events: none;
  transition: transform 100ms ease;
}
.iv-player.is-playing .iv-player-scrub-thumb { transform: translate(-50%, -50%) scale(1.1); }

.iv-player-meta {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: #475569;
}
.iv-player-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  color: #1e293b;
}
.iv-player-tools { display: flex; align-items: center; gap: 10px; }

.iv-player-speed {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: #64748b;
}
.iv-player-speed select {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  color: #1e293b;
  font-family: inherit;
  cursor: pointer;
}
.iv-player-speed select:focus { outline: 2px solid #6366f1; outline-offset: 1px; }

.iv-player-mute {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  display: grid; place-items: center;
  color: #475569;
}
.iv-player-mute:hover { color: #4f46e5; border-color: #818cf8; }
.iv-player-mute svg { height: 14px; width: 14px; }

/* Empty state when audio couldn't be saved */
.iv-card--audio-empty {
  background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 100%);
  border-color: #fde68a;
}
.iv-card--audio-empty .iv-card-icon { background: #fef3c7; color: #b45309; }

@media (max-width: 640px) {
  .iv-player { flex-direction: column; align-items: stretch; gap: 12px; }
  .iv-player-play { align-self: center; }
  .iv-player-meta { flex-wrap: wrap; }
}

.iv-turn-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: #6366f1;
  margin-left: 8px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  text-decoration: underline dotted;
}
.iv-turn-time:hover { color: #4f46e5; }

@media print {
  header, .iv-overall, .iv-transcript { background: white !important; color: black !important; }
  body { background: white; }
  .iv-card { box-shadow: none; }
  button, audio { display: none !important; }
}

/* ============================================================
 *  REPORT PAGE — modern redesign
 *  Hero with circular score dial, score tiers, themed section cards.
 *  ============================================================ */

/* Tier palette — drives the hero glow, dial fill, score chips, and tier label. */
.iv-hero { position: relative; isolation: isolate; border-radius: 24px; overflow: hidden; padding: 32px; color: white; }
.iv-hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 50%),
              linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #c026d3 100%);
}
.iv-hero--great .iv-hero-bg { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.10), transparent 55%),
                                          linear-gradient(135deg, #064e3b 0%, #047857 45%, #10b981 100%); }
.iv-hero--good  .iv-hero-bg { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.10), transparent 55%),
                                          linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #6366f1 100%); }
.iv-hero--okay  .iv-hero-bg { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.10), transparent 55%),
                                          linear-gradient(135deg, #7c2d12 0%, #b45309 50%, #f59e0b 100%); }
.iv-hero--low   .iv-hero-bg { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.10), transparent 55%),
                                          linear-gradient(135deg, #4c0519 0%, #9f1239 50%, #e11d48 100%); }
.iv-hero-inner { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
@media (min-width: 768px) { .iv-hero-inner { grid-template-columns: 1fr auto; gap: 32px; } }

.iv-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.12);
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
}
.iv-hero-title {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  color: white; line-height: 1.1; margin-top: 12px;
  text-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.iv-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.iv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  padding: 5px 10px; border-radius: 999px;
}
.iv-hero-verdict {
  margin-top: 18px;
  font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.88);
  max-width: 60ch;
}

/* SVG dial in the hero. */
.iv-hero-right { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.iv-dial { position: relative; width: 160px; height: 160px; }
.iv-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.iv-dial-track { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 12; }
.iv-dial-fill {
  fill: none; stroke: white; stroke-width: 12; stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(.34, 1.56, .64, 1);
}
.iv-dial-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: white;
}
.iv-dial-score { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 44px; line-height: 1; }
.iv-dial-max   { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 2px; letter-spacing: .04em; }
.iv-dial-label {
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.18); color: white;
  border: 1px solid rgba(255,255,255,.25);
  text-transform: uppercase; letter-spacing: .06em;
}

/* Quick-stats strip — sits right below the hero. */
.iv-quickstats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-top: 18px;
}
@media (min-width: 640px) { .iv-quickstats { grid-template-columns: repeat(4, 1fr); } }
.iv-quickstat {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: white;
  border: 1px solid #e2e8f0; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.iv-quickstat-icon {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eef2ff, #fdf4ff);
  color: #4f46e5;
}
.iv-quickstat-label { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
.iv-quickstat-value { font-family: 'Sora', sans-serif; font-weight: 700; color: #0f172a; font-size: 16px; line-height: 1.2; }

/* Card head — used in every section to anchor a section's icon + title. */
.iv-card-head { display: flex; align-items: flex-start; gap: 12px; }
.iv-card-icon {
  flex-shrink: 0; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
}
.iv-card-icon--brand   { background: linear-gradient(135deg, #eef2ff, #fae8ff); color: #4f46e5; }
.iv-card-icon--indigo  { background: #eef2ff; color: #4338ca; }
.iv-card-icon--emerald { background: #ecfdf5; color: #047857; }
.iv-card-icon--amber   { background: #fffbeb; color: #b45309; }
.iv-card-icon--cyan    { background: #ecfeff; color: #0891b2; }
.iv-card-icon--violet  { background: #f5f3ff; color: #6d28d9; }
.iv-card-icon--fuchsia { background: #fdf4ff; color: #a21caf; }
.iv-card-icon--slate   { background: #f1f5f9; color: #475569; }
.iv-card-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 17px; color: #0f172a; line-height: 1.25; }
.iv-card-sub   { font-size: 12px; color: #64748b; margin-top: 2px; }

/* Section cards — soft coloured backgrounds matching their meaning. */
.iv-section { border-radius: 16px; transition: transform .2s, box-shadow .2s; }
.iv-section:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -12px rgba(15,23,42,.18); }
.iv-section--strength  { background: linear-gradient(180deg, #ecfdf5 0%, white 60%); border-color: #a7f3d0; }
.iv-section--weak      { background: linear-gradient(180deg, #fffbeb 0%, white 60%); border-color: #fde68a; }
.iv-section--star      { background: linear-gradient(180deg, #f5f3ff 0%, white 60%); border-color: #ddd6fe; }
.iv-section--speak     { background: linear-gradient(180deg, #ecfeff 0%, white 60%); border-color: #a5f3fc; }
.iv-section--code      { background: linear-gradient(180deg, #fdf4ff 0%, white 60%); border-color: #f5d0fe; }
.iv-section--better    { background: white; border-color: #c7d2fe; }
.iv-section--roadmap   { background: linear-gradient(180deg, #ecfdf5 0%, white 50%); border-color: #a7f3d0; }
.iv-section--sketch    { background: linear-gradient(180deg, #ecfeff 0%, white 60%); border-color: #a5f3fc; }
.iv-section--notes     { background: linear-gradient(180deg, #fffbeb 0%, white 50%); border-color: #fde68a; }
.iv-section--transcript{ background: white; border-color: #e2e8f0; }

/* Generic bullet list inside sections. */
.iv-list { list-style: none; padding: 0; margin: 0; }
.iv-list li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 14px; color: #334155; line-height: 1.55; }
.iv-list li + li { border-top: 1px dashed rgba(148, 163, 184, .25); }
.iv-list-empty { color: #94a3b8; font-style: italic; }

/* Scorecard tier colors — the bar fill and value color flip with the score. */
.iv-scorecard--great .iv-scorecard-fill { background: linear-gradient(90deg, #10b981, #34d399); }
.iv-scorecard--good  .iv-scorecard-fill { background: linear-gradient(90deg, #6366f1, #818cf8); }
.iv-scorecard--okay  .iv-scorecard-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.iv-scorecard--low   .iv-scorecard-fill { background: linear-gradient(90deg, #f43f5e, #fb7185); }
.iv-scorecard--great .iv-scorecard-top  { color: #047857; }
.iv-scorecard--good  .iv-scorecard-top  { color: #4338ca; }
.iv-scorecard--okay  .iv-scorecard-top  { color: #b45309; }
.iv-scorecard--low   .iv-scorecard-top  { color: #be123c; }
.iv-scorecard-max { font-size: 12px; font-weight: 500; color: #94a3b8; margin-left: 2px; }
.iv-radar-wrap {
  background: linear-gradient(135deg, #f8fafc, white);
  border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 16px;
}

/* Pill + tag micro-components. */
.iv-stat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: white; border: 1px solid #e2e8f0;
  padding: 5px 10px; border-radius: 999px;
  font-size: 12px; color: #475569;
}
.iv-stat-pill strong { color: #0f172a; }
.iv-mini-label { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.iv-tag {
  display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; padding: 3px 8px;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 6px; color: #475569;
}

/* STAR pill icon style. */
.iv-pill-static { display: inline-flex; align-items: center; gap: 4px; }

/* Stat-tile grid for the code review header. */
.iv-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.iv-stat-tile {
  background: white; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 12px 14px;
}
.iv-stat-tile-label { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
.iv-stat-tile-value { font-family: 'Sora', sans-serif; font-weight: 700; color: #0f172a; font-size: 16px; margin-top: 2px; }
.iv-stat-tile-value--mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; font-size: 13px; }

/* Quote-style better answers. */
.iv-quote {
  margin: 0; padding: 14px 18px;
  background: white;
  border: 1px solid #e2e8f0; border-left: 3px solid #6366f1;
  border-radius: 0 12px 12px 0;
}
.iv-quote-q {
  margin: 0;
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14px;
  color: #4f46e5;
  text-transform: uppercase; letter-spacing: .04em;
  letter-spacing: .02em;
}
.iv-quote-a { margin: 8px 0 0; font-size: 14px; color: #334155; line-height: 1.6; }

/* Roadmap milestones. */
.iv-milestones { list-style: none; padding: 0; margin: 0; counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
.iv-milestones li {
  position: relative; display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 14px; background: white;
  border: 1px solid #e2e8f0; border-radius: 12px;
}
.iv-milestone-num {
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #10b981, #6366f1);
  color: white; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13px;
  box-shadow: 0 2px 6px -2px rgba(16,185,129,.4);
}
.iv-milestone-text { font-size: 14px; color: #334155; line-height: 1.55; padding-top: 3px; }

/* Sketch tile (system-design whiteboard image). */
.iv-sketch {
  border-radius: 12px; overflow: hidden;
  border: 1px solid #c7d2fe; background: #0a0820;
  box-shadow: 0 6px 16px -8px rgba(99,102,241,.30);
}
.iv-sketch img { width: 100%; display: block; }

/* Transcript wrapper now uses native <details>/<summary>. */
details.iv-section--transcript { padding: 20px; }
details.iv-section--transcript > summary { list-style: none; cursor: pointer; user-select: none; }
details.iv-section--transcript > summary::-webkit-details-marker { display: none; }
.iv-summary-chev { transition: transform .2s; }
details[open] .iv-summary-chev { transform: rotate(180deg); }

/* Notes block. */
.iv-notes-block {
  white-space: pre-wrap;
  font-family: 'Inter', ui-sans-serif, system-ui;
  font-size: 14px; color: #422006; line-height: 1.6;
  background: rgba(255, 248, 220, .6);
  border: 1px solid #fde68a; border-radius: 10px;
  padding: 14px 16px;
}

/* Hero ghost chip (the small #id chip). */
.iv-chip--ghost {
  background: transparent;
  border-style: dashed;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Audio "Download" button — small, sits next to the title on lg, wraps under on sm. */
.iv-audio-download {
  flex-shrink: 0;
  text-decoration: none;
}
.iv-audio-download:hover { text-decoration: none; }
@media (max-width: 640px) {
  .iv-card--audio .iv-card-head { flex-wrap: wrap; }
  .iv-audio-download { margin-top: 8px; width: 100%; justify-content: center; }
}

/* Practice-again CTA section.
   Background tint follows the same tier palette as the hero so the page
   visually bookends — celebrate the high score / nudge the low one. */
.iv-practice-again {
  position: relative; isolation: isolate;
  border-radius: 24px;
  padding: 28px;
  overflow: hidden;
  color: white;
  border: 1px solid rgba(255,255,255,.15);
}
.iv-practice-bg {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 80% 30%, rgba(255,255,255,.10), transparent 50%),
              linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #c026d3 100%);
}
.iv-practice-again[data-tier="great"] .iv-practice-bg {
  background: radial-gradient(circle at 80% 30%, rgba(255,255,255,.12), transparent 50%),
              linear-gradient(135deg, #064e3b 0%, #047857 50%, #10b981 100%);
}
.iv-practice-again[data-tier="okay"] .iv-practice-bg {
  background: radial-gradient(circle at 80% 30%, rgba(255,255,255,.10), transparent 50%),
              linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%);
}
.iv-practice-again[data-tier="low"] .iv-practice-bg {
  background: radial-gradient(circle at 80% 30%, rgba(255,255,255,.10), transparent 50%),
              linear-gradient(135deg, #9f1239 0%, #be123c 50%, #e11d48 100%);
}
.iv-practice-inner {
  display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center;
}
@media (min-width: 768px) {
  .iv-practice-inner { grid-template-columns: 1fr auto; gap: 32px; }
}
.iv-practice-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.15);
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
}
.iv-practice-title {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(22px, 3vw, 28px);
  color: white; line-height: 1.2; margin-top: 12px;
}
.iv-practice-text {
  margin-top: 10px;
  font-size: 15px; color: rgba(255,255,255,.85); line-height: 1.55;
  max-width: 50ch;
}
.iv-practice-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.iv-btn-lg { font-size: 14px; padding: 11px 18px; border-radius: 12px; text-decoration: none; }
.iv-practice-cta .iv-btn-ghost {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  color: white;
}
.iv-practice-cta .iv-btn-ghost:hover { background: rgba(255,255,255,.18); }
.iv-practice-cta .iv-btn-primary {
  background: white;
  color: #0f172a;
  border: 0;
}
.iv-practice-cta .iv-btn-primary:hover { filter: brightness(.96); background: white; }

/* ----------------------------------------------------------------
   Print stylesheet — rebuilt for the redesigned report.
   Targets a clean, single-column hard-copy report. Hides interactive
   chrome (header buttons, audio player, transcript scroll cap) and
   flattens gradient backgrounds for paper.
   ---------------------------------------------------------------- */
@media print {
  @page { margin: 14mm 12mm 14mm 12mm; }
  body { background: white !important; color: #0f172a !important; }
  header, footer, audio, button, .iv-audio-download, .iv-practice-cta,
  details > summary .iv-summary-chev,
  #downloadReportBtn { display: none !important; }
  .iv-card, .iv-section { break-inside: avoid; box-shadow: none !important; }
  /* Hero: flatten the gradient onto white paper. */
  .iv-hero, .iv-hero-bg, .iv-practice-again, .iv-practice-bg {
    background: white !important; color: #0f172a !important; border: 1px solid #e2e8f0 !important;
  }
  .iv-hero-title, .iv-practice-title { color: #0f172a !important; }
  .iv-hero-eyebrow, .iv-practice-eyebrow {
    background: #eef2ff !important; color: #4f46e5 !important; border-color: #c7d2fe !important;
  }
  .iv-chip { background: white !important; color: #0f172a !important; border-color: #cbd5e1 !important; }
  .iv-hero-verdict, .iv-practice-text { color: #334155 !important; }
  /* Dial: invert so the score is dark on white. */
  .iv-dial-track { stroke: #e2e8f0 !important; }
  .iv-dial-fill  { stroke: #4f46e5 !important; }
  .iv-dial-center, .iv-dial-score { color: #0f172a !important; }
  .iv-dial-max { color: #64748b !important; }
  .iv-dial-label { background: #eef2ff !important; color: #4f46e5 !important; border-color: #c7d2fe !important; }
  /* Transcript: force-expand the <details> and remove the height cap so it all prints. */
  details.iv-section--transcript { padding: 16px !important; }
  details.iv-section--transcript[open] > summary,
  details.iv-section--transcript:not([open]) > summary { cursor: default !important; }
  #transcriptBlock { max-height: none !important; overflow: visible !important; }
  /* Practice-again: hide entirely on paper (it's a CTA, not part of the report). */
  .iv-practice-again { display: none !important; }
}