/* ============================================================
   CERTMESA / Exam Engine CSS
   Reuses CSS custom properties from assets/styles.css
   (--bg, --ink, --good, --bad, --warn, --accent, --line, --surface, etc.)
   so dark/light theme switching is automatic.
   All exam-specific classes are namespaced .ex- to avoid collisions
   with the quick-quiz styles in styles.css.
   ============================================================ */

/* ---------- Base ---------- */
.ex-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 28px 80px;
}
.ex-view { display: none; }
.ex-view.active { display: block; }

/* Buttons (mirror .btn from styles.css but with .ex- namespace) */
.ex-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer; transition: background 0.12s, transform 0.12s, color 0.12s;
}
.ex-btn:hover { background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-1px); }
.ex-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.ex-btn.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-2);
}
.ex-btn.ghost:hover { background: var(--surface); color: var(--accent); border-color: var(--accent); transform: none; }
.ex-btn.lg { padding: 16px 28px; font-size: 14px; }
.ex-btn .arrow { font-family: 'JetBrains Mono', monospace; }

.ex-link {
  color: var(--ink-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; text-decoration: none;
  letter-spacing: 0.06em;
}
.ex-link:hover { color: var(--accent); }

/* ============================================================
   VIEW 1: Briefing
   ============================================================ */
.ex-resume-banner {
  display: none;
  margin-bottom: 32px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--warn);
  font-family: 'JetBrains Mono', monospace;
}
.ex-resume-banner.active { display: block; }
.ex-resume-banner .ex-resume-h {
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--warn);
  margin: 0 0 8px;
  font-weight: 600;
}
.ex-resume-banner .ex-resume-msg {
  font-size: 13px; color: var(--ink-2);
  margin-bottom: 16px;
  line-height: 1.55;
}
.ex-resume-banner .ex-resume-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.ex-briefing-hero {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.ex-briefing-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.ex-briefing-name {
  font-size: 36px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.1;
}
.ex-briefing-subtitle {
  font-size: 15px; color: var(--ink-2);
  line-height: 1.6;
  max-width: 680px;
  margin-bottom: 8px;
}
.ex-briefing-updated {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--ink-dim);
  letter-spacing: 0.06em;
}

.ex-briefing-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: 36px;
}
.ex-briefing-stats .ex-stat {
  padding: 22px 24px;
  border-right: 1px solid var(--line);
}
.ex-briefing-stats .ex-stat:last-child { border-right: none; }
.ex-briefing-stats .ex-stat-l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim);
  font-weight: 500;
  margin-bottom: 10px;
}
.ex-briefing-stats .ex-stat-v {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: 24px;
  color: var(--ink); letter-spacing: -0.02em;
}

.ex-briefing-section { margin-bottom: 36px; }
.ex-briefing-section h2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim);
  font-weight: 500;
  margin: 0 0 14px;
}

.ex-length-selector {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ex-length-tog {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 14px 16px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-2);
  font-family: inherit;
  cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s;
  text-align: left;
}
.ex-length-tog:hover { background: var(--bg-2); border-color: var(--accent); color: var(--ink); }
.ex-length-tog.active {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink);
}
.ex-length-tog-label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: 14px;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.ex-length-tog-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em;
  opacity: 0.75;
}

.ex-domain-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.ex-domain-row:last-child { border-bottom: none; }
.ex-domain-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--ink-dim);
  letter-spacing: 0.06em;
}
.ex-domain-name {
  font-size: 13px; color: var(--ink);
}
.ex-domain-cnt, .ex-domain-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--ink-2);
  letter-spacing: 0.06em;
  min-width: 50px; text-align: right;
}
.ex-domain-pct { color: var(--ink-dim); }

.ex-rules {
  background: var(--surface);
  border: 1px solid var(--line-2);
  padding: 20px 24px;
  font-size: 13px; color: var(--ink-2);
  line-height: 1.7;
}
.ex-rules ul { padding-left: 18px; margin: 0; }
.ex-rules li { margin-bottom: 6px; }
.ex-rules li:last-child { margin-bottom: 0; }
.ex-rules li strong { color: var(--ink); }

