/* Mettle stylesheet. Extracted verbatim from index.html — same rules, same
   order, same cascade. See DESIGN_SYSTEM.md for the tokens below. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Clinical Precision, taken from the GUI handoff's own token set rather than
   approximated by eye. Every existing rule already reads these variables, so
   the palette swap reaches the whole interface without touching layout. */
:root {
  --bg: #edf3f6;
  --surface: #ffffff;
  --surface-2: #f3f7f9;
  --border: #d4e0e5;
  --border-strong: #bccdd4;
  --text-primary: #142630;
  --text-secondary: #617480;
  --text-tertiary: #8898a2;
  --accent: #176c75;          /* primary teal: wordmark, primary buttons, focus */
  --accent-light: #dff0f1;    /* primary-soft: selected and hover washes */
  --accent-mid: #2d7ec8;      /* the blue accent: links and live status */
  --accent-strong: #0f5860;
  --amber: #936b15;
  --amber-light: #fdf4e3;
  --red: #aa3e3e;
  --red-light: #f9eded;
  --success: #176c54;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 18px 45px rgba(46, 78, 91, .10);
  --shadow-soft: 0 7px 18px rgba(46, 78, 91, .07);
  --focus: rgba(23, 108, 117, .35);
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── NAV ── */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.nav-logo { font-family: var(--sans); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--accent); }
.review-eyebrow {
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-tertiary); margin-bottom: 4px;
}
.nav-home {
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; gap: 9px; text-align: left;
}
.nav-wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.nav-tagline { font-size: 10px; color: var(--text-tertiary); letter-spacing: 0.02em; }
.ic { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }
.nav-section .ic { margin-right: 6px; }
.mode-card .ic { width: 20px; height: 20px; color: var(--accent); margin-bottom: 8px; }
.nav-home:hover { text-decoration: underline; }
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-link {
  background: none; border: none; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--text-secondary); padding: 6px 10px; border-radius: 6px;
}
.nav-link:hover { color: var(--text-primary); background: var(--bg, transparent); }
.nav-sections { display: flex; gap: 2px; margin-left: 18px; flex: 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Hero. One headline and one line of explanation, so the page opens by saying
   what it is instead of with a form field. */
.hero { padding: 4px 0 8px; }
.hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.hero-title {
  font-size: clamp(30px, 3.6vw, 44px); font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.1; margin: 0 0 12px;
}
.hero-sub { font-size: 16px; line-height: 1.65; color: var(--text-secondary); max-width: 58ch; margin: 0; }

/* One block holds everything you set before sitting a case, so the eye reads a
   single task rather than five equal panels. */
.configure {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.configure-head { font-size: 17px; font-weight: 600; }
.configure .form-group { box-shadow: none; }

.history-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.history-row:last-child { border-bottom: none; }
.history-title { font-size: 14px; }
.history-meta { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
/* A past exam carries two or three controls now (view or grade, and delete)
   where it used to carry one, so they need a row of their own that wraps
   instead of stretching the card on a phone. */
.history-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Every button in a row the same height and shape. The primary button is
   full-width by default, which is right on a form and wrong beside two others. */
.action-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.action-row .btn-primary,
.action-row .btn-secondary {
  width: auto; padding: 10px 18px; font-size: 13.5px; border-radius: var(--radius-sm);
  box-shadow: none;
}
.save-panel {
  padding: 16px 18px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.save-panel-head { font-size: 14px; margin-bottom: 4px; }
.save-panel-body { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 10px; }
.save-panel-opt { display: block; font-size: 13px; margin-bottom: 12px; }

.other-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.other-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px 18px; font: inherit; color: var(--text-primary); box-shadow: var(--shadow-soft);
}
.other-card:hover { border-color: var(--accent); }
.other-card .ic { width: 20px; height: 20px; color: var(--accent); }
.other-card-name { font-weight: 600; font-size: 14px; }
.other-card-desc { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }

.library-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.library-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.library-filters select { width: auto; min-width: 160px; font-size: 13px; }

.site-footer {
  border-top: 1px solid var(--border); background: var(--surface);
  padding: 14px 2rem; display: flex; gap: 18px; flex-wrap: wrap;
  align-items: center; font-size: 12px; color: var(--text-tertiary);
  flex-shrink: 0;
}
.site-footer button {
  background: none; border: none; padding: 0; font: inherit; font-size: 12px;
  color: var(--text-secondary); cursor: pointer;
}
.site-footer button:hover { color: var(--text-primary); text-decoration: underline; }

/* Mobile. The nav and the card grid are the two things that break first:
   four sections plus a wordmark do not fit, and a 280px minimum column
   forces a horizontal scroll on a phone. */
@media (max-width: 720px) {
  nav { padding: 0 1rem; height: auto; min-height: 52px; flex-wrap: wrap; gap: 4px; }
  .nav-sections { margin-left: 0; width: 100%; order: 3; overflow-x: auto; padding-bottom: 6px; }
  .nav-link { padding: 6px 8px; font-size: 12.5px; }
  /* The account fields were inheriting a smaller size than every other input on
   the page, which made the one form a new user meets look like fine print. */
#auth-group input, #screen-signin input, #screen-signup input { font-size: 14px; padding: 12px 14px; }
#auth-group .setup-sub, #screen-signin .setup-sub, #screen-signup .setup-sub { font-size: 13px; }

.setup-page { padding: 1.5rem 1rem 2.5rem; gap: 1rem; }
  .setup-title { font-size: 22px; }
  .form-group { padding: 16px 14px; border-radius: var(--radius-sm); }
  .library-cards { grid-template-columns: 1fr; }
  .library-filters select { min-width: 0; flex: 1 1 45%; }
  .site-footer { padding: 12px 1rem; gap: 12px; }
}
.library-count { font-size: 12px; color: var(--text-tertiary); }
#screen-library .setup-page { max-width: 1180px; }
.library-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.case-card {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; font: inherit;
  color: var(--text-primary); box-shadow: var(--shadow-soft);
  transition: border-color .15s, box-shadow .15s;
}
.case-card:hover { border-color: var(--accent-mid, var(--accent)); }
.case-card.selected {
  border-color: var(--accent); background: var(--accent-light);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.case-card-radio {
  flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--bg);
}
.case-card.selected .case-card-radio { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 2.5px var(--surface); }
.case-card-stem { font-size: 15px; line-height: 1.45; }
.case-card-icon { width: 18px; height: 18px; color: var(--text-tertiary); margin-top: 1px; }
.case-card.selected .case-card-icon { color: var(--accent); }
.case-card-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 5px; }
.nav-section.current { color: var(--accent); font-weight: 500; }
.selected-case {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px;
}
.selected-case-title { font-size: 13px; color: var(--text-primary); }
.selected-case-none { font-size: 13px; color: var(--text-tertiary); }
.about-body { font-size: 15px; line-height: 1.75; color: var(--text-secondary); }
.about-body p { margin: 0 0 14px; }
.about-body .section-label { margin-top: 22px; }
/* Lists in prose. Without these the paragraph after a list sat flush against
   the final bullet and read as part of it, which is exactly wrong on the exam
   format page where the line after each list qualifies the whole list. */
.about-body ul { margin: 0 0 14px; padding-left: 20px; }
.about-body li { margin: 0 0 6px; }
.about-body strong { color: var(--text-primary); }
.about-body a { color: var(--accent-mid, var(--accent)); }
.about-note {
  font-size: 12px; line-height: 1.6; color: var(--text-tertiary);
  border-top: 1px solid var(--border); padding-top: 14px; margin-top: 22px;
}
.nav-badge {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px;
  background: var(--amber-light); color: var(--amber); border: 1px solid #E8D4A8;
}

/* ── SCREENS ── */
.screen { display: none; flex: 1; flex-direction: column; overflow-y: auto; }
.screen.active { display: flex; }

/* ── SETUP SCREEN ── */
/* Wider than the old 560px column: the reference works to 1240px, and the case
   library in particular was being squeezed into a single narrow strip. */
/* Reading width for everything by default: a form and a page of prose do not
   get better at 1240px, they just get harder to scan. The Case Library is the
   exception and opts out below, because a card grid genuinely wants the room. */
.setup-page {
  max-width: 860px; margin: 0 auto; padding: 2.5rem 1.5rem 3rem;
  width: 100%; display: flex; flex-direction: column; gap: 1.5rem;
}
.setup-title {
  font-size: clamp(30px, 3.4vw, 42px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 10px;
}
.setup-sub { font-size: 16px; color: var(--text-secondary); line-height: 1.65; max-width: 62ch; }

.section-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 10px;
}

/* Each group is a panel on the ground color, which is what carries most of
   the difference between this and a plain stack of form fields. */
.form-group {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
  padding: 20px 22px;
}

/* type="email" was missing here, so every email box on the site fell back to
   the browser default: a small, narrow, differently-styled field next to
   properly styled text inputs. It is the first box a new user meets. */
input[type="password"], input[type="text"], input[type="email"], textarea, select {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); font-family: var(--sans);
  font-size: 14px; color: var(--text-primary); padding: 12px 14px;
  outline: none; width: 100%;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus);
}
textarea { border-radius: 8px; min-height: 120px; resize: vertical; line-height: 1.6; }
::placeholder { color: var(--text-tertiary); }

