/* LUYA Vocabulary Test — styled to match syllara.app (css/syllara-tokens.css + syllara-hum.css):
   warm paper, 2px ink borders, pear pill buttons with a hard contact edge, mono uppercase
   eyebrows, Plus Jakarta Sans. Token values are copied here because this site is deployed
   on its own and must not depend on the main app's stylesheet. */
:root {
  color-scheme: light;
  --paper: oklch(97% 0.012 95);
  --paper-2: oklch(94% 0.016 95);
  --paper-3: oklch(91% 0.02 95);
  --card: oklch(99% 0.008 95);
  --ink: oklch(20% 0.012 250);
  --ink-soft: oklch(34% 0.014 250);
  --muted: oklch(43% 0.012 250);
  --line: oklch(79% 0.018 95);
  --line-strong: oklch(58% 0.018 250);

  --pear: oklch(86% 0.18 95);
  --pear-soft: oklch(93% 0.082 95);
  --pear-deep: oklch(68% 0.16 95);
  --pear-cast: oklch(76% 0.2 95 / 0.38);
  --cyan: oklch(66% 0.18 235);
  --cyan-soft: oklch(93% 0.052 235);
  --cyan-deep: oklch(40% 0.12 235);
  --coral: oklch(68% 0.24 18);
  --coral-soft: oklch(93% 0.055 18);
  --coral-deep: oklch(40% 0.16 18);
  --mint: oklch(80% 0.16 150);
  --mint-soft: oklch(94% 0.045 150);
  --mint-deep: oklch(40% 0.1 150);
  --focus: oklch(30% 0.14 235);

  /* names the scripts already use */
  --bg: var(--paper);
  --brand: var(--ink);
  --brand-ink: var(--card);
  --brand-soft: var(--pear-soft);
  --accent: var(--cyan-deep);
  --danger: oklch(48% 0.19 22);
  --danger-soft: oklch(94% 0.045 22);
  --ok: oklch(43% 0.12 150);
  --ok-soft: oklch(94% 0.04 150);
  --warn: oklch(52% 0.14 70);
  --warn-soft: var(--pear-soft);

  --font: "Plus Jakarta Sans", "Avenir Next", ui-rounded, -apple-system, "Noto Sans TC", "PingFang TC", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 1.25rem;
  --radius-sm: 0.875rem;
  --radius-input: 0.75rem;
  --pill: 999px;
  --shadow-contact: 0 3px 0 oklch(20% 0.012 250 / 0.14);
  --shadow-card: 0 3px 0 oklch(20% 0.012 250 / 0.14), 0 18px 38px -24px oklch(20% 0.012 250 / 0.12);
  --shadow-raised: 0 5px 0 oklch(20% 0.012 250 / 0.14), 0 26px 46px -22px oklch(20% 0.012 250 / 0.13);
  --shadow: var(--shadow-card);
  --ease-press: cubic-bezier(0.2, 0.7, 0.3, 1);
  font-size: 17px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 5%, oklch(86% 0.18 95 / 0.16), oklch(97% 0.012 95 / 0) 22rem),
    var(--paper);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  padding: 0 16px 48px;
  min-height: 100vh;
}
button, input, textarea, select { font-family: inherit; }
.wrap { max-width: 760px; margin: 0 auto; }

