/* Pop Quiz — standard TeachSmarts family styling. Colour tokens below are the one
   app-specific variance point per the Design Constitution §3a; every structural token
   (radius, spacing, shadow, sizing, typography, motion) is the fixed family value. */

:root{
  --primary-color:#3A6FF0;
  --primary-hover:#2E59C4;
  /* Pop Quiz's second brand colour — colour is the one token category every TeachSmarts app is
     allowed its own values for (Design Constitution §3a), and an app-specific second hue on top
     of that is likewise an app choice, not a family-wide token; used only on the landing logo and
     the matching accent button below, never as a second "primary" competing for attention. */
  --accent-color:#FF8A3D;
  --accent-hover:#E86F1F;
  --secondary-color:#95a5a6;
  --secondary-hover:#7f8c8d;
  --success-color:#34A853;
  --success-hover:#2e8a4a;
  --danger-color:#e74c3c;
  --danger-hover:#c0392b;
  --text-dark:#2c3e50;
  --text-light:#34495e;
  --text-muted:#8b929a;
  --input-bg:#ecf0f1;
  --container-bg-color:#ffffff;
  --main-bg-color:#f0f2f5;
  --gradient-start:#e9eefd;
  --gradient-end:#fdfefe;
  --border-soft:#d5deec;
  --border-input:#ccc;
  --font-sans:'Google Sans','Roboto Flex','Inter','Roboto','Segoe UI',sans-serif;

  --radius-input:8px;
  --radius-button:8px;
  --radius-card:16px;
  --radius-modal:18px;
  --radius-pill:999px;

  --space-xs:6px;
  --space-sm:10px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;

  --control-height:44px;
  --width-app-max:960px;
  --width-wizard-max:900px;

  --shadow-card:0 12px 36px rgba(0,0,0,.08);
  --shadow-card-soft:0 4px 20px rgba(0,0,0,.06);
  --shadow-hover-lift:0 6px 14px rgba(0,0,0,.08);
  --shadow-modal:0 28px 80px rgba(15,23,42,.28);

  --font-size-page-title:2rem;
  --font-size-section:1.5rem;
  --font-size-card-title:1.125rem;
  --font-size-body:1rem;
  --font-size-control:1em;
  --font-size-helper:0.875rem;

  --transition-fast:0.2s ease;
  --transition-lift:0.15s ease;

  --z-dropdown:10;
  --z-sticky-nav:100;
  --z-modal:9999;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text-dark);
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  min-height:100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: var(--gradient-end);
}

.page-frame{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: var(--space-lg) 0;
}

.app-container{
  position:relative;
  background: var(--container-bg-color);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  max-width: var(--width-app-max);
  width: 100%;
  margin: 0 auto;
}

@media (max-width:768px){
  .app-container{ padding: var(--space-md); }
}

/* Build a Quiz is the one page with genuinely two-column-wide content (question screenshot +
   its own text) where the family's standard 900px wizard-content column crowds the question
   text unreadably on smaller screens. Widened to 95% of the viewport just for this page — a
   deliberate, scoped exception (toggled by showPage()), not a change to the shared card width
   every other page still uses. */
.app-container.wide-page{ max-width: 95vw; }
#page-quiz-builder.center-content{ max-width: 100%; }

/* The wide page still caps at 3 columns, never 4+ — beyond that, each screenshot shrinks back to
   the same unreadable size the wider canvas was meant to fix in the first place. A fixed column
   count (rather than tuning auto-fill's minmax threshold for one assumed screen width) is what
   actually guarantees the cap holds on any monitor, including very wide ones. */
#page-quiz-builder .question-grid{ grid-template-columns: repeat(2, 1fr); margin-bottom: var(--space-lg); }
.picker-actions-row{ display:flex; gap: var(--space-sm); margin-bottom: var(--space-lg); }
@media (max-width: 700px){
  #page-quiz-builder .question-grid{ grid-template-columns: 1fr; }
}

h1, h2, .app-title{
  font-family: var(--font-sans);
  line-height:1.3;
  margin:0 0 var(--space-sm);
}

h2.page-title{ font-size: var(--font-size-page-title); color: var(--text-dark); text-align:center; }

.app-title{
  font-size: var(--font-size-page-title);
  font-weight:700;
  color: var(--text-dark);
}

p, label, span, div{ font-family: var(--font-sans); }

/* Landing page — matches every other TeachSmarts app's landing page exactly (see The
   Docinator's static/landing.css, the family reference for this pattern). Unboxed on the
   gradient (not inside .app-container — see the page-frame.landing-mode override below),
   full 1320px width, 350px square logo, and the .feature-box <strong>/<span> anatomy, all at
   Docinator's own literal values rather than re-derived ones. */
.page-frame.landing-mode{
  display:block;
  padding:0;
  min-height:100vh;
}
/* #app-container holds every other .wizard-page — without this it still renders as an empty
   white card sitting underneath the landing page's own content. */
.page-frame.landing-mode > #app-container{ display:none; }
#page-landing{
  display:none;
  min-height:100vh;
  flex-direction:column;
}
#page-landing.active{ display:flex; }

.landing-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 40px 40px;
  width:100%;
}
.brand-name{
  font-size:1.5rem;
  font-weight:700;
  color:#000;
  letter-spacing:1px;
}

