/* ERA Word Picker — browser version.
   The palette is lifted verbatim from word_picker.py so the two versions look
   like the same program. Names are roles, not colors, for the same reason. */
:root{
  --navy:#1D4E7A; --red:#F2635F; --gloss:#E0A144; --ink:#E8EEF3;
  --muted:#8FA6B8; --band:#0E1B24; --paper:#14242F; --good:#3ECF7C;
  --strip:#1B3E60; --accent:#7FB6E6; --raised:#1D3446; --field:#0B1720;
  --hover-quiet:#274456; --hover-navy:#2A6396;
  --lamp-off:#22384A; --lamp-red:#E03A3A; --lamp-green:#25C065;
  --stage:#0E2233; --check:#DCE6EE;
  --ui:"Segoe UI",system-ui,-apple-system,sans-serif;
  --zh:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",var(--ui);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--paper); color:var(--ink); font:14px/1.45 var(--ui);
  display:flex; flex-direction:column; min-height:100vh;
}
.hidden{display:none !important}
.spacer{flex:1}
.hint{color:var(--muted); font-style:italic; font-size:12px}

/* ---------------------------------------------------------------- header */
.head{
  background:var(--navy); display:flex; align-items:center; gap:14px;
  padding:12px 18px;
}
.emblem{width:60px; height:52px; flex:none}
/* Each lamp glows faintly and fades, the next about a second behind, then the
   emblem rests for the back half: an echo of the countdown the child is about
   to see, not a distraction sitting in the header all lesson. The 1s delays are
   what make it read as a sequence -- at half that the three looked simultaneous.
   Kept in step with WARM_CYCLE / WARM_LEAD / WARM_ON in word_picker.py. */
