/* Interview Engine — Dark Navy, Premium SaaS */
:root {
  --navy:    #0A0F1E;
  --slate:   #111827;
  --card:    #1A2339;
  --card-hover: #1E2A45;
  --royal:   #1E40AF;
  --bright:  #3B82F6;
  --emerald: #059669;
  --gold:    #D97706;
  --white:   #FFFFFF;
  --muted:   #9DA8BA;
  --dim:     #657188;
  --danger:  #DC2626;
  --radius:  12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--navy);
  color: var(--white);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

h1, h2, h3, h4, h5 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* ── Interview Setup Page ──────────────────────────────────── */
.interview-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 60px 24px;
}

.interview-page h1 {
  font-size: 32px;
  margin-bottom: 8px;
}
.interview-page .subtitle {
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 48px;
}

.step-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bright);
  margin-bottom: 12px;
}

.step-title {
  font-size: 18px;
  margin-bottom: 20px;
}

/* Role Config Card */
.role-config {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 40px;
}

.role-config .field-group {
  margin-bottom: 24px;
}
.role-config .field-group:last-child { margin-bottom: 0; }

.role-config label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.role-config input[type="text"],
.role-config select {
  width: 100%;
  background: var(--slate);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--white);
  font-size: 15px;
  font-family: 'Inter', system-ui, sans-serif;
  transition: border-color 0.2s;
  appearance: none;
}
.role-config input[type="text"]:focus,
.role-config select:focus {
  outline: none;
  border-color: var(--bright);
}