.landing-content{
  flex:1;
  display:flex;
  flex-direction:row;
  gap:50px;
  align-items:center;
  width:100%;
  max-width:1320px;
  margin:auto;
  padding:40px;
}
.landing-left, .landing-right{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.landing-left{ align-items:center; padding-right:40px; }
.landing-right{ align-items:flex-start; padding-left:40px; }

.landing-logo{ width:350px; height:350px; object-fit:contain; margin:5px 0 15px; flex:0 0 auto; }

/* Header Login link + hero's one primary CTA (Docinator's exact .login-btn/.primary-cta anatomy,
   just using this app's own token colours instead of the literal values). */
.btn.login-btn{
  background:transparent;
  color: var(--primary-color);
  padding:10px 20px;
  border:2px solid var(--primary-color);
  border-radius: var(--radius-button);
  font-weight:bold;
  min-height:auto;
}
.btn.login-btn:hover:not([disabled]){ background: var(--primary-color); color:#fff; }

.primary-cta{
  background: var(--primary-color);
  color:#fff;
  font-size:1em;
  font-weight:bold;
  padding:15px 30px;
  border:none;
  border-radius: var(--radius-button);
  cursor:pointer;
  transition: background var(--transition-fast);
}
.primary-cta:hover{ background: var(--primary-hover); }

/* Role choice (Step 1): two large tiles rather than the plain .button-group pair the rest of the
   app uses for a binary choice — this is the very first decision a visitor makes, so it gets a
   more deliberate, "properly styled" treatment instead of two small inline buttons. */
.role-select-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  max-width:700px;
  margin:0 auto var(--space-lg);
}
.role-select-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: var(--space-xs);
  padding: var(--space-xl) var(--space-lg);
}
.role-select-title{ font-size: var(--font-size-section); font-weight:700; }
.role-select-subtitle{ font-size: var(--font-size-helper); font-weight:normal; }
.role-select-btn.checked .role-select-subtitle{ color:#fff; opacity:.9; }

.landing-left h1{ font-size:2.5rem; margin-bottom:20px; font-weight:700; color:#1a1a1a; }
.landing-left p{ font-size:1rem; line-height:1.6; margin-bottom:20px; color: var(--text-light); }
.features-header{ font-size:1.8rem; font-weight:600; margin-bottom:15px; color:#1a1a1a; align-self:center; }

#page-landing .button-group{ gap: var(--space-sm); }
#page-landing .selectable-btn{ flex:0 1 220px; }

.feature-box{
  background:#fff;
  border-radius: var(--radius-input);
  padding:16px 20px;
  margin-bottom:16px;
  box-shadow: var(--shadow-card-soft);
  width:100%;
  font-size:1.1rem;
  line-height:1.4;
  transition: transform var(--transition-lift), box-shadow var(--transition-lift);
}
.feature-box strong{ display:block; margin-bottom:4px; font-weight:600; color: var(--text-dark); }
.feature-box:hover{ transform: translateY(-3px); box-shadow: var(--shadow-hover-lift); }

.landing-footer{
  text-align:center;
  padding:16px 40px 24px;
  font-size:0.75rem;
  color: var(--text-muted);
}
.landing-footer a{ color: var(--text-muted); text-decoration:none; margin:0 6px; }
.landing-footer a:hover{ text-decoration:underline; }

/* Top alignment (Design Constitution, landing page): both columns hang from the same top line, so
   the logo's edge lands level with the first feature card instead of the column's vertical middle. */
:root{ --landing-heading-offset: calc(1.8rem * 1.2 + 15px); }
.landing-content{ align-items:flex-start; }
.landing-content > .landing-left{ justify-content:flex-start; align-content:start; padding-top:max(0px, calc(var(--landing-heading-offset) - 5px)); }
@media (max-width:960px){
  .landing-content{ flex-direction:column; align-items:center; padding:40px 20px; }
  .landing-left, .landing-right{ padding:0; }
  .landing-content > .landing-left{ padding-top:0; }
}

.btn{
  background: var(--primary-color);
  color:#fff;
  font-weight:bold;
  font-size:1em;
  border:none;
  border-radius: var(--radius-button);
  padding:15px 30px;
  min-height: var(--control-height);
  display:inline-flex; align-items:center; justify-content:center;
  transition: background-color var(--transition-fast);
  cursor:pointer;
}
.btn:hover:not([disabled]){ background: var(--primary-hover); }
.btn[disabled]{ background:#bdc3c7; cursor:not-allowed; }

.btn.btn-secondary{ background: var(--secondary-color); }
.btn.btn-secondary:hover:not([disabled]){ background: var(--secondary-hover); }

/* Reserved for a genuinely irreversible, destructive confirmation (Design Constitution §5) —
   never for routine actions like logout, which stay on the plain primary-brand .btn. */
.btn.btn-danger{ background: var(--danger-color); }
.btn.btn-danger:hover:not([disabled]){ background: var(--danger-hover); }

.button-group{
  display:flex; flex-wrap:wrap; gap: var(--space-sm); align-items:stretch; width:100%;
}

.selectable-btn{
  background: var(--input-bg);
  color: var(--text-light);
  border: 2px solid #bdc3c7;
  border-radius: var(--radius-button);
  padding: var(--space-lg);
  text-align:center;
  transition: all var(--transition-fast);
  cursor:pointer;
}
.selectable-btn.checked{
  background: var(--primary-color); color:#fff; border-color: var(--primary-hover);
}

/* Click-to-answer multiple choice — large A/B/C/D tiles replacing a free-text input for the
   common case, since every option is already a fixed, known letter (found live: a free-text
   box for a 4-option MC question made students type the letter instead of just picking it). */
.mc-answer-row{
  display:grid; grid-template-columns:repeat(2, 1fr); gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
@media (max-width: 480px){ .mc-answer-row{ grid-template-columns:1fr; } }
.mc-answer-btn{
  font-size:1.5rem; font-weight:700; padding: var(--space-lg);
}
.mc-answer-btn:disabled{ cursor:not-allowed; opacity:.7; }
.mc-answer-btn.eliminated{ opacity:.35; text-decoration:line-through; }

.lifeline-row{ display:flex; justify-content:center; margin-bottom: var(--space-sm); }
.lifeline-row:empty{ display:none; }
.lifeline-btn.btn-secondary{ background: var(--accent-color); color:#fff; }
.lifeline-btn.btn-secondary:hover:not([disabled]){ background: var(--accent-hover); }

input[type="text"], input[type="email"], input[type="password"], select, textarea{
  width:100%;
  padding:15px;
  border:1px solid var(--border-input);
  border-radius: var(--radius-input);
  background: var(--input-bg);
  color: var(--text-dark);
  font-size: var(--font-size-body);
  font-family: var(--font-sans);
}
textarea{ min-height:120px; resize:vertical; }

/* input[type="file"] has zero native styling — can't fully restyle the OS control cross-browser,
   so this recolors what CAN be styled to sit within the token system. */
input[type="file"]{
  width:100%;
  padding: var(--space-sm);
  border:1px solid var(--border-input);
  border-radius: var(--radius-input);
  background: var(--input-bg);
  color: var(--text-light);
  font-family: var(--font-sans);
  font-size: var(--font-size-helper);
}
input[type="file"]::file-selector-button{
  background: var(--secondary-color);
  color:#fff;
  font-weight:bold;
  font-family: var(--font-sans);
  border:none;
  border-radius: var(--radius-button);
  padding: var(--space-xs) var(--space-md);
  margin-right: var(--space-sm);
  cursor:pointer;
  transition: background-color var(--transition-fast);
}
input[type="file"]::file-selector-button:hover{ background: var(--secondary-hover); }

.edit-btn{
  background:none;
  border:none;
  color: var(--primary-color);
  font-weight:bold;
  font-size:0.9em;
  font-family: var(--font-sans);
  text-decoration: underline;
  padding: 5px;
  cursor:pointer;
}
.edit-btn:hover{ color: var(--primary-hover); }

.status-box{
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-input);
  text-align:center;
  font-size:1.1em;
  background: var(--input-bg);
  color: var(--text-light);
}
.status-box.correct{ background: var(--success-color); border:1px solid var(--success-hover); color:#fff; font-size:1.4rem; font-weight:700; padding: var(--space-md); box-shadow:0 4px 14px rgba(52,168,83,.35); }
.status-box.error{ background:#fdedec; border:1px solid #fadbd8; color: var(--danger-hover); }
.status-box.hidden{ display:none; }

.wizard-page{ display:none; width:100%; padding: var(--space-md) var(--space-sm); }
.wizard-page.active{ display:block; animation: fadeIn .3s; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.wizard-page.center-content{ max-width: var(--width-wizard-max); margin:0 auto; }

.wizard-nav-row{
  display:flex; justify-content:space-between; gap: var(--space-sm); margin-top: var(--space-lg);
}

/* A single-button confirmation screen (no Back to balance against) reads better centered than
   pinned to the left edge that justify-content:space-between leaves it at with only one child. */
#page-paper-done{ text-align:center; }
#page-paper-done .wizard-nav-row,
#page-role-select .wizard-nav-row{ justify-content:center; }

.form-group{ margin-bottom: var(--space-md); }
.form-group label{ display:block; margin-bottom: var(--space-xs); color: var(--text-light); font-size: var(--font-size-helper); }

.question-image{
  max-width:100%;
  border-radius: var(--radius-input);
  border: 1px solid var(--border-soft);
  background:#fff;
  /* Breathing room between the question's page scan and the box edge, and between the box and
     the controls around it, so the scan doesn't sit hard against its own border. */
  padding: var(--space-lg) var(--space-md);
  margin: var(--space-md) 0;
  transition: opacity .15s ease;
}
.question-image.loading-faded{ opacity:.35; }

.modal-overlay{
  position:fixed; inset:0; z-index: var(--z-modal);
  background: rgba(17,24,39,.42);
  backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center; padding: var(--space-lg);
}
.modal-card{
  background: var(--container-bg-color);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-modal);
  padding: var(--space-lg);
  max-height:88vh; overflow-y:auto;
  width:min(480px,100%);
  position:relative;
  border-top: 6px solid var(--primary-color);
}
.modal-close-btn{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; border:none; background:transparent;
  color: var(--text-light); font-size:1.3rem; border-radius: var(--radius-pill); cursor:pointer;
}
.modal-close-btn:hover{ background: var(--input-bg); }
.modal-title{ margin:0 0 10px; font-size:1.5rem; font-weight:700; color: var(--text-dark); text-align:center; }
.modal-copy{ margin:0; color: var(--text-light); font-size:1.05rem; line-height:1.6; text-align:center; }
.modal-actions{ display:flex; justify-content:center; gap: var(--space-sm); margin-top: var(--space-lg); }
.modal-actions .btn{ min-width:160px; }
.hidden{ display:none !important; }

#user-info{ display:flex; justify-content:center; align-items:center; margin-bottom: var(--space-md); }

.helper-text{ color: var(--text-muted); font-size: var(--font-size-helper); }

#paper-confirm-subtitle{ text-align:center; }

/* Spinner — shown wherever the app is waiting on an async step a teacher is looking at (a paper
   chunking, a question search in flight), not just changing state silently underneath them. */
.spinner{
  display:inline-block;
  width:20px; height:20px;
  border:3px solid var(--border-soft);
  border-top-color: var(--primary-color);
  border-radius: var(--radius-pill);
  animation: spinner-rotate .8s linear infinite;
  flex:none;
}
@keyframes spinner-rotate{ to{ transform:rotate(360deg); } }

.loading-inline{ display:inline-flex; align-items:center; gap: var(--space-xs); }
.loading-inline .spinner{ width:14px; height:14px; border-width:2px; }

.loading-block{
  display:flex; flex-direction:column; align-items:center; gap: var(--space-sm);
  padding: var(--space-2xl) 0;
}
.loading-block .spinner{ width:36px; height:36px; }

/* Grid containers (e.g. the question grid) auto-place a lone loading block into the first
   column track instead of centering it across the row — span the full row and center it. */
.question-grid > .loading-block{ grid-column: 1 / -1; justify-self: center; }

.chunking-progress-name{ margin:0; font-weight:700; color: var(--text-dark); font-size:1.05em; }

.filter-row{ display:flex; flex-wrap:wrap; gap: var(--space-sm); }
.filter-row .form-group{ flex:1 1 200px; }

.card-panel{
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border:1px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-soft);
}
.card-title{ font-size: var(--font-size-card-title); font-weight:700; margin:0 0 var(--space-sm); color: var(--text-dark); }

/* A standalone .btn sitting directly in a page's flow (not inside a .form-group or
   .wizard-nav-row, both of which already space themselves) needs its own bottom margin — without
   it, the next element sits flush against the button with no breathing room. */
#show-create-class-btn{ margin-bottom: var(--space-md); }
#class-actions-row{ margin-bottom: var(--space-md); }

.confirm-row{ display:flex; align-items:center; gap: var(--space-sm); flex-wrap:wrap; }
.confirm-row p{ flex:1 1 240px; }

/* Batch answer-key upload: one row per selected marking-guidelines PDF, matched to a paper. */
.batch-match-row{
  display:flex; align-items:center; gap: var(--space-sm); flex-wrap:wrap;
  padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-soft);
}
.batch-match-row:last-child{ border-bottom:none; }
.batch-match-row .batch-match-filename{ flex:1 1 240px; font-size: var(--font-size-helper); word-break:break-word; }
.batch-match-row select{ flex:1 1 220px; }
.batch-match-row .batch-match-status{ flex:1 1 180px; font-size: var(--font-size-helper); color: var(--text-light); }
.batch-match-row .batch-match-status.error{ color: var(--danger-hover); }

#user-info .button-row{ display:flex; justify-content:center; gap: var(--space-sm); }

/* Step 2: subject tiles */
.subject-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-sm); }
.subject-tile{ display:flex; flex-direction:column; gap: var(--space-xs); font-family: var(--font-sans); }
.subject-name{ font-size: var(--font-size-card-title); font-weight:700; }
.subject-count{ font-size: var(--font-size-helper); }
.subject-tile.checked .subject-count{ color:#fff; }

/* Question screenshots — the cropped image is the primary representation of a question
   everywhere a teacher or student sees one; click to enlarge. */
.question-shot{
  display:block;
  width:100%;
  max-height:360px;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius: var(--radius-input);
  cursor:zoom-in;
}
/* A fixed box (not just max-width/max-height, which size independently per image and produce
   visibly different-sized thumbnails depending on each question's own crop aspect ratio — found
   live, comparing a wide mc question against a tall multi-part extended-response one side by
   side) — object-fit:contain (inherited from .question-shot) letterboxes any aspect ratio into
   it, so every result-row thumbnail reads as the same size regardless of its source image. */
.question-shot-small{ width:140px; height:140px; max-height:140px; flex:none; }

/* Document Bank: a grid of paper tiles, replacing the old row-per-paper list, each showing the paper's own cover-page thumbnail
   (chunking/pipeline.py) — same feature-card hover-lift language as the landing page's feature
   boxes (Design Constitution §5 Feature card). */
.paper-tile-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-md); }
.paper-tile{
  display:flex; flex-direction:column; gap: var(--space-sm);
  padding: var(--space-sm);
  border:1px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--container-bg-color);
  box-shadow: var(--shadow-card-soft);
  transition: transform var(--transition-lift), box-shadow var(--transition-lift);
}
.paper-tile:hover{ transform: translateY(-3px); box-shadow: var(--shadow-hover-lift); }
.paper-tile-thumb, .paper-tile-thumb-placeholder{
  width:100%; aspect-ratio:3/4;
  border-radius: var(--radius-input);
  border:1px solid var(--border-soft);
  background: var(--input-bg);
}
.paper-tile-thumb{ object-fit:cover; display:block; }
.paper-tile-thumb-placeholder{
  display:flex; align-items:center; justify-content:center;
  color: var(--text-muted);
  font-size:2.5rem; font-weight:700;
}
.paper-tile-name{ font-size: var(--font-size-card-title); font-weight:600; color: var(--text-dark); margin:0; }
.paper-tile-meta{ font-size: var(--font-size-helper); color: var(--text-light); margin:0; }
.paper-tile-actions{ display:flex; flex-wrap:wrap; gap: var(--space-xs); }
.paper-tile-preview{ display:flex; gap: var(--space-sm); overflow-x:auto; padding: var(--space-xs) 0; }

.question-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-md); }
.question-card{
  display:flex; flex-direction:column; gap: var(--space-sm);
  padding: var(--space-sm);
  border:2px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--container-bg-color);
  transition: all var(--transition-fast);
}
.question-card.selected{ border-color: var(--primary-color); background: var(--gradient-start); }
/* A question-card that IS a <label> (the Build a Quiz step) — the whole card is one big click
   target for its (visually hidden) checkbox, so it needs the pointer affordance a plain <div>
   card doesn't. */