.emblem .lamp{animation:warm 9s ease-in-out infinite}
.emblem .lamp:nth-child(2){animation-delay:1s}
.emblem .lamp:nth-child(3){animation-delay:2s}
@keyframes warm{
  0%,100%{fill:var(--lamp-off)}
  7%{fill:#5A2A2E}
  14%{fill:#8E3437}
  21%{fill:#5A2A2E}
  28%,99%{fill:var(--lamp-off)}
}
@media (prefers-reduced-motion:reduce){
  .emblem .lamp{animation:none}
}
.titles{min-width:0}
.titles h1{margin:0; font-size:22px; font-weight:700; color:#fff}
.titles p{margin:1px 0 0; font-size:12px; color:#B9CBDC}
.mode{margin-left:auto; display:flex; align-items:center; gap:10px}
.mode-lbl{font-size:12px; font-weight:700; color:#B9CBDC; letter-spacing:.4px}
.mode-lbl.on{color:var(--good)}

/* ---------------------------------------------------------------- buttons */
.btn{
  font:inherit; font-weight:700; font-size:13px; border:0; border-radius:3px;
  padding:7px 14px; cursor:pointer; color:var(--ink); background:var(--raised);
}
.btn:hover:not(:disabled){background:var(--hover-quiet)}
.btn.strong{background:var(--navy); color:#fff}
.btn.strong:hover:not(:disabled){background:var(--hover-navy)}
.btn.big{font-size:17px; padding:13px 30px}
.btn:disabled{opacity:.42; cursor:default}

/* ---------------------------------------------------------------- strip */
.strip{background:var(--strip); padding:10px 18px; display:flex;
  align-items:center; gap:10px; flex-wrap:wrap}
.strip .who{font:700 15px var(--zh); color:#fff}
.strip .sub{font-size:12px; color:#B9CBDC}
.strip .none{font-weight:700; font-size:12px; color:#9FB8CE; letter-spacing:.4px}
.strip .btns{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.strip .btn{background:var(--strip); color:#fff; box-shadow:inset 0 0 0 1px #2F5C86}
.strip .btn:hover:not(:disabled){background:#3A6B99}
.strip .btn.strong{background:#2F5C86; box-shadow:none}

/* -------------------------------------------------------------- controls */
.controls{background:var(--band); padding:14px 18px; display:flex;
  flex-direction:column; gap:7px}
.row{display:flex; align-items:center; gap:12px}
.row label{width:52px; flex:none; font-weight:700; font-size:13px;
  color:var(--accent)}
select,input[type=number],input[type=text],input[type=password]{
  font:inherit; background:var(--field); color:var(--ink); border:1px solid #24405480;
  border-radius:3px; padding:6px 8px;
}
select{flex:1; min-width:0}
select:disabled,input:disabled{opacity:.5}
.info{margin:0 0 4px 64px; font-size:12px; font-style:italic; color:var(--muted)}
.opts{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.opts .lbl{font-weight:700; font-size:13px; color:var(--accent)}
.opts input[type=number]{width:64px}
.chk{display:flex; align-items:center; gap:6px; font-size:13px}
.quizrow{margin-top:6px}

/* --------------------------------------------------------------- results */
.pane{flex:1; overflow:auto; padding:16px 22px}
.pane h2{margin:0; font-size:19px; color:var(--accent)}
/* pre-line so the class/grade line and the count line stack, the way the two
   header lines do in the desktop app. */
.pane .meta{margin:2px 0 14px; font-size:12px; color:var(--muted);
  white-space:pre-line}
.pane .meta.note{margin:18px 0 0}
.word{margin:0 0 14px}
.word .hd{display:flex; gap:9px; align-items:baseline}
.word .n{color:var(--muted); font-size:12px; min-width:22px}
.word .w{font-weight:700; font-size:17px}
.word .w.red{color:var(--red)}
.word .pos{font-style:italic; font-size:12px; color:var(--muted)}
.word .dagger{color:var(--gloss); font-weight:700}
.word .mean{margin:2px 0 0 31px; font-size:13px}
/* One sense per line: star column, English gloss, then the hanzi -- the same
   order and the same emphasis the desktop app gives them, so a list read on
   screen here and a list read from the .exe look like one program. */
.word .sense{margin:2px 0 0 31px; font-size:13px}
.word .sense.first{font-weight:700}
.word .sense .star{display:inline-block; width:15px; color:var(--gloss)}
.word .sense .g{color:var(--muted); font-size:12px; margin-right:8px}
.word .sense.first .g{color:var(--ink)}
.word .sense .zh{font-family:var(--zh); color:var(--accent)}
.word .advrule{margin:6px 0 2px 31px; font:700 10px var(--ui);
  color:var(--gloss); letter-spacing:.8px}
.word .sense.adv .zh,.word .sense.adv .g{color:var(--muted)}
.locked h2{color:var(--accent)}

/* ------------------------------------------------------------- sign in */
.gateform{display:flex; flex-direction:column; gap:6px; text-align:left;
  margin-top:18px}
.gateform label{font-weight:700; font-size:12px; color:var(--accent)}
.gateform input{font-size:16px; padding:9px 10px}
.gateform .err{color:var(--red); font-weight:700; font-size:12px;
  min-height:16px; margin:2px 0 0}
.gateform .btn{margin-top:8px}

/* The staff way in. Deliberately quiet: a parent should not be invited to
   press it, but staff must be able to find it without being told twice. */
.staff{background:none; border:0; color:var(--muted); font:inherit;
  font-size:11px; padding:2px 6px; cursor:pointer; opacity:.5}
.staff:hover{opacity:1; color:var(--accent)}

/* -------------------------------------------------- the family's view */
.home{flex:1; display:flex; align-items:center; justify-content:center;
  padding:26px 18px}
.home .card{background:var(--band); border-radius:6px; padding:26px 28px;
  width:min(560px,100%); text-align:center}
.home .who{margin:0; font:700 13px var(--zh); color:var(--accent);
  letter-spacing:.4px}
.home h2{margin:6px 0 2px; font-size:23px; color:var(--ink)}
.home .kind{margin:0; color:var(--muted); font-size:13px}
.home .note{margin:14px 0 0; color:var(--muted); font-size:13px}
.home .acts{margin-top:20px; display:flex; gap:10px; justify-content:center;
  flex-wrap:wrap}
.home .res{text-align:left; margin-top:18px}
.hw{margin-top:18px; text-align:left; display:flex; flex-direction:column;
  gap:8px}
.hw .item{background:var(--field); border-radius:4px; padding:11px 13px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.hw .item .t{flex:1; min-width:0}
.hw .item .u{font-weight:700; font-size:14px}
.hw .item .s{font-size:11px; color:var(--muted)}
.hw .none{color:var(--muted); font-size:13px; font-style:italic}
.hw .done .u{color:var(--muted); font-weight:400}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--band); padding:9px 18px; font-size:12px;
  color:var(--muted); min-height:34px; display:flex; align-items:center;
  gap:10px}

/* --------------------------------------------------------------- dialogs */
.veil{position:fixed; inset:0; background:#0008; display:flex;
  align-items:center; justify-content:center; z-index:40; padding:20px}
.dialog{background:var(--paper); border-radius:4px; width:min(520px,100%);
  max-height:90vh; overflow:auto; box-shadow:0 18px 60px #000a}
.dialog .dhead{background:var(--navy); padding:12px 18px}
.dialog .dhead h3{margin:0; font-size:17px; color:#fff}
.dialog .dhead p{margin:2px 0 0; font-size:12px; color:#B9CBDC}
.dialog .dbody{padding:16px 18px; display:flex; flex-direction:column; gap:10px}
.dialog .dbody label{font-weight:700; font-size:13px; color:var(--accent)}
.dialog .dbody input,.dialog .dbody select{width:100%}
/* Whose record the quiz will land in, said in the blue bar before the quiz is
   set up. Green when a student is open, red when nobody is. */
.dialog .dhead .saving{margin:3px 0 0; font-weight:700; font-size:12px}
.dialog .dhead .saving.ok{color:#8FD3AC}
.dialog .dhead .saving.no{color:#E9A6A9}
/* Captions and radio groups, laid out like the desktop setup dialog: the
   caption flush left, its choices indented under it. */
.dialog .dbody .cap{margin:6px 0 0; font-weight:700; font-size:13px;
  color:var(--accent)}
.dialog .dbody .cap:first-child{margin-top:0}
.dialog .dbody .radios{display:flex; flex-direction:column; gap:5px;
  margin:0 0 4px 10px}
.dialog .dbody .radio{display:flex; align-items:center; gap:8px;
  font-weight:400; font-size:13px; color:var(--ink); cursor:pointer}
.dialog .dbody .radio input{width:auto; margin:0}
.dialog .dbody .numrow{display:flex; align-items:center; gap:12px}
.dialog .dbody .numrow label{flex:none}
.dialog .dbody .numrow input{width:76px; text-align:center; font-size:15px}
.dialog .dbody .note{margin:2px 0 0; font-style:italic; font-size:12px;
  color:var(--muted)}
.dialog .dfoot{background:var(--band); padding:11px 18px; display:flex;
  gap:8px; justify-content:flex-end}
.dialog .err{color:var(--red); font-weight:700; font-size:12px; min-height:16px}
.list{max-height:46vh; overflow:auto; background:var(--field); border-radius:3px}
.list button{display:block; width:100%; text-align:left; background:none;
  border:0; color:var(--ink); font:inherit; padding:9px 12px; cursor:pointer}
.list button:hover{background:var(--raised)}
.list button.on{background:var(--navy); color:#fff}
.list .l2{display:block; font-size:11px; color:var(--muted)}
.list button.on .l2{color:#cfe0ef}

/* ------------------------------------------------------------ quiz stage */
.stage{position:fixed; inset:0; background:var(--paper); z-index:50;
  display:flex; flex-direction:column}
.qhead{background:var(--navy); color:#fff; padding:9px 18px; display:flex;
  align-items:center; gap:14px; font-weight:700; font-size:13px}
.qhead #qUnit{font-weight:400; color:#B9CBDC; font-size:12px; flex:1;
  text-align:center}
.qbody{flex:1; overflow:auto; padding:22px; display:flex;
  flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px}
.qfoot{background:var(--band); padding:12px 18px; display:flex; gap:10px;
  align-items:center}
#qButtons{display:flex; gap:10px}
.track{width:100%; height:58px; display:block; background:var(--stage)}

/* the question */
.prompt{color:var(--muted); font-size:14px; margin:0}
.qword{font-size:40px; font-weight:700; margin:4px 0}
.qword.red{color:var(--red)}
.qpos{font-style:italic; color:var(--muted); font-size:13px; margin:0}
.qzh{font-family:var(--zh); font-size:34px; color:var(--accent);
  font-weight:700; margin:8px 0}
.verdict{font-weight:700; font-size:17px; margin:6px 0 0}
.verdict.ok{color:var(--good)} .verdict.no{color:var(--red)}
.why{color:var(--ink); font-size:13px; max-width:56ch; margin:2px 0 0}
.tiles{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px;
  width:min(980px,100%); margin-top:6px}
.tile{background:var(--raised); border:2px solid transparent; border-radius:4px;
  padding:11px 8px; cursor:pointer; font:inherit; color:var(--ink);
  min-height:74px; display:flex; flex-direction:column; gap:3px;
  align-items:center; justify-content:center}
.tile .z{font-family:var(--zh); font-size:15px}
.tile .g{font-size:11px; color:var(--muted)}
.tile.on{border-color:var(--accent); background:#24455E}
.tile.right{border-color:var(--good)} .tile.wrong{border-color:var(--red)}
.tile.missed{border-color:var(--gloss); border-style:dashed}
.tile:disabled{cursor:default}
.boxes{display:flex; flex-direction:column; gap:7px; width:min(560px,100%)}
.boxes .cap{font:700 10px var(--ui); color:var(--gloss); letter-spacing:.8px;
  text-align:left; margin-top:6px}
.boxes input{width:100%; font-size:16px; font-family:var(--zh)}
.boxes input.right{border-color:var(--good)}
.boxes input.wrong{border-color:var(--red)}
.answers{font-size:13px; color:var(--muted); max-width:56ch}
.answers .zh{font-family:var(--zh); color:var(--accent)}

/* results inside the stage */
.res{width:min(760px,100%); text-align:left}
.res .cap{font:700 11px var(--ui); color:var(--muted); letter-spacing:.7px;
  margin:16px 0 3px}
.res .big{font-size:34px; font-weight:700}
.res .big.ok{color:var(--good)}
.res .pct{font-size:17px; color:var(--muted); margin-left:10px}
.res .desc{font-size:12px; color:var(--muted); margin:2px 0 0}
.res .prize{font-size:38px; font-weight:700; color:var(--good)}
.res .pline{font-size:12px; color:var(--muted); margin-left:14px}
.res .miss{color:var(--red); font-weight:700; margin-top:5px}
.res .miss .zh{font-family:var(--zh); color:var(--ink); font-weight:400;
  margin-left:9px}
.res .miss .src{color:var(--muted); font-weight:400; font-size:12px;
  margin-left:9px}

/* --------------------------------------------------------- race lights */
.lights{position:absolute; inset:0; background:var(--stage); z-index:60;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:18px}
.lights .lamps{display:flex; gap:26px}
.lights .lamps i{width:74px; height:74px; border-radius:50%;
  background:var(--lamp-off); box-shadow:inset 0 0 0 5px #081420}
.lights .lamps i.on{background:var(--lamp-red);
  box-shadow:inset 0 0 0 5px #081420, 0 0 34px #E03A3A88}
.lights .lamps i.go{background:var(--lamp-green);
  box-shadow:inset 0 0 0 5px #081420, 0 0 40px #25C06588}
.lights .count{font-size:96px; font-weight:700; color:#fff; line-height:1}
.lights .count.go{color:var(--lamp-green); font-size:74px}
.lights .caption{color:#7FA0BC; font-size:15px}

/* ------------------------------------------------------ checkered flag */
.fanfare{position:absolute; inset:0; background:#0E2233F2; z-index:60;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px}
.fanfare svg{width:min(420px,80vw)}
.fanfare .finished{font-size:56px; font-weight:700; color:#fff;
  letter-spacing:5px}

@media (max-width:760px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qword{font-size:31px} .qzh{font-size:27px}
  .row label{width:44px}
  .head{flex-wrap:wrap}
  .mode{width:100%; margin-left:0}
}