.tier-options { display: flex; gap: 8px; }
.tier-btn {
  flex: 1; padding: 10px 8px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface); cursor: pointer;
  text-align: center; font-family: var(--sans); font-size: 12px;
  color: var(--text-secondary); transition: all 0.15s;
}
.tier-btn:hover { border-color: var(--accent-mid); color: var(--text-primary); }
.tier-btn.selected {
  border-color: var(--accent-mid); background: var(--accent-light);
  color: var(--accent);
}
.tier-btn .tier-label {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; display: block;
  margin-bottom: 4px;
}

.ck-tag { border-bottom: 1px dotted currentColor; cursor: help; }
.case-tabs { display: flex; gap: 0; margin-bottom: 10px; }
.case-tab {
  padding: 7px 14px; border: 1px solid var(--border-strong);
  background: var(--surface); cursor: pointer;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary); transition: all 0.15s;
}
.case-tab:first-child { border-radius: 5px 0 0 5px; }
.case-tab:last-child { border-radius: 0 5px 5px 0; }
.case-tab:not(:first-child) { border-left: none; }
.case-tab.selected {
  background: var(--accent-light); color: var(--accent-mid);
  border-color: var(--accent-mid);
}
.case-panel { display: none; }
.case-panel.active { display: block; }

.upload-zone {
  border: 1.5px dashed var(--border-strong); border-radius: 10px;
  background: var(--surface); padding: 2rem; text-align: center;
  cursor: pointer; font-size: 13px; color: var(--text-tertiary);
  transition: all 0.15s;
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--accent-mid); background: var(--accent-light);
}
.upload-zone .upload-label { font-size: 14px; color: var(--text-secondary); margin-bottom: 4px; }
.upload-zone .upload-hint { font-size: 11px; }
.file-name {
  margin-top: 8px; font-family: var(--mono); font-size: 11px;
  color: var(--accent-mid); display: none;
}