label.question-card{ cursor:pointer; }
label.question-card .question-shot{ cursor:pointer; }
/* Chip-style checkbox toggle — a real checkbox input visually hidden behind its label, so
   existing .checked/.disabled JS logic keeps working unchanged. */
.chip-toggle-row{ display:flex; flex-wrap:wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
.chip-toggle input[type="checkbox"]{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0,0,0,0); overflow:hidden; white-space:nowrap;
}
.chip-toggle label{
  display:inline-flex; align-items:center;
  padding: 6px var(--space-md);
  border:1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--input-bg);
  color: var(--text-light);
  font-size: var(--font-size-helper);
  cursor:pointer; user-select:none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.chip-toggle input[type="checkbox"]:checked + label{
  background: var(--primary-color); border-color: var(--primary-color); color:#fff;
}
.chip-toggle input[type="checkbox"]:focus-visible + label{ outline:2px solid var(--primary-color); outline-offset:2px; }
.chip-toggle input[type="checkbox"]:disabled + label{ opacity:.5; cursor:not-allowed; }

.question-card-controls{ display:flex; align-items:center; gap: var(--space-xs); }
.question-card-controls label{ font-size: var(--font-size-helper); color: var(--text-light); }
.question-card-controls input[type="text"]{ flex:1; width:auto; padding: var(--space-sm); }

