/* ============================================================================
   polish.css - iPhone-class polish layered on top of exam.css.

   Loaded AFTER exam.css so it can override mobile rules without rewriting the
   desktop layout. Everything is gated behind `@media (max-width:760px)` unless
   it's strictly typographic (e.g. system font stack, tabular numerals).

   Guiding rules
   -------------
   * 8-point spacing grid (8/12/16/24/32).
   * Touch targets ≥ 44 × 44 px (Apple HIG).
   * Inputs ≥ 16 px to suppress iOS focus zoom.
   * Safe-area insets via env(safe-area-inset-*).
   * One brand colour for CTAs (CFA green), neutral slate for chrome.
   * No new framework - vanilla CSS only.
============================================================================ */

:root{
  --font-sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
             "Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji",
             sans-serif;
  --brand:#7ab32f;
  --brand-d:#5e8e22;
  --brand-tint:rgba(122,179,47,.10);
  --ink-1:#0f172a;
  --ink-2:#334155;
  --ink-3:#64748b;
  --line-1:#e2e8f0;
  --line-2:#cbd5e1;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --bg-page:#eef1f5;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow-md:0 4px 12px rgba(15,23,42,.06);
  --safe-bot:env(safe-area-inset-bottom,0px);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --tabbar-h:64px;
}

