/*
 * Shared styles for the candidate-facing pages.
 *
 * Extracted from the original single-file demo client so the sign-in page,
 * the dashboard, the test runner and the review screen look like one product
 * rather than four. The test-surface rules below are assessment decisions as
 * much as visual ones - see the comments in each block.
 */

  :root{
    --ink:#12263f; --muted:#6b7c93; --line:#e3e9f0; --bg:#f7fafc;
    --panel:#ffffff; --accent:#0d7d8c; --accent-soft:#eef7f8;
    --warn:#b4690e; --ok:#1a7f52; --danger:#b42318;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);
    font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
  .shell{max-width:900px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
  .topbar{display:flex;align-items:center;gap:12px;padding:14px 20px;
    border-bottom:1px solid var(--line);background:var(--panel);font-size:13px;color:var(--muted)}
  .brand{font-weight:700;color:var(--ink);letter-spacing:.02em}
  .topbar .spacer{flex:1}
  main{flex:1;padding:28px 20px}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:26px}
  h1{font-size:26px;margin:0 0 6px;font-weight:650;letter-spacing:-.01em}
  h2{font-size:20px;margin:0 0 4px;font-weight:650}
  .sub{color:var(--muted);margin:0 0 22px}
  label{display:block;font-size:13px;font-weight:600;margin:14px 0 5px}
  input,select{width:100%;padding:10px 12px;border:1px solid var(--line);
    border-radius:7px;font:inherit;background:#fff;color:var(--ink)}
  button{font:inherit;font-weight:600;padding:11px 20px;border-radius:7px;
    border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}
  button.ghost{background:#fff;color:var(--accent)}
  button:disabled{opacity:.45;cursor:not-allowed}
  .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .hint{font-size:13px;color:var(--muted)}
  .warnbox{background:#fff8ec;border:1px solid #f0d9b0;color:var(--warn);
    padding:12px 14px;border-radius:8px;font-size:13px;margin:16px 0}

  /* ---- test surface, modelled on the reference product ---- */
  .crumb{font-size:13px;color:var(--muted);margin-bottom:26px}
  .qcount{font-size:14px;color:var(--muted);margin:18px 0 10px}
  .panes{display:grid;grid-template-columns:1fr 1fr;gap:0;
    background:var(--accent-soft);border-radius:10px;overflow:hidden;min-height:190px}
  .pane{padding:26px 24px}
  .pane h3{margin:0 0 18px;font-size:15px;font-weight:650}
  .pane.idle h3{color:var(--muted);font-weight:500}
  .wave{display:flex;align-items:center;justify-content:center;gap:3px;height:64px}
  .wave i{display:block;width:4px;border-radius:2px;background:#b9ccd6;height:6px}
  .wave.on i{background:var(--accent);animation:pulse .9s ease-in-out infinite}
  .wave.rec i{background:#3d5a72;animation:pulse .55s ease-in-out infinite}
  .wave i:nth-child(2n){animation-delay:.1s}
  .wave i:nth-child(3n){animation-delay:.22s}
  .wave i:nth-child(5n){animation-delay:.34s}
  @keyframes pulse{0%,100%{height:8px}50%{height:40px}}
  .timer{display:inline-flex;align-items:center;gap:7px;background:#fff;
    border:1px solid var(--line);border-radius:20px;padding:5px 13px;
    font-size:13px;font-weight:650;margin-left:10px}
  .timer.low{color:var(--danger);border-color:#f2c4bf}
  .statusrow{display:flex;align-items:center;justify-content:center;gap:10px;
    margin-top:22px;color:var(--muted);font-size:13px}
  .dots{display:flex;gap:6px}
  .dots b{width:8px;height:8px;border-radius:50%;background:#d4dde5;display:block}
  .dots b.done{background:var(--ok)}
  .dots b.now{background:var(--accent);transform:scale(1.35)}

  /* ---- results ---- */
  .score{font-size:56px;font-weight:700;letter-spacing:-.02em;line-height:1}
  .cefr{font-size:17px;color:var(--muted);margin-top:2px}
  .meter{display:flex;align-items:center;gap:12px;margin:9px 0}
  .meter .nm{width:150px;font-size:14px}
  .meter .track{flex:1;height:9px;background:#e9eef3;border-radius:5px;overflow:hidden}
  .meter .fill{height:100%;background:var(--accent);border-radius:5px}
  .meter .val{width:64px;text-align:right;font-size:14px;font-variant-numeric:tabular-nums}
  table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
  th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
  th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
  td.num{text-align:right;font-variant-numeric:tabular-nums}
  details{margin-top:18px}
  summary{cursor:pointer;font-weight:600;font-size:14px}
  pre{background:#0f1c2b;color:#d8e4ee;padding:14px;border-radius:8px;
    overflow:auto;font-size:12px;line-height:1.5}
  .flag{padding:9px 12px;border-radius:7px;font-size:13px;margin:6px 0}
  .flag.warn{background:#fff8ec;color:var(--warn)}
  .flag.critical{background:#fdf2f1;color:var(--danger)}
  .flag.info{background:#f2f6fa;color:var(--muted)}
  .hidden{display:none!important}

/* =========================================================================
   Sign-in, dashboard and review
   ========================================================================= */

.narrow{max-width:440px;margin:8vh auto}
.stack{display:flex;flex-direction:column;gap:18px}

.who{display:flex;align-items:center;gap:8px;font-size:13px}
.who b{color:var(--ink)}
.linkbtn{background:none;border:none;color:var(--accent);padding:0;font-weight:600;
  cursor:pointer;font-size:13px;text-decoration:underline}

/* --- assessment cards --- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.acard{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:22px;display:flex;flex-direction:column}
.acard h3{margin:0 0 3px;font-size:18px;font-weight:650}
.acard .formtag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-soft);
  padding:3px 8px;border-radius:4px;margin-bottom:10px}
.acard .spec{font-size:13px;color:var(--muted);margin:0 0 14px}
.partlist{list-style:none;padding:0;margin:0 0 18px;font-size:13px}
.partlist li{display:flex;justify-content:space-between;padding:5px 0;
  border-bottom:1px solid var(--line);color:var(--muted)}
.partlist li b{color:var(--ink);font-weight:600}
.acard .grow{flex:1}

/* Mode choice. Practice reveals answers, so it is never the default and the
   difference is stated on the control itself rather than in a tooltip. */
.modes{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.mode{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;
  border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:13px}
.mode:hover{border-color:var(--accent)}
.mode input{width:auto;margin:2px 0 0}
.mode .mt{font-weight:650;color:var(--ink);display:block;margin-bottom:2px}
.mode .md{color:var(--muted);display:block;line-height:1.4}
.mode.sel{border-color:var(--accent);background:var(--accent-soft)}

/* --- attempt history --- */
.hist{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.hist h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);font-weight:700}
.hrow{display:flex;align-items:center;gap:10px;font-size:13px;padding:5px 0}
.hrow .sp{flex:1;color:var(--muted)}
.pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.04em}
.pill.scored{background:#e7f4ed;color:var(--ok)}
.pill.progress{background:#fff3e0;color:var(--warn)}
.pill.practice{background:var(--accent-soft);color:var(--accent)}
.pill.exam{background:#eef1f5;color:var(--muted)}

/* --- per-item review --- */
.vitem{border:1px solid var(--line);border-radius:9px;padding:16px 18px;margin-bottom:12px;
  background:var(--panel);border-left-width:4px}
.vitem.correct{border-left-color:var(--ok)}
.vitem.partial{border-left-color:var(--warn)}
.vitem.incorrect{border-left-color:var(--danger)}
.vitem.no_response{border-left-color:#c3ccd6}
.vhead{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.vhead .vid{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.vhead .vv{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.vv.correct{color:var(--ok)} .vv.partial{color:var(--warn)}
.vv.incorrect{color:var(--danger)} .vv.no_response{color:var(--muted)}
.vhead .vpct{margin-left:auto;font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}
.vq{font-weight:600;margin:0 0 12px}
.ab{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
@media (max-width:640px){.ab{grid-template-columns:1fr}.panes{grid-template-columns:1fr}}
.ab .box{padding:11px 13px;border-radius:7px;font-size:14px}
.ab .box .bl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  font-weight:700;color:var(--muted);display:block;margin-bottom:5px}
.ab .yours{background:#f4f7fa;border:1px solid var(--line)}
.ab .theirs{background:var(--accent-soft);border:1px solid #cfe4e7}
.ab .empty{color:var(--muted);font-style:italic}
.analysis{list-style:none;padding:0;margin:0 0 10px;font-size:13.5px}
.analysis li{padding:3px 0 3px 18px;position:relative;color:var(--ink)}
.analysis li::before{content:"›";position:absolute;left:4px;color:var(--accent);font-weight:700}
.coach{background:#fffaf0;border:1px solid #f0dfb8;border-radius:7px;
  padding:10px 12px;font-size:13.5px;color:#7a5310}
.coach b{color:#5c3f0c}

/* Word-by-word diff for repeat items. Colour alone never carries the meaning:
   omitted words are struck through and inserted words are bracketed, so the
   diff is readable without colour vision. */
.diff{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px;font-size:14px}
.diff span{padding:2px 6px;border-radius:4px}
.diff .match{background:#e7f4ed;color:#15603d}
.diff .near{background:#fff3e0;color:#8a5a10}
.diff .wrong{background:#fdecea;color:#9a2820}
.diff .missed{background:#fdecea;color:#9a2820;text-decoration:line-through;opacity:.75}
.diff .added{background:#eef1f5;color:var(--muted)}

/* --- section review --- */
.secthead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.bigpct{font-size:40px;font-weight:700;line-height:1;letter-spacing:-.02em}
.caveat{background:#f2f6fa;border:1px solid var(--line);border-left:3px solid var(--muted);
  border-radius:6px;padding:11px 13px;font-size:13px;color:var(--muted);margin:14px 0}
.recplayer{margin:0 0 12px}
.recplayer audio{width:100%;height:34px}