:root{
  --bg:#0b0f14;
  --panel:#131a22;
  --panel-2:#1a2330;
  --panel-3:#212c3b;
  --border:#28323f;
  --border-strong:#3a4756;
  --text:#e8edf2;
  --text-dim:#93a3b3;
  --text-faint:#8695a5;   /* raised from #5d6b7a for 4.5:1 contrast on panels */
  --accent:#54c7b8;
  --accent-dim:#2f5a54;
  --accent-2:#e8a33d;
  --danger:#e5646a;
  --success:#4fbf78;
  --radius:10px;
  --mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --sans:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.55;
  min-height:100vh;
}
a{color:var(--accent)}
button{font-family:var(--sans)}

.hidden{display:none !important}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ============ layout shells ============ */
.screen{
  max-width:1080px;
  margin:0 auto;
  padding:2.5rem 1.5rem 4rem;
}
.screen.exam-shell{
  max-width:1200px;
  padding-top:0;
}

/* ============ splash ============ */
.brand-row{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  margin-bottom:.35rem;
}
.brand-mark{
  font-family:var(--mono);
  font-weight:700;
  font-size:1.05rem;
  color:var(--accent);
  letter-spacing:.02em;
}
.brand-tag{
  font-family:var(--mono);
  font-size:.8rem;
  color:var(--text-faint);
}
h1.hero-title{
  font-family:var(--mono);
  font-size:clamp(1.9rem, 4vw, 2.9rem);
  font-weight:700;
  line-height:1.15;
  margin:.4rem 0 .75rem;
  letter-spacing:-.01em;
}
h1.hero-title .cursor{
  display:inline-block;
  width:.55ch;
  background:var(--accent);
  color:var(--bg);
  animation:blink 1.1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

p.hero-sub{
  color:var(--text-dim);
  font-size:1.05rem;
  max-width:640px;
  margin:0 0 2rem;
}

.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px,1fr));
  gap:.75rem;
  margin-bottom:2.25rem;
}
.stat-chip{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.85rem 1rem;
}
.stat-chip .num{
  font-family:var(--mono);
  font-size:1.35rem;
  font-weight:700;
  color:var(--accent);
  display:block;
}
.stat-chip .lbl{
  font-size:.75rem;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.section-label{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--text-faint);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 .75rem;
}

/* weighted domain bar — used on splash + results */
.weight-bar{
  display:flex;
  width:100%;
  height:34px;
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--border);
  margin-bottom:.9rem;
}
.weight-seg{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--bg);
  font-weight:700;
  min-width:2px;
  white-space:nowrap;
  overflow:hidden;
}
.weight-legend{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
  gap:.4rem .9rem;
  margin-bottom:2.25rem;
}
.weight-legend-item{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.83rem;
  color:var(--text-dim);
}
.swatch{
  width:10px;
  height:10px;
  border-radius:2px;
  flex:none;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  gap:.9rem;
  margin-bottom:2.5rem;
}
.feature-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.1rem;
}
.feature-card .ft{
  font-weight:600;
  margin-bottom:.3rem;
  font-size:.95rem;
}
.feature-card .fd{
  color:var(--text-dim);
  font-size:.85rem;
}

