/* =============================================================
   Exam Dominance - theme bridge
   -------------------------------------------------------------
   The design system lives in assets/css/ (ed-tokens.css: colours,
   type, spacing for light and dark; ed-components.css: the exam
   frame, buttons, chips, status pills). This file loads both, then
   maps the names every existing page already uses (--ink-2, --card,
   --rule, --soft, --ok, --bad ...) onto those tokens, so the whole
   site - student pages and admin - takes the new design without each
   page being rewritten. Pages load it AFTER their own <style> block.

   Rule from the design system: colours come from variables only,
   never hex, or Night mode (data-theme="dark") breaks.
   ============================================================= */

/* versioned like theme.css itself: the server lets browsers cache these for a
   week, so bump ?v= here whenever a file under assets/css changes */
@import url('assets/css/ed-tokens.css?v=20260926');
@import url('assets/css/ed-components.css?v=20260926');

:root, [data-theme="light"], [data-theme="dark"]{
  /* ---- the old names, pointed at the design tokens ---------------- */
  --ink-2:    var(--ink-muted);
  --ink-3:    var(--ink-muted);
  --paper:    var(--surface-alt);
  --card:     var(--surface);
  --rule:     var(--line);
  --soft:     var(--selected);
  --ok:       var(--correct);
  --bad:      var(--incorrect);
  --eosin:    var(--incorrect);
  --warn:     var(--marked);
  --flag:     var(--marked);
  --ok-bg:    var(--correct-soft);
  --bad-bg:   var(--incorrect-soft);
  --warn-bg:  color-mix(in srgb, var(--marked) 12%, var(--surface));
  --shadow:   var(--shadow-panel);
  --radius:   var(--radius-lg);
  --scrim:    color-mix(in srgb, var(--exam-bar-strong) 55%, transparent);   /* behind a dialog */

  --font-display: var(--font-brand);
  --font-ui:      var(--font-brand);
  --font-body:    var(--font-brand);
  --font-data:    var(--font-brand);
}

/* -------------------------------------------------------------
   Base
   ------------------------------------------------------------- */
html{ -webkit-text-size-adjust:100%; }
body{
  background: var(--surface-alt);
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: 15px;
  line-height: 1.55;
}

/* question text reads in the exam face, as on the real exam */
.stem, .answer, #expbody, .dlg-b{
  font-family: var(--font-exam);
  font-size: 16px;
  line-height: 26px;
}

h1{ font-family: var(--font-brand); font-weight:700; letter-spacing:-.01em; color: var(--ink); }
h2, legend, th, .crumb{ font-family: var(--font-brand); }

/* figures keep their width while they change */
.clock, .score, .ring, .stat b, .pct, .n, .qtime, #qtime, .num,
td[style*="tabular"], .mono{
  font-family: var(--font-brand);
  font-variant-numeric: tabular-nums;
}

a{ color: var(--link); }
.card, .box, .stat, fieldset, .hero{
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-panel);
}
th{ background: var(--surface-alt); color: var(--ink-muted); }
td, th{ border-color: var(--line); }

/* filled buttons: the text colour belongs to the fill, in both modes
   (white on the light accent was 2.7:1 in dark mode) */
.cta, .go, .btn.pri, button.pri, button.go, .pickbar button, #reportsend,
.top button.end, .actions button.primary, .exp.open, .stat.acc, .acc,
.pill label:has(input:checked), .labunits button.on{
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.cta:hover, .go:hover, button.pri:hover, .pickbar button:hover{ color: var(--on-accent); }

/* visible focus, always */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* the navy lockup on light grounds, the white one on dark */
.logo-dark{ display:none; }
[data-theme="dark"] .logo-light{ display:none; }
[data-theme="dark"] .logo-dark{ display:inline-block; }

.themetoggle{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  border-radius:var(--radius-pill); padding:5px 12px; cursor:pointer; font:600 13px var(--font-brand);
  display:inline-flex; align-items:center; gap:6px;
}
.themetoggle:hover{ background: var(--surface-alt); }

/* -------------------------------------------------------------
   The bank map (dashboard): one cell per question
   ------------------------------------------------------------- */
.bankmap{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-panel);
}
.bankmap .sysrow{ margin-bottom: 11px; }
.bankmap .sysrow:last-child{ margin-bottom: 0; }
.bankmap .lab{
  font: 600 12px var(--font-brand);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px;
}
.bankmap .lab em{ font: 400 12px var(--font-brand); font-style: normal; color: var(--ink-muted);
  margin-left: auto; font-variant-numeric: tabular-nums; }