.ex-briefing-cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 36px;
}

.ex-history { margin-top: 48px; }
.ex-history-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim);
  font-weight: 500;
  margin: 0 0 14px;
}
.ex-history-empty {
  padding: 24px; text-align: center;
  color: var(--ink-dim);
  border: 1px dashed var(--line-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.ex-history-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  align-items: center;
}
.ex-history-row:last-child { border-bottom: none; }
.ex-history-date { color: var(--ink-2); }
.ex-history-mode { color: var(--ink-dim); letter-spacing: 0.06em; }
.ex-history-score { font-weight: 700; min-width: 50px; text-align: right; }
.ex-history-score.pass { color: var(--good); }
.ex-history-score.fail { color: var(--bad); }
.ex-history-time { color: var(--ink-dim); min-width: 60px; text-align: right; }

/* ============================================================
   VIEW 2: Active exam
   ============================================================ */
.ex-topbar {
  position: sticky; top: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
  padding: 14px 28px;
  display: flex; align-items: center; gap: 24px;
  z-index: 5;
  margin: -24px -28px 24px;
}
.ex-topbar-left { flex: 1; min-width: 0; }
.ex-topbar-right { display: flex; align-items: center; gap: 16px; }

.ex-q-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink-2); font-weight: 500;
}
.ex-q-domain-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line-2);
  padding: 4px 10px;
  margin-top: 6px;
}

.ex-timer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 6px 14px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  min-width: 90px; text-align: center;
}
.ex-timer.warn { color: var(--warn); border-color: var(--warn); }
.ex-timer.danger { color: var(--bad); border-color: var(--bad); }
.ex-timer.critical {
  color: #fff; background: var(--bad); border-color: var(--bad);
  animation: ex-timer-flash 1s infinite;
}
@keyframes ex-timer-flash {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.6; }
}

.ex-exit-btn {
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line-2);
  padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em;
  cursor: pointer;
}
.ex-exit-btn:hover { color: var(--accent); border-color: var(--accent); }

.ex-active-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 36px;
  align-items: start;
}
.ex-active-main { min-width: 0; }