/* numbers should align in columns regardless of device */
.ks-n,.brow-tot,.ab-val,.pill,.badge,
.tb-time,.tb-progress,.grade-score,.q-hist,.score-card .big{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

html,body{font-family:var(--font-sys);-webkit-text-size-adjust:100%}

/* =========================================================================
   MOBILE LAYER - everything below only fires on phone-sized viewports.
========================================================================= */
@media (max-width:760px){

  /* ---------- page chrome ---------- */
  body{
    background:var(--bg-page);
    color:var(--ink-2);
    font-size:16px;
    line-height:1.5;
    /* reserve space for the new bottom tab bar plus the home indicator */
    padding-bottom:calc(var(--tabbar-h) + var(--safe-bot));
  }
  /* exam runner has its own pinned footer; suppress global tabbar reserve */
  body.exam-body{padding-bottom:0}

  .home-wrap,.bank-wrap{
    max-width:none;
    padding:max(16px,var(--safe-top)) 16px 24px;
  }
  .merge{
    max-width:none;
    padding:max(16px,var(--safe-top)) 16px 24px;
  }
  .merge-grid{gap:16px}

  /* ---------- typography ---------- */
  h1{font-size:26px;line-height:1.22;letter-spacing:-.012em;color:var(--ink-1);
     margin:0 0 4px}
  h2{font-size:20px;line-height:1.3;color:var(--ink-1);margin:0 0 8px}
  h3{font-size:17px;line-height:1.35;color:var(--ink-1);margin:0 0 8px}
  .muted{color:var(--ink-3);font-size:13.5px}
  .home-header h1,.dash-head h1,.rail h1{font-size:24px;margin-bottom:6px}
  .home-header{margin-bottom:20px}

  /* ---------- buttons / inputs (HIG-sized) ---------- */
  .btn-primary,.btn-ghost,.btn-reset,
  .mode-toggle button,.tb-finish,.tgt-form button,.sd-launch button,
  .start-here button,.rc-tabs a,.redo-mini button{
    min-height:44px;
    padding:11px 18px;
    border-radius:10px;
    font-weight:600;
    font-size:15px;
    line-height:1.2;
  }
  .btn-primary{background:var(--brand);border:1px solid var(--brand-d);
               color:#fff;box-shadow:var(--shadow-sm)}
  .btn-primary:hover{background:var(--brand-d)}
  .btn-ghost{background:#fff;border:1px solid var(--line-2);color:var(--ink-1)}
  .btn-reset{background:#fff;border:1px solid #d96560;color:#c0392b}

  input[type=date],input[type=number],input[type=text],
  input[type=email],input[type=search],select,textarea{
    font-size:16px;            /* >=16 → no iOS focus-zoom */
    min-height:44px;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid var(--line-2);
    background:#fff;
    -webkit-appearance:none;
    appearance:none;
  }
  select{
    background-image:linear-gradient(45deg,transparent 50%,#475569 50%),
                     linear-gradient(135deg,#475569 50%,transparent 50%);
    background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
    background-size:5px 5px,5px 5px;
    background-repeat:no-repeat;
    padding-right:36px;
  }
  textarea{min-height:120px;line-height:1.5}

  /* ---------- bottom-sticky tab bar (was top tabs) ---------- */
  .bank-tabs{
    position:fixed;
    left:0;right:0;bottom:0;
    display:flex;gap:0;margin:0;
    border:0;border-top:1px solid var(--line-1);
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
    padding:6px max(8px,var(--safe-l)) calc(6px + var(--safe-bot))
            max(8px,var(--safe-r));
    z-index:100;
    box-shadow:0 -1px 0 rgba(0,0,0,.04);
  }
  .bank-tabs a{
    flex:1;
    min-height:52px;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:2px;
    padding:6px 4px;margin:0;
    border:0;border-radius:10px;
    background:transparent;
    color:var(--ink-3);
    font-size:11px;font-weight:600;
    text-decoration:none;
    text-align:center;
    line-height:1.15;
  }
  /* emoji icon from the data-ico attribute we add in the template */
  .bank-tabs a::before{
    content:attr(data-ico);
    display:block;
    font-size:22px;
    line-height:1;
    margin-bottom:2px;
  }
  .bank-tabs a.active{
    color:var(--brand-d);
    background:var(--brand-tint);
  }

  /* ---------- home page: mode cards ---------- */
  .mode-grid{grid-template-columns:1fr;gap:16px;margin-top:16px}
  .mode-card{
    padding:20px;
    border-radius:14px;
    border:1px solid var(--line-1);
    background:#fff;
    box-shadow:var(--shadow-sm);
  }
  .mode-card h2{font-size:18px;margin-bottom:8px}
  .mode-card p{min-height:0;font-size:14.5px;color:var(--ink-2);margin:0 0 16px}
  .mode-card label{font-size:13px;color:var(--ink-2);margin:10px 0 4px;
                   font-weight:500}
  .mode-card .btn-primary{width:100%;margin-top:8px}

  /* section heads collapse onto two rows on phone */
  .sec-head,.dash-head,.rail-head{
    flex-direction:column;align-items:stretch;gap:8px;margin-bottom:12px;
  }
  .sec-head h1,.sec-head h2,.rail-head h1,.dash-head h1{margin:0}

  /* ---------- tables → card-stack on mobile ---------- */
  /* Generic data-table convert. Cells without [data-label] just render
     as plain rows (no orphan "undefined:" labels).                       */
  .data-table{
    display:block;width:100%;
    background:transparent;border:0;margin:8px 0 16px;
    overflow:visible;white-space:normal;
  }
  .data-table thead{
    position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
  }
  .data-table tbody,.data-table tr,.data-table td{display:block;width:auto}
  .data-table tr{
    background:#fff;
    border:1px solid var(--line-1);
    border-radius:12px;
    padding:12px 14px;
    margin-bottom:8px;
    box-shadow:var(--shadow-sm);
  }
  .data-table td{
    border:0;
    padding:4px 0;
    font-size:14px;
    text-align:left;
    display:flex;justify-content:space-between;gap:12px;
  }
  .data-table td[data-label]::before{
    content:attr(data-label);
    color:var(--ink-3);font-weight:500;
  }
  .data-table td[colspan]{
    display:block;text-align:center;color:var(--ink-3);padding:8px 0;
  }
  .data-table td[colspan]::before{content:none}

  /* ---------- score-grid (results page) ---------- */
  .score-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0}
  .score-card{
    padding:16px;border-radius:14px;border:1px solid var(--line-1);
    background:#fff;
  }
  .score-card .big{font-size:26px}

  /* ---------- bank list rows ---------- */
  .bank-row,.brow{
    display:flex;flex-direction:column;gap:8px;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid var(--line-1);
    border-left:4px solid var(--line-2);
    background:#fff;
    box-shadow:var(--shadow-sm);
  }
  .bank-row .br-name,.brow .brow-name{
    font-size:15.5px;line-height:1.35;font-weight:700;color:var(--ink-1);
  }
  .bank-row .br-meta{
    justify-self:start;
    display:flex;flex-wrap:wrap;gap:6px;
  }
  .bank-row .br-splits{
    font-size:12.5px;line-height:1.55;color:var(--ink-3);
  }
  .bank-row .bar,.brow .brow-bar{height:6px}
  .brow-head{flex-wrap:wrap;gap:8px}
  .brow-tot{padding:3px 10px;font-size:11.5px}
  .brow-splits{font-size:12px;gap:6px 14px;color:var(--ink-3)}
  .brow-foot{font-size:11.5px;color:var(--ink-3)}
  .pill{font-size:11.5px;padding:3px 9px;border-radius:11px}

  /* ---------- bank section: stop the 3-col summary grid ---------- */
  .qcard{border-radius:12px;border-color:var(--line-1);margin-bottom:10px}
  .qcard>summary{
    grid-template-columns:1fr !important;
    gap:6px;
    padding:14px 14px;
    line-height:1.45;
  }
  .qcard>summary::after{               /* simple disclosure indicator */
    content:"›";
    position:absolute;right:14px;top:14px;
    font-size:22px;line-height:1;color:var(--ink-3);
    transition:transform .15s;
  }
  .qcard{position:relative}
  .qcard[open]>summary::after{content:"⌃";color:var(--brand-d)}
  .qcard .q-src{font-size:11px}
  .qcard .q-stem{font-size:14.5px;line-height:1.5;color:var(--ink-1);
                 padding-right:24px}     /* room for the › */
  .qcard .q-hist{text-align:left;font-size:12px;color:var(--ink-3)}
  .start-here{margin-left:0;margin-top:6px}
  .start-here button{min-height:36px;padding:6px 12px;font-size:13px}

  /* ---------- dashboard rail ---------- */
  .rail{padding:14px;border-radius:14px;border-color:var(--line-1)}
  .tgt-form{flex-wrap:wrap;gap:8px}
  .tgt-form label{flex:1 0 100%;color:var(--ink-3);font-size:13px}
  .tgt-form input[type=date]{flex:1;min-width:0}
  .tgt-form button{min-height:44px;padding:10px 18px}
  .rail-head form{width:100%}
  .rail-head .btn-reset{width:100%}

  .rail .kstats{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
  .rail .ks{padding:10px 6px;min-height:64px;border-radius:10px;
            border-color:var(--line-1)}
  .rail .ks-n{font-size:18px}
  .status-behind .ks-n{font-size:14px;letter-spacing:.02em}  /* "BEHIND" fits */

  .kstats.rev{grid-template-columns:repeat(2,1fr)}

  .accbars{gap:10px}
  .accbar{gap:8px}
  .accbar .ab-lbl{width:62px;font-size:11px;font-weight:700;color:var(--ink-2)}
  .accbar .ab-track{height:16px}
  .accbar .ab-val{width:96px;font-size:11.5px}
  .accbar .ab-val em{font-size:10px}

  .toggle-row{flex-direction:column;align-items:stretch;gap:8px}
  .mode-toggle{width:100%}
  .mode-toggle button{flex:1;font-size:13px;padding:11px 6px;min-height:44px;
                      line-height:1.2}
  .sd-launch{width:100%}
  .sd-launch button{width:100%;min-height:44px;font-size:14px;
                    justify-content:center;border-radius:10px}

  .rc-tabs{gap:6px}
  .rc-tabs a{font-size:12.5px;padding:9px 11px;min-height:40px;border-radius:10px}

  .worst-lm{margin-top:18px;padding-top:14px}
  .wl-row{padding:10px 12px;border-radius:10px}
  .wl-name em{font-size:11px;display:block;margin-top:2px}

  /* ---------- import review ---------- */
  .rev-grid{grid-template-columns:1fr;gap:8px}

  /* ---------- exam runner refinements ---------- */
  .exam-topbar{
    padding:calc(8px + var(--safe-top)) 12px 8px;
    gap:6px 12px;font-size:12.5px;
  }
  .tb-left{display:flex;gap:12px;line-height:1.35}
  .tb-left>div{display:flex;gap:4px}
  .tb-left strong{font-weight:600;color:#d9d9d9}
  .tb-mid{gap:6px}
  .tb-mid .clock{font-size:18px}
  .tb-time div:first-child{display:none}    /* "Section Time Remaining:" off */
  .tb-time div:last-child{font-size:15px;font-weight:700}
  .tb-progress{min-width:90px}
  .tb-progress div:last-child{font-size:11px;color:#cfcfcf}
  .src-ref{font-size:11.5px;padding:5px 10px;max-width:150px}
  .tb-finish{
    margin-left:auto;
    padding:9px 16px;font-size:13px;min-height:38px;
    border-radius:8px;
  }

  /* nav rail of question numbers - tidier pills */
  .exam-nav{padding:6px 4px;gap:6px}
  .navnum,.navgroup{height:36px;min-width:40px;padding:0 12px;
                    border-radius:18px;font-size:13px}

  /* question stem + choices */
  .qstem{font-size:16px;padding:14px 16px;border-radius:10px;
         border:1px solid var(--line-1);background:#f4f6f8;
         line-height:1.55}
  .choices{gap:12px}
  .choice .ckey{font-size:14px;color:var(--ink-3)}
  .choice .cbox{
    padding:14px 16px;min-height:56px;border-radius:10px;
    border:1.5px solid var(--line-2);
    font-size:16px;line-height:1.4;
    box-shadow:var(--shadow-sm);
  }
  .choice.sel .cbox{
    border-color:var(--sel);
    box-shadow:0 0 0 2px var(--sel) inset,var(--shadow-sm);
  }

  /* feedback collapse cleanly */
  .feedback{border-radius:10px;margin-top:16px}
  .feedback .fb-head{padding:14px 16px;font-size:15px}
  .feedback .fb-expl{padding:12px 16px 16px;font-size:14.5px;line-height:1.55}
  .self-grade{padding:14px 16px;flex-wrap:wrap;gap:8px}
  .self-grade .btn-primary,.self-grade .btn-ghost{flex:1 1 100%}

  /* sticky bottom action bar - thumb-reachable, safe-area-aware */
  .exam-footer{
    padding:10px 12px calc(10px + var(--safe-bot));
    gap:8px;
    border-top:1px solid #222;
  }
  .ft-tools{order:2;font-size:11px;color:#bdbdbd}
  .ft-tools .qid{margin-left:0}
  .footer-btns{order:1;width:100%;flex-wrap:wrap;gap:8px}
  .footer-btns>*{min-height:44px}
  .ft-flag{width:44px;height:44px;border-radius:10px;font-size:18px}
  .exam-footer .btn-primary,.exam-footer .btn-ghost{
    flex:1 1 auto;min-height:48px;padding:12px 18px;font-size:15px;
    border-radius:10px;
  }
  .exam-footer #nextBtn{flex:1 1 100%}

  /* loading / empty states */
  .empty,p.muted.empty{
    padding:24px 12px;
    text-align:center;
    color:var(--ink-3);
    background:#fff;border:1px dashed var(--line-2);
    border-radius:12px;
  }
}

/* =========================================================================
   TABLET / small-desktop tweak: don't let bottom-tabbar reserve apply.
   The mobile rules already gate themselves to ≤760px; nothing to do here.
========================================================================= */


/* =========================================================================
   PHONE LAYER (≤480px) - iPhone 15-class rebuild.

   Tighter than the ≤760px layer above. Targets question card cramping,
   bank-row layout, dashboard hierarchy, and the post-submit MCQ rings.
   Layered last so it wins specificity ties against exam.css's ≤760px block.
========================================================================= */

/* ---- MCQ feedback rings (apply at every viewport so desktop matches) ----
   Colours come from the brand tokens (var(--ok)/--bad), so they follow the
   light/dark theme on the exam page; fall back to fixed hex elsewhere. */
.choice.correct .cbox,
.choice.correct.selected .cbox{
  border:3px solid var(--ok,#16a34a) !important;
  background:var(--ok-bg,rgba(22,163,74,.08)) !important;
  box-shadow:none !important;
}
.choice.wrong .cbox,
.choice.incorrect.selected .cbox{
  border:3px solid var(--bad,#dc2626) !important;
  background:var(--bad-bg,rgba(220,38,38,.08)) !important;
  box-shadow:none !important;
}

/* mobile hero stat (dashboard) - hidden by default, shown ≤480px */
.m-hero{display:none}

/* "Filters & settings" accordion summary - hidden by default, shown ≤480px */
details.m-filters > summary{display:none}

@media (max-width:480px){

  /* ===================== QUESTION PAGE (exam.html) ===================== */

  /* keep page chrome tight; the existing ≤760px topbar already wraps */
  .exam-topbar{
    gap:6px 10px;padding:calc(6px + var(--safe-top)) 10px 6px;
    font-size:12px;
  }
  .exam-testbar{font-size:11.5px;padding:5px 12px}

  /* compact meta strip: single one-line, 12px muted */
  .tb-left,.tb-mid,.tb-progress{font-size:12px;line-height:1.35}
  .tb-left>div{gap:4px}

  .exam-main{padding:6px}
  .exam-board{border:0;border-radius:0;background:transparent}
  .exam-content.single .pane-right,
  .exam-content.split .pane-right{padding:12px 4px 20px}

  /* question stem - bigger, more breathing room */
  .qstem{
    font-size:18px;
    line-height:1.55;
    padding:16px;
    border:1px solid var(--line-1);
    border-radius:12px;
    background:#f4f6f8;
    margin-bottom:16px;
  }

  /* choices: each one a tappable card, stacked single-column */
  .choices{
    display:flex;flex-direction:column;
    gap:12px;
    max-width:none;
    margin:0;
  }
  .choice{
    display:flex;align-items:stretch;gap:10px;
    cursor:pointer;
    /* force full row tappable */
    width:100%;
  }
  .choice .ckey{
    flex:none;width:22px;align-self:center;
    text-align:center;font-weight:700;font-size:15px;color:var(--ink-2);
  }
  .choice .cbox{
    flex:1;
    display:flex;align-items:center;
    min-height:56px;
    padding:14px;
    font-size:16px;line-height:1.4;
    border:1px solid var(--line-2);
    border-radius:10px;
    background:#fff;
    box-shadow:none;
    transition:border-color .12s,background .12s;
  }
  /* pre-submit selected state - subtle, doesn't fight the post-submit rings */
  .choice.sel .cbox{
    border-color:var(--brand-d);
    box-shadow:0 0 0 1px var(--brand-d) inset;
    background:var(--brand-tint);
  }

  /* explanation block: clear separator + larger body */
  .feedback{
    margin-top:16px;
    border:0;
    border-top:1px solid var(--line-1);
    border-radius:0;
    padding-top:16px;
    background:transparent;
    overflow:visible;
  }
  .feedback .fb-head{padding:10px 14px;font-size:14px;border-radius:8px}
  .feedback .fb-key-label{padding:10px 0 4px;background:transparent}
  .feedback .fb-expl{
    padding:8px 0 0;
    background:transparent;
    font-size:15px;line-height:1.55;
    color:var(--ink-1);
  }

  /* action buttons - full-width / 50/50, ≥48px, 16px above choices */
  .exam-footer{
    padding:12px 12px calc(12px + var(--safe-bot));
    gap:12px;
  }
  .footer-btns{
    width:100%;
    display:flex;flex-wrap:wrap;gap:12px;
  }
  .footer-btns>*{min-height:48px}
  .exam-footer .btn-primary,
  .exam-footer .btn-ghost{
    flex:1 1 calc(50% - 6px);
    min-height:48px;
    padding:12px 16px;
    font-size:16px;
    border-radius:10px;
  }
  .exam-footer #nextBtn{flex:1 1 100%}
  .ft-flag{width:48px;height:48px;border-radius:10px;font-size:20px;flex:none}
  .ft-tools{order:2;width:100%;justify-content:space-between;font-size:11px;
            color:#bdbdbd}

  /* ===================== LEARNING-MODULE PAGES ========================= */
  /* (bank_topics / bank_chapters / bank_sections - anything using .bank-row) */

  .bank-wrap{padding:max(12px,var(--safe-top)) 12px 24px}
  .bank-wrap h1{font-size:22px;margin:4px 0 8px}
  .crumb{font-size:12px;margin:0 0 10px}

  .bank-list{display:flex;flex-direction:column;gap:12px}

  /* kill any grid layout; each row is a card */
  .bank-row{
    display:flex;flex-direction:column;
    align-items:stretch;
    gap:8px;
    min-height:56px;
    padding:16px;
    background:#fff;
    border:1px solid var(--line-1);
    border-left:1px solid var(--line-1);   /* drop the desktop 4px accent */
    border-radius:10px;
    box-shadow:none;
    text-decoration:none;
    color:var(--ink-1);
  }
  .bank-row.unmapped{background:#fff;border-style:solid}

  .bank-row .br-name{
    font-size:17px;font-weight:600;line-height:1.3;
    color:var(--ink-1);
    /* prefer a single line, ellipsis if too long */
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  .bank-row .br-meta{
    display:flex;flex-wrap:wrap;gap:6px;
    justify-self:start;
  }
  .bank-row .pill{
    font-size:12px;padding:3px 10px;border-radius:11px;
    background:#eef1f4;color:var(--ink-3);font-weight:500;
  }
  .bank-row .pill.accg{background:#e3f3e6;color:#1f7a33}
  .bank-row .pill.acca{background:#fdf2dd;color:#9a6b15}
  .bank-row .pill.accr{background:#fbe6e4;color:#b3261e}

  .bank-row .br-splits{
    font-size:12px;line-height:1.55;color:var(--ink-3);
  }

  .bank-row .bar{
    grid-column:auto;
    height:5px;background:#eef1f4;border-radius:3px;overflow:hidden;
  }

  /* same treatment for the dashboard topic rows (.brow) so the merged
     view also gets card-stack on phones */
  .brow{
    padding:16px;border:1px solid var(--line-1);border-left:1px solid var(--line-1);
    border-radius:10px;background:#fff;box-shadow:none;
  }
  .brow .brow-name{font-size:17px;font-weight:600}

  /* ===================== DASHBOARD (≤480px) ============================ */

  /* hero stat - "Questions attempted: N" big and bold */
  .m-hero{
    display:block;
    background:#fff;
    border:1px solid var(--line-1);
    border-radius:14px;
    padding:20px 18px;
    margin:0 0 24px;
    text-align:center;
  }
  .m-hero .m-hero-lbl{
    display:block;
    font-size:13px;color:var(--ink-3);
    text-transform:uppercase;letter-spacing:.06em;font-weight:600;
    margin-bottom:6px;
  }
  .m-hero .m-hero-n{
    display:block;
    font-size:38px;line-height:1.05;font-weight:800;
    color:var(--ink-1);letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
  }

  /* hide the desktop H1 + sub-stats that the hero replaces */
  .merge .rail-head h1{display:none}

  /* burn-up chart fits viewport - no horizontal scroll */
  .rail svg.chart{width:100%;height:auto;display:block;margin:0 0 24px}

  /* KPI strip - max 3 across, label above number, tabular nums */
  .rail .kstats{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
    margin:0 0 24px;
  }
  .rail .ks{
    display:flex;flex-direction:column-reverse;
    align-items:center;justify-content:center;
    min-height:56px;
    padding:10px 6px;
    background:#fff;
    border:1px solid var(--line-1);
    border-radius:10px;
    font-size:11px;color:var(--ink-3);text-align:center;line-height:1.2;
  }
  .rail .ks-n{
    display:block;
    font-size:20px;font-weight:700;color:var(--ink-1);
    margin:0;
    font-variant-numeric:tabular-nums;
  }
  .status-behind .ks-n{font-size:13px;letter-spacing:.02em;color:#b3261e}
  .status-ontrack .ks-n,.status-ahead .ks-n,.status-complete .ks-n{color:#1f7a33}

  /* Filters & settings accordion */
  details.m-filters{
    margin:0 0 24px;
    background:#fff;
    border:1px solid var(--line-1);
    border-radius:10px;
    padding:0;
    overflow:hidden;
  }
  details.m-filters > summary{
    display:flex;align-items:center;justify-content:space-between;
    list-style:none;
    padding:14px 16px;
    font-size:14px;font-weight:600;color:var(--ink-1);
    cursor:pointer;
    min-height:48px;
  }
  details.m-filters > summary::-webkit-details-marker{display:none}
  details.m-filters > summary::after{
    content:"›";
    font-size:22px;color:var(--ink-3);
    transition:transform .15s;
  }
  details.m-filters[open] > summary::after{transform:rotate(90deg)}
  details.m-filters[open] > summary{border-bottom:1px solid var(--line-1)}
  details.m-filters .m-filters-body{
    display:flex;flex-direction:column;gap:12px;
    padding:14px 16px 16px;
  }
  details.m-filters form{margin:0}
  details.m-filters .tgt-form{
    display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%;
  }
  details.m-filters .tgt-form label{
    flex:1 0 100%;font-size:13px;color:var(--ink-3);
  }
  details.m-filters .tgt-form input[type=date]{flex:1;min-width:0;min-height:44px}
  details.m-filters .tgt-form button,
  details.m-filters .btn-reset{
    width:100%;min-height:44px;font-size:14px;font-weight:600;
    border-radius:10px;
  }

  /* below the accordion: keep the rest of the rail flowing with 24px gaps */
  .rail{
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
  }
  .merge-grid{gap:24px}

  /* accuracy bars + worst-LM + redo form stay readable but tightened */
  .rail h3{font-size:14px;margin:0 0 10px;color:var(--ink-1)}
  .accbars{gap:8px;margin-bottom:24px}
  .rail-redo{
    margin-top:24px;
    padding-top:16px;
    border-top:1px solid var(--line-1);
    gap:10px;
  }
  .rail-redo select{min-height:44px}
  .rail-redo .btn-primary{min-height:48px}

  .worst-lm{margin-top:24px}
}


/* =========================================================================
   LM page: per-question MCQ/CR badge + filter toggle.
   Layered on top of the existing .qcard / .sec-head styles in exam.css.
========================================================================= */

/* badge in the top-right of each question card */
.qcard{position:relative}
.q-type-badge{
  position:absolute;
  top:8px;
  right:10px;
  font-size:11px;
  font-weight:700;
  padding:4px 8px;
  border-radius:6px;
  letter-spacing:.04em;
  line-height:1;
  z-index:2;
  pointer-events:none;
}
.q-type-badge.q-type-mcq{background:#e3f3e6;color:#1f7a33;border:1px solid #bcdcc1}
.q-type-badge.q-type-cr {background:#ececec;color:#3f3f3f;border:1px solid #c9c9c9}
.qcard.answered .q-type-badge{box-shadow:0 0 0 1px rgba(255,255,255,.15)}
/* keep the existing q-hist text clear of the badge */
.qcard>summary .q-hist{padding-top:22px}

/* 3-state segmented filter at the top of the question list */
.lm-filter{
  display:flex;
  gap:0;
  margin:4px 0 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:4px;
  overflow:hidden;
}
.lmf-btn{
  flex:1 1 0;
  min-height:44px;
  background:transparent;
  border:0;
  border-radius:6px;
  font:600 14px var(--font);
  color:#445;
  cursor:pointer;
  padding:6px 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:background .12s, color .12s;
}
.lmf-btn:hover{background:#f1f3f6}
.lmf-btn.active{background:var(--green);color:#fff}
.lmf-btn.active:hover{background:var(--green-d)}
.lmf-count{font-size:12px;font-weight:600;opacity:.85}
.lmf-btn.active .lmf-count{color:#fff}

.lm-empty{
  text-align:center;
  color:#666;
  font-style:italic;
  padding:24px 12px;
  border:1px dashed var(--line);
  border-radius:8px;
  background:#fafafa;
}

@media (max-width:600px){
  .lm-filter{width:100%}
  .lmf-btn{font-size:13px}
}


/* =========================================================================
   MOBILE VIGNETTE - split-pane UX for case-study questions (≤480px).

   Desktop keeps the existing left/right split (commits 581f2c3 + e88b989).
   Phone gets a true vertical split-screen: vignette on top (~38%), question
   on the bottom (~62%), with a draggable divider between them and a
   collapse button on the vignette header. Both panes scroll independently
   inside an outer shell hard-capped at 100dvh.

   New elements added to exam.html:
     .vig-heading   - "Vignette" label, mobile-only
     .vig-toggle    - collapse button on the vignette header
     .vig-divider   - 6px drag handle between the two panes

   Drag persistence + behaviour lives in static/js/exam.js.
========================================================================= */

/* default (desktop): the new mobile-only elements are hidden */
.vig-heading,
.vig-toggle,
.vig-divider{display:none}

@media (max-width:480px){

  /* lock the outer shell to the viewport so the panes can scroll inside it.
     100dvh handles iOS Safari's address-bar bounce; 100vh is the fallback. */
  body.exam-body{overflow:hidden;height:100vh;height:100dvh}
  .exam-shell{
    height:100vh;
    height:100dvh;
    max-height:100dvh;
    min-height:0;                /* overrides exam.css ≤760px rule */
    overflow:hidden;
    display:flex;flex-direction:column;
  }

  /* the main row fills whatever the topbar + testbar + footer leave behind */
  .exam-main{
    flex:1 1 auto;
    min-height:0;
    padding:0;
    gap:0;
    overflow:hidden;
  }
  .exam-board{
    flex:1 1 auto;
    min-height:0;
    border:0;border-radius:0;
    background:#fff;
    overflow:hidden;
    display:flex;
  }

  /* ----- split mode: stack vignette over question vertically ----- */
  .exam-content.split{
    flex:1 1 auto;
    min-height:0;
    display:flex;flex-direction:column;
    overflow:hidden;
    --vig-split:38%;             /* JS overrides via inline style */
  }

  /* nav rail of question numbers is noise on the case-study screen - hide
     it in split mode to give the panes the full viewport */
  .exam-content.split > .exam-nav{display:none}

  /* ===== TOP PANE - vignette ===== */
  .exam-content.split .pane-left{
    width:100%;
    flex:0 0 var(--vig-split);
    min-height:40px;             /* enough for the heading bar alone */
    max-height:calc(100% - 120px);
    border-right:0;
    border-bottom:1px solid var(--line-1);
    background:#fff;
    display:flex;flex-direction:column;
    overflow:hidden;
  }

  /* vignette heading bar - "Vignette" uppercase muted + collapse button */
  .pane-left .case-titlebar{
    flex:0 0 auto;
    height:40px;min-height:40px;
    background:#fff;
    border-bottom:1px solid var(--line-1);
    color:var(--ink-3);
    padding:0 16px;
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    font-size:12px;font-weight:600;
    text-transform:uppercase;letter-spacing:.06em;
  }
  .pane-left .case-titlebar .case-title,
  .pane-left .case-titlebar .case-ico{display:none}
  .pane-left .case-titlebar .vig-heading{
    display:inline-block;
    flex:1 1 auto;
    color:var(--ink-3);
  }
  .pane-left .case-titlebar .vig-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;
    width:32px;height:28px;min-height:28px;
    padding:0;margin:0;
    border:1px solid var(--line-2);
    border-radius:8px;
    background:#fff;color:var(--ink-2);
    font-size:12px;line-height:1;
    cursor:pointer;
    position:relative;
    transition:transform .15s,background .12s;
  }
  /* extend touch target to ≥44×44 without growing visual size */
  .pane-left .case-titlebar .vig-toggle::before{
    content:"";position:absolute;
    top:-10px;left:-10px;right:-10px;bottom:-10px;
  }
  .pane-left .case-titlebar .vig-toggle:active{background:var(--surface-2)}

  /* vignette body - scrolls inside the pane, momentum on iOS */
  .pane-left .case-body{
    flex:1 1 auto;
    min-height:0;
    padding:16px;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    background:#fff;
  }
  .pane-left .vignette,
  .pane-left .vignette p{
    font-size:16px;line-height:1.55;color:var(--ink-1);
  }
  /* exhibits should not introduce horizontal scroll inside the pane */
  .pane-left .vignette table,
  .pane-left .vignette table.exhibit{
    width:100%;max-width:100%;display:block;overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .pane-left .vignette img{max-width:100%;height:auto}

  /* ----- COLLAPSED state: just the heading bar at the top of the screen ----- */
  .exam-content.split.vig-collapsed .pane-left{
    flex:0 0 40px;
    height:40px;min-height:40px;max-height:40px;
  }
  .exam-content.split.vig-collapsed .pane-left .case-body{display:none}
  .exam-content.split.vig-collapsed .vig-divider{display:none}
  .exam-content.split.vig-collapsed .vig-toggle{transform:rotate(180deg)}

  /* ===== DRAG DIVIDER ===== */
  .vig-divider{
    display:block;
    flex:0 0 6px;
    height:6px;
    width:100%;
    background:#e2e8f0;
    cursor:row-resize;
    position:relative;
    touch-action:none;           /* let JS own the gesture */
    user-select:none;
    -webkit-user-select:none;
  }
  /* hit-area extension so the 6px line still has a 24px touch target */
  .vig-divider::before{
    content:"";
    position:absolute;left:0;right:0;
    top:-9px;bottom:-9px;
  }
  /* grip indicator - short horizontal line centred on the bar */
  .vig-divider::after{
    content:"";
    position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:40px;height:3px;
    background:#94a3b8;
    border-radius:2px;
  }
  .vig-divider:focus{outline:none;background:var(--brand-tint)}
  .vig-divider.dragging{background:var(--brand-tint)}

  /* ===== BOTTOM PANE - question + choices + actions ===== */
  .exam-content.split .pane-right{
    flex:1 1 auto;
    width:100%;
    min-width:0;min-height:0;
    padding:16px;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    background:#fff;
    display:flex;flex-direction:column;
  }
  .exam-content.split .pane-right .qstem{
    font-size:18px;line-height:1.55;
    padding:14px 16px;
    border:1px solid var(--line-1);
    background:#f4f6f8;
    border-radius:10px;
    margin:0 0 16px;
    flex:0 0 auto;
  }
  /* hide the desktop "Case Scenario" launcher - the vignette is right there */
  .exam-content.split .pane-right .case-launch{display:none}

  .exam-content.split .pane-right .choices{
    gap:12px;
    margin:0;
    flex:0 0 auto;
  }
  .exam-content.split .pane-right .choice .cbox{
    min-height:56px;padding:14px 16px;
    font-size:16px;line-height:1.4;
    border:1.5px solid var(--line-2);
    border-radius:10px;background:#fff;
  }
  .exam-content.split .pane-right .feedback{flex:0 0 auto}

  /* action buttons - JS moves .footer-btns into .pane-right on mobile.
     They sit at the bottom of the question pane (sticky inside the scroll
     container), 16px above the choices, 48px tall. */
  .pane-right > .footer-btns{
    display:flex;flex-wrap:wrap;
    gap:12px;
    width:100%;
    margin:16px 0 0;
    padding:12px 0 calc(4px + var(--safe-bot));
    position:sticky;bottom:0;
    background:linear-gradient(to bottom,
                rgba(255,255,255,0) 0,
                #fff 12px,#fff 100%);
    border-top:1px solid var(--line-1);
    z-index:5;
  }
  .pane-right > .footer-btns > *{
    min-height:48px;
  }
  .pane-right > .footer-btns .btn-primary,
  .pane-right > .footer-btns .btn-ghost{
    flex:1 1 calc(50% - 6px);
    min-height:48px;padding:12px 16px;
    font-size:16px;font-weight:700;
    border-radius:10px;
  }
  .pane-right > .footer-btns #nextBtn{flex:1 1 100%}
  .pane-right > .footer-btns .ft-flag{
    flex:0 0 auto;width:48px;height:48px;
    border-radius:10px;font-size:20px;
  }

  /* keep the topbar tidy now that the action buttons left it */
  .exam-content.split ~ .exam-footer,
  .exam-shell .exam-footer{
    flex:0 0 auto;
  }
}