/* ============================================================
   v12.35.3 — The "Sparks paper" skin for quizzes, mocks and results

   The look everyone liked in the imported HTML papers (the Y5 entry
   assessment's preview page): lavender page, white rounded cards with a soft
   violet border, Nunito, deep-purple headings, option rows that turn violet
   when picked, green when right and pink when wrong, and violet-to-magenta
   pill buttons.

   Scoped to .sp-skin, which wraps the quiz player, the mock player and both
   results pages (views-student.js), wherever they are shown: on their own
   route or inside the course viewer. Nothing else on the site changes.
   Loaded after every other stylesheet, so it wins on equal specificity.
   ============================================================ */
.sp-skin{
  /* the paper's palette */
  --sk-bg:#EDE9FB; --sk-ink:#211A3E; --sk-head:#4C1D95; --sk-violet:#7C3AED; --sk-magenta:#C026D3;
  --sk-soft:#F0EAFF; --sk-line:#E7E1FA; --sk-line2:#D6CCF7; --sk-muted:#6B6390; --sk-key:#8B84B5;
  --sk-ok:#10B981; --sk-ok-bg:#ECFDF5; --sk-ok-ink:#065F46;
  --sk-no:#E11D48; --sk-no-line:#FDA4AF; --sk-no-bg:#FFF1F3; --sk-no-ink:#BE123C;
  --sk-tip-bg:#FEF3C7; --sk-tip-ink:#92400E;
  --sk-font:Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* and the site's own variables, re-pointed, so anything not named below follows */
  --ink:var(--sk-ink); --ink-soft:#3B3360; --paper:var(--sk-bg); --line:var(--sk-line);
  --violet:var(--sk-violet); --violet-soft:var(--sk-soft); --muted:var(--sk-muted);
  --green:var(--sk-ok); --green-soft:var(--sk-ok-bg); --red:var(--sk-no); --red-soft:var(--sk-no-bg);
  --font-display:var(--sk-font); --font-body:var(--sk-font);

  background:var(--sk-bg); color:var(--sk-ink); font-family:var(--sk-font); font-size:16px; line-height:1.5;
  padding:16px; border-radius:20px;
}
/* one typeface throughout, as in the paper: beats the app theme's per-class
   Poppins/Inter rules on specificity; the monospace boxes and timer below win back */
.sp-skin p, .sp-skin span, .sp-skin b, .sp-skin strong, .sp-skin div, .sp-skin li, .sp-skin label,
.sp-skin button, .sp-skin a, .sp-skin td, .sp-skin th, .sp-skin input, .sp-skin textarea, .sp-skin select{
  font-family:var(--sk-font); }
/* fill the page behind it, not just a panel in the middle */
#view:has(> .sp-skin){ background:#EDE9FB; }

.sp-skin h1, .sp-skin h2, .sp-skin h3, .sp-skin h4{
  font-family:var(--sk-font); color:var(--sk-head); font-weight:800; letter-spacing:0; }
.sp-skin h2{ font-size:22px; }
.sp-skin .muted, .sp-skin .small.muted{ color:var(--sk-muted); }

/* ---- cards ---- */
.sp-skin .card, .sp-skin .qblock{
  background:#fff; border:2px solid var(--sk-line); border-radius:14px;
  box-shadow:0 8px 20px rgba(91,33,182,.06); }