.ex-question {
  font-size: 18px; line-height: 1.55;
  color: var(--ink);
  margin: 12px 0 32px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.ex-options {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 32px;
}
.ex-option {
  display: flex; align-items: stretch;
  border: 1px solid var(--line-2);
  background: var(--surface);
  transition: border-color 0.12s, background 0.12s;
}
.ex-option:hover { border-color: var(--accent); }
.ex-option.selected {
  border-color: var(--accent);
  background: var(--good-bg);
}
.ex-option.struck .ex-option-text {
  text-decoration: line-through;
  opacity: 0.4;
}
.ex-option-main {
  flex: 1;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  background: transparent; border: none;
  text-align: left; cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  font-size: 14px; line-height: 1.55;
  min-height: 44px; /* touch target */
}
.ex-option-letter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-dim);
  font-weight: 700;
  background: var(--bg-2);
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ex-option.selected .ex-option-letter { background: var(--accent); color: #fff; }
.ex-option-text { color: var(--ink); flex: 1; }
.ex-option-strike {
  background: transparent;
  border: none; border-left: 1px solid var(--line);
  padding: 0 14px; cursor: pointer;
  color: var(--ink-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  min-width: 44px; min-height: 44px; /* touch target */
  transition: color 0.12s, background 0.12s;
}
.ex-option-strike:hover { color: var(--accent); background: var(--bg-2); }
.ex-option-strike.active { color: var(--bad); }

.ex-active-foot {
  display: flex; align-items: center; gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.ex-active-foot .grow { flex: 1; }

.ex-mark-btn {
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line-2);
  padding: 10px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
}
.ex-mark-btn:hover { color: var(--warn); border-color: var(--warn); }
.ex-mark-btn.marked { color: var(--warn); border-color: var(--warn); background: var(--surface); }
.ex-mark-btn::before { content: '☆'; font-size: 14px; }
.ex-mark-btn.marked::before { content: '★'; }

/* Sidebar nav grid */
.ex-active-sidebar {
  background: var(--surface);
  border: 1px solid var(--line-2);
  padding: 16px;
  position: sticky; top: 80px;
}
.ex-sidebar-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim);
  font-weight: 500;
  margin: 0 0 12px;
}
.ex-nav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.ex-grid-cell {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  color: var(--ink-dim);
  padding: 8px 4px;
  cursor: pointer;
  min-height: 32px;
  transition: border-color 0.1s, background 0.1s, color 0.1s;
}
.ex-grid-cell:hover { border-color: var(--accent); }
.ex-grid-cell.unanswered { color: var(--ink-dim); }
.ex-grid-cell.answered { color: var(--ink); background: var(--good-bg); border-color: var(--good); }
.ex-grid-cell.marked { color: var(--warn); border-color: var(--warn); background: var(--surface); }
.ex-grid-cell.current {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  color: var(--ink);
}
.ex-sidebar-legend {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.ex-sidebar-legend .row { display: flex; align-items: center; gap: 8px; }
.ex-sidebar-legend .sw {
  width: 10px; height: 10px; border: 1px solid var(--line-2);
  flex-shrink: 0;
}
.ex-sidebar-legend .sw.answered { background: var(--good-bg); border-color: var(--good); }
.ex-sidebar-legend .sw.marked   { border-color: var(--warn); background: var(--surface); }
.ex-sidebar-legend .sw.current  { outline: 1px solid var(--accent); outline-offset: -1px; }

/* ============================================================
   VIEW 3: Review screen
   ============================================================ */
.ex-review-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.ex-review-head-left h2 {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink);
  margin: 0 0 4px;
}
.ex-review-stats {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--ink-dim);
  letter-spacing: 0.06em;
}
.ex-review-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px; font-weight: 700;
  color: var(--ink);
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--line-2);
}

.ex-review-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.ex-review-filter {
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-2);
  padding: 8px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.06em;
  cursor: pointer;
}
.ex-review-filter:hover { color: var(--accent); border-color: var(--accent); }
.ex-review-filter.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.ex-review-grid-wrap { margin-bottom: 32px; }
.ex-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 8px;
}
.ex-review-grid .ex-grid-cell { min-height: 44px; font-size: 13px; }
.ex-review-empty {
  grid-column: 1 / -1;
  padding: 32px;
  text-align: center;
  color: var(--ink-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

.ex-review-foot {
  display: flex; align-items: center; gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.ex-review-foot .grow { flex: 1; }
.ex-submit-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--ink-dim);
  letter-spacing: 0.06em;
}

/* ============================================================
   VIEW 4: Results
   ============================================================ */
.ex-results-banner {
  padding: 36px 32px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  margin-bottom: 36px;
}
.ex-results-banner.pass { border-color: var(--good); }
.ex-results-banner.fail { border-color: var(--bad); }

.ex-results-score-row {
  display: flex; align-items: baseline;
  gap: 18px; margin-bottom: 12px;
  flex-wrap: wrap;
}
.ex-results-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 56px; font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink); line-height: 1;
}
.ex-results-banner.pass .ex-results-score { color: var(--good); }
.ex-results-banner.fail .ex-results-score { color: var(--bad); }
.ex-results-verdict {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.ex-results-banner.pass .ex-results-verdict { color: var(--good); }
.ex-results-banner.fail .ex-results-verdict { color: var(--bad); }
.ex-results-summary {
  font-size: 14px; color: var(--ink-2);
  line-height: 1.6;
}

.ex-results-meta {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: 32px;
}
.ex-results-meta .cell {
  padding: 18px 22px;
  border-right: 1px solid var(--line);
}
.ex-results-meta .cell:last-child { border-right: none; }
.ex-results-meta .l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim);
  font-weight: 500;
  margin-bottom: 8px;
}
.ex-results-meta .v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px; font-weight: 600;
  color: var(--ink);
}

