/* mcmc.css — the whole stylesheet for the static web tier. No framework, no external font, no
   inline style anywhere (the CSP is style-src 'self'). Light, system fonts.

   Palette (operator, 2026-09-30): Dutch Orange #ff5400, tint #ffa559, ink blue #0b5369,
   cobalt #2d6cdf, chambray/mist #cbd5e1. Roles:
     page     warm paper #f6f3ee (low glare), cards #fffdf9 on it
     text     ink blue (7.7:1 on the page)       lines   mist
     actions  cobalt: white on #2d6cdf is 4.9:1 (white on Dutch Orange is only 3.2:1, too low
              for button labels), so orange is the brand accent, not the button fill
     accent   Dutch Orange: current step, selected tab, focus ring, QR frame, drop targets;
              --dutch-deep #b83d00 where orange carries text or white text (5.7:1)
   The sign-in pages (/, /signin/, /join/) and the panels inside Mooncake Chat take LibreChat's look
   instead: html.lc and html.embed below. */
:root {
  --dutch: #ff5400; --dutch-tint: #ffa559; --dutch-deep: #b83d00; --dutch-wash: #fff1e6;
  --ink: #0b5369; --ink-2: #34596a; --mute: #4b6475; --line: #cbd5e1;
  --page: #f6f3ee; --bg: #fffdf9; --panel: #faf7f1;
  --tg: #2d6cdf; --tg-2: #2459b8; --blue-wash: #e9f0fc;
  --ok: #15803d; --warn: #b45309; --err: #b91c1c;
}
/* Inter, LibreChat's font, as Mooncake Chat ships it (client/public/fonts of LibreChat 0.8.7, version 4.000;
   SIL Open Font License 1.1, its notice in each file's metadata). 400 and 600, as the chat has. */
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: inherit; }
.page { max-width: 40rem; margin: 0 auto; padding: 1.5rem; }
.page-wide { max-width: 52rem; }
/* the signed-in app page and the sign-in pages (/, /signin/, /join/): 80% of the window on desktop, full width on small screens */
.page-app, .page-login { max-width: none; width: 80%; }
@media (max-width: 60rem) { .page-app, .page-login { width: auto; } }
.masthead h1 { font-size: 2rem; font-weight: 600; margin: 0 0 .5rem; letter-spacing: -.01em; }
.lede { margin: .25rem 0; color: var(--ink-2); }
.card { margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--bg); }
.card h2 { font-size: 1.15rem; font-weight: 500; margin: 0 0 .5rem; }
.steps { margin: .75rem 0 0; padding-left: 1.25rem; color: var(--ink-2); }
.steps li + li { margin-top: .25rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; }
.qr-stage { margin-top: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.qr-link { display: inline-block; line-height: 0; }
.qr { width: 256px; height: 256px; padding: .25rem; border: 4px solid var(--dutch); border-radius: .9rem; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.qr-login { width: 171px; height: 171px; }  /* the sign-in pages' codes: two-thirds of 256px */
.status { margin: 0; color: var(--mute); text-align: center; }
.status-warn { color: var(--warn); }
.status-error { color: var(--err); }
.status-ok { color: var(--ok); }
.muted { color: var(--mute); font-size: .9rem; }
.btn { appearance: none; cursor: pointer; font: inherit; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--bg); color: var(--ink); text-decoration: none; }
.btn:hover { background: var(--panel); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-telegram { background: var(--tg); border-color: var(--tg); color: #fff; font-weight: 500; }
.btn-telegram:hover { background: var(--tg-2); }
.btn-danger { color: var(--err); }
.foot { margin-top: 2rem; font-size: .9rem; color: var(--mute); }
.foot nav a { text-decoration: underline; }
.foot p { margin: .25rem 0 0; }

/* legal page */
.legal article { line-height: 1.65; }
.legal h1 { font-size: 1.9rem; font-weight: 600; }
.legal h2 { font-size: 1.45rem; font-weight: 600; margin-top: 2.5rem; scroll-margin-top: 1rem; }
.legal h3 { font-size: 1.1rem; font-weight: 500; margin-top: 1.5rem; scroll-margin-top: 1rem; }
.legal table { border-collapse: collapse; font-size: .9rem; display: block; overflow-x: auto; }
.legal th, .legal td { border: 1px solid var(--line); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.legal .missing { padding: 1rem; border: 1px solid var(--warn); border-radius: .6rem; color: var(--warn); }
.back { font-size: .9rem; }
.back a { text-decoration: underline; }

/* app landing page */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.grid .card { margin-top: 0; }
dl.facts { margin: .5rem 0 0; display: grid; grid-template-columns: max-content 1fr; column-gap: 1rem; row-gap: .25rem; }
dl.facts dt { color: var(--mute); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.notice { margin: .75rem 0 0; padding: .6rem .8rem; border-radius: .6rem; border: 1px solid var(--line); background: var(--panel); font-size: .95rem; }
.notice-warn { border-color: #fcd34d; background: #fffbeb; color: #78350f; }
.notice-error { border-color: #fca5a5; background: #fef2f2; color: #7f1d1d; }
.notice-ok { border-color: #86efac; background: #f0fdf4; color: #14532d; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.75rem; letter-spacing: .25em; }
.topbar { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.topbar h1 { margin: 0; font-size: 1.6rem; font-weight: 600; }
[hidden] { display: none !important; }

/* AI tier chooser on the landing page */
.tier-form { margin-top: .75rem; }
.tier-form fieldset { border: 1px solid var(--line); border-radius: .6rem; padding: .6rem .8rem; }
.tier-form legend { padding: 0 .3rem; color: var(--ink-2); font-size: .9rem; }
.tier-form label { display: block; padding: .25rem 0; }
.tier-form label.disabled { opacity: .55; }
.tier-form input { margin-right: .4rem; }

/* app page: header with the person's name, a section menu, sign out; one section at a time */
.topbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 3px solid var(--dutch); }
.topbar h1 { margin: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; }
.who { margin: .15rem 0 0; color: var(--mute); font-size: .95rem; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.menu-label { color: var(--mute); font-size: .9rem; }
.menu-select { font: inherit; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--bg); color: var(--ink); min-width: 12rem; }
.sections { margin-top: 1.5rem; }
.sections .card { margin-top: 0; }
.sections .card[hidden] { display: none; }
.form .field { display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr; gap: .5rem 1rem; align-items: center; margin-top: .6rem; }
.form .field label { color: var(--ink-2); }
.form input[type="text"], .form input[type="number"] { font: inherit; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--bg); color: var(--ink); width: 100%; }
.form input:focus { outline: 2px solid var(--dutch); outline-offset: 1px; }
.check { display: flex; gap: .6rem; align-items: flex-start; margin-top: .75rem; }
.check input { margin-top: .3rem; }
.ack { margin-top: 1.5rem; padding: 1rem 1.1rem; border: 1px solid #fcd34d; border-radius: .9rem; background: #fffbeb; color: #78350f; }
.ack h3 { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 600; }
.ack p { margin: .25rem 0; }
.ack .btn { background: #fff; }
.ack.acked { border-color: #86efac; background: #f0fdf4; color: #14532d; }
@media (max-width: 40rem) { .form .field { grid-template-columns: 1fr; gap: .2rem; } }

.subsection { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.subsection h3 { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 600; }
.links a { text-decoration: underline; }
.form input[type="email"] { font: inherit; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--bg); color: var(--ink); width: 100%; }

/* tabs inside the Account page */
.tabs { display: flex; gap: .25rem; margin: .75rem 0 1rem; border-bottom: 1px solid var(--line); }
.tab { appearance: none; cursor: pointer; font: inherit; padding: .5rem .9rem; border: 1px solid transparent; border-bottom: none; border-radius: .6rem .6rem 0 0; background: transparent; color: var(--ink-2); margin-bottom: -1px; }
.tab[aria-selected="true"] { border-color: var(--line); background: var(--bg); color: var(--ink); font-weight: 600; box-shadow: inset 0 3px 0 var(--dutch); }
.tabpanel[hidden] { display: none; }

/* Exam Buster */
.steps-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem; margin: 1rem 0; }
.step { padding: .6rem .7rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--panel); font-size: .9rem; }
.step .n { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--line); color: var(--ink); text-align: center; line-height: 1.5rem; font-weight: 600; margin-right: .4rem; }
.step.current { border-color: var(--dutch); background: var(--dutch-wash); }
.step.current .n { background: var(--dutch-deep); color: #fff; }
.step.done .n { background: var(--ok); color: #fff; }
.step h4 { margin: 0 0 .2rem; font-size: .95rem; font-weight: 600; }
.step p { margin: 0; color: var(--ink-2); }
.thumbs { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .6rem; }
.thumbs li { border: 1px solid var(--line); border-radius: .6rem; padding: .35rem; background: var(--bg); font-size: .8rem; color: var(--mute); text-align: center; }
.thumbs img { width: 100%; height: 6rem; object-fit: cover; border-radius: .4rem; display: block; margin-bottom: .25rem; }
.thumbs .pdf { display: flex; align-items: center; justify-content: center; height: 6rem; background: var(--panel); border-radius: .4rem; margin-bottom: .25rem; font-weight: 600; color: var(--ink-2); }
.table { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: .95rem; }
.table th, .table td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--mute); font-weight: 500; }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 1rem; font-size: .8rem; background: var(--panel); border: 1px solid var(--line); }
.badge-captured { color: var(--ink-2); } .badge-submitted, .badge-analysing { color: var(--tg-2); border-color: var(--tg); background: var(--blue-wash); }
.badge-analysed, .badge-planned { color: var(--ok); border-color: #86efac; background: #f0fdf4; } .badge-failed { color: var(--err); border-color: #fca5a5; background: #fef2f2; }
.link-btn { appearance: none; background: none; border: none; padding: 0; font: inherit; color: var(--tg-2); text-decoration: underline; cursor: pointer; }
input[type="file"] { font: inherit; }

/* Exam Buster capture panel: QR left, picker right, then progress and the ordered page list */
.capture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }   /* each box half the width */
.capture-qr, .capture-drop { border: 1px solid var(--line); border-radius: .9rem; padding: 1rem; background: var(--bg); }
.capture-qr { display: flex; align-items: center; gap: 1rem; }
.capture-qr .qr-small { flex: none; }
.capture-qr-code { flex: none; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.capture-qr-text { min-width: 0; }
.capture-qr-text p { margin: .3rem 0; }
.capture-qr h4, .capture-drop h4 { margin: 0 0 .5rem; font-size: .95rem; font-weight: 600; }
.qr-small { width: 200px; height: 200px; }
.capture-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .5rem; border-style: dashed; border-width: 2px; min-height: 14rem; }
.capture-drop.over { border-color: var(--dutch); background: var(--dutch-wash); }
.capture-drop p { margin: 0; }
#exam-progress-box { margin-top: 1rem; }
#exam-progress { width: 100%; height: .8rem; }
.page-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.page-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; border: 1px solid var(--line); border-radius: .6rem; margin-top: .4rem; background: var(--bg); }
.page-row.dragging { opacity: .45; }
.page-row.drop-before { box-shadow: 0 -3px 0 var(--dutch); }
.page-row.drop-after { box-shadow: 0 3px 0 var(--dutch); }
.page-row .handle { cursor: grab; color: var(--mute); user-select: none; padding: 0 .2rem; font-size: 1.1rem; line-height: 1; }
.page-row .thumb { width: 3.2rem; height: 3.2rem; object-fit: cover; border-radius: .35rem; border: 1px solid var(--line); background: var(--panel); flex: none; }
.page-row .thumb.pdf { display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; color: var(--ink-2); }
.page-row .pinfo { flex: 1; min-width: 0; }
.page-row .pname { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-row .pmeta { font-size: .8rem; color: var(--mute); }
.page-row progress { width: 100%; height: .5rem; }
.page-row.pending { border-style: dashed; }
.page-row.failed { border-color: #fca5a5; background: #fef2f2; }
.icon-btn { appearance: none; cursor: pointer; font: inherit; line-height: 1; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: .45rem; background: var(--bg); color: var(--ink-2); }
.icon-btn:hover { background: var(--panel); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn.del { color: var(--err); }
@media (max-width: 40rem) { .capture-grid { grid-template-columns: 1fr; } }

/* Exam Buster: steps as tabs, the selected step's text below; subject + Start capture on one line */
.step-tabs { flex-wrap: wrap; margin-top: 1.25rem; }
.step-tabs .tab .n { display: inline-block; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--line); color: var(--ink); text-align: center; line-height: 1.4rem; font-size: .8rem; font-weight: 600; margin-right: .4rem; }
.step-tabs .tab.current .n { background: var(--dutch-deep); color: #fff; }
.step-tabs .tab.done .n { background: var(--ok); color: #fff; }
.step-panel { padding: 0; margin-bottom: .75rem; }
.step-panel { color: var(--ink-2); }
.step-panel strong { color: var(--ink); font-weight: 600; }
.inline-form { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.inline-form label { color: var(--ink-2); flex: none; }
.inline-form input { flex: 1; min-width: 0; font: inherit; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--bg); color: var(--ink); }
.inline-form input:focus { outline: 2px solid var(--dutch); outline-offset: 1px; }
.inline-form .btn { flex: none; }
.row-actions { display: flex; gap: .4rem; justify-content: flex-end; white-space: nowrap; }
.btn-small { padding: .3rem .7rem; font-size: .9rem; }

/* the capture header: title, start time, state and folder on one line (wraps on narrow screens) */
.capture-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; }
.capture-head h3 { margin: 0; }

.view-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.view-head h3 { margin: 0; }
#exam-form { margin: .75rem 0 .25rem; }
.step-tabs .tab[aria-disabled="true"] { opacity: .45; cursor: default; }

/* ── Exam Buster phone upload screen (m/) ── */
.mobile h1 { font-size: 1.3rem; margin: 0 0 .75rem; }
.mobile-project { margin: .25rem 0; }
.mobile-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1rem 0; }
.mobile-actions .btn { flex: 1 1 10rem; text-align: center; padding: .9rem 1rem; }
.mobile-list { list-style: none; padding: 0; margin: 0; }
.mobile-item { display: grid; grid-template-columns: 3.5rem 1fr; grid-template-rows: auto auto auto; column-gap: .75rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--line); }
.mobile-thumb { grid-row: 1 / span 3; width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: .4rem; background: var(--panel); }
.mobile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-item progress { width: 100%; }
.mobile-ok .muted { color: var(--ok); }
.mobile-bad .muted { color: var(--err); }

/* ── Exam Buster step 2: the three readings ── */
.engine-tabs .tab .tab-state { margin-left: .4rem; font-size: .75rem; color: var(--mute); font-weight: 400; }
.engine-tabs .tab.st-done .tab-state { color: var(--ok); }
.engine-tabs .tab.st-failed .tab-state { color: var(--err); }
.read-bar { display: flex; align-items: center; gap: .6rem; margin: .5rem 0; flex-wrap: wrap; }
.read-bar select { font: inherit; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--bg); color: var(--ink); }
#exam-read-status { text-align: left; }
#exam-read-progress { width: 100%; margin: .5rem 0; }
.read-summary { margin: .75rem 0; padding: .6rem .8rem; border-left: 3px solid var(--dutch); background: var(--panel); }
.table-wrap { overflow-x: auto; }
.read-table { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .92rem; }
.read-table th, .read-table td { text-align: left; vertical-align: top; padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
.read-table th { font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.read-table td.num, .read-table td.marks { white-space: nowrap; }
.read-table .correct-answer { display: block; margin-top: .25rem; color: var(--mute); font-size: .85rem; }
.verdict { display: inline-block; padding: .05rem .5rem; border-radius: 1rem; font-size: .8rem; border: 1px solid var(--line); white-space: nowrap; }
.verdict-correct { color: var(--ok); border-color: #86efac; background: #f0fdf4; }
.verdict-partly { color: #92400e; border-color: #fcd34d; background: #fffbeb; }
.verdict-incorrect { color: var(--err); border-color: #fca5a5; background: #fef2f2; }
.verdict-unanswered, .verdict-unclear { color: var(--mute); }
#exam-read-pages summary { cursor: pointer; margin: .5rem 0; }
.read-page h5 { margin: .75rem 0 .25rem; font-size: .9rem; }
.read-text { white-space: pre-wrap; word-break: break-word; background: var(--panel); border: 1px solid var(--line); border-radius: .5rem; padding: .6rem .75rem; font-size: .85rem; max-height: 24rem; overflow: auto; margin: 0; }
.read-page .page-error { color: var(--err); font-size: .9rem; }
.read-table.editing td { padding: .3rem .25rem; }
.read-table.editing input, .read-table.editing textarea, .read-table.editing select, .read-summary-edit {
  width: 100%; box-sizing: border-box; font: inherit; font-size: .9rem; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--bg); color: var(--ink); }
.read-table.editing textarea { resize: vertical; min-height: 2.4rem; }
.read-table.editing td.num input, .read-table.editing td.marks input { width: 4.5rem; }
.read-table.editing .correct-answer-edit { margin-top: .3rem; }
.read-summary-edit { margin: .75rem 0; }
.read-edited { color: var(--mute); font-size: .85rem; }

/* brand touches: keyboard focus in the accent everywhere; the page title in ink blue */
.btn:focus-visible, .tab:focus-visible, .icon-btn:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--dutch); outline-offset: 2px; }
.masthead h1 { color: var(--ink); }
.masthead h1::after { content: ""; display: block; width: 3rem; height: 3px; margin-top: .4rem; background: var(--dutch); border-radius: 2px; }
/* step 1: the Upload button at the right end of the header line shows or hides the two boxes */
.capture-head .head-action { margin-left: auto; }
.capture-head .head-action[aria-expanded="true"] { background: var(--tg); border-color: var(--tg); color: #fff; }
/* a section heading with an icon on its left and a divider below it (Exam Buster) */
.card h2.section-title { display: flex; align-items: center; gap: .5rem; margin: 0; }
.section-icon { font-size: 1.35rem; line-height: 1; }

/* ── full-resolution page viewer (mcmc-viewer.js) ── */
.page-row .thumb[role="button"] { cursor: zoom-in; }
.page-row .thumb[role="button"]:focus-visible { outline: 2px solid var(--dutch); outline-offset: 2px; }
html.viewer-open, html.viewer-open body { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: #0b1e28; color: #fff; }
.viewer[hidden] { display: none; }
.viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .75rem; border-bottom: 3px solid var(--dutch); background: #07151c; }
.viewer-title { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-tools { display: flex; align-items: center; gap: .35rem; flex: none; }
.viewer-btn { appearance: none; cursor: pointer; font: inherit; min-width: 2.2rem; padding: .3rem .6rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: .5rem; background: transparent; color: #fff; }
.viewer-btn:hover { background: rgba(255, 255, 255, .12); }
.viewer-btn:disabled { opacity: .35; cursor: default; }
.viewer-btn:focus-visible { outline: 2px solid var(--dutch-tint); outline-offset: 2px; }
.viewer-zoom { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; font-size: .9rem; }
.viewer-stage { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; }
.viewer.grabbing .viewer-stage { cursor: grabbing; }
.viewer-img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.page-tabs .tab { font-size: .9rem; padding: .35rem .75rem; }
#exam-read-raw[aria-pressed="true"] { background: var(--tg); border-color: var(--tg); color: #fff; }

/* ── Exam Buster heading row: title, then the steps as links with | between them; divider below ── */
.section-head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.25rem; padding-bottom: .6rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line); }
.step-nav { display: flex; flex-wrap: wrap; align-items: center; }
.step-nav .tab { appearance: none; border: 0; background: none; padding: .2rem .45rem; margin: 0; font: inherit; font-size: .95rem; color: var(--ink-2); cursor: pointer; border-radius: .4rem; box-shadow: none; }
.step-nav .tab + .tab::before { content: "|"; color: var(--line); margin-right: .7rem; font-weight: 400; display: inline-block; text-decoration: none; }
.step-nav .tab[aria-selected="true"] { color: var(--ink); font-weight: 600; text-decoration: underline 2px var(--dutch); text-underline-offset: .35rem; }
.step-nav .tab[aria-disabled="true"] { opacity: .45; cursor: default; }
.step-nav .tab .n { display: inline-block; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--line); color: var(--ink); text-align: center; line-height: 1.3rem; font-size: .75rem; font-weight: 600; margin-right: .3rem; text-decoration: none; }
.step-nav .tab.current .n { background: var(--dutch-deep); color: #fff; }
.step-nav .tab.done .n { background: var(--ok); color: #fff; }

/* ── step 2: toolbar line, then the page image beside its parsed questions ── */
.read-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .6rem; margin: .25rem 0 .75rem; }
.read-toolbar .page-tabs { margin: 0; border-bottom: 0; }
.read-toolbar select { font: inherit; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--bg); color: var(--ink); }
.read-status { text-align: left; font-size: .92rem; }
.read-folder { margin-left: auto; }
.read-page-view { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 1rem; align-items: start; }   /* the page image at most 250px wide (operator 2026-10-08); the viewer shows it full size */
.read-page-img img { width: 100%; max-width: 250px; height: auto; border: 1px solid var(--line); border-radius: .5rem; background: var(--panel); cursor: zoom-in; }
.read-qs { list-style: none; margin: 0; padding: 0; }
.read-q { border: 1px solid var(--line); border-radius: .6rem; padding: .6rem .75rem; margin-bottom: .6rem; background: var(--bg); }
.read-q-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 600; }
.read-q-head .marks { font-weight: 500; color: var(--ink-2); }
.read-q-head .spans { font-weight: 400; font-size: .82rem; }
.read-q p { margin: .3rem 0 0; }
.read-q .label { color: var(--mute); font-size: .85rem; margin-right: .3rem; }
.read-q .correct-answer { display: block; margin-top: .3rem; color: var(--mute); font-size: .88rem; }
.read-page-body .read-text { max-height: none; }
@media (max-width: 60rem) { .read-page-view { grid-template-columns: 1fr; } .read-folder { margin-left: 0; } }
.section-head .step-lock { flex: none; font-size: .88rem; color: var(--warn); }
.section-head .ai-notice { flex: 1 1 12rem; min-width: 0; margin: 0; font-size: calc(.85rem + 1pt); font-style: italic; color: var(--dutch-deep); line-height: 1.35; text-align: right; }   /* orange (the AA-safe shade), italic, 1pt bigger */   /* right end of the Exam Buster line */
@media (min-width: 60rem) { .section-head { flex-wrap: nowrap; } .section-head .step-nav { flex: none; } .section-head .ai-notice { flex: 1 1 0; } }

/* question head on one line: Q1 | 1/1 | correct | Define climate. */
.read-q-head { flex-wrap: wrap; }
.read-q-head .sep { color: var(--line); font-weight: 400; }
.read-q-head .qtext { font-weight: 500; color: var(--ink); }
.read-q .q-eval { margin: .5rem 0 0; }
/* step 3: questions on the left, status and summary on the right */
.eval-view:not([hidden]) { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.eval-side { position: sticky; top: 1rem; }
.eval-side .read-summary { margin-top: .5rem; }
@media (max-width: 60rem) { .eval-view:not([hidden]) { grid-template-columns: 1fr; } .eval-side { position: static; order: -1; } }
/* step 3 actions above the summary; step 4 review */
.eval-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
#exam-eval-toggle[aria-pressed="true"] { background: var(--panel); border-color: var(--tg); }
#exam-review h4 { margin: 1rem 0 .4rem; font-size: 1rem; }
.review-plan .read-q h5 { margin: 0; font-size: .98rem; }
.review-plan .drills { margin: .35rem 0 0 1.2rem; padding: 0; }
.review-script { max-height: 32rem; }
#exam-review-script-box summary { cursor: pointer; font-weight: 600; margin: .75rem 0 .35rem; }
.review-head { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: .75rem; }
.review-head #exam-review-status { margin: 0 0 .45rem auto; text-align: right; }

/* top bar: Mooncake | Chat switch (Chat is LibreChat at /chat/) */
.mode-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-right: .5rem; }
.mode-opt { padding: .4rem .95rem; text-decoration: none; color: var(--ink-2); font-size: .95rem; }
.mode-opt + .mode-opt { border-left: 1px solid var(--line); }
.mode-opt[aria-current="page"] { background: var(--tg); color: #fff; }
.mode-opt:hover:not([aria-current]) { background: var(--panel); }

/* ── Exam Buster embedded in Mooncake Chat (/app/?embed=exam&exam=<id>&step=<n>) ─────────────────
   One step's panel inside the chat's step header: no app chrome, no step tabs, no papers list. */
html.embed body { background: transparent; }
html.embed .page, html.embed .page-app { max-width: none; width: auto; margin: 0; padding: .25rem .5rem; }
html.embed .topbar, html.embed #aide-banner, html.embed #loading,
html.embed [data-section="exams"] > .section-head, html.embed #exam-step-panel, html.embed #exam-start-view, html.embed .foot { display: none !important; }
html.embed [data-section="exams"] { border: 0; box-shadow: none; background: transparent; margin: 0; padding: 0; }
/* a section inside the chat's dialog (?embed=account|family|terms, operator 2026-10-09): the dialog
   carries the title and the way back to the adult; the card's frame goes */
html.embed-panel [data-section] { border: 0; box-shadow: none; background: transparent; margin: 0; padding: .25rem 0; }
html.embed-panel [data-section] > h2, html.embed-panel #family-banner { display: none !important; }
html.embed-panel #content, html.embed-panel [data-section] > h2 + * { margin-top: 0; }

/* LibreChat's look inside Mooncake Chat (its palette, client/src/style.css: grays, green submit,
   Inter); html.embed-dark when the chat is in dark mode (?theme=dark, or a later theme message).
   The sign-in pages take the same look on their own (html.lc, html.lc-dark: mcmc-theme.js, operator
   2026-10-16), on LibreChat's own page colour (its index.html: #ffffff light, #0d0d0d dark). */
html.embed, html.lc {
  --ink: #212121; --ink-2: #424242; --mute: #595959; --line: #e3e3e3;
  --page: transparent; --bg: #fff; --panel: #f7f7f8;
  --dutch: #10b981; --dutch-tint: #a7f3d0; --dutch-deep: #047857; --dutch-wash: #f7f7f8;
  --tg: #047857; --tg-2: #065f46; --blue-wash: #ececec;
}
html.lc { --page: #fff; }
html.embed body, html.lc body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
html.embed body { font-size: 15px; }
html.embed-dark, html.lc-dark {
  color-scheme: dark;
  --ink: #ececec; --ink-2: #cdcdcd; --mute: #999696; --line: #2f2f2f;
  --bg: #0d0d0d; --panel: #212121;
  --dutch: #10b981; --dutch-tint: #065f46; --dutch-deep: #34d399; --dutch-wash: #171717;
  --tg: #047857; --tg-2: #065f46; --blue-wash: #2f2f2f;
  --ok: #34d399; --warn: #fbbf24; --err: #f87171;
}
html.lc-dark { --page: #0d0d0d; }
html.lc-dark .notice-warn, html.embed-dark .notice-warn, html.embed-dark .ack, html.embed-dark .verdict-partly { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .45); color: #fcd34d; }
html.lc-dark .notice-error, html.embed-dark .notice-error, html.embed-dark .verdict-incorrect, html.embed-dark .page-row.failed, html.embed-dark .badge-failed { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .45); color: #fca5a5; }
html.lc-dark .notice-ok, html.embed-dark .notice-ok, html.embed-dark .ack.acked, html.embed-dark .verdict-correct, html.embed-dark .badge-analysed, html.embed-dark .badge-planned, html.embed-dark .badge-submitted, html.embed-dark .badge-analysing { background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .45); color: #6ee7b7; }
/* Exam Buster's headings in Dutch Orange (operator 2026-10-08), the palette's text pair - as the
   chat's step bars: --dutch-deep on light (5.7:1 on white), --dutch on dark (6.0:1 on #0d0d0d) */
html.embed { --mcmc-heading: #b83d00; }
html.embed-dark { --mcmc-heading: #ff5400; }
html.embed [data-section="exams"] h3, html.embed [data-section="exams"] h4, html.embed [data-section="exams"] h5 { color: var(--mcmc-heading); }

/* family accounts (022): the adult's children */
.family-table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; font-size: .95rem; }
.family-table th, .family-table td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.family-table th { color: var(--ink-2); font-weight: 600; }
.family-table input { width: 100%; min-width: 4rem; }
.family-table tr.flag-new td { font-weight: 600; }

/* Inside the chat's Admin and Terms dialogs: LibreChat's Settings look (operator 2026-10-09: "the same
   style as the settings option ... left column selection with right side values"). Measured in the
   harness on LibreChat 0.8.7: 14px/20px text; each group a 12px-round box with 1px dividers, rows
   12px 16px, the label left and the value or control right; 12px uppercase headings above a box;
   controls 12px-round on #fff / #121212. The dialog's left column picks the account's tab. */
html.embed-panel { --ctl-bg: #fff; --ctl-line: #e5e5e5; }
html.embed-panel.embed-dark { --ctl-bg: #121212; --ctl-line: #262626; }
html.embed-panel body { font-size: 14px; line-height: 20px; color: var(--ink); }
html.embed-panel .tabs, html.embed-panel .tier-form legend { display: none; }
html.embed-panel h3 { margin: 0 0 8px; padding: 0 4px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--ink-2); }
html.embed-panel .muted { font-size: 14px; color: var(--ink-2); margin: 0 4px 12px; }
html.embed-panel dl.facts { margin: 0 0 28px; column-gap: 0; row-gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
html.embed-panel dl.facts dt, html.embed-panel dl.facts dd { padding: 12px 16px; border-top: 1px solid var(--line); }
html.embed-panel dl.facts dt:first-of-type, html.embed-panel dl.facts dd:first-of-type { border-top: 0; }
html.embed-panel dl.facts dt { color: var(--ink); }
html.embed-panel dl.facts dd { color: var(--ink-2); text-align: right; }
html.embed-panel .form { margin: 0 0 28px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
html.embed-panel .form .field { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); grid-template-columns: 1fr minmax(12rem, 22rem); }
html.embed-panel .form > .field:first-child, html.embed-panel .form > :first-child { border-top: 0; }
html.embed-panel .form .field label { color: var(--ink); }
html.embed-panel .form input[type="text"], html.embed-panel .form input[type="email"], html.embed-panel .form input[type="number"],
html.embed-panel select { font: inherit; padding: 8px 12px; border: 1px solid var(--ctl-line); border-radius: 12px; background: var(--ctl-bg); color: var(--ink); }
html.embed-panel .form > .check, html.embed-panel .form > .actions, html.embed-panel .form > .notice { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); border-radius: 0; }
html.embed-panel .form > .actions { justify-content: flex-end; }
html.embed-panel .btn { padding: 8px 12px; border-radius: 12px; border-color: var(--ctl-line); background: var(--ctl-bg); color: var(--ink); }
html.embed-panel .btn-telegram { background: var(--tg); border-color: var(--tg); color: #fff; }
html.embed-panel .tier-form { margin: 0 0 28px; }
html.embed-panel .tier-form fieldset { margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
html.embed-panel .tier-form > .actions { justify-content: flex-end; }
html.embed-panel .tier-form label { display: block; padding: 12px 16px; border-top: 1px solid var(--line); }
html.embed-panel .tier-form label:first-of-type { border-top: 0; }
html.embed-panel .family-table { margin: 0 0 28px; border: 1px solid var(--line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 14px; }
html.embed-panel .family-table th, html.embed-panel .family-table td { padding: 12px 16px; border-bottom: 0; border-top: 1px solid var(--line); }
html.embed-panel .family-table thead th { border-top: 0; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--ink-2); }
html.embed-panel .family-table td:last-child { text-align: right; }
html.embed-panel .notice { border-radius: 12px; }
html.embed-panel .links { margin: 0 4px; }
/* a status line in a form is a row too */
html.embed-panel .form > p.muted { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); }
/* About this aide: its acknowledgement inside the one box */
html.embed-panel .ack .form { margin: 8px 0 0; border: 0; border-radius: 0; }
html.embed-panel .ack .form > * { padding-left: 0; padding-right: 0; border-top: 0; }
/* the children as Settings rows (the dialog is narrower than the table): the name, then age, grade,
   curriculum and school on the left; the tutor and Edit on the right */
html.embed-panel #family-table thead { display: none; }
html.embed-panel #family-table, html.embed-panel #family-table tbody { display: block; }
html.embed-panel #family-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
html.embed-panel #family-table tr:first-child { border-top: 0; }
html.embed-panel #family-table td { display: block; padding: 0; border: 0; text-align: left; }
html.embed-panel #family-table td:nth-child(1) { flex: 0 0 100%; color: var(--ink); }
html.embed-panel #family-table td:nth-child(n+2):nth-child(-n+6) { color: var(--ink-2); }      /* age, grade, curriculum, school, e-mail (025) */
html.embed-panel #family-table td:nth-child(2)::before { content: "Age "; }
html.embed-panel #family-table td:nth-child(n+3):nth-child(-n+6)::before { content: "· "; }
html.embed-panel #family-table td:nth-child(7) { margin-left: auto; }
/* editing a child: each field with its label, styled as the dialog's other fields; no "Age"/"·" prefixes */
#family-table .edit-label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
html.embed-panel #family-table tr.editing td:nth-child(n)::before { content: none; }   /* beats the nth-child prefixes above */
html.embed-panel #family-table tr.editing td:nth-child(-n+6) { flex: 1 1 11rem; }
html.embed-panel #family-table tr.editing td:nth-child(1) { flex-basis: 100%; }
html.embed-panel #family-table tr.editing td:nth-child(7) { margin-left: 0; }
html.embed-panel #family-table tr.editing input { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 12px; border: 1px solid var(--ctl-line);
  border-radius: 12px; background: var(--ctl-bg); color: var(--ink); }
/* 024: an invitation code, and a tutor's read-only view of a pupil's paper */
.pupil-pages { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.pupil-pages img { width: 100%; max-width: 250px; border: 1px solid var(--line); border-radius: 8px; }
.pupil-plan { padding-left: 1.2rem; }
.pupil-plan > li { margin: 0 0 12px; }
.pupil-synopsis { margin: 0 4px 12px; }
#tutor-invite-children { display: block; border: 0; margin: 0; }
#tutor-invite-children legend { display: block; color: var(--ink-2); padding: 0; margin-bottom: .25rem; }
html.embed-panel #tutor-invite-children legend { display: block; text-transform: none; font-size: 14px; color: var(--ink); }
/* a list's own button sits under its box, then the gap before the next group */
html.embed-panel [data-main-of] > .actions { margin: -16px 0 28px; }
html.embed-panel #group-actions { margin-top: 0; }                 /* 025: under a paragraph, not a box */
/* 025: the number an adult taps in Telegram for an e-mailed sign-in */
.match { margin: .5rem 0; }
.match-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 2rem; letter-spacing: .15em; padding: .1rem .5rem;
              border: 1px solid var(--line); border-radius: 8px; }
/* 026: the invitation page - the relationship to each child, the three documents to open */
.field-group { border: 0; padding: 0; margin: .75rem 0; }
.field-group legend { font-weight: 600; margin-bottom: .25rem; }
.doc-links { flex-wrap: wrap; gap: .5rem; }
/* a tutor's full review of a child's chats (028): one checkbox per child */
.family-table td.full-review label { display: flex; align-items: center; gap: .4rem; white-space: nowrap; font-size: .9rem; }
.family-table td.full-review input { width: auto; min-width: 0; }