/* ---- header ---- */
header.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 0 12px;
}
header.top .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem; }
header.top .brand .mark {
  width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--ink);
  background: var(--pear); color: var(--ink); box-shadow: var(--shadow-contact);
  display: grid; place-items: center; font-weight: 800; font-size: 17px; flex: none;
}
header.top .brand small {
  display: block; margin-top: 2px; font-family: var(--mono); font-weight: 500; font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.who { font-size: .9rem; color: var(--muted); text-align: right; }
.who b { color: var(--ink); }

/* ---- surfaces ---- */
.card {
  background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: clamp(18px, 3vw, 28px); margin: 14px 0;
}
h1 { font-size: 1.6rem; margin: 0 0 6px; letter-spacing: -0.025em; line-height: 1.15; }
h2 { font-size: 1.2rem; margin: 0 0 10px; letter-spacing: -0.02em; }
h3 { font-size: 1.02rem; margin: 18px 0 8px; letter-spacing: -0.01em; }
p { margin: 6px 0; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.hidden { display: none !important; }
a { color: var(--cyan-deep); }

/* ---- buttons: pear pill with a hard edge, like .btn in syllara-hum.css ---- */
.btn {
  --face: var(--pear); --edge: var(--pear-deep); --cast: var(--pear-cast); --btn-ink: var(--ink);
  appearance: none; border: 0; border-radius: var(--pill); padding: 12px 22px;
  font: inherit; font-weight: 700; cursor: pointer; min-height: 48px; white-space: nowrap;
  background: var(--face); color: var(--btn-ink);
  box-shadow: 0 4px 0 0 var(--edge), 0 6px 12px -3px var(--cast);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transform: translateY(0);
  transition: transform 140ms var(--ease-press), box-shadow 140ms var(--ease-press), background-color 160ms;
}
.btn:hover { background: var(--pear-soft); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--edge), 0 2px 6px -2px var(--cast); transition-duration: 70ms; }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
.btn.secondary { --face: var(--card); --edge: var(--line-strong); --cast: oklch(20% 0.012 250 / 0.12); border: 2px solid var(--ink); }
.btn.secondary:hover { background: var(--paper-2); }
.btn.danger { --face: var(--coral-soft); --edge: var(--coral-deep); --cast: oklch(51% 0.19 18 / 0.18); --btn-ink: var(--coral-deep); border: 2px solid var(--coral-deep); }
.btn.danger:hover { background: var(--coral); --btn-ink: var(--ink); }
.btn.ghost { background: transparent; color: var(--cyan-deep); padding: 8px 10px; min-height: 0; box-shadow: none; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.btn.ghost:hover { background: var(--cyan-soft); text-decoration: none; }
.btn.ghost:active { transform: none; }
.btn.block { width: 100%; }
.btn.sm { padding: 6px 14px; min-height: 36px; font-size: .9rem; box-shadow: 0 3px 0 0 var(--edge); }
.btn.ghost.sm { box-shadow: none; padding: 4px 8px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 10px; }

/* ---- big pick grids for class / name ---- */
.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid.classes { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.pick {
  border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--card); padding: 14px 10px;
  font: inherit; font-weight: 700; cursor: pointer; text-align: center; min-height: 64px; color: var(--ink);
  box-shadow: var(--shadow-contact); transition: transform 140ms var(--ease-press), box-shadow 140ms var(--ease-press), background-color 160ms;
}
.pick small { display: block; font-weight: 500; color: var(--muted); font-size: .85rem; }
.pick:hover, .pick:focus-visible { background: var(--pear-soft); outline: none; transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.pick:active { transform: translateY(2px); box-shadow: 0 1px 0 oklch(20% 0.012 250 / 0.14); }
.pick.big { font-size: 1.3rem; min-height: 80px; }

/* ---- PIN pad ---- */
.pin-display { display: flex; gap: 12px; justify-content: center; margin: 8px 0 16px; }
.pin-display span {
  width: 46px; height: 56px; border-radius: var(--radius-input); border: 2px solid var(--line-strong);
  display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; background: var(--card); font-family: var(--mono);
}
.pin-display span.filled { border-color: var(--ink); background: var(--pear-soft); }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 300px; margin: 0 auto; }
.pad button { font-size: 1.4rem; min-height: 58px; border-radius: var(--radius-sm); }
.pad .key { --face: var(--card); --edge: var(--line-strong); --cast: oklch(20% 0.012 250 / 0.1); border: 2px solid var(--ink); color: var(--ink); font-family: var(--mono); font-weight: 600; }
.pad .key:hover { background: var(--pear-soft); }

/* ---- notices ---- */
.notice { border-radius: var(--radius-input); border: 1px solid transparent; padding: 10px 14px; font-size: .95rem; margin: 10px 0; }
.notice.error { background: var(--danger-soft); color: var(--danger); border-color: oklch(48% 0.19 22 / 0.3); }
.notice.ok { background: var(--ok-soft); color: var(--ok); border-color: oklch(43% 0.12 150 / 0.3); }
.notice.warn { background: var(--pear-soft); color: var(--ink-soft); border-color: var(--pear-deep); }
.notice.info { background: var(--cyan-soft); color: var(--cyan-deep); border-color: oklch(66% 0.18 235 / 0.35); }

/* ---- book covers (book picker) ---- */
.covers { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 16px; }
.cover { width: 118px; padding: 0; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; font: inherit; color: var(--ink); text-align: center; overflow: hidden; transition: transform 140ms var(--ease-press), box-shadow 140ms var(--ease-press); }
.cover img { display: block; width: 100%; aspect-ratio: 372 / 526; object-fit: cover; }
.cover-label { display: block; padding: 6px 6px 8px; font-weight: 700; font-size: .9rem; line-height: 1.2; }
.cover-label small { display: block; font-family: var(--mono); font-weight: 500; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.cover-fallback { display: grid; place-items: center; aspect-ratio: 372 / 526; background: var(--paper-2); font-weight: 800; }
.cover:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.cover.on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--pear), var(--shadow-contact); }
.cover.on .cover-label { background: var(--pear-soft); }
@media (max-width: 480px) { .cover { width: 92px; } .cover-label { font-size: .8rem; } }

/* ---- unit list ---- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tabs button {
  border: 2px solid var(--line-strong); background: var(--card); border-radius: var(--pill); padding: 6px 16px;
  font: inherit; font-weight: 700; cursor: pointer; color: var(--muted);
}
.tabs button:hover { border-color: var(--ink); color: var(--ink); }
.tabs button.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.units { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.unit {
  border: 2px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--card);
  cursor: pointer; text-align: left; font: inherit; color: var(--ink); display: block; width: 100%;
  transition: transform 140ms var(--ease-press), box-shadow 140ms var(--ease-press);
}
.unit .u-name { font-weight: 800; letter-spacing: -0.01em; }
.unit .u-title { color: var(--muted); font-size: .85rem; min-height: 1.2em; }
.unit .u-state { margin-top: 8px; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.unit.open { border-color: var(--ink); background: var(--pear-soft); box-shadow: var(--shadow-contact); }
.unit.open:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.unit.open .u-state { color: var(--ink); }
.unit.done { border-color: var(--ink); background: var(--mint-soft); }
.unit.done .u-state { color: var(--mint-deep); }
.unit.closed { opacity: .7; cursor: default; background: var(--paper-2); }
.unit.closed .u-state { color: var(--muted); }

/* ---- test ---- */
.progress { position: sticky; top: 0; z-index: 5; background: var(--paper); padding: 10px 0; }
.progress .bar { height: 10px; background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--pill); overflow: hidden; }
.progress .bar i { display: block; height: 100%; background: var(--pear); border-right: 2px solid var(--ink); width: 0; transition: width .2s; }
.progress .meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 14px; font-size: .9rem; margin-top: 6px; }
.part { margin-top: 20px; }
.part h2 {
  display: inline-block; background: var(--pear); color: var(--ink); border: 1px solid var(--ink); border-radius: var(--pill);
  padding: 4px 12px; font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.q { padding: 14px 0; border-bottom: 1px solid var(--line); }
.q:last-child { border-bottom: 0; }
.q .stem { font-weight: 600; margin-bottom: 8px; }
.q .num { display: inline-block; min-width: 2em; color: var(--muted); font-weight: 600; font-family: var(--mono); font-size: .9em; }
.q input[type=text] {
  width: 100%; font: inherit; font-size: 1.1rem; padding: 12px 14px; border-radius: var(--radius-input);
  border: 2px solid var(--line-strong); background: var(--card); color: var(--ink);
}
.q input[type=text]:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px oklch(66% 0.18 235 / 0.18); }
.q input[type=text].answered { border-color: var(--ink); background: var(--pear-soft); }
.choices { display: grid; gap: 8px; }
.choice {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid var(--line-strong);
  border-radius: var(--radius-input); cursor: pointer; background: var(--card);
}
.choice:hover { border-color: var(--ink); }
.choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.choice.on { border-color: var(--ink); background: var(--pear-soft); }
.timer { font-variant-numeric: tabular-nums; font-family: var(--mono); font-weight: 600; }
.timer.low { color: var(--danger); }
.submit-bar { position: sticky; bottom: 0; padding: 12px 0 4px; background: linear-gradient(oklch(97% 0.012 95 / 0), var(--paper) 30%); }