.ex-results-section { margin-bottom: 36px; }
.ex-results-section h2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim);
  font-weight: 500;
  margin: 0 0 16px;
}

.ex-result-bar-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 2fr auto;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.ex-result-bar-row:last-child { border-bottom: none; }
.ex-result-bar-label {
  font-size: 13px; color: var(--ink);
}
.ex-result-bar-wrap {
  height: 8px; background: var(--bg-2);
  position: relative;
  border: 1px solid var(--line);
}
.ex-result-bar {
  height: 100%;
  background: var(--good);
  transition: width 0.3s;
}
.ex-result-bar.fail { background: var(--bad); }
.ex-result-bar-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--ink-2);
  letter-spacing: 0.06em;
  min-width: 90px; text-align: right;
}

.ex-results-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 36px;
}

/* ============================================================
   VIEW 5: Question review (post-submit)
   ============================================================ */
.ex-qreview-head {
  margin-bottom: 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.ex-qreview-head h2 {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink);
  margin: 0;
}
.ex-qreview-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.ex-qreview-filter {
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-2);
  padding: 8px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.06em;
  cursor: pointer;
}
.ex-qreview-filter:hover { color: var(--accent); border-color: var(--accent); }
.ex-qreview-filter.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.ex-qreview-list { display: flex; flex-direction: column; gap: 16px; }
.ex-qreview-card {
  border: 1px solid var(--line-2);
  background: var(--surface);
  padding: 20px 22px;
  border-left-width: 4px;
}
.ex-qreview-card.correct { border-left-color: var(--good); }
.ex-qreview-card.wrong { border-left-color: var(--bad); }

.ex-qreview-tag-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em;
}
.ex-qreview-meta { color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.12em; }
.ex-qreview-verdict.correct { color: var(--good); font-weight: 700; }
.ex-qreview-verdict.wrong { color: var(--bad); font-weight: 700; }

.ex-qreview-q {
  font-size: 15px; line-height: 1.55;
  color: var(--ink);
  margin: 0 0 16px;
  font-weight: 500;
}

.ex-qreview-opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ex-qreview-opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2);
  line-height: 1.5;
}
.ex-qreview-opt.correct-ans {
  border-color: var(--good); background: var(--good-bg);
  color: var(--ink);
}
.ex-qreview-opt.user-wrong { border-color: var(--bad); }
.ex-qreview-opt.user-right { border-color: var(--good); border-width: 2px; }
.ex-qreview-letter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  color: var(--ink-dim);
  background: var(--bg-2);
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ex-qreview-opt.correct-ans .ex-qreview-letter { background: var(--good); color: #fff; }
.ex-qreview-opt-text { flex: 1; }
.ex-qreview-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--bg-2);
  padding: 3px 8px;
  align-self: center;
}
.ex-qreview-tag.correct { background: var(--good); color: #fff; }

.ex-qreview-explanation {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--bg-2);
  border-left: 2px solid var(--ink-dim);
  font-size: 13px; line-height: 1.6;
  color: var(--ink-2);
}

.ex-qreview-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-dim);
  border: 1px dashed var(--line-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

.ex-qreview-foot {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* ============================================================
   Modals
   ============================================================ */
.ex-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100;
  align-items: center; justify-content: center;
  padding: 24px;
}
.ex-modal.active { display: flex; }
.ex-modal-card {
  background: var(--bg);
  border: 1px solid var(--line-2);
  max-width: 480px; width: 100%;
  padding: 28px;
}
.ex-modal-title {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink);
  margin: 0 0 12px;
}
.ex-modal-body {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 20px;
}
.ex-modal-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: flex-end;
}

/* ============================================================
   Mobile responsive
   ============================================================ */
@media (max-width: 900px) {
  .ex-active-layout { grid-template-columns: 1fr; }
  .ex-active-sidebar {
    position: static;
    margin-bottom: 20px;
    order: -1;
  }
  .ex-nav-grid { grid-template-columns: repeat(10, 1fr); }
}