.cells{ display: flex; flex-wrap: wrap; gap: 2px; }
.cell{ width: 7px; height: 7px; border-radius: 1.5px; background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line); }
.cell.correct  { background: var(--correct); box-shadow: none; }
/* incorrect is hatched as well as red: green and red are equally light,
   so colour alone does not separate them for a colour-blind student */
.cell.incorrect{ background: repeating-linear-gradient(135deg, var(--incorrect) 0 2px, var(--incorrect-soft) 2px 3px);
  box-shadow: none; }
.cell.omitted  { background: var(--omitted); box-shadow: none; }
.cell.flagged  { background: var(--marked); box-shadow: none; }
.legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:14px;
  font: 13px var(--font-brand); color: var(--ink-muted); }
.legend i{ width:9px; height:9px; border-radius:2px; display:inline-block;
  margin-right:6px; vertical-align:-1px; }

/* -------------------------------------------------------------
   Controls shared by the older pages
   ------------------------------------------------------------- */
button, .btn, .cta, .go{ font-family: var(--font-brand); }
.tool.on{ background: var(--marked); border-color: var(--marked); color: var(--on-accent); }
.clock{ background: var(--selected); color: var(--ink); font-family: var(--font-brand); }
.clock.low{ background: var(--incorrect-soft); color: var(--incorrect); }

.choices li.right{ border-color: var(--correct); background: var(--correct-soft); }
.choices li.wrong{ border-color: var(--incorrect); background: var(--incorrect-soft); }
.choices li.sel  { border-color: var(--link); background: var(--selected); }

/* tables that come with the question content: rules only, no card */
.table-default-style td, .table-default-style th{ border-color: var(--line-strong); }
.table-header-footer-style tr:first-child,
.table-header-subheader-footer-style tr:first-child{ background: var(--surface-alt); }
.stem table, .answer table, .ed-stem table, .ed-expl table, .ed-choice table{
  background: transparent; box-shadow: none;
}

/* dark mode reaches inside the exhibit images, which are all printed on
   white in the source: they sit on their own white panel, never inverted */
[data-theme="dark"] .stem img, [data-theme="dark"] .answer img,
[data-theme="dark"] .ed-stem img, [data-theme="dark"] .ed-expl img,
[data-theme="dark"] .ed-choice img,
[data-theme="dark"] .dlg-b img, [data-theme="dark"] .dlg-b iframe{
  background: #fff; border-radius: 6px;
}
[data-theme="dark"] .table-default-style{ background: transparent; }

/* -------------------------------------------------------------
   The sidebar (includes/shell.php) on every student and admin page.
   It is fixed to the left and the page moves over to make room; on a
   phone it becomes a bar across the top.
   ------------------------------------------------------------- */
/* --side-w is the room the sidebar takes: 240px open, 68px folded to its
   icons, 0 on a phone. Anything else fixed to the page edge (the bottom
   bar on Create test) starts at left: var(--side-w) so nothing hides under it. */
:root{ --side-w: 240px; }
html.side-min{ --side-w: 68px; }
.ed-side-fixed{ position: fixed; left: 0; top: 0; bottom: 0; width: var(--side-w); z-index: 30;
  background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; overflow-x: hidden;
  box-sizing: border-box; transition: width .18s ease; }