/* ---- strict mode lock overlay ---- */
.lock { position: fixed; inset: 0; z-index: 50; background: oklch(20% 0.012 250 / 0.72); display: grid; place-items: center; padding: 16px; }
.lock-card { max-width: 440px; width: 100%; margin: 0; border-color: var(--coral-deep); }
.lock-card h1 { color: var(--coral-deep); }

/* ---- class standings ---- */
.standings { border: 2px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; margin: 8px 0 4px; }
.stand { display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.stand:last-child { border-bottom: 0; }
.stand .rk { font-family: var(--mono); font-weight: 600; color: var(--muted); }
.stand .sc { font-family: var(--mono); font-weight: 600; }
.stand.me { background: var(--pear-soft); }
.stand.me .rk { color: var(--ink); }
.standings-summary { margin: 4px 0 8px; }

/* ---- embedded inside the Syllara workspace (admin.html?embed=1) ---- */
html.embed body { padding: 0 8px 24px; background: transparent; }
html.embed header.top, html.embed .no-embed { display: none !important; }
html.embed .card { margin-top: 0; }

/* ---- student profile ---- */
.linklike { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--cyan-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linklike:hover { text-decoration: none; }
.mono { font-family: var(--mono); font-size: .9em; }
.up { color: var(--mint-deep); } .down { color: var(--coral-deep); }
.profile-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 4px; }
.profile-stats .stat { border: 2px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--card); }
.profile-stats .stat b { display: block; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.1; }
.profile-stats .stat span { color: var(--muted); font-size: .8rem; }
.part-row { display: grid; grid-template-columns: 200px 1fr 50px; align-items: center; gap: 12px; margin: 6px 0; }
.part-name { font-weight: 600; font-size: .95rem; }
.part-bar { height: 12px; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--paper-2); }
.part-bar i { display: block; height: 100%; background: var(--pear); border-right: 2px solid var(--ink); }
.part-pct { font-family: var(--mono); font-weight: 600; text-align: right; }
@media (max-width: 480px) { .part-row { grid-template-columns: 1fr 60px; } .part-name { grid-column: 1 / -1; } }