@media (max-width: 700px) {
  .ex-shell { padding: 16px 18px 60px; }
  .ex-topbar { padding: 12px 18px; margin: -16px -18px 20px; gap: 12px; }
  .ex-briefing-name { font-size: 28px; }
  .ex-briefing-stats { grid-template-columns: 1fr; }
  .ex-briefing-stats .ex-stat { border-right: none; border-bottom: 1px solid var(--line); }
  .ex-briefing-stats .ex-stat:last-child { border-bottom: none; }
  .ex-length-selector { grid-template-columns: 1fr 1fr; }
  .ex-domain-row { grid-template-columns: 24px 1fr auto; }
  .ex-domain-pct { display: none; }
  .ex-results-meta { grid-template-columns: 1fr; }
  .ex-results-meta .cell { border-right: none; border-bottom: 1px solid var(--line); }
  .ex-results-meta .cell:last-child { border-bottom: none; }
  .ex-result-bar-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ex-result-bar-count { text-align: left; }
  .ex-history-row { grid-template-columns: 1fr 1fr; gap: 8px; font-size: 11px; }
  .ex-history-time { display: none; }
  .ex-timer { font-size: 18px; min-width: 76px; padding: 4px 10px; }
  .ex-question { font-size: 16px; }
  .ex-active-foot { gap: 8px; }
  .ex-active-foot .ex-btn { padding: 10px 16px; font-size: 12px; }
  .ex-nav-grid { grid-template-columns: repeat(8, 1fr); }
  .ex-review-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
}

@media (max-width: 420px) {
  .ex-shell { padding: 14px 14px 60px; }
  .ex-topbar { gap: 8px; padding: 10px 14px; }
  .ex-q-counter { font-size: 11px; }
  .ex-q-domain-badge { font-size: 9px; }
  .ex-results-score { font-size: 44px; }
  .ex-nav-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================================
   RETRY: "I wasn't sure" toggle, retry buttons, no-celebration
   message, domain summary view
   ============================================================ */

/* "I wasn't sure" toggle, sits beside the mark-for-review button. */
.ex-unsure-btn {
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line-2);
  padding: 10px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
}
.ex-unsure-btn:hover { color: var(--accent); border-color: var(--accent); }
.ex-unsure-btn::before { content: '?'; font-weight: 700; font-size: 13px; }
.ex-unsure-btn.unsure {
  color: var(--accent); border-color: var(--accent);
  background: var(--surface);
}
.ex-unsure-btn.unsure::before { content: '?'; }

/* Retry-mode "timer" replacement: just a label, not a countdown. */
.ex-timer.retry {
  font-size: 12px; letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border-color: var(--line-2);
  min-width: 110px;
  padding: 8px 14px;
  text-transform: uppercase;
}

/* Unsure-flag stats row on the results screen */
.ex-results-unsure {
  margin-top: 18px;
  margin-bottom: 24px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-family: 'JetBrains Mono', monospace;
}
.ex-unsure-stats-line {
  font-size: 13px; color: var(--ink);
  letter-spacing: 0.04em;
}
.ex-unsure-stats-sub {
  font-size: 11px; color: var(--ink-dim);
  margin-top: 4px;
}

/* The no-celebration message after a mode-1 retry. Brief mandates the
   wording; the styling foregrounds it without celebrating. */