.btn-primary {
  background: var(--accent); color: white; border: none; border-radius: var(--radius-sm);
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  padding: 14px; width: 100%; cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background: var(--accent-strong); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-secondary {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-family: var(--sans); font-size: 13px;
  color: var(--text-secondary); padding: 8px 16px; cursor: pointer;
  transition: all 0.15s;
}
.btn-secondary:hover { background: var(--bg); color: var(--text-primary); }

.error-msg {
  background: var(--red-light); border: 1px solid #D4AAAA;
  border-radius: 6px; padding: 10px 14px; font-size: 13px;
  color: var(--red); display: none;
}

/* ── REVIEW SCREEN ── */
.review-page {
  max-width: 700px; margin: 0 auto; padding: 2.5rem 1.5rem 3rem;
  width: 100%; display: flex; flex-direction: column; gap: 1.5rem;
  flex: 1; overflow-y: auto;
}
.review-header {
  display: flex; align-items: center; justify-content: space-between;
}
.review-title { font-family: var(--serif); font-size: 24px; }
.review-timer {
  font-family: var(--mono); font-size: 22px; font-weight: 500;
  color: var(--accent); padding: 6px 16px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface);
}
.review-timer.expired { color: var(--red); border-color: #D4AAAA; background: var(--red-light); }
.review-case {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.5rem; font-size: 14px;
  line-height: 1.7; color: var(--text-primary);
  overflow-y: auto; flex: 1;
}
.review-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.review-hint {
  font-size: 12px; color: var(--text-tertiary); font-family: var(--mono);
}
.screen.review-expired { background: #FDF5F5; }

/* ── EXAM SCREEN ── */
.exam-layout { display: flex; flex: 1; overflow: hidden; }
.exam-sidebar, .record-sidebar {
  width: 260px; background: var(--surface); border-right: 1px solid var(--border);
  padding: 1.5rem; overflow-y: auto; flex-shrink: 0;
  transition: width .18s ease, padding .18s ease;
  cursor: pointer;   /* the whole panel folds it away — see the ‹ in its header */
}
/* Collapsed, the case is out of the way but one tap from coming back. The stem
   is worth re-reading mid-exam, and on a phone it takes the whole screen. */
.exam-layout.sidebar-collapsed .exam-sidebar,
.record-layout.sidebar-collapsed .record-sidebar {
  width: 0; padding-left: 0; padding-right: 0; overflow: hidden; border-right: none;
}
/* The header line carries the affordance: clicking the panel is what hides it,
   and a panel that gives no hint of that is a panel nobody clicks. */
.case-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.case-head .section-label { margin-bottom: 0; }
.case-collapse-hint {
  color: var(--text-tertiary); font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; gap: 3px;
}
.exam-sidebar:hover .case-collapse-hint,
.record-sidebar:hover .case-collapse-hint { color: var(--text-primary); }

/* Once it is folded away, the only way back is the arrow, so the arrow has to
   stay on screen. A 34px rail keeps it visible without taking the room the
   panel was hidden to free up. */
.case-rail {
  display: none; flex-direction: column; align-items: center; gap: 10px;
  width: 34px; flex-shrink: 0; padding: 14px 0;
  background: var(--surface); border: none; border-right: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer; font-family: inherit;
}
.case-rail:hover { color: var(--text-primary); background: var(--bg, var(--surface)); }
.case-rail svg { width: 16px; height: 16px; flex-shrink: 0; }
.case-rail-label {
  writing-mode: vertical-rl; text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.1em; font-family: var(--mono, inherit);
}
.exam-layout.sidebar-collapsed .case-rail,
.record-layout.sidebar-collapsed .case-rail { display: flex; }
#btn-toggle-case { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 720px) {
  .exam-sidebar { position: absolute; z-index: 5; height: 100%; width: 78%; max-width: 320px; box-shadow: var(--shadow); }
  .exam-layout { position: relative; }
}
.exam-sidebar .case-title { font-family: var(--serif); font-size: 18px; margin-bottom: 12px; }
.exam-sidebar .case-stem {
  border-left: 2px solid var(--border-strong); padding-left: 10px;
  font-size: 12px; line-height: 1.7; color: var(--text-secondary);
}

.exam-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.exam-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 1.5rem; background: var(--surface);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.exam-timer {
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  color: var(--text-primary);
}
.exam-timer.warning { color: var(--amber); }
.exam-timer.danger { color: var(--red); }

.exam-status {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-tertiary);
}
.status-dot.connected { background: var(--accent-mid); }
.status-dot.listening { background: var(--accent-mid); animation: pulse 1.5s infinite; }
.status-dot.thinking { background: var(--amber); animation: pulse 1s infinite; }
.status-dot.speaking { background: #534AB7; animation: pulse 1s infinite; }
.status-dot.error { background: var(--red); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.conversation {
  flex: 1; overflow-y: auto; padding: 1.5rem;
  display: flex; flex-direction: column; gap: 12px;
}

.msg {
  border-radius: 6px; padding: 12px 16px;
  font-size: 14px; line-height: 1.7; max-width: 85%;
}
.msg-examiner {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong); align-self: flex-start;
}
.msg-examinee {
  background: var(--accent-light); border: 1px solid #C5D9CC;
  border-left: 3px solid var(--accent-mid); color: var(--accent);
  align-self: flex-end;
}
.msg-label {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 4px;
}
.msg-examiner .msg-label { color: var(--text-tertiary); }
.msg-examinee .msg-label { color: var(--accent-mid); }
.msg-system {
  background: var(--amber-light); border: 1px solid #E8D4A8;
  border-left: 3px solid var(--amber); align-self: center;
  color: var(--amber); font-size: 12px; max-width: 100%;
}

.thinking-indicator {
  display: none; align-self: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 6px; padding: 12px 16px; width: fit-content;
}
.thinking-dots { display: flex; gap: 4px; }
.thinking-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-tertiary); animation: dotPulse 1.4s infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