/* ---- dictation ---- */
.dictation { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }

/* ---- results ---- */
.score { text-align: center; padding: 10px 0 4px; }
.score .big {
  display: inline-block; font-size: 3.2rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--ink);
  background: var(--pear); border: 2px solid var(--ink); border-radius: var(--radius); padding: 10px 26px; box-shadow: var(--shadow-contact);
}
.score .of { color: var(--muted); margin-top: 8px; }
.res { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.res:last-child { border-bottom: 0; }
.res .tag { display: inline-block; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .06em; padding: 2px 9px; border-radius: var(--pill); margin-right: 6px; border: 1px solid transparent; }
.res .tag.ok { background: var(--mint-soft); color: var(--mint-deep); border-color: oklch(43% 0.12 150 / 0.35); }
.res .tag.no { background: var(--coral-soft); color: var(--coral-deep); border-color: oklch(48% 0.19 22 / 0.35); }

/* ---- admin ---- */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-family: var(--mono); font-weight: 500; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.table-wrap { overflow-x: auto; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 2px solid var(--line-strong); border-radius: var(--pill); padding: 6px 14px; font-weight: 700; cursor: pointer; background: var(--card); font: inherit; color: var(--ink); }
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--pear); color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-contact); }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
label.check input { width: 20px; height: 20px; accent-color: var(--ink); }
select, input[type=number], input[type=datetime-local], textarea {
  font: inherit; padding: 9px 12px; border-radius: var(--radius-input); border: 2px solid var(--line-strong); background: var(--card); color: var(--ink); max-width: 100%;
}
select:focus, input[type=number]:focus, input[type=datetime-local]:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px oklch(66% 0.18 235 / 0.18); }
textarea { width: 100%; min-height: 120px; font-family: var(--mono); font-size: .9rem; }
.mini-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.mini-units button { border: 2px solid var(--line-strong); background: var(--card); border-radius: var(--radius-input); padding: 8px 4px; font: inherit; font-weight: 700; cursor: pointer; font-size: .9rem; color: var(--ink); }
.mini-units button:hover { border-color: var(--ink); }
.mini-units button.open { border-color: var(--ink); background: var(--pear-soft); }
.mini-units button.sel { outline: 3px solid var(--cyan); outline-offset: 1px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: .92rem; }
/* ---- PIN slips: one class per printed page, cut-out cards ---- */
.slip-page { break-after: page; page-break-after: always; padding-top: 6px; }
.slip-page:last-child { break-after: auto; page-break-after: auto; }
.slip-head { font-size: 1.3rem; margin: 6px 0 10px; }
.slip-head small { font-family: var(--mono); font-weight: 500; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-left: 10px; }
.slip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pinslip { border: 1.5px dashed var(--line-strong); border-radius: 8px; padding: 8px 10px; display: grid; gap: 1px; break-inside: avoid; page-break-inside: avoid; min-height: 84px; }
.slip-class { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.slip-name { font-size: 1rem; line-height: 1.15; }
.slip-cname { font-size: .9rem; color: var(--ink-soft); }
.slip-pin { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; letter-spacing: .12em; margin-top: 2px; }
.slip-site { font-size: .72rem; color: var(--muted); }
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; padding: 0; }
  .no-print, header.top, .tabs { display: none !important; }
  .card { box-shadow: none; border: 0; padding: 0; margin: 0; }
  .slips h1 { display: none; }
  .slip-grid { gap: 6px; }
  .pinslip { min-height: 80px; }
}
@media (max-width: 480px) {
  :root { font-size: 16px; }
  header.top { padding: 12px 0 8px; align-items: flex-start; }
  header.top .brand { font-size: .95rem; gap: 10px; }
  header.top .brand .mark { width: 36px; height: 36px; font-size: 15px; border-radius: 10px; }
  header.top .brand small { display: none; }
  .who { font-size: .82rem; max-width: 46%; }
  .card { padding: 16px; border-radius: var(--radius-sm); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  h1 { font-size: 1.4rem; }
}

/* ---- unit editor (Tests tab): one card per concern, switches instead of bare checkboxes ---- */
.eyebrow { margin: 0 0 2px; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ue { margin-top: 6px; }
.ue-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ue-head h2 { margin: 0 0 2px; font-size: 1.45rem; letter-spacing: -0.02em; }
.ue-head .muted { margin: 0; }
.ue-status { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line-strong); border-radius: var(--pill); padding: 6px 12px; color: var(--muted); white-space: nowrap; margin-top: 4px; }
.ue-status.on { background: var(--pear); color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-contact); }
.ue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ue-block { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--card); display: grid; gap: 10px; align-content: start; }
.ue-block h3 { margin: 0; font-size: .95rem; letter-spacing: -0.01em; }
.hint { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.45; }
details.hint summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); }
details.hint[open] summary { margin-bottom: 4px; }
.field { display: grid; grid-template-columns: minmax(96px, max-content) 1fr; align-items: center; gap: 6px 12px; font-weight: 600; font-size: .95rem; }
.field > span:first-child { color: var(--ink-soft); }
.with-unit { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.with-unit input[type=number] { width: 84px; }
.with-unit input[type=datetime-local] { min-width: 0; }
.with-unit em { font-style: normal; font-weight: 500; color: var(--muted); font-size: .85rem; }
.presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.preset { border: 1.5px solid var(--line-strong); background: var(--card); border-radius: var(--pill); padding: 4px 12px; font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.preset:hover { background: var(--pear-soft); border-color: var(--ink); }
.switch { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; cursor: pointer; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch i { position: relative; width: 44px; height: 26px; border-radius: var(--pill); border: 2px solid var(--line-strong); background: var(--paper-2); transition: background 120ms, border-color 120ms; margin-top: 1px; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--card); border: 2px solid var(--line-strong); box-sizing: border-box; transition: transform 120ms var(--ease-press), border-color 120ms; }
.switch input:checked + i { background: var(--pear); border-color: var(--ink); }
.switch input:checked + i::after { transform: translateX(18px); border-color: var(--ink); }
.switch input:focus-visible + i { outline: 3px solid var(--focus); outline-offset: 2px; }
.ue-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 10px; }
@media (max-width: 640px) { .ue-grid { grid-template-columns: 1fr; } .field { grid-template-columns: 1fr; } }
/* Inside the Syllara workspace the page fills the panel instead of sitting in a 760px column. */
html.embed .wrap { max-width: none; }
html.embed .card { border-width: 1.5px; box-shadow: none; }

/* ---- cloze passage (Part K) ---- */
.cloze { border: 2px solid var(--line-strong); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--card); margin: 8px 0 4px; }
.cloze-text { margin: 0 0 10px; font-size: 1.08rem; line-height: 1.7; }
.cloze-text .blank { display: inline-block; min-width: 2.4em; padding: 0 6px; margin: 0 2px; border-bottom: 2px solid var(--ink); font-family: var(--mono); font-weight: 600; font-size: .85em; text-align: center; color: var(--cyan-deep); background: var(--pear-soft); border-radius: 4px 4px 0 0; }
.cloze-bank { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 4px 0 6px; }
.cloze-bank span { border: 1.5px solid var(--line-strong); border-radius: var(--pill); padding: 4px 12px; font-weight: 600; background: var(--paper-2); }
.q-cloze { padding: 8px 0; display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 12px; }
.q-cloze .stem { margin: 0; }
.cloze-pick { font: inherit; font-size: 1rem; padding: 8px 12px; border-radius: var(--radius-input); border: 2px solid var(--line-strong); background: var(--card); color: var(--ink); min-width: 180px; }
.cloze-pick.answered { border-color: var(--ink); background: var(--pear-soft); }
.cloze-pick:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px oklch(66% 0.18 235 / 0.18); }