.ex-retry-note {
  display: none;
  margin: 24px 0 24px;
  padding: 18px 22px;
  border-left: 4px solid var(--ink-dim);
  background: var(--surface);
}
.ex-retry-note.active { display: block; }
.ex-retry-note.mode1 { border-left-color: var(--warn); }
.ex-retry-note.mode2 { border-left-color: var(--good); }
.ex-retry-note.fallback { border-left-color: var(--warn); }
.ex-retry-note-body {
  font-size: 14px; line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* Retry buttons: side-by-side cards. Primary placement on Domain Summary,
   secondary placement on Results. */
.ex-retry-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
}
.ex-retry-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--line-2);
  background: var(--surface);
}
.ex-retry-card-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ex-retry-card-sub {
  font-size: 12px; line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.ex-retry-cap-msg {
  font-size: 12px; line-height: 1.55;
  color: var(--ink-dim);
  font-family: 'JetBrains Mono', monospace;
  padding-top: 4px;
  border-top: 1px dashed var(--line-2);
}
.ex-retry-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Make domain bars on the results screen look clickable. */
.ex-result-bar-row.clickable {
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  padding: 10px 12px;
  margin: 0 -12px;
  transition: background 0.12s, border-color 0.12s;
}
.ex-result-bar-row.clickable:hover {
  background: var(--surface);
  border-color: var(--line-2);
}
.ex-result-bar-row.clickable .ex-result-bar-label {
  color: var(--ink); font-weight: 500;
}
.ex-result-bar-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; color: var(--ink-dim);
  margin-left: 12px;
}
.ex-result-bar-row.clickable:hover .ex-result-bar-arrow {
  color: var(--accent);
}

/* Banner stays the same colour scheme but gains a subtle "retry" tag. */
.ex-results-banner.retry { border-color: var(--ink-dim); }
.ex-results-banner.retry .ex-results-verdict {
  color: var(--ink-2);
}

/* "Back to original results" navigation row, shown only on retry results. */
.ex-results-back-row {
  margin-bottom: 16px;
  font-family: 'JetBrains Mono', monospace;
}
.ex-results-back-row .ex-link {
  font-size: 12px;
}

/* ============================================================
   VIEW 6: Domain summary
   ============================================================ */
.ex-dsummary-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  margin-bottom: 16px;
}
.ex-dsummary-head h2 {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink);
  margin: 0 0 4px;
}
.ex-dsummary-head .ex-link {
  font-size: 12px;
}

.ex-dsummary-banner {
  margin-bottom: 24px;
  padding: 18px 22px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  border-left-width: 4px;
}
.ex-dsummary-banner.pass { border-left-color: var(--good); }
.ex-dsummary-banner.fail { border-left-color: var(--bad); }
.ex-dsummary-banner.none { border-left-color: var(--ink-dim); }
.ex-dsummary-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ex-dsummary-verdict {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 6px;
}
.ex-dsummary-banner.pass .ex-dsummary-verdict { color: var(--good); }
.ex-dsummary-banner.fail .ex-dsummary-verdict { color: var(--bad); }
.ex-dsummary-unsure {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--ink-2);
  margin-top: 10px;
  letter-spacing: 0.04em;
}

.ex-dsummary-section { margin-bottom: 28px; }
.ex-dsummary-section h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim);
  font-weight: 500;
  margin: 0 0 12px;
}

.ex-dsummary-text {
  font-size: 14px; line-height: 1.6;
  color: var(--ink);
  padding: 16px 18px;
  background: var(--bg-2);
  border-left: 2px solid var(--accent);
}

.ex-dsummary-list { display: flex; flex-direction: column; gap: 12px; }
.ex-dsummary-q {
  border: 1px solid var(--line-2);
  background: var(--surface);
  padding: 16px 18px;
  border-left-width: 4px;
}
.ex-dsummary-q.correct { border-left-color: var(--good); }
.ex-dsummary-q.wrong { border-left-color: var(--bad); }
.ex-dsummary-correct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--good);
  margin: 8px 0;
  padding: 6px 10px;
  background: var(--good-bg);
  border-left: 2px solid var(--good);
}

/* Domain Summary retry section. The brief calls this the PRIMARY placement,
   so it should feel slightly more prominent than the secondary copy on the
   Results screen. The cards themselves are the same; the surrounding
   container provides the contextual emphasis. */
.ex-dsummary-retry {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 2px solid var(--accent);
}
.ex-dsummary-retry-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
  font-weight: 700;
  margin: 0 0 12px;
}
.ex-dsummary-retry-sub {
  font-size: 13px; color: var(--ink-2);
  margin-bottom: 14px;
  line-height: 1.55;
  max-width: 620px;
}

.ex-dsummary-foot {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* Mobile: stack retry cards */
@media (max-width: 700px) {
  .ex-retry-row { grid-template-columns: 1fr; }
}