.exam-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 1rem 1.5rem;
  background: var(--surface); border-top: 1px solid var(--border);
  flex-shrink: 0;
  /* Keep clear of the floating report-a-problem button, which is fixed to the
     bottom-right of the viewport and was sitting on top of the Pause control.
     Reserving the corner is more robust than moving the widget, because every
     bottom-anchored row has the same problem. */
  padding-right: 150px;
}
@media (max-width: 640px) {
  /* On narrow screens there is no room to reserve a corner, so let the row wrap
     and give it height below instead. */
  .exam-controls { padding-right: 1.5rem; flex-wrap: wrap; padding-bottom: 4rem; }
}
.btn-end {
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: 5px; font-family: var(--sans); font-size: 13px;
  color: var(--text-secondary); padding: 8px 20px; cursor: pointer;
  transition: all 0.15s;
}
.btn-end:hover { background: var(--red-light); color: var(--red); border-color: #D4AAAA; }

.mic-btn {
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--accent); color: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; position: relative;
}
.mic-btn:hover { opacity: 0.88; }
.mic-btn.muted { background: var(--red); }
.mic-btn svg { width: 24px; height: 24px; }

.btn-pause {
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: 5px; font-family: var(--sans); font-size: 13px;
  color: var(--text-secondary); padding: 8px 20px; cursor: pointer;
  transition: all 0.15s;
}
.btn-pause:hover { background: var(--amber-light); color: var(--amber); border-color: #E8D4A8; }
.btn-pause.paused { background: var(--amber-light); color: var(--amber); border-color: #E8D4A8; }
.btn-ptt { flex: 1; padding: 10px 20px; border-radius: 8px; background: var(--accent-mid, #3b82f6); color: #fff; border: none; cursor: pointer; font-size: 14px; font-weight: 600; white-space: nowrap; transition: all 0.15s; }
.btn-ptt:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ptt.recording { background: var(--error, #e74c3c); }
.btn-vl-auto { padding: 10px 14px; border-radius: 8px; background: var(--bg-subtle, #eef1f5); color: var(--text-secondary, #555); border: 1px solid var(--border, #d0d5dd); cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; transition: all 0.15s; }
.btn-vl-auto.on { background: var(--accent-light, #e7f0ff); color: var(--accent-mid, #2563eb); border-color: var(--accent-mid, #3b82f6); }

/* ── TRANSCRIPT SCREEN ── */
.transcript-page {
  max-width: 700px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem;
  width: 100%; display: flex; flex-direction: column; gap: 1.75rem;
}
.transcript-title { font-family: var(--serif); font-size: 24px; }
.transcript-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px; text-align: center;
}
.stat-value { font-family: var(--serif); font-size: 22px; color: var(--accent); }
.stat-label {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-tertiary); margin-top: 4px;
}

.transcript-body {
  display: flex; flex-direction: column; gap: 10px;
}
.transcript-actions { padding-right: 150px; }
@media (max-width: 640px) { .transcript-actions { padding-right: 0; padding-bottom: 4rem; } }
.transcript-actions { display: flex; gap: 8px; }

/* Mode toggle (still used by auth buttons) */
.mode-toggle { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mode-btn { flex: 1; padding: 10px 16px; background: var(--surface); color: var(--text-secondary); border: none; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.15s; }
.mode-btn.selected { background: var(--accent-mid, #3b82f6); color: #fff; }
.mode-btn:not(.selected):hover { background: var(--border); }
.mode-hint { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; }

/* Exam mode cards: each mode is a self-describing card, so no tooltip needed */
.mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.mode-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.mode-card:hover { border-color: var(--accent-mid, #3b82f6); }
.mode-card.selected {
  border-color: var(--accent-mid, #3b82f6);
  box-shadow: inset 0 0 0 1px var(--accent-mid, #3b82f6);
  background: rgba(59, 130, 246, 0.06);
}
.mode-card-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.mode-card-desc { font-size: 11px; line-height: 1.45; color: var(--text-secondary); }
/* Confirmation under each API-key field. Quiet by default; it only has
   something to say once a key is actually in the box. */
.key-status { font-size: 12px; line-height: 1.5; margin-top: 6px; color: var(--text-tertiary); }
.key-status.ok { color: var(--accent-mid, #3b82f6); }
.key-status.warn { color: var(--red, #b91c1c); }

.mode-card-badge { font-size: 10px; font-weight: 600; margin-top: auto; color: var(--accent-mid, #3b82f6); }
.mode-card-badge.paid { color: var(--text-tertiary); font-weight: 500; }

/* Voice Pro credit meter. The three arcs of #icon-voice-pro are the included
   exams; data-credits on the card is how many are left, and a spent arc fades
   rather than disappearing so the shape of the mark never changes. Outermost
   arc goes first, which reads as the signal shrinking. Transition, not a jump:
   the count changes the moment an exam starts, and a fade explains itself. */
.mode-card[data-credits="2"] { --vp-w3: .18; }
.mode-card[data-credits="1"] { --vp-w3: .18; --vp-w2: .18; }
.mode-card[data-credits="0"] { --vp-w3: .18; --vp-w2: .18; --vp-w1: .18; }
@media (prefers-reduced-motion: reduce) { .mode-card { --vp-fade: 0s; } }

/* ── RECORD MODE ── */
.record-layout {
  display: flex; flex: 1; overflow: hidden;
}
.record-sidebar .case-title { font-family: var(--serif); font-size: 18px; margin-bottom: 12px; }
.record-sidebar .case-stem {
  border-left: 2px solid var(--border-strong); padding-left: 10px;
  font-size: 12px; line-height: 1.7; color: var(--text-secondary);
}
.record-main {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2rem; padding: 2rem;
}
.record-indicator {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.record-indicator.active { color: var(--red); }
.record-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-tertiary);
}
.record-dot.active { background: var(--red); animation: pulse 1.2s infinite; }
.record-timer {
  font-family: var(--mono); font-size: 48px; font-weight: 500;
  color: var(--text-primary);
}
.record-controls { display: flex; gap: 12px; align-items: center; }
.record-live-transcript {
  width: 100%; max-width: 600px; max-height: 300px;
  overflow-y: auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 1rem; font-size: 13px; line-height: 1.7;
  color: var(--text-secondary); white-space: pre-wrap;
}
.record-live-transcript.hidden { display: none; }
.browser-warning {
  background: var(--amber-light); border: 1px solid #E8D4A8;
  border-radius: 6px; padding: 8px 14px; font-size: 12px;
  color: var(--amber); margin-top: 8px;
}

/* Feedback cards */
.feedback-card { padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; line-height: 1.6; }
.feedback-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.feedback-card-question { font-weight: 600; color: var(--text-primary); }
.feedback-rating { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.feedback-rating.strong { background: #dcfce7; color: #166534; }
.feedback-rating.adequate { background: #dbeafe; color: #1e40af; }
.feedback-rating.borderline { background: #fef3c7; color: #92400e; }
.feedback-rating.insufficient { background: #fee2e2; color: #991b1b; }
.feedback-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-tertiary); margin-top: 8px; margin-bottom: 2px; }
.feedback-text { color: var(--text-secondary); }
.overall-pass { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.overall-borderline { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.overall-fail { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Text mode chat UI */
.text-chat-input { display: flex; gap: 8px; padding: 8px 0; }
.text-chat-input textarea { flex: 1; resize: none; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-primary); font-size: 13px; font-family: inherit; min-height: 44px; max-height: 120px; }
.text-chat-input textarea:focus { outline: none; border-color: var(--accent-mid, #3b82f6); }
.text-chat-input button { padding: 10px 20px; border-radius: 8px; background: var(--accent-mid, #3b82f6); color: #fff; border: none; cursor: pointer; font-size: 13px; font-weight: 500; white-space: nowrap; }
.text-chat-input button:disabled { opacity: 0.5; cursor: not-allowed; }

.feedback-choice {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  margin: 16px 0; background: var(--surface);
}
.fb-opt { display: flex; gap: 9px; align-items: flex-start; font-size: 13px;
  line-height: 1.5; padding: 5px 0; cursor: pointer; color: var(--text-secondary); }
.fb-opt input { margin-top: 3px; flex: 0 0 auto; }
.fb-opt strong { color: var(--text-primary); font-weight: 600; }
.fb-opt em { font-style: normal; opacity: 0.75; font-size: 12px; }

.break-divider {
  text-align: center; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--amber, #b45309); margin: 14px 0; padding: 5px 0;
  border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
}

/* Pre-exam reading. A stem is dense clinical text read against a 10-minute
   clock, so it is set as labelled pairs and real lists rather than a wall.
   Labels sit inline with their value: a stacked label costs a line each and a
   stem has a dozen of them. */
.stem-block { margin-bottom: 14px; }
.stem-lead { font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
.stem-pair { margin-bottom: 4px; }
.stem-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-mid, #3b82f6); margin-right: 8px; white-space: nowrap;
}
.stem-body { color: var(--text-secondary); }
.stem-list { margin: 4px 0 0; padding-left: 18px; color: var(--text-secondary); }
.stem-list li { margin-bottom: 3px; }
/* The key in "Airway: mouth opening adequate" and its like. */
.stem-key { font-weight: 600; color: var(--text-primary); }

/* Report-a-problem widget (floating, available on every screen) */
/* On a phone the bottom-right corner is the thumb zone and the control rows
   are full width, so a floating button there covers whatever is beneath it.
   Two changes for small screens: it moves to the bottom-LEFT and shrinks, and
   it disappears entirely on the exam and record screens — during a timed exam
   the controls matter and a feedback button does not. It is still reachable
   from every other screen, and from the results screen straight afterwards. */
@media (max-width: 640px) {
    #report-panel { right: auto; left: 12px; bottom: 52px; }
  body:has(#screen-exam.active) #report-panel,
  body:has(#screen-record.active) #report-panel { display: none; }
}

#report-panel {
  position: fixed; bottom: 62px; right: 18px; z-index: 900; width: 320px;
  max-width: calc(100vw - 36px); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.16); display: none;
}
#report-panel.open { display: block; }
#report-panel .report-title { font-weight: 600; font-size: 13px; color: var(--text-primary); margin-bottom: 8px; }
#report-panel textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 90px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text-primary); font-size: 13px;
  font-family: inherit; margin-bottom: 8px;
}
#report-panel input {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  color: var(--text-primary); font-size: 13px; font-family: inherit; margin-bottom: 8px;
}
#report-status { font-size: 12px; min-height: 16px; margin-bottom: 8px; color: var(--text-tertiary); }
#report-status.error { color: var(--red, #b91c1c); }
#report-status.ok { color: var(--accent-mid); }
.report-actions { display: flex; gap: 8px; justify-content: flex-end; }
.report-actions button { font-size: 12px; padding: 7px 14px; }