/* Per-viewer-only convenience checkbox with no visible box of its own — the card it's inside
   already shows selection state (border/background), and for a <label>-wrapped card the whole
   card is already the click target, so no separate visible control is needed. Still a real,
   focusable, screen-reader-visible checkbox — just not drawn. */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* A row of single-letter multiple-choice answer buttons (Answer Key screen) — same toggle-tile
   component as .selectable-btn elsewhere in the app, just narrower: a page-full of these next to
   plain question numbers doesn't need the default tile's roomy padding. */
.answer-option-btn{
  flex:0 0 auto;
  min-width:48px;
  padding: var(--space-sm) var(--space-md);
  font-weight:bold;
  font-size:1.1em;
}

.result-row{ padding: var(--space-xs) 0; border-bottom:1px solid var(--border-soft); }

.share-row{ display:flex; gap: var(--space-sm); align-items:center; }
.share-row input{ flex:1; }

.image-modal-card{ width:min(1000px,100%); border-top-color: var(--secondary-color); }
.image-modal-card .question-image{ display:block; margin: var(--space-lg) auto 0; }
.card-panel + .card-title{ margin-top: var(--space-lg); }

/* Landing helper classes (shared with The Quizzinator's markup) */
.u-text-center{ text-align:center; }

/* ===== Landing typography lock =====
   The Quizzinator landing page is the source of truth for these values (font, size, weight,
   line-height, colour, margins). Scoped high enough to beat each app's own p/h1/h2 rules. */
#page-landing .landing-header .brand-name{ font-family:'Roboto',sans-serif; font-size:1.5rem; font-weight:700; line-height:normal; letter-spacing:1px; color:#000; }
#page-landing .landing-content .landing-left h1{ font-family:'Roboto',sans-serif; font-size:2.5rem; font-weight:700; font-style:normal; line-height:normal; letter-spacing:normal; margin:0 0 20px; color:#1a1a1a; }
#page-landing .landing-content .landing-left p.text-large{ font-family:'Roboto',sans-serif; font-size:1.5rem; font-weight:400; line-height:1.6; margin:0 0 20px; color:#34495e; }
#page-landing .landing-content .landing-right h2.features-header{ font-family:'Roboto',sans-serif; font-size:1.8rem; font-weight:600; font-style:normal; line-height:1.2; letter-spacing:normal; margin:0 0 15px; color:#1a1a1a; }
#page-landing .landing-content .feature-box{ font-family:'Roboto',sans-serif; font-size:1.1rem; font-weight:400; line-height:1.4; color:#2c3e50; }
#page-landing .landing-content .feature-box strong{ font-family:'Roboto',sans-serif; font-size:1.1rem; font-weight:600; line-height:1.4; margin:0 0 4px; color:#2c3e50; }
#page-landing .landing-content .feature-box span{ font-family:'Roboto',sans-serif; font-size:1.1rem; font-weight:400; line-height:1.4; margin:0; color:#2c3e50; }

/* Teacher sign-in, laid out like PostLearn's login: a centered column with the two sign-in
   buttons stacked full-width, the email form opening beneath, and Back centered under a rule. */