.cta-row{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1.5rem;
}
.btn{
  font-family:var(--sans);
  font-weight:600;
  font-size:.95rem;
  border-radius:8px;
  border:1px solid var(--border-strong);
  background:var(--panel-2);
  color:var(--text);
  padding:.75rem 1.4rem;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, transform .08s ease;
}
.btn:hover{ background:var(--panel-3); border-color:var(--accent); }
.btn:active{ transform:scale(0.98); }
.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#04211d;
}
.btn-primary:hover{ background:#66d4c5; border-color:#66d4c5; }
.btn-ghost{
  background:transparent;
  border-color:var(--border);
}
.btn-sm{ padding:.5rem 1rem; font-size:.85rem; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

.disclaimer{
  font-size:.78rem;
  color:var(--text-faint);
  border-top:1px solid var(--border);
  padding-top:1.25rem;
  max-width:720px;
}

/* ============ exam screen ============ */
.exam-topbar{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  padding:.85rem 1.5rem;
  display:flex;
  align-items:center;
  gap:1.25rem;
  flex-wrap:wrap;
}
.exam-topbar .title{
  font-family:var(--mono);
  font-weight:700;
  color:var(--accent);
  font-size:.9rem;
  margin-right:auto;
}
.timer{
  font-family:var(--mono);
  font-size:1.1rem;
  font-weight:700;
  padding:.35rem .75rem;
  border-radius:6px;
  background:var(--panel-2);
  border:1px solid var(--border);
}
.timer.warn{ color:var(--accent-2); border-color:var(--accent-2); }
.timer.danger{ color:var(--danger); border-color:var(--danger); }
.progress-txt{
  font-family:var(--mono);
  font-size:.85rem;
  color:var(--text-dim);
}

.exam-body{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:1.5rem;
  padding:1.5rem;
  align-items:start;
}
@media (max-width: 820px){
  .exam-body{ grid-template-columns:1fr; }
}

.nav-panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
  position:sticky;
  top:70px;
}
.nav-panel h2{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-faint);
  margin:0 0 .75rem;
}
.nav-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:5px;
}
.nav-cell{
  aspect-ratio:1;
  border-radius:5px;
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:.68rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
}
.nav-cell:hover{ border-color:var(--accent); }
.nav-cell.answered{ background:var(--accent-dim); color:var(--text); border-color:var(--accent); }
.nav-cell.current{ outline:2px solid var(--accent); outline-offset:1px; }
.nav-cell.flagged::after{
  content:"";
  position:absolute;
  top:2px; right:2px;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--accent-2);
}
.nav-legend{
  margin-top:.9rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  font-size:.72rem;
  color:var(--text-faint);
}
.nav-legend span{ display:flex; align-items:center; gap:.4rem; }
.nav-legend i{ width:9px; height:9px; border-radius:3px; display:inline-block; border:1px solid var(--border); }

.q-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.75rem;
}
.q-meta{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1rem;
  flex-wrap:wrap;
}
.domain-pill{
  font-family:var(--mono);
  font-size:.7rem;
  padding:.25rem .6rem;
  border-radius:999px;
  background:var(--panel-2);
  border:1px solid var(--border-strong);
  color:var(--text-dim);
}
.type-pill{
  font-family:var(--mono);
  font-size:.7rem;
  padding:.25rem .6rem;
  border-radius:999px;
  background:var(--panel-2);
  color:var(--text-faint);
}
.flag-btn{
  margin-left:auto;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-dim);
  border-radius:6px;
  padding:.35rem .7rem;
  font-size:.78rem;
  cursor:pointer;
}
.flag-btn.active{ border-color:var(--accent-2); color:var(--accent-2); background:rgba(232,163,61,.08); }

.q-text{
  font-size:1.12rem;
  line-height:1.6;
  margin:0 0 1.4rem;
  /* preserves the line breaks in enumerated order-of-operations stems,
     while still wrapping normally for every other question */
  white-space:pre-wrap;
}

.options{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  margin-bottom:1.5rem;
}
.option-row{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  border:1px solid var(--border);
  border-radius:8px;
  padding:.75rem .9rem;
  background:var(--panel-2);
  transition:border-color .1s ease, background .1s ease;
}
.option-row:hover{ border-color:var(--border-strong); }
.strike-btn{
  flex:none;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-faint);
  border-radius:6px;
  width:30px; height:30px;
  cursor:pointer;
  font-family:var(--mono);
  font-size:.85rem;
}
.strike-btn:hover{ border-color:var(--danger); color:var(--danger); }
.strike-btn.active{ border-color:var(--danger); color:var(--danger); background:rgba(229,100,106,.1); }

.q-nav-buttons{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
}
.q-nav-buttons .right-group{ display:flex; gap:.6rem; }

/* ============ results screen ============ */
.score-hero{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  align-items:center;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.75rem;
  margin-bottom:2rem;
}
.score-big{
  font-family:var(--mono);
  font-size:3rem;
  font-weight:700;
  line-height:1;
}
.score-sub{ color:var(--text-dim); font-size:.85rem; margin-top:.3rem; }
.badge{
  font-family:var(--mono);
  font-size:.8rem;
  font-weight:700;
  padding:.4rem .9rem;
  border-radius:999px;
  letter-spacing:.03em;
}
.badge.pass{ background:rgba(79,191,120,.15); color:var(--success); border:1px solid var(--success); }
.badge.fail{ background:rgba(229,100,106,.15); color:var(--danger); border:1px solid var(--danger); }