.ed-side-fixed *{ box-sizing: border-box; }
/* body.has-side is set by the sidebar's own script, for browsers without :has() */
body:has(> .ed-side-fixed), body.has-side{ padding-left: var(--side-w); transition: padding-left .18s ease; }
.ed-side-fixed .ed-side-logo{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ed-side-logo a{ display: inline-block; line-height: 0; min-width: 0; }
.ed-side-fixed .ed-side-logo a{ flex: 1 1 auto; }
/* the logo is a link, but not a menu row: none of the rows' padding, height or hover */
.ed-side-fixed .ed-side-logo a, .ed-side-fixed .ed-side-logo a:hover{ padding: 0; min-height: 0; height: auto; background: none; }
/* the logo keeps its shape when the row is narrower than it: it scales down, never squeezes */
.ed-side-fixed .ed-side-logo img{ max-width: 100%; object-fit: contain; object-position: left center; }
@media (min-width: 761px){
  /* 28px tall is the full logo at 162px, which fits beside the fold button */
  .ed-side-fixed .ed-side-logo img.ed-side-full{ height: 28px; width: auto; }
  .ed-side-fixed .ed-side-logo{ gap: 6px; padding-left: 4px; padding-right: 0; }
  .ed-side-fixed .ed-side-fold{ width: 30px; height: 30px; }
}
.ed-side-mark{ display: none !important; }
.ed-side-fold{ flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--radius-md); background: none; color: var(--ink-muted); cursor: pointer; }
.ed-side-fold:hover{ background: var(--surface-alt); color: var(--ink); }
.ed-fold-arrow{ transition: transform .18s ease; transform-origin: 14.75px 12px; }
.ed-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* long labels wrap to a second line instead of being cut off */
.ed-side-fixed a, .ed-side-fixed .ed-side-btn{ position: relative; height: auto; min-height: 38px; line-height: 1.25;
  padding-top: 6px; padding-bottom: 6px; white-space: normal; }
.ed-side-fixed a svg, .ed-side-fixed .ed-side-btn svg{ flex: none; }
.ed-side-user > div{ min-width: 0; overflow-wrap: anywhere; }
.ed-side-btn{ display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-md); background: none; color: var(--ink); cursor: pointer;
  font: 500 15px/1.25 var(--font-brand); text-align: left; margin-top: var(--space-2); width: 100%; }
.ed-side-btn svg{ width: 20px; height: 20px; color: var(--ink-muted); }
.ed-side-btn:hover{ background: var(--surface-alt); }

/* folded: icons only, the name of each shows on hover (title) */
html.side-min .ed-side-fixed{ padding-left: var(--space-2); padding-right: var(--space-2); }
html.side-min .ed-side-fixed .ed-side-logo{ flex-direction: column; padding-left: 0; padding-right: 0; }
html.side-min .ed-side-full{ display: none !important; }
html.side-min .ed-side-mark{ display: block !important; }
html.side-min .ed-fold-arrow{ transform: scaleX(-1); }
html.side-min .ed-side-txt, html.side-min .ed-side-user > div{ display: none; }
html.side-min .ed-side-label{ font-size: 0; padding: 0; margin: var(--space-2) var(--space-2); border-top: 1px solid var(--line); }
html.side-min .ed-side-fixed a, html.side-min .ed-side-fixed .ed-side-btn{ justify-content: center; padding-left: 0; padding-right: 0; }
html.side-min .ed-side-fixed a .ed-count{ position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
  padding: 0 4px; font-size: 10px; line-height: 16px; }
html.side-min .ed-side-user{ justify-content: center; padding-left: 0; padding-right: 0; }

/* the page body of the shell: the dashboards use it, older pages keep .wrap */
.ed-main{ margin: 0 auto; }
@media (max-width: 760px){
  :root, html.side-min{ --side-w: 0px; }
  .ed-side-fixed{ position: static; width: auto; bottom: auto; border-right: 0; border-bottom: 1px solid var(--line);
    padding: var(--space-3); gap: 2px; }
  .ed-side-fixed .ed-side-logo{ width: 100%; padding-bottom: var(--space-2); }
  .ed-side-fixed a, .ed-side-fixed .ed-side-btn{ min-height: 34px; font-size: 14px; margin: 0; width: auto; }
  /* on a phone, folded means just the logo row; unfolded, the links wrap below it */
  html.side-min .ed-side-fixed{ padding: var(--space-3); }
  html.side-min .ed-side-fixed .ed-side-logo{ flex-direction: row; padding-bottom: 0; }
  html.side-min .ed-side-full{ display: block !important; }
  html.side-min .ed-logo-dark.ed-side-full{ display: none !important; }
  [data-theme="dark"].side-min .ed-logo-light.ed-side-full{ display: none !important; }
  [data-theme="dark"].side-min .ed-logo-dark.ed-side-full{ display: block !important; }
  html.side-min .ed-side-mark{ display: none !important; }
  /* "Install app" (only ever shown where installing works) stays in view */
  html.side-min .ed-side-fixed > :not(.ed-side-logo):not(script):not([data-install]){ display: none; }
  .ed-side-fixed > [data-install]{ width: 100%; justify-content: center; border: 1px solid var(--line); margin-top: var(--space-2); }
  html.side-min .ed-side-fixed > [data-install] .ed-side-txt{ display: inline; }
}
@media print{ .ed-side-fixed{ display: none; } body:has(> .ed-side-fixed), body.has-side{ padding-left: 0; } }