#page-teacher-login{ text-align:center; }
.teacher-google-auth{ display:grid; justify-items:center; gap: var(--space-sm); width:min(460px, 100%); margin: var(--space-md) auto 0; }
.teacher-google-auth .btn{ width:100%; }
.teacher-email-form{ display:grid; gap: var(--space-sm); width:min(460px, 100%); margin: var(--space-md) auto 0; text-align:left; }
.teacher-email-form.hidden{ display:none; }
.teacher-forgot-password{ justify-self:end; }
.teacher-auth-actions{ display:grid; grid-template-columns:1fr 1fr; gap: var(--space-sm); }
.link-btn{ background:none; border:0; padding:0; color:inherit; font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
#page-teacher-login .wizard-nav-row{ justify-content:center; padding-top: var(--space-md); border-top:1px solid rgba(0,0,0,0.09); }

/* Account: PostLearn's round profile icon, pinned to the card corner. */
.profile-link{ width:42px; height:42px; padding:0; border-radius:50%; background:#ecf0f1; border:2px solid #d8dee4; display:inline-grid; place-items:center; color:#34495e; cursor:pointer; }
.profile-link:hover{ background:#fbe9e7; border-color:#d9534f; color:#c9302c; }
.profile-link svg{ width:22px; height:22px; }
.profile-link.card-corner{ position:absolute; top:16px; right:16px; z-index:5; }
#page-account{ text-align:center; }
#page-account .account-email{ font-weight:700; }
#page-account .account-section{ display:grid; gap: var(--space-sm); width:min(460px, 100%); margin: var(--space-md) auto 0; text-align:left; }
#page-account .account-section .btn{ justify-self:center; }
#page-teacher-subject{ text-align:center; }

/* Document Bank hub: breathing room between the filters, the paper grid and the buttons, and a
   spinner that spans the whole grid while papers load. */
#page-document-bank .question-card-controls{ margin-bottom: var(--space-md); }
#page-document-bank .paper-tile-grid{ margin-bottom: var(--space-md); }
#page-document-bank .paper-tile-grid > .loading-block{ grid-column:1 / -1; justify-self:center; }
#page-document-bank #doc-refresh-btn{ display:block; margin: 0 auto var(--space-md); }
#page-document-bank .wizard-nav-row{ margin-top: var(--space-lg); }

.subject-grid > .loading-block{ grid-column:1 / -1; justify-self:center; }

/* Student quiz list (Step 2): quiz tiles sit in a gapped, wrapping row with clear space above and
   below, rather than butting against each other, the title and the Join Another Class button. */
#page-student-quizzes #quiz-list{
  display:flex; flex-wrap:wrap; gap: var(--space-sm); width:100%;
  margin: var(--space-lg) 0;
}
#page-student-quizzes #quiz-list .helper-text{ margin:0; }
#page-student-quizzes #resend-verification-panel{ margin-bottom: var(--space-md); }
#page-student-quizzes #show-join-class-btn{ margin-top: var(--space-sm); }
#page-student-quizzes #join-class-panel{ margin-top: var(--space-md); }

/* Attempt page: Next Question sits centred at the bottom of the card. */
#page-quiz-attempt .wizard-nav-row{ justify-content:center; }

/* Quiz feedback bar: a wrong answer (or running out of time) is a solid red, matching the green
   Correct bar's weight. */
#attempt-feedback.status-box.error{ background: var(--danger-color); border:1px solid var(--danger-hover); color:#fff; font-size:1.4rem; font-weight:700; padding: var(--space-md); box-shadow:0 4px 14px rgba(231,76,60,.35); }

/* Results dashboard */
#analytics-results{ width:100%; }
.stat-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-sm); margin: var(--space-lg) 0; }
.stat-tile{ background: var(--input-bg); border-radius: var(--radius-button); padding: var(--space-md); text-align:center; }
.stat-value{ font-size:2rem; font-weight:700; color: var(--text-dark); line-height:1.1; }
.stat-label{ font-size: var(--font-size-helper); color: var(--text-light); margin-top: var(--space-xs); }
.dash-section{ margin: var(--space-xl) 0; }
.dash-section > h3{ margin-bottom: var(--space-xs); }
.dash-bar-row{ display:grid; grid-template-columns:minmax(90px, 220px) 1fr auto; align-items:center; gap: var(--space-sm); margin: var(--space-xs) 0; }
.dash-bar-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--text-dark); }
.dash-bar-track{ background:#e6e9ec; border-radius:999px; height:14px; overflow:hidden; }
.dash-bar-fill{ height:100%; border-radius:999px; background: var(--primary-color); }
.dash-bar-fill.primary{ background: var(--primary-color); }
.dash-bar-fill.good{ background: var(--success-color); }
.dash-bar-fill.ok{ background:#f0a030; }
.dash-bar-fill.poor{ background: var(--danger-color); }
.dash-bar-value{ font-size: var(--font-size-helper); color: var(--text-light); min-width:60px; text-align:right; }
.dash-alert{ background:#fff6e5; border:1px solid #f5d9a6; border-left:5px solid #f0a030; border-radius: var(--radius-button); padding: var(--space-sm) var(--space-md); margin: var(--space-sm) 0; }
.dash-alert p{ margin:0 0 var(--space-xs); }
.dash-question-details{ flex:1; min-width:0; }
.dash-picks{ margin: var(--space-sm) 0; }
.dash-table-wrap{ overflow-x:auto; }
.dash-table{ width:100%; border-collapse:collapse; }
.dash-table th{ text-align:left; font-size: var(--font-size-helper); color: var(--text-light); padding: var(--space-xs) var(--space-sm); border-bottom:2px solid #e6e9ec; }
.dash-table td{ padding: var(--space-sm); border-bottom:1px solid #eef0f2; }
.dash-score{ font-weight:700; }
.dash-score.good{ color: var(--success-hover); }
.dash-score.ok{ color:#b36b00; }
.dash-score.poor{ color: var(--danger-hover); }
.dash-flag{ display:inline-block; background:#fdedec; color: var(--danger-hover); border-radius:999px; padding:2px 10px; font-size: var(--font-size-helper); margin-right: var(--space-xs); }
@media (max-width:600px){ .dash-bar-row{ grid-template-columns:1fr; } .dash-bar-value{ text-align:left; } }

.dash-subsection{ margin: var(--space-md) 0; }
.dash-subsection > h4{ margin: 0 0 var(--space-xs); color: var(--text-dark); }
.dash-check{ display:inline-block; margin: 0 var(--space-md) var(--space-xs) 0; }
.dash-progress{ margin-top: var(--space-sm); }
.print-only{ display:none; }

/* Save as PDF: print only the report, on white, without the app chrome. */
@media print{
  body, html{ background:#fff !important; }
  .page-frame, .app-container{ box-shadow:none !important; background:#fff !important; padding:0 !important; max-width:none !important; }
  #user-info, .nav-actions, #nav-results-btn, #logout-btn, #account-btn, .wizard-nav-row, #status,
  #page-analytics > .page-title, #page-analytics > .form-group, #page-analytics > .btn,
  #analytics-compare-panel, #export-analytics-btn, #print-analytics-btn{ display:none !important; }
  #page-analytics .print-only{ display:block; text-align:center; margin: 0 0 var(--space-md); }
  .dash-section, .result-row, .stat-tile, .dash-alert{ break-inside:avoid; }
  .dash-bar-fill, .dash-flag, .stat-tile, .dash-alert{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* Student progress: streak chips, badge grid, leaderboard */
.progress-chips{ display:flex; flex-wrap:wrap; gap: var(--space-sm); margin: var(--space-sm) 0; }
.progress-chip{ background:#fff3e0; border:1px solid #f5d9a6; border-radius:999px; padding: var(--space-xs) var(--space-md); font-weight:700; color:#8a4b00; }
.badge-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-sm); margin: var(--space-sm) 0; }
.badge-card{ text-align:center; border-radius: var(--radius-button); padding: var(--space-md) var(--space-sm); background: var(--input-bg); border:2px solid transparent; }
.badge-card.earned{ background:#eafaf0; border-color: var(--success-color); }
.badge-card.locked{ opacity:.6; }
.badge-card.locked .badge-icon{ filter:grayscale(1); }
.badge-icon{ font-size:2rem; line-height:1.2; }
.badge-name{ font-weight:700; color: var(--text-dark); margin-top: var(--space-xs); }
.badge-desc{ font-size: var(--font-size-helper); color: var(--text-light); margin: var(--space-xs) 0; }
.badge-status{ font-size: var(--font-size-helper); font-weight:700; color: var(--text-light); }
.badge-card.earned .badge-status{ color: var(--success-hover); }
.leaderboard td:first-child, .leaderboard th:first-child{ width:48px; }
.leaderboard-you td{ background:#eaf0ff; font-weight:700; }
.results-rewards{ margin: var(--space-md) 0; }
@media print{ #student-progress-panel, #student-leaderboards{ display:none !important; } }

/* Live quiz */
.live-join-panel{ margin-bottom: var(--space-lg); }
.live-code-card{ text-align:center; margin: var(--space-md) 0; }
.live-code{ display:inline-block; font-size:3.5rem; font-weight:700; letter-spacing:.35em; padding: var(--space-md) var(--space-xl); padding-left: calc(var(--space-xl) + .35em);
  background: var(--input-bg); border:3px dashed var(--primary-color); border-radius: var(--radius-button); color: var(--text-dark); }
.live-card{ text-align:center; padding: var(--space-xl) 0; }
.live-big{ font-size:2rem; font-weight:700; color: var(--text-dark); text-align:center; margin: var(--space-md) 0; }
.live-nickname{ font-size:1.8rem; font-weight:700; color: var(--primary-color); margin: 0 0 var(--space-md); }
.live-score{ text-align:center; font-weight:700; font-size:1.2rem; margin: var(--space-sm) 0; }
.live-players{ display:flex; flex-wrap:wrap; gap: var(--space-xs); margin: var(--space-sm) 0 var(--space-md); }
.live-player{ background:#eaf0ff; border-radius:999px; padding: var(--space-xs) var(--space-md); font-weight:700; color: var(--text-dark); }
.live-timer{ margin: var(--space-sm) 0; }
.live-timer-label{ text-align:center; font-size:1.6rem; font-weight:700; color: var(--text-dark); }
.live-answered{ text-align:center; font-weight:700; margin: var(--space-sm) 0; }
.status-box.attempt-result{ text-align:center; font-weight:700; font-size:1.4rem; padding: var(--space-md); }
.status-box.attempt-result.correct{ background: var(--success-color); border:1px solid var(--success-hover); color:#fff; }
.status-box.attempt-result.error{ background: var(--danger-color); border:1px solid var(--danger-hover); color:#fff; }

/* ---- Student experience: progress bar, results screen, practice, progress history ---- */
.attempt-progress{ width:100%; margin: 0 0 var(--space-sm); }
.attempt-progress-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--space-xs); color: var(--text-light); font-weight:700; }
.question-image.zoomable{ cursor:zoom-in; }
.explanation-note{ background:#eef4ff; border-left:4px solid var(--primary-color); border-radius: var(--radius-input); padding: var(--space-sm) var(--space-md); margin: var(--space-sm) 0; color: var(--text-dark); }
.check-row{ display:inline-flex; align-items:center; gap: var(--space-xs); cursor:pointer; }
.btn-small{ padding: var(--space-xs) var(--space-md); min-height:0; font-size: var(--font-size-helper); }
.link-btn{ color: var(--text-light); }
#attempt-flag-btn, .review-flag{ font-size: var(--font-size-helper); margin: var(--space-xs) 0; }

.quiz-pick-btn{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; margin: 0 var(--space-sm) var(--space-sm) 0; }
.quiz-pick-title{ font-weight:700; color: var(--text-dark); }
.quiz-pick-status{ font-size: var(--font-size-helper); color: var(--text-light); }
.quiz-pick-btn.is-done{ border-color: var(--success-color); }
.quiz-pick-btn.is-done .quiz-pick-status{ color: var(--success-hover); font-weight:700; }

.level-card{ display:flex; align-items:center; gap: var(--space-md); margin: var(--space-sm) 0; }
.level-badge{ background: var(--primary-color); color:#fff; font-weight:700; border-radius:999px; padding: var(--space-xs) var(--space-md); white-space:nowrap; }
.level-card .level-bar{ flex:1; grid-template-columns:1fr auto; }
.level-card .level-bar .dash-bar-label{ display:none; }

.practice-actions{ display:flex; flex-wrap:wrap; gap: var(--space-sm); margin: var(--space-sm) 0; }
.practice-topics{ display:flex; flex-wrap:wrap; gap: var(--space-xs); }
.topic-chip{ border:2px solid var(--border-soft); background: var(--input-bg); color: var(--text-dark); border-radius:999px; padding: var(--space-xs) var(--space-md); font-weight:700; cursor:pointer; }
.topic-chip.poor{ border-color: var(--danger-color); }
.topic-chip.ok{ border-color:#f0a030; }
.topic-chip.good{ border-color: var(--success-color); }
.topic-chip:hover{ border-color: var(--primary-color); }

.practice-banner{ background:#fff3e0; border:1px solid #f5d9a6; color:#8a4b00; border-radius: var(--radius-input); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); font-weight:700; text-align:center; }
.score-card{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: var(--space-xl); margin: var(--space-md) 0; padding: var(--space-lg); background: var(--input-bg); border-radius: var(--radius-card); }
.score-ring{ width:140px; height:140px; flex:0 0 auto; }
.score-ring .ring-track{ stroke:#d5dbe0; }
.score-ring .ring-fill{ stroke: var(--primary-color); }
.score-ring.good .ring-fill{ stroke: var(--success-color); }
.score-ring.ok .ring-fill{ stroke:#f0a030; }
.score-ring.poor .ring-fill{ stroke: var(--danger-color); }
.score-ring .ring-text{ font-size:2rem; font-weight:700; fill: var(--text-dark); }
.score-card-text{ flex:1 1 220px; min-width:0; }
.score-fraction{ font-size:2.4rem; font-weight:700; color: var(--text-dark); line-height:1.1; }
.score-message{ font-size:1.2rem; color: var(--text-light); margin: var(--space-xs) 0 var(--space-sm); }
.topic-summary{ font-weight:700; color: var(--text-dark); margin: 0 0 var(--space-sm); }
.review-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap: var(--space-sm); margin-top: var(--space-lg); }
.review-list.only-wrong .is-correct{ display:none; }
.review-details{ flex:1; min-width:0; }
.review-result{ font-weight:700; margin: 0 0 var(--space-xs); }
.review-result.good{ color: var(--success-hover); }
.review-result.poor{ color: var(--danger-hover); }
.history-date{ margin: -4px 0 var(--space-sm); }
.trend-chart{ width:100%; max-width:600px; height:auto; display:block; margin: var(--space-sm) auto; }
.trend-grid{ stroke:#d5dbe0; stroke-width:1; stroke-dasharray:4 4; }
.trend-label{ font-size:11px; fill: var(--text-muted); }
.trend-line{ stroke: var(--primary-color); stroke-width:3; stroke-linejoin:round; }
.trend-dot{ fill: var(--primary-color); stroke:#fff; stroke-width:2; }
.trend-dot.good{ fill: var(--success-color); }
.trend-dot.ok{ fill:#f0a030; }
.trend-dot.poor{ fill: var(--danger-color); }
.display-settings{ display:flex; align-items:center; gap: var(--space-sm); margin-top: var(--space-lg); }
#page-account .display-settings{ margin: var(--space-lg) 0; }
.question-card-wrap{ display:flex; flex-direction:column; gap: var(--space-xs); }
.explanation-input{ width:100%; resize:vertical; font:inherit; padding: var(--space-xs) var(--space-sm); border:1px solid var(--border-input); border-radius: var(--radius-input); background: var(--container-bg-color); color: var(--text-dark); }

/* ---- Dark mode (students and teachers: a per-device display setting). Question screenshots stay
   white on purpose — they're scans of printed pages. ---- */
html[data-theme="dark"]{
  --text-dark:#e8edf3;
  --text-light:#c9d3de;
  --text-muted:#9aa5b1;
  --input-bg:#2a3441;
  --container-bg-color:#1c232d;
  --main-bg-color:#12171e;
  --gradient-start:#12171e;
  --gradient-end:#1a212b;
  --border-soft:#34404f;
  --border-input:#4a5868;
  color-scheme: dark;
}
html[data-theme="dark"] .app-container{ border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .feature-box{ background: var(--input-bg); }
html[data-theme="dark"] .dash-bar-track, html[data-theme="dark"] .score-ring .ring-track{ background:#3a4656; stroke:#3a4656; }
html[data-theme="dark"] .dash-table th{ border-bottom-color: var(--border-soft); }
html[data-theme="dark"] .dash-table td{ border-bottom-color: #2c3745; }
html[data-theme="dark"] .explanation-note{ background:#23324a; }
html[data-theme="dark"] .progress-chip, html[data-theme="dark"] .practice-banner{ background:#3a2f1c; border-color:#6b5428; color:#f5c97a; }
html[data-theme="dark"] .dash-alert{ background:#3a2f1c; border-color:#6b5428; }
html[data-theme="dark"] .badge-card.earned{ background:#1f3a2b; }
html[data-theme="dark"] .live-player, html[data-theme="dark"] .leaderboard-you td{ background:#23324a; }
html[data-theme="dark"] .dash-flag{ background:#4a2724; }
html[data-theme="dark"] .trend-grid{ stroke:#3a4656; }
html[data-theme="dark"] .trend-dot{ stroke: var(--container-bg-color); }
html[data-theme="dark"] .profile-link{ background: var(--input-bg); border-color: var(--border-soft); color: var(--text-light); }
html[data-theme="dark"] .modal-content, html[data-theme="dark"] .image-modal-card{ background: var(--container-bg-color); }

/* ---- Locked-down quizzes: PostLearn's focus mode, ported (rules screen, focus-loss screen,
   teacher settings). The rules and focus-loss screens deliberately keep PostLearn's stark look —
   black overlay, then red with an orange card — so they can't be mistaken for ordinary UI. ---- */
.prestart-modal{
  position:fixed; inset:0; z-index: var(--z-modal);
  display:flex; align-items:center; justify-content:center; padding:24px;
  background: rgba(0,0,0,.78);
}
.prestart-modal-card{
  width:min(760px,100%); max-height:92vh; overflow-y:auto; padding:32px; border-radius:20px;
  background:#fff; color:#000; box-shadow:0 20px 50px rgba(0,0,0,.35); display:grid; gap:.9rem;
}
.prestart-modal-card h2{ text-align:center; margin:0 0 .25rem; color:#000; }
.prestart-modal-card p{ max-width:680px; margin:0 auto; text-align:center; color:#000; font-size:1.35rem; font-weight:700; line-height:1.5; }
.prestart-modal-card .consent-check{ justify-content:center; display:flex; align-items:center; gap:.5rem; font-size:1.15rem; font-weight:700; color:#000; }
.prestart-actions{ gap: var(--space-md); }

.breach-modal{
  position:fixed; inset:0; z-index: var(--z-modal);
  display:flex; align-items:center; justify-content:center; padding:24px;
  background: rgba(120,0,0,.82);
}
.breach-modal-card{
  width:min(760px,100%); padding:36px 32px; border:4px solid #fff; border-radius:20px;
  background: linear-gradient(180deg, #ffb347 0%, #ff8a00 100%); color:#1a1a1a;
  box-shadow:0 20px 50px rgba(0,0,0,.35); text-align:center;
}
.breach-kicker{ margin:0 0 12px; font-size:.95rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#4a0b00; }
.breach-modal-card h2{ margin:0 0 16px; font-size:2.6rem; line-height:1.05; color:#1a1a1a; }
.breach-modal-card p{ margin:0 auto 22px; max-width:620px; font-size:1.15rem; line-height:1.55; color:#1a1a1a; }
.breach-modal-actions{ display:flex; justify-content:center; gap: var(--space-md); flex-wrap:wrap; }
.breach-modal-actions .btn{ min-width:220px; }
.breach-modal .breach-modal-actions .btn{ background:#fff; color:#7e0c0c; }
.breach-modal .breach-modal-actions .btn[disabled]{ opacity:.7; }

#attempt-focus-warning{
  background:#fff2cc; border:1px solid #e6bc52; border-radius:.65rem; padding:.75rem; margin: var(--space-sm) 0;
  color:#000; font-weight:700;
}
.focus-remaining{ font-weight:700; margin:.2rem 0 .6rem; color: var(--text-dark); }

.lockdown-label{ display:block; font-weight:700; margin: var(--space-md) 0 var(--space-xs); color: var(--text-dark); }
.stepper{ display:inline-flex; align-items:stretch; gap: var(--space-xs); }
.stepper-main{
  display:inline-flex; flex-direction:column; align-items:center; min-width:96px; padding: var(--space-xs) var(--space-md);
  border:2px solid var(--border-soft); border-radius: var(--radius-button); background: var(--input-bg); color: var(--text-dark);
  font:inherit; font-weight:700; cursor:pointer;
}
.stepper-main:hover{ border-color: var(--primary-color); }
.stepper-count{ font-size:1.6rem; line-height:1.1; }
.stepper-reset{ border:2px solid var(--border-soft); border-radius: var(--radius-button); background: var(--input-bg); color: var(--text-dark); font-size:1.2rem; padding:0 var(--space-sm); cursor:pointer; }
.penalty-options{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-sm); margin-top: var(--space-xs); }
.penalty-card{
  display:grid; gap:.3rem; padding:.85rem 1rem; text-align:center; justify-items:center; align-content:start;
  border:2px solid var(--border-soft); border-radius: var(--radius-button); background: var(--container-bg-color); color: var(--text-dark);
  cursor:pointer; font:inherit;
}
.penalty-card strong{ font-size:1.05rem; }
.penalty-card span{ font-size:.92rem; font-weight:400; color: var(--text-light); line-height:1.35; }
.penalty-card:hover{ border-color: var(--text-muted); }
.penalty-card.is-selected{ border-color: var(--primary-color); background:#eef4ff; box-shadow:0 0 0 2px var(--primary-color) inset; }
html[data-theme="dark"] .penalty-card.is-selected{ background:#23324a; }
.focus-info-list{ display:grid; gap:.55rem; margin:0 0 var(--space-md); padding-left:1.25rem; color: var(--text-dark); line-height:1.5; text-align:left; }
.modal-copy-left{ text-align:left; margin-bottom: var(--space-sm); }

/* ======================= Results pages: a colourful grid of cards ======================= */
/* The palette is the logo's: gold, orange, red, purple and blue, plus green for "good". It's used
   for edges, icons and numbers — the cards themselves stay calm and readable. */
:root{
  --accent-gold:#F5B700;
  --accent-purple:#8E44AD;
}
.accent-blue{ --card-accent: var(--primary-color); }
.accent-gold{ --card-accent: var(--accent-gold); }
.accent-orange{ --card-accent: var(--accent-color); }
.accent-red{ --card-accent: var(--danger-color); }
.accent-purple{ --card-accent: var(--accent-purple); }
.accent-green{ --card-accent: var(--success-color); }

/* These pages use 95% of the screen (see WIDE_PAGES in app.js) instead of the 900px column. */
#page-analytics.center-content, #page-attempt-summary.center-content, #page-student-progress.center-content{ max-width:100%; }
#page-analytics .form-group{ max-width:560px; }
#analytics-results, #attempt-summary-results{ width:100%; }

.dash-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: var(--space-md); align-items:start; margin-top: var(--space-md); }
.span-all{ grid-column:1 / -1; }
.dash-section.dash-card{
  margin:0; padding: var(--space-lg); background: var(--container-bg-color);
  border:1px solid var(--border-soft); border-top:5px solid var(--card-accent, var(--primary-color));
  border-radius: var(--radius-card); box-shadow: var(--shadow-card-soft);
}
.dash-card > h3{ margin: 0 0 var(--space-sm); font-size:1.25rem; color: var(--text-dark); }

.stat-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-md); margin: 0; }
.stat-tile{
  position:relative; text-align:center; padding: var(--space-lg) var(--space-md);
  border:1px solid var(--border-soft); border-top:5px solid var(--card-accent, var(--primary-color)); border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--card-accent, var(--primary-color)) 9%, var(--container-bg-color));
  box-shadow: var(--shadow-card-soft);
}
.stat-icon{ font-size:1.6rem; line-height:1; margin-bottom: var(--space-xs); }
.stat-tile .stat-value{ color: color-mix(in srgb, var(--card-accent, var(--primary-color)) 70%, var(--text-dark)); }

/* The student's headline card. */
.hero-card{
  position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; gap: var(--space-xl);
  border-top-color: var(--accent-gold) !important;
  background: linear-gradient(135deg, #fff6dc 0%, #ffe9d6 55%, #fde6f1 100%);
}
html[data-theme="dark"] .hero-card{ background: linear-gradient(135deg, #3a2f1c 0%, #3b2a24 55%, #3a2433 100%); }
.hero-text{ flex:1 1 280px; min-width:0; }
.hero-kicker{ font-size: var(--font-size-helper); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--text-light); margin-bottom: var(--space-xs); }
.hero-actions{ display:flex; flex-wrap:wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.hero-compare{ flex:1 1 280px; min-width:0; padding: var(--space-md); border-radius: var(--radius-card); background: color-mix(in srgb, var(--container-bg-color) 70%, transparent); }
.next-actions{ display:flex; flex-wrap:wrap; gap: var(--space-sm); }
.practice-banner.span-all{ margin:0; }

.confetti-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.confetti-piece{
  position:absolute; top:-14px; width:9px; height:15px; border-radius:2px; opacity:0;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall{
  0%{ transform: translateY(0) rotate(0deg); opacity:1; }
  100%{ transform: translateY(520px) rotate(620deg); opacity:0; }
}

/* After exporting, the export button becomes the way into the sheet. */
.btn.btn-sheet{ background:#188038; }
.btn.btn-sheet:hover:not([disabled]){ background:#0f6a2c; }

@media print{
  .dash-section.dash-card, .stat-tile{ box-shadow:none !important; }
  .dash-grid{ display:block; }
  .dash-grid > *{ margin-bottom: var(--space-md); }
}

/* ======================= Questions shown as live text ======================= */
.native-question{
  width:100%; margin: var(--space-md) 0; padding: var(--space-xl) var(--space-xl);
  background: var(--container-bg-color); color: var(--text-dark);
  border:1px solid var(--border-soft); border-radius: var(--radius-card); box-shadow: var(--shadow-card-soft);
  font-family: var(--font-sans); font-size:1.2rem; line-height:1.65; transition: opacity .15s ease;
}
.native-question.loading-faded{ opacity:.35; }
.native-question.no-select{ -webkit-user-select:none; user-select:none; }
.native-stem{ margin: 0 0 var(--space-md); }
.native-stem:last-child{ margin-bottom:0; }
/* The cropped table or diagram is a picture of a printed page, so it keeps a white card behind it in
   every theme and sits above the words. */
.native-graphic{
  display:block; max-width:100%; height:auto; margin: 0 auto var(--space-lg);
  background:#fff; padding: var(--space-sm); border:1px solid var(--border-soft); border-radius: var(--radius-input); cursor:zoom-in;
}
.native-options{ list-style:none; margin: var(--space-md) 0 0; padding:0; display:grid; gap: var(--space-sm); }
.native-options li{ display:flex; gap: var(--space-md); }

/* Answer buttons for a native question carry the option's words next to the letter. */
.mc-answer-btn .mc-letter{ font-weight:700; }
.mc-answer-btn.has-text{ display:flex; align-items:center; justify-content:flex-start; gap: var(--space-md); text-align:left; font-weight:400; font-size:1.1rem; line-height:1.4; }
.mc-answer-btn.has-text .mc-letter{
  flex:0 0 auto; display:inline-grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:50%;
  background: color-mix(in srgb, var(--primary-color) 14%, var(--container-bg-color)); color: var(--primary-color); font-size:1.1rem;
}
.mc-answer-btn.has-text.checked .mc-letter{ background:#fff; }
.mc-answer-btn.has-text .mc-text{ flex:1; min-width:0; }
.mc-answer-btn.eliminated.has-text .mc-text{ text-decoration:line-through; }
.native-options .mc-letter{ font-weight:700; color: var(--primary-color); flex:0 0 1.6rem; }
.render-choice{ display:flex; align-items:center; gap: var(--space-sm); font-size: var(--font-size-helper); color: var(--text-light); }
.render-choice select{ padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); border:1px solid var(--border-input); background: var(--container-bg-color); color: var(--text-dark); }
@media (max-width:600px){ .native-question{ padding: var(--space-lg) var(--space-md); font-size:1.1rem; } }