.domain-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:2.25rem;
}
.domain-table th{
  text-align:left;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-faint);
  padding:.5rem .6rem;
  border-bottom:1px solid var(--border);
}
.domain-table td{
  padding:.65rem .6rem;
  border-bottom:1px solid var(--border);
  font-size:.9rem;
}
.mini-bar-track{
  width:100%;
  height:7px;
  background:var(--panel-2);
  border-radius:4px;
  overflow:hidden;
}
.mini-bar-fill{ height:100%; background:var(--accent); }

/* Replaces style="" attributes that used to be built into innerHTML strings, so the
   Content-Security-Policy can forbid inline styles outright. */
.stat-chip .num .unit{ font-size:.9rem; }
.weight-legend-item .faint{ color:var(--text-faint); }
.domain-table .num{ font-family:var(--mono); }
.domain-table .num-right{ text-align:right; }
.domain-table th.col-progress{ width:160px; }
.domain-table th.col-percent{ text-align:right; }
.nav-legend .swatch-answered{ background:var(--accent-dim); border-color:var(--accent); }
.nav-legend .swatch-unanswered{ background:var(--panel-2); }
.nav-legend .swatch-flagged{ background:var(--accent-2); border-radius:50%; }
.cta-row .cta-note{ color:var(--text-faint); font-size:.85rem; }

.review-item{
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:.75rem;
  overflow:hidden;
}
.review-head{
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  background:var(--panel);
  border:none;
  color:var(--text);
  padding:.85rem 1rem;
  cursor:pointer;
  font-family:var(--sans);
  font-size:.9rem;
  text-align:left;
}
.review-head .status-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.review-head .status-dot.correct{ background:var(--success); }
.review-head .status-dot.incorrect{ background:var(--danger); }
.review-head .qnum{ font-family:var(--mono); color:var(--text-faint); flex:none; }
/* keep the numbered lines of order-of-operations stems readable in the results review,
   and nudge the dot/number down to sit on the first line of a multi-line stem */
.review-head .status-dot{ margin-top:.42rem; }
.review-head .q-summary{ white-space:pre-wrap; }
.review-body{
  padding:1rem 1.25rem 1.25rem;
  background:var(--panel-2);
  border-top:1px solid var(--border);
  font-size:.88rem;
}
.review-body .your-ans{ color:var(--danger); }
.review-body .correct-ans{ color:var(--success); }
.review-body .exp{ color:var(--text-dim); margin-top:.6rem; }

.results-actions{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
  margin:1.5rem 0 2rem;
}

/* ============ COURSE PICKER ============ */
.course-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1rem;
  margin:2rem 0 2.5rem;
}
.course-card{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  text-align:left;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:1.15rem 1.25rem 1.1rem;
  cursor:pointer;
  color:var(--text);
  font-family:var(--sans);
  transition:border-color .15s, transform .15s, background .15s;
}
.course-card:hover{
  border-color:var(--accent);
  background:var(--panel-2);
  transform:translateY(-2px);
}
.course-card .cc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  width:100%;
}
.course-card .cc-code{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--accent);
}
.course-card .cc-status{
  border:1px solid var(--accent-2);
  border-radius:999px;
  color:var(--accent-2);
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.05em;
  padding:.22rem .55rem;
  text-transform:uppercase;
}
.course-card.coming-soon,
.course-card.coming-soon:hover{
  background:var(--panel);
  border-color:var(--border);
  cursor:not-allowed;
  opacity:.72;
  transform:none;
}
.course-card .cc-name{ font-size:1.02rem; font-weight:600; line-height:1.3; }
.course-card .cc-tier{
  font-size:.8rem;
  color:var(--text-faint);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.course-card .cc-blurb{
  font-size:.86rem;
  color:var(--text-dim);
  line-height:1.5;
  margin-top:.35rem;
  flex:1;
}
.course-card .cc-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:.7rem;
  padding-top:.7rem;
  border-top:1px solid var(--border);
  font-family:var(--mono);
  font-size:.76rem;
  color:var(--text-faint);
}

