/* ═══════════════════════════════════════════════════════════════════════
   Interview Studio (features/interview/templates/interview_studio.html)
   Nate's "Interview Studio (Answer Ready)" design, on the app shell, in the
   interview tool colour (core/app_shell.py TOOL_COLORS: --color-primary is
   #c2410c, --tool-bright #ff6b00, --tool-soft #fff4ec). On a school account
   the school colour takes --color-primary instead, and so does everything
   here that uses it.
   Phone (720px and below): one column, the briefing as three cards switched
   by a segment, Practice pinned above the bottom bar, 44px touch targets,
   no sideways scroll.
   ═══════════════════════════════════════════════════════════════════════ */

.iv {
  --iv-navy: #07183c;
  --iv-ink: #1e293b;
  --iv-muted: #5b6577;
  --iv-line: #e2e8f0;
  --iv-line-2: #cbd5e1;
  --iv-accent: var(--color-primary, #c2410c);
  --iv-accent-dk: var(--color-primary-hover, #9a3412);
  --iv-bright: var(--tool-bright, var(--color-primary, #ff6b00));
  --iv-soft: var(--tool-soft, #fff4ec);
  --iv-warm: #fffaf2;
  --iv-amber-line: #f3c979;
  --iv-shadow: 0 12px 36px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .03);
  padding: 0;
  color: var(--iv-ink); font-size: 15px; line-height: 1.55;
}
.iv *, .iv *::before, .iv *::after { box-sizing: border-box; }
.iv [hidden] { display: none !important; }
.iv h1, .iv h2, .iv h3 { color: var(--iv-navy); letter-spacing: -.02em; }
.iv h2 { margin: 0; font-size: 19px; line-height: 1.25; }
.iv h3 { margin: 18px 0 8px; font-size: 15px; }
.iv p { margin: 0; }
.iv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.iv :focus-visible { outline: 3px solid color-mix(in srgb, var(--iv-accent) 45%, transparent); outline-offset: 2px; }
.iv-muted { color: var(--iv-muted); }
.iv-sub { color: var(--iv-muted); font-size: 14px; margin-top: 4px; }
.iv-body { font-size: 15px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.iv-hint { color: var(--iv-muted); font-size: 13px; }
.iv-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--iv-accent); }
.iv-label { display: block; font-size: 13px; font-weight: 700; color: var(--iv-navy); margin: 10px 0 6px; }
.iv-center { text-align: center; }

/* ── Header ── */
/* The header is the same slim white bar as the builders' (Nate, 2026-10-15,
   option B): full width, title in the tool colour, filled icon tile, a line
   in the tool colour under it. The page itself sits centred in .iv-main. */
.iv-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; min-height: 72px;
  background: #fff; border-bottom: 3px solid var(--iv-accent); }
.iv-head-text { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; min-width: 0; }
.iv .iv-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2;
  letter-spacing: -.02em; color: var(--tool-ink, var(--iv-accent)); }
.iv-title-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--iv-accent); color: #fff; }
.iv-title-ic svg { width: 20px; height: 20px; }
.iv-head-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font-size: 14px; color: var(--iv-muted); }
.iv-head .iv-pills { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; flex-shrink: 0; }
.iv-head .iv-pills .iv-long { display: none; }
.iv-head .iv-pills .iv-short { display: inline; }
.iv-main { max-width: 1180px; margin: 0 auto; padding: 20px 26px 40px; }
.iv-role { color: var(--iv-ink); font-weight: 600; }
.iv-kitpick select { min-height: 40px; max-width: 100%; border: 1px solid var(--iv-line-2); border-radius: 10px; background: #fff;
  padding: 0 32px 0 12px; font: inherit; font-weight: 600; color: var(--iv-navy); }
.iv-link { color: var(--iv-accent); font: inherit; font-weight: 700; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center;
  border: 0; background: none; padding: 0 4px; cursor: pointer; border-radius: 8px; }
.iv-link:hover { text-decoration: underline; }
.iv-left-pill { align-self: center; border: 1px solid var(--iv-amber-line); background: var(--iv-warm); color: #8a4b00;
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; }

/* Interviews: the switcher in the header and its dialog. */
.iv-target-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; max-width: 100%; padding: 0 12px;
  border: 1px solid var(--iv-line-2); border-radius: 10px; background: #fff; font: inherit; font-weight: 700; color: var(--iv-navy); cursor: pointer; }
