/* NAKS EIKEN.
Two visual worlds on purpose:
· the NAKS shell (login, home, results) — the school's navy and yellow;
· the EXAM shell — made to look like the real 英検 S-CBT screen.
The exam does NOT follow the system dark theme. The real thing is light, and
a student who practises on a dark screen would meet a different exam on the
day. Recognition is the product. */
:root{
--navy:#143143; --navy2:#1F4A63; --yellow:#FEF200; --paleYellow:#FFF9C4;
--paleNavy:#DEE7ED;
--ground:#EEF2F5; --surface:#FFFFFF; --surface2:#F5F8FA;
--ink:#12222c; --ink-soft:#5a6b76; --ink-faint:#8b9aa4;
--line:#d8e0e6;
--ok:#1F7A45; --okbg:#E2EFDA; --bad:#C00000; --badbg:#FCE4E4;
/* 🔴 THE TRADEMARK FOOTER'S OWN INK — 2 Oct 2026. It used to be written as
* two literals inside `.legal-foot` (#697280 for the notice, #8a939e for the
* fold line) and measured 4.32:1 on the light ground, 3.82:1 on the dark one
* and 2.76:1 for the fold line — three failures of the same 4.5 gate every
* other colour on this site has to clear. A copyright notice nobody can read
* is not a notice, and this one names 公益財団法人日本英語検定協会.
*
* It is a token in all three blocks precisely because the literal version
* had no dark value at all: one colour was being asked to work on #EEF2F5
* and on #0C141A, and 3.82 is what that costs. Measured: 5.61 light,
* 8.39 dark. The footer on the board and the panel keeps its own pale ink on
* the sky-deep band, which already passes at 5.87. */
--legal-ink:#4A6373;
--radius:10px; --tap:44px;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--navy:#8FB4CC; --navy2:#A9C8DC; --paleNavy:#1B2A36;
--ground:#0C141A; --surface:#141F27; --surface2:#1A2731;
--ink:#E8EEF2; --ink-soft:#9FB0BC; --ink-faint:#778894;
--line:#26343F;
--ok:#5FCB8C; --okbg:#12291D; --bad:#F08880; --badbg:#2E1614;
--paleYellow:#2A2711;
--legal-ink:#A3B0BB;
}
}
:root[data-theme="dark"]{
--navy:#8FB4CC; --navy2:#A9C8DC; --paleNavy:#1B2A36;
--ground:#0C141A; --surface:#141F27; --surface2:#1A2731;
--ink:#E8EEF2; --ink-soft:#9FB0BC; --ink-faint:#778894;
--line:#26343F;
--ok:#5FCB8C; --okbg:#12291D; --bad:#F08880; --badbg:#2E1614;
--paleYellow:#2A2711;
--legal-ink:#A3B0BB;
}
*{box-sizing:border-box}
html{height:100%}
body{
margin:0; height:100vh; height:100dvh;
display:flex; flex-direction:column; overflow:hidden;
background:var(--ground); color:var(--ink);
font:16px/1.55 -apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans JP","Noto Sans Bengali",sans-serif;
-webkit-text-size-adjust:100%;
}
/* ══ WHO DECIDES WHAT A BOX LOOKS LIKE ════════════════════════════════════
*
* 9 Sep 2026. Razib typed a time into "What times" on the slots screen and
* could not read it: a WHITE box with WHITE letters in it. The rest of the
* page was correctly dark.
*
* `color: inherit` on line below gave the control the dark theme's pale ink.
* Its BACKGROUND was never set by us at all, so the browser drew its own —
* and a browser that has not been told which scheme this page uses draws form
* controls light. Pale ink on a light box is an invisible field.
*
* `color-scheme` is the line that settles it. It tells the browser which
* scheme the page is really in, so native controls, scrollbars and the caret
* follow — and it also stops Chrome on Android applying its own "force dark"
* inversion, which is a browser redrawing our page for us. That is the second
* time in two days that a browser has redecided what a screen says (the first
* rewrote the exam questions through machine translation), and the answer is
* the same both times: SAY WHAT YOU MEAN, and leave the browser nothing to
* guess.
*
* The EXAM shell is deliberately light in every scheme — the real 英検 screen
* is light and recognition is the product — so it declares `light` for itself
* further down, which also exempts it from force-dark.
*/
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
button,input,textarea,select{font:inherit;color:inherit}
/* EVERY field states its own colours. Not `input[type=text]` — an attribute
selector matches the attribute, so an `` with no type, or a select,
or a textarea, quietly fell through to the browser's own idea of a box. */
input,select,textarea{
background:var(--surface);color:var(--ink);
border:1.5px solid var(--line);border-radius:8px;
}
input::placeholder,textarea::placeholder{color:var(--ink-faint);opacity:1}
select{padding:0 10px;min-height:var(--tap)}
/* THE LIST THAT DROPS DOWN when a select is tapped is drawn by the operating
system, not by the page, and it inherits nothing. Unstated, Android can draw
it white-on-white — the same invisible field, one tap further in, where it
is harder to notice and just as impossible to use. */
option,optgroup{background:var(--surface);color:var(--ink)}
button{cursor:pointer}
:focus-visible{outline:3px solid #1F4A63;outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.hide{display:none!important}
/* ══ NAKS shell ═══════════════════════════════════════════════════════════ */
.shell{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.top{
flex:0 0 auto;display:flex;align-items:center;gap:12px;
padding:8px 14px;background:#143143;color:#fff;border-bottom:3px solid var(--yellow);
}
:root[data-theme="dark"] .top,
:root:not([data-theme="light"]) .top{background:#0F2531}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .top{background:#143143}}
/* The crest in the bar, on every screen of the app. It is 180px of artwork
drawn at 30, which is the size the rest of the site draws it at too; giving
it explicit width AND height stops the bar jumping while it loads. */
.top .crest{width:30px;height:30px;flex:0 0 auto;border-radius:50%;
box-shadow:0 1px 3px rgba(0,0,0,.28)}
.top .brand{font-weight:700;font-size:15px;white-space:nowrap}
.top .sub{font-size:11.5px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .spacer{flex:1}
.ghost{background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:8px;
min-height:36px;padding:0 12px;font-size:13.5px}
.ghost:hover{background:rgba(255,255,255,.24)}
.main{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px}
.wrap{max-width:820px;margin:0 auto}
.btn{min-height:var(--tap);padding:0 20px;border-radius:var(--radius);
border:1px solid var(--line);background:var(--surface);color:var(--ink);
font-weight:600;font-size:15px;white-space:nowrap}
.btn:hover{background:var(--surface2)}
.btn.primary{background:var(--navy2);border-color:var(--navy2);color:#fff}
/* Dark text on the primary button belongs to DARK MODE ONLY, where --navy2 is a
pale blue. The second selector was written without its media query, so it
matched in light mode too — where --navy2 is deep navy — and every primary
button on the site rendered near-black text on near-black navy. It is the
button that says "Start the test". Found in a guide screenshot. */
:root[data-theme="dark"] .btn.primary{color:#0C141A}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .btn.primary{color:#0C141A}
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.wide{width:100%}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
padding:18px 20px;margin-bottom:14px}
.centre{max-width:440px;margin:6vh auto;padding:0 4px}
.logo{width:74px;height:74px;border-radius:50%;display:block;margin:0 auto 14px}
h1.t{font-size:22px;text-align:center;margin:0 0 4px}
p.lede{text-align:center;color:var(--ink-soft);margin:0 0 22px;font-size:14.5px}
label{display:block;font-size:13px;font-weight:600;margin:0 0 5px;color:var(--ink-soft)}
input[type=text],input[type=password],input[type=date]{
width:100%;min-height:var(--tap);padding:0 13px;border-radius:8px;
border:1.5px solid var(--line);background:var(--surface);margin-bottom:14px}
.msg{border-radius:8px;padding:11px 14px;margin-bottom:14px;font-size:14px}
.msg.err{background:var(--badbg);color:var(--bad);border:1px solid var(--bad)}
.msg.ok{background:var(--okbg);color:var(--ok);border:1px solid var(--ok)}
.msg.info{background:var(--surface2);border:1px solid var(--line);color:var(--ink-soft)}
.rule{height:1px;background:var(--line);margin:18px 0}
/* Which paper this interview belongs to. A candidate holding three of them
must never have to work out which card is which. */
.speak-card .ttl{font-weight:700;font-size:13px;letter-spacing:.04em;
text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
.small{font-size:12.5px;color:var(--ink-faint);line-height:1.6}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
border-bottom:1px solid var(--line);font-size:14.5px}
.kv:last-child{border-bottom:0}
.kv b{font-variant-numeric:tabular-nums}
/* ══ EXAM shell — the S-CBT look ══════════════════════════════════════════
Colours sampled from Razib's screenshots of the real 筆記試験 screen.
Fixed light palette; see the note at the top of this file. */
.exam{
flex:1 1 auto;display:flex;flex-direction:column;min-height:0;
/* Fixed light, in every system theme — and DECLARED, so no browser
force-darkens the paper a candidate is reading. */
color-scheme:light;
background:#fff;color:#1a1a1a;
font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",
-apple-system,"Segoe UI",Roboto,sans-serif;
}
.exbar{
flex:0 0 auto;display:flex;align-items:center;gap:14px;
padding:8px 14px;background:#f1f1f1;border-bottom:1px solid #c4c4c4;
}
.exbar-l{display:flex;align-items:baseline;gap:12px;min-width:0}
.exbar-l b{font-size:19px;font-weight:700;white-space:nowrap}
.exbar-l span{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exbar-l small{font-size:11px;font-weight:400;color:#555}
.exclock{
margin-left:auto;display:flex;align-items:center;gap:10px;
background:#4d4d4f;color:#fff;border-radius:4px;padding:6px 14px;white-space:nowrap;
}
.exclock-k{font-size:13px}
.exclock b{font-size:25px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.exclock.warn{background:#b00000;animation:exPulse 1.4s ease-in-out infinite}
/* PREVIEW. The number is real — it is what the candidate's clock will start
from — but it is standing still, and it must not be mistaken for a running
one. Hollow, dashed, and no pulse: it reads as a label, not a countdown. */
.exclock.preview{background:transparent;color:#4d4d4f;border:1px dashed #9a9a9c;animation:none}
@keyframes exPulse{50%{opacity:.7}}
.exbody{flex:1 1 auto;display:flex;min-height:0;position:relative}
.expaper{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 26px 60px}
.expaper>.exin{max-width:760px}
/* the collapse handle, as on the real screen */
.exhandle{
position:absolute;top:50%;right:352px;transform:translateY(-50%);z-index:6;
width:26px;height:44px;border:1px solid #9aa39a;border-right:0;border-radius:6px 0 0 6px;
background:#dfe6d7;color:#333;font-size:12px;line-height:1;padding:0;
}
.exam.panel-closed .exhandle{right:0;border-radius:6px 0 0 6px}
/* ── the 「あなたの解答」 panel ───────────────────────────────────────── */
.expanel{
flex:0 0 352px;display:flex;flex-direction:column;min-height:0;
background:#ced8c6;border-left:1px solid #9aa39a;
}
.exam.panel-closed .expanel{display:none}
.exph{
flex:0 0 auto;padding:8px 12px;background:#bcc8b2;border-bottom:1px solid #9aa39a;
font-size:14px;font-weight:700;color:#22331d;display:flex;align-items:baseline;gap:8px;
}
.exph>span{display:flex;align-items:baseline;gap:8px}
.exph small{font-weight:400;font-size:11px;color:#41573a}
.exclose{display:none;margin-left:auto;background:none;border:0;color:#22331d;
font-size:18px;line-height:1;padding:0 2px;min-width:32px;min-height:32px}
@media (max-width:900px){ .exclose{display:block} .exph{align-items:center} }
.expl{flex:1 1 auto;overflow-y:auto;padding:8px}
.expf{flex:0 0 auto;padding:8px;border-top:1px solid #9aa39a}
.exfinish{
width:100%;min-height:42px;border:1px solid #b3a300;border-radius:3px;
background:#ffff00;color:#c00000;font-weight:700;font-size:14px;
}
.exfinish:hover{filter:brightness(.95)}
.exfinish:disabled{opacity:.5;cursor:not-allowed}
.exgroup{display:flex;gap:6px;margin-bottom:8px}
.exgnum{
flex:0 0 26px;height:26px;border-radius:50%;background:#8a9b81;color:#fff;
font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.exrows{flex:1 1 auto;background:#dfe6d7;border:1px solid #b6c0ac;border-radius:3px;padding:3px}
.exrow{display:flex;align-items:center;gap:4px;padding:1px 2px}
.exrow-n{flex:0 0 42px;font-size:12.5px;text-decoration:underline;color:#1a1a1a;
background:none;border:0;padding:0;text-align:left}
.exrow-f{flex:0 0 16px;height:16px;border:1px solid #7e8a76;background:#fff;border-radius:2px;padding:0}
.exrow-f[aria-pressed="true"]{background:#4d4d4f;border-color:#4d4d4f}
.exrow-o{
flex:1 1 0;min-width:0;height:22px;border:1px solid #9aa39a;background:#f4f4f4;
border-radius:2px;font-size:12.5px;font-variant-numeric:tabular-nums;padding:0;
}
.exrow-o[aria-pressed="true"]{background:#6b6b6b;border-color:#5a5a5a;color:#fff;font-weight:700}
.exdone{padding:6px 4px 2px;font-size:12px;color:#33452c}
/* ── the paper itself ─────────────────────────────────────────────────── */
.exhead{
background:#e7e7e7;border:1px solid #c4c4c4;border-radius:3px;
padding:7px 12px;margin:0 0 14px;font-weight:700;font-size:14.5px;
position:sticky;top:-20px;z-index:2;
}
.expassage{
border:1px solid #c9c9c9;background:#fafafa;padding:13px 15px;margin:0 0 14px;
white-space:pre-wrap;line-height:1.85;border-radius:2px;
}
.expassage h4{margin:0 0 8px;font-size:15px}
.exq{margin:0 0 26px}
/* 準1級 / 1級 第3部 — the printed Situation. It is a box, not a paragraph,
because a candidate has ten seconds to find it and read it; prose that looks
like the rest of the page costs two of those seconds. The constraint in it
("no car", "under fifty dollars") is the whole question, so it sits above
the options and never scrolls out from under them. */
.exsit{border:1.5px solid var(--line);border-left:5px solid var(--navy2);
border-radius:10px;padding:12px 14px;margin:0 0 14px;background:var(--surface2)}
.exsit-h{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--navy2);margin:0 0 2px}
.exsit-h + .exsit-b{margin-bottom:8px}
.exsit-b{font-size:15.5px;line-height:1.85;white-space:pre-wrap}
/* --ink-faint measured 2.71:1 here, under the 4.5 a candidate is owed. This
line tells them a clock they cannot see is running; it is not decoration. */
.exsit-t{font-size:12.5px;line-height:1.6;color:var(--ink-soft);margin-top:8px}
.exqh{display:flex;gap:9px;align-items:flex-start;margin-bottom:10px}
.exqn{flex:0 0 auto;font-weight:700;font-size:15.5px}
.exqt{flex:1 1 auto;white-space:pre-wrap;line-height:1.9;font-size:15.5px}
.exopts{display:flex;flex-direction:column;gap:7px;margin-left:30px}
.exopt{
display:flex;align-items:center;gap:12px;text-align:left;width:100%;max-width:640px;
background:none;border:0;padding:0;
}
/* 🔴 THE OPTION NUMBERS WERE INVISIBLE IN DARK MODE. Found 14 Sep 2026 while
measuring the new Situation box, on every grade and every paper at once.
The box is deliberately paper-white (`#efefef`) to look like the S-CBT
answer sheet — a FIXED colour. The digit inside it had no colour of its own,
so it inherited `--ink`, which flips to near-white after dark. Near-white on
#efefef measures 1.02:1. A candidate sitting in the evening saw four blank
grey boxes and could only tell which one they had already pressed.
Nothing catches this: the guide screenshots were all taken in light mode.
A FIXED BACKGROUND NEEDS A FIXED FOREGROUND — state both or neither. */
.exopt .n{
flex:0 0 62px;height:34px;border:1px solid #9a9a9a;background:#efefef;color:#12222c;
border-radius:2px;
display:flex;align-items:center;justify-content:center;font-size:15px;
}
.exopt[aria-pressed="true"] .n{background:#6b6b6b;border-color:#5a5a5a;color:#fff;font-weight:700}
.exopt .l{flex:1 1 auto;font-size:15.5px;line-height:1.6}
.exopt:hover .n{border-color:#4d4d4f}
.exflag{
display:inline-flex;align-items:center;gap:7px;margin:12px 0 0 30px;
font-size:13px;color:#333;background:none;border:0;padding:4px 0;
}
.exflag i{width:14px;height:14px;border:1px solid #777;background:#fff;display:inline-block;border-radius:2px}
.exflag[aria-pressed="true"] i{background:#4d4d4f;border-color:#4d4d4f}
.exhr{height:1px;background:#dcdcdc;margin:0 0 22px}
/* ── writing: the photograph is the main road ─────────────────────────── */
.exwrite{border:1px solid #c4c4c4;border-radius:3px;padding:0;margin:0 0 22px;overflow:hidden}
.exwrite-h{background:#e7e7e7;border-bottom:1px solid #c4c4c4;padding:7px 12px;
font-weight:700;font-size:14.5px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.exwrite-h span{font-weight:400;font-size:13px;color:#444}
.exwrite-b{padding:14px}
/* The per-大問 confirmation, under its own strip. `.msg` already carries the
colours; this only places it and stops it being the last thing with a margin
inside the block. */
.exwrite-b .exslotsum{margin:12px 0 0}
.exprompt{background:#fffdf0;border:1px solid #e2dcb8;padding:13px 15px;
white-space:pre-wrap;line-height:1.85;margin:0 0 14px;border-radius:2px}
.excam{
width:100%;min-height:76px;border:2px solid #4d4d4f;border-radius:4px;background:#4d4d4f;
color:#fff;font-size:17px;font-weight:700;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:3px;padding:12px;
}
.excam small{font-weight:400;font-size:12.5px;opacity:.9}
.excam:hover{filter:brightness(1.1)}
.exshots{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.exshot{position:relative;width:92px;height:92px;border:1px solid #b6b6b6;border-radius:3px;overflow:hidden;background:#f4f4f4}
.exshot img{width:100%;height:100%;object-fit:cover;display:block}
.exshot .st{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.62);color:#fff;
font-size:10.5px;text-align:center;padding:2px}
.exshot.bad{border-color:#c00000}
/* A photograph the server will not take, however many times it is sent. It is
marked apart from `.bad` on purpose: `.bad` invites a tap and this must not. */
.exshot.toobig{border-color:#c00000;border-width:2px}
.exshot.toobig .st{background:#c00000;color:#fff}
.extype{margin-top:14px;border-top:1px dashed #cfcfcf;padding-top:12px}
.extype summary{font-size:13.5px;color:#0b57a4;cursor:pointer}
/* THE BOX THE CHILD WRITES THEIR 英作文 IN. It had no background and no colour
of its own, so on a phone forcing dark it could come out dark text on a dark
field — in the one place on the whole site where not seeing what you typed
costs marks. White paper, black ink, stated outright. */
.extype textarea{width:100%;min-height:150px;margin-top:10px;padding:12px;
background:#fff;color:#1a1a1a;
border:1px solid #b6b6b6;border-radius:3px;line-height:1.8;resize:vertical}
#shellExam input,#shellExam select,#shellExam textarea{
background:#fff;color:#1a1a1a;border-color:#b6b6b6}
.excount{display:flex;justify-content:space-between;font-size:12.5px;color:#555;margin-top:6px}
.excount b{font-variant-numeric:tabular-nums}
.excount.inrange b{color:#1F7A45}
.excount.out b{color:#c00000}
.exnote{font-size:12.5px;color:#555;line-height:1.75;margin:10px 0 0}
.exlink{color:#0b57a4;text-decoration:underline;background:none;border:0;padding:0;font-size:13.5px}
/* ── listening ────────────────────────────────────────────────────────── */
.exaudio{border:1px solid #c4c4c4;background:#fafafa;border-radius:3px;padding:18px;
text-align:center;margin:0 0 20px}
.exaudio .big{font-size:16px;font-weight:700;margin-bottom:5px}
.exaudio .note{font-size:13px;color:#555;margin-bottom:12px}
.exaudio .bar{height:7px;background:#dcdcdc;border-radius:4px;overflow:hidden;margin-top:12px}
.exaudio .bar i{display:block;height:100%;background:#4d4d4f;width:0}
.exbtn{min-height:40px;padding:0 22px;border:1px solid #4d4d4f;background:#4d4d4f;color:#fff;
border-radius:3px;font-size:15px;font-weight:700}
.exbtn.plain{background:#fff;color:#1a1a1a;border-color:#9a9a9a}
.exbtn:disabled{opacity:.5;cursor:not-allowed}
.exmsg{border:1px solid #c00000;background:#fdecec;color:#a00000;padding:11px 13px;
border-radius:3px;font-size:13.5px;margin-top:12px;text-align:left;line-height:1.7}
.exinfo{border:1px solid #b6c0ac;background:#eef3e9;color:#33452c;padding:11px 13px;
border-radius:3px;font-size:13.5px;line-height:1.75;margin:0 0 16px}
/* ── the upload screen ────────────────────────────────────────────────── */
.exupload{max-width:620px;margin:4vh auto;padding:0 6px;text-align:center}
.exupload h2{font-size:21px;margin:0 0 6px}
.exupload .sub{color:#555;font-size:14px;margin:0 0 20px}
/* ── narrow screens: the panel slides over, as it must on a phone ─────── */
@media (max-width:900px){
.exbar{padding:6px 10px;gap:8px}
.exbar-l b{font-size:15px}
.exbar-l span{font-size:12px}
.exbar-l small{display:none}
.exclock{padding:4px 10px;gap:6px}
.exclock-k{display:none}
.exclock b{font-size:21px}
.expaper{padding:14px 14px 50px}
.exopts{margin-left:0}
.exflag{margin-left:0}
.exopt .n{flex:0 0 48px;height:32px}
.exopts.wide:not(.txt) .exopt .n{flex:1 1 auto}
.exopts.wide.txt .exopt .n{flex:0 0 44px;height:34px}
.expanel{position:absolute;inset:0 0 0 auto;width:min(340px,88vw);z-index:20;
box-shadow:-8px 0 26px rgba(0,0,0,.25)}
.exhandle{right:0;border-radius:6px 0 0 6px}
.exam:not(.panel-open) .expanel{display:none}
.exam:not(.panel-open) .exscrim{display:none}
.exscrim{position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:15}
}
@media (min-width:901px){
.exscrim{display:none}
}
/* The finish button repeated at the foot of the paper. Only on narrow screens,
where the answer panel is a slide-over and a student might never open it. */
.exinline{display:none;margin:26px 0 10px}
@media (max-width:900px){ .exinline{display:block} }
/* ══ listening, S-CBT style ═══════════════════════════════════════════════ */
.exband{display:flex;gap:12px;align-items:flex-start;background:#e7e7e7;
border:1px solid #c4c4c4;border-radius:3px;padding:12px 14px;margin:0 0 18px}
.exbadge{flex:0 0 34px;height:34px;border-radius:50%;background:#8a8a8a;color:#fff;
font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.exbandt{flex:1 1 auto;font-size:14.5px;line-height:1.75}
.explays{margin-top:4px;font-size:13px;color:#444}
.exexample{border:1px solid #c9c9c9;background:#fafafa;border-radius:3px;
padding:10px 12px;margin:0 0 18px;max-width:420px}
.exexl{font-size:13px;font-weight:700;margin-bottom:6px}
.exexample img{width:100%;height:auto;display:block}
.exq-l .exqno{font-size:17px;font-weight:700;margin-bottom:12px}
.exfig{border:1px solid #c9c9c9;background:#fff;border-radius:3px;padding:8px;
margin:0 0 16px;max-width:420px}
.exfig img{width:100%;height:auto;display:block}
/* Listening options come in two shapes and they must not share one rule.
第1部 answers are 1 2 3 with nothing written beside them — the numbered box IS
the button, so it takes the whole row. 第2部 and 第3部 answers have text, and
there the number must stay a small box with the words beside it.
The first version tried to serve both with `flex:0 0 100%` on the number plus a
`:not(:has(.l))` correction. The correction only covered the picture-only case,
so on a phone every 第2部 answer was a full-width numbered box with its text
pushed off the right-hand edge of the screen: Razib could see 1 2 3 4 and not one
word of what they meant. The kind is now a class the JS sets, not something the
stylesheet infers — and it is one rule each, so they cannot fight. */
.exopts.wide{margin-left:0;gap:9px;max-width:620px}
.exopts.wide .exopt{max-width:none}
.exopts.wide .exopt .l{display:block}
/* 第1部 — picture questions: the number fills the row */
.exopts.wide:not(.txt) .exopt .n{flex:1 1 auto;height:40px;font-size:16px}
/* 第2部・第3部 — the answer is words. The number never grows. */
.exopts.wide.txt .exopt{align-items:flex-start;gap:10px}
.exopts.wide.txt .exopt .n{flex:0 0 54px;height:38px;font-size:15px}
.exopts.wide.txt .exopt .l{flex:1 1 auto;min-width:0;padding-top:8px;
overflow-wrap:anywhere}
.exnav{display:flex;gap:10px;justify-content:flex-end;margin:22px 0 0;max-width:620px}
/* the audio control, at the head of the answer panel as on the real screen */
.exaudio-host{flex:0 0 auto;padding:8px;border-bottom:1px solid #9aa39a;background:#c5d0bc}
.exstatus{background:#4d4d4f;color:#fff;border-radius:3px;padding:6px 10px;font-size:13px;
margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.explay{font-size:13px}
.exbar2{height:7px;background:#eee;border:1px solid #9aa39a;border-radius:3px;overflow:hidden;margin-top:7px}
.exbar2 i{display:block;height:100%;background:#4d4d4f;width:0}
.exvol{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:12px;color:#22331d}
.exvol input{flex:1 1 auto;min-width:0}
/* panel: two columns for listening, dimmed parts, one answer cell */
.exrows.two{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px}
.exgroup.dim{opacity:.5}
.exgroup.dim .exrow-n{cursor:default;text-decoration:none}
.exrow-a{flex:0 0 30px;height:24px;border:1px solid #7e8a76;background:#fff;border-radius:2px;
font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;padding:0}
.exrow-a[aria-pressed="true"]{background:#6b6b6b;border-color:#5a5a5a;color:#fff}
@media (max-width:900px){
.exfig,.exexample{max-width:100%}
.exnav{max-width:none}
}
/* the English line under an official Japanese instruction */
.exbanden{font-size:13px;color:#555;margin-top:3px;line-height:1.6}
.explay small{display:block;font-weight:400;font-size:11px;color:#7a5a00;margin-top:2px}
.exflag span{line-height:1.4}
/* on a phone the audio control sits in the paper, above the instruction band */
#exAudioPaper{border:1px solid #9aa39a;border-radius:3px;margin:0 0 16px;background:#dfe6d7}
@media (min-width:901px){ #exAudioPaper{display:none!important} }
/* ══ the staff panel ══════════════════════════════════════════════════════
Razib's verdict on the first version: "this is not right at all" — and he was right.
Everything staff-facing was stacked in one column on the student's home
screen, so sixteen speaking tests meant sixteen open marking forms and a
page you scrolled for a minute to reach the papers.
So: a left rail, one section at a time, and rows instead of cards. A row is
one line — name, what it is, its state, and the buttons that act on it —
because a list you can scan is the whole point of a panel. Anything that
needs a form opens INSIDE its own row, one at a time, and closes again.
On a phone the rail becomes a scrolling strip of tabs across the top: the
same sections, still one at a time. */
.main:has(.adm){padding:0}
.wrap:has(.adm){max-width:none}
/* 🔴 THE RAIL GREW — 17 Sep 2026. Razib: *"make this left panel wider, font
bigger … catagoriy font more biger and simbol more biger like locks like
app"*. It was 212px of 14px text with 14px icons, which reads as a dense
list of settings; a panel somebody works in all day should read like an app.
Every number below went up together — width, item, Japanese gloss, band
heading, icon and badge — because raising one of them alone just makes the
rail look uneven. The phone layout below is untouched: there the rail is one
button, and none of this applies. */
.adm{display:grid;grid-template-columns:316px 1fr;gap:0;min-height:calc(100dvh - 64px)}
/* A gentle top-to-bottom gradient rather than one flat navy. It is the
cheapest thing that stops a tall dark column reading as a wall, and it costs
nothing on a slow phone. */
.adm-rail{
background:linear-gradient(180deg,#173043 0%,#132836 45%,#0F2430 100%);
border-right:1px solid rgba(255,255,255,.08);padding:16px 0;
}
:root[data-theme="dark"] .adm-rail,
:root:not([data-theme="light"]) .adm-rail{background:#0F2531}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .adm-rail{background:#132836}}
.adm-who{padding:0 20px 15px;color:#7f9db0;font-size:13px;letter-spacing:.12em;font-weight:800}
.adm-nav{display:flex;flex-direction:column}
.adm-nav button{
display:flex;align-items:center;gap:10px;background:none;border:0;color:#cfe0ea;
padding:11px 18px;font-size:14px;text-align:left;width:100%;border-left:3px solid transparent;
}
.adm-nav button:hover{background:rgba(255,255,255,.06);color:#fff}
.adm-nav button[aria-current="true"]{
background:rgba(255,255,255,.10);color:#fff;font-weight:700;border-left-color:var(--yellow);
}
.adm-nav .count{
margin-left:auto;background:var(--yellow);color:#132836;font-size:13px;font-weight:800;
min-width:26px;height:23px;border-radius:99px;display:grid;place-items:center;padding:0 8px;
}
.adm-nav .count.zero{background:rgba(255,255,255,.14);color:#9fb6c4}
/* ══ THE PANEL MENU, IN BANDS — 15 Sep 2026 ═══════════════════════════════
* Fifteen flat items became five colour-banded groups, each item carrying its
* Japanese underneath the English. The rail keeps its navy, its yellow badge
* and its yellow current-marker; what changed is grouping, colour and the
* second language. See SECTION_GROUPS in app.js. */
.adm-nav .grp{margin-top:22px}
.adm-nav .grp:first-child{margin-top:4px}
/* ══ THE BAND HEADING, THIRD TIME ═════════════════════════════════════════
* Razib asked for a bigger category font three times. 10px → 12 → 13.5 was too
* small a step each time, so this one is decisive: 15px, which is LARGER than
* the body text on most of this site, and the wide letter-spacing comes back
* down because tracking that looks deliberate at 10px looks thin and stretched
* at 15. A hairline runs from the words to the edge of the rail, so a band
* reads as a section of a panel rather than a word floating above a list. */
.adm-nav .gh{padding:0 18px 10px;font-size:15px;letter-spacing:.07em;font-weight:800;
display:flex;align-items:center;gap:10px}
.adm-nav .gh .dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.adm-nav .gh::after{content:"";flex:1 1 auto;height:1px;
background:currentColor;opacity:.22;border-radius:1px}
.adm-nav .nav-list{display:flex;flex-direction:column}
.adm-nav button{align-items:center;padding:9px 14px;gap:14px;border-radius:0 14px 14px 0}
/* ══ THE SYMBOL SITS IN A COLOURED TILE ═══════════════════════════════════
*
* Razib asked twice, and the second time with a photograph: *"symbol more biger
* like locks like app, very colorful panel and user friendly panel of the
* world"*. Making the emoji a few pixels larger was not the answer — a row of
* bare emoji on navy is a LIST, and he is comparing this to an app.
*
* So every item gets a 40px rounded tile in its band's colour, and the emoji
* sits inside it. That is the thing that makes a menu findable without reading:
* Papers is always the grey-blue square in the fifth band, in the same place,
* whatever language you read. The current item's tile fills solid, so where you
* are is a block of colour rather than a thin yellow line.
*
* The tints are written out rather than computed with color-mix(), which is new
* enough that the day it is not supported the tiles would vanish entirely. Six
* colours is not a maintenance burden; a blank rail is. */
.adm-nav .ic{
width:48px;height:48px;flex:0 0 auto;border-radius:14px;
display:grid;place-items:center;font-size:26px;line-height:1;
background:var(--tint,rgba(255,255,255,.10));
box-shadow:inset 0 0 0 1.5px var(--edge,rgba(255,255,255,.14));
transition:background .12s ease;
}
.adm-nav button[aria-current="true"] .ic{
background:var(--band,#8FB8C9);box-shadow:none;
}
.adm-nav .tx{min-width:0}
.adm-nav .tx .en{display:block;font-size:17.5px;font-weight:800;line-height:1.25}
/* ENGLISH IS THE LARGER OF THE TWO, everywhere on this site. The Japanese is
the gloss, not the other way round — Razib, 15 Sep: "large font of english". */
.adm-nav .tx .ja{display:block;font-size:12.5px;color:#93adbd;line-height:1.35}
.adm-nav .count{align-self:center}
/* One band, one colour — the dot, the heading, the tile, the current marker and
the badge all read from it, so a new band needs three lines and not eleven. */
.g1{--band:#4FA3E3; --tint:rgba(79,163,227,.20); --edge:rgba(79,163,227,.42)}
.g2{--band:#B98CE8; --tint:rgba(185,140,232,.20); --edge:rgba(185,140,232,.42)}
.g3{--band:#67D39B; --tint:rgba(103,211,155,.20); --edge:rgba(103,211,155,.42)}
.g4{--band:#F2A65A; --tint:rgba(242,166,90,.20); --edge:rgba(242,166,90,.42)}
.g5{--band:#8FB8C9; --tint:rgba(143,184,201,.22); --edge:rgba(143,184,201,.44)}
.g6{--band:#E27C7C; --tint:rgba(226,124,124,.20); --edge:rgba(226,124,124,.42)}
.adm-nav .dot,.nav-sheet .dot{background:var(--band)}
.adm-nav .gh,.nav-sheet .gh{color:var(--band)}
.adm-nav button[aria-current="true"],
.nav-sheet button[aria-current="true"]{border-left-color:var(--band)}
/* The current item is a block of its band's colour, not a tint of white. */
.adm-nav button[aria-current="true"]{background:var(--tint,rgba(255,255,255,.10))}
.adm-nav button:hover .ic{background:var(--band)}
.nav-pick{display:none}
@media (max-width:860px){
/* THE SIDEWAYS STRIP SHOWED THREE OF FIFTEEN. Measured at 390px on 15 Sep:
Overview, Marking, Speaking tests, and then the edge of the screen — with
nothing to say the other twelve exist. So on a phone the rail is one
button naming where you are, and pressing it opens the whole menu. */
.adm-nav{display:none}
.nav-pick{display:block;padding:8px 12px}
.nav-cur{width:100%;background:rgba(255,255,255,.10);color:#fff;border:0;border-radius:10px;
padding:11px 13px;font-family:inherit;font-size:15px;font-weight:800;text-align:left;
display:flex;align-items:center;gap:9px;min-height:46px}
.nav-cur .tx .en{display:block;line-height:1.2}
.nav-cur .tx .ja{display:block;font-size:10.5px;color:#8fa9b8;font-weight:700;line-height:1.25}
.nav-cur .ar{margin-left:auto}
.nav-sheet{display:none;margin-top:8px;background:#0F2531;border-radius:12px;padding:6px 0 10px}
.nav-sheet.on{display:block}
.nav-sheet .grp{margin-top:10px}
.nav-sheet .nav-list{display:flex;flex-direction:column}
.nav-sheet button{display:flex;align-items:flex-start;gap:9px;background:none;border:0;
color:#cfe0ea;padding:9px 16px;width:100%;text-align:left;font-family:inherit;
border-left:3px solid transparent;min-height:44px}
.nav-sheet button[aria-current="true"]{background:rgba(255,255,255,.10);color:#fff}
/* The phone menu grew with the rail — it is the one Razib actually uses. */
/* The phone menu gets the same coloured tiles — it is the one Razib uses. */
.nav-sheet .ic{width:48px;height:48px;flex:0 0 auto;border-radius:14px;
display:grid;place-items:center;font-size:26px;line-height:1;
background:var(--tint,rgba(255,255,255,.10));
box-shadow:inset 0 0 0 1.5px var(--edge,rgba(255,255,255,.14))}
.nav-sheet button[aria-current="true"] .ic{background:var(--band,#8FB8C9);box-shadow:none}
.nav-sheet button[aria-current="true"]{background:var(--tint,rgba(255,255,255,.10))}
.nav-cur .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
font-size:26px;line-height:1;background:rgba(255,255,255,.14)}
.nav-sheet .tx .en{display:block;font-size:17.5px;font-weight:800;line-height:1.25}
.nav-sheet .tx .ja{display:block;font-size:12px;color:#8fa9b8;line-height:1.35}
.nav-sheet button{align-items:center;gap:14px;padding:11px 18px;min-height:60px}
.nav-sheet .count{margin-left:auto;align-self:center;background:var(--yellow);color:#132836;
font-size:13px;font-weight:800;min-width:26px;height:23px;border-radius:99px;
display:grid;place-items:center;padding:0 8px}
.nav-sheet .count.zero{background:rgba(255,255,255,.14);color:#9fb6c4}
.nav-sheet .gh{padding:0 18px 10px;font-size:15px;letter-spacing:.07em;font-weight:800;
display:flex;align-items:center;gap:10px}
.nav-sheet .gh .dot{width:12px;height:12px;border-radius:50%}
.nav-sheet .gh::after{content:"";flex:1 1 auto;height:1px;background:currentColor;opacity:.22}
.nav-cur{font-size:17.5px}
.nav-cur .tx .ja{font-size:12px}
}
.adm-main{padding:22px 26px 60px;min-width:0}
.adm-h{margin:0 0 4px;font-size:21px;letter-spacing:-.01em}
.adm-sub{margin:0 0 20px;color:var(--ink-soft);font-size:14px}
/* the numbers on the overview */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 24px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:15px 16px}
.stat b{display:block;font-size:27px;line-height:1.1;letter-spacing:-.02em}
.stat span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:3px}
.stat.go b{color:var(--navy2)}
.stat.warn b{color:#B26B00}
/* rows */
.tbl{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tbl-head{
display:flex;gap:12px;align-items:center;padding:9px 14px;background:var(--surface2);
border-bottom:1px solid var(--line);font-size:11.5px;font-weight:700;color:var(--ink-soft);
letter-spacing:.06em;
}
.row{border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row-line{display:flex;gap:12px;align-items:center;padding:11px 14px;flex-wrap:wrap}
.row-line:hover{background:var(--surface2)}
.row-main{flex:1 1 220px;min-width:0}
.row-main b{font-size:14.5px}
/* The sub-line is a block so it sits under the name. The status chip is a span
too, and the first version of this rule caught it as well — every chip
stretched the whole width of the row like a progress bar. */
.row-main span:not(.chip){display:block;font-size:12.5px;color:var(--ink-soft);margin-top:1px}
.row-side{font-size:12.5px;color:var(--ink-soft);text-align:right;flex:0 0 auto}
.row-acts{display:flex;gap:7px;flex-wrap:wrap;flex:0 0 auto}
.row-open{padding:0 14px 16px;border-top:1px dashed var(--line);margin-top:-1px}
.btn-s{
min-height:32px;padding:0 12px;font-size:13px;border-radius:7px;border:1.5px solid var(--line);
background:var(--surface);display:inline-flex;align-items:center;gap:6px;text-decoration:none;
color:inherit;
}
.btn-s:hover{border-color:var(--navy2)}
.btn-s.go{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-s.go:hover{background:var(--navy2)}
/* 🔴 A DELETE BUTTON MUST NOT LOOK LIKE EVERY OTHER BUTTON — 16 Sep 2026.
The Principal-only Delete on Registrations and Repeat tests was given the
class `danger`, which had no style at all: it would have rendered as a plain
grey button sitting beside Cancel, and the two do very different things —
Cancel keeps the row and its history, Delete destroys the only record that
money arrived. Both light and dark themes already define --bad and --badbg,
so it costs two lines to make the dangerous one look dangerous. */
.btn-s.danger{background:var(--badbg);color:var(--bad);border-color:var(--bad)}
.btn-s.danger:hover{background:var(--bad);color:#fff}
.chip{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
.chip.wait{background:#FFF3DC;color:#8A5200}
.chip.done{background:var(--okbg);color:var(--ok)}
.chip.off{background:var(--surface2);color:var(--ink-faint)}
.chip.live{background:var(--okbg);color:var(--ok)}
/* An hour that exists and can never be booked. Not "free" — free is a promise
somebody can take. Added 6 Sep 2026 with the 7-day count on "My times". */
.chip.bad{background:var(--badbg);color:var(--bad)}
.empty{padding:26px 16px;text-align:center;color:var(--ink-faint);font-size:14px}
@media (max-width:860px){
/* Two things a grid does by default that are wrong here:
· a grid ITEM will not shrink below its content, so seven tabs made the
rail 672px wide inside a 390px phone and pushed every row off the right
edge — `min-width:0` is what lets the strip scroll instead;
· with one column, `min-height` stretched the FIRST row, so the dark rail
became a tall black slab above the content. `auto 1fr` gives the height
to the content, where it belongs. */
.adm{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.adm-rail,.adm-main{min-width:0}
.adm-rail{border-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding:8px 0}
.adm-who{display:none}
.adm-nav{flex-direction:row;overflow-x:auto;gap:2px;padding:0 8px;scrollbar-width:none}
.adm-nav::-webkit-scrollbar{display:none}
.adm-nav button{white-space:nowrap;width:auto;border-left:0;border-bottom:3px solid transparent;
padding:9px 12px;border-radius:6px 6px 0 0}
.adm-nav button[aria-current="true"]{border-left:0;border-bottom-color:var(--yellow)}
/* `flex:0 0 auto` kept the buttons at their natural width, so the last one
was clipped off the edge of the row instead of wrapping. On a phone the
buttons get a line of their own and wrap within it. */
.row-acts{flex:1 1 100%;min-width:0}
.adm-main{padding:18px 14px 60px}
.row-side{flex:1 1 100%;text-align:left}
}
/* ══ THE CANDIDATE'S DASHBOARD ════════════════════════════════════════════
Razib: "more graphically attractive … writing inside big size and add
various buttons, colourful". The colour carries meaning here — green is a test
you can sit, amber is one you have paid for and are waiting on, blue is the
record. A palette that means nothing is just noise on a small screen. */
.dash{max-width:560px;margin:22px auto 60px;padding:0 14px}
.dash-h{font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink-faint);margin:26px 0 10px}
/* ── the hero: their name, on their page ─────────────────────────────────*/
.hero{background:linear-gradient(135deg,var(--navy2,#123047),#1d4a6b);
border-radius:16px;padding:22px 20px;margin-bottom:16px;color:#fff}
.hero-who{display:flex;align-items:center;gap:16px}
.avatar{width:62px;height:62px;flex:0 0 62px;border-radius:50%;
background:var(--yellow,#F5C542);color:#12232e;
display:flex;align-items:center;justify-content:center;
font-size:24px;font-weight:800;letter-spacing:.02em}
.hero-name{font-size:26px;line-height:1.15;margin:0;color:#fff;font-weight:800;
word-break:break-word}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}
.hero-grade{background:rgba(255,255,255,.18);border-radius:99px;padding:3px 11px;
font-size:12.5px;font-weight:700}
.hero-id{background:rgba(0,0,0,.22);border-radius:99px;padding:3px 11px;
font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.hero-since{margin:9px 0 0;font-size:12px;color:rgba(255,255,255,.72)}
/* ── three numbers ───────────────────────────────────────────────────────*/
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.tile{border-radius:14px;padding:14px 10px;text-align:center;border:1px solid transparent}
.tile-n{font-size:30px;font-weight:800;line-height:1}
.tile-ja{font-size:11.5px;margin-top:5px;opacity:.9}
.tile-en{font-size:10.5px;opacity:.65}
.tile.blue{background:#E8F1FA;color:#14456E;border-color:#CFE1F2}
.tile.green{background:#E6F5EC;color:#146B3A;border-color:#C9E9D6}
.tile.amber{background:#FFF4DC;color:#8A5200;border-color:#F7E1B5}
/* ══ THE CANDIDATE'S BOARD, IN TABS — 15 Sep 2026 ═════════════════════════
* Five tabs, each with its own colour, and ENGLISH LARGER THAN THE JAPANESE —
* which is the opposite of what `.tile-en` did until today (10.5px at 65%
* opacity, under an 11.5px Japanese line). Razib: "large font of english".
* Above them sits `.todo`, which is never hidden by a tab. */
.tile-ja{font-size:10.5px;margin-top:1px;opacity:.7;order:2}
.tile-en{font-size:13px;font-weight:800;opacity:1;margin-top:5px;line-height:1.2;order:1}
.tile{display:flex;flex-direction:column}
.tile-n{order:0}
.todo{display:grid;gap:7px;margin:12px 0 0}
.u{display:flex;gap:10px;align-items:center;border-radius:12px;padding:10px 12px;
border-left:5px solid var(--line);background:var(--surface)}
.u .ic{font-size:17px;line-height:1.2;flex:0 0 auto}
.u .tx{min-width:0}
.u .tx .ja{display:block;font-size:11.5px;color:var(--ink-faint);line-height:1.25}
.u .tx .en{display:block;font-size:15px;font-weight:800;line-height:1.25}
.u.w{border-left-color:#8A5200;background:#FFF4DC;color:#2A2113}
.u.p{border-left-color:var(--bad,#B3261E);background:var(--badbg,#FCEAE8);color:#3A1614}
.u.t{border-left-color:#6A3FA0;background:#F1EBFB;color:#241534}
.u.n{border-left-color:var(--yellow);background:#FFFBEA;color:#2A2113}
/* 🔴 A PRESENT, NOT A CHORE — 27 Sep 2026. The free test Razib asked to have
shown shares a strip built for things that are WRONG: red for money waiting,
amber for writing that never arrived. Green, so a child can tell at a glance
which of these lines is good news. */
.u.f{border-left-color:#1B8A4B;background:#E9F7EE;color:#10331F}
/* 🔴 AND THE STRIP HAD NO DARK COLOURS AT ALL — 27 Sep 2026.
*
* All five of these set a pale background and no text colour, so the words fell
* through to `--ink` — near-black navy in light, and LIGHT BLUE in dark. On a
* dark phone every line in this strip was pale blue on cream: the money
* warning, the missing writing, the interview time. Exactly the fault recorded
* for `.en` on a coloured card, in the one place a child is being told
* something urgent. Every rule here writes both colours out. */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .u.w{background:#332715;border-left-color:#C98F2E;color:#F0DFBC}
:root:not([data-theme="light"]) .u.p{background:#3A1A18;border-left-color:#E0827A;color:#F6D5D1}
:root:not([data-theme="light"]) .u.t{background:#271A38;border-left-color:#A98AD8;color:#E4D8F6}
:root:not([data-theme="light"]) .u.n{background:#332715;border-left-color:#D9B44A;color:#F0E4BC}
:root:not([data-theme="light"]) .u.f{background:#14301F;border-left-color:#4FBF80;color:#CDECD9}
:root:not([data-theme="light"]) .u .tx .ja{color:inherit;opacity:.72}
}
:root[data-theme="dark"] .u.w{background:#332715;border-left-color:#C98F2E;color:#F0DFBC}
:root[data-theme="dark"] .u.p{background:#3A1A18;border-left-color:#E0827A;color:#F6D5D1}
:root[data-theme="dark"] .u.t{background:#271A38;border-left-color:#A98AD8;color:#E4D8F6}
:root[data-theme="dark"] .u.n{background:#332715;border-left-color:#D9B44A;color:#F0E4BC}
:root[data-theme="dark"] .u.f{background:#14301F;border-left-color:#4FBF80;color:#CDECD9}
:root[data-theme="dark"] .u .tx .ja{color:inherit;opacity:.72}
.u .go{margin-left:auto;flex:0 0 auto;border:0;border-radius:9px;padding:8px 12px;
background:var(--navy2,#123047);color:#fff;font-family:inherit;cursor:pointer;min-height:40px}
.u .go .en{display:block;font-size:13.5px;font-weight:800;line-height:1.2}
.u .go .ja{display:block;font-size:10px;opacity:.8;line-height:1.2}
.btabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:14px 0 0}
.btab{background:var(--surface);border:2px solid var(--line);border-bottom-width:4px;
border-radius:11px;padding:8px 3px 7px;text-align:center;font-family:inherit;
color:var(--ink);cursor:pointer;min-height:56px}
.btab .ic{display:block;font-size:16px;line-height:1.1}
.btab .en{display:block;font-size:13.5px;font-weight:800;line-height:1.2;margin-top:3px}
.btab .ja{display:block;font-size:10px;color:var(--ink-faint);line-height:1.2}
.btab .bdg{display:inline-block;min-width:16px;padding:0 4px;border-radius:9px;
background:var(--bad,#B3261E);color:#fff;font-size:10.5px;font-weight:800;
margin-left:3px;vertical-align:1px}
.btab[data-k="test"]{border-bottom-color:#14456E}
.btab[data-k="talk"]{border-bottom-color:#6A3FA0}
.btab[data-k="res"]{border-bottom-color:var(--ok,#1B8A4B)}
.btab[data-k="news"]{border-bottom-color:#8A5200}
.btab[data-k="help"]{border-bottom-color:#0F6F7A}
.btab[aria-selected="true"][data-k="test"]{background:#E8F1FA;border-color:#14456E}
.btab[aria-selected="true"][data-k="talk"]{background:#F1EBFB;border-color:#6A3FA0}
.btab[aria-selected="true"][data-k="res"]{background:var(--okbg,#E6F5EC);border-color:var(--ok,#1B8A4B)}
.btab[aria-selected="true"][data-k="news"]{background:#FFF4DC;border-color:#8A5200}
.btab[aria-selected="true"][data-k="help"]{background:#E6F4F6;border-color:#0F6F7A}
.bpane{display:none;margin-top:12px}
.bpane.on{display:block}
.bquiet{color:var(--ink-faint);font-size:14px;line-height:1.7;
background:var(--surface);border:1px dashed var(--line);border-radius:12px;padding:16px}
/* ── "this book has your name in it" — 25 Sep 2026 ──────────────────────────
Beside the download button, not at the foot of the card in grey. It is a
warning, so it is allowed to be seen; it is not an accusation, so it is amber
and not red. Red on a card belonging to somebody who has just paid reads as
"we think you are a thief", and most of them are not. */
.bwarn{margin:12px 0 0;padding:12px 14px;border-radius:10px;
background:#FFF8E1;border:1px solid #E6D48A;color:#5a4a12}
.bwarn b{display:block;font-size:13.5px;line-height:1.7;margin-bottom:4px}
.bwarn p{margin:0 0 6px;font-size:13px;line-height:1.75}
.bwarn p:last-child{margin-bottom:0}
.bwarn p.en{color:#6b5c2a}
/* ══ THE TWO-FOR-ONE CARD — 26 Sep 2026 ═══════════════════════════════════
*
* The same class names, the same picture and the same wording as /register
* and the free test's result screen. Three screens, one look, so a candidate
* who saw the offer before they had a login recognises it after.
*
* 🔴 EVERY COLOUR IS WRITTEN OUT, EXACTLY AS `.bwarn` ABOVE DOES IT. This card
* stays light gold in dark mode: the drawing inside it is white paper, and
* `--ink` on it would be right while `--en` (#8FC4F5 in the dark theme) would
* be pale blue on cream — 1.8:1, invisible. That trap has shipped on this site
* three times. Nothing in here inherits a colour.
*/
/* 🔴 A FLAT COLOUR UNDER THE GRADIENT — added 1 Oct 2026 while measuring the
board. The shorthand left `background-color` TRANSPARENT, so anything asking
this card what colour it is (a contrast checker, a printer stripping images,
a browser that cannot parse the gradient) was told "nothing" and read the
page behind it. The flat value is the gradient's DARKEST stop, so the answer
it gives is also the worst case. No visual change: it sits underneath. */
.o21{margin:0 0 14px;padding:17px 19px 19px;border-radius:12px;
background-color:#F8E7B4;
background-image:linear-gradient(135deg,#FFFCF2,#FDF3D2 60%,#F8E7B4);
border:1.5px solid #E6D48A}
/* Across the top, not in a side column: the drawing is 480×172 and shrinks to
an unreadable thumbnail beside a paragraph. */
.o21-pic{width:100%;max-width:340px;height:auto;display:block;margin:0 auto 14px}
/* 🔴 NEAR-BLACK ON THE GOLD, NOT WHITE — 1 Oct 2026, measured on the board.
White on #B8912A is 2.95:1. This pill is the campaign's own name
(「キャンペーン実施中 · OFFER ON NOW」) and it has been unreadable on all THREE
screens that carry this card — the board, /register and the free test's score
screen — since it was written on 26 Sep. #2A2208 on the same gold is 5.35:1.
The pill keeps its colour, its size and its place; only the ink changes, so
the one-look rule across the three screens is kept by changing it HERE, once,
rather than overriding it on one of them. */
.o21-tag{display:inline-block;background:#B8912A;color:#2A2208;font-size:11px;
font-weight:800;letter-spacing:.08em;padding:4px 10px;border-radius:999px}
.o21 b{display:block;margin:8px 0 4px;font-size:16px;line-height:1.5;color:#4E3F0C}
.o21 p{margin:0;font-size:13.5px;line-height:1.85;color:#5A4A12}
/* 14px, the floor this site holds English to everywhere else. It was 12.5px:
this is the sentence that explains the offer to a family who cannot read the
Japanese above it, which makes it the only sentence on the card for them.
The colour already measured 5.4:1 on the gradient's darkest stop and is
unchanged. */
.o21 p.en{margin-top:5px;font-size:14px;color:#6B5C2A}
@media (max-width:560px){
.o21{padding:15px 15px 17px}
.o21-pic{max-width:280px}
}
/* One line under a Buy button, for the person who is one purchase away from
it. No picture: this is an answer to "should I", not an advertisement, and
it has to sit quietly against the button above it. */
.o21line{margin:10px 0 0;padding:10px 13px;border-radius:10px;
background:#FFF8E1;border:1px solid #E6D48A}
.o21line b{display:block;font-size:13.5px;line-height:1.7;color:#5a4a12}
.o21line span{display:block;font-size:12.5px;line-height:1.7;color:#6b5c2a;margin-top:2px}
/* ── the restart card, drawn only on the rare day it is owed ─────────────── */
.restart-card{border-left:5px solid var(--yellow)}
.restart-now{font-size:14px;font-weight:800;margin:10px 0 2px;padding:9px 11px;border-radius:9px}
.restart-now.clear{background:var(--okbg,#E6F5EC);color:var(--ok,#1B8A4B)}
.restart-now.busy{background:var(--badbg,#FCEAE8);color:var(--bad,#B3261E)}
/* Open papers, but none of them a child's — a true statement should not wear
the colour of an alarm. */
.restart-now.staffonly{background:var(--amberbg,#FDF1DC);color:var(--amber,#8A5A00)}
.restart-card .btn .en{display:block;font-size:15px;font-weight:800;line-height:1.2}
.restart-card .btn .ja{display:block;font-size:11px;font-weight:600;opacity:.85;line-height:1.2}
.restart-card .btn.arm{background:var(--bad,#B3261E);color:#fff}
/* WHO IS SITTING, as rows he can read — a count was never a fact he could act
on. Tokens only, so the dark blocks at the foot of this file cover it. */
.restart-who{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
padding:9px 11px;margin:5px 0;border:1px solid var(--line);border-radius:9px;
background:var(--surface)}
.restart-who b{font-size:14px}
.restart-who .small{font-size:12px;opacity:.8;margin:2px 0 0}
/* A staff or demo login is the answer to "is this one important?", so it is
allowed to look different at a glance rather than only read differently. */
.restart-who.staff{border-style:dashed;opacity:.85}
.restart-tag{flex:0 0 auto;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;
background:var(--badbg,#FCEAE8);color:var(--bad,#B3261E);white-space:normal;max-width:9.5em;
text-align:center;line-height:1.25}
.restart-who.staff .restart-tag{background:var(--surface2,#EFEFEF);color:var(--ink,#222)}
.restart-force{margin-top:12px;padding:11px;border:1px dashed var(--bad,#B3261E);border-radius:10px}
.restart-force .small{margin:0 0 7px}
.restart-card .btn.force{width:100%}
@media (max-width:420px){
/* The badge stops competing with the name for the same line. */
.restart-who{flex-direction:column}
.restart-tag{max-width:none;align-self:flex-start}
}
@media (max-width:400px){
.btab .ja{display:none}
.btab .en{font-size:12.5px}
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .tile.blue{background:#16293A;color:#9CC8EC;border-color:#22405A}
:root:not([data-theme="light"]) .tile.green{background:#16301F;color:#8FD9AC;border-color:#22482F}
:root:not([data-theme="light"]) .tile.amber{background:#332715;color:#F0C170;border-color:#4A3A1E}
}
:root[data-theme="dark"] .tile.blue{background:#16293A;color:#9CC8EC;border-color:#22405A}
:root[data-theme="dark"] .tile.green{background:#16301F;color:#8FD9AC;border-color:#22482F}
:root[data-theme="dark"] .tile.amber{background:#332715;color:#F0C170;border-color:#4A3A1E}
/* ── the last result, as a headline ──────────────────────────────────────*/
.result-card{border-left:5px solid var(--line);padding-top:16px}
.result-card.pass{border-left-color:var(--ok,#1B8A4B)}
.result-card.fail{border-left-color:var(--bad,#C0392B)}
.result-card.mid{border-left-color:var(--yellow,#F5C542)}
.rc-label{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--ink-faint)}
.rc-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
margin:6px 0 14px}
.rc-band{font-size:38px;font-weight:800;line-height:1;letter-spacing:-.01em}
.result-card.pass .rc-band{color:var(--ok,#1B8A4B)}
.result-card.fail .rc-band{color:var(--bad,#C0392B)}
.rc-right{text-align:right}
.rc-cse{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.rc-sub{font-size:12px;color:var(--ink-faint)}
/* ── buttons: big enough for a thumb, and coloured by what they do ───────*/
.acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.acts .btn{flex:1 1 180px;min-height:46px}
.btn.big{min-height:54px;font-size:16px;font-weight:800;margin-top:4px}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn.buy{background:var(--yellow,#F5C542);color:#12232e;border:0;font-weight:800}
/* ── A FULL-WIDTH BUTTON MUST BE ALLOWED TO WRAP ─────────────────────────
*
* `.btn` is `white-space:nowrap`, which is right for a small button in a row —
* it stops "Save" becoming two lines. It is wrong for these, which are as wide
* as the card and carry a whole bilingual sentence. On a 390px phone the label
* simply ran off the edge and took the ¥ price with it (Razib's photograph,
* 9 Sep 2026).
*
* Only the full-width ones change. They have the width to wrap into, and
* vertical padding so two lines do not push out of the box; `min-height` still
* keeps a one-line button thumb-sized. */
.btn.wide{white-space:normal;line-height:1.35;height:auto;padding:11px 16px;
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:2px 10px;text-align:center}
/* The fee is its own word so it can fall onto its own line intact, and lines up
under itself when several cards are stacked. */
.btn.buy .buy-fee{font-variant-numeric:tabular-nums;font-size:17px}
/* ── one card per grade ──────────────────────────────────────────────────*/
.grade-card{border-left:5px solid var(--line)}
.grade-card.go{border-left-color:var(--ok,#1B8A4B)}
.grade-card.hold{border-left-color:var(--yellow,#F5C542)}
.gc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
flex-wrap:wrap;margin-bottom:8px}
.gc-name{font-size:18px;font-weight:800}
.gc-say{font-size:13.5px;line-height:1.65;margin:0 0 12px}
.gc-say.en{color:var(--ink-faint);margin-top:-6px}
/* ── the record ──────────────────────────────────────────────────────────*/
.test-row{display:flex;align-items:center;gap:10px;padding:11px 0;
border-bottom:1px solid var(--line)}
.test-row:last-child{border-bottom:0}
.test-row > div:first-child{flex:1 1 auto;min-width:0}
.test-row b{display:block;font-size:14.5px}
.test-row .small{display:block;margin-top:1px}
.card-h{font-size:15px;margin:0 0 10px;font-weight:700}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-variant-numeric:tabular-nums;letter-spacing:.02em}
.card.news{border-left:5px solid var(--yellow,#F5C542)}
.card.news .btn-s{margin-top:10px}
.chip.ok{background:var(--okbg);color:var(--ok)}
/* ── paying ──────────────────────────────────────────────────────────────*/
.paybox{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.refline{display:flex;align-items:center;justify-content:space-between;gap:12px;
background:var(--surface2);border:1px dashed var(--line);border-radius:10px;
padding:12px 14px;margin:8px 0 12px}
.refline b{font-size:20px;letter-spacing:.06em}
.paymethod{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.paymethod b{display:block;margin-bottom:6px;font-size:13.5px}
.paymethod .kv{padding:5px 0;font-size:13.5px}
/* The Pay now button, for a method that carries a link — the card checkout
and the PayPay link. The SAME shape and weight as the one on /register:
one action must not have two looks. A full 48px, so a thumb cannot miss
the last step between a decision and the money.
🔴 BOTH COLOURS WRITTEN OUT, IN BOTH THEMES. `--navy` is a LIGHT blue
after dark (#8FB4CC), so `background:var(--navy);color:#fff` would paint
white on pale blue — the same trap as the site-wide `.en` colour, on the
one button that takes money. */
.paygo{display:block;width:100%;margin:10px 0 2px;min-height:48px;line-height:48px;
text-align:center;background:#143143;color:#FFFFFF;text-decoration:none;
font-weight:700;font-size:15px;border-radius:9px;border:0}
.paygo:hover{background:#1F4A63}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .paygo{background:#2E6183;color:#FFFFFF}
:root:not([data-theme="light"]) .paygo:hover{background:#3C7FA6}
}
:root[data-theme="dark"] .paygo{background:#2E6183;color:#FFFFFF}
:root[data-theme="dark"] .paygo:hover{background:#3C7FA6}
/* Anything a CANDIDATE presses is at least 44px tall. They are children, often
on a phone, sometimes in a hurry before a clock starts. The admin panel keeps
its denser rows on purpose — a teacher at a laptop with a mouse is a different
person with a different problem. */
.dash .btn-s{min-height:44px;padding:0 16px;font-size:13.5px}
#btnLogout{min-height:40px}
@media (max-width:400px){
.tiles{gap:7px}
.tile-n{font-size:25px}
.hero-name{font-size:22px}
.rc-band{font-size:32px}
}
/* ── printing IS the PDF button ──────────────────────────────────────────
The result page is the only thing anyone prints here, so the rule is simply:
keep the result, drop the furniture. */
@media print{
.top,.adm-rail,.noprint,button{display:none!important}
body{background:#fff;color:#000}
.wrap,.dash{max-width:100%;margin:0;padding:0}
.card{border:1px solid #ccc;break-inside:avoid;page-break-inside:avoid}
a[href]:after{content:""}
}
/* ── THE HEADING THAT SAYS WHOSE DOOR THIS IS — 25 Sep 2026 ─────────────────
Razib: organise the log-in logically. Every way in is now its own card, and
every card starts with a line naming the person it is for — Google account,
teacher's ID, never been here. Nobody has to try a door to find out whether
it is theirs. Used on the log-in screen and the forgotten-password page. */
.cardh{margin:0 0 4px;font-size:15.5px;font-weight:700;color:var(--navy);line-height:1.5}
.cardh .en{display:block;font-size:13px;font-weight:600;color:var(--ink-soft)}
/* The way back in, for a login that now lasts for years. */
.forgot{display:block;text-align:center;margin-top:12px;font-size:13px;
color:var(--ink-soft);text-decoration:none}
.forgot:hover{text-decoration:underline}
/* The deadline, said plainly on the card rather than buried in an old email. */
.deadline{margin-top:12px;padding:10px 12px;border-radius:10px;
background:var(--surface2);border:1px solid var(--line);font-size:13px}
.deadline b{display:block;font-size:13.5px}
.deadline span{display:block;color:var(--ink-faint);margin-top:2px}
.deadline.soon{background:#FFF4DC;border-color:#F7E1B5;color:#8A5200}
.deadline.soon span{color:#8A5200;opacity:.8}
/* ── Marking ──────────────────────────────────────────────────────────────
The screen that was lost when the panel was rebuilt into sections. A teacher
works down it: what the machine already knows, what the student wrote, the
photographs of their handwriting, then the boxes to type marks into. */
.mk-h{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-faint);margin:0 0 10px}
.shots{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.shots a{position:relative;display:block;width:150px;border:1px solid var(--line);
border-radius:8px;overflow:hidden;background:var(--surface2)}
.shots img{display:block;width:100%;height:auto}
.shot-late{position:absolute;top:6px;right:6px;background:var(--yellow);color:#12232e;
font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:99px}
/* A photograph this browser cannot DRAW — a HEIC from an iPhone, say. The frame
keeps its size and its link and names the format, because an empty frame in a
marking strip reads as "the child sent nothing". See the note in app.js. */
.shot-raw{display:flex;flex-direction:column;justify-content:center;gap:6px;
min-height:130px;padding:14px 12px;text-align:center;background:var(--surface2)}
.shot-raw b{font-size:17px;font-weight:800;letter-spacing:.06em;color:var(--ink)}
/* 14px and the page's full-strength ink, not the soft one: this sentence is the
only thing standing between a teacher and "the child sent nothing". */
.shot-raw small{font-size:14px;line-height:1.5;color:var(--ink)}
.shell:has(#view .adm) .shot-raw b,
.shell:has(#view .adm) .shot-raw small{color:var(--sky-ink,var(--ink))}
/* ══ THE RESULT SHEET ═════════════════════════════════════════════════════
Printed and handed to a student in class, and read by a parent afterwards.
So: the school's mark at the top, the verdict where the eye lands first,
and the small print genuinely small but never hidden. It has to survive a
black-and-white printer, which is why nothing depends on colour alone. */
.sheet{max-width:660px;margin:26px auto 70px;padding:0 18px}
.sh-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
padding-bottom:14px;border-bottom:2.5px solid var(--navy2,#123047);flex-wrap:wrap}
.sh-brand{display:flex;align-items:center;gap:12px}
.sh-logo{width:46px;height:46px;border-radius:50%;display:block}
.sh-school{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.sh-kind{font-size:12px;color:var(--ink-faint);margin-top:2px}
.sh-meta{text-align:right}
.sh-grade{font-size:15px;font-weight:700}
.sh-date{font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.sh-who{padding:16px 0 18px}
.sh-name{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.sh-id{display:flex;flex-wrap:wrap;gap:14px;margin-top:5px;font-size:12.5px;
color:var(--ink-faint);font-variant-numeric:tabular-nums}
/* The verdict. Colour AND weight AND a rule, so a mono printer still shows it. */
.sh-verdict{display:flex;justify-content:space-between;align-items:center;gap:16px;
border:2px solid var(--line);border-left-width:7px;border-radius:12px;
padding:16px 20px;margin-bottom:22px;flex-wrap:wrap}
.sh-verdict.pass{border-color:var(--ok);background:var(--okbg)}
.sh-verdict.fail{border-color:var(--bad);background:var(--badbg)}
.sh-verdict.mid{border-color:var(--yellow)}
.sh-word{font-size:36px;font-weight:800;line-height:1;letter-spacing:-.02em}
.sh-verdict.pass .sh-word{color:var(--ok)}
.sh-verdict.fail .sh-word{color:var(--bad)}
.sh-note{font-size:12px;color:var(--ink-soft);margin-top:5px}
.sh-nums{text-align:right}
.sh-cse{font-size:27px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.sh-outof{font-size:11.5px;color:var(--ink-soft);margin-top:3px}
.sh-block{margin-bottom:20px}
.sh-h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-faint);padding-bottom:7px;border-bottom:1px solid var(--line);
margin-bottom:12px}
.sh-skill{margin-bottom:14px}
.sh-skill-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
margin-bottom:5px;flex-wrap:wrap}
.sh-skill-name{font-size:14.5px;font-weight:600}
.sh-skill-val{display:flex;gap:14px;align-items:baseline;font-size:12.5px;
color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.sh-pct{font-weight:700;color:var(--ink);min-width:38px;text-align:right}
.sh-cse-small{color:var(--ink-faint)}
.sh-track{position:relative;height:9px;border-radius:99px;background:var(--surface2);
border:1px solid var(--line);overflow:hidden}
.sh-fill{height:100%;background:var(--navy2,#123047);border-radius:99px}
.sh-track.weak .sh-fill{background:var(--bad)}
.sh-tick{position:absolute;top:-3px;bottom:-3px;left:60%;width:2px;background:var(--ink-faint)}
.sh-legend{font-size:11.5px;color:var(--ink-faint);margin:10px 0 0}
.sh-line{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
border-bottom:1px solid var(--line);font-size:14px}
.sh-line:last-child{border-bottom:0}
.sh-line b{font-variant-numeric:tabular-nums;white-space:nowrap}
.sh-focus-row{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.sh-focus-row:last-child{border-bottom:0}
.sh-focus-n{flex:0 0 22px;height:22px;border-radius:50%;background:var(--navy2,#123047);
color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;
justify-content:center}
.sh-focus-row b{display:block;font-size:14px}
.sh-focus-row p{margin:2px 0 0;font-size:13px;color:var(--ink-soft);line-height:1.55}
.sh-foot{border-top:2px solid var(--line);margin-top:26px;padding-top:14px}
.sh-foot p{font-size:11px;line-height:1.6;color:var(--ink-faint);margin:0 0 8px}
.sh-foot p:last-child{margin-bottom:0}
@media print{
/* THE WHOLE PAGE, NOT ONE SCREENFUL.
`body{height:100vh; overflow:hidden}` is right for an exam that must not
scroll away under a candidate — and it meant the printer received exactly
one viewport. Razib's first PDF started halfway down the sheet: no logo, no
name, no PASS. A fixed-height app has to be released from that height
before anyone prints it. */
html, body{height:auto!important;min-height:0!important;overflow:visible!important;
display:block!important;background:#fff}
#view, .main, .wrap, .adm, .adm-main{height:auto!important;max-height:none!important;
overflow:visible!important;display:block!important;padding:0!important}
.top, .adm-rail, .noprint, button, .acts{display:none!important}
/* ONE SHEET OF PAPER. The first print ran to two pages with a third of the
first left blank, because `break-inside:avoid` on whole blocks pushed the
writing table over rather than letting it flow. A result a school hands to
a child should be one page: it goes in a folder, not a stapler.
So: keep breaks off the small units only, and tighten everything. */
.sheet{max-width:100%;margin:0;padding:0;font-size:12px}
.sh-verdict, .sh-focus-row, .sh-skill{break-inside:avoid}
.sh-head, .sh-who, .sh-h{break-after:avoid}
.sh-who{padding:7px 0 9px}
.sh-name{font-size:20px}
.sh-verdict{padding:10px 15px;margin-bottom:11px;border-radius:9px}
.sh-word{font-size:27px}
.sh-cse{font-size:21px}
.sh-block{margin-bottom:10px}
.sh-h{padding-bottom:5px;margin-bottom:8px;font-size:9.5px}
.sh-skill{margin-bottom:7px}
.sh-skill-name{font-size:12px}
.sh-skill-val{font-size:10.5px;gap:11px}
.sh-track{height:7px}
.sh-legend{font-size:9.5px;margin-top:7px}
.sh-line{padding:4px 0;font-size:11.5px}
.sh-focus-row{padding:6px 0}
.sh-focus-row b{font-size:11.5px}
.sh-focus-row p{font-size:10.5px;line-height:1.45}
.sh-focus-n{flex-basis:18px;height:18px;font-size:10px}
.sh-foot{margin-top:10px;padding-top:7px}
.sh-foot p{font-size:8.5px;line-height:1.5;margin-bottom:5px}
/* Seven writing criteria in one column is five wasted centimetres. */
.sh-writing-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:26px}
/* Colour carries meaning here — the verdict, the bars, the numbered steps —
so it must survive the printer's default of stripping backgrounds. */
.sh-verdict, .sh-fill, .sh-track, .sh-focus-n, .sh-logo{
-webkit-print-color-adjust:exact;print-color-adjust:exact}
.sh-foot{break-inside:avoid}
@page{margin:12mm}
}
/* ── the classroom demonstration band ────────────────────────────────────
Fixed to the top of the window and above everything, including the exam
shell, because the exam shell is exactly where it matters most: a teacher
walks the class through a screen built to look like the real S-CBT, and
nobody in the room should be able to mistake one for the other.
Red, not yellow: the exam screen is already full of yellow. */
.demoband{
position:fixed; top:0; left:0; right:0; z-index:9999;
background:#A8231B; color:#fff; padding:7px 14px;
display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
font-size:13px; line-height:1.5; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.demoband b{font-size:13px; letter-spacing:.1em; flex:0 0 auto}
.demoband span{opacity:.94}
/* Everything else moves down by the band's height rather than sliding under
it. Set from JavaScript once the band is measured, because the text wraps to
two lines on a phone and a hard-coded offset would be wrong there. */
body.is-demo .shell, body.is-demo .exam{padding-top:var(--demoband, 34px)}
/* On a phone the full sentence wrapped to three lines and took an eighth of the
screen away from the exam it is describing. The short form says the one thing
that matters; the long form is there for the projector, which is where a class
is actually reading it. */
.demoband .long{display:none}
@media (min-width:620px){
.demoband .short{display:none}
.demoband .long{display:inline}
}
/* ── grade cards that cannot be started ──────────────────────────────────
A locked grade is quieter than the rest: it is there to show a student the
ladder, not to invite them. A grade already sat is NOT dimmed — finishing
your exam is an achievement, and greying it out reads like a refusal. */
.grade-card.locked{opacity:.62}
.grade-card.locked .gc-name{color:var(--ink-soft)}
.grade-card.done{border-left:4px solid var(--ok)}
/* ── who marked what, under a row in the Marking list ────────────────────*/
.whodid{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 10px}
.stamp{
display:inline-flex;align-items:baseline;gap:7px;font-size:12.5px;
background:var(--surface2);border:1px solid var(--line);
border-radius:99px;padding:3px 11px;color:var(--ink-soft);
}
.stamp b{font-weight:700;color:var(--ink-faint);font-size:11px;
letter-spacing:.06em;text-transform:uppercase}
.stamp .dim{color:var(--ink-faint)}
/* Green only when a person's name is actually on it. A grey stamp is a job
still to be done, and it should look like one across a long list. */
.stamp.done{background:var(--okbg);border-color:transparent;color:var(--ok)}
.stamp.done b{color:var(--ok);opacity:.75}
/* ── the Principal's "see it as they do" switch ──────────────────────────*/
.viewas{display:flex;gap:4px;margin:0 0 14px;padding:3px;border-radius:8px;
background:rgba(255,255,255,.07)}
.viewas button{
flex:1;font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.05em;
padding:6px 4px;border:0;border-radius:6px;background:transparent;
color:rgba(255,255,255,.6);cursor:pointer;
}
.viewas button[aria-pressed="true"]{background:var(--yellow);color:#12232e}
.viewas-note{font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.72);
margin:0 0 14px;padding:8px 10px;border-radius:6px;background:rgba(255,255,255,.07)}
/* ── choosing a time for the interview ───────────────────────────────────*/
.speak-card{border-left:4px solid var(--navy2)}
.gc-say.big{font-size:20px;font-weight:700;color:var(--ink);margin:2px 0 6px}
.slotday{margin:12px 0 0}
.slotday-h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-faint);margin:0 0 6px}
.slots{display:flex;flex-wrap:wrap;gap:8px}
/* 48px, not the usual 44: this is one tap that fixes an appointment, and the
buttons sit shoulder to shoulder where a near-miss picks the wrong hour. */
.slotbtn{
min-height:48px;min-width:84px;padding:0 16px;font:inherit;font-size:16px;font-weight:700;
border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
border-radius:10px;cursor:pointer;
}
.slotbtn:hover{border-color:var(--navy2);background:var(--surface2)}
.slotbtn:disabled{opacity:.4}
/* the Mine / Everybody switch on the timetable */
.seg{display:inline-flex;gap:4px;margin:0 0 14px;padding:3px;border-radius:9px;
background:var(--surface2);border:1px solid var(--line)}
.seg button{font:inherit;font-size:13px;font-weight:600;padding:7px 16px;min-height:38px;
border:0;border-radius:6px;background:transparent;color:var(--ink-soft);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--navy);color:#fff}
/* ── "what to do next", on the screen a candidate sees the moment they submit
A block, not a line. They have just finished an exam and are reaching for the
lid of the laptop; the one remaining task has to be the loudest thing there. */
.nextup{
background:var(--navy);color:#fff;border-radius:12px;
padding:22px 20px;margin:18px 0 14px;text-align:left;
}
.nextup-k{font-size:11.5px;letter-spacing:.14em;font-weight:700;color:var(--yellow);
margin:0 0 12px}
.nextup h2{font-size:20px;line-height:1.5;margin:0 0 6px;color:#fff}
.nextup h2.en{font-size:17px;margin-top:14px;color:#DCE7EE}
.nextup p{font-size:14.5px;line-height:1.75;margin:0;color:#C6D6E1}
.nextup p.en{color:#A9BECC}
.nextup .btn{margin-top:18px}
.nextup .tiny{font-size:12.5px;margin-top:10px;color:#8FA6B6}
/* ── the host login panel ──────────────────────────────────────────────────
*
* Drawn only after somebody presses 🔑, and only for the room they pressed it
* on. It carries a shared account, so it looks like something to be careful
* with rather than like the rest of the row.
*/
.hostbox{
margin:2px 0 12px;padding:12px 14px;border-radius:10px;
background:var(--surface);border:1px solid var(--line);
border-left:4px solid var(--warn,#B8860B);
}
.hostbox .small{margin:0 0 8px}
.hostbox .kv{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0}
.hostbox .kv-k{font-size:12px;color:var(--ink-faint);min-width:130px}
.hostbox .kv-v{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
/* 🔴 `var(--bg)` — A TOKEN THIS PROJECT HAS NEVER DEFINED, found 1 Oct 2026.
It was here, on `.fc-c` further down, and three times in free.html. An
unknown custom property is invalid at computed-value time, so the
declaration is thrown away and the box is simply never painted: these
panels have been transparent since the day they were written, and they
looked right only because whatever sat behind them happened to be the
right colour. `--surface2` is the quiet fill this file actually owns, and
it has a dark-mode value, which `--bg` never would have had. */
background:var(--surface2);border:1px solid var(--line);border-radius:6px;
padding:4px 9px;user-select:all;word-break:break-all;
}
.hostbox .kv-v.secret{letter-spacing:.5px}
.hostbox .warn{color:var(--bad);font-weight:600;margin:10px 0 0}
/* ══ ENGLISH IS NOT THE SMALL PRINT ═══════════════════════════════════════
*
* Razib, 1 Sep 2026, looking at the listening screen on a phone:
*
* "still some place only japanese, should be english also. english should be
* more visible, now it is difficult to see, font could be big and different
* color. in mobile same messege is not in the box."
*
* He was right on all three counts, and the third one is the worst. The audio
* box was `white-space:nowrap; text-overflow:ellipsis`, so on a narrow screen
* it read "音声を再生してください · Press play to start the…" — and the half that
* got cut is the half a candidate who does not read Japanese depends on. A
* design that truncates one language always truncates the same one.
*
* Underneath that was a habit: every English line was styled as `small` — 11px,
* grey, half-opacity — because it was thought of as a gloss on the real
* instruction. It is not a gloss. For some of these children it IS the
* instruction, and this is an English exam.
*
* So, everywhere in the exam:
* · English gets its OWN LINE and never a nowrap ellipsis;
* · it is 13.5–15px, never 11px;
* · it is a colour of its own, so the eye can find it without reading —
* ink-blue on light, pale blue on dark, navy on the yellow play button.
*
* A candidate must never have to guess what a button does. Nothing here
* removes a Japanese word; it stops the English from being decoration.
*/
:root{ --en:#12467a; --en-on-dark:#BDDCFA; --en-on-yellow:#173A5E; }
@media (prefers-color-scheme:dark){ :root{ --en:#8FC4F5; } }
/* the audio box — the one he photographed */
.exstatus{
white-space:normal;overflow:visible;text-overflow:clip;
display:flex;flex-direction:column;gap:2px;line-height:1.45;
}
.exstatus b{font-size:14px;font-weight:700}
.exstatus .en{font-size:13.5px;font-weight:600;color:var(--en-on-dark);white-space:normal}
/* 音声は10秒後に自動で始まります / The audio starts by itself in N seconds
*
* This is INFORMATION, not an alarm. A child who is about to be spoken to by
* the computer should be told calmly — a red warning box here would make them
* think something had gone wrong with their paper. Same shape as the status
* line above it, one step quieter, and it removes itself when the audio
* starts. */
.exauto{margin-top:6px;opacity:.92}
.exauto b{font-weight:600}
/* ▶ この部の音声を再生する / Play the audio for this part */
.explay{font-size:15px}
.explay small{
display:block;font-weight:700;font-size:13.5px;
color:var(--en-on-yellow);margin-top:3px;letter-spacing:.01em;white-space:normal;
}
/* the English under an official Japanese instruction, in the paper itself */
.exbanden{font-size:14.5px;font-weight:500;color:var(--en);line-height:1.65;margin-top:5px}
/* the part header in the panel — 大問1 / Part 1 */
.exph small{font-weight:600;font-size:13px;color:#20405e}
/* the camera button */
.excam small{font-weight:600;font-size:13.5px;opacity:1;color:var(--en-on-dark)}
/* the grey buttons: Proceed / Finish / Go to the listening test */
.exbtn small{display:block;font-weight:600;font-size:13px;color:var(--en-on-dark);margin-top:2px}
.exfinish small{font-weight:600;font-size:13px}
@media (max-width:900px){
/* THE TOP BAR STOPPED SHOWING ENGLISH AT ALL on a phone — `display:none` on
the very line that says which paper this is. Shown, wrapped, smaller. */
.exbar{flex-wrap:wrap}
.exbar-l{flex-wrap:wrap;align-items:center}
.exbar-l small{display:inline;font-size:12.5px;font-weight:600;color:var(--en);flex-basis:100%}
.exbar-l span{white-space:normal;overflow:visible;text-overflow:clip}
.exstatus{padding:8px 10px}
}
/* the late-writing card on the candidate's own board */
.late-writing{border-left:4px solid #C0392B}
.late-writing h2{margin-top:0}
.late-writing .sub{font-size:15px;font-weight:600;color:var(--en);margin:2px 0 10px}
.exshot.good{border-color:#1F7A45;border-width:2px}
.exshot.good .st{background:#1F7A45;color:#fff}
.exshot .st{white-space:normal;line-height:1.25;font-size:10.5px}
/* the running "did the photo go?" line in the side panel */
.exdone.good{background:#E2EFDA;color:#1F7A45;border-color:#1F7A45;font-weight:700}
.exdone.bad{background:#FCE4E4;color:#C00000;border-color:#C00000;font-weight:700}
/* the English half of a two-line notice inside an .exinfo box */
.exinfo .en{color:var(--en);font-size:14px;font-weight:600;line-height:1.6}
.exinfo b.en{display:inline-block;margin-top:6px}
/* ⏱ a paper that ran past its own clock. Not an accusation — a fact for the
teacher, and only shown when it is true, so it still means something. */
.stamp.bad-stamp{background:var(--badbg);color:var(--bad);border-color:var(--bad);font-weight:700}
/* ── the trademark line ──────────────────────────────────────────────────────
Small, quiet, and on every screen outside the exam itself. It is a legal
statement rather than a design element, so it is styled to be readable and
ignorable at the same time: a disclaimer nobody can find is not a disclaimer,
and one that shouts at a child before a test is not kind. It lives inside
#shellNaks, so it disappears with that shell when the exam starts — the exam
screen mirrors the real S-CBT, which has no footer, and the same words are
said on the briefing card immediately before the clock starts instead. */
.legal-foot{padding:8px 16px 16px;margin-top:16px;border-top:1px solid var(--line)}
.legal-foot .legal{max-width:740px;margin:0 auto;font-size:11.5px;line-height:1.75;
color:var(--legal-ink)}
/* FOLDED BY DEFAULT — see the comment on the