/* learn.kreative.ai: the one stylesheet (Red Pen design, approved by Kay 2026-10-07).
 *
 * The page is a Hong Kong 數學簿: printed questions in 楷體, everything the child
 * does in blue ink, the teacher's marks in red pen, on squared paper.
 *   --blue  is the child's ink: answers, buttons, progress.
 *   --red   is only the teacher's pen: ✓, ✗, comments, the score, the seal.
 *           Never a button.
 * Design reference: docs/redesign/red_pen_proposal.html
 */

:root {
  color-scheme: light;
  /* paper */
  --desk: #FFFFFF;          /* white around the sheet, as on the front page (2026-10-07) */
  --paper: #FFFFFF;
  --sq: #E1ECF0;            /* the 方格 rule */
  --edge: #D3DEE3;
  --edge-strong: #B9C7CE;
  /* inks */
  --print: #22282C;
  --muted: #5A6870;
  --faint: #7F8C93;
  /* Kay 2026-10-07: the inner pages take the front page's black, red and white.
     --blue keeps its name for the interface ink, now black (hover: red); the
     child's own writing (answers typed or picked) keeps the blue as --child. */
  --blue: #000000;
  --blue-dark: #D92619;
  --blue-wash: #F2F2F2;
  --child: #1F57A6;
  --child-wash: #E9F0FA;
  --poster: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --red: #D92619;
  --red-deep: #9E1C12;
  --red-wash: #FCEAE7;
  --red-edge: #F2B8B0;
  /* status, for teacher tools and time limits only */
  --amber-wash: #FDF3DC;
  --amber-ink: #7A4B00;
  --good: #1C7A4E;
  --good-wash: #E6F4EC;
  /* type */
  --kai: "Lexend", "LXGW WenKai TC", "Kaiti TC", "BiauKai", "DFKai-SB", serif;
  --sans: "Lexend", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  /* kept for older inline styles that still name them */
  --ink-900: var(--print); --ink-700: var(--print); --ink-500: var(--muted);
  --ink-400: var(--faint); --ink-300: var(--edge-strong); --ink-200: var(--edge);
  --ink-100: var(--desk); --ink-50: #F4F7F9;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0;   /* square, as on the front page */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--desk); }
body {
  margin: 0;
  background: var(--desk);
  color: var(--print);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
a { color: #000; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--red); }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* squared paper */
.container, .paper, .clinic .wrap {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--sq) 1px, transparent 1px),
    linear-gradient(90deg, var(--sq) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: -1px -1px;
}
.container {
  max-width: 760px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

/* ── worksheet header ── */
.brand-header {
  display: flex; align-items: center; gap: 14px;
  padding: 2px 0 14px; margin-bottom: 20px;
  border-bottom: 1.5px solid var(--print);
}
.brand-logo-wrap { width: 46px; height: 46px; flex-shrink: 0; }
.brand-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-text { flex: 1; min-width: 0; }
.brand-title { font: 700 23px/1.2 var(--kai); color: var(--print); letter-spacing: .02em; }
.brand-subtitle { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.brand-meta { text-align: right; flex-shrink: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.brand-tagline { font-weight: 500; color: var(--print); }
.brand-url { color: var(--faint); }

/* ── sheets laid on the paper ── */
.card {
  background: var(--paper);
  border: 2px solid #000;
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 16px;
}
h1 { font: 900 28px/1.25 var(--poster); color: #000; letter-spacing: .01em; margin-bottom: 6px; }
h2 { font: 600 19px/1.35 var(--sans); color: var(--print); margin-bottom: 12px; }
h3 { font: 600 16px/1.4 var(--sans); color: var(--print); }
.subtitle { color: var(--muted); font-size: 15px; margin-bottom: 18px; }

/* ── buttons: blue ink is the child's (and the user's) action ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px;
  border-radius: 0; border: 2px solid #000;
  font: 600 16px/1.3 var(--sans);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
/* the main action is the front page's red; the rest white with a black rule */
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary:hover { background: #000; border-color: #000; color: #fff; }
.btn-secondary { background: var(--paper); color: #000; border-color: #000; }
.btn-secondary:hover { background: #FFF3A6; color: #000; }
.btn-danger { background: var(--paper); color: var(--red-deep); border-color: var(--red-edge); }
.btn-danger:hover { background: var(--red-wash); color: var(--red-deep); }

/* ── forms ── */
input:not([type]), input[type=text], input[type=password], input[type=number], input[type=search],
input[type=tel], input[type=date], textarea, select {
  width: 100%; padding: 11px 14px;
  border: 2px solid #000; border-radius: 0;
  font: 400 16px/1.4 var(--sans);       /* 16px stops iOS zooming into the field */
  background: var(--paper); color: var(--print);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  border-color: #000; outline: none;
  box-shadow: 0 0 0 3px #FFE94A;
}
label { color: var(--print); }

/* ── badges and alerts ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 0;
  font: 600 13px/1.4 var(--sans); border: 1px solid transparent;
}
.badge-blue   { background: #000; color: #fff; }
.badge-green  { background: var(--paper); color: var(--print); border-color: var(--edge-strong); }
.badge-red    { background: var(--red-wash); color: var(--red-deep); border-color: var(--red-edge); }
.badge-orange { background: var(--amber-wash); color: var(--amber-ink); }
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; margin-bottom: 16px;
  border-radius: var(--radius-md); font-size: 15px; border: 1px solid transparent;
}
.alert-error   { background: var(--red-wash); color: var(--red-deep); border-color: var(--red-edge); }
.alert-success { background: var(--good-wash); color: var(--good); }
.alert-info    { background: #F4F7F9; color: var(--print); border-color: var(--edge); }
.alert-warning { background: var(--amber-wash); color: var(--amber-ink); }

/* ── tables ── */
.results-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.results-table th {
  padding: 10px 12px; text-align: left;
  font: 500 13px/1.3 var(--sans); color: var(--muted);
  border-bottom: 1.5px solid var(--muted); background: transparent;
}
.results-table td { padding: 11px 12px; border-bottom: 1px solid var(--edge); }
.results-table tr:last-child td { border-bottom: none; }

.footer { color: var(--grey, #5B5F66); padding: 18px 0 8px; margin-top: 32px; font-size: 13px; text-align: center; border-top: 2px solid #000; }

/* content protection on quiz pages (page_wrap): faint logo tiles, no selecting */
.watermark {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: url('/static/logo.png') repeat; background-size: 120px; opacity: .025;
}
body.protect { -webkit-user-select: none; user-select: none; }
body.protect input, body.protect textarea { -webkit-user-select: text; user-select: text; }

/* ── questions ── */
.q-number { font: 600 15px/1.4 var(--sans); color: var(--muted); margin-bottom: 8px; }
.q-text { font: 400 22px/1.7 var(--kai); color: var(--print); margin-bottom: 22px; }
.q-figure { text-align: center; margin: 14px 0 22px; padding: 6px; background: var(--paper); border-radius: var(--radius-md); }
.q-figure svg { max-width: 100%; height: auto; }

/* ── one question on the squared paper (quiz.py _question_sheet) ── */
.qbar { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap;
  font: 400 14px/1.45 var(--sans); color: var(--muted); }
.qbar b { font-weight: 600; font-size: 15px; color: var(--print); }
.qbar .tag { margin-left: 8px; padding: 1px 8px; border-radius: 0; background: #000;
  color: #fff; font-size: 12.5px; font-weight: 600; }
.qprog { display: flex; flex-wrap: wrap; gap: 3px; margin: 10px 0 20px; }
.qprog i { width: 14px; height: 14px; border: 1.5px solid var(--edge-strong); border-radius: 0; background: var(--paper); }
.qprog i.now { border-color: var(--red); }
.qprog i.done { background: var(--blue); border-color: var(--blue); }
.qsheet .q-text { font-size: 26px; line-height: 1.6; margin-bottom: 20px; }
.qsheet .q-post { font-size: 22px; margin-top: -4px; }
.opts { display: grid; gap: 10px; }
.optform { margin: 0; }
.option {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center;
  width: 100%; min-height: 62px; padding: 8px 14px 8px 8px; margin: 0;
  border: 2px solid #000; border-radius: 0;
  background: var(--paper); color: var(--print);
  font: 400 22px/1.45 var(--kai); text-align: left; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.option:hover { border-color: var(--red); }
.option .ltr { position: relative; width: 34px; height: 34px; display: grid; place-items: center;
  font: 600 17px/1 var(--sans); color: var(--muted); }
.option .ltr svg { position: absolute; inset: -3px; width: 40px; height: 40px; display: none;
  fill: none; stroke: var(--child); stroke-width: 2.2; stroke-linecap: round; }
.option .ltr svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .3s ease-out forwards; }
.option.chosen { border-color: var(--child); background: var(--child-wash); }
.option.chosen .ltr { color: var(--child); }
.option.chosen .ltr svg { display: block; }
.option .otext { min-width: 0; overflow-wrap: anywhere; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* answering in words or numbers */
.answer-form { display: grid; justify-items: center; gap: 6px; margin-top: 4px; }
.answer-form .submit-btn { min-width: 200px; }
.text-answer-row { display: flex; align-items: center; gap: 10px; width: 100%; margin: 6px 0; }
.text-answer { flex: 1; min-width: 0; font: 500 20px/1.3 "Lexend", var(--sans) !important; color: var(--child) !important; }
.answer-unit { font: 500 19px var(--kai); color: var(--print); }
.part-lab { min-width: 2.4em; font-weight: 600; }
.radio-opts { display: grid; gap: 10px; width: 100%; margin: 6px 0 10px; }
.radio-opt { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 16px;
  border: 2px solid #000; border-radius: 0; background: var(--paper);
  cursor: pointer; font: 400 20px/1.45 var(--kai); }
.radio-opt:hover { border-color: var(--red); }
.radio-opt:has(input:checked) { border-color: var(--child); background: var(--child-wash); color: var(--child); }
.radio-opt input { width: 20px; height: 20px; flex: none; accent-color: var(--child); }

/* the teacher's red pen after a practice answer (quiz.py _pen_feedback) */
.feedback { display: grid; gap: 8px; justify-items: start; margin-top: 2px; }
.given { font: 400 19px/1.5 var(--kai); color: var(--muted); }
.given span { color: var(--child); font-family: "Lexend", var(--kai); font-weight: 500; }
.pen { display: flex; align-items: center; gap: 10px; font: 400 23px/1.5 var(--kai); color: var(--red); }
.pen b { font-weight: 700; }
.pen-mark { width: 38px; height: 38px; flex: none; fill: none; stroke: var(--red); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; }
.pen-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .4s ease-out forwards; }
.pen-mark path + path { animation-delay: .2s; }
.pen-fix { font: 400 22px/1.5 var(--kai); color: var(--red); }
.pen-fix b { font-weight: 700; }
.pen-note { font: 400 18px/1.6 var(--kai); color: var(--print); margin: 0; }
.feedback .next-btn { margin-top: 6px; min-width: 200px; }
.progress { background: var(--edge); border-radius: 0; height: 8px; margin: 14px 0; overflow: hidden; }
.progress-bar { background: var(--blue); height: 8px; transition: width .3s; }

/* answers the child types are written in blue ink */
.frac-input { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.frac-stack { display: inline-flex; flex-direction: column; align-items: center; }
.frac-stack input, input.whole-input, input.simple-input {
  text-align: center; padding: 6px; font: 500 20px/1.3 "Lexend", var(--sans);
  color: var(--child); border: 2px solid #000; border-radius: 0;
  background: var(--paper); outline: none;
}
.frac-stack input { width: 64px; }
input.whole-input { width: 64px; margin-right: 6px; }
input.simple-input { width: 140px; padding: 10px; border-radius: var(--radius-md); }
.frac-stack input:focus, .whole-input:focus, .simple-input:focus, .unit-select:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash);
}
.frac-line { width: 64px; height: 2px; background: var(--print); margin: 3px 0; }
.unit-select { width: auto; padding: 8px 12px; font-size: 16px; border: 1.5px solid var(--edge-strong);
  border-radius: 0; background: var(--paper); margin-left: 8px; }
.answer-row { display: flex; align-items: center; gap: 12px; margin: 20px 0; justify-content: center; flex-wrap: wrap; }
.submit-btn, .next-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 32px; margin-top: 14px;
  border: 0; border-radius: var(--radius-md);
  background: var(--red); color: #fff; font: 600 17px/1.3 var(--sans);
  cursor: pointer; text-decoration: none;
}
.submit-btn:hover, .next-btn:hover { background: #000; color: #fff; text-decoration: none; }

/* marking: the teacher's red pen */
.correct { color: var(--print); font-weight: 600; }
.wrong { color: var(--red); }
.feedback-correct, .feedback-wrong { border-radius: var(--radius-md); padding: 16px; margin-top: 16px; font-family: var(--kai); font-size: 18px; }
.feedback-correct { background: var(--paper); border: 1.5px solid var(--edge-strong); }
.feedback-wrong { background: var(--red-wash); border: 1.5px solid var(--red-edge); }
.result-item { padding: 14px 0; border-bottom: 1px solid var(--edge); }
.result-item:last-child { border-bottom: none; }
.result-q { font: 400 17px/1.6 var(--kai); color: var(--print); margin-bottom: 4px; }
.result-a { font-size: 15px; }
.diagnosis-box { padding: 14px 16px; border-radius: var(--radius-md); margin-bottom: 12px; border: 1px solid transparent; }
.diagnosis-warn { background: var(--paper); border-color: var(--edge); font: 400 16px/1.7 var(--kai); }
.diagnosis-warn > strong:first-child { color: var(--red); font-family: var(--sans); font-weight: 600; }
.diagnosis-ok { background: var(--blue-wash); }

/* stacked fractions: question_generator._FRAC_CSS sets the shape at 0.6em, too small
   for a child to read in an option; body .vf outranks it */
body .vf { font-size: .8em; line-height: 1.12; margin: 0 .14em; font-family: "Lexend", var(--sans); }
body .vfn { border-bottom-width: .085em; padding: 0 .22em .04em; }
body .vfd { padding: .04em .22em 0; }

/* ── phone ── */
@media (max-width: 600px) {
  .container { padding: 14px 16px 40px; border-inline: 0; }
  .card { padding: 18px 16px; }
  .brand-header { gap: 10px; }
  .brand-logo-wrap { width: 38px; height: 38px; }
  .brand-title { font-size: 20px; }
  .brand-meta { display: none; }
  h1 { font-size: 22px; }
  .q-text { font-size: 20px; }
  .qsheet .q-text { font-size: 23px; }
  .option { font-size: 20px; }
  .answer-form .submit-btn, .feedback .next-btn { width: 100%; }
  .feedback { justify-items: stretch; }
  .results-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── the teacher's marking, shared by both reports ── */
.circled { position: relative; padding: 8px 18px; font: 700 36px/1 var(--kai); color: var(--red); white-space: nowrap; font-variant-numeric: tabular-nums; }
.circled .ring { position: absolute; inset: -4px -6px; width: calc(100% + 12px); height: calc(100% + 8px); overflow: visible;
  fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; }
.sqrow { display: flex; flex-wrap: wrap; gap: 3px; }
.sq { width: 18px; height: 18px; display: inline-grid; place-items: center; border: 1.5px solid var(--edge-strong); border-radius: 0; background: var(--paper); }
.sq svg { width: 14px; height: 14px; fill: none; stroke: var(--red); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.sq.x { background: var(--red-wash); border-color: var(--red-edge); }
.sq.off { border-color: var(--edge); background: transparent; }
.seal { width: 64px; height: 64px; flex: none; display: grid; grid-template-areas: "c a" "d b"; place-items: center; padding: 5px;
  background: var(--red); color: #fff; border-radius: 0; font: 700 21px/1 "LXGW WenKai TC", "Kaiti TC", serif;
  box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 4px #fff; transform: rotate(-7deg); animation: stamp .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.seal span:nth-child(1) { grid-area: a; } .seal span:nth-child(2) { grid-area: b; }
.seal span:nth-child(3) { grid-area: c; } .seal span:nth-child(4) { grid-area: d; }
@keyframes stamp { from { transform: rotate(-7deg) scale(1.45); opacity: .25; } to { transform: rotate(-7deg) scale(1); opacity: 1; } }

/* the answer report (quiz.py quiz_report) */
.rp-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-bottom: 14px; }
.rp-top .subtitle { margin-bottom: 10px; }
.rp-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 0; font-size: 15px; }
.rp-meta dt { color: var(--muted); }
.rp-meta dd { margin: 0; }
.rp-top + .sqrow { margin-bottom: 20px; }
.result-a { display: flex; align-items: flex-start; gap: 8px; font: 400 17px/1.6 var(--kai); }
.result-a .mk { flex: none; }
.result-a .mk svg { width: 24px; height: 24px; fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; display: block; margin-top: 2px; }
.given { color: var(--child); }
.err-info { color: var(--muted); font-size: 15px; }
.right-ans { margin: 4px 0 0 32px; font: 400 17px/1.6 var(--kai); color: var(--red); }
.result-a .ans { color: var(--child); min-width: 0; }
.right-inline { display: block; color: var(--red); }
.sect { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 0; background: #000;
  color: #fff; font: 500 12.5px/1.6 var(--sans); vertical-align: middle; }
.expl .otxt:only-child, details.expl > .otxt { margin-top: 6px; color: var(--print); font: 400 16px/1.7 var(--kai); }
.expl { margin-top: 10px; padding: 8px 12px; background: #F7FAFB; border: 1px solid var(--edge); border-radius: var(--radius-md); }
.expl summary { color: var(--blue); font-weight: 500; font-size: 15px; cursor: pointer; padding: 4px 0; }
.expl ul { margin: 6px 0 2px; padding: 0; list-style: none; display: grid; gap: 8px; }
.expl li { padding: 10px 12px; background: var(--paper); border: 1px solid var(--edge); border-radius: 0; }
.expl li.chosen { border-color: var(--child); background: var(--child-wash); }
.expl .ohead { font: 400 16px/1.5 var(--kai); margin-bottom: 6px; }
.expl li.right .ohead { font-weight: 700; }
.expl .rmark { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; color: var(--red); font-size: 14px; font-weight: 600; }
.expl .rmark svg { width: 18px; height: 18px; fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; }
.expl .obody { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.expl .odiag { max-width: 90px; padding: 2px; background: var(--paper); border: 1px solid var(--edge); border-radius: 0; }
.expl .otxt { flex: 1 1 240px; min-width: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.stale-note { margin: 4px 0 18px; padding: 10px 14px; border: 2px solid #000; background: #FFF3A6; font-size: 15px; line-height: 1.6; }
.clinic .stale-note { margin: 4px 24px 18px; }
.rp-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
@media (max-width: 600px) {
  .circled { font-size: 30px; padding: 6px 14px; }
  .rp-top { gap: 10px; }
  .right-ans { margin-left: 0; }
}

/* ── student and parent home pages (dashboards.py) ── */
.kai { font-family: var(--kai); font-weight: 700; letter-spacing: .02em; }
.home-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.home-head h1.kai { font: 900 30px/1.25 var(--poster); }
.home-head .subtitle { margin: 0; }
.home-head .acts { display: flex; gap: 8px; }
.home-head .acts .btn { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.left { margin-left: 8px; font-weight: 600; color: var(--print); }
.left.soon { padding: 1px 10px; border-radius: 0; background: var(--amber-wash); color: var(--amber-ink); }
.due { margin-left: 6px; color: var(--muted); font-size: 14px; }
.topic-list { display: grid; gap: 12px; }
.topic-row { display: flex; justify-content: space-between; align-items: center; gap: 12px 18px; flex-wrap: wrap;
  padding: 16px 18px; background: var(--paper); border: 2px solid #000; }
.topic-row .t { min-width: 0; }
.topic-row h2 { font: 700 21px/1.4 var(--kai); margin: 0; }
.topic-row .en { color: var(--muted); font-size: 13px; }
.topic-row .last { margin-top: 4px; font-size: 14px; color: var(--muted); }
.topic-row .last b { color: var(--red); font-family: var(--kai); font-size: 16px; }
.topic-row .go { display: flex; gap: 8px; flex-wrap: wrap; }
.child { margin-bottom: 26px; }
.child-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.child-head h2 { font-size: 24px; margin: 0; }
.child .card h3 { font: 600 15px/1.4 var(--sans); color: var(--muted); margin: 0 0 8px; }
.child .none { margin: 0; color: var(--muted); font-size: 15px; }
.fix-row { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.fix-row .gap { font: 700 20px/1.5 var(--kai); }
.fix-row .meta { color: var(--muted); font-size: 13px; }
.weekbars { display: block; width: 100%; max-width: 520px; height: auto; overflow: visible; }
.weekbars .grid { stroke: var(--sq); stroke-width: 1; }
.weekbars .base { stroke: var(--muted); stroke-width: 1; }
.weekbars .tick { fill: var(--muted); font: 400 11px var(--sans); }
.weekbars .last { fill: var(--print); font: 600 13px var(--sans); }
.weekbars .bar { fill: var(--blue); }
.weekbars .hit { fill: transparent; }
.weekbars .hit:hover { fill: rgba(31, 87, 166, .06); }
.book { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.book td { padding: 9px 0; border-top: 1px solid var(--edge); vertical-align: middle; }
.book tr:first-child td { border-top: 0; }
.book td.t { font: 400 18px/1.4 var(--kai); }
.book td.s { text-align: right; color: var(--muted); white-space: nowrap; }
.book td.s b { color: var(--print); }
.book td.m { width: 72px; text-align: right; }
.book .tick-mark { width: 24px; height: 24px; vertical-align: middle; fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; }
.book .again { font-size: 14px; color: var(--muted); }
details.all summary { cursor: pointer; color: var(--blue); font-weight: 500; }
details.all[open] summary { margin-bottom: 8px; }
@media (max-width: 600px) {
  .home-head h1.kai { font-size: 26px; }
  .topic-row .go { width: 100%; }
  .topic-row .go .btn { flex: 1; }
}

/* ── teacher pages (step 6) ── */
.overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.overview a { display: grid; gap: 2px; padding: 14px 16px; background: var(--paper); border: 2px solid #000;
  color: var(--print); text-decoration: none; }
.overview a:hover { background: #FFF3A6; }
.overview b { font: 600 28px/1.1 "Lexend", var(--sans); font-variant-numeric: tabular-nums; }
.overview span { color: var(--muted); font-size: 13px; }
.mb-page .container { max-width: 1120px; }
.markbook-wrap { overflow-x: auto; background: var(--paper); border: 2px solid #000; }
.markbook { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.markbook thead th { padding: 10px 8px; font: 500 13px/1.3 var(--sans); color: var(--muted); text-align: center;
  border-bottom: 1.5px solid var(--muted); min-width: 4.8em; vertical-align: bottom; }
.markbook thead th:first-child { text-align: left; padding-left: 16px; }
.markbook tbody th { text-align: left; padding: 8px 12px 8px 16px; font: 400 17px/1.3 var(--kai); white-space: nowrap; border-bottom: 1px solid var(--edge); }
.markbook tbody th a { color: var(--print); }
.markbook tbody th small { display: block; font: 400 12px var(--sans); color: var(--faint); }
.markbook td { text-align: center; height: 48px; padding: 0 8px; border-bottom: 1px solid var(--edge); border-left: 1px solid var(--edge); }
.markbook td a { color: var(--print); text-decoration: none; }
.markbook td.x { background: var(--red-wash); }
.markbook td.x a { font-weight: 600; }
.markbook td.todo { color: var(--faint); }
.markbook td.none { background: repeating-linear-gradient(45deg, transparent 0 6px, #F1F5F7 6px 7px); }
.markbook td.d { white-space: nowrap; color: var(--muted); font-size: 14px; }
.markbook .tick-mark, .mb-key .tick-mark { width: 24px; height: 24px; vertical-align: middle; fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; }
.markbook .muted { color: var(--faint); }
.ring-wrap { position: relative; display: inline-block; padding: 2px 6px; color: var(--print); font-weight: 600; }
.ring-wrap .ring { position: absolute; inset: -5px -8px; width: calc(100% + 16px); height: calc(100% + 10px); overflow: visible;
  fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; }
.mb-key { margin-top: 10px; font-size: 13px; color: var(--muted); }
.mb-key .tick-mark { width: 18px; height: 18px; }
.key-x { padding: 1px 6px; background: var(--red-wash); color: var(--print); font-weight: 600; border-radius: 0; }
@media (max-width: 600px) { .overview b { font-size: 22px; } .overview a { padding: 10px 12px; } }

/* ══════════ front page (landing.py), after dse.kreative.ai's ══════════
   A poster, as on the DSE site: black bands, Noto Sans TC Black headlines with the
   second line in the red pen, square corners and 2px black rules, numbered points
   that are also the way down the page. Inside it, the Red Pen pieces as they are. */
body.front { --ink: #000; --grey: #5B5F66; --hl: #FFE94A; --poster: "Noto Sans TC", "PingFang TC", sans-serif;
  background: var(--paper); color: var(--ink); }
body.front a { color: inherit; }
.f-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: #fff; border-bottom: 2px solid #000; }
.f-in { max-width: 1240px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 18px; }
.f-top .mark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.f-top .mark img { width: 38px; height: 38px; object-fit: contain; }
.f-top .mark b { display: block; font: 600 16px/1.2 var(--sans); }
.f-top .mark small { display: block; font-size: 12.5px; color: var(--grey); }
nav.pub { display: flex; gap: 4px; margin-left: auto; }
nav.pub a { text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 12px; border-bottom: 3px solid transparent; }
nav.pub a:hover { border-bottom-color: var(--red); }
.f-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.front .btn { border-radius: 0; border: 2px solid #000; background: #fff; color: #000; font-weight: 600; padding: 11px 22px; min-height: 0; }
.front .btn:hover { background: #FFF3A6; color: #000; }
.front .btn.ink { background: #000; color: #fff; }
.front .btn.ink:hover { background: var(--red); border-color: var(--red); color: #fff; }
.front .btn.sm { padding: 6px 14px; font-size: 14px; }
.front .btn.lg { font-size: 17px; padding: 14px 30px; }
.front .btn.red { background: var(--red); border-color: var(--red); color: #fff; }
.front .btn.red:hover { background: #fff; border-color: #fff; color: #000; }
.front .btn.ghost { background: transparent; border-color: #fff; color: #fff; }
.front .btn.ghost:hover { background: #fff; color: #000; }
.front .demo-frame .btn-primary { background: #000; border-color: #000; color: #fff; }
.front .demo-frame .btn-primary:hover { background: var(--red); border-color: var(--red); }
.front .pframe .btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.front .poster { font-family: var(--poster); font-weight: 900; line-height: 1.16; letter-spacing: .02em; margin: 0; color: inherit; }
.poster span { display: block; }
.poster .red { color: var(--red); }
.banner .poster { font-size: clamp(38px, 4.8vw, 66px); }
.poster.s { font-size: clamp(30px, 3.6vw, 50px); }
.full { box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); background: var(--bg); }
.banner { --bg: #000; color: #fff; padding: 56px 0 0; }
.b-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 56px; align-items: center; }
.banner .lede { font-size: 19px; line-height: 1.7; max-width: 33em; margin: 24px 0 28px; color: #E2E2E2; }
.front .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.banner .note { font-size: 14px; color: #A8A8A8; margin: 14px 0 0; }
/* the banner's picture: a marked page of a 數學簿 */
.b-page { margin: 0; justify-self: center; width: 100%; max-width: 440px; }
.sheet { position: relative; padding: 22px 26px 26px; transform: rotate(-2.5deg); color: var(--print);
  background-color: #fff; background-image: linear-gradient(var(--sq) 1px, transparent 1px), linear-gradient(90deg, var(--sq) 1px, transparent 1px);
  background-size: 22px 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.sheet .s-top { display: flex; justify-content: space-between; align-items: flex-start; }
.sheet .s-no { font: 600 18px var(--sans); color: var(--muted); }
.sheet .circled { font-size: 30px; padding: 6px 14px; }
.sheet .s-q { font: 400 34px/1.5 var(--kai); margin-top: 6px; }
.sheet .s-a { display: flex; align-items: center; gap: 14px; font: 500 30px/1.5 "Lexend", var(--kai); margin-top: 8px; }
.sheet .blue { color: var(--child); }
.sheet .s-x svg { width: 40px; height: 40px; fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; display: block; }
.sheet .s-fix { font: 400 28px/1.5 var(--kai); color: var(--red); margin-top: 4px; }
.sheet .s-note { font: 400 19px/1.5 var(--kai); color: var(--red); }
.sheet .sqrow { margin-top: 16px; }
.sheet .seal { position: absolute; right: 18px; bottom: 54px; width: 70px; height: 70px; font-size: 23px; }
.points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid #fff; margin-top: 56px; }
.points a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; align-items: baseline;
  padding: 22px 24px 26px 0; text-decoration: none; border-right: 1px solid #4A4A4A; color: #fff; }
.points a + a { padding-left: 24px; }
.points a:last-child { border-right: 0; }
.points b { grid-row: span 2; font: 900 42px/.9 "Lexend", var(--poster); color: var(--red); }
.points .pt { font-weight: 600; font-size: 19px; }
.points .pd { color: #B8B8B8; font-size: 15px; line-height: 1.5; }
.points a:hover .pt { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.front .sec { padding: 80px 0; }
.front .sec .body { font-size: 17px; line-height: 1.75; max-width: 36em; margin: 16px 0 32px; }
.front .sec.ruled { border-top: 2px solid #000; }
.front .sec.black { --bg: #000; color: #fff; }
.front .sec.black .body { color: #D4D4D4; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.front .h3 { font-size: 20px; font-weight: 600; margin: 0 0 12px; }
/* the example question, on its own square-cornered page */
.demo-frame { border: 2px solid #000; padding: 22px 24px; max-width: 760px; background: #fff; }
.demo-frame .demo-q { margin: 0; }
.demo-frame .demo-q .qbar { margin-bottom: 10px; }
.demo-frame .demo-q .q-text { font-size: 30px; line-height: 1.5; margin-bottom: 2px; }
.demo-frame .demo-q .hint { font: 400 16px/1.6 var(--kai); color: var(--muted); margin-bottom: 16px; }
.demo-frame .demo-note { display: grid; gap: 6px; margin-top: 14px; }
.demo-frame .demo-note .kind { font: 500 14px var(--sans); color: var(--muted); }
.demo-frame .demo-note .say { font: 400 20px/1.6 var(--kai); color: var(--red); }
.demo-frame .demo-note .again { justify-self: start; background: none; border: 0; padding: 4px 0; color: var(--blue);
  font: 500 15px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.demo-frame .demo-go { display: flex; width: 100%; margin-top: 16px; border-radius: 0; }
.option.demo { grid-template-columns: 42px minmax(0, 1fr) 38px; }
.option.demo .mk .pen-mark { width: 32px; height: 32px; display: block; }
.option[aria-disabled="true"] { cursor: default; }
.option[aria-disabled="true"]:not(.chosen):hover { border-color: #000; }
/* examples, labelled as examples */
.sample { margin: 0; min-width: 0; }
.sample figcaption { display: flex; align-items: center; gap: 10px; font-size: 14.5px; margin: 0 0 12px; }
.sample .ex { background: var(--red); color: #fff; font-weight: 700; font-size: 13px; padding: 3px 10px; flex: none; }
.sample .frame { border: 2px solid #000; }
.sample .frame .wrap { min-height: 0; border-inline: 0; }
.sec.black .sample figcaption { color: #fff; }
.pframe { border: 2px solid #fff; background: var(--paper); color: var(--print); padding: 20px;
  background-image: linear-gradient(var(--sq) 1px, transparent 1px), linear-gradient(90deg, var(--sq) 1px, transparent 1px); background-size: 20px 20px; }
.pframe .child-head { margin: 0 0 12px; }
.pframe .p-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.pframe .card { margin: 0; }
.pframe .card h3 { font: 600 15px/1.4 var(--sans); color: var(--muted); margin: 0 0 8px; }
.pframe .fix-row .btn { pointer-events: none; }
/* topics */
.seq { list-style: none; margin: 8px 0 30px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; counter-reset: part; }
.seq li { counter-increment: part; display: flex; align-items: center; gap: 9px; font-size: 16px; white-space: nowrap; }
.seq li::before { content: counter(part); flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #000;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.seq li:not(:last-child)::after { content: ""; width: 28px; height: 2px; background: #000; margin: 0 10px; }
.tocs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 40px; align-items: start; }
.toc summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 0 0 10px; border-bottom: 2px solid #000; }
.toc summary::-webkit-details-marker { display: none; }
.toc .th { font-size: 20px; font-weight: 700; }
.toc .tm { font-size: 14px; color: var(--grey); }
.toc .more { font-size: 14px; font-weight: 600; color: var(--red); margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }
.toc[open] .more { display: none; }
.toc ol { margin: 12px 0 0; padding: 0 0 0 2.2em; font: 400 16px/1.5 var(--kai); }
.toc li { padding: 2px 0; }
.toc li::marker { color: var(--grey); font: 400 13px var(--sans); }
.trial { margin-top: 44px; padding-top: 30px; border-top: 1px solid #000; max-width: 640px; }
.trial .row { display: flex; gap: 10px; }
.trial select { flex: 1; border-radius: 0; border: 2px solid #000; }
/* parents: four roles, on black */
.does { list-style: none; margin: 0 0 52px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid #fff; counter-reset: d; }
.does li { counter-increment: d; padding: 22px 22px 6px 0; border-right: 1px solid #444; }
.does li + li { padding-left: 22px; }
.does li:last-child { border-right: 0; }
.does li::before { content: counter(d, decimal-leading-zero); font: 900 40px/1 "Lexend", var(--poster); color: var(--hl); display: block; margin-bottom: 12px; }
.does h3 { font-size: 19px; margin: 0 0 6px; color: #fff; }
.does p { margin: 0; color: #C9C9C9; font-size: 15px; line-height: 1.55; }
.does.light { border-top-color: #000; margin-bottom: 40px; }
.does.light li { border-right-color: #CFCFCF; }
.does.light li::before { color: var(--red); }
.does.light h3 { color: #000; }
.does.light p { color: #3F4247; }
.does.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.front .sec .body.tight { margin: 4px 0 18px; }
.ticks { list-style: none; margin: -8px 0 0; padding: 0; display: grid; gap: 8px; font-size: 16px; }
.ticks li { display: flex; align-items: center; gap: 10px; }
.ticks li::before { content: ""; width: 20px; height: 20px; flex: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 17 C8 19 10 22 12.5 26 C16 16 22 9 29 4' fill='none' stroke='%23D92619' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.front .h3.big { font-size: 24px; font-weight: 700; }
.split.sub, .practice { margin-top: 64px; padding-top: 40px; border-top: 1px solid #000; }
/* unlimited questions: three, generated as the page is drawn */
.fresh-wrap { max-width: 1000px; }
.fresh { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fresh li { border: 2px solid #000; padding: 16px 18px 18px; background-color: #fff;
  background-image: linear-gradient(var(--sq) 1px, transparent 1px), linear-gradient(90deg, var(--sq) 1px, transparent 1px); background-size: 20px 20px; }
.fresh .q-n { display: inline-block; font: 600 13px var(--sans); color: var(--muted); margin-bottom: 6px; }
.fresh .q-text { font: 400 20px/1.65 var(--kai); margin: 0; color: var(--print); }
.closing { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 64px 0; border-top: 2px solid #000; }
.f-foot { max-width: 1240px; margin: 0 auto; padding: 18px 24px 34px; color: var(--grey); font-size: 14px; border-top: 2px solid #000; }
@media (max-width: 980px) {
  nav.pub { display: none; }
  .f-top .btn.sm { margin-left: auto; }
  .b-grid, .split { grid-template-columns: minmax(0, 1fr); }
  .b-page { max-width: 400px; }
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .points a:nth-child(2) { border-right: 0; }
  .points a:nth-child(3) { padding-left: 0; }
  .points a:nth-child(n+3) { border-top: 1px solid #4A4A4A; }
  .does, .does.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .does li:nth-child(2) { border-right: 0; }
  .does li:nth-child(3) { padding-left: 0; }
  .tocs, .pframe .p-grid, .fresh { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .f-wrap { padding: 0 16px; }
  .f-in { padding: 8px 16px; }
  .f-top .mark small { display: none; }
  .banner { padding: 34px 0 30px; }
  .banner .lede { font-size: 17px; }
  .b-page { max-width: 340px; }
  .sheet { padding: 16px 18px 20px; }
  .sheet .s-q { font-size: 28px; }
  .sheet .seal { width: 56px; height: 56px; font-size: 19px; bottom: 46px; }
  .sheet .sq, .sample .sq { width: 15px; height: 15px; }
  .sheet .sq svg, .sample .sq svg { width: 11px; height: 11px; }
  .sheet .sqrow, .sample .sqrow { gap: 2px; }
  .points { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .points a, .points a + a { padding: 16px 0; border-right: 0; border-top: 1px solid #4A4A4A; }
  .points a:first-child { border-top: 0; }
  .points b { font-size: 34px; }
  .front .sec { padding: 52px 0; }
  .demo-frame { padding: 16px 14px; }
  .demo-frame .demo-q .q-text { font-size: 27px; }
  .seq { flex-direction: column; align-items: flex-start; gap: 8px; }
  .seq li::after { display: none; }
  .does, .does.three { grid-template-columns: minmax(0, 1fr); }
  .does li, .does li + li { padding: 18px 0 4px; border-right: 0; }
  .does li + li { border-top: 1px solid #444; }
  .does.light li + li { border-top-color: #CFCFCF; }
  .pframe { padding: 14px 12px; }
  .front .btn.lg { flex: 1 1 auto; text-align: center; justify-content: center; }
}

/* ══════════ diagnosis report and its review sheets (clinic/report.py) ══════════ */
.clinic .wrap { max-width: 760px; margin: 0 auto; min-height: 100vh; overflow-x: clip; }   /* the stamping seal must not widen a phone */
.clinic .hd { padding: 24px 24px 16px; border-bottom: 2px solid #000; }
.clinic .hd h1 { margin: 0; font: 900 28px/1.25 var(--poster); }
.clinic .hd .sub { color: var(--muted); margin-top: 6px; font-size: 14px; }
.clinic .sec { padding: 20px 24px; border-bottom: 1px solid var(--edge); }
.clinic .sec h2 { font: 600 17px/1.4 var(--sans); color: var(--print); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.clinic .msg { color: var(--print); font: 400 17px/1.7 var(--kai); margin: 6px 0 0; }
.clinic .cta { background: var(--paper); border: 1.5px dashed var(--edge-strong); border-radius: var(--radius-lg); padding: 18px; margin-top: 16px; text-align: center; }
.clinic .cta .big { font: 600 18px/1.4 var(--sans); color: var(--print); }
.clinic .cta form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 12px; }
.clinic .cta button { min-height: 46px; background: var(--red); color: #fff; border: 0; border-radius: var(--radius-md); padding: 10px 24px; font: 600 16px var(--sans); cursor: pointer; }
.clinic .cta button:hover { background: #000; }
.clinic .qcard { border: 1px solid var(--edge); border-radius: var(--radius-md); padding: 12px 14px; margin: 8px 0; background: var(--paper); }
.clinic .qstem { font: 400 18px/1.65 var(--kai); margin-bottom: 6px; }
.clinic .qfig { text-align: center; margin: 6px 0; }
.clinic .opt { padding: 4px 10px; border-left: 3px solid var(--edge-strong); margin: 4px 0; font: 400 16px/1.5 var(--kai); }
.clinic .opt.ok { border-left-color: var(--blue); background: var(--blue-wash); }
.clinic .lock { filter: blur(4px); user-select: none; pointer-events: none; }
.clinic .tag { font-size: 12px; color: var(--muted); font-weight: 600; }
/* review sheets (teacher) */
.clinic .qccard { border: 1px solid var(--edge); border-radius: var(--radius-md); padding: 14px 16px; margin: 10px 0; background: var(--paper); }
.clinic .qcopt { padding: 8px 12px; border: 1px solid var(--edge-strong); border-radius: 0; margin: 6px 0; cursor: pointer; font: 400 16px/1.5 var(--kai); }
.clinic .qcopt:hover { background: #F4F7F9; }
.clinic .qcopt.ok { border-color: var(--good); background: var(--good-wash); }
.clinic .qcopt.no { border-color: var(--red-edge); background: var(--red-wash); opacity: .75; }
.clinic .qcopt.sel { box-shadow: 0 0 0 2px var(--blue) inset; font-weight: 700; }
.clinic .qcfb { margin-top: 6px; font-weight: 700; font-size: 15px; }
.clinic .qcfb.good { color: var(--good); }
.clinic .qcfb.bad { color: var(--red); }
.clinic .qcfill { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clinic .qcin { width: 140px; padding: 8px 12px; color: var(--child); }
.clinic .qcfill button { background: var(--blue); color: #fff; border: 0; border-radius: 0; padding: 8px 18px; cursor: pointer; }
.clinic .qcexpl { margin-top: 8px; color: var(--muted); font-size: 14px; border-top: 1px dashed var(--edge); padding-top: 6px; }
.clinic .qcm { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--amber-wash); border-radius: 0; padding: 6px 8px; }
.clinic .qcmi { flex: 1 1 240px; width: auto; padding: 7px 10px; font-size: 15px; min-width: 180px; }
.clinic .qcmbtn { background: var(--blue); color: #fff; border: 0; border-radius: 0; padding: 7px 16px; cursor: pointer; font-size: 14px; }
.clinic .qcmfb { font-size: 14px; font-weight: 700; }
.clinic .qsts { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.clinic .qstl { font-size: 14px; color: var(--muted); }
.clinic .qst { border: 1px solid var(--edge-strong); background: var(--paper); border-radius: 0; padding: 5px 12px; cursor: pointer; font-size: 14px; }
.clinic .qst:hover { background: #F4F7F9; }
.clinic .qst.active.ok { background: var(--good); color: #fff; border-color: var(--good); }
.clinic .qst.active.bad { background: var(--red-deep); color: #fff; border-color: var(--red-deep); }
.clinic .qst.active.pn { background: var(--muted); color: #fff; border-color: var(--muted); }
.clinic .qstfb { font-size: 13px; font-weight: 700; color: var(--good); }
.clinic .qcans { margin-top: 8px; background: var(--good-wash); border: 1px solid #A9D8BE; border-radius: 0; padding: 8px 12px; font-size: 15px; color: #14532d; }
.clinic .qcsol { margin-top: 4px; color: #166534; font-size: 15px; line-height: 1.6; }
/* the diagnosis report (clinic/report.py build_report_html) */
.clinic .rp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 24px 24px 16px; border-bottom: 2px solid #000; }
.clinic .rp-head h1 { margin: 0; font: 900 30px/1.25 var(--poster); letter-spacing: .02em; }
.clinic .rp-head .sub { color: var(--muted); font-size: 14px; line-height: 1.6; margin-top: 8px; }
.clinic .rp-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px 24px 6px; }
.clinic .rp-score p { margin: 0; font: 400 18px/1.6 var(--kai); }
.clinic .sqrow { padding: 12px 24px 20px; }
.clinic .skill { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 8px; padding: 12px 0 4px; }
.clinic .skill + .skill { border-top: 1px dashed var(--edge); }
.clinic .skill .n { font: 600 17px/1.6 var(--sans); color: var(--muted); }
.clinic .skill .name { font: 700 20px/1.5 var(--kai); }
.clinic .skill .kind { font-size: 13px; color: var(--muted); }
.clinic .skill .evrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 4px; }
.clinic .skill .ev { display: flex; flex-wrap: wrap; gap: 3px; }
.clinic .skill .count { font-size: 14px; color: var(--muted); }
.clinic .skill .say { margin: 4px 0 6px; font: 400 18px/1.65 var(--kai); color: var(--red); }
.clinic .ladder { list-style: none; margin: 6px 0 10px; padding: 0 0 0 20px; }
.clinic .ladder li { position: relative; padding: 5px 0; font: 400 19px/1.5 var(--kai); }
.clinic .ladder li small { font: 400 13px var(--sans); color: var(--muted); margin-left: 8px; }
.clinic .ladder li::before { content: ""; position: absolute; left: -19px; top: 14px; width: 10px; height: 10px; z-index: 1;
  border-radius: 50%; background: var(--paper); border: 2px solid var(--muted); }
.clinic .ladder li:not(:last-child)::after { content: ""; position: absolute; left: -13px; top: 21px; bottom: -21px; border-left: 2px solid var(--muted); }
.clinic .ladder li.root { color: var(--red); }
.clinic .ladder li.root::before { border-color: var(--red); background: var(--red); }
.clinic .ladder li.root .say { display: block; font-size: 16px; }
.clinic .urgency { margin: 10px 0 0; padding: 10px 14px; border-radius: var(--radius-md); background: var(--amber-wash); color: var(--amber-ink); font-size: 15px; line-height: 1.65; }
.clinic .more { margin: 12px 0 0; font: 400 16px/1.6 var(--kai); color: var(--print); text-align: center; }
.clinic .rp-foot { display: flex; justify-content: center; gap: 24px; padding: 18px 24px 28px; font-size: 15px; }
.clinic .rp-foot a { color: var(--muted); }
@media (max-width: 600px) {
  .clinic .wrap { border-inline: 0; }
  .clinic .hd, .clinic .sec, .clinic .rp-head, .clinic .rp-score, .clinic .sqrow { padding-left: 16px; padding-right: 16px; }
  .clinic .rp-score { gap: 16px; }
  .clinic .cta form { grid-template-columns: 1fr; }
}

/* ══════════ paper builder (paper_builder.py, teacher) ══════════ */
.pb-page .container { max-width: 1240px; }
.pb-wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .pb-wrap { grid-template-columns: minmax(0, 1fr); } }
.pb-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  padding: 12px 16px; border-radius: var(--radius-lg); background: var(--paper); border: 1.5px solid var(--edge-strong); margin-bottom: 14px; }
.pb-bar .sum { font-size: 15px; color: var(--muted); }
.pb-total { margin-left: auto; font-weight: 700; font-size: 18px; padding: 6px 14px; border-radius: 0; background: var(--amber-wash); color: var(--amber-ink); font-variant-numeric: tabular-nums; }
.pb-total.ok { background: var(--good-wash); color: var(--good); }
.pb-total.hit { background: var(--good); color: #fff; }
.pb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }   /* 六部：窄螢幕換行，唔好撐闊頁面 */
.pb-tab { flex: 1 1 auto; padding: 10px; border: 1.5px solid var(--edge-strong); border-radius: var(--radius-md); background: var(--paper); cursor: pointer; font: 600 15px var(--sans); color: var(--muted); }
.pb-tab.on { border-color: #000; background: #000; color: #fff; }
.pb-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.pb-filters select, .pb-filters input[type=search] { width: auto; padding: 8px; font-size: 15px; max-width: 100%; }
.pb-filters label { font-size: 14px; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.pb-hint { font-size: 13px; color: var(--muted); margin: -4px 0 8px; }
.pb-list { max-height: 70vh; overflow-y: auto; border: 1px solid var(--edge); border-radius: var(--radius-md); background: var(--paper); }
.pb-row { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--edge); align-items: flex-start; }
.pb-row.sel { background: var(--blue-wash); }
.pb-row .meta { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 3px; }
.pb-row code { font-size: 1em; color: var(--print); background: #EEF3F5; padding: 1px 6px; border-radius: 0; }
.pb-row .t { font: 400 15px/1.5 var(--kai); color: var(--print); overflow-wrap: anywhere; }
.pb-row .a { font-size: 13px; color: var(--good); margin-top: 2px; }
.pb-row .body { flex: 1; min-width: 0; }
.pb-add { flex: none; padding: 6px 12px; border-radius: 0; border: 1.5px solid var(--blue); background: var(--paper); color: var(--blue); font-weight: 600; cursor: pointer; font-size: 14px; }
.pb-row.sel .pb-add { background: var(--blue); border-color: var(--blue); color: #fff; }
.pb-pv { font-size: 13px; color: var(--blue); cursor: pointer; background: none; border: none; padding: 0; text-decoration: underline; }
.pb-prev { margin-top: 8px; padding: 10px; border: 1px dashed var(--edge-strong); border-radius: 0; background: var(--paper); font: 400 15px/1.6 var(--kai); }
.pb-prev svg { max-width: 100%; height: auto; max-height: 320px; }
.pb-prev .pv-opt.ok { color: var(--good); font-weight: 700; }
.tier { font-weight: 700; padding: 0 6px; border-radius: 0; background: #EEF3F5; color: var(--muted); }
.tier.t3, .tier.t4 { background: var(--amber-wash); color: var(--amber-ink); }
.pb-paper h3 { margin: 14px 0 6px; font-size: 16px; color: var(--print); }
.pb-item { display: flex; gap: 6px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--edge); font-size: 14px; }
.pb-item .n { width: 26px; color: var(--muted); text-align: right; flex: none; }
.pb-item .q { flex: 1; min-width: 0; }
.pb-item .q .qt { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.pb-item input { width: 56px; padding: 4px; text-align: center; }
.pb-item button { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 1em; padding: 2px 4px; }
.pb-empty { color: var(--faint); font-size: 14px; padding: 8px 4px; }
.pb-form label { display: block; font-size: 14px; font-weight: 600; color: var(--muted); margin: 10px 0 4px; }
.pb-student select { max-width: 420px; }
.pb-student h3 { margin: 14px 0 6px; font-size: 16px; color: var(--print); }
.pb-h { padding: 8px 0; border-bottom: 1px solid var(--edge); font-size: 14px; }
.pb-h .src { color: var(--muted); font-size: 13px; }
.pb-h .t { color: var(--print); margin: 2px 0 4px; overflow-wrap: anywhere; font-family: var(--kai); }
.pb-h .sg { color: var(--good); }
.pb-chip { margin: 2px 4px 2px 0; padding: 3px 8px; border-radius: 0; border: 1.5px solid var(--blue); background: var(--paper); color: var(--blue); font: 500 13px var(--sans); cursor: pointer; }
.pb-chip.on { background: var(--blue); color: #fff; }
.pb-grades { display: flex; gap: 6px; margin: 10px 0 2px; }
.pb-grade { padding: 6px 18px; border: 1.5px solid #000; color: #000; font-weight: 600; text-decoration: none; }
.pb-grade:hover { background: #FFF3A6; color: #000; }
.pb-grade.on { background: #000; color: #fff; }
/* 按考試範圍自動配卷 (paper_auto.py) */
.pb-auto h2 { margin-bottom: 6px; }
.pb-scope { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; margin: 8px 0 4px; }
.pb-scope label { display: flex; gap: 8px; align-items: center; padding: 6px 0; font-size: 15px; color: var(--print); cursor: pointer; }
.pb-scope input { width: 18px; height: 18px; flex: none; accent-color: var(--red); }
.pb-scope .c { margin-left: auto; font-size: 12.5px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pb-lower { margin: 4px 0 8px; }
.pb-lower summary { cursor: pointer; padding: 6px 0; font-size: 15px; font-weight: 600; color: var(--print); }
.pb-lower-g { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--muted); }
.pb-auto-tools { display: flex; gap: 14px; margin-bottom: 8px; }
.pb-auto-tools button { background: none; border: none; padding: 0; font-size: 14px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.pb-auto-row { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin: 8px 0; font-size: 15px; color: var(--print); }
.pb-auto-row input[type=number] { width: 64px; padding: 6px; text-align: center; }
.pb-auto-row .lv { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.pb-auto-row .lv input { width: 18px; height: 18px; accent-color: var(--red); }
.pb-auto-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.pb-auto-out p { margin: 8px 0 0; font-size: 14px; }
.pb-auto-out .done { color: var(--good); font-weight: 600; }
.pb-auto-out .note { color: var(--amber-ink); }
code.bad, .bdg.bad { background: var(--red-wash); color: var(--red-deep); }
.bdg { font-size: 13px; padding: 0 6px; border-radius: 0; font-weight: 700; }
.bdg.done { background: #EEF3F5; color: var(--muted); }
.mk-row { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--edge); cursor: pointer; font-size: 15px; }
.mk-row input { width: 20px; height: 20px; flex: none; }
.mk-row .n { width: 28px; color: var(--muted); text-align: right; flex: none; }
.mk-row .q { flex: 1; min-width: 0; color: var(--print); overflow-wrap: anywhere; font-family: var(--kai); }
.mk-row .m { white-space: nowrap; color: var(--muted); }
.mk-row:has(input:checked) { background: var(--red-wash); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .option .ltr svg path, .pen-mark path { animation: none; stroke-dashoffset: 0; }
  .seal { animation: none; }
}