/* ---- results: class first, then the tests that class has finished ---- */
.res-pick { margin: 12px 0 4px; }
.res-pick h3 { margin: 0 0 6px; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.chip.flat { border-width: 1.5px; font-weight: 600; cursor: default; background: var(--paper-2); }
.unit-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.unit-chip { border: 1.5px solid var(--line-strong); border-radius: var(--radius-input); background: var(--card); padding: 7px 14px; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; line-height: 1.25; }
.unit-chip small { display: block; font-family: var(--mono); font-weight: 500; font-size: .68rem; letter-spacing: .04em; color: var(--muted); margin-top: 2px; }
.unit-chip:hover { border-color: var(--ink); background: var(--pear-soft); }
.unit-chip.on { border-color: var(--ink); background: var(--pear); box-shadow: var(--shadow-contact); }
.unit-chip.on small { color: var(--ink-soft); }
.res-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 10px; }
.res-stats div { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 8px 16px; background: var(--card); min-width: 92px; }
.res-stats b { display: block; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.15; }
.res-stats span { color: var(--muted); font-size: .8rem; }
.res-missing { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--paper-2); margin: 0 0 12px; }
.res-missing h4 { margin: 0 0 8px; font-size: .95rem; }
.res-missing h4 small { font-family: var(--mono); font-weight: 500; font-size: .72rem; color: var(--muted); margin-left: 6px; }