/* Segmented toggle */
.exp-toggle {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.exp-toggle button {
  flex: 1;
  min-width: 120px;
  background: var(--slate);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  font-family: 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.exp-toggle button:hover { border-color: var(--bright); color: var(--white); }
.exp-toggle button.active {
  background: var(--royal);
  border-color: var(--bright);
  color: var(--white);
}

/* Persona Grid */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
@media (max-width: 700px) { .persona-grid { grid-template-columns: 1fr; } }

.persona-card {
  background: var(--card);
  border: 2px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  text-align: left;
}
.persona-card:hover { border-color: var(--bright); background: var(--card-hover); }
.persona-card.selected {
  border-color: var(--royal);
  background: rgba(30,64,175,0.15);
}
.persona-card .check {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  background: var(--royal);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: white;
}
.persona-card.selected .check { display: flex; }

.persona-card .p-name {
  font-size: 16px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  margin-bottom: 2px;
}
.persona-card .p-title {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
.persona-card .p-style {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}
.p-style.royal-blue { background: rgba(30,64,175,0.3); color: #93C5FD; }
.p-style.emerald    { background: rgba(5,150,105,0.3); color: #6EE7B7; }
.p-style.gold       { background: rgba(217,119,6,0.3); color: #FCD34D; }

.persona-card .p-focus {
  font-size: 13px;
  color: var(--dim);
  line-height: 1.5;
}

/* Begin button */
.begin-wrap { text-align: center; }
.begin-btn {
  background: var(--royal);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 16px 48px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: all 0.2s;
}
.begin-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.begin-btn:not(:disabled):hover { background: var(--bright); transform: translateY(-1px); }

/* ── Interview Session ──────────────────────────────────────── */
.session-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--navy);
}

/* Top bar */
.session-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(10,15,30,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  flex-shrink: 0;
}
.avatar.royal-blue { background: var(--royal); color: #93C5FD; }
.avatar.emerald    { background: var(--emerald); color: #6EE7B7; }
.avatar.gold       { background: var(--gold); color: #FCD34D; }
.avatar.navy       { background: #1E293B; color: #CBD5E1; }

.topbar-name { font-size: 14px; font-weight: 600; }
.topbar-title { font-size: 12px; color: var(--muted); }

.topbar-center { font-size: 13px; color: var(--dim); font-weight: 500; }

.topbar-right { display: flex; align-items: center; gap: 16px; }
.timer {
  font-size: 14px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.end-btn {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s;
  font-family: 'Inter', system-ui, sans-serif;
}
.end-btn:hover { color: var(--danger); background: rgba(220,38,38,0.1); }

/* Question Stage */
.question-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.question-card {
  width: 100%;
  max-width: 760px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 4px solid var(--royal);
  border-radius: var(--radius);
  padding: 40px 48px;
  margin-bottom: 32px;
}

.question-text {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--white);
  letter-spacing: -0.3px;
}

.question-tip {
  margin-top: 20px;
  font-size: 13px;
  color: var(--dim);
  font-style: italic;
}

/* Answer Area */
.answer-area {
  width: 100%;
  max-width: 760px;
}

.answer-textarea {
  width: 100%;
  background: var(--slate);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 20px;
  color: var(--white);
  font-size: 15px;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
  resize: none;
  min-height: 180px;
  transition: border-color 0.2s;
}
.answer-textarea:focus {
  outline: none;
  border-color: var(--bright);
}
.answer-textarea::placeholder { color: var(--dim); }

.char-count {
  text-align: right;
  font-size: 12px;
  color: var(--dim);
  margin: 8px 0 16px;
}

.answer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.submit-btn {
  flex: 1;
  background: var(--royal);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 16px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}
.submit-btn:hover:not(:disabled) { background: var(--bright); }
.submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.skip-btn {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 13px;
  cursor: pointer;
  padding: 8px;
  transition: color 0.2s;
  font-family: 'Inter', system-ui, sans-serif;
}
.skip-btn:hover { color: var(--muted); }

/* Loading state */
.loading-state {
  width: 100%;
  max-width: 760px;
  text-align: center;
  padding: 40px;
}
.loading-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.loading-dots span {
  width: 8px; height: 8px; background: var(--bright); border-radius: 50%;
  animation: dot-pulse 1.4s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}
.loading-text { font-size: 14px; color: var(--muted); }

/* Score feedback badge (shown briefly after submit) */
.score-badge {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 16px 24px;
  display: none;
}
.score-badge.show { display: block; }
.score-badge .badge-label { font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.score-badge .badge-score { font-size: 24px; font-weight: 700; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.score-badge .badge-score.high { color: #6EE7B7; }
.score-badge .badge-score.mid  { color: #FCD34D; }
.score-badge .badge-score.low { color: #FCA5A5; }

/* ── Interview Report ──────────────────────────────────────── */
.report-page {
  /* Widened for Step 4 (executive 2-column grid layout, approved
     2026-08-12) — was 800px. .report-page itself is confirmed exclusive
     to views/interview-report.ejs (grep across every .ejs file finds no
     other user), so this base rule is safe to edit directly, unlike
     .report-section/.cta-btn/.exec-summary etc. below, which remain
     shared with other pages and stay scoped under .report-page as
     descendant selectors (see the Step 3 block near the end of this
     file, and the new Step 4 block right after it). */
  max-width: 1160px;
  margin: 0 auto;
  padding: 60px 24px;
}

.report-header {
  text-align: center;
  margin-bottom: 48px;
}
.report-header .report-date {
  font-size: 12px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.report-header .persona-info {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
}
.report-header .score-ring {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
}
.report-header .score-ring svg { transform: rotate(-90deg); }
.report-header .score-ring circle { fill: none; stroke-width: 8; }
.report-header .score-ring .bg { stroke: var(--card); }
.report-header .score-ring .fill {
  stroke: var(--gold);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}
.report-header .score-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 800;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--gold);
  letter-spacing: -1px;
}
.report-header .score-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.report-section {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 20px;
}
.report-section h3 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 20px;
  font-weight: 600;
}

/* Score bars */
.score-bars { display: flex; flex-direction: column; gap: 16px; }
.score-bar-row { display: flex; align-items: center; gap: 16px; }
.score-bar-label { font-size: 14px; color: var(--muted); min-width: 160px; font-weight: 500; }
.score-bar-track {
  flex: 1;
  height: 8px;
  background: var(--slate);
  border-radius: 4px;
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 1s ease;
}
.score-bar-fill.high   { background: var(--emerald); }
.score-bar-fill.mid    { background: var(--gold); }
.score-bar-fill.low    { background: var(--danger); }
.score-bar-val { font-size: 14px; font-weight: 700; min-width: 36px; text-align: right; }
.score-bar-val.high   { color: #6EE7B7; }
.score-bar-val.mid    { color: #FCD34D; }
.score-bar-val.low    { color: #FCA5A5; }

.score-attribution {
  margin-top: 16px;
  font-size: 12px;
  color: var(--dim);
}

/* Strengths / Improvements */
.strength-list, .improve-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.strength-list li, .improve-list li {
  font-size: 14px;
  line-height: 1.6;
  padding-left: 16px;
  border-left: 3px solid var(--emerald);
  color: #D1D5DB;
}
.improve-list li { border-left-color: var(--gold); }

/* Persona verdict */
.persona-verdict {
  font-size: 15px;
  line-height: 1.7;
  color: #CBD5E1;
  font-style: italic;
}

/* Next steps */
.next-steps { list-style: none; counter-reset: steps; }
.next-steps li {
  counter-increment: steps;
  font-size: 14px;
  line-height: 1.6;
  color: #D1D5DB;
  margin-bottom: 12px;
  padding-left: 36px;
  position: relative;
}
.next-steps li::before {
  content: counter(steps);
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  background: var(--royal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #93C5FD;
}

/* Report CTAs */
.report-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.cta-btn {
  flex: 1;
  min-width: 160px;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-block;
}
.cta-btn.primary { background: var(--royal); color: var(--white); border: none; }
.cta-btn.primary:hover { background: var(--bright); }
.cta-btn.outline {
  background: transparent;
  color: var(--bright);
  border: 1px solid var(--bright);
}
.cta-btn.outline:hover { background: rgba(59,130,246,0.1); }
.cta-btn.emerald {
  background: var(--emerald);
  color: var(--white);
  border: none;
}
.cta-btn.emerald:hover { background: #047857; }
.cta-btn.text-link {
  background: none;
  border: none;
  color: var(--dim);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
}
.cta-btn.text-link:hover { color: var(--muted); }

/* ── Dashboard History ───────────────────────────────────── */
.dashboard-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 24px;
}
.dashboard-page h1 { font-size: 28px; margin-bottom: 8px; }
.dashboard-page .subtitle { color: var(--muted); margin-bottom: 40px; }

/* Score trend SVG */
.trend-section {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 24px 32px;
  margin-bottom: 32px;
}
.trend-section h3 { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; }
.score-trend-svg { width: 100%; height: 80px; }
.score-trend-svg .trend-line { fill: none; stroke: var(--bright); stroke-width: 2; }
.score-trend-svg .trend-dot { fill: var(--bright); }
.score-trend-svg .trend-fill { fill: rgba(59,130,246,0.15); }

/* Session table */
.session-table {
  width: 100%;
  border-collapse: collapse;
}
.session-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--dim);
  padding: 0 12px 12px;
  font-weight: 600;
}
.session-table td {
  padding: 16px 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 14px;
}
.session-table tr:hover td { background: rgba(255,255,255,0.02); }

.session-table .score-cell {
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.score-cell.high { color: #6EE7B7; }
.score-cell.mid  { color: #FCD34D; }
.score-cell.low  { color: #FCA5A5; }

.status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.status-badge.completed { background: rgba(5,150,105,0.2); color: #6EE7B7; }
.status-badge.in_progress { background: rgba(59,130,246,0.2); color: #93C5FD; }
.status-badge.abandoned { background: rgba(71,85,105,0.2); color: var(--dim); }

.view-link {
  color: var(--bright);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.view-link:hover { text-decoration: underline; }

.empty-state {
  text-align: center;
  padding: 60px;
  color: var(--dim);
}
.empty-state h3 { font-size: 18px; color: var(--muted); margin-bottom: 8px; }
.empty-state p { font-size: 14px; }

/* ── Auth Page ──────────────────────────────────────────────── */
.auth-page {
  max-width: 440px;
  margin: 0 auto;
  padding: 80px 24px;
  text-align: center;
}
.auth-page h1 { font-size: 28px; margin-bottom: 8px; }
.auth-page .subtitle { color: var(--muted); margin-bottom: 40px; font-size: 15px; }
.auth-card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 40px;
  text-align: left;
}
.auth-card label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 8px; }
.auth-card input {
  width: 100%;
  background: var(--slate);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--white);
  font-size: 15px;
  font-family: 'Inter', system-ui, sans-serif;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}
.auth-card input:focus { outline: none; border-color: var(--bright); }
.auth-btn {
  width: 100%;
  background: var(--royal);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}
.auth-btn:hover { background: var(--bright); }
.auth-msg { margin-top: 16px; font-size: 13px; color: var(--muted); text-align: center; }
.auth-msg.error { color: var(--danger); }
.auth-msg.success { color: #6EE7B7; }
.auth-btn-google {
  background: #4285F4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.auth-btn-google:hover { background: #3367D6; }
.auth-or-divider {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin: 16px 0;
}

/* ── v0.5 Report Elements ─────────────────────────────────── */
.report-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 24px 0;
}

.scoreboard-section {
  background: linear-gradient(135deg, #0F172A 0%, #131B2E 100%);
  border: 1px solid rgba(59,130,246,0.15);
  border-left: 4px solid #3B82F6;
}
.scoreboard-title {
  font-size: 13px !important;
  color: #3B82F6 !important;
  letter-spacing: 2px !important;
  margin-bottom: 24px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
.scoreboard-grid { display: flex; flex-direction: column; gap: 16px; }
.scoreboard-row { display: flex; align-items: center; gap: 16px; }
.scoreboard-label { font-size: 14px; color: #D1D5DB; min-width: 180px; font-weight: 500; }
.scoreboard-track { flex: 1; height: 10px; background: rgba(255,255,255,0.05); border-radius: 5px; overflow: hidden; }
.scoreboard-fill { height: 100%; border-radius: 5px; transition: width 1.2s ease; }
.scoreboard-fill.high { background: #6EE7B7; }
.scoreboard-fill.mid  { background: #FCD34D; }
.scoreboard-fill.low  { background: #FCA5A5; }
.scoreboard-val { font-size: 14px; font-weight: 700; min-width: 52px; text-align: right; }
.scoreboard-val.high { color: #6EE7B7; }
.scoreboard-val.mid  { color: #FCD34D; }
.scoreboard-val.low  { color: #FCA5A5; }

.recommendation-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 20px 32px;
  margin-bottom: 20px;
}
.rec-label { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.rec-value { font-size: 20px; font-weight: 800; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.rec-strong .rec-value { color: #6EE7B7; }
.rec-hire .rec-value { color: #34D399; }
.rec-lean-hire .rec-value { color: #FCD34D; }
.rec-lean-no .rec-value { color: #FB923C; }
.rec-no .rec-value { color: #FCA5A5; }

.exec-summary {
  font-size: 15px;
  line-height: 1.75;
  color: #CBD5E1;
}
.hiring-justification {
  font-size: 14px;
  line-height: 1.7;
  color: #9CA3AF;
  font-style: italic;
}

.evidence-block {
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 16px;
  border-left: 3px solid transparent;
}
.evidence-strong { border-left-color: #6EE7B7; }
.evidence-weak { border-left-color: #FB923C; }
.evidence-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.evidence-strong .evidence-label { color: #6EE7B7; }
.evidence-weak .evidence-label { color: #FB923C; }
.evidence-meta { font-size: 12px; color: var(--dim); margin-bottom: 8px; }
.evidence-quote { font-size: 14px; color: #D1D5DB; line-height: 1.65; font-style: italic; }

.diagnostics-grid { display: flex; flex-direction: column; gap: 20px; }
.diag-item { display: flex; flex-direction: column; gap: 6px; }
.diag-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--dim); }
.diag-value { font-size: 14px; color: #D1D5DB; line-height: 1.6; }

.priority-list { list-style: none; counter-reset: prio; }
.priority-list li {
  counter-increment: prio;
  font-size: 14px;
  line-height: 1.65;
  color: #D1D5DB;
  margin-bottom: 16px;
  padding-left: 40px;
  position: relative;
}
.priority-list li::before {
  content: counter(prio);
  position: absolute;
  left: 0; top: 2px;
  width: 26px; height: 26px;
  background: var(--royal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #93C5FD;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ============================================================
   BRAND LOGO — tokenized architecture, contextual sizing via
   .brand-logo--sm/md/lg modifiers (no inline styles, no per-instance
   aspect-ratio math — mirrors medhaiq.css / brand-logo.css exactly).
   ============================================================ */
:root {
  --brand-iq-gradient: linear-gradient(
    135deg,
    #3D8BFF 0%,
    #4F74FF 38%,
    #6D5CF5 72%,
    #8B5CF6 100%
  );
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  transition: opacity 0.2s ease;
}
.brand-logo:hover { opacity: 0.9; }

.brand-logo__icon {
  height: auto;
  width: auto;
  max-width: none;
  max-height: 40px; /* hard ceiling — if a page's stylesheet link ever
     fails to load, this still prevents the icon from rendering at its
     full natural size and spilling over surrounding content */
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.brand-logo__text {
  font-weight: 700;
  letter-spacing: -0.04em;
  font-family: var(--font-display);
  color: var(--white);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.brand-logo__iq {
  background: var(--brand-iq-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.brand-logo--sm { gap: 8px; }
.brand-logo--sm .brand-logo__icon { height: 20px; }
.brand-logo--sm .brand-logo__text { font-size: 16px; }

.brand-logo--md { gap: 10px; }
.brand-logo--md .brand-logo__icon { height: 26px; }
.brand-logo--md .brand-logo__text { font-size: 20px; }

.brand-logo--lg { gap: 11px; }
.brand-logo--lg .brand-logo__icon { height: 28px; }
.brand-logo--lg .brand-logo__text { font-size: 22px; }

@media (max-width: 640px) {
  .brand-logo--full .brand-logo__text {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   WEB REPORT — WHITE EXECUTIVE VISUAL SYSTEM (Step 3, approved 2026-08-12)
   ══════════════════════════════════════════════════════════════════════
   Visual benchmark: public/sample-report/index.html.

   CRITICAL SCOPING NOTE — read before editing anything below:
   This stylesheet (interview.css) is NOT exclusive to the Web Report. It
   is also loaded by login, signup, the workspace shell top nav, the
   brand-logo/user-avatar partials, dashboard-history, and the error
   boundary page (confirmed by grep across every .ejs file before writing
   this block). Several class names the report uses — .cta-btn,
   .report-section, .exec-summary, .brand-logo__text — are SHARED with
   those other pages, which remain dark-navy and are explicitly out of
   scope for this task.

   Every rule below is therefore scoped under `.report-page` (or
   `body.report-page-body`, a class added to <body> in
   views/interview-report.ejs specifically to make this possible) as a
   descendant selector. NOTHING above this block was edited or deleted —
   this is a pure addition. Because these are descendant selectors added
   AFTER the base rules earlier in this file, normal CSS cascade order
   means they win for anything inside .report-page without needing
   !important anywhere.

   Colors match the approved sample-report benchmark exactly:
     ink (text):      #1B2130
     paper (bg):       #FFFFFF
     surface (cards):  #F7F8FA
     signal (accent):  #2554C7  — single restrained blue, replaces the
                                   old --gold ring/score accent AND the
                                   red/amber/green "rainbow" scoreboard
                                   coloring (explicitly ruled out).
     line (borders):   #E3E6EC
     emerald/amber:    kept ONLY for the strong/weak semantic evidence
                        distinction (matches the sample's callout.strong/
                        callout.weak) — this is not score-rainbow
                        coloring, it's a two-state semantic marker also
                        present in the approved benchmark.

   No scoring, no data, no structure changed by this block — visual only.
   ══════════════════════════════════════════════════════════════════════ */

body.report-page-body {
  background: #F5F6F8;
}

/* Brand logo — .brand-logo__text is white by default (correct for the
   dark shell it's normally used in); on the report page specifically it
   needs to read on a light background. Icon PNG is a blue gradient mark
   on transparent, already legible on white, untouched. */
.report-page .brand-logo__text { color: #1B2130; }

/* ── Header — score ring, identity ── */
.report-page .report-header .report-date { color: #64748B; }
.report-page .report-header .persona-info { color: #64748B; }
.report-page .report-header div[style*="color:var(--white)"] { color: #1B2130 !important; }
.report-page .score-ring .bg { stroke: #E3E6EC; }
.report-page .score-ring .fill { stroke: #2554C7; }
.report-page .score-num { color: #1B2130; }
.report-page .score-label { color: #64748B; }

/* ── Report sections — light cards instead of dark cards ── */
.report-page .report-section {
  background: #FFFFFF;
  border: 1px solid #E3E6EC;
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
}
.report-page .report-section h3 {
  color: #2554C7;
  font-size: 11px;
  letter-spacing: 1.4px;
}
.report-page .report-divider { background: #E3E6EC; }

/* ── Five-Vector Profile — single restrained accent, no rainbow ── */
.report-page .scoreboard-label { color: #1B2130; }
.report-page .scoreboard-track { background: #F0F1F4; }
.report-page .scoreboard-fill.high,
.report-page .scoreboard-fill.mid,
.report-page .scoreboard-fill.low { background: #2554C7; }
.report-page .scoreboard-val.high,
.report-page .scoreboard-val.mid,
.report-page .scoreboard-val.low { color: #1B2130; }

/* ── Overview text ── */
.report-page .exec-summary { color: #3A4150; }
.report-page .persona-verdict { color: #3A4150; }
.report-page .score-attribution { color: #64748B; }

/* ── Evidence — strong/weak is a semantic pair, kept intentionally (see
       note above), just softened to match the sample's card treatment. ── */
.report-page .evidence-block {
  background: #F7F8FA;
  border-radius: 10px;
  padding: 16px;
  border-left: 3px solid #E3E6EC;
}
.report-page .evidence-strong { background: #EAF7F1; border-left-color: #0F7B4E; }
.report-page .evidence-weak   { background: #FBF1E4; border-left-color: #9A5B14; }
.report-page .evidence-strong .evidence-label { color: #0F7B4E; }
.report-page .evidence-weak .evidence-label { color: #9A5B14; }
.report-page .evidence-meta { color: #64748B; }
.report-page .evidence-quote { color: #3A4150; }

/* ── How to Improve — diagnostics ── */
.report-page .diag-label { color: #64748B; }
.report-page .diag-value { color: #3A4150; }

/* ── Development Focus — remaining priorities list ── */
.report-page .strength-list li { color: #3A4150; border-left-color: #0F7B4E; }
.report-page .improve-list li { color: #3A4150; border-left-color: #9A5B14; }

/* ── Development Path — 30/60/90 numbered steps, single blue accent ── */
.report-page .next-steps li { color: #3A4150; }
.report-page .next-steps li::before { background: #2554C7; color: #FFFFFF; }
.report-page .priority-list li { color: #3A4150; }
.report-page .priority-list li::before { background: #2554C7; color: #FFFFFF; }

/* ── CTAs — mostly work unchanged on a light background (blue/emerald
       already contrast fine on white); .text-link is the one variant
       that needs a readable color swap here specifically. ── */
.report-page .cta-btn.text-link { color: #64748B; }
.report-page .cta-btn.text-link:hover { color: #1B2130; }

/* ── Responsive — screen only. Existing .report-page max-width (800px)
       and padding already collapse reasonably on their own; this adds
       the few adjustments the new white card layout specifically needs
       at small widths (report-section padding, scoreboard label width). ── */
@media screen and (max-width: 600px) {
  .report-page { padding: 32px 16px; }
  .report-page .report-section { padding: 20px; }
  .report-page .scoreboard-label { min-width: 110px; font-size: 12px; }
  .report-page .report-ctas { flex-direction: column; }
  .report-page .cta-btn { min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   WEB REPORT — EXECUTIVE 2-COLUMN GRID LAYOUT (Step 4, approved
   2026-08-12)
   ══════════════════════════════════════════════════════════════════════
   Layout-only refinement on top of Step 3's visual system above. Same
   scoping discipline: .report-page's own base rule (max-width) was
   edited directly above since it's confirmed exclusive to this template
   (grep confirmed, see comment there); every class below is either new
   (report-grid, report-hero, evidence-pair) or an existing shared class
   (.report-section, .score-ring, etc.) restyled via a `.report-page`
   descendant selector, same pattern as Step 3.

   Two deliberate deviations from the prompt's literal "half-width
   sections" list, both flagged here and in the summary rather than
   applied silently:
     - Your Career Intelligence Overview → kept FULL-WIDTH. The prompt's
       own §6 says this section "should have enough width for the
       narrative to breathe... do not make it a tiny narrow card" — a
       half-width column of prose at this max-width would run
       noticeably shorter per line than the report's other full-width
       narrative sections (STAR note, evidence quotes), which reads as
       inconsistent rather than intentional.
     - STAR Intelligence → kept FULL-WIDTH. It has no natural pairing
       partner in the prompt's explicit examples (Strongest Signal pairs
       with Development Focus; How to Improve pairs with the roadmap;
       Representative Evidence is its own full-width section). Forcing
       it against an unrelated section was explicitly ruled out ("Do not
       force two unrelated sections together merely to fill space").
       Full width also gives its 4 STAR rings + overall score room to
       stay legible, matching §8's "intelligence signal" visual goal.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Generic 2-column grid row. Any two .report-section (or similar)
       elements placed inside one of these sit side by side on desktop/
       tablet and stack to one column on mobile. ── */
.report-page .report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 20px;
}
.report-page .report-grid > .report-section { margin-bottom: 0; }

/* ── Hero — score ring + five-vector profile combined into one
       full-width section, side by side, replacing the previous stacked
       report-header + separate scoreboard-section. Identity/context
       stays centered above; the ring and the vectors then sit in a row
       so the vectors get real horizontal room for readable bars, per
       §4/§5's explicit requirement. ── */
.report-page .report-hero {
  background: #FFFFFF;
  border: 1px solid #E3E6EC;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
  padding: 32px 36px;
  margin-bottom: 20px;
}
.report-page .report-hero-identity {
  text-align: center;
  margin-bottom: 28px;
}
.report-page .report-hero-identity .report-date { font-size: 12px; color: #64748B; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.report-page .report-hero-identity .report-hero-name { font-size: 20px; font-weight: 700; color: #1B2130; margin-bottom: 6px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.report-page .report-hero-identity .persona-info { font-size: 14px; color: #64748B; }
.report-page .report-hero-row {
  display: flex;
  align-items: center;
  gap: 40px;
}
.report-page .report-hero-score {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.report-page .report-hero-score .score-ring { position: relative; width: 140px; height: 140px; margin: 0 0 12px; }
.report-page .report-hero-score .score-label { font-size: 13px; color: #64748B; font-weight: 500; max-width: 150px; }
.report-page .report-hero-vectors { flex: 1; min-width: 0; }
.report-page .report-hero-vectors .scoreboard-title { margin-bottom: 14px; }
.report-page .report-hero-pdf { margin-top: 14px; }

/* ── Representative Evidence — full-width outer section, 2-column grid
       for the strongest/development evidence pair inside it, per §9's
       explicit example. ── */
.report-page .evidence-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.report-page .evidence-pair .evidence-block { margin-top: 0 !important; }

/* ── Responsive — desktop uses the 2-column grid throughout; tablet
       keeps 2 columns where practical (same grid, just narrower);
       mobile collapses everything to one column, including inside the
       hero and the evidence pair. ── */
@media screen and (max-width: 860px) {
  .report-page .report-hero-row { flex-direction: column; align-items: stretch; }
  .report-page .report-hero-score { align-self: center; }
}
@media screen and (max-width: 700px) {
  .report-page .report-grid { grid-template-columns: 1fr; }
  .report-page .evidence-pair { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   FIX — Score ring rendering as a solid black disk with a stray "0"
   (bug found 2026-08-12, introduced by Step 4's hero restructuring)
   ══════════════════════════════════════════════════════════════════════
   Root cause: the base .score-ring/.score-num rules further up this file
   (search ".report-header .score-ring") are scoped to require an
   ancestor with class .report-header. Step 4 removed that wrapper from
   views/interview-report.ejs and replaced it with .report-hero-score —
   so those base rules (position:relative sizing, the -90deg SVG
   rotation, and critically `fill: none` on the circles) silently
   stopped matching anything. Without `fill: none`, an SVG <circle> falls
   back to its default fill (solid black) — that's the black disk. And
   without .score-num's `position: absolute; inset: 0`, the score number
   renders in normal document flow instead of centered inside the ring,
   which is the "stray 0" landing near the label below.

   .score-ring / .score-num are confirmed SHARED with several other
   templates (live-terminal.ejs, hero.ejs, proof.ejs,
   explore-scorecard-card.ejs, interview-setup.ejs) — checked each one;
   none of them rely on the now-orphaned `.report-header .score-ring`
   rule (they use different wrapper classes or their own local styles),
   so nothing else is affected by that rule going unused. The fix below
   does NOT touch those base rules or any shared selector — it adds a
   new, scoped rule set for the CURRENT ancestor, .report-hero-score
   (confirmed exclusive to this template), providing exactly the
   structural CSS the ring needs. This is additive only.
   ══════════════════════════════════════════════════════════════════════ */

.report-page .report-hero-score .score-ring {
  position: relative;
  width: 140px;
  height: 140px;
}
.report-page .report-hero-score .score-ring svg { transform: rotate(-90deg); }
.report-page .report-hero-score .score-ring circle { fill: none; stroke-width: 8; }
.report-page .report-hero-score .score-num {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 800;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: -1px;
  color: #1B2130;
}
.report-page .report-hero-score .score-num-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  color: #64748B;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSE INTENT FORMALIZATION — Response Summary line (2026-08-13)
   ══════════════════════════════════════════════════════════════════════
   One small scoped addition: the "RESPONSE SUMMARY" eyebrow label reuses
   the exact same color/size/letter-spacing as .report-page .report-section
   h3 above (same visual language, not a new pattern) — .eyebrow didn't
   exist as its own class in this file before, so it's defined narrowly
   scoped here rather than introduced globally.
   ══════════════════════════════════════════════════════════════════════ */
.report-page .response-summary {
  margin: 18px 0 8px;
  text-align: center;
}
.report-page .response-summary .eyebrow {
  color: #2554C7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

/* ══════════════════════════════════════════════════════════════════════
   CTA cleanup — removed redundant "Return Home" (reapplied 2026-08-14;
   previously delivered but never merged)
   ══════════════════════════════════════════════════════════════════════
   .report-ctas now holds exactly 2 equal-width buttons (Practice Again,
   Return to Workspace) instead of 4. "Try a different persona" moved
   into its own row, styled here as a genuine lightweight text link
   rather than a .cta-btn box stretched by the old 4-item flex row —
   this is new, scoped CSS for a new class (.report-ctas-tertiary),
   nothing shared or existing was touched.
   ══════════════════════════════════════════════════════════════════════ */
.report-page .report-ctas-tertiary {
  text-align: center;
  margin-top: 16px;
}
.report-page .report-ctas-tertiary a {
  font-size: 13.5px;
  font-weight: 600;
  color: #64748B;
  text-decoration: none;
}
.report-page .report-ctas-tertiary a:hover { color: #2554C7; }