/* SiPoly Midterms Tracker. Mirrors the SiPoly scoreboard look (same tokens and component styles), scoped to .spm
   so it is self-contained even if the scoreboard stylesheet is not on the page. */
.spm{--sp-ink:#161616;--sp-paper:#fbf8f1;--sp-card:#fff;--sp-rule:#d8d1c2;--sp-muted:#555049;--sp-accent:#1f3a5f;--sp-board:#121212;--sp-board-ink:#ffd84d;--sp-correct:#0f6b3a;--sp-partly:#8a5a00;--sp-wrong:#b3261e;--sp-open:#1f3a5f;--sp-other:#545454;--sp-focus:#005fcc;--sp-serif:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;--sp-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--sp-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;--sp-r:4px;margin-block:1.5rem;font-family:var(--sp-sans);color:var(--sp-ink)}
.spm *,.spm *::before,.spm *::after{box-sizing:border-box}
.spm :where(a,button,input,select,summary):focus-visible{outline:3px solid var(--sp-focus);outline-offset:2px}
.spm-section{margin:2rem 0}
.spm-h{font:800 clamp(1.25rem,1rem + 1vw,1.6rem)/1.15 var(--sp-serif);margin:0 0 .8rem;padding-top:.6rem;border-top:6px double var(--sp-ink)}
.spm .sp-muted{color:var(--sp-muted);font-size:.9em}
.spm-status{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;font:600 .9rem/1.4 var(--sp-sans);color:var(--sp-muted)}
.spm-dot{flex:none;width:.65rem;height:.65rem;border-radius:50%;background:var(--sp-other)}
.spm-dot--live{background:var(--sp-correct)}
@media (prefers-reduced-motion:no-preference){.spm-dot--live{animation:spm-pulse 2.4s ease-in-out infinite}}
@keyframes spm-pulse{50%{opacity:.35}}
.spm .sp-pending{font:500 .9rem/1.45 var(--sp-sans);background:#fff4d6;border-left:4px solid var(--sp-partly);padding:.5rem .7rem;margin:.6rem 0}

/* scoreboard */
.spm .sp-board{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin:0 0 1.2rem;padding:2px;background:#000;border-radius:6px}
@media (min-width:640px){.spm .sp-board{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.spm .sp-board{grid-template-columns:repeat(6,1fr)}.spm .sp-board--compact{grid-template-columns:repeat(4,1fr)}}
.spm .sp-board__cell{background:var(--sp-board);color:#f2f2f2;padding:.7rem .8rem;margin:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0}
.spm .sp-board__cell dt{order:2;font:600 .72rem/1.3 var(--sp-sans);letter-spacing:.08em;text-transform:uppercase;color:#d9d9d9}
.spm .sp-board__cell dd{order:1;margin:0;font:700 clamp(1.5rem,4vw,2.2rem)/1.1 var(--sp-mono);font-variant-numeric:tabular-nums;color:var(--sp-board-ink)}
.spm .sp-board__cell dd.sp-board__hint{order:3;font:400 .7rem/1.3 var(--sp-sans);color:#cfcfcf;margin-top:.2rem}
.spm .sp-board--compact .sp-board__cell dd:not(.sp-board__hint){font-size:clamp(1.2rem,3vw,1.6rem)}

/* badges */
.spm .sp-badge{display:inline-flex;align-items:center;gap:.3em;padding:.18em .55em;border-radius:var(--sp-r);font:700 .78rem/1.3 var(--sp-sans);letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--sp-other);white-space:nowrap}
.spm .sp-badge--correct{background:var(--sp-correct)}.spm .sp-badge--wrong{background:var(--sp-wrong)}.spm .sp-badge--open{background:var(--sp-open)}
.spm .spm-badge--d{background:#1f3a5f}.spm .spm-badge--r{background:#7a3b12}.spm .spm-badge--o{background:#4a4a4a}
.spm .spm-badge{font-size:.7rem;margin-right:.3rem}

/* filters */
.spm .sp-filters{display:grid;grid-template-columns:1fr;gap:.6rem;align-items:end;padding:1rem;background:var(--sp-card);border:1px solid var(--sp-rule);border-radius:var(--sp-r);margin-bottom:.8rem}
@media (min-width:720px){.spm .sp-filters{grid-template-columns:2fr 1fr 1fr}.spm .spm-filters--one{grid-template-columns:minmax(0,28rem)}}
.spm .sp-filters label{display:block;font:600 .85rem/1.4 var(--sp-sans);margin-bottom:.2rem}
.spm .sp-filters input,.spm .sp-filters select{font:inherit;font-size:1rem;padding:.55rem .65rem;border:1px solid #6b665c;border-radius:var(--sp-r);background:#fff;color:var(--sp-ink);min-height:44px;width:100%}
.spm .sp-count-line{font:600 .9rem var(--sp-sans);color:var(--sp-muted);margin:.2rem 0 .6rem}

/* tables */
.spm .sp-table-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1rem;border:1px solid var(--sp-rule);border-radius:var(--sp-r);background:var(--sp-card)}
.spm .sp-lb{width:100%;border-collapse:collapse;font:400 .95rem/1.35 var(--sp-sans);font-variant-numeric:tabular-nums;margin:0}
.spm .sp-lb caption{text-align:left;font:800 1.05rem var(--sp-serif);padding:.7rem .8rem;background:var(--sp-board);color:#fff;caption-side:top}
.spm .sp-lb th,.spm .sp-lb td{padding:.55rem .7rem;text-align:left;border:0;border-bottom:1px solid #ece7dc;vertical-align:middle}
.spm .sp-lb thead th{font:700 .72rem var(--sp-sans);text-transform:uppercase;letter-spacing:.06em;color:#3d3d3d;background:#f1ece1;white-space:nowrap}
.spm .sp-lb tbody th{font-weight:600}
.spm .spm-num{white-space:nowrap}
.spm .sp-bar{display:block;height:6px;margin-top:.25rem;min-width:5rem;background:linear-gradient(90deg,var(--sp-accent) var(--v,0%),#e3ded2 var(--v,0%));border-radius:3px}
.spm-up{color:var(--sp-correct);font-weight:700}.spm-down{color:var(--sp-wrong);font-weight:700}
.spm-sort{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:.3em;font:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit;min-height:32px}
.spm-sort:hover{text-decoration:underline}
.spm-sort:focus-visible{outline:3px solid var(--sp-focus);outline-offset:2px}
.spm-sort__ind::after{content:"\2195";opacity:.4}
.spm th[aria-sort=ascending] .spm-sort__ind::after{content:"\25B2";opacity:1}
.spm th[aria-sort=descending] .spm-sort__ind::after{content:"\25BC";opacity:1}
.spm tr[hidden]{display:none}

/* chart */
.spm-chart{margin:0 0 1rem;padding:.6rem;background:var(--sp-card);border:1px solid var(--sp-rule);border-radius:var(--sp-r)}
.spm-chart__svg{position:relative;width:100%}
.spm-chart svg{display:block;width:100%;height:auto;font-family:var(--sp-sans)}
.spm-chart .c-grid{stroke:#e3ded2;stroke-width:1}.spm-chart .c-axis{stroke:#333}.spm-chart .c-lbl{font-size:11px;fill:#333}
.spm-chart .c-l0{stroke:#1f3a5f;fill:none;stroke-width:2.5}.spm-chart .c-l1{stroke:#7a3b12;fill:none;stroke-width:2.5;stroke-dasharray:6 3}
.spm-chart .c-dot0{fill:#1f3a5f}.spm-chart .c-dot1{fill:#7a3b12}
.spm-chart .c-hover{stroke:#8a8579;stroke-dasharray:3 3}
.spm-legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:.4rem 0 0;padding:0;list-style:none;font:600 .85rem var(--sp-sans)}
.spm-legend i{display:inline-block;width:1.4rem;height:0;border-top:3px solid;vertical-align:middle;margin-right:.35rem}
.spm-tip{position:absolute;pointer-events:none;background:#121212;color:#fff;font:600 .78rem/1.35 var(--sp-sans);padding:.3rem .5rem;border-radius:var(--sp-r);white-space:nowrap;transform:translate(-50%,-110%);z-index:2}

/* panel */
.spm .sp-panel{margin:1.4rem 0;padding:1rem 1.1rem;background:var(--sp-card);border:1px solid var(--sp-rule);border-radius:var(--sp-r)}
.spm .sp-panel h2{font:800 1.15rem var(--sp-serif);margin:0 0 .5rem}
.spm .sp-panel p{margin:.4rem 0;font:400 1rem/1.55 var(--sp-sans)}
@media print{.spm .sp-filters{display:none}.spm .sp-board__cell{background:#fff;color:#000}.spm .sp-board__cell dd{color:#000}}
@media (forced-colors:active){.spm .sp-badge{border:1px solid CanvasText}.spm .sp-bar{forced-color-adjust:none}}