.sp-skin .qblock.is-flagged{ border-color:#F59E0B; box-shadow:0 0 0 2px #FDE68A; }
.sp-skin .qblock.q-pulse{ border-color:var(--sk-violet); box-shadow:0 0 0 3px var(--sk-soft); }
.sp-skin .qblock-num{ color:var(--sk-violet); font-family:var(--sk-font); font-weight:800; }

/* ---- the question ---- */
.sp-skin #q-body, .sp-skin .q-side-q, .sp-skin .review-q{ font-size:17px; }
.sp-skin .q-side-q > p:first-of-type, .sp-skin .q-side-q b:first-child{ color:var(--sk-ink); }
.sp-skin .stimulus, .sp-skin .passage-panel{
  background:#fff; border:2px solid var(--sk-line); border-radius:14px; padding:12px 14px; }
.sp-skin .stimulus h3, .sp-skin .passage-head b{ color:var(--sk-head); font-size:17px; }
.sp-skin table{ border-collapse:collapse; }
.sp-skin .stimulus table, .sp-skin .passage-panel table, .sp-skin .q-side-q table, .sp-skin #q-body table{
  width:100%; margin:6px 0 10px; font-size:14.5px; }
.sp-skin th, .sp-skin td{ border-color:var(--sk-line); }
.sp-skin .stimulus th, .sp-skin .stimulus td, .sp-skin .passage-panel th, .sp-skin .passage-panel td,
.sp-skin .q-side-q th, .sp-skin .q-side-q td, .sp-skin #q-body th, .sp-skin #q-body td{
  padding:5px 8px; border:1px solid var(--sk-line); text-align:left; }
.sp-skin th{ background:var(--sk-soft); color:var(--sk-head); }

/* ---- options: the paper's rows ---- */
.sp-skin .q-option{
  gap:10px; align-items:center; padding:9px 12px; margin-bottom:7px; font-size:15.5px;
  color:var(--sk-ink); background:#fff; border:2px solid var(--sk-line); border-radius:11px;
  transition:border-color .12s ease, background-color .12s ease; }
.sp-skin .q-option:hover{ border-color:var(--sk-line2); }
.sp-skin .q-option.selected{ border-color:var(--sk-violet); background:var(--sk-soft); }
.sp-skin .q-option.correct{ border-color:var(--sk-ok); background:var(--sk-ok-bg); }
.sp-skin .q-option.wrong{ border-color:var(--sk-no-line); background:var(--sk-no-bg); }
.sp-skin .q-option .key{
  flex:0 0 auto; min-width:16px; height:auto; background:none; border:0; border-radius:0;
  font-family:var(--sk-font); font-size:15px; font-weight:800; color:var(--sk-key); }
.sp-skin .q-option.selected .key{ color:var(--sk-violet); }
.sp-skin .q-option.correct .key{ color:var(--sk-ok-ink); }
.sp-skin .q-option.wrong .key{ color:var(--sk-no-ink); }
.sp-skin .q-option.multi .key{ border-radius:0; }