/* the kit's cards and tables on pages that also carry older table and
   heading styles (the admin pages, and th in this file) */
.ed-card-head h2{ text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0; }
table.ed-table{ border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.ed-table th{ background: transparent; }
.ed-main .ed-card{ box-shadow: var(--shadow-panel); }

/* -------------------------------------------------------------
   Installed app and phones (appHead() in auth.php, assets/js/ed-app.js)
   viewport-fit=cover lets pages run edge to edge; these keep content
   out from under the notch, the rounded corners and the home bar.
   ------------------------------------------------------------- */
[hidden]{ display: none !important; }
:root{ --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); }
body{ padding-right: var(--safe-r); }
.ed-side-fixed{ width: calc(var(--side-w) + var(--safe-l)); padding-left: calc(var(--space-3) + var(--safe-l));
  padding-top: calc(var(--space-5) + var(--safe-t)); padding-bottom: calc(var(--space-3) + var(--safe-b)); }
body:has(> .ed-side-fixed), body.has-side{ padding-left: calc(var(--side-w) + var(--safe-l)); }
html.side-min .ed-side-fixed{ padding-left: calc(var(--space-2) + var(--safe-l)); }
@media (max-width: 760px){
  .ed-side-fixed, html.side-min .ed-side-fixed{ width: auto; padding: calc(var(--space-3) + var(--safe-t)) calc(var(--space-3) + var(--safe-r))
    var(--space-3) calc(var(--space-3) + var(--safe-l)); }
  body:has(> .ed-side-fixed), body.has-side{ padding-left: var(--safe-l); }
}
/* the exam frame: bars grow by the notch and the home bar, the question keeps the rest */
.ed-exam{ grid-template-rows: calc(var(--toolbar-height) + var(--safe-t)) 1fr calc(var(--footer-height) + var(--safe-b)); }
.ed-exam .ed-toolbar{ padding-top: var(--safe-t); padding-left: calc(var(--space-2, 8px) + var(--safe-l)); padding-right: calc(var(--space-2, 8px) + var(--safe-r)); }
.ed-exam .ed-footer{ padding-bottom: var(--safe-b); padding-left: calc(var(--space-3, 12px) + var(--safe-l)); padding-right: calc(var(--space-3, 12px) + var(--safe-r)); }
/* phones: no text inflation, no grey flash on tap, no double-tap zoom delay on controls */
a, button, label, summary, [role="button"]{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* iOS zooms into any field whose text is under 16px: keep them at 16 on phones */
@media (max-width: 760px) and (pointer: coarse){
  input:not([type=checkbox]):not([type=radio]), select, textarea{ font-size: 16px !important; }
}
/* crisp borders and text on high-density screens */
html{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* kerning and ligatures where they show; long question text keeps the fast path */
h1, h2, h3, .ed-page-head{ text-rendering: optimizeLegibility; }
img{ image-rendering: auto; }

/* "Install app" help (iPhone / iPad / Safari on a Mac) */
/* on a phone the fold button is the menu button, and says so */
.ed-fold-lbl{ display: none; }
@media (max-width: 760px){
  .ed-side-fold{ width: auto; gap: 6px; padding: 0 12px; grid-auto-flow: column; border: 1px solid var(--line);
    font: 600 14px/1 var(--font-brand); color: var(--ink); }
  .ed-fold-lbl{ display: inline; }
}
.ed-install-help{ max-width: min(420px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink); padding: var(--space-5); box-shadow: var(--shadow-panel); }
.ed-install-help::backdrop{ background: var(--scrim); }
.ed-install-help h2{ margin: 0 0 var(--space-3); font: 700 19px/1.3 var(--font-brand); text-transform: none; letter-spacing: 0; color: var(--ink); }
.ed-install-help ol{ margin: 0 0 var(--space-3); padding-left: 22px; line-height: 1.6; }
.ed-install-help p{ margin: 0 0 var(--space-4); color: var(--ink-muted); }
.ed-install-help form{ margin: 0; text-align: right; }