/* Varexo — signed-in pages (login, register, app). Brand: navy #0B2545,
   teal #14B8A6, blue #3B82F6, sky #E6F2FF (owner's brand sheet, 2026-11-11). */
:root { --navy:#0B2545; --teal:#14B8A6; --teal-d:#0f9488; --blue:#3B82F6; --sky:#E6F2FF;
        --ink:#14213d; --muted:#5b6475; --line:#d9dee7; --bg:#f5f7fb; --card:#fff; --bad:#b42318; --warn:#c2410c; --ok:#15803d; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--blue); }
button, input, select, textarea { font:inherit; }
.brand { display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--navy); font-weight:800; font-size:22px; letter-spacing:-.3px; }
.brand img { height:30px; width:auto; }
.brand img.logo, .tabs .side-brand img.logo { height:32px; width:auto; display:block; }   /* the Examnetic logo (owner, 2026-11-13): mark + name in one picture */
.brand .dot { color:var(--teal); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 16px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:600; cursor:pointer; text-decoration:none; }
.btn:hover { border-color:#b8c0cf; }
.btn.primary { background:var(--teal); border-color:var(--teal); color:#fff; }
.btn.primary:hover { background:var(--teal-d); }
.btn.danger { color:var(--bad); }
.btn.small { padding:6px 10px; font-size:14px; border-radius:8px; }
.btn[disabled] { opacity:.55; cursor:default; }
.btn.link-btn { border:0; background:none; padding:6px 4px; color:var(--muted); font-weight:500; font-size:14px; text-decoration:underline; }   /* "or print from the browser" */
.btn.link-btn:hover { color:var(--ink); }
.btn.link-btn[disabled] { display:none; }
.input, select.input, textarea.input { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
textarea.input { min-height:150px; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:14px; }
label.lab { display:block; font-size:13px; font-weight:600; color:var(--muted); margin:10px 0 4px; }
.muted { color:var(--muted); font-size:14px; }
.msg { padding:10px 12px; border-radius:10px; margin:10px 0; font-size:14px; }
.msg.error { background:#fef3f2; color:var(--bad); border:1px solid #f9d0cb; }
.msg.ok { background:#ecfdf3; color:var(--ok); border:1px solid #c6efd6; }
.msg.warn { background:#fff7ed; color:var(--warn); border:1px solid #fbd9b8; }

/* ----- sign-in pages ----- */
.auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; background:linear-gradient(160deg, var(--sky), #fff 60%); }
.auth-card { width:min(420px, 100%); background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 10px 30px rgba(11,37,69,.08); }
.auth-card h1 { margin:16px 0 4px; font-size:24px; color:var(--navy); }
.sso { display:grid; gap:8px; margin-top:16px; }
.sso button { display:flex; align-items:center; justify-content:center; gap:10px; padding:11px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font-weight:600; color:var(--ink); }
.sso svg { width:18px; height:18px; }
.or { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; margin:16px 0 4px; }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--line); }
.auth-card form .btn { width:100%; margin-top:14px; }
.auth-note { text-align:center; font-size:14px; margin:12px 0 0; }
.foot { text-align:center; font-size:12px; color:var(--muted); padding:16px; }

/* ----- the app ----- */
.top { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:12px; padding:10px 16px; background:#fff; border-bottom:1px solid var(--line); }
.top .grow { flex:1; }
.top .who { font-size:13px; color:var(--muted); max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tabs { display:flex; gap:4px; padding:8px 16px 0; background:#fff; border-bottom:1px solid var(--line); overflow-x:auto; }
.tabs a, .tabs button { padding:10px 14px; border:0; background:none; color:var(--muted); font-weight:600; text-decoration:none; border-bottom:3px solid transparent; cursor:pointer; white-space:nowrap; }
.tabs .on { color:var(--navy); border-bottom-color:var(--teal); }
.tabs .soon { font-size:11px; background:var(--sky); color:var(--blue); border-radius:999px; padding:1px 6px; margin-left:4px; }
/* Full width (owner, 2026-11-12: "make the pages full width"). */
main.wrap { max-width:none; margin:0; padding:18px clamp(16px, 3vw, 40px) 60px; }
.bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.bar h2 { margin:0; font-size:22px; color:var(--navy); flex:1; min-width:160px; }
.bar select.input { width:auto; min-width:150px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.ccard { text-align:left; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; cursor:pointer; color:var(--ink); border-top:4px solid var(--teal); }
a.ccard { display:block; text-decoration:none; }
a.back { display:inline-block; text-decoration:none; }
.ccard:hover { box-shadow:0 6px 18px rgba(11,37,69,.08); }
.ccard .nm { font-weight:800; font-size:17px; }
.ccard .meta { color:var(--muted); font-size:14px; margin-top:4px; }
.ccard.add { border:2px dashed var(--line); border-top-width:2px; display:flex; align-items:center; justify-content:center; color:var(--teal-d); font-weight:700; min-height:96px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px; }
.panel h3 { margin:0 0 8px; font-size:17px; color:var(--navy); }
.row2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
table.roster { width:100%; border-collapse:collapse; font-size:15px; }
table.roster th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:8px; border-bottom:1px solid var(--line); }
table.roster td { padding:8px; border-bottom:1px solid #eef1f6; vertical-align:middle; }
table.roster td.id { font-variant-numeric:tabular-nums; }
table.roster td.act { text-align:right; white-space:nowrap; }
table.roster tr.edit td { background:var(--sky); }
table.roster input.input { padding:6px 8px; }
.empty { text-align:center; padding:28px 12px; color:var(--muted); }
.start { max-width:520px; margin:40px auto; text-align:center; }
.start h2 { color:var(--navy); }
.probs { margin:8px 0 0; padding-left:18px; font-size:14px; color:var(--warn); }
.back { background:none; border:0; color:var(--blue); cursor:pointer; padding:0; font-weight:600; margin-bottom:8px; }
@media (max-width:560px) { .top .who { display:none; } .bar h2 { font-size:19px; } }

/* ----- working… (owner, 2026-11-12: "a processing icon on the buttons …
   so they lock from clicking twice"; "animated loadings are always cool") ----- */
@keyframes vxspin { to { transform: rotate(360deg); } }
.btn.busy, .sso button.busy, .ccard.busy { pointer-events:none; cursor:progress; }
.btn.busy::before, .sso button.busy::before { content:""; width:15px; height:15px; flex:none; border-radius:50%;
  border:2px solid rgba(20,184,166,.28); border-top-color:var(--teal); animation:vxspin .7s linear infinite; }
.btn.primary.busy::before { border-color:rgba(255,255,255,.4); border-top-color:#fff; }
.btn.primary.ready { background:var(--teal-d); border-color:var(--teal-d); }   /* "Your PDF is ready — open it" */
.btn.danger.busy::before { border-color:rgba(180,35,24,.25); border-top-color:var(--bad); }
.btn.busy { opacity:.9; }
/* The loader: an answer sheet's bubbles filling in, one after another. */
.vx-loader { display:flex; flex-direction:column; align-items:center; gap:12px; padding:48px 12px; color:var(--muted); font-weight:600; }
.vx-loader .bubbles { display:flex; gap:10px; }
.vx-loader .bubbles i { width:22px; height:22px; border-radius:50%; border:2.5px solid var(--navy); position:relative; overflow:hidden; }
.vx-loader .bubbles i::after { content:""; position:absolute; inset:2px; border-radius:50%; background:var(--teal); transform:scale(0); animation:vxfill 1.6s ease-in-out infinite; }
.vx-loader .bubbles i:nth-child(2)::after { animation-delay:.2s; }
.vx-loader .bubbles i:nth-child(3)::after { animation-delay:.4s; }
.vx-loader .bubbles i:nth-child(4)::after { animation-delay:.6s; }
@keyframes vxfill { 0%, 15% { transform:scale(0); } 35%, 65% { transform:scale(1); } 85%, 100% { transform:scale(0); } }
.vx-loader.small { padding:16px; flex-direction:row; }
.vx-loader.small .bubbles i { width:14px; height:14px; border-width:2px; }
/* Placeholder cards while classes load (a soft shimmer). */
@keyframes vxshimmer { to { background-position:-200% 0; } }
.ccard.skel { cursor:default; min-height:96px; background:linear-gradient(90deg, #fff 0%, #eef2f7 50%, #fff 100%); background-size:200% 100%; animation:vxshimmer 1.3s linear infinite; border-top-color:#d9dee7; }
@media (prefers-reduced-motion: reduce) {
  .vx-loader .bubbles i::after { animation:none; transform:scale(1); opacity:.5; }
  .ccard.skel { animation:none; }
  .btn.busy::before, .sso button.busy::before { animation-duration:2s; }
}
/* Scanner on a computer: open it on a phone or tablet instead. */
.qrbox { display:inline-block; padding:12px; background:#fff; border:1px solid var(--line); border-radius:14px; margin:12px 0; }
.qrbox svg { display:block; width:180px; height:180px; }

/* ----- slide-out menu on phones/tablets (owner, 2026-11-12: "a slide out
   menu on ipad and mobile … a link to open it next to the logo that
   transforms into a close button") ----- */
.menu-btn { display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:0 9px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; flex:none; }
.menu-btn[hidden] { display:none; }
.menu-btn span { display:block; height:2.5px; border-radius:2px; background:var(--navy); transition:transform .25s ease, opacity .2s ease; transform-origin:center; }
.vx-menu-open .menu-btn span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.vx-menu-open .menu-btn span:nth-child(2) { opacity:0; transform:scaleX(.2); }
.vx-menu-open .menu-btn span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }
.vx-drawer .tabs { position:fixed; z-index:40; top:0; left:0; bottom:0; width:min(290px, 84vw); flex-direction:column; gap:2px; padding:max(76px, calc(env(safe-area-inset-top) + 66px)) 12px 20px;
  background:#fff; border-bottom:0; border-right:1px solid var(--line); box-shadow:8px 0 30px rgba(11,37,69,.16); overflow-y:auto;
  transform:translateX(-105%); transition:transform .28s cubic-bezier(.2,.8,.2,1); visibility:hidden; }
.vx-drawer.vx-menu-open .tabs { transform:none; visibility:visible; }
.vx-drawer .tabs a, .vx-drawer .tabs button { display:block; text-align:left; padding:14px 14px; border-radius:10px; border-bottom:0; font-size:17px; color:var(--ink); }
.vx-drawer .tabs .on { background:var(--sky); color:var(--navy); box-shadow:inset 4px 0 0 var(--teal); }
.vx-drawer .top { z-index:45; }                       /* the bar (and its ✕) stays above the menu */
.menu-backdrop { position:fixed; inset:0; z-index:35; background:rgba(11,37,69,.35); animation:vxfade .2s ease; }
.menu-backdrop[hidden] { display:none; }
@keyframes vxfade { from { opacity:0; } to { opacity:1; } }
.vx-menu-open body, .vx-scan-open body { overflow:hidden; }

/* ----- the scanner in a pop-up (owner, 2026-11-12) ----- */
.scan-modal { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; background:#000; animation:vxup .25s cubic-bezier(.2,.8,.2,1); }
@keyframes vxup { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
.scan-bar { display:flex; align-items:center; gap:10px; padding:max(8px, env(safe-area-inset-top)) 12px 8px; background:var(--navy); color:#fff; }
.scan-bar .grow { flex:1; }
/* Live scanning: the scanner fills the window, over the bar and its ✕. */
.scan-modal.live .scan-bar { display:none; }
/* (inside a frame the scanner can't see the notch: the pop-up keeps it clear) */
.scan-modal.live { padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.scan-close { width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; font-size:20px; cursor:pointer; }
.scan-modal iframe { flex:1; width:100%; border:0; background:#fff; }
@media (prefers-reduced-motion: reduce) {
  .menu-btn span, .vx-drawer .tabs { transition:none; }
  .scan-modal, .menu-backdrop { animation:none; }
}

/* ----- exam library (owner, 2026-11-12) ----- */
.pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:700; }
.pill.ok { background:#ecfdf3; color:var(--ok); }
.pill.warn { background:#fff7ed; color:var(--warn); }
.vtabs { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 10px; }
.vtabs a { padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); text-decoration:none; font-weight:600; }
.vtabs a small { color:var(--muted); font-weight:600; margin-left:4px; }
.vtabs a.on { border-color:var(--teal); box-shadow:inset 0 -3px 0 var(--teal); color:var(--navy); }
.vtab-add { padding:8px 12px; border:1px dashed #b9c2d0; border-radius:10px; background:transparent; color:var(--teal-d); font-weight:600; cursor:pointer; }
.vtab-add:hover { border-color:var(--teal); background:#fff; }
.keyhead { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.progress { height:8px; border-radius:999px; background:#eef2f7; overflow:hidden; margin:6px 0 4px; }
.progress i { display:block; height:100%; background:var(--teal); transition:width .25s ease; }
.subpanel { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px; margin-top:10px; }
.keygrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:6px 18px; margin-top:12px; }
.krow { display:flex; align-items:center; gap:6px; padding:3px 4px; border-radius:10px; }
.krow.empty { background:#fffbeb; }
.kq { width:30px; text-align:right; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; flex:none; }
.kopt { width:36px; height:36px; border-radius:50%; border:2px solid #9aa4b5; background:#fff; color:var(--ink); font-weight:700; font-size:14px; cursor:pointer; padding:0; flex:none; }
.kopt:hover { border-color:var(--navy); }
.kopt.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.ksec { grid-column:1 / -1; font-weight:800; color:var(--navy); margin-top:8px; }
@media (max-width:560px) { .kopt { width:40px; height:40px; } .keygrid { grid-template-columns:1fr; } }
/* the key laid out like the paper sheet: numbered DOWN each column (owner, 2026-11-12) */
.kcols { display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:12px; align-items:flex-start; }
.kcol { display:flex; flex-direction:column; gap:2px; min-width:0; }
.kcols.kmatch { margin-top:4px; }
.ksec { margin-top:14px; }
.krow.multi { background:#eef6ff; }
.kmulti { font-size:11px; font-weight:800; color:var(--navy); background:#dbeafe; border-radius:999px; padding:2px 7px; margin-left:2px; white-space:nowrap; }
.kask { background:#fffbeb; border:1px solid #f5d38a; border-radius:10px; padding:8px 10px; margin:2px 0 6px; max-width:360px; font-size:14px; }
.kask .actions { margin-top:6px; }
.keypanel.locked .kopt { cursor:default; opacity:.8; }
.keypanel.locked .kopt:hover { border-color:#9aa4b5; }
.keypanel.locked .kopt.on { opacity:1; }
.keypanel.locked .krow.empty { background:transparent; }
#keyCount.nudge { color:var(--navy); font-weight:600; }
.mappanel .bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mcols { display:flex; flex-wrap:wrap; gap:4px 22px; }
.mrow { display:flex; align-items:center; gap:6px; padding:2px 0; }
.mrow .muted { font-size:13px; white-space:nowrap; }
.mnum { width:64px; padding:6px 8px; text-align:center; }
.mnum.dup, .mnum.bad { border-color:var(--bad); background:#fef3f2; }
.mapall { margin-top:8px; }
.mapall summary { cursor:pointer; color:var(--navy); font-weight:600; }
.bad { color:var(--bad); }
@media (max-width:560px) { .kcols { gap:6px 14px; } .kcol { width:100%; } }

/* ----- give to classes + printing a class's sheets (owner, 2026-11-12) ----- */
.checks { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:4px 14px; margin-top:10px; }
label.check { display:flex; align-items:center; gap:8px; padding:8px; border-radius:10px; cursor:pointer; font-size:15px; }
label.check:hover { background:var(--bg); }
label.check input { width:20px; height:20px; flex:none; accent-color:var(--teal); }
label.check.was { opacity:.7; }
label.check > span { flex:1; min-width:0; }
.blankn { display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; margin:2px 0 4px 36px; font-size:15px; }
.blankn .input { width:80px; padding:6px 8px; }
.glist { display:flex; flex-direction:column; gap:8px; }
.gitem { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; flex-wrap:wrap; }
.gact { display:flex; gap:8px; }
.printpages { display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:6px; }
.printpages .page { width:100%; max-width:720px; background:#fff; box-shadow:0 2px 10px rgba(20,33,61,.12); }
.printpages .page svg { display:block; width:100%; height:auto; }
@media print {
  /* only the sheets print (same rules as the Print sheets page: no blank last page) */
  .vx-print-mode body { background:#fff; }
  .vx-print-mode header.top, .vx-print-mode nav.tabs, .vx-print-mode .noprint, .vx-print-mode .foot, .vx-print-mode .menu-backdrop { display:none !important; }
  .vx-print-mode main.wrap { max-width:none; padding:0; margin:0; }
  .vx-print-mode .printpages { display:block; gap:0; margin:0; }
  .vx-print-mode .printpages .page { max-width:none; width:100%; overflow:hidden; box-shadow:none; break-inside:avoid; page-break-inside:avoid; }
  .vx-print-mode .printpages .page + .page { break-before:page; page-break-before:always; }
  /* The sheet must fit the printable HEIGHT: a browser that adds its own
     margins (Safari / iPhone / iPad, Chrome "Default margins") makes a
     full-WIDTH sheet taller than the page, and its bottom row + corner
     markers spill onto a 2nd page (owner, 2026-11-12, twice). "vh" did NOT
     fix it — in print it means different things in different browsers (the
     phone SCREEN on iOS) — so the size is in INCHES. 9.5in still left a
     BLANK page after every sheet for the owner (2026-11-12): their printer /
     browser keeps ~1in total, so the sheet's bottom white edge spilled over.
     9in tall (6.95in wide, the Letter ratio) fits 11in minus up to 1in top +
     1in bottom. The scanner reads by the corner markers, so a slightly
     smaller sheet still scans. */
  .vx-print-mode .printpages .page svg { display:block; width:auto; height:9in; max-width:100%; margin:0 auto; }
  /* ONLY the sheets: any message, card or bar left on the page pushed every
     sheet down and split its bottom corner markers onto a 2nd page
     (owner, 2026-11-12: "print is also showing a second page for each student"). */
  .vx-print-mode body > :not(main) { display:none !important; }
  .vx-print-mode #view > :not(.printpages) { display:none !important; }
  .vx-print-mode html, .vx-print-mode body { margin:0 !important; padding:0 !important; height:auto !important; }
}
@page { size: letter; margin: 0; }

/* ----- results (owner, 2026-11-12) ----- */
.rlinks td a { font-weight:700; color:var(--navy); }
.scorebig { font-size:40px; font-weight:800; color:var(--teal-d); margin:4px 0; }
.scorebig small { font-size:20px; color:var(--muted); font-weight:700; margin-left:6px; }
.vpick { display:flex; gap:8px; flex-wrap:wrap; }
.krow.r-right .kopt.on { background:#16a34a; border-color:#16a34a; }
.krow.r-wrong .kopt.on { background:#dc2626; border-color:#dc2626; }
.krow.r-wrong { background:#fef3f2; }
.krow.r-check { background:#fff7ed; }
.rinfo { font-size:13px; color:var(--muted); margin-left:4px; }
.krow.r-wrong .rinfo { color:var(--bad); font-weight:600; }
.linkbtn { background:none; border:0; padding:0; color:var(--blue); font:inherit; font-size:13px; cursor:pointer; text-decoration:underline; }
.items { display:flex; flex-direction:column; gap:4px; }
.item { display:grid; grid-template-columns:34px 1fr 46px; align-items:center; gap:8px; font-size:14px; }
.item .muted { grid-column:2 / 4; font-size:12.5px; margin-top:-2px; }
.item .bar { height:10px; border-radius:999px; background:#eef2f7; overflow:hidden; }
.item .bar i { display:block; height:100%; background:var(--ok); }
.item.mid .bar i { background:#f59e0b; }
.item.low .bar i { background:var(--bad); }
.item .pc { font-weight:700; text-align:right; }

/* ----- class › exam page: print card + results + compare (owner, 2026-11-12) ----- */
.printonly { display:none; }
.gpage { display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:start; }
.gmain { min-width:0; }
.printcard { position:sticky; top:76px; margin:0; }
.printcard summary { display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; font-weight:800; color:var(--navy); list-style:none; }
.printcard summary::-webkit-details-marker { display:none; }
.printcard summary::after { content:"▾"; color:var(--muted); transition:transform .2s ease; }
.printcard[open] summary::after { transform:rotate(180deg); }
.checks.one { grid-template-columns:1fr; max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:4px; margin-top:8px; }
.panel h4 { margin:14px 0 6px; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
table.cmp tr.me td { background:var(--sky); }
.avgbar { display:inline-block; width:70px; height:8px; border-radius:999px; background:#eef2f7; overflow:hidden; vertical-align:middle; }
.avgbar i { display:block; height:100%; background:var(--ok); }
.avgbar i.mid { background:#f59e0b; } .avgbar i.low { background:var(--bad); }
@media (max-width:899px) {
  .gpage { grid-template-columns:1fr; }
  .printcard { position:static; }                 /* phones: a fold-open card at the top */
}
@media print { .vx-print-mode .printpages.printonly { display:block; } }

/* ----- the subject box: suggestions + add new (owner, 2026-11-12) ----- */
.combo { position:relative; }
.combo-list { position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px); background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(11,37,69,.14); padding:4px; max-height:260px; overflow:auto; }
.combo-opt { padding:9px 10px; border-radius:8px; cursor:pointer; }
.combo-opt:hover, .combo-opt.on { background:var(--sky); }
.combo-opt.add { color:var(--teal-d); font-weight:700; }

/* ----- import a paper test (owner, 2026-11-12) ----- */
.imp-add .btn { cursor:pointer; }
.imp-pages { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:10px; }
.imp-page { margin:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
.imp-page img { display:block; width:100%; height:140px; object-fit:cover; object-position:top; }
.imp-page figcaption { display:flex; align-items:center; gap:6px; padding:4px 8px; font-size:14px; }
.imp-page figcaption b { flex:1; }
.imp-doc { margin-top:10px; }
.imp-busy { display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 16px; }
.vx-spin { width:34px; height:34px; border-radius:50%; border:4px solid #dbe4f0; border-top-color:var(--teal); animation:vxspin .9s linear infinite; }
@keyframes vxspin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vx-spin { animation-duration:3s; } }
.imp-q.flagged { border-color:#f5d38a; box-shadow:inset 4px 0 0 #f59e0b; }
.imp-qh { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:8px; }
.imp-qh label { font-weight:700; display:flex; align-items:center; gap:6px; }
.imp-num { width:70px; padding:6px 8px; }
.imp-kind { width:auto; padding:6px 8px; }
.imp-qh .danger { margin-left:auto; color:var(--bad); }
.imp-flags { margin:0 0 8px; padding:8px 12px 8px 28px; background:#fffbeb; border-radius:10px; color:#92400e; font-size:14px; }
.imp-sec { font-size:13px; margin-bottom:4px; }
.imp-ansh { margin:8px 0 4px; }
.imp-choices { display:flex; flex-direction:column; gap:6px; }
.imp-ch { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.imp-ch .input { flex:1; min-width:160px; padding:7px 9px; }
.imp-ch.on .input { border-color:var(--navy); }
.imp-chfig { flex-basis:100%; padding-left:44px; }
.imp-fig { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin:8px 0; }
.imp-fig img { max-width:min(100%, 420px); max-height:260px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.imp-modal { position:fixed; inset:0; z-index:60; background:rgba(11,37,69,.6); display:flex; align-items:flex-start; justify-content:center; padding:16px; overflow:auto; }
.imp-modal-in { background:#fff; border-radius:14px; padding:14px; width:min(900px, 100%); }
.imp-stage { position:relative; touch-action:none; user-select:none; cursor:crosshair; border:1px solid var(--line); }
.imp-stage img { display:block; width:100%; height:auto; pointer-events:none; }
.imp-box { position:absolute; border:3px solid var(--teal); background:rgba(20,184,166,.12); display:none; pointer-events:none; }
.testpanel summary { cursor:pointer; }
.tq { border-top:1px solid var(--line); padding:10px 0; }
.tq-text { white-space:pre-wrap; margin:4px 0; }
.tq-img { display:block; max-width:min(100%, 480px); max-height:320px; margin:6px 0; border-radius:8px; border:1px solid var(--line); }
.tq-ch { margin:4px 0 0; padding-left:0; list-style:none; }
.tq-ch li { padding:3px 0; }
.tq-ch li.right { font-weight:600; }
.testedit h4 { margin:16px 0 6px; }
.te-q { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; }
.te-h { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:6px; }
.te-h .grow { flex:1; }
.te-h select.input { width:auto; max-width:100%; }
.te-num { display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.te-num .input { width:4.5em; }
.te-text, .te-lab textarea, .te-lab .input { width:100%; box-sizing:border-box; }
.te-lab { display:block; margin-top:8px; font-size:.9em; color:var(--muted, inherit); }
.te-ch { list-style:none; margin:6px 0; padding:0; }
.te-ch li { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:4px 0; border-top:1px dashed var(--line); }
.te-ch li .input { flex:1 1 12em; min-width:0; }
.te-ch li.right .input { font-weight:600; }
.te-right { display:inline-flex; align-items:center; gap:2px; cursor:pointer; }
.te-right input { width:20px; height:20px; }
.te-lab-l { min-width:1.4em; }
.te-pic { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0; }
.te-pic.small { margin:0; }
.te-img { display:block; max-width:min(100%, 360px); max-height:240px; border-radius:8px; border:1px solid var(--line); }
.te-pic.small .te-img { max-width:120px; max-height:80px; }
.te-add { margin-top:8px; }
.imp-bal { margin:10px 0 0; }
.imp-bal.bad { color:var(--bad); }
.imp-pass { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; margin:4px 0 6px; color:var(--muted); }
.imp-pass .input { width:auto; max-width:100%; padding:5px 8px; }
.imp-shared { border-left:4px solid var(--teal); }

/* ----- versions of an imported test (owner, 2026-11-12) ----- */
.vmake { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; }
.vmake > label:not(.check) { display:flex; align-items:center; gap:6px; font-weight:600; }
.vmake .input { width:auto; padding:6px 8px; }
.vmake label.check { padding:4px 0; }
.arr-q { border-top:1px solid var(--line); padding:8px 0; }
.arr-h { display:flex; align-items:flex-start; gap:8px; }
.arr-t { flex:1; min-width:0; }
.arr-btns { display:flex; gap:4px; flex:none; }
.arr-ch { margin:4px 0 0 28px; padding:0; list-style:none; font-size:14px; }
.booklet { font-family: Georgia, "Times New Roman", serif; color:#000; font-size:12pt; line-height:1.35; }
.bk-head { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 18px; border-bottom:1.5pt solid #000; padding-bottom:6pt; margin-bottom:10pt; }
.bk-sec { font-weight:700; margin:12pt 0 4pt; }
.bk-pass { border:1pt solid #888; border-radius:4pt; padding:6pt 8pt; margin:8pt 0; break-inside:avoid; }
.bk-q { margin:0 0 10pt; break-inside:avoid; page-break-inside:avoid; }
.bk-text { white-space:pre-wrap; }
.bk-ch { list-style:none; margin:3pt 0 0 18pt; padding:0; }
.bk-ch li { margin:1pt 0; }
.booklet img { display:block; max-width:100%; max-height:3.6in; margin:4pt 0; }
.bk-write { height:0.9in; border-bottom:0.75pt solid #999; margin-top:4pt; }
@media print { .vx-print-mode .printpages .booklet { display:block; padding:0.6in 0.7in; } }

/* ===== New-exam pop-up (owner, 2026-11-13): three steps that slide; the
   import opens in it too. ===== */
html.vx-modal-open, html.vx-modal-open body { overflow:hidden; }
.vx-modal { position:fixed; inset:0; z-index:90; display:flex; align-items:flex-start; justify-content:center; padding:max(16px, 6vh) 16px 16px; background:rgba(11,37,69,.45); overflow-y:auto; }
.vx-modal.opening { animation:vxfade .2s ease-out; }
.vx-modal.opening .vx-mbox { animation:wizPop .24s cubic-bezier(.2,.8,.2,1); }
@keyframes wizPop { from { transform:translateY(12px) scale(.98); opacity:0; } to { transform:none; opacity:1; } }
.vx-mbox { position:relative; width:100%; max-width:640px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px 24px 24px; box-shadow:0 24px 60px rgba(11,37,69,.25);
  /* clip SIDEWAYS only: the sliding steps stay inside, but the subject list can drop below the box (owner, 2026-11-13: "the dropdown for subjects gets cutoff") */
  overflow:visible; overflow-x:clip; }
.vx-mbox.wide { max-width:1100px; }
.vx-mtop { display:flex; align-items:center; gap:10px; }
.vx-mtop .grow { flex:1; }
.wiz-kicker { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.wiz-step { font-size:14px; }
.vx-x { border:0; background:none; font-size:18px; line-height:1; padding:6px 8px; border-radius:8px; cursor:pointer; color:var(--muted); }
.vx-x:hover { background:var(--bg); color:var(--ink); }
.wiz-bars { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin:14px 0 18px; }
.wiz-bars span { height:6px; border-radius:3px; background:#eef1f5; transition:background .3s; }
.wiz-bars span.on { background:var(--teal); }
.wiz-pane h2 { margin:0 0 4px; font-size:22px; color:var(--navy); }
.wiz-pane > p.muted { margin:0 0 16px; }
.wiz-pane .input { width:100%; }
.wiz-err { color:var(--bad); font-size:14px; margin-top:6px; }
.wiz-cards { display:flex; flex-direction:column; gap:12px; }
.wiz-card { position:relative; display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border:1.5px solid var(--line); border-radius:14px; cursor:pointer; background:#fff; transition:border-color .15s, box-shadow .15s; }
.wiz-card:hover { border-color:#b9c2d0; }
.wiz-card input { position:absolute; opacity:0; pointer-events:none; }
.wiz-card:has(input:checked) { border-color:var(--teal); box-shadow:0 0 0 1px var(--teal); }
.wiz-card:has(input:focus-visible) { outline:3px solid var(--blue); outline-offset:2px; }
.wiz-ico svg { width:24px; height:24px; fill:none; stroke:var(--navy); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wiz-card:has(input:checked) .wiz-ico svg { stroke:var(--teal-d); }
.wiz-ct { flex:1; display:flex; flex-direction:column; gap:4px; }
.wiz-ct b { font-size:17px; color:var(--ink); }
.wiz-ct span { color:var(--muted); line-height:1.4; }
.wiz-dot { flex:none; width:22px; height:22px; border-radius:50%; border:2px solid #c6cdd8; margin-top:2px; }
.wiz-card:has(input:checked) .wiz-dot { border-color:var(--teal); background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.wiz-nav { display:flex; align-items:center; gap:10px; margin-top:20px; }
.wiz-nav .grow { flex:1; }
.wiz-nav .btn, .wiz-back { border-radius:999px; padding:11px 20px; }
.wiz-go.wide { width:100%; }
.wiz-nav svg, .wiz-back svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.vx-mbox .wiz-back.small { padding:6px 12px; margin-bottom:8px; }
.vx-mbox #impRoot .panel { box-shadow:none; }
/* the steps slide: forward from the right, Back from the left */
.wiz-pane.anim-next, .wiz-pane.anim-back { will-change:transform, opacity; backface-visibility:hidden; }
.wiz-pane.anim-next { animation:wizInR .28s cubic-bezier(.2,.8,.2,1); }
.wiz-pane.anim-back { animation:wizInL .28s cubic-bezier(.2,.8,.2,1); }
.wiz-pane.anim-open { animation:vxfade .2s ease-out; }
@keyframes wizInR { from { transform:translateX(48px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes wizInL { from { transform:translateX(-48px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes vxfade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .vx-modal.opening, .vx-modal.opening .vx-mbox, .wiz-pane.anim-next, .wiz-pane.anim-back, .wiz-pane.anim-open { animation:none; } }
@media (max-width:560px) {
  .vx-modal { padding:8px; }
  .vx-mbox { padding:16px; border-radius:16px; }
  .wiz-pane h2 { font-size:19px; }
  .wiz-card { padding:14px; }
}
/* the set-up above a typed-in answer key */
.setup-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:4px 14px; }
.setup-grid .input { width:100%; }
/* the exam editor's text boxes are writing, not code (textarea.input is the paste box's) */
textarea.input.te-text, .te-lab textarea.input { min-height:0; font-family:inherit; font-size:inherit; }

/* ===== THE FRAME (owner's mock-ups, 2026-11-13): dark sidebar + light top
   bar over a wave-art page. vx-header.js draws it; .vx-side = the sidebar
   sits beside the page (a computer); .vx-drawer = it slides out (phones,
   tablets, narrow windows). ===== */
:root { --side-w:248px; }
body { background:#f4f7fc url("brand/waves-light.svg") top center / 100% auto no-repeat; }
@media print { .vx-print-mode body { background:#fff; } }      /* print only — the results page stays in print mode on screen */
.top .ico, .tabs .ico { width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* the sidebar */
.tabs { background:#0b2545 url("brand/waves-dark.svg") bottom center / cover no-repeat; color:#dbe7f3; border:0; }
.tabs .side-brand { display:flex; align-items:center; gap:8px; padding:6px 10px 18px; color:#fff; text-decoration:none; font-weight:800; font-size:24px; letter-spacing:-.3px; border:0; }
.tabs .side-brand img { height:34px; width:auto; }
.tabs .side-brand img.logo { height:36px; }
.tabs .side-brand .dot { color:var(--teal); }
.tabs .side-nav, .tabs .side-group, .tabs .side-foot { display:flex; flex-direction:column; gap:4px; }
.tabs .side-nav a, .tabs .side-soon, .tabs .side-school { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px; color:#dbe7f3; text-decoration:none; font-weight:600; font-size:16px; border:0; }
.tabs .side-nav a:hover { background:rgba(255,255,255,.08); color:#fff; }
.tabs .side-nav a.on { background:linear-gradient(90deg, #14b8a6, #0d9488); color:#fff; box-shadow:0 6px 16px rgba(20,184,166,.28); }
.tabs .side-soon, .tabs .side-school { color:rgba(219,231,243,.5); cursor:default; }
.tabs .lbl { flex:1; }
.tabs .soon { font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; background:rgba(255,255,255,.1); color:rgba(219,231,243,.75); border-radius:999px; padding:2px 7px; margin:0; }
.tabs .side-group { margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); }
.tabs .side-foot { margin-top:auto; padding-top:14px; }
.tabs .side-h { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:rgba(219,231,243,.55); padding:0 14px 2px; }
.tabs .side-school { border:1px solid rgba(255,255,255,.18); margin-bottom:10px; }
.vx-side .tabs { position:fixed; z-index:30; top:0; left:0; bottom:0; width:var(--side-w); display:flex; flex-direction:column; gap:0; padding:20px 14px 18px; overflow-y:auto; }
.vx-side body { padding-left:var(--side-w); }
/* …never on paper: the answer sheet builder doesn't use print mode, so its sheets printed squeezed into the page minus the sidebar — smaller, corner squares far from the edges (owner, 2026-11-13) */
@media print { .vx-side body { padding-left:0 !important; } .vx-side .tabs, .vx-side .top { display:none !important; } }
.vx-side .top-brand, .vx-side .menu-btn { display:none; }
/* the top bar */
.top { background:transparent; border-bottom:0; gap:10px; padding:12px 24px; }
.vx-side .top { position:sticky; top:0; background:rgba(244,247,252,.72); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); }
.top-search { display:flex; align-items:center; gap:8px; flex:0 1 420px; min-width:0; background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 14px; color:var(--muted); cursor:default; }
.top-search input { flex:1; min-width:0; border:0; background:none; font:inherit; color:var(--muted); }
.top-search .soon, .top .soon { font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; background:var(--sky); color:var(--blue); border-radius:999px; padding:2px 7px; }
.top-ico { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; border-radius:999px; background:none; color:var(--muted); }
.top-ico:disabled { opacity:.55; cursor:default; }
.acct { position:relative; }
.acct-btn { display:flex; align-items:center; gap:8px; border:0; background:none; padding:4px 6px; border-radius:999px; cursor:pointer; color:var(--ink); font-weight:600; }
.acct-btn:hover { background:rgba(11,37,69,.05); }
.acct-btn .ico { width:18px; height:18px; }
.avatar { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, #14b8a6, #0d9488); color:#fff; font-weight:700; font-size:15px; }
.acct-name { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:50; min-width:220px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 14px 34px rgba(11,37,69,.16); padding:14px; }
.acct-menu[hidden] { display:none; }
.acct-who { font-size:13px; color:var(--muted); margin-bottom:10px; overflow-wrap:anywhere; }
.acct-who b { color:var(--ink); }
.acct-menu .btn { width:100%; }
/* phones / tablets / narrow: the sidebar is the slide-out menu */
.vx-drawer .tabs { background:#0b2545 url("brand/waves-dark.svg") bottom center / cover no-repeat; display:flex; }
.vx-drawer .tabs .side-brand { display:none; }                  /* the bar shows the logo */
.vx-drawer .tabs a, .vx-drawer .tabs .side-soon, .vx-drawer .tabs .side-school { color:#dbe7f3; }
.vx-drawer .tabs .side-nav a.on { background:linear-gradient(90deg, #14b8a6, #0d9488); color:#fff; box-shadow:none; }
.vx-drawer .tabs .side-soon, .vx-drawer .tabs .side-school { color:rgba(219,231,243,.5); }
.vx-drawer .top { background:#fff; border-bottom:1px solid var(--line); padding:10px 16px; }
@media (max-width:900px) { .top-search { display:none; } .acct-name { display:none; } }
/* printing: no sidebar or bar (print only: the class results page keeps print mode on while on screen — owner, 2026-11-13) */
@media print { .vx-print-mode .tabs, .vx-print-mode .top { display:none !important; } .vx-print-mode body { padding-left:0 !important; } }
.tabs[hidden] { display:none !important; }

/* ===== HOME (owner's mock-up, 2026-11-13) ===== */
.hico { width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hico.sm { width:18px; height:18px; color:var(--teal-d); }
.home-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:8px 0 22px; }
.home-hi { margin:0; font-size:clamp(28px, 4vw, 40px); letter-spacing:-.6px; color:var(--navy); }
.home-sub { margin:4px 0 0; color:var(--muted); font-size:17px; }
.home-new { padding:13px 22px; font-size:17px; border-radius:14px; box-shadow:0 10px 24px rgba(13,148,136,.25); }
.home-new .hico { width:20px; height:20px; }
.stat-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px; margin-bottom:20px; }
.stat { display:flex; align-items:center; gap:16px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:18px; text-decoration:none; color:var(--ink); box-shadow:0 2px 10px rgba(11,37,69,.04); position:relative; transition:box-shadow .15s, transform .15s; }
.stat:hover { box-shadow:0 10px 26px rgba(11,37,69,.09); transform:translateY(-1px); }
.stat.skel { min-height:104px; }
.stat-ico { display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:16px; background:#e6f7f5; color:var(--teal-d); flex:none; }
.stat-ico .hico { width:30px; height:30px; }
.stat-body { display:flex; flex-direction:column; min-width:0; }
.stat-lbl { font-weight:600; color:var(--ink); }
.stat-lbl small { font-weight:500; color:var(--muted); }
.stat-num { font-size:34px; font-weight:800; letter-spacing:-.5px; line-height:1.15; color:var(--navy); }
.chip { position:absolute; right:16px; bottom:16px; display:inline-flex; align-items:center; gap:3px; font-size:13px; font-weight:700; border-radius:999px; padding:4px 10px; }
.chip .hico { width:14px; height:14px; stroke-width:2.4; }
.chip.up { background:#e3f7ee; color:#15803d; }
.chip.down { background:#fdecec; color:var(--bad); }
.home-grid { display:grid; grid-template-columns:minmax(0, 1.75fr) minmax(0, 1fr); gap:16px; align-items:start; }
@media (max-width:1100px) { .home-grid { grid-template-columns:1fr; } }
.card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px 22px; box-shadow:0 2px 10px rgba(11,37,69,.04); }
.card-h { display:flex; align-items:center; gap:10px; margin-bottom:12px; color:var(--teal-d); }
.card-h h2 { margin:0; font-size:20px; color:var(--navy); }
.card-h .grow { flex:1; }
.card-h .more { display:inline-flex; align-items:center; gap:4px; font-weight:700; color:var(--teal-d); text-decoration:none; }
.card-h .more .hico { width:18px; height:18px; }
.htable { width:100%; border-collapse:collapse; }
.htable th { text-align:left; font-size:13px; font-weight:600; color:var(--muted); background:#f4f7fb; padding:10px 12px; }
.htable th:first-child { border-radius:10px 0 0 10px; } .htable th:last-child { border-radius:0 10px 10px 0; }
.htable td { padding:13px 12px; border-bottom:1px solid #eef1f5; vertical-align:middle; }
.htable tr:last-child td { border-bottom:0; }
.hx { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.hx:hover b { color:var(--teal-d); text-decoration:underline; }
.status { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; border-radius:999px; padding:3px 10px; white-space:nowrap; }
.status::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.status.ready { background:#e3f7ee; color:#15803d; }
.status.given { background:#e6f0ff; color:#1d4ed8; }
.status.draft { background:#eef1f5; color:#5b6475; }
@media (max-width:640px) {
  .htable thead { display:none; }
  .htable, .htable tbody, .htable tr, .htable td { display:block; width:100%; }
  .htable tr { padding:10px 0; border-bottom:1px solid #eef1f5; }
  .htable td { border:0; padding:3px 0; display:flex; gap:8px; }
  .htable td::before { content:attr(data-l); min-width:84px; color:var(--muted); font-size:13px; }
  .htable td:first-child::before { display:none; }
}
.act { list-style:none; margin:0; padding:0; }
.act li { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid #eef1f5; }
.act li:last-child { border-bottom:0; }
.act-ico { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:#e6f7f5; color:var(--teal-d); flex:none; }
.act-ico.check { background:#e3f7ee; color:#15803d; }
.act-ico.give { background:#e6f0ff; color:#1d4ed8; }
.act-b { flex:1; min-width:0; display:flex; flex-direction:column; }
.act-b span { color:var(--muted); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.act-t { font-size:13px; color:var(--muted); white-space:nowrap; }
/* the subject list opens upward when the keyboard leaves no room below (vx-app.js comboFit) */
.combo-list.up { top:auto; bottom:calc(100% + 4px); }
/* phones / tablets (owner, 2026-11-13: "the background … doesn't come through on mobile"):
   the waves stay full height on a narrow screen, and the bar lets them show through */
@media (max-width:900px) { body { background-size:max(100%, 1100px) auto; } }
.vx-drawer .top { background:rgba(255,255,255,.55); border-bottom:1px solid rgba(217,222,231,.6); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); }
.vx-drawer.vx-menu-open .top { background:#fff; }
/* the tagline under the logo (owner, 2026-11-13: "Assessment, Simplified.") */
.tagline { margin:2px 0 14px 40px; font-size:13.5px; font-weight:600; color:var(--teal-d); letter-spacing:.02em; }
.tabs .side-brand { padding-bottom:2px; }
.tabs .side-tagline { margin:0 0 18px; padding:0 0 0 54px; font-size:12px; font-weight:600; letter-spacing:.01em; color:#5eead4; white-space:nowrap; }   /* one line (owner, 2026-11-13) */
.vx-drawer .tabs .side-tagline { padding-left:14px; }

/* ===== THE EXAM PAGE (owner's mock-up, 2026-11-13) ===== */
.crumbs { display:flex; align-items:center; gap:8px; font-size:15px; color:var(--muted); margin:4px 0 12px; }
.crumbs a { color:var(--muted); text-decoration:none; } .crumbs a:hover { color:var(--teal-d); text-decoration:underline; }
.crumbs span:last-child { color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.exam-head { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:14px; }
.ex-ico { display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:18px; background:#d7f3ef; color:var(--teal-d); flex:none; }
.ex-ico .hico { width:38px; height:38px; }
.ex-t { flex:1; min-width:220px; }
.ex-t h1 { margin:0; font-size:clamp(24px, 3.4vw, 34px); color:var(--navy); letter-spacing:-.4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; overflow-wrap:anywhere; }
.ex-edit { border:0; background:none; color:var(--muted); padding:4px; border-radius:8px; cursor:pointer; }
.ex-edit:hover { color:var(--teal-d); background:#eef7f6; }
.ex-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; color:var(--muted); font-weight:500; }
.ex-meta > span { display:inline-flex; align-items:center; gap:6px; }
.badge { border-radius:999px; padding:4px 12px; font-size:14px; font-weight:600; }
.badge.keyonly { background:#e6f7f5; color:var(--teal-d); }
.badge.full { background:#e6f0ff; color:#1d4ed8; }
.ex-acts { display:flex; align-items:center; gap:10px; margin-left:auto; }
.kebab { position:relative; }
.kebab summary { list-style:none; display:inline-flex; align-items:center; justify-content:center; width:46px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; color:var(--ink); }
.kebab summary::-webkit-details-marker { display:none; }
.kebab-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:180px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 34px rgba(11,37,69,.16); padding:6px; display:flex; flex-direction:column; }
.kebab-menu button { text-align:left; border:0; background:none; padding:10px 12px; border-radius:8px; font-weight:600; cursor:pointer; color:var(--ink); }
.kebab-menu button:hover { background:#f4f7fb; } .kebab-menu .danger { color:var(--bad); }
.etabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:4px 0 18px; overflow-x:auto; scrollbar-width:none; }
.etabs a { padding:12px 16px; color:var(--muted); font-weight:600; text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap; font-size:16px; }
.etabs a:hover { color:var(--ink); }
.etabs a.on { color:var(--teal-d); border-bottom-color:var(--teal); }
.etabs small { background:#e6f7f5; color:var(--teal-d); border-radius:999px; padding:1px 7px; font-size:12px; margin-left:4px; }
.stat-row.four { grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
.stat.sm { padding:16px; gap:12px; }
.stat.sm .stat-ico { width:46px; height:46px; border-radius:12px; }
.stat.sm .stat-ico .hico { width:24px; height:24px; }
.stat.sm .stat-num { font-size:28px; }
.stat-sub { font-size:13px; color:var(--muted); }
.stat.sm:hover { transform:none; box-shadow:0 2px 10px rgba(11,37,69,.04); }
.xgrid { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:16px; align-items:start; margin-bottom:16px; }
.xgrid.lower { grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); }
@media (max-width:1100px) { .xgrid, .xgrid.lower { grid-template-columns:1fr; } }
.xacts { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:12px; }
.xact { display:flex; align-items:center; gap:14px; text-align:left; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); text-decoration:none; cursor:pointer; font:inherit; transition:border-color .15s, box-shadow .15s; }
.xact:hover { border-color:var(--teal); box-shadow:0 6px 18px rgba(13,148,136,.12); }
.xact.off { opacity:.55; cursor:default; } .xact.off:hover { border-color:var(--line); box-shadow:none; }
.xact-ico { color:var(--teal-d); } .xact-ico .hico { width:28px; height:28px; }
.xact-t { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.xact-t b { font-size:16px; } .xact-t span { color:var(--muted); font-size:14px; }
.xact .chev { width:18px; height:18px; color:var(--muted); }
.drow { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid #eef1f5; }
.drow:last-child { border-bottom:0; }
.drow .dk { flex:1; color:var(--ink); } .drow .dv { font-weight:600; text-align:right; }
.drow .hico.sm { color:var(--muted); }
.soon { font-size:11px; text-transform:uppercase; letter-spacing:.04em; background:var(--sky); color:var(--blue); border-radius:999px; padding:2px 8px; font-weight:700; }
.emptybox { display:flex; gap:14px; align-items:center; background:#eef8f7; border-radius:14px; padding:18px; }
.emptybox > .hico { width:40px; height:40px; color:var(--teal-d); }
.emptybox b { display:block; } .emptybox span { color:var(--muted); }
.act-ico.pencil { background:#fff4e5; color:#c2410c; } .act-ico.exam { background:#eef1f5; color:#5b6475; }
.soonpanel h3 { display:flex; align-items:center; gap:8px; }
@media (max-width:640px) { .ex-acts { margin-left:0; width:100%; } .ex-acts .btn { flex:1; } .ex-ico { width:56px; height:56px; } }

/* ===== THE CLASS PAGE (owner's mock-up, 2026-11-13) ===== */
.hico.down { transform:rotate(90deg); }
.kebab.manage summary { width:auto; padding:0 14px; gap:6px; font-weight:600; }
.ex-meta > span[aria-hidden] { color:#c6cdd8; }
.cgrid { display:grid; grid-template-columns:minmax(0, 1.65fr) minmax(0, 1fr); gap:16px; align-items:start; }
@media (max-width:1100px) { .cgrid { grid-template-columns:1fr; } }
.cside { display:flex; flex-direction:column; gap:16px; }
.ctabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:-6px 0 16px; overflow-x:auto; scrollbar-width:none; }
.ctabs button { display:inline-flex; align-items:center; gap:7px; border:0; background:none; padding:12px 14px; font:inherit; font-weight:600; color:var(--muted); border-bottom:3px solid transparent; cursor:pointer; white-space:nowrap; }
.ctabs button.on { color:var(--teal-d); border-bottom-color:var(--teal); }
.ctabs .soonish { color:#9aa3b2; }
.rtools { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.rsearch { flex:1 1 240px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:12px; padding:0 12px; background:#fff; color:var(--muted); }
.rsearch input { flex:1; border:0; background:none; padding:10px 0; font:inherit; min-width:0; }
.rsearch input:focus { outline:none; } .rsearch:focus-within { border-color:var(--teal); box-shadow:0 0 0 3px rgba(20,184,166,.15); }
.rtools select.input { width:auto; min-width:200px; flex:0 1 auto; }
.rtable { width:100%; border-collapse:collapse; }
.rtable th { text-align:left; font-size:13px; font-weight:600; color:var(--muted); background:#f4f7fb; padding:10px 12px; }
.rtable th:first-child { border-radius:10px 0 0 10px; } .rtable th:last-child { border-radius:0 10px 10px 0; }
.rtable td { padding:11px 12px; border-bottom:1px solid #eef1f5; vertical-align:middle; }
.rtable tr[hidden] { display:none; }
.rtable td.act { width:52px; text-align:right; }
.rtable tr.edit td { background:#f8fbff; }
.sname { display:flex; align-items:center; gap:12px; }
.sname > span:last-child { display:flex; flex-direction:column; }
.sname small { color:var(--muted); font-size:12.5px; } .sname small.warnish { color:var(--warn); }
.sav { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; font-weight:700; font-size:14px; flex:none; }
.trend { display:inline-flex; align-items:center; gap:8px; }
.spark { width:64px; height:22px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.spark.up { stroke:#14b8a6; } .spark.down { stroke:#ef4444; }
.chip-in { font-size:12.5px; font-weight:700; border-radius:999px; padding:2px 8px; white-space:nowrap; }
.chip-in.up { background:#e3f7ee; color:#15803d; } .chip-in.down { background:#fdecec; color:var(--bad); }
.kebab.row summary { width:36px; height:34px; border-color:transparent; background:none; }
.kebab.row summary:hover { background:#f4f7fb; }
.addrow { margin-top:14px; padding-top:14px; border-top:1px solid #eef1f5; }
.linkish { border:0; background:none; font:inherit; cursor:pointer; }
.cside .act li { align-items:center; }
.cside .act-b { text-decoration:none; color:inherit; }
.cside .act-b:hover b { color:var(--teal-d); text-decoration:underline; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
@media (max-width:640px) {
  .rtable thead { display:none; }
  .rtable, .rtable tbody, .rtable tr, .rtable td { display:block; width:100%; }
  .rtable tr { position:relative; padding:10px 0; border-bottom:1px solid #eef1f5; }
  .rtable td { border:0; padding:3px 0; display:flex; gap:8px; align-items:center; }
  .rtable td::before { content:attr(data-l); min-width:84px; color:var(--muted); font-size:13px; }
  .rtable td:first-child::before, .rtable td.act::before { display:none; }
  .rtable td.act { position:absolute; right:0; top:10px; width:auto; }
  .rtools select.input { width:100%; }
}

/* ===== A CLASS'S EXAM RESULTS (owner, 2026-11-13) ===== */
.stat-num small { font-size:18px; color:var(--muted); font-weight:700; }
.gpage { grid-template-columns:320px minmax(0, 1fr); gap:16px; }
/* TABLETS (owner, 2026-11-13: on a tablet the Scores table's Status column hung
   outside its card, the stat cards split 3 + 1). This block must come AFTER the
   two-column rule above — the older "max-width:899px" stack sat before it and
   never applied. Below 1100px: one column, the print card a fold-open card on
   top (as on phones), the Scores table full width. */
@media (max-width:1099px) {
  .gpage { grid-template-columns:minmax(0, 1fr); }
  .printcard { position:static; }
}
/* a table that still can't fit scrolls INSIDE its card */
.tscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.tscroll > .rtable { min-width:560px; }
/* the four stat cards: four across, or 2 × 2 — never 3 + 1 */
.stat-row.four { grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width:899px) { .stat-row.four { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:1149px) { .vx-side .stat-row.four { grid-template-columns:repeat(2, minmax(0, 1fr)); } }   /* the sidebar takes ~250px */
@media (max-width:480px) { .stat-row.four { grid-template-columns:minmax(0, 1fr); } }                       /* phones: one card per row, as before */
@media (max-width:640px) { .tscroll > .rtable { min-width:0; } }   /* phones: the table is stacked rows */
.gmain { display:flex; flex-direction:column; gap:16px; }
.printcard { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px 20px; box-shadow:0 2px 10px rgba(11,37,69,.04); top:84px; }
.printcard summary span { font-size:18px; }
.sortby { display:inline-flex; align-items:center; gap:8px; }
.sortby select.input { width:auto; min-width:150px; padding:7px 10px; }
.stable tr.miss td { color:var(--muted); }
.stable tr.miss .sav { opacity:.55; }
.stable a.sname { text-decoration:none; color:var(--ink); }
.stable a.sname:hover b { color:var(--teal-d); text-decoration:underline; }
.sbar { display:inline-flex; align-items:center; gap:8px; min-width:180px; }
.sbar > span { flex:1; height:8px; border-radius:999px; background:#eef1f5; overflow:hidden; min-width:70px; }
.sbar i { display:block; height:100%; border-radius:999px; background:#14b8a6; }
.sbar.mid i { background:#f59e0b; } .sbar.low i { background:#ef4444; }
.sbar small { color:var(--muted); }
.status.warnish { background:#fff4e5; color:#c2410c; }
.compare table.roster { width:100%; }
@media (max-width:640px) { .sbar { min-width:0; width:100%; } }

/* ----- the class's exam results on tablets / narrow windows (owner, 2026-11-13) ----- */
/* (at the END of the file so it wins over the .sbar / .gpage rules above) */
@media (max-width:1349px) {                     /* a computer with the sidebar: the page is ~250px narrower */
  .vx-side .gpage { grid-template-columns:minmax(0, 1fr); }
  .vx-side .printcard { position:static; }
}
@media (max-width:899px) {                      /* tighter Scores table so it fits a portrait tablet */
  .rtable.stable th, .rtable.stable td { padding:10px 8px; }
  .rtable.stable .sbar { min-width:140px; }
  .rtable.stable .sbar > span { min-width:44px; }
}
@media (max-width:1149px) {                     /* …and a narrow computer window with the sidebar */
  .vx-side .rtable.stable th, .vx-side .rtable.stable td { padding:10px 8px; }
  .vx-side .rtable.stable .sbar { min-width:140px; }
  .vx-side .rtable.stable .sbar > span { min-width:44px; }
}

/* ===== EXAMS + CLASSES lists, a student's scanned sheet, sign-in in the new look (owner, 2026-11-13) ===== */
.list-head .ex-ico { width:60px; height:60px; border-radius:16px; }
.list-head .ex-ico .hico { width:32px; height:32px; }
.list-head .ex-acts { flex-wrap:wrap; }
.list-head .ex-acts select.input { width:auto; min-width:0; max-width:100%; }
.ltools { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.lsearch { position:relative; flex:1 1 240px; display:flex; align-items:center; }
.lsearch .hico { position:absolute; left:12px; width:18px; height:18px; color:var(--muted); pointer-events:none; }
.lsearch .input { padding-left:38px; width:100%; }
.ltools select.input { width:auto; flex:0 0 auto; }
.xtable .hx span { display:flex; flex-direction:column; }
.xtable .hx small { color:var(--muted); font-size:13px; font-weight:500; }
.xtable td .pill { white-space:nowrap; }
.empty-card { text-align:center; padding:34px 22px; }
.empty-card .ex-ico { margin:0 auto 10px; }
.empty-card h2 { margin:0 0 6px; color:var(--navy); }
.empty-card .btn { margin-top:12px; }
.skel-card { min-height:180px; display:flex; flex-direction:column; gap:14px; }
.skel-line { height:16px; border-radius:8px; background:linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%); background-size:200% 100%; animation:vxshimmer 1.3s linear infinite; }
@media (prefers-reduced-motion:reduce) { .skel-line { animation:none; } }
/* classes */
.clgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.clcard { display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px 20px; color:var(--ink); text-decoration:none; box-shadow:0 2px 10px rgba(11,37,69,.04); transition:box-shadow .15s ease, transform .15s ease; font:inherit; text-align:left; cursor:pointer; }
.clcard:hover { box-shadow:0 10px 26px rgba(11,37,69,.09); transform:translateY(-1px); }
.cl-top { display:flex; align-items:center; gap:12px; min-width:0; }
.cl-av { width:46px; height:46px; border-radius:14px; font-size:16px; }
.cl-t { display:flex; flex-direction:column; min-width:0; }
.cl-t b { font-size:18px; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-t span { color:var(--muted); font-size:14px; }
.cl-nums { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; padding:12px 0; border-top:1px solid #eef1f5; border-bottom:1px solid #eef1f5; }
.cl-nums span { display:flex; flex-direction:column; font-size:12px; color:var(--muted); }
.cl-nums b { font-size:22px; color:var(--navy); line-height:1.2; }
.cl-nums b.ok { color:#15803d; } .cl-nums b.mid { color:#c2410c; } .cl-nums b.low { color:#b42318; }
.cl-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; }
.cl-open { display:inline-flex; align-items:center; gap:2px; color:var(--teal-d); font-weight:700; }
.cl-open .hico { width:16px; height:16px; }
.clcard.add { align-items:center; justify-content:center; border:2px dashed var(--line); box-shadow:none; color:var(--teal-d); min-height:180px; gap:8px; }
.clcard.add .hico { width:28px; height:28px; }
/* a student's scanned sheet */
.res-av .sav { width:64px; height:64px; font-size:22px; }
.stat-num.tone-ok { color:#15803d; } .stat-num.tone-mid { color:#c2410c; } .stat-num.tone-low { color:#b42318; }
.rask { margin-bottom:16px; }
.rask h3 { margin-top:0; }
.rpage { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; align-items:start; }
.rpage.one { grid-template-columns:minmax(0, 1fr); }
.rsheet .sheetv { width:100%; height:auto; display:block; border-radius:10px; border:1px solid var(--line); }
.rhint { font-size:13px; }
@media (max-width:1099px) { .rpage { grid-template-columns:minmax(0, 1fr); } }
@media (max-width:1349px) { .vx-side .rpage { grid-template-columns:minmax(0, 1fr); } }
@media (max-width:640px) { .list-head .ex-acts select.input { flex:1 1 100%; } .ltools select.input { flex:1 1 45%; } }
/* sign-in / sign-up: the app's waves */
.auth { background:#f4f7fc url("brand/waves-light.svg") top center / max(100%, 1100px) auto no-repeat; }
.rsheet .legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:13px; }
@media (max-width:1099px) { .rsheet .sheetv { max-width:520px; margin:0 auto; } }
@media (max-width:1349px) { .vx-side .rsheet .sheetv { max-width:520px; margin:0 auto; } }
.auth-card { border-radius:18px; padding:28px; box-shadow:0 12px 34px rgba(11,37,69,.10); }
.auth-card a { color:var(--teal-d); font-weight:600; }