/* ---- typed answers: the paper's letter boxes ---- */
.sp-skin .fib-input, .sp-skin input.fib-input{
  font:600 19px "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace; color:var(--sk-ink);
  padding:6px 10px; background:#fff; border:2px solid var(--sk-line2); border-radius:9px; }
.sp-skin .fib-input:focus{ outline:3px solid #A78BFA; outline-offset:2px; border-color:var(--sk-violet); }

/* ---- buttons: violet-to-magenta pills ---- */
.sp-skin .btn{ font-family:var(--sk-font); font-weight:800; border-radius:999px; }
.sp-skin .btn-primary, .sp-skin .btn-spark{
  color:#fff; border:0; box-shadow:0 6px 16px rgba(124,58,237,.22);
  background:linear-gradient(135deg, var(--sk-violet), var(--sk-magenta)); }
.sp-skin .btn-primary:hover, .sp-skin .btn-spark:hover{
  background:linear-gradient(135deg, #6D28D9, #A21CAF); color:#fff; }
.sp-skin .btn-primary:disabled, .sp-skin .btn-spark:disabled{
  background:#EBE6FA; color:#A79FC8; box-shadow:none; cursor:not-allowed; }
.sp-skin .btn-ghost{ color:var(--sk-head); background:#fff; border:2px solid var(--sk-line); }
.sp-skin .btn-ghost:hover{ border-color:var(--sk-violet); background:var(--sk-soft); }
.sp-skin button:focus-visible, .sp-skin input:focus-visible, .sp-skin a:focus-visible{
  outline:3px solid #A78BFA; outline-offset:2px; }

/* ---- tags, banners, timer, palette ---- */
.sp-skin .tag{ font-family:var(--sk-font); font-weight:800; border:2px solid transparent; }
.sp-skin .tag-subject{ background:var(--sk-soft); color:#5B21B6; border-color:var(--sk-line2); }
.sp-skin .tag-green{ background:var(--sk-ok-bg); color:var(--sk-ok-ink); border-color:#A7F3D0; }
.sp-skin .tag-red{ background:var(--sk-no-bg); color:var(--sk-no-ink); border-color:var(--sk-no-line); }
.sp-skin .tag-amber{ background:var(--sk-tip-bg); color:var(--sk-tip-ink); border-color:#F6D56B; }
.sp-skin .tag-grey{ background:#F4F2FB; color:var(--sk-muted); }
.sp-skin .section-banner{
  background:#fff; border:2px solid var(--sk-line); border-radius:12px; color:var(--sk-head); }
.sp-skin .section-banner b{ color:var(--sk-head); font-weight:800; }
.sp-skin .exam-timer, .sp-skin div.exam-timer, .sp-skin span.exam-timer{
  font-family:"IBM Plex Mono", ui-monospace, monospace; background:var(--sk-head); color:#fff; border-radius:999px; }
.sp-skin .exam-timer.low{ background:var(--sk-no); }
.sp-skin .palette button{
  font-family:var(--sk-font); font-weight:800; color:var(--sk-head);
  background:#fff; border:2px solid var(--sk-line); border-radius:9px; }
.sp-skin .palette button.answered{ color:#fff; border-color:transparent;
  background:linear-gradient(135deg, var(--sk-violet), var(--sk-magenta)); }
.sp-skin .palette button.current{ box-shadow:0 0 0 3px #A78BFA; }
.sp-skin .palette button.flagged{ outline:2px solid #F59E0B; }
.sp-skin .progress, .sp-skin .trend-bar{ background:var(--sk-soft); border-radius:999px; }
.sp-skin .progress > span, .sp-skin .progress > div{
  background:linear-gradient(90deg, var(--sk-violet), var(--sk-magenta)); border-radius:999px; }

/* ---- results and review ---- */
.sp-skin .celebrate-card{ background:#fff; border:2px solid var(--sk-line); }
.sp-skin .score-ring{ color:var(--sk-head); }
.sp-skin .stat-strip > *{ background:var(--sk-soft); border-radius:12px; }
.sp-skin .review-explain{
  background:#FBFAFF; border:2px solid var(--sk-line); border-left:6px solid var(--sk-violet); border-radius:0 14px 14px 0; }
.sp-skin .review-answer{
  display:inline-block; padding:4px 12px; border-radius:999px; font-weight:800;
  background:var(--sk-ok-bg); color:var(--sk-ok-ink); border:2px solid #A7F3D0; }
.sp-skin .rev-pal button, .sp-skin .rev-cell{ font-family:var(--sk-font); font-weight:800; border-radius:9px; }
.sp-skin table.data th{ background:var(--sk-soft); color:var(--sk-head); }
.sp-skin table.data td{ border-color:var(--sk-line); }
.sp-skin .rag-green{ color:var(--sk-ok-ink); } .sp-skin .rag-red{ color:var(--sk-no-ink); } .sp-skin .rag-amber{ color:var(--sk-tip-ink); }
.sp-skin .next-step{ background:#fff; border:2px solid var(--sk-line); border-radius:12px; }
.sp-skin .creative-note, .sp-skin .sample-answer{ background:#FBFAFF; border:2px solid var(--sk-line); border-radius:12px; }

@media (max-width:640px){ .sp-skin{ padding:10px; border-radius:14px; } }
@media print{ .sp-skin{ background:#fff; padding:0; } }

/* ============================================================
   v12.36.0 — tighter quiz layout: less padding, less scrolling
   (beats the notebook densities on specificity inside the skin)
   ============================================================ */
.sp-skin{ padding:8px 10px; }
.sp-skin > p:first-child{ margin:0 0 6px; }
.sp-skin #quiz-box{ padding:12px 14px; }
.sp-skin #quiz-box[data-nb]{ --nb-pad:10px; --nb-gap:10px; }
.sp-skin #quiz-box .card-head.paper-head{ margin:-12px -14px 8px; padding:8px 14px; }
.sp-skin #quiz-box .card-head.paper-head h2{ font-size:1.2rem; }
.sp-skin #quiz-box #q-body{ margin-top:10px !important; }
.sp-skin #quiz-box .q-split{ gap:12px; }
.sp-skin #quiz-box[data-nb] .q-side-q{ padding:10px 14px; font-size:16.5px; line-height:1.5; }
.sp-skin #quiz-box[data-nb] .q-option{ padding:7px 12px; margin-bottom:6px; font-size:15.5px; }
.sp-skin #quiz-box[data-nb] .q-option .key{ width:24px; height:24px; }
.sp-skin #quiz-box .progress{ height:6px; }
/* the designed explanation brings its own frame; no second box around it */
.sp-skin #quiz-box #q-explain, .sp-skin #quiz-box[data-nb] #q-explain{
  margin:8px 0 0 !important; padding:0; border:0; background:none; transform:none;
  font:inherit; color:inherit; }
.sp-skin iframe.explain-frame{ margin-top:4px; }
.sp-skin iframe.explain-frame.is-clipped{ border:0; box-shadow:none; }
/* Next stays in reach while the explanation is read */
.sp-skin .q-next-row{ position:sticky; bottom:10px; z-index:3; margin-top:8px !important; pointer-events:none; }
.sp-skin .q-next-row .btn{ pointer-events:auto; box-shadow:0 8px 22px rgba(124,58,237,.35); }
.sp-skin .quiz-foot{ margin-top:8px; padding-top:8px; }

/* the quiz clock */
.sp-skin .q-head-right{ display:inline-flex; gap:10px; align-items:center; flex-wrap:wrap; }
/* v12.36.2 — two chips: the section clock and the Overall Quiz clock */
.sp-skin .q-clock{ display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sp-skin .q-clock[hidden]{ display:none; }
.sp-skin .q-clock-chip{ display:inline-flex; gap:5px; align-items:center; padding:3px 12px; border-radius:999px;
  background:var(--sk-soft); border:2px solid var(--sk-line2); color:var(--sk-head); font-size:13.5px; font-weight:700; white-space:nowrap; }
.sp-skin .q-clock-chip.q-clock-all{ background:#fff; }
.sp-skin .q-clock-chip b{ font-family:"IBM Plex Mono", ui-monospace, monospace; }
.sp-skin .q-clock-chip.low{ background:var(--sk-no-bg); border-color:var(--sk-no-line); color:var(--sk-no-ink); }
.sp-skin .quiz-break{ text-align:center; padding:18px 12px; }
@media (max-width:640px){ .sp-skin #quiz-box{ padding:10px; } }
.sp-skin .quiz-sec-banner{ margin:0 0 8px; padding:6px 12px; }

/* v12.39.0 — typed answers in a quiz (the booster's spelling part) */
.sp-skin .q-fib .fib-body{ font-size:17px; line-height:2.1; margin:0 0 10px; }
.sp-skin .q-fib .fib-input{ width:auto; min-width:150px; text-transform:uppercase; letter-spacing:.12em; }
.sp-skin .q-fib .fib-input.fib-ok{ border-color:var(--sk-ok); background:var(--sk-ok-bg); color:var(--sk-ok-ink); }
.sp-skin .q-fib .fib-input.fib-no{ border-color:var(--sk-no-line); background:var(--sk-no-bg); color:var(--sk-no-ink); text-decoration:line-through; }
.sp-skin .q-fib .fib-correct{ display:inline-block; margin-left:8px; padding:2px 10px; border-radius:999px; font-weight:800;
  font-family:"IBM Plex Mono", ui-monospace, monospace; background:var(--sk-ok-bg); color:var(--sk-ok-ink); border:2px solid #A7F3D0; }

/* v12.39.0 — Weekly Vocab Booster: the student's weeks and Learn cards */
.sp-skin .vb-row{ display:grid; grid-template-columns:120px repeat(5, minmax(0,1fr)); gap:8px; align-items:stretch;
  padding:8px 0; border-top:1px solid var(--sk-line); }
.sp-skin .vb-row:first-of-type{ border-top:0; }
.sp-skin .vb-row.vb-cur{ background:var(--sk-soft); border-radius:12px; padding:8px; margin:4px -8px; }
.sp-skin .vb-wk{ display:flex; flex-direction:column; justify-content:center; gap:2px; }
.sp-skin .vb-wk small{ color:var(--sk-muted); }
.sp-skin .vb-wk .tag{ align-self:flex-start; }
.sp-skin .vb-tile{ display:flex; flex-direction:column; justify-content:center; gap:2px; padding:8px 10px; border-radius:12px;
  background:#fff; border:2px solid var(--sk-line); color:var(--sk-head); font-weight:800; text-decoration:none; font-size:14.5px; }
.sp-skin a.vb-tile:hover{ border-color:var(--sk-violet); }
.sp-skin .vb-tile small{ font-weight:600; color:var(--sk-muted); font-size:12.5px; }
.sp-skin .vb-tile small.vb-good{ color:var(--sk-ok-ink); }
.sp-skin .vb-tile.vb-done{ border-color:#A7F3D0; background:var(--sk-ok-bg); }
.sp-skin .vb-tile.vb-learn{ border-color:var(--sk-line2); background:var(--sk-soft); }
.sp-skin .vb-tile.vb-soon{ opacity:.55; }
@media (max-width:760px){ .sp-skin .vb-row{ grid-template-columns:1fr 1fr; } .sp-skin .vb-wk{ grid-column:1/-1; flex-direction:row; align-items:center; gap:8px; } }
.sp-skin .vb-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:12px; }
.sp-skin .vb-card{ display:flex; flex-direction:column; gap:6px; margin:0; }
.sp-skin .vb-card-head{ display:flex; align-items:center; gap:8px; }
.sp-skin .vb-emoji{ font-size:1.6rem; }
.sp-skin .vb-num{ margin-left:auto; font-size:12px; font-weight:800; color:var(--sk-muted); }
.sp-skin .vb-riddle{ margin:0; font-weight:800; color:var(--sk-head); }
.sp-skin .vb-clues{ margin:0; padding-left:20px; font-size:14.5px; }
.sp-skin .vb-card .btn{ align-self:flex-start; }
.sp-skin .vb-word{ margin:0; font:800 1.5rem "IBM Plex Mono", ui-monospace, monospace; color:var(--sk-violet); letter-spacing:.06em; }
.sp-skin .vb-example{ font-style:italic; color:var(--sk-muted); margin:0; }
.sp-skin .vb-answer p{ margin:0 0 6px; }
.sp-skin .vb-chip{ display:inline-block; margin:2px 4px 2px 0; padding:1px 10px; border-radius:999px; font-size:13px; font-weight:700; border:2px solid; }
.sp-skin .vb-syn{ background:var(--sk-ok-bg); color:var(--sk-ok-ink); border-color:#A7F3D0; }
.sp-skin .vb-ant{ background:var(--sk-no-bg); color:var(--sk-no-ink); border-color:var(--sk-no-line); }
.sp-skin .vb-card.vb-open{ border-color:var(--sk-line2); }
.sp-skin .q-fib-wrap{ display:flex; flex-direction:column; gap:10px; }
.sp-skin #quiz-box .q-side-q.q-fib{ font-size:17.5px; }
/* v12.42.0 — done ticks on the booster's tiles and weeks */
.sp-skin .vb-tile{ position:relative; }
.sp-skin .vb-tick{ display:inline-block; font-size:11.5px; font-weight:800; color:#fff; background:var(--sk-ok);
  border-radius:999px; padding:0 7px; margin-right:2px; }
.sp-skin .vb-tile.vb-done small{ color:var(--sk-ok-ink); }
.sp-skin .vb-tile.vb-learn.vb-done{ border-color:#A7F3D0; background:var(--sk-ok-bg); }
.sp-skin .vb-row.vb-wdone .vb-wk b{ color:var(--sk-ok-ink); }