.iv-target-btn:hover { border-color: var(--iv-amber-line); background: var(--iv-warm); }
.iv-target-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.iv-target-btn svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--iv-accent); }
.iv-kitpick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.iv-kitpick-label { color: var(--iv-muted); }
.iv-pills { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.iv-dlg { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: 16px; padding: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .25); color: var(--iv-ink); font-size: 15px; }
.iv-dlg::backdrop { background: rgba(7, 24, 60, .45); }
.iv-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.iv-dlg h2 { margin: 0; font-size: 19px; color: var(--iv-navy); }
.iv-dlg-x { width: 44px; height: 44px; border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--iv-muted); cursor: pointer; border-radius: 10px; }
.iv-dlg-x:hover { background: #f1f5f9; }
.iv-tlist { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; max-height: 50vh; overflow-y: auto; }
.iv-titem { display: flex; align-items: center; gap: 8px; border: 1px solid var(--iv-line); border-radius: 12px; padding: 4px 6px 4px 4px; }
.iv-titem-cur { border-color: var(--iv-bright); background: var(--iv-warm); }
.iv-titem-link { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 8px 10px; min-height: 48px; text-decoration: none; color: var(--iv-navy); border-radius: 9px; }
.iv-titem-link:hover { background: rgba(255, 255, 255, .7); }
.iv-titem-name { font-weight: 700; overflow-wrap: anywhere; }
.iv-titem-sub { font-size: 13px; }
.iv-titem-rm { min-height: 40px; padding: 0 10px; border: 1px solid var(--iv-line); border-radius: 9px; background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: #991b1b; cursor: pointer; flex: 0 0 auto; }
.iv-titem-rm[data-sure="1"] { border-color: #fecaca; background: #fef2f2; }
.iv-btn-block { width: 100%; }
.iv-input { width: 100%; min-height: 44px; border: 1.5px solid var(--iv-line-2); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--iv-ink); background: #fff; outline: 0; resize: vertical; }
.iv-input:focus { border-color: var(--iv-bright); box-shadow: 0 0 0 4px rgba(255, 107, 0, .1); }
.iv-dlg-note { margin: 14px 0 0; font-size: 14px; }
.iv-dlg-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.iv-dlg .iv-loading { margin: 14px 0 0; }

.iv-when { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 13px; font-weight: 700; }
.iv-when-soon { background: var(--iv-soft); color: var(--iv-accent-dk); }
.iv-when-past { background: #f1f5f9; color: var(--iv-muted); }
.iv-best { flex: 0 0 auto; padding: 3px 8px; border-radius: 6px; background: #e7f8ee; color: #047857; font-size: 12px; font-weight: 800; }
.iv-short { display: none; }
.iv-take { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.iv-take-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--iv-soft); color: var(--iv-accent); flex: 0 0 auto; }
.iv-take-ic svg { width: 22px; height: 22px; }
.iv-take-text { flex: 1 1 260px; display: grid; gap: 2px; }
.iv-take-text strong { color: var(--iv-navy); }
.iv-take-text .iv-muted { font-size: 14px; }
.iv-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.iv-retry { min-height: 40px; font-size: 14px; }
.iv-finish-early { max-width: 700px; margin: 12px auto 0 !important; text-align: right; color: var(--iv-muted); font-size: 14px; }
.iv-finish-early .iv-link { min-height: 32px; }

/* ── Cards, buttons, tags ── */
.iv-card { background: #fff; border: 1px solid var(--iv-line); border-radius: 16px; box-shadow: var(--iv-shadow); padding: 20px; min-width: 0; }
.iv-card + .iv-card, .iv-panel > .iv-card + .iv-card { margin-top: 16px; }
.iv-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.iv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 10px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none;
  border: 1.5px solid transparent; transition: filter .15s ease, background .15s ease, transform .15s ease; }
.iv-btn:disabled { opacity: .6; cursor: default; }
.iv-btn-primary { background: linear-gradient(100deg, var(--iv-accent), var(--iv-bright)); color: #fff; box-shadow: 0 10px 24px rgba(194, 65, 12, .18); }
.iv-btn-primary:hover:not(:disabled) { filter: brightness(.96); transform: translateY(-1px); }
.iv-btn-soft { background: #fff; border-color: var(--iv-amber-line); color: var(--iv-accent-dk); }
.iv-btn-soft:hover:not(:disabled) { background: var(--iv-warm); }
.iv-btn-ghost { background: #fff; border-color: var(--iv-line-2); color: var(--iv-navy); }
.iv-btn-ghost:hover:not(:disabled) { background: #f8fafc; }
.iv-btn-lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.iv-tag { display: inline-flex; align-items: center; width: max-content; border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.iv-tag-high { background: #fff1e6; color: #9a3412; }
.iv-tag-med { background: #f1f5f9; color: #475569; }
.iv-tag-ok { background: #e7f8ee; color: #047857; }
.iv-pill { display: inline-block; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 800; background: #fdf0c4; border: 1px solid #e9c262; color: #7a4d00; margin-bottom: 10px; }
.iv-num { width: 28px; height: 28px; border-radius: 50%; background: #f1f5f9; color: var(--iv-navy); display: grid; place-items: center;
  font-size: 13px; font-weight: 800; flex: 0 0 auto; }
.iv-note { border: 1px solid var(--iv-amber-line); background: var(--iv-warm); border-radius: 10px; padding: 12px 14px; color: #7c4a08; font-size: 14px; line-height: 1.55; margin-bottom: 14px; }
.iv-error { border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; border-radius: 10px; padding: 12px 14px; font-size: 14px; margin: 12px 0; }
.iv-empty { text-align: center; padding: 36px 24px; max-width: 640px; margin: 24px auto 0; }
.iv-empty p { color: var(--iv-muted); margin: 8px auto 18px; max-width: 520px; }
mark.iv-gap { background: #fff1d6; color: #8a4200; border-radius: 4px; padding: 0 3px; font-weight: 600; }

/* ── Step bar ── */
.iv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: rgba(255, 255, 255, .9); border: 1px solid var(--iv-line);
  border-radius: 14px; box-shadow: 0 4px 18px rgba(15, 23, 42, .05); margin-bottom: 20px; }
.iv-step { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 66px; padding: 6px 16px;
  border: 0; border-radius: 11px; background: transparent; cursor: pointer; font: inherit; text-align: left; color: var(--iv-muted); }
.iv-step:not(:last-child)::after { content: ""; position: absolute; right: -3px; top: 50%; width: 1px; height: 32px; transform: translateY(-50%); background: var(--iv-line); }
.iv-step-num { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--iv-line-2); background: #f8fafc; display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; }
.iv-step-text { display: grid; gap: 2px; }
.iv-step-name { font-size: 15px; font-weight: 700; color: var(--iv-navy); }
.iv-step-sub { font-size: 13px; }
.iv-step[aria-selected="true"] { background: linear-gradient(100deg, var(--iv-warm), #fff); }
/* The selected step is its own rounded box, so its outline shows on all
   four sides (Nate, 2026-10-14: the middle one was clipped). */
.iv-step[aria-selected="true"] { box-shadow: inset 0 0 0 1.5px var(--iv-bright); }
.iv-step[aria-selected="true"]::after, .iv-step:has(+ .iv-step[aria-selected="true"])::after { display: none; }
.iv-step[aria-selected="true"] .iv-step-num { border-color: transparent; background: linear-gradient(135deg, var(--iv-accent), var(--iv-bright)); color: #fff; }
.iv-step[aria-selected="true"] .iv-step-name, .iv-step[aria-selected="true"] .iv-step-sub { color: var(--iv-accent-dk); }
.iv-panel { animation: ivIn .25s ease both; }
@keyframes ivIn { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .iv-panel { animation: none; } .iv-btn { transition: none; } }

/* ── Loading ── */
.iv-loading { display: flex; align-items: center; gap: 14px; border: 1px solid var(--iv-amber-line); background: var(--iv-warm); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.iv-loading strong { display: block; color: var(--iv-navy); }
.iv-loading span { color: var(--iv-muted); font-size: 14px; }
.iv-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fde3c8; border-top-color: var(--iv-bright); animation: ivSpin .9s linear infinite; flex: 0 0 auto; }
@keyframes ivSpin { to { transform: rotate(360deg); } }

/* ── Prepare ── */
.iv .iv-phone-only { display: none; }
.iv-prep-top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.iv-prep-top .iv-card + .iv-card { margin-top: 0; }
.iv-prep > .iv-card + .iv-card { margin-top: 16px; }
.iv-role-card h3 { font-size: 14px; }
.iv-role-card .iv-body { font-size: 14px; }
.iv-jd { border: 1px solid var(--iv-line); border-radius: 12px; background: #fbfdff; padding: 10px; margin: 12px 0 4px; }
.iv-jd textarea { width: 100%; min-height: 84px; border: 0; resize: vertical; background: transparent; font: inherit; font-size: 14px; line-height: 1.5; color: var(--iv-ink); outline: 0; }
.iv-jd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.iv-jd-row .iv-btn { min-height: 40px; font-size: 14px; }
.iv-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.iv-req { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--iv-line); border-radius: 10px; padding: 9px 10px; font-size: 14px; }
.iv-req-name { font-weight: 600; color: var(--iv-navy); min-width: 0; }

.iv-brief-card .iv-sub { margin-bottom: 14px; }
.iv-table { border: 1px solid var(--iv-line); border-radius: 12px; overflow: hidden; }
.iv-tr { display: grid; grid-template-columns: 1fr 1.35fr 1.15fr; }
.iv-tr + .iv-tr { border-top: 1px solid var(--iv-line); }
.iv-td { padding: 12px 14px; font-size: 14px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.iv-td + .iv-td { border-left: 1px solid var(--iv-line); }
.iv-th { background: #fbfdff; }
.iv-th .iv-td { font-size: 12px; font-weight: 800; color: var(--iv-navy); text-transform: uppercase; letter-spacing: .03em; }
.iv-need { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 8px; row-gap: 6px; align-items: center; align-content: start; }
.iv-need .iv-tag { grid-column: 2; }
.iv-need strong { color: var(--iv-navy); }
.iv-need-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--iv-accent), var(--iv-bright)); }
.iv-likely { margin: 0; padding-left: 18px; }
.iv-likely li + li { margin-top: 6px; }
.iv-proof { display: flex; flex-direction: column; gap: 3px; }
.iv-proof strong { color: var(--iv-navy); }
.iv-src { display: inline-flex; width: max-content; margin-top: 6px; padding: 3px 8px; border-radius: 6px; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 700; }
.iv-quote { color: var(--iv-ink); font-style: italic; }
.iv-proof-find { background: #fffdf6; }
.iv-find-title { color: #8a4b00 !important; font-size: 13px; }
.iv-proof-find > span { color: var(--iv-muted); }
.iv-angle { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--iv-amber-line); background: linear-gradient(90deg, var(--iv-warm), #fff);
  border-radius: 12px; padding: 12px 14px; margin-top: 14px; font-size: 14px; }
.iv-angle-star { font-size: 22px; line-height: 1; color: var(--iv-bright); }
.iv-angle strong { color: var(--iv-navy); }

.iv-starters { border: 1px solid var(--iv-line); border-radius: 12px; overflow: hidden; }
.iv-starter + .iv-starter { border-top: 1px solid var(--iv-line); }
.iv-starter > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; min-height: 56px; }
.iv-starter > summary::-webkit-details-marker { display: none; }
.iv-starter > summary::after { content: "⌄"; margin-left: auto; color: var(--iv-accent); font-weight: 800; font-size: 20px; line-height: 1; transition: transform .18s ease; }
.iv-starter[open] > summary { background: linear-gradient(90deg, var(--iv-warm), #fff); }
.iv-starter[open] > summary::after { transform: rotate(180deg); }
.iv-starter-q { display: grid; gap: 2px; min-width: 0; }
.iv-starter-q strong { color: var(--iv-navy); }
.iv-starter-q .iv-muted { font-size: 13px; }
.iv-starter-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, .8fr); gap: 16px; padding: 4px 14px 16px 54px; }
.iv-starter-main .iv-label { margin-top: 0; }
.iv-answer { width: 100%; border: 1.5px solid var(--iv-line-2); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.6;
  color: var(--iv-ink); background: #fff; resize: vertical; outline: 0; }
.iv-answer:focus { border-color: var(--iv-bright); box-shadow: 0 0 0 4px rgba(255, 107, 0, .1); }
.iv-gapnote { margin-top: 6px; color: #8a4200; }
.iv-src-line { margin-top: 6px; color: #1d4ed8; font-size: 13px; font-weight: 600; }
.iv-star { border: 1px solid #f1dfbd; border-radius: 10px; background: #fffdf9; padding: 12px 14px; font-size: 14px; line-height: 1.5; align-self: start; }
.iv-star-title { font-weight: 800; color: var(--iv-navy); margin-bottom: 6px !important; }
.iv-star p + p { margin-top: 6px; }
.iv-star strong { color: #b45309; }

.iv-bs-tag { display: inline-flex; width: max-content; margin-top: 2px; padding: 2px 8px; border-radius: 6px; background: #fff1d6; color: #8a4200; font-size: 12px; font-weight: 700; }
.iv-bs-shape { color: var(--iv-ink); margin-bottom: 6px !important; }
.iv-bs-list { margin: 6px 0 0; padding-left: 18px; }
.iv-bs-list li + li { margin-top: 6px; }
.iv-bs-note { margin-top: 8px !important; font-size: 13px; }
.iv-starter-body-one { grid-template-columns: minmax(0, 1fr); }
.iv-hint-prompts { padding: 0 16px 14px 34px !important; color: var(--iv-ink); font-size: 14px; }
.iv-ask { list-style: none; counter-reset: ask; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.iv-ask-item { counter-increment: ask; border: 1px solid var(--iv-line); border-radius: 12px; padding: 14px 14px 14px 50px; position: relative; font-size: 14px; display: grid; gap: 6px; }
.iv-ask-item::before { content: counter(ask); position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: #f1f5f9;
  color: var(--iv-navy); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.iv-ask-q { color: var(--iv-navy); font-weight: 600; }
.iv-ask-item .iv-muted { font-size: 13px; }
.iv-ask-empty { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.iv-notes > summary { cursor: pointer; font-weight: 700; color: var(--iv-navy); min-height: 28px; }
.iv-notes-body { margin-top: 12px; font-size: 14px; }
.iv-notes-body h3 { margin-top: 14px; }
.iv-notes-body p + p, .iv-notes-body ul { margin-top: 8px; }
.iv-notes-body ul { padding-left: 20px; }

.iv-cta-bar { display: flex; justify-content: flex-end; margin-top: 18px; }
.iv-cta-bar.iv-cta-wait { display: none; }
.iv-dlg-kit { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--iv-line); }
.iv-dlg-kit select { width: 100%; }

/* ── Practice ── */
.iv-practice { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.iv-practice .iv-card + .iv-card { margin-top: 0; }
.iv-q-card { padding: 24px 30px 28px; }
.iv-q-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 700; color: var(--iv-navy); }
.iv-dots { display: flex; gap: 6px; }
.iv-dot { width: 30px; height: 5px; border-radius: 99px; background: var(--iv-line); }
.iv-dot-cur { background: #fdc89c; }
.iv-dot-done { background: linear-gradient(90deg, var(--iv-accent), var(--iv-bright)); }
.iv-seg { display: inline-flex; border: 1px solid var(--iv-line); border-radius: 12px; background: #f8fafc; padding: 3px; gap: 2px; max-width: 100%; }
.iv-seg button { border: 0; background: transparent; border-radius: 9px; min-height: 40px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 700; color: var(--iv-muted); cursor: pointer; }
.iv-seg button[aria-checked="true"], .iv-seg button[aria-selected="true"] { background: #fff; color: var(--iv-accent-dk); box-shadow: 0 2px 8px rgba(15, 23, 42, .08); }
.iv-len { margin: 16px 0 20px; }
.iv-len.iv-locked { opacity: .55; pointer-events: none; }
.iv-q-start { text-align: center; padding: 24px 0 8px; display: grid; justify-items: center; gap: 16px; }
.iv-q-start .iv-sub { max-width: 520px; }
.iv .iv-question { max-width: 760px; margin: 8px auto 8px; text-align: center; font-size: 32px; line-height: 1.2; letter-spacing: -.035em; outline: 0; overflow-wrap: anywhere; }
#ivQBody .iv-sub.iv-center { margin-bottom: 20px; }
#ivQBody .iv-label, #ivQBody .iv-answer, .iv-answer-row, .iv-hintbox, #ivReviewError { max-width: 700px; margin-left: auto; margin-right: auto; }
#ivAnswer { min-height: 200px; }
.iv-answer-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.iv-say { max-width: 700px; margin: 0 auto 4px !important; padding: 10px 14px; border-radius: 10px; background: var(--iv-soft); color: var(--iv-accent-dk); font-size: 14px; }
.iv-say strong { color: var(--iv-accent-dk); }
.iv-mic-tip { flex-basis: 100%; order: 3; }
.iv-mic-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .iv-mic-touch { display: inline; } .iv-mic-desk { display: none; } }
.iv-hintbox { margin-top: 16px; border: 1px solid #f4d8a2; border-radius: 12px; background: #fffdf8; }
.iv-hintbox > summary { min-height: 50px; display: flex; align-items: center; padding: 0 16px; cursor: pointer; font-weight: 700; color: var(--iv-navy); }
.iv-hintbox > p, .iv-hintbox > div { padding: 0 16px 14px; font-size: 14px; color: var(--iv-muted); }
.iv-hintbox .iv-label { margin: 0 0 4px; }
.iv-hint-starter { white-space: pre-wrap; color: var(--iv-ink); }
.iv-qlist-card h2 { font-size: 16px; margin-bottom: 12px; }
.iv-qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.iv-qitem { display: flex; gap: 10px; border: 1px solid var(--iv-line); border-radius: 12px; padding: 12px; font-size: 14px; line-height: 1.4; color: var(--iv-muted); }
.iv-qitem-text { display: grid; gap: 4px; min-width: 0; }
.iv-qitem-text > span:first-child { color: var(--iv-navy); }
.iv-qitem-state { font-size: 12px; }
.iv-qitem-cur { border-color: var(--iv-amber-line); background: var(--iv-warm); }
.iv-qitem-cur .iv-qitem-state { color: var(--iv-accent-dk); font-weight: 700; }
.iv-qitem-done { cursor: pointer; }
.iv-qitem-done .iv-num { background: #e7f8ee; color: #047857; }
.iv-qitem-done:hover { border-color: var(--iv-line-2); }
.iv-qitem-done .iv-qitem-state { color: #047857; font-weight: 700; }

/* ── Improve ── */
.iv-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .75fr); gap: 20px;
  background: linear-gradient(115deg, #fff8e8 0%, #fff 62%); border-color: #f3d9a8; padding: 24px; }
.iv-hero:not(:has(.iv-next)) { grid-template-columns: minmax(0, 1fr); }
.iv-hero-main { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.iv-hero-star { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--iv-accent), var(--iv-bright)); color: #fff;
  display: grid; place-items: center; font-size: 22px; flex: 0 0 auto; }
.iv-hero-title { font-size: 26px !important; line-height: 1.2 !important; margin: 4px 0 8px !important; letter-spacing: -.035em; }
.iv-hero .iv-body { color: var(--iv-muted); }
.iv-next { border: 1px solid #ecb75b; background: rgba(255, 255, 255, .78); border-radius: 12px; padding: 16px; align-self: start; }
.iv-next h3 { margin: 8px 0 6px; font-size: 18px; line-height: 1.3; }
.iv-next .iv-muted { font-size: 14px; }
.iv-how-title { margin-bottom: 12px !important; font-size: 12px !important; }
.iv-compare { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); border: 1px solid var(--iv-line); border-radius: 12px; overflow: hidden; }
.iv-cmp { padding: 16px 18px; min-width: 0; }
.iv-cmp-mine { border-right: 1px solid var(--iv-line); }
.iv-cmp-better { border-left: 1px solid var(--iv-line); background: #fbfffc; }
.iv-cmp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; color: var(--iv-navy); font-size: 14px; }
.iv-cmp-arrow { display: grid; place-items: center; color: var(--iv-accent); font-size: 22px; font-weight: 700; }
.iv-cmp .iv-hint { margin-top: 10px; }
.iv-gapbox { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #fff3d9; color: #8a4200; font-size: 14px; }
.iv-why { margin: 16px 2px 0; font-size: 14px; color: var(--iv-muted); }
.iv-why strong { display: block; color: var(--iv-navy); margin-bottom: 4px; }
.iv-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.iv-strip { padding: 16px 18px; }
.iv-cats { display: flex; align-items: center; gap: 10px 24px; flex-wrap: wrap; }
.iv-cat { display: grid; gap: 4px; min-width: 110px; }
.iv-cat-name { font-size: 13px; font-weight: 700; color: var(--iv-navy); }
.iv-lvl { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.iv-lvl::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.iv-lvl-strong { color: #047857; }
.iv-lvl-developing { color: #b45309; }
.iv-lvl-needs_work { color: #b91c1c; }
.iv-ring-box { display: flex; align-items: center; gap: 12px; padding-right: 20px; margin-right: 4px; border-right: 1px solid var(--iv-line); }
.iv-hero .iv-ring-box { border-right: 0; padding-right: 0; }
.iv-ring { --p: 0; width: 60px; height: 60px; border-radius: 50%; position: relative; display: grid; place-items: center; flex: 0 0 auto;
  background: conic-gradient(var(--iv-bright) calc(var(--p) * 1%), var(--iv-line) 0); font-weight: 800; color: var(--iv-navy); font-size: 17px; }
.iv-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.iv-ring span { position: relative; }
.iv-hero .iv-ring { width: 84px; height: 84px; font-size: 24px; }
.iv-hero .iv-ring::before { inset: 8px; }
.iv-ring-text { display: grid; gap: 2px; font-size: 14px; }
.iv-ring-text strong { color: var(--iv-navy); }
.iv-up { color: #047857; font-weight: 700; }
.iv-down { color: #b45309; font-weight: 700; }
.iv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.iv-two .iv-card + .iv-card { margin-top: 0; }
.iv-two h2, .iv-rev-card h2 { font-size: 16px; margin-bottom: 10px; }
.iv-list { margin: 0; padding-left: 20px; font-size: 15px; }
.iv-list li + li { margin-top: 6px; }
#ivResults > .iv-card + .iv-card, #ivFeedback > .iv-card + .iv-card { margin-top: 16px; }
#ivResults > .iv-two + .iv-card { margin-top: 16px; }
.iv-rev { border-top: 1px solid var(--iv-line); }
.iv-rev:first-of-type { margin-top: 12px; }
.iv-rev > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; padding: 6px 0; }
.iv-rev > summary::-webkit-details-marker { display: none; }
.iv-rev-q { flex: 1; min-width: 0; color: var(--iv-navy); font-weight: 600; }
.iv-rev[open] { padding-bottom: 14px; }
.iv-rev .iv-label { margin-top: 10px; }
.iv-progress { margin-top: 16px; }
.iv-progress h2 { font-size: 16px; margin-bottom: 10px; }
.iv-history { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.iv-hist a { display: flex; align-items: center; gap: 10px; min-height: 48px; border: 1px solid var(--iv-line); border-radius: 12px; padding: 6px 14px; text-decoration: none; font-size: 13px; }
.iv-hist a:hover { border-color: var(--iv-amber-line); background: var(--iv-warm); }
.iv-hist-score { font-size: 18px; font-weight: 800; color: var(--iv-navy); }

/* ── Toast ── */
.iv-toast { position: fixed; right: 24px; bottom: 24px; z-index: 120; max-width: min(420px, calc(100vw - 32px)); background: var(--iv-navy); color: #fff;
  border-radius: 12px; padding: 12px 16px; font-size: 14px; box-shadow: 0 14px 40px rgba(15, 23, 42, .25); }

/* ── Narrower screens ── */
@media (max-width: 1080px) {
  .iv-prep-top { grid-template-columns: minmax(0, 1fr); }
  .iv-practice { grid-template-columns: minmax(0, 1fr) 240px; }
  .iv .iv-question { font-size: 28px; }
}
@media (max-width: 900px) {
  .iv-ask { grid-template-columns: minmax(0, 1fr); }
  .iv-starter-body { grid-template-columns: minmax(0, 1fr); padding-left: 14px; }
  .iv-practice { grid-template-columns: minmax(0, 1fr); }
  .iv-hero { grid-template-columns: minmax(0, 1fr); }
  .iv-two { grid-template-columns: minmax(0, 1fr); }
}

/* ── Phone ── */
@media (max-width: 720px) {
  .iv { font-size: 15px; }
  .iv-main { padding: 14px 16px 28px; }
  /* Phone: the builders' phone header — title only, no tile, thin line. */
  .iv-head { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 16px; min-height: 0; border-bottom: 1px solid var(--iv-line); }
  .iv-head-text { display: block; }
  .iv .iv-title { font-size: 18px; }
  .iv-title-ic { display: none; }
  .iv-head-meta { margin-top: 6px; flex-wrap: wrap; }
  .iv-head .iv-pills { justify-content: flex-start; }
  /* Counters as one quiet line, not two pills (live pages audit, 2026-10-15). */
  .iv-head .iv-left-pill { font-size: 12.5px; padding: 0; border: 0; background: transparent; color: var(--iv-muted); font-weight: 600; }
  .iv-head .iv-pills { flex-wrap: wrap; gap: 0 10px; }
  .iv-head .iv-left-pill + .iv-left-pill::before { content: "·"; margin-right: 10px; color: var(--iv-line-2); }
  .iv-finish-early { text-align: left; }
  .iv-take .iv-btn { width: 100%; }
  .iv-head-meta { gap: 8px; }
  .iv-target-btn { flex: 1 1 0; min-width: 0; }
  .iv-head-meta .iv-link { flex-shrink: 0; }
  .iv-head-meta .iv-when { flex-basis: 100%; justify-content: flex-start; }
  .iv-dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 88vh; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .iv-dlg-acts .iv-btn { flex: 1; }
  .iv-card { padding: 16px; border-radius: 14px; box-shadow: 0 5px 18px rgba(15, 23, 42, .045); }
  /* Not sticky on phones: the top bar, the pinned Practice button and the
     bottom menu already take enough of the screen. */
  .iv-steps { background: #fff; border-radius: 12px; margin-bottom: 14px; }
  .iv-step { flex-direction: row; justify-content: center; gap: 6px; min-height: 44px; padding: 4px; text-align: center; }
  .iv-step-num { width: 22px; height: 22px; font-size: 12px; }
  .iv-step-name { font-size: 13px; }
  .iv-step-sub { display: none; }

  /* Prepare: one briefing part at a time. */
  .iv .iv-phone-only { display: flex; }
  #ivPrepSeg { width: 100%; margin-bottom: 12px; background: #fff; }
  #ivPrepSeg button { flex: 1; min-height: 44px; padding: 0 6px; font-size: 13px; }
  .iv-prep [data-part] { display: none; }
  .iv-prep[data-show="needs"] [data-part="needs"],
  .iv-prep[data-show="answers"] [data-part="answers"],
  .iv-prep[data-show="ask"] [data-part="ask"] { display: block; }
  .iv-prep-top { gap: 12px; margin-bottom: 12px; }
  .iv-prep > .iv-card + .iv-card { margin-top: 12px; }
  .iv-prep[data-show="answers"] > .iv-card[data-part="answers"], .iv-prep[data-show="ask"] > .iv-card[data-part="ask"] { margin-top: 0; }
  .iv-prep:not([data-show="needs"]) .iv-prep-top { display: none; }

  /* The table becomes one card per need. */
  .iv-table { border: 0; border-radius: 0; display: grid; gap: 10px; }
  .iv-th { display: none; }
  .iv-tr { grid-template-columns: minmax(0, 1fr); border: 1px solid var(--iv-line); border-radius: 12px; }
  .iv-tr + .iv-tr { border-top: 1px solid var(--iv-line); }
  .iv-td + .iv-td { border-left: 0; border-top: 1px dashed var(--iv-line); }
  .iv-need { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .iv-need .iv-tag { grid-column: 3; grid-row: 1; }

  .iv-starter-body { padding: 4px 12px 14px; }
  .iv-ask-item { padding-left: 48px; }
  .iv-card-head .iv-btn { width: 100%; }

  /* Practice stays in reach, pinned above the bottom bar. */
  .iv-cta-bar { position: sticky; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); z-index: 25; margin: 14px -4px 0; }
  .iv-cta-bar .iv-btn { width: 100%; box-shadow: 0 10px 30px rgba(194, 65, 12, .28); }

  .iv-q-card { padding: 16px; }
  .iv-len { display: flex; width: 100%; margin: 12px 0 14px; }
  .iv-len button { flex: 1; font-size: 13px; padding: 0 6px; }
  .iv .iv-question { font-size: 23px; text-align: left; margin: 4px 0 6px; }
  #ivQBody .iv-sub.iv-center { text-align: left; margin-bottom: 14px; }
  #ivAnswer { min-height: 170px; }
  .iv-answer-row .iv-btn { width: 100%; }
  .iv-dot { width: 18px; }

  .iv-hero { padding: 16px; gap: 14px; }
  .iv-hero-main { flex-direction: column; gap: 10px; }
  .iv-hero-star { width: 40px; height: 40px; font-size: 18px; }
  .iv-hero-title { font-size: 21px !important; }
  .iv-compare { grid-template-columns: minmax(0, 1fr); }
  .iv-cmp-mine { border-right: 0; }
  .iv-cmp-better { border-left: 0; }
  .iv-cmp-arrow { height: 34px; font-size: 0; border-top: 1px solid var(--iv-line); border-bottom: 1px solid var(--iv-line); }
  .iv-cmp-arrow::after { content: "↓"; font-size: 22px; }
  .iv-cmp { padding: 14px; }
  .iv-acts .iv-btn { width: 100%; }
  .iv-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .iv-cats > .iv-ring-box { grid-column: 1 / -1; border-right: 0; padding-right: 0; border-bottom: 1px solid var(--iv-line); padding-bottom: 12px; }
  .iv-hist a { min-height: 44px; }
  .iv-toast { left: 16px; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); max-width: none; }
}
/* Career Paths v2: one-tap job titles from the chosen direction. */
.iv-dir { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 4px; font-size: 13px; }
.iv-dir-chip { min-height: 34px; padding: 4px 12px; border: 1px solid var(--iv-line-2); border-radius: 999px; background: #fff; font: inherit; font-size: 13px; font-weight: 650; color: var(--iv-ink, #0f172a); cursor: pointer; }
.iv-dir-chip:hover { border-color: var(--iv-accent); color: var(--iv-accent-dk); }


/* Design pass C (Nate, round 4): a shorter phone header. Title with the
   "left" counts beside it (stacked small), then the interview picker. */
@media (max-width: 720px) {
  .iv-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 14px; }
  .iv-head-text { display: contents; }
  .iv-head .iv-title { grid-column: 1; grid-row: 1; min-width: 0; }
  .iv-head .iv-pills { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-end; gap: 0; }
  .iv-head .iv-left-pill { font-size: 11.5px; line-height: 1.25; white-space: nowrap; }
  .iv-head .iv-left-pill + .iv-left-pill::before { content: none; }
  .iv-head .iv-head-meta { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; }
}