.link-btn{
  background:none;
  border:none;
  color:var(--text-faint);
  font-family:var(--sans);
  font-size:.82rem;
  cursor:pointer;
  /* Measured at 140x16 in Chrome, below the 24x24 minimum in WCAG 2.5.8. Unlike the
     option inputs, this control has no associated label to enlarge its target. */
  min-height:24px;
  display:inline-flex;
  align-items:center;
  padding:0 .25rem;
  padding:0;
  margin-left:auto;
}
.link-btn:hover{ color:var(--accent); text-decoration:underline; }

.format-note{
  background:var(--panel-2);
  border-left:3px solid var(--accent-2);
  border-radius:0 6px 6px 0;
  padding:.7rem .95rem;
  font-size:.88rem;
  color:var(--text-dim);
  margin:0 0 1.6rem;
}

/* ============ SCENARIO PANEL ============ */
.scenario-panel{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-left:3px solid var(--accent-2);
  border-radius:0 8px 8px 0;
  padding:.9rem 1.1rem 1rem;
  margin-bottom:1.25rem;
}
.scenario-label{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin-bottom:.3rem;
}
.scenario-title{ font-weight:600; font-size:.95rem; margin-bottom:.4rem; }
.scenario-text{
  font-size:.88rem;
  line-height:1.6;
  color:var(--text-dim);
  white-space:pre-wrap;
}

/* ============ ACCESSIBILITY PRIMITIVES ============ */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:#04211d;
  padding:.6rem 1rem; border-radius:0 0 6px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ============ SEMANTIC OPTIONS ============ */
.options-fieldset{ border:0; margin:0; padding:0; }
.option-row{
  display:flex; align-items:flex-start; gap:.75rem;
  background:var(--panel); border:1px solid var(--border);
  border-radius:8px; padding:.85rem 1rem; margin-bottom:.6rem;
  transition:border-color .12s, background .12s;
}
.option-row:hover{ border-color:var(--border-strong); }
.option-row:focus-within{ border-color:var(--accent); outline:2px solid var(--accent); outline-offset:1px; }
.option-row.struck .option-label{ text-decoration:line-through; opacity:.45; }
.option-input{
  width:18px; height:18px; margin:.15rem 0 0; flex:none;
  accent-color:var(--accent); cursor:pointer;
}
.option-label{ flex:1; cursor:pointer; line-height:1.5; }
.option-row.selected{ border-color:var(--accent); background:var(--panel-2); }
.strike-btn{
  flex:none; background:transparent; border:1px solid var(--border);
  color:var(--text-faint); border-radius:6px; cursor:pointer;
  font-size:.75rem; padding:.2rem .45rem; line-height:1.2;
}
.strike-btn:hover{ color:var(--text); border-color:var(--border-strong); }
.strike-btn.active{ color:var(--accent-2); border-color:var(--accent-2); }

/* ============ RESUME BAR ============ */
.resume-bar{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  background:var(--panel-2); border:1px solid var(--accent-2);
  border-radius:8px; padding:.8rem 1rem; margin:1rem 0 1.5rem;
  font-size:.9rem;
}
.resume-actions{ display:flex; gap:.5rem; margin-left:auto; }

/* ============ PRE-SUBMISSION REVIEW ============ */
.presubmit-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(44px,44px)); gap:6px; margin-bottom:1.5rem; }
.presubmit-grid .nav-cell{ aspect-ratio:1; }
.presubmit-empty{ color:var(--text-faint); font-size:.9rem; margin:0 0 1.5rem; }

