/* Palette + type system shared with the marketing site
   (web-interview4.me-html/index.html) — same --paper/--navy/--brass tokens,
   renamed to this app's existing --bg/--surface/--accent variable names so
   every rule below (already written against those names) inherits the
   rebrand without a rule-by-rule rewrite. */
:root {
  --bg: #0c1220;
  --surface: #151e30;
  --surface-alt: #1c2536;
  --text: #edeae0;
  --text-muted: #9da4b4;
  --accent: #d9a44e;
  --accent-2: #e8ba6e;
  --code-bg: #131c2c;
  --code-text: #edeae0;
  --border: #2a3448;
  --navy: #070b14;
  --on-navy: #edeae0;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

/* Light theme — either explicitly toggled (data-theme="light", persisted
   in localStorage, see templates/base.html) or the visitor's OS preference
   on first visit before they've ever toggled anything. */
:root[data-theme="light"] {
  --bg: #efeee6;
  --surface: #fbfaf6;
  --surface-alt: #f6eedb;
  --text: #12192a;
  --text-muted: #4a5468;
  --accent: #a9761f;
  --accent-2: #8a5f17;
  --code-bg: #f6eedb;
  --code-text: #12192a;
  --border: #d9d6c9;
  --navy: #101826;
  --on-navy: #edeae0;
  --shadow: 0 1px 2px rgba(20, 20, 40, 0.04), 0 8px 24px rgba(20, 20, 40, 0.06);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #efeee6;
    --surface: #fbfaf6;
    --surface-alt: #f6eedb;
    --text: #12192a;
    --text-muted: #4a5468;
    --accent: #a9761f;
    --accent-2: #8a5f17;
    --code-bg: #f6eedb;
    --code-text: #12192a;
    --border: #d9d6c9;
    --navy: #101826;
    --on-navy: #edeae0;
    --shadow: 0 1px 2px rgba(20, 20, 40, 0.04), 0 8px 24px rgba(20, 20, 40, 0.06);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body), system-ui, sans-serif;
  transition: background-color 0.15s ease, color 0.15s ease;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0;
}

.theme-toggle {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-icon-dark { display: none; }
:root[data-theme="light"] .theme-icon-light { display: none; }
:root[data-theme="light"] .theme-icon-dark { display: inline; }

code, pre, textarea.code {
  font-family: var(--font-mono), monospace;
  background: var(--code-bg);
  color: var(--code-text);
}

a { color: var(--accent); }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: var(--shadow);
}

/* Same navy/brass swap as the marketing site's .btn-primary: brass-on-navy
   in dark mode, navy-on-off-white in light mode — a solid, high-contrast
   pairing instead of a plain accent-colored button. */
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--navy);
  border: none;
  border-radius: 10px;
  padding: 0.7rem 1.4rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s ease, opacity 0.15s ease;
}
:root[data-theme="light"] .btn { background: var(--navy); color: var(--on-navy); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .btn { background: var(--navy); color: var(--on-navy); }
}

.btn:hover { opacity: 0.92; transform: translateY(-1px); }