/* ---- students & PINs: class chips with a roster count, import folded away ---- */
.chip small { font-family: var(--mono); font-weight: 500; font-size: .7rem; color: var(--muted); margin-left: 3px; }
.chip.on small { color: var(--ink-soft); }
.chip.empty { opacity: .55; }
.pin-cell b { font-family: var(--mono); font-size: 1.05rem; letter-spacing: .08em; }
.roster-import { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.roster-import summary { cursor: pointer; font-weight: 700; color: var(--ink-soft); }
.roster-import[open] summary { margin-bottom: 8px; }
.roster-import input[type=file] { display: block; margin: 8px 0; }

/* ---- retests ---- */
.attempt { display: block; font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .04em; color: var(--muted); }
.unit.retest { border-color: var(--cyan-deep); background: var(--cyan-soft); }
.unit.retest .u-state { color: var(--cyan-deep); }

/* ---- tablets: no double-tap zoom delay, keep the submit bar above the home bar ---- */
button, .chip, .unit, .cover, .choice, .unit-chip, .preset { touch-action: manipulation; }
.submit-bar { padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
.lock { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
/* iPadOS zooms a focused field whose text is under 16px; every answer box is larger. */
@media (pointer: coarse) {
  .q input[type=text], .cloze-pick, select, input[type=number], input[type=datetime-local], textarea { font-size: max(1rem, 16px); }
  .choice { padding: 14px; }
  .btn { min-height: 48px; }
}