/* ============ RESULTS FILTERS ============ */
.filter-row{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.filter-btn, .tool-btn{
  background:var(--panel); border:1px solid var(--border); color:var(--text-dim);
  border-radius:999px; padding:.35rem .9rem; font-size:.82rem; cursor:pointer;
}
.filter-btn:hover, .tool-btn:hover{ border-color:var(--border-strong); color:var(--text); }
.filter-btn.active{ background:var(--accent-dim); border-color:var(--accent); color:var(--text); }
.review-count{ margin-left:auto; font-family:var(--mono); font-size:.78rem; color:var(--text-faint); }

/* ============ MOBILE ============ */
.nav-toggle{ display:none; }
@media (max-width: 820px){
  .nav-toggle{ display:inline-block; }
  .nav-panel{
    display:none; order:-1; position:static;
    max-height:40vh; overflow-y:auto;
  }
  .nav-panel.open{ display:block; }
  .exam-topbar{ gap:.6rem; padding:.7rem 1rem; }
  .exam-topbar .title{ margin-right:.5rem; }
  .progress-txt{ width:100%; order:5; }
  .nav-grid{ grid-template-columns:repeat(8, 1fr); }
  .exam-body{ padding:1rem; }
}
@media (max-width: 620px){
  /* stacked results table — the header row stops being meaningful at this width */
  .domain-table thead{ display:none; }
  .domain-table, .domain-table tbody, .domain-table tr, .domain-table td{ display:block; width:100%; }
  .domain-table tr{
    border:1px solid var(--border); border-radius:8px;
    padding:.6rem .8rem; margin-bottom:.6rem; background:var(--panel);
  }
  .domain-table td{ border:0; padding:.15rem 0; }
  .domain-table td::before{
    content:attr(data-label) ": ";
    color:var(--text-faint); font-size:.78rem;
  }
  .domain-table td[data-label="Domain"]{ font-weight:600; }
  .domain-table td[data-label="Domain"]::before{ content:""; }
  .nav-grid{ grid-template-columns:repeat(6, 1fr); }
  .score-hero{ flex-direction:column; align-items:flex-start; gap:.75rem; }
  .review-head{ font-size:.85rem; }
}

/* ============ ATTEMPT HISTORY ============ */
.history-panel{
  border-top:1px solid var(--border);
  padding-top:1.5rem;
  margin-top:.5rem;
}
.history-head{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  margin-bottom:.5rem;
}
.history-head .section-label{ margin:0; }
.history-actions{ display:flex; gap:.4rem; margin-left:auto; }
.history-stats{
  font-size:.85rem; color:var(--text-dim);
  margin:0 0 .9rem; font-family:var(--mono);
}
.history-table{
  width:100%; border-collapse:collapse; font-size:.85rem; margin-bottom:.9rem;
}
.history-table th{
  text-align:left; font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  padding:.4rem .6rem; border-bottom:1px solid var(--border);
}
.history-table td{
  padding:.5rem .6rem; border-bottom:1px solid var(--border); color:var(--text-dim);
}
.history-table tr:last-child td{ border-bottom:0; }
.badge-sm{
  font-size:.72rem; font-weight:600; padding:.15rem .5rem;
  border-radius:999px; display:inline-block;
}
.badge-sm.pass{ background:rgba(79,191,120,.15); color:var(--success); }
.badge-sm.fail{ background:rgba(229,100,106,.15); color:var(--danger); }
.history-weak{
  font-size:.83rem; color:var(--text-dim); margin:0 0 .5rem;
  display:flex; align-items:center; gap:.35rem; flex-wrap:wrap;
}
.history-weak .swatch{ margin-right:.15rem; }
.history-note{
  font-size:.75rem; color:var(--text-faint); margin:0;
}
.score-compare{
  font-size:.85rem; color:var(--accent); margin-top:.4rem;
}

@media (max-width: 620px){
  .history-table thead{ display:none; }
  .history-table, .history-table tbody, .history-table tr, .history-table td{ display:block; width:100%; }
  .history-table tr{
    border:1px solid var(--border); border-radius:8px;
    padding:.5rem .7rem; margin-bottom:.5rem; background:var(--panel);
  }
  .history-table td{ border:0; padding:.12rem 0; }
  .history-table td::before{ content:attr(data-label) ": "; color:var(--text-faint); font-size:.75rem; }
  .history-actions{ margin-left:0; width:100%; }
}

/* results: scenario context, partial credit, extra controls */
.review-scenario{
  display:block; background:var(--panel-2); border-left:3px solid var(--accent-2);
  border-radius:0 6px 6px 0; padding:.6rem .8rem; margin:.5rem 0;
}
.review-scenario-text{
  display:block; margin-top:.35rem; font-size:.85rem;
  color:var(--text-dim); line-height:1.6; white-space:pre-wrap;
}
.review-partial{
  color:var(--accent-2); font-size:.85rem; margin-top:.35rem;
}
.review-domain{
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:999px; padding:.35rem .8rem; font-size:.82rem; font-family:var(--sans);
}
.badge-stack{ display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; }
.badge-caveat{
  font-size:.72rem; color:var(--text-faint); max-width:260px; text-align:right; line-height:1.4;
}
@media (max-width: 620px){
  .badge-stack{ align-items:flex-start; }
  .badge-caveat{ text-align:left; }
}