input, select, textarea {
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

label { display: block; margin: 0.75rem 0 0.25rem; font-size: 0.9rem; font-weight: 500; }

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.lang-switch {
  display: flex;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.lang-switch a { color: var(--text); opacity: 0.5; text-decoration: none; }
.lang-switch a.lang-active { opacity: 1; color: var(--accent); font-weight: 600; }
.lang-switch select {
  width: auto;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.help-text {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

/* Marks a required field's label (e.g. name/email on session_new.html) —
   same convention/color as the admin renderer's own .field-required. */
.field-required { color: #ef4444; }

.session-layout {
  display: flex;
  gap: 1rem;
  height: calc(100vh - 4rem);
}

.chat-panel, .editor-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bubble {
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  max-width: 85%;
}

.bubble-interviewer { background: var(--surface-alt); align-self: flex-start; }
.bubble-candidate { background: var(--accent); color: var(--navy); align-self: flex-end; }

.bubble > *:first-child { margin-top: 0; }
.bubble > *:last-child { margin-bottom: 0; }
.bubble p { margin: 0.4rem 0; }
.bubble ul, .bubble ol { margin: 0.4rem 0; padding-left: 1.4rem; }
.bubble li { margin: 0.15rem 0; }
/* Fixed code colors (var(--code-bg)/(--code-text)) instead of a translucent
   overlay on the bubble's own background — a black-alpha overlay on top of
   the candidate bubble's solid accent purple barely reads as a distinct
   box (see the code-block-in-candidate-bubble screenshot this fixed),
   whereas the dedicated code tokens give reliable contrast regardless of
   which bubble color or theme it's sitting in. */
.bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  font-size: 0.9em;
}
.bubble pre {
  background: var(--code-bg);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  max-width: 100%;
  overflow-x: auto;
  margin: 0.4rem 0;
}
.bubble pre code {
  background: none;
  color: var(--code-text);
  padding: 0;
  font-size: 0.85em;
  white-space: pre;
}
.bubble blockquote { margin: 0.4rem 0; padding-left: 0.7rem; border-left: 3px solid currentColor; opacity: 0.85; }
.bubble a { color: inherit; text-decoration: underline; }

.chat-composer {
  margin-top: 0.75rem;
}

/* TinyMCE renders its own toolbar/skin inside this wrapper — just give it a
   border that matches the app's card styling instead of fighting its
   internal button/dialog theming. */
.chat-composer .tox-tinymce {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

.chat-input-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.chat-input-hint {
  margin-top: 0.35rem;
  font-size: 0.78rem;
}

.score-bar {
  background: var(--surface-alt);
  border-radius: 6px;
  overflow: hidden;
  height: 1.2rem;
}

.score-fill {
  background: var(--accent);
  height: 100%;
}

/* Multi-step process stepper (candidate-facing) — numbered circles
   connected by a line, mirroring the admin renderer's own .stepper
   component so both surfaces look consistent, restyled for this site's
   dark "console" theme instead of the admin's light pastel one. */
.stepper {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.stepper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-width: 0;
}
.stepper-circle {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  flex-shrink: 0;
}
.stepper-item.active .stepper-circle { border-color: var(--accent); background: var(--accent); color: var(--navy); }
.stepper-item.completed .stepper-circle { border-color: var(--accent); background: var(--surface); color: var(--accent); }
.stepper-line { flex: 1; height: 2px; background: var(--border); margin-top: calc(1.1rem - 1px); }
.stepper-item.completed + .stepper-line { background: var(--accent); }
.stepper-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
.stepper-item.active .stepper-label { color: var(--text); }

.step-waiting {
  text-align: center;
  padding: 3rem 1rem;
}
.step-waiting .icon { font-size: 2.5rem; margin-bottom: 1rem; }
.step-waiting .icon-badge { display: flex; justify-content: center; color: var(--accent); }

.step-media { padding: 0.75rem; margin-bottom: 1rem; }
.step-media iframe { border-radius: 6px; display: block; }
.step-media-link { margin-bottom: 1rem; }

.preview-banner {
  background: var(--surface-alt);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  text-align: center;
}

/* "You finished this step/interview, someone else picks it up from here"
   notice, shown once the composer is hidden — amber like .demo-banner
   below (same "pay attention, this isn't the usual flow" register) but a
   block card rather than a banner, since it replaces the composer in the
   normal reading column instead of sitting at the top of the page. */
.step-finished-card {
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  border: 1px solid #f59e0b;
  color: var(--text);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
}
.step-finished-card p { margin: 0; }
.step-finished-card .btn { margin-top: 0.6rem; }

/* InterviewProcess.is_demo — tells the candidate this session's result
   isn't a real hiring evaluation. Amber, distinct from .preview-banner
   (admin's own "you're viewing a preview" notice, different audience). */
.demo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  border: 1px solid #f59e0b;
  color: var(--text);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  text-align: center;
}
/* A little rubber-stamp look (double border, slight rotation) rather than
   a plain label — makes "this isn't real" register at a glance, not just
   on close reading of the sentence next to it. */
.demo-stamp {
  flex-shrink: 0;
  display: inline-block;
  border: 4px double #dc2626;
  border-radius: 999px;
  padding: 0.15rem 0.9rem;
  color: #dc2626;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-6deg);
  white-space: nowrap;
}

/* Landing page — templates/public/landing.html, the new '/' — explains
   the product and routes candidates (/jobs) vs organizations (/orgs)
   instead of dropping straight into the free-practice form (moved to
   /practice). */
/* Wider than the site's default 960px .container — the 5-card step grid
   below needs the room to fit all 5 in one row instead of wrapping to a
   lonely last card on its own line. */
.landing-container { max-width: 1100px; }
.landing-hero { text-align: center; margin: 1rem 0 2rem; }
.landing-hero h1 { font-size: 2rem; margin-bottom: 0.5rem; }
.landing-subtitle { max-width: 640px; margin: 0 auto; font-size: 1.05rem; }
.landing-audiences {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.landing-audience-card { flex: 1 1 260px; text-align: center; }
/* Circular gradient badge holding an inline SVG icon (see landing.html) —
   same gradient as .btn, so it reads as "the accent" rather than a random
   color. Self-contained SVG, no image assets/external requests. */
.landing-audience-icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--navy);
}
.landing-audience-card h2 { margin: 0 0 0.5rem; }
.landing-demo-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.landing-demo-icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--accent);
}
.landing-demo-copy { flex: 1 1 240px; }
.landing-demo-title { font-weight: 600; margin: 0 0 0.15rem; }
.landing-steps-section { margin-top: 2rem; text-align: center; }
.landing-steps-heading { font-size: 1.75rem; margin: 0 0 0.6rem; }
.landing-steps-subtitle { max-width: 820px; margin: 0 auto 1.5rem; }
.landing-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  text-align: left;
}
.landing-step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem;
}
.landing-step-number {
  font-family: var(--font-mono), monospace;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.landing-step-card h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.landing-step-card .help-text { margin: 0; font-size: 0.85rem; }
/* Smaller variant for inline use next to a title (jobs.html listing) —
   same stamp look, doesn't dominate the line it sits on. */
.demo-stamp-sm {
  border-width: 3px;
  padding: 0.05rem 0.5rem;
  font-size: 0.65rem;
  vertical-align: middle;
}

/* Candidate intake wizard — templates/public/session_new.html /
   static/js/session_new_wizard.js. Reuses the .stepper component above as
   the progress indicator; step visibility itself is toggled client-side
   via the [hidden] attribute on .wizard-step, no extra CSS needed there. */
.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.wizard-actions-left { display: flex; gap: 0.6rem; }
/* .btn-outline sets its own `display`, which otherwise beats the
   browser's default [hidden]{display:none} UA rule (same specificity,
   author stylesheet wins) — #wizard-back needs an explicit override so
   toggling its `hidden` property from JS actually hides it on step 1. */
#wizard-back[hidden] { display: none; }

/* Access gate (email + code) — templates/public/session_gate.html */
.gate-icon { font-size: 2.2rem; text-align: center; margin-bottom: 0.5rem; }
.gate-error {
  background: color-mix(in srgb, #ef4444 15%, transparent);
  border: 1px solid #ef4444;
  color: #ef4444;
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Returning-candidate "resume a session" modal — templates/public/
   session_new.html / static/js/session_new_wizard.js. Reuses the
   .abandon-modal shell (see below) as its backdrop/card, just wider so the
   session list has room. Compound selector (not just .resume-modal) so it
   reliably beats .abandon-modal's own max-width regardless of which rule
   comes first in the cascade — same specificity, source order shouldn't be
   load-bearing here. */
.abandon-modal.resume-modal { max-width: 48rem; }
.resume-session-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 16rem;
  overflow-y: auto;
  margin: 1rem 0;
}
.resume-session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
}
.resume-session-item.active { border-color: var(--accent); }
.resume-session-info { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.resume-session-date { color: var(--text-muted); font-size: 0.85rem; }
.resume-status-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.resume-status-in_progress { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #f59e0b; }
.resume-status-completed { background: color-mix(in srgb, #22c55e 18%, transparent); color: #22c55e; }
.resume-status-cancelled { background: color-mix(in srgb, #ef4444 18%, transparent); color: #ef4444; }
.resume-row-btn { padding: 0.4rem 0.9rem; font-size: 0.85rem; flex-shrink: 0; }
.resume-code-panel { margin-top: 0.75rem; }
.resume-code-row { display: flex; gap: 0.5rem; }
.resume-code-row input { flex: 1; }
.resume-code-row .btn { flex-shrink: 0; }
#resume-status-filter { margin: 0.35rem 0 0; }
.resume-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0.25rem 0 0.75rem;
}
.resume-pagination button:disabled { opacity: 0.4; cursor: default; }
.resume-pagination-info { font-size: 0.85rem; color: var(--text-muted); }

/* Public jobs board — templates/public/jobs.html */
.jobs-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.job-card-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.25rem; }
.job-card-meta { color: var(--text-muted); font-size: 0.85rem; }

/* Abandon-interview flow — shared by session.html / process_steps.html */
.abandon-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 1rem;
}
.abandon-link:hover { color: var(--text); }

/* Candidate identity bar — templates/public/process_steps.html, shown
   above the step progress stepper so the candidate (and anyone glancing
   over their shoulder, e.g. during a screen share) can confirm whose
   session this is and when it started. */
.candidate-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.7rem 1rem;
  margin-bottom: 1.25rem;
}
.candidate-info-identity { display: flex; align-items: center; gap: 0.75rem; }
.candidate-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--navy);
  font-weight: 700;
  font-size: 0.95rem;
}
.candidate-info-name { font-weight: 600; }
.candidate-info-meta { color: var(--text-muted); font-size: 0.85rem; }
.candidate-info-cv-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  flex-shrink: 0;
  text-decoration: none;
}

.abandon-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
}
.abandon-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 28rem;
  width: 100%;
  box-shadow: var(--shadow);
}
.abandon-modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1rem; }
.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }