/* Lessons. Colours and type come from ../shared/theme.css.
   The aliases below are kept because the rest of this file grew up with them;
   they now point at the site's paper-and-ink palette. */
:root{
  --green:#6D8F80; --green-d:#577567; --green-l:#DDE6E0; --green-t:#4F6B55;
  --blue:#4B6B8A; --blue-d:#3C566F;
  --red:#A3322A; --red-d:#86271F; --red-l:#F1DFDA; --red-t:#A3322A;
  --yellow:#A98A4F; --purple:#7A5A6E; --orange:#B5703A;
  --ink:#1C1915; --ink-2:#4A433A; --grey:#9B9284; --grey-l:#E0D7C5; --grey-bg:#F2ECE0;
  --sheet:#FAF6EC;
  --wing:#E0D7C5;
  --radius:2px;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#F2ECE0; --ink-2:#D9D0BF; --grey:#776E60; --grey-l:#3A342C;
         --grey-bg:#17150F; --sheet:#1F1C16; --wing:#3A342C; }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--serif,"Noto Serif SC",Georgia,serif);
  font-weight:600;
  color:var(--ink);
  background-color:var(--grey-bg);
  background-image:
    repeating-linear-gradient(62deg, rgba(28,25,21,.014) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-62deg, rgba(28,25,21,.012) 0 1px, transparent 1px 13px);
  overscroll-behavior:none;
}
button{font-family:inherit;font-weight:600;cursor:pointer;border:0;background:none;color:inherit}
#app{min-height:100%;display:flex;flex-direction:column}

/* ---------- buttons: flat, ruled, square ---------- */
.btn{
  display:block;width:100%;padding:14px 16px;border-radius:var(--radius);
  font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sheet);background:var(--ink);border:1px solid var(--ink);
  transition:background .12s,color .12s;
}
.btn:hover:not(:disabled){background:var(--red);border-color:var(--red)}
.btn:disabled{background:transparent;border-color:var(--grey-l);color:var(--grey);cursor:default}
.btn.red{background:var(--red);border-color:var(--red)}
.btn.ghost{background:transparent;color:var(--grey);border:1px solid var(--grey-l)}

/* ---------- path screen ---------- */
.top{
  position:sticky;top:0;z-index:20;display:flex;gap:26px;align-items:center;
  padding:12px 18px;background-color:var(--sheet);
  border-bottom:1px solid var(--grey-l);box-shadow:0 3px 0 -2px var(--grey-l);
}
.stat{display:flex;align-items:center;gap:9px}
.stat-glyph{
  flex:none;width:30px;height:30px;display:grid;place-items:center;
  border:1px solid var(--red);border-radius:var(--radius);
  color:var(--red);font-size:16px;font-weight:600;line-height:1;
}
.stat-val{display:block;font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap}
.stat-label{
  display:block;font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey);
}
.top .spacer{flex:1}

.path{max-width:520px;width:100%;margin:0 auto;padding:0 18px 120px}
.hero{max-width:520px;margin:0 auto;padding:28px 18px 0;text-align:center}
.hero h1{font-size:28px;font-weight:600;margin:0 0 8px}
.hero p{color:var(--grey);font-size:15px;font-weight:600;margin:0}

/* A unit opens with a ruled banner, its colour kept to the rule and the
   glyph rather than flooded across a slab. */
.unit-head{
  margin:36px 0 0;padding:12px 0 12px 16px;
  display:flex;align-items:center;gap:14px;
  border-left:3px solid var(--unit,var(--red));
  border-bottom:1px solid var(--grey-l);
}
.unit-head .u-ic{
  flex:none;width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--unit,var(--red));border-radius:var(--radius);
  color:var(--unit,var(--red));font-size:24px;font-weight:600;line-height:1;
}
.unit-head h2{margin:0;font-size:19px;font-weight:700}
.unit-head p{margin:2px 0 0;font-size:13px;font-weight:600;color:var(--grey)}

/* The trail: one ruled line down the page with a numbered stone on it for
   each lesson, study marks to its left and the title to its right — a table
   of contents you can walk. */
.nodes{padding:16px 0 6px}
.node-row{
  display:grid;grid-template-columns:58px 40px 1fr;align-items:center;
  gap:0 18px;width:100%;padding:7px 0;text-align:left;
}
.marks{display:flex;justify-content:flex-end;gap:5px}
.mark{
  width:7px;height:7px;border:1px solid var(--grey-l);border-radius:var(--radius);
}
.mark.on{background:var(--red);border-color:var(--red)}

.node{
  position:relative;width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--grey-l);border-radius:var(--radius);
  background:var(--sheet);color:var(--grey);
  font-size:17px;font-weight:600;line-height:1;
  transition:border-color .12s,color .12s;
}
/* the line between the stones, drawn only in the gaps. Solid rather than
   dashed: over a 7px run a dash reads as nothing at all. */
.node:before,.node:after{
  content:"";position:absolute;left:50%;width:1px;height:7px;
  background:var(--grey-l);
}
.node:before{top:-7px}
.node:after{bottom:-7px}
.node-row:first-child .node:before,
.node-row:last-child .node:after{display:none}

.node.fresh{border-style:dashed}
.node.done{border-color:var(--unit);color:var(--unit)}
.node.full{background:var(--unit);border-color:var(--unit);color:var(--sheet)}

.node-side{min-width:0}
.lbl{font-size:15px;font-weight:600;color:var(--ink-2)}
.cue{
  margin-top:2px;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);
}
.node-row.here .node{border-color:var(--red);color:var(--red)}
.node-row.here .lbl{color:var(--ink)}
.node-row:hover .node{border-color:var(--ink-2);color:var(--ink)}
.node-row:hover .lbl{color:var(--ink)}
.node-row.here:hover .node,.node-row.here .node.full{border-color:var(--red)}

/* ---------- lesson shell ---------- */
.lesson{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.lesson-top{display:flex;align-items:center;gap:14px;padding:14px 18px;max-width:700px;width:100%;margin:0 auto}
.close{font-size:24px;color:var(--grey);line-height:1;padding:0 4px}
.close:hover{color:var(--red)}
.bar{flex:1;height:8px;border-radius:var(--radius);background:var(--grey-l);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--red);transition:width .3s}
.step-count{
  flex:none;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--grey);
  font-variant-numeric:tabular-nums;
}

.stage{flex:1;max-width:700px;width:100%;margin:0 auto;padding:10px 18px 160px}
.q{font-size:22px;font-weight:700;margin:14px 0 22px}

.prompt{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.speaker{
  flex:none;width:54px;height:50px;border-radius:var(--radius);
  border:1px solid var(--blue);background:transparent;
  display:grid;place-items:center;font-size:21px;color:var(--blue);
}
.speaker:hover{background:var(--blue);color:var(--sheet)}
.speaker.big{width:110px;height:96px;font-size:40px;margin:30px auto}
.bubble{
  position:relative;border:1px solid var(--grey-l);border-radius:var(--radius);
  padding:12px 16px;background:var(--sheet);
}
.bubble:before{content:"";position:absolute;left:-7px;top:18px;width:12px;height:12px;
  background:var(--sheet);border-left:1px solid var(--grey-l);border-bottom:1px solid var(--grey-l);
  transform:rotate(45deg)}
.hz{font-size:30px;font-weight:600;letter-spacing:2px}
.py{font-size:14px;color:var(--grey);margin-top:2px}

.big-hz{text-align:center;font-size:72px;font-weight:600;letter-spacing:4px;margin:10px 0 4px}
.big-py{text-align:center;font-size:19px;color:var(--grey);margin-bottom:26px}
.en-prompt{font-size:25px;font-weight:600;margin:18px 0 28px;line-height:1.35}

/* option tiles */
.opts{display:grid;gap:12px}
.opts.cols{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.opt{
  display:flex;align-items:center;gap:12px;text-align:left;
  padding:14px 16px;border:1px solid var(--grey-l);border-radius:var(--radius);
  background:var(--sheet);font-size:17px;font-weight:600;transition:border-color .1s,background .1s;
}
.opt .num{width:22px;height:22px;border:1px solid var(--grey-l);border-radius:var(--radius);
  display:grid;place-items:center;font-size:11px;color:var(--grey)}
.opt .o-hz{font-size:24px;letter-spacing:1px}
.opt .o-py{font-size:13px;color:var(--grey);font-weight:600}
.opt:hover{border-color:var(--ink-2)}
.opt.sel{border-color:var(--blue);background:#E6EDF3;color:var(--blue-d)}
.opt.sel .num{border-color:var(--blue);color:var(--blue-d)}
@media (prefers-color-scheme: dark){ .opt.sel{background:#232A31} }
.opt.ok{border-color:var(--green);background:var(--green-l);color:var(--green-t)}
.opt.bad{border-color:var(--red);background:var(--red-l);color:var(--red-t)}

/* word bank build */
.slots{min-height:120px;border-bottom:1px solid var(--grey-l);margin-bottom:8px}
.slot-line{border-bottom:1px solid var(--grey-l);min-height:52px;display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 10px}
.bank{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;justify-content:center}
.tile{
  padding:9px 14px;border:1px solid var(--grey-l);border-radius:var(--radius);
  background:var(--sheet);font-size:19px;font-weight:600;line-height:1.2;
}
.tile:hover{border-color:var(--ink-2)}
.tile .t-py{display:block;font-size:11px;color:var(--grey);text-align:center;margin-top:1px}
.tile.used{opacity:.3;border-style:dashed;background:transparent;color:transparent}
.tile.used .t-py{color:transparent}

/* pair matching */
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair{
  padding:14px 10px;border:1px solid var(--grey-l);border-radius:var(--radius);
  background:var(--sheet);font-size:19px;font-weight:600;text-align:center;min-height:60px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.pair:hover{border-color:var(--ink-2)}
.pair .p-py{font-size:12px;color:var(--grey)}
.pair.sel{border-color:var(--blue);background:#E6EDF3;color:var(--blue-d)}
.pair.gone{opacity:0;pointer-events:none;transition:opacity .25s}
.pair.wrong{border-color:var(--red);background:var(--red-l);animation:shake .3s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ---------- footer / feedback ---------- */
.foot{
  position:fixed;left:0;right:0;bottom:0;border-top:1px solid var(--wing);
  background:var(--sheet);padding:14px 18px calc(18px + env(safe-area-inset-bottom));
}
.foot-in{max-width:700px;margin:0 auto;display:flex;align-items:center;gap:16px}
.foot-in .btn{max-width:220px;margin-left:auto}
.foot.ok{background:var(--green-l);border-top-color:var(--green)}
.foot.bad{background:var(--red-l);border-top-color:var(--red)}
.verdict{flex:1;display:flex;align-items:center;gap:12px}
.verdict .v-ic{width:42px;height:42px;border-radius:var(--radius);background:var(--sheet);
  display:grid;place-items:center;font-size:22px}
.verdict h3{margin:0;font-size:19px;font-weight:700}
.verdict p{margin:2px 0 0;font-size:14px;font-weight:600}
.foot.ok .verdict{color:var(--green-t)} .foot.bad .verdict{color:var(--red-t)}
@media (max-width:560px){
  .foot-in{flex-direction:column;align-items:stretch}
  .foot-in .btn{max-width:none;margin-left:0}
  .verdict{margin-bottom:10px}
}

/* ---------- finish screen ---------- */
.finish{flex:1;display:grid;place-items:center;text-align:center;padding:30px 18px 160px}
/* 印章 — the lesson is stamped rather than trophied */
.stamp{
  width:92px;height:92px;margin:0 auto;display:grid;place-items:center;
  border:3px solid var(--red);border-radius:var(--radius);
  color:var(--red);font-size:52px;font-weight:600;line-height:1;
  animation:stampdown .45s cubic-bezier(.2,1.4,.5,1);
}
.stamp.clean{background:var(--red);color:var(--sheet)}
@keyframes stampdown{0%{transform:scale(1.6) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
.finish h1{font-size:28px;font-weight:600;color:var(--ink);margin:16px 0 24px}
.cards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.card{border:1px solid var(--grey-l);border-top:3px solid var(--yellow);
  border-radius:var(--radius);min-width:112px;background:var(--sheet)}
.card h4{margin:0;padding:8px 6px 0;font-size:10px;color:var(--grey);
  text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.card div{padding:4px 9px 10px;font-size:20px;font-weight:700;color:var(--ink)}
.card.blue{border-top-color:var(--blue)}
.card.red{border-top-color:var(--red)}

.empty{padding:40px 18px;text-align:center;color:var(--grey)}
.hint{font-size:13px;color:var(--grey);font-weight:600;text-align:center;margin-top:18px}
.kbd{font-size:11px;color:var(--grey);text-align:center;margin-top:10px}

/* ---------- account / sync ---------- */
.auth{display:flex;align-items:center;gap:8px}
.auth .signin{
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);
  border:1px solid var(--grey-l);border-radius:var(--radius);padding:6px 12px;
}
.auth .signin:hover{border-color:var(--red);color:var(--red)}
.auth .who{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--ink)}
.auth .who img{width:26px;height:26px;border-radius:var(--radius);display:block}
.auth .dot{width:7px;height:7px;border-radius:var(--radius);background:transparent;flex:none}
.auth .dot.syncing{background:var(--blue);animation:pulse 1s ease-in-out infinite}
.auth .dot.saved{background:var(--green)}
.auth .dot.error{background:var(--yellow)}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

.nudge{margin-top:22px;font-size:14px;font-weight:600;color:var(--grey);line-height:1.6}
.nudge .link{
  color:var(--red);font-size:14px;font-weight:700;text-decoration:underline;
  text-underline-offset:3px;
}

.home-link{
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);
  text-decoration:none;white-space:nowrap;
}
.home-link:hover{color:var(--red)}

@media (max-width:560px){
  /* Six items will not fit across a phone, so the spacer becomes a line
     break and the account controls take a second row. */
  .top{gap:8px 14px;padding:10px 12px;flex-wrap:wrap}
  .top .spacer{flex:0 0 100%;height:0}
  .stat-label{display:none}
  .node-row{grid-template-columns:44px 38px 1fr;gap:0 14px}
  .node{width:38px;height:38px;font-size:16px}
}