/* GENERATED by tools/build_student_app.py from the factory's Aklat design. Do not edit by hand. */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* ============ OUTER PAGE (the prototype frame, not the product) ============ */
:root{
  --page-bg:#f3f1ec; --page-panel:#fffefb; --page-ink:#1d1b16; --page-soft:#5c584e;
  --page-muted:#84806f; --page-line:#e0dccf; --page-line2:#cbc6b4; --page-accent:#1e4fa3;
  --page-accent-soft:#e7eefa; --page-accent-on:#ffffff;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page-bg:#16150f; --page-panel:#211f18; --page-ink:#f2efe6; --page-soft:#b9b4a4;
    --page-muted:#8f8b7c; --page-line:#33302a; --page-line2:#474338; --page-accent:#9dbcf3;
    --page-accent-soft:#1e2a3f; --page-accent-on:#101c2e;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --page-bg:#16150f; --page-panel:#211f18; --page-ink:#f2efe6; --page-soft:#b9b4a4;
  --page-muted:#8f8b7c; --page-line:#33302a; --page-line2:#474338; --page-accent:#9dbcf3;
  --page-accent-soft:#1e2a3f; --page-accent-on:#101c2e;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--page-bg); color:var(--page-ink);
  font:15px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px; margin:0 auto; padding:0 16px; padding-block:28px 56px}
.masthead{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; justify-content:space-between; margin-bottom:22px}
.masthead h1{
  font-family:Georgia,"Noto Serif",'Times New Roman',serif; font-weight:600; font-size:clamp(28px,5vw,40px);
  letter-spacing:-.02em; margin:0; text-wrap:balance;
}
.masthead p{margin:8px 0 0; color:var(--page-soft); max-width:60ch; font-size:15px}
.eyebrow{
  font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:700;
  color:var(--page-muted); margin:0 0 6px;
}
.stamp{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--page-line2);
  border-radius:999px; padding:6px 13px; font-size:12.5px; font-weight:600; color:var(--page-soft);
  background:var(--page-panel);
}
.stamp b{color:var(--page-ink)}

.layout{display:grid; grid-template-columns:288px minmax(0,1fr); gap:26px; align-items:start}
@media (max-width:900px){ .layout{grid-template-columns:minmax(0,1fr); gap:18px} }

.rail{position:sticky; top:calc(env(safe-area-inset-top,0px) + 14px); display:flex; flex-direction:column; gap:14px}
@media (max-width:900px){ .rail{position:static} }
.panel{background:var(--page-panel); border:1px solid var(--page-line); border-radius:14px; padding:15px 16px}
.panel h2{
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--page-muted); margin:0 0 11px;
}
.ctl{display:flex; flex-direction:column; gap:12px}
.ctl-row{display:flex; flex-direction:column; gap:6px}
.ctl-row>span{font-size:12.5px; font-weight:600; color:var(--page-soft)}
.seg{display:flex; background:var(--page-bg); border:1px solid var(--page-line); border-radius:9px; padding:3px; gap:3px}
.seg button{
  flex:1; min-width:0; border:0; background:transparent; color:var(--page-soft); cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:600; padding:7px 4px; border-radius:6px; line-height:1.25;
}
.seg button:hover{color:var(--page-ink)}
.seg button[aria-pressed="true"]{background:var(--page-accent); color:var(--page-accent-on)}
.seg button:focus-visible{outline:2px solid var(--page-accent); outline-offset:2px}
.hint{font-size:12px; color:var(--page-muted); margin:0; line-height:1.5}

.screenlist{display:flex; flex-direction:column; gap:2px; max-height:none}
.screenlist .grp{font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--page-muted); margin:10px 0 4px}
.screenlist .grp:first-child{margin-top:0}
.screenlist button{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:0; background:transparent;
  color:var(--page-soft); font:inherit; font-size:13.5px; padding:7px 9px; border-radius:8px; cursor:pointer;
}
.screenlist button:hover{background:var(--page-bg); color:var(--page-ink)}
.screenlist button[aria-current="true"]{background:var(--page-accent-soft); color:var(--page-accent); font-weight:600}
.screenlist .n{
  font-size:11px; font-variant-numeric:tabular-nums; color:var(--page-muted);
  min-width:16px; text-align:right;
}
.screenlist button[aria-current="true"] .n{color:var(--page-accent)}

/* stage */
.stage{display:flex; flex-direction:column; align-items:center; gap:14px}
.stagebar{
  width:100%; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  background:var(--page-panel); border:1px solid var(--page-line); border-radius:12px; padding:10px 14px;
}
.stagebar .who{font-size:13px; color:var(--page-soft)}
.stagebar .who b{color:var(--page-ink)}
.netpill{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  border-radius:999px; padding:5px 11px; border:1px solid var(--page-line2); color:var(--page-soft);
}
.netpill svg{width:15px; height:15px}

/* ============ THE PHONE + THE PRODUCT ============ */
.phone{
  width:100%; max-width:392px; background:#000; border-radius:34px; padding:9px;
  box-shadow:0 18px 44px rgba(20,18,12,.22), 0 2px 6px rgba(20,18,12,.12);
}
.screen{
  position:relative; border-radius:26px; overflow:hidden; background:var(--s-bg);
  height:min(78vh,740px); min-height:520px; display:flex; flex-direction:column;
}
@media (max-width:480px){ .phone{padding:7px; border-radius:26px} .screen{border-radius:20px; height:min(80vh,700px)} }

/* --- product tokens: light theme --- */
.phone{
  --s-bg:#faf9f6; --s-raised:#ffffff; --s-sunken:#f2f0ea;
  --ink:#1b1a17; --ink-soft:#55524a; --ink-muted:#6f6c63;
  --line:#e6e3da; --line-strong:#8f8a7b;
  --brand:#1e4fa3; --brand-press:#173d80; --brand-tint:#e8eefa; --on-brand:#ffffff;
  --focus:#0b57d0;
  --ok:#1a7f57; --ok-tint:#ebf7f1; --bad:#7d1610; --bad-tint:#fdeeec;
  --warn:#8a5300; --warn-tint:#fbf0dd; --off:#545a60; --off-tint:#eceef0;
  --sci:#0e6f63; --sci-tint:#ddefec; --mth:#57359d; --mth-tint:#ece7f8;
  --eng:#1b5f94; --eng-tint:#e2eef7; --fil:#9a4423; --fil-tint:#f8e8e0;
  --mph:#93326b; --mph-tint:#f7e5ef; --shs:#3f4a56; --shs-tint:#e9edf1;
  --c-think:#5b3ea8; --c-think-t:#efeafa; --c-remember:#1b5f94; --c-remember-t:#e4eff8;
  --c-try:#16724a; --c-try-t:#e3f2ea; --c-know:#8a5300; --c-know-t:#fbf0dd;
  --c-example:#4a4740; --c-example-t:#f1efe9; --c-story:#9a4423; --c-story-t:#f9e9e1;
  --c-key:#2f3f8f; --c-key-t:#e6eaf7; --c-vocab:#0e6f63; --c-vocab-t:#ddefec;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;
  --sp:16px; --tap:52px; --fs:17px; --lh:1.62; --icon:22px;
}
.phone[data-app-theme="hc"]{
  --s-bg:#ffffff; --s-raised:#ffffff; --s-sunken:#f2f2f2;
  --ink:#000000; --ink-soft:#1f1f1f; --ink-muted:#303030;
  --line:#5c5c5c; --line-strong:#000000;
  --brand:#003087; --brand-press:#00205c; --brand-tint:#ffffff; --on-brand:#ffffff;
  --focus:#00206b;
  --ok:#0a5233; --ok-tint:#ffffff; --bad:#8c1008; --bad-tint:#ffffff;
  --warn:#6b3f00; --warn-tint:#ffffff; --off:#2f3438; --off-tint:#ffffff;
  --sci:#06544a; --sci-tint:#ffffff; --mth:#3f2378; --mth-tint:#ffffff;
  --eng:#0b4a7a; --eng-tint:#ffffff; --fil:#7a2f12; --fil-tint:#ffffff;
  --mph:#6e1f4e; --mph-tint:#ffffff; --shs:#2a323b; --shs-tint:#ffffff;
  --c-think:#40248a; --c-think-t:#ffffff; --c-remember:#0b4a7a; --c-remember-t:#ffffff;
  --c-try:#0a5233; --c-try-t:#ffffff; --c-know:#6b3f00; --c-know-t:#ffffff;
  --c-example:#333029; --c-example-t:#ffffff; --c-story:#7a2f12; --c-story-t:#ffffff;
  --c-key:#21306e; --c-key-t:#ffffff; --c-vocab:#06544a; --c-vocab-t:#ffffff;
}
/* --- grade bands: size, roundness, density --- */
.phone[data-band="k3"]{ --fs:20px; --lh:1.72; --tap:64px; --sp:19px; --icon:26px;
  --r-sm:10px; --r-md:16px; --r-lg:20px; --r-xl:26px; }
.phone[data-band="g46"]{ --fs:17px; --lh:1.64; --tap:52px; --sp:16px; --icon:22px;
  --r-sm:7px; --r-md:11px; --r-lg:14px; --r-xl:20px; }
.phone[data-band="g711"]{ --fs:15.5px; --lh:1.58; --tap:48px; --sp:14px; --icon:20px;
  --r-sm:5px; --r-md:8px; --r-lg:10px; --r-xl:14px; }

.screen,.screen *{box-sizing:border-box}
.screen{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink); font-size:calc(var(--fs) * var(--tscale,1)); line-height:var(--lh);
}
.screen button, .screen input, .screen textarea, .screen select{font:inherit; color:inherit}
.screen button{cursor:pointer}
.screen :focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:4px}

/* status strip */
.sysbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:7px 16px 3px; font-size:11.5px; font-weight:600; color:var(--ink-muted);
  background:var(--s-bg); font-variant-numeric:tabular-nums;
}
.sysbar .dots{display:flex; gap:3px; align-items:center}
.sysbar .dots i{width:4px; height:4px; border-radius:50%; background:currentColor; display:block}

/* connection banner */
.netbar{
  flex:0 0 auto; display:flex; align-items:center; gap:9px; padding:8px 14px;
  font-size:12.5px; font-weight:600; border-bottom:1px solid var(--line);
}
.netbar svg{width:17px; height:17px; flex:0 0 auto}
.netbar.off{background:var(--off-tint); color:var(--off); border-bottom-color:var(--off)}
.netbar.wait{background:var(--warn-tint); color:var(--warn); border-bottom-color:var(--warn)}
.netbar.ok{background:var(--ok-tint); color:var(--ok); border-bottom-color:var(--ok)}
.netbar .sp{flex:1}
.netbar button{border:0; background:transparent; color:inherit; font-weight:700; font-size:12.5px; text-decoration:underline; padding:4px}

/* app bar */
.appbar{
  flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--s-raised); border-bottom:1px solid var(--line); min-height:56px;
}
.appbar .ttl{flex:1; min-width:0}
.appbar .ttl b{display:block; font-size:calc(var(--fs) * var(--tscale,1)); font-weight:650; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.appbar .ttl span{display:block; font-size:11.5px; color:var(--ink-muted); font-weight:600;
  letter-spacing:.03em; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.iconbtn{
  width:var(--tap); height:var(--tap); min-width:44px; min-height:44px; max-width:52px; max-height:52px;
  border:0; background:transparent; border-radius:var(--r-md); display:grid; place-items:center; color:var(--ink-soft); flex:0 0 auto;
}
.iconbtn:hover{background:var(--s-sunken)}
.iconbtn svg{width:calc(var(--icon) + 2px); height:calc(var(--icon) + 2px)}

/* body scroller */
.body{flex:1 1 auto; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; background:var(--s-bg)}
.pad{padding:var(--sp)}
.stack{display:flex; flex-direction:column; gap:var(--sp)}
.stack-s{display:flex; flex-direction:column; gap:calc(var(--sp) * .6)}

/* bottom nav */
.tabs{
  flex:0 0 auto; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:var(--s-raised); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.tabs button{
  border:0; background:transparent; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 2px; min-height:var(--tap); color:var(--ink-muted); font-size:11px; font-weight:650;
}
.tabs button svg{width:var(--icon); height:var(--icon)}
.tabs button[aria-current="true"]{color:var(--brand)}
.tabs button[aria-current="true"] .tabdot{background:var(--brand)}
.tabdot{width:18px; height:3px; border-radius:3px; background:transparent; margin-top:1px}

/* ---------- product components ---------- */
.card{background:var(--s-raised); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp)}
.card.flat{background:transparent; border-style:dashed}
.lbl{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--ink-muted); margin:0 0 9px}
.h-scr{font-size:calc(var(--fs) * var(--tscale,1) * 1.42); font-weight:680; line-height:1.24; margin:0; letter-spacing:-.015em; text-wrap:balance}
.h-sec{font-size:calc(var(--fs) * var(--tscale,1) * 1.12); font-weight:670; line-height:1.3; margin:0; text-wrap:balance}
.sub{color:var(--ink-soft); font-size:calc(var(--fs) * var(--tscale,1) * .88); margin:0}
.mut{color:var(--ink-muted); font-size:calc(var(--fs) * var(--tscale,1) * .82); margin:0; font-weight:600}

.btn{
  border:1px solid transparent; border-radius:var(--r-md); background:var(--brand); color:var(--on-brand);
  font-weight:670; padding:0 18px; min-height:var(--tap); display:inline-flex; align-items:center;
  justify-content:center; gap:9px; font-size:calc(var(--fs) * var(--tscale,1) * .95);
}
.btn:hover{background:var(--brand-press)}
.btn svg{width:var(--icon); height:var(--icon)}
.btn.full{width:100%}
.btn.ghost{background:var(--s-raised); color:var(--brand); border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--brand-tint)}
.btn.quiet{background:transparent; color:var(--ink-soft); border-color:var(--line-strong)}
.btn.quiet:hover{background:var(--s-sunken)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btnrow{display:flex; gap:10px; flex-wrap:wrap}
.btnrow>.btn{flex:1 1 auto}

.meter{height:8px; border-radius:8px; background:var(--s-sunken); overflow:hidden; border:1px solid var(--line)}
.meter>i{display:block; height:100%; background:var(--brand); border-radius:8px}
.meter.sci>i{background:var(--sci)} .meter.mth>i{background:var(--mth)}
.meter.eng>i{background:var(--eng)} .meter.fil>i{background:var(--fil)}
.meter.mph>i{background:var(--mph)} .meter.shs>i{background:var(--shs)}

.chip{
  display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 10px;
  font-size:calc(var(--fs) * var(--tscale,1) * .76); font-weight:700; border:1px solid transparent; line-height:1.5;
}
.chip svg{width:14px; height:14px; flex:0 0 auto}
.chip.ok{background:var(--ok-tint); color:var(--ok); border-color:var(--ok)}
.chip.bad{background:var(--bad-tint); color:var(--bad); border-color:var(--bad)}
.chip.warn{background:var(--warn-tint); color:var(--warn); border-color:var(--warn)}
.chip.off{background:var(--off-tint); color:var(--off); border-color:var(--off)}
.chip.brand{background:var(--brand-tint); color:var(--brand); border-color:var(--brand)}
.chip.plain{background:var(--s-sunken); color:var(--ink-soft); border-color:var(--line-strong)}

.subjdot{width:10px; height:10px; border-radius:3px; flex:0 0 auto}
.d-sci{background:var(--sci)} .d-mth{background:var(--mth)} .d-eng{background:var(--eng)}
.d-fil{background:var(--fil)} .d-mph{background:var(--mph)} .d-shs{background:var(--shs)}
.cover{
  width:56px; height:56px; border-radius:var(--r-md); display:grid; place-items:center; flex:0 0 auto;
  font-weight:700; font-size:13px; letter-spacing:.02em; border:1px solid transparent; text-align:center; line-height:1.15;
}
.phone[data-band="k3"] .cover{width:68px; height:68px; font-size:15px}
.cv-sci{background:var(--sci-tint); color:var(--sci); border-color:var(--sci)}
.cv-mth{background:var(--mth-tint); color:var(--mth); border-color:var(--mth)}
.cv-eng{background:var(--eng-tint); color:var(--eng); border-color:var(--eng)}
.cv-fil{background:var(--fil-tint); color:var(--fil); border-color:var(--fil)}
.cv-mph{background:var(--mph-tint); color:var(--mph); border-color:var(--mph)}
.cv-shs{background:var(--shs-tint); color:var(--shs); border-color:var(--shs)}

.row{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--s-raised); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:calc(var(--sp) * .72) var(--sp); min-height:var(--tap); color:inherit;
}
.row:hover{border-color:var(--line-strong); background:var(--s-raised)}
.row .grow{flex:1; min-width:0}
.row .num{
  width:34px; height:34px; border-radius:var(--r-sm); background:var(--s-sunken); color:var(--ink-soft);
  display:grid; place-items:center; font-size:12.5px; font-weight:700; flex:0 0 auto;
  font-variant-numeric:tabular-nums; border:1px solid var(--line);
}
.phone[data-band="k3"] .row .num{width:42px; height:42px; font-size:15px}
.row .num.done{background:var(--ok-tint); color:var(--ok); border-color:var(--ok)}
.row .chev{color:var(--ink-muted); flex:0 0 auto}
.row .chev svg{width:var(--icon); height:var(--icon)}
.row strong{font-weight:640; display:block; font-size:calc(var(--fs) * var(--tscale,1) * .96)}
.row .meta{font-size:calc(var(--fs) * var(--tscale,1) * .8); color:var(--ink-muted); font-weight:600}

/* callouts — the coloured boxes from the printed book */
.co{border-radius:var(--r-lg); border:1px solid; padding:calc(var(--sp) * .85); display:flex; flex-direction:column; gap:9px}
.co-h{display:flex; align-items:center; gap:9px; font-weight:730; font-size:calc(var(--fs) * var(--tscale,1) * .88);
  letter-spacing:.01em}
.co-h .ic{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto; color:#fff}
.co-h .ic svg{width:16px; height:16px}
.co-b{margin:0; font-size:calc(var(--fs) * var(--tscale,1) * .95)}
.co-b p{margin:0 0 .6em} .co-b p:last-child{margin-bottom:0}
.co-b ul{margin:0; padding-left:1.2em} .co-b li{margin-bottom:.3em}
.co-think{background:var(--c-think-t); border-color:var(--c-think); color:var(--ink)} .co-think .co-h{color:var(--c-think)} .co-think .ic{background:var(--c-think)}
.co-remember{background:var(--c-remember-t); border-color:var(--c-remember)} .co-remember .co-h{color:var(--c-remember)} .co-remember .ic{background:var(--c-remember)}
.co-try_this{background:var(--c-try-t); border-color:var(--c-try)} .co-try_this .co-h{color:var(--c-try)} .co-try_this .ic{background:var(--c-try)}
.co-did_you_know{background:var(--c-know-t); border-color:var(--c-know)} .co-did_you_know .co-h{color:var(--c-know)} .co-did_you_know .ic{background:var(--c-know)}
.co-example{background:var(--c-example-t); border-color:var(--c-example)} .co-example .co-h{color:var(--c-example)} .co-example .ic{background:var(--c-example)}
.co-story{background:var(--c-story-t); border-color:var(--c-story)} .co-story .co-h{color:var(--c-story)} .co-story .ic{background:var(--c-story)}
.co-key_concept{background:var(--c-key-t); border-color:var(--c-key)} .co-key_concept .co-h{color:var(--c-key)} .co-key_concept .ic{background:var(--c-key)}
.co-vocab{background:var(--c-vocab-t); border-color:var(--c-vocab)} .co-vocab .co-h{color:var(--c-vocab)} .co-vocab .ic{background:var(--c-vocab)}

/* lesson prose */
.prose{font-size:calc(var(--fs) * var(--tscale,1)); line-height:var(--lh)}
.prose p{margin:0 0 .95em}
.prose h2{font-size:calc(var(--fs) * var(--tscale,1) * 1.14); font-weight:670; margin:1.3em 0 .5em; line-height:1.3}
.prose ul,.prose ol{margin:0 0 1em; padding-left:1.3em}
.prose li{margin-bottom:.35em}
.prose .verse{white-space:pre-line; font-family:Georgia,"Noto Serif",serif; font-size:calc(var(--fs) * var(--tscale,1) * .97)}
.co-story .co-b, .co-example .co-b{font-family:Georgia,"Noto Serif",serif}
.t-key{font-weight:720; color:var(--brand); border-bottom:2px solid var(--brand-tint)}
.phone[data-app-theme="hc"] .t-key{border-bottom-color:var(--brand)}
.t-local{font-style:italic}
.t-em{font-weight:730}

.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--s-raised)}
table.bk{border-collapse:collapse; width:100%; font-size:calc(var(--fs) * var(--tscale,1) * .87)}
table.bk th,table.bk td{padding:9px 11px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
table.bk th{background:var(--s-sunken); font-weight:700; font-size:calc(var(--fs) * var(--tscale,1) * .8);
  letter-spacing:.02em}
table.bk tr:last-child td{border-bottom:0}

/* figure with caption + text description */
.fig{border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--s-raised)}
.fig .box{
  aspect-ratio:16/10; max-width:100%; background:var(--s-sunken); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:7px; color:var(--ink-muted); text-align:center; padding:14px;
}
.fig .box svg{width:30px; height:30px}
.fig .box .fs{font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.fig figcaption{padding:10px 12px; font-size:calc(var(--fs) * var(--tscale,1) * .82); color:var(--ink-soft); border-top:1px solid var(--line)}
.fig details{border-top:1px solid var(--line)}
.fig summary{padding:10px 12px; font-size:calc(var(--fs) * var(--tscale,1) * .82); font-weight:700; color:var(--brand); min-height:44px; display:flex; align-items:center; gap:7px}
.fig details p{margin:0; padding:0 12px 12px; font-size:calc(var(--fs) * var(--tscale,1) * .82); color:var(--ink-soft)}

/* questions */
.q{background:var(--s-raised); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp); display:flex; flex-direction:column; gap:12px}
.q .qn{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.q .qn b{font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-muted); font-weight:700}
.q .qt{margin:0; font-size:calc(var(--fs) * var(--tscale,1) * .98); font-weight:560; line-height:1.45}
.q .panuto{font-size:calc(var(--fs) * var(--tscale,1) * .8); color:var(--ink-muted); font-weight:650; margin:0 0 4px}
.opts{display:flex; flex-direction:column; gap:9px}
.opt{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; min-height:var(--tap);
  border:1.5px solid var(--line-strong); border-radius:var(--r-md); background:var(--s-raised);
  padding:10px 13px; font-size:calc(var(--fs) * var(--tscale,1) * .95); color:inherit;
}
.opt:hover{border-color:var(--brand)}
.opt .k{
  width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line-strong); flex:0 0 auto;
  display:grid; place-items:center; font-size:13px; font-weight:750; color:var(--ink-muted);
}
.opt .k svg{width:16px; height:16px}
.opt[aria-pressed="true"]{border-color:var(--brand); background:var(--brand-tint)}
.opt[aria-pressed="true"] .k{border-color:var(--brand); background:var(--brand); color:var(--on-brand)}
.opt.right{border-color:var(--ok); background:var(--ok-tint)}
.opt.right .k{border-color:var(--ok); background:var(--ok); color:#fff}
.opt.wrong{border-color:var(--bad); background:var(--bad-tint)}
.opt.wrong .k{border-color:var(--bad); background:var(--bad); color:#fff}
.opt .txt{flex:1}
textarea.ans, input.ans{
  width:100%; border:1.5px solid var(--line-strong); border-radius:var(--r-md); padding:12px 13px;
  background:var(--s-raised); font-size:calc(var(--fs) * var(--tscale,1) * .95); min-height:var(--tap); resize:vertical;
}
textarea.ans{min-height:110px; line-height:1.5}
textarea.ans:focus, input.ans:focus{border-color:var(--brand)}
.fb{display:flex; align-items:flex-start; gap:9px; border-radius:var(--r-md); padding:11px 12px; font-size:calc(var(--fs) * var(--tscale,1) * .87); border:1px solid}
.fb svg{width:19px; height:19px; flex:0 0 auto; margin-top:1px}
.fb.ok{background:var(--ok-tint); color:var(--ok); border-color:var(--ok)}
.fb.bad{background:var(--bad-tint); color:var(--bad); border-color:var(--bad)}
.fb.warn{background:var(--warn-tint); color:var(--warn); border-color:var(--warn)}
.fb.plain{background:var(--s-sunken); color:var(--ink-soft); border-color:var(--line-strong)}
.fb b{display:block; margin-bottom:2px}

/* login */
.login{display:flex; flex-direction:column; gap:var(--sp); padding:calc(var(--sp) * 1.4) var(--sp); min-height:100%;
  justify-content:center; background:var(--s-bg)}
.mark{display:flex; align-items:center; gap:11px}
.mark .sq{width:44px; height:44px; border-radius:12px; background:var(--brand); color:var(--on-brand);
  display:grid; place-items:center; font-weight:800; font-size:20px; font-family:Georgia,serif}
.mark b{font-size:22px; font-weight:700; letter-spacing:-.01em}
.mark span{display:block; font-size:12px; color:var(--ink-muted); font-weight:600}
.codein{
  width:100%; text-align:center; letter-spacing:.32em; font-size:26px; font-weight:750; text-transform:uppercase;
  border:2px solid var(--line-strong); border-radius:var(--r-lg); padding:16px 12px; background:var(--s-raised);
  font-variant-numeric:tabular-nums;
}
.codein:focus{border-color:var(--brand)}
.names{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px}
.phone[data-band="k3"] .names{grid-template-columns:repeat(2,minmax(0,1fr))}
.nametile{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; background:var(--s-raised);
  border:1.5px solid var(--line-strong); border-radius:var(--r-lg); min-height:104px; justify-content:center; color:inherit;
}
.nametile:hover{border-color:var(--brand); background:var(--brand-tint)}
.nametile .face{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-size:22px;
  background:var(--s-sunken); border:1px solid var(--line-strong)}
.phone[data-band="k3"] .nametile .face{width:58px; height:58px; font-size:28px}
.nametile b{font-size:calc(var(--fs) * var(--tscale,1) * .88); font-weight:650; text-align:center; line-height:1.25}
.pinpad{display:grid; grid-template-columns:repeat(3,1fr); gap:11px}
.pinpad button{min-height:var(--tap); border:1.5px solid var(--line-strong); background:var(--s-raised);
  border-radius:var(--r-md); font-size:21px; font-weight:700; color:inherit}
.pinpad button:hover{background:var(--brand-tint); border-color:var(--brand)}
.pindots{display:flex; gap:12px; justify-content:center}
.pindots i{width:15px; height:15px; border-radius:50%; border:2px solid var(--line-strong); display:block}
.pindots i.on{background:var(--brand); border-color:var(--brand)}
.picpin{display:grid; grid-template-columns:repeat(3,1fr); gap:11px}
.picpin button{aspect-ratio:1; border:1.5px solid var(--line-strong); background:var(--s-raised);
  border-radius:var(--r-lg); font-size:30px; display:grid; place-items:center}
.picpin button:hover{background:var(--brand-tint); border-color:var(--brand)}
.picpin button[aria-pressed="true"]{background:var(--brand-tint); border-color:var(--brand); border-width:3px}

/* sheet */
.sheet{position:absolute; inset:0; background:rgba(16,15,12,.45); display:flex; align-items:flex-end; z-index:20}
.sheet>div{background:var(--s-raised); width:100%; border-radius:var(--r-xl) var(--r-xl) 0 0; padding:var(--sp);
  display:flex; flex-direction:column; gap:14px; max-height:82%; overflow-y:auto;
  padding-bottom:calc(var(--sp) + env(safe-area-inset-bottom,0px))}
.sheet .grab{width:38px; height:4px; border-radius:4px; background:var(--line-strong); margin:0 auto}

/* downloads */
.dl{display:flex; align-items:center; gap:12px; padding:calc(var(--sp)*.7) var(--sp); background:var(--s-raised);
  border:1px solid var(--line); border-radius:var(--r-lg); min-height:var(--tap)}
.dl .grow{flex:1; min-width:0}
.bar{height:6px; border-radius:6px; background:var(--s-sunken); overflow:hidden; margin-top:7px; border:1px solid var(--line)}
.bar>i{display:block; height:100%; background:var(--brand)}
.switch{display:flex; align-items:center; gap:12px; min-height:var(--tap); width:100%; text-align:left;
  background:transparent; border:0; color:inherit; padding:0}
.switch .sw{width:46px; height:27px; border-radius:999px; background:var(--line-strong); position:relative; flex:0 0 auto;
  transition:background .15s}
.switch .sw i{position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff;
  transition:left .15s; box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch[aria-pressed="true"] .sw{background:var(--ok)}
.switch[aria-pressed="true"] .sw i{left:22px}

/* teacher */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.stat{background:var(--s-raised); border:1px solid var(--line); border-radius:var(--r-lg); padding:13px}
.stat .v{font-size:calc(var(--fs) * var(--tscale,1) * 1.5); font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums}
.stat .l{font-size:11.5px; color:var(--ink-muted); font-weight:700; letter-spacing:.03em; margin-top:3px}
.dots{display:flex; gap:4px; flex-wrap:wrap}
.dots i{width:13px; height:13px; border-radius:4px; background:var(--s-sunken); border:1px solid var(--line-strong); display:block}
.dots i.done{background:var(--ok); border-color:var(--ok)}
.dots i.part{background:var(--warn); border-color:var(--warn)}
.dots i.mark{background:var(--brand); border-color:var(--brand)}
.avatar{width:38px; height:38px; border-radius:50%; background:var(--s-sunken); border:1px solid var(--line-strong);
  display:grid; place-items:center; font-size:13px; font-weight:700; color:var(--ink-soft); flex:0 0 auto}
.pts{display:flex; gap:8px}
.pts button{flex:1; min-height:var(--tap); border:1.5px solid var(--line-strong); background:var(--s-raised);
  border-radius:var(--r-md); font-weight:700; font-size:16px; color:inherit}
.pts button[aria-pressed="true"]{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.quickc{display:flex; gap:7px; flex-wrap:wrap}
.quickc button{border:1px solid var(--line-strong); background:var(--s-raised); border-radius:999px;
  padding:8px 14px; font-size:calc(var(--fs) * var(--tscale,1) * .8); font-weight:650; color:var(--ink-soft); min-height:48px}
.quickc button:hover{border-color:var(--brand); color:var(--brand); background:var(--brand-tint)}

.noteline{display:flex; gap:9px; align-items:flex-start; font-size:calc(var(--fs) * var(--tscale,1) * .8);
  color:var(--ink-muted); font-weight:600}
.noteline svg{width:16px; height:16px; flex:0 0 auto; margin-top:2px}

/* legend under the phone */
.legend{width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:6px}
.legend .panel{padding:13px 15px}
.legend h3{margin:0 0 5px; font-size:13px; font-weight:700}
.legend p{margin:0; font-size:12.5px; color:var(--page-soft); line-height:1.5}
.foot{margin-top:30px; border-top:1px solid var(--page-line); padding-top:16px; color:var(--page-muted); font-size:12.5px; max-width:80ch}
@media print{ .rail{display:none} }

/* ---- glossary term ---- */
/* An inline term is a link inside a sentence, not a control: it cannot be 48px tall without
   wrecking the line. It takes padding so the touch area is larger than the letters, and it is
   never the only way to the meaning - the chapter's vocabulary lesson still lists every word. */
.t-key.term{cursor:pointer; border:0; background:transparent; font:inherit; font-weight:720;
  color:var(--brand); padding:6px 3px; margin:-6px -3px; border-radius:4px;
  text-decoration:underline dashed; text-decoration-thickness:2px; text-underline-offset:3px}
.t-key.term:hover{background:var(--brand-tint)}
.termdef{font-size:calc(var(--fs) * var(--tscale,1) * .95)}
.termhead{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.termhead b{font-size:calc(var(--fs) * var(--tscale,1) * 1.25); font-weight:700; color:var(--brand)}
/* ---- help ---- */
.helprow{display:flex; align-items:center; gap:10px; width:100%; text-align:left; min-height:var(--tap);
  border:1.5px dashed var(--line-strong); border-radius:var(--r-md); background:transparent;
  padding:10px 14px; color:var(--ink-soft); font-size:calc(var(--fs) * var(--tscale,1) * .88); font-weight:650}
.helprow:hover{border-color:var(--brand); color:var(--brand); border-style:solid}
.helprow svg{width:var(--icon); height:var(--icon); flex:0 0 auto}
.helprow.sent{border-style:solid; border-color:var(--ok); background:var(--ok-tint); color:var(--ok)}
.helprow.hold{border-style:solid; border-color:var(--off); background:var(--off-tint); color:var(--off)}
.helpq{display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; color:var(--ink-muted);
  font-size:calc(var(--fs) * var(--tscale,1) * .8); font-weight:650; min-height:44px; padding:0 2px; text-decoration:underline}
.helpq:hover{color:var(--brand)}
.helpq.sent{color:var(--ok); text-decoration:none; font-weight:700}
.helpq.hold{color:var(--off); text-decoration:none; font-weight:700}
.helpq svg{width:16px; height:16px}
.pickrow{display:flex; align-items:center; gap:11px; width:100%; text-align:left; min-height:var(--tap);
  border:1.5px solid var(--line-strong); border-radius:var(--r-md); background:var(--s-raised);
  padding:10px 14px; color:inherit; font-size:calc(var(--fs) * var(--tscale,1) * .93)}
.pickrow[aria-pressed="true"]{border-color:var(--brand); background:var(--brand-tint); color:var(--brand); font-weight:670}
.pickrow .k{width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line-strong); flex:0 0 auto;
  display:grid; place-items:center}
.pickrow[aria-pressed="true"] .k{border-color:var(--brand); background:var(--brand); color:var(--on-brand)}
.pickrow .k svg{width:14px; height:14px}
/* ---- receipt ---- */
.receipt{display:flex; align-items:flex-start; gap:10px; border-radius:var(--r-md); padding:12px 13px;
  font-size:calc(var(--fs) * var(--tscale,1) * .87); border:1px solid}
.receipt svg{width:19px; height:19px; flex:0 0 auto; margin-top:1px}
.receipt b{display:block}
.receipt.sent{background:var(--ok-tint); color:var(--ok); border-color:var(--ok)}
.receipt.hold{background:var(--off-tint); color:var(--off); border-color:var(--off)}
/* ---- study list ---- */
.wordcard{background:var(--s-raised); border:1px solid var(--line); border-radius:var(--r-lg); padding:calc(var(--sp)*.75) var(--sp)}
.wordcard b{color:var(--brand); font-size:calc(var(--fs) * var(--tscale,1) * 1.02)}
.wordcard p{margin:4px 0 0; font-size:calc(var(--fs) * var(--tscale,1) * .88); color:var(--ink-soft)}
.empty{text-align:center; padding:calc(var(--sp)*2) var(--sp); color:var(--ink-muted)}
.empty svg{width:34px; height:34px; margin-bottom:10px}
/* RULE 35: anything the renderer does not recognise is shown as unrecognised, never as something else or as nothing */
.unknown-block,.unknown-callout,.unknown-question{border:2px dashed var(--bad); border-radius:var(--r-md); background:var(--s-sunken); padding:10px 12px; margin:0 0 1em; display:flex; flex-direction:column; gap:6px}
.unknown-label{font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--bad)}
.unknown-mark{outline:1px dashed var(--bad); outline-offset:1px}
.unknown-mark::before{content:attr(data-mark) ": "; font-size:.75em; font-weight:700; color:var(--bad)}

.cx{--cx-r:10px;--cx-p:14px;--cx-g:9px;--cx-chip:28px;--cx-chipr:6px;--cx-ic:17px;--cx-lab:11.5px;--cx-labl:15px;--cx-tit:15.5px;--cx-titl:22px;--cx-body:15.5px;--cx-bodyl:25px;--cx-bandp:8px 14px;--cx-bandg:9px;--cx-bandic:19px;--cx-bandlab:13.5px;--cx-bandlabl:17px;--cx-stit:16.5px;--cx-stitl:24px;--cx-boardr:6px;--cx-boardp:12px;--cx-bw:1px;box-sizing:border-box;width:100%;max-width:34rem;margin:0 0 1em;border:var(--cx-bw) solid var(--cx-c);border-radius:var(--cx-r);background:var(--cx-t);overflow:hidden;display:flex;flex-direction:column;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--ink)}
[data-band="g46"] .cx:not(.cx-f-adult){--cx-r:14px;--cx-p:16px;--cx-g:10px;--cx-chip:32px;--cx-chipr:7px;--cx-ic:19px;--cx-lab:11.5px;--cx-labl:15px;--cx-tit:17px;--cx-titl:24px;--cx-body:17px;--cx-bodyl:28px;--cx-bandp:8px 16px;--cx-bandg:10px;--cx-bandic:21px;--cx-bandlab:13.5px;--cx-bandlabl:17px;--cx-stit:18px;--cx-stitl:26px;--cx-boardr:10px;--cx-boardp:14px}
[data-band="k3"] .cx:not(.cx-f-adult){--cx-r:20px;--cx-p:20px;--cx-g:12px;--cx-chip:38px;--cx-chipr:10px;--cx-ic:22px;--cx-lab:13px;--cx-labl:17px;--cx-tit:20px;--cx-titl:28px;--cx-body:20px;--cx-bodyl:34px;--cx-bandp:11px 20px;--cx-bandg:12px;--cx-bandic:24px;--cx-bandlab:15px;--cx-bandlabl:19px;--cx-stit:21px;--cx-stitl:30px;--cx-boardr:16px;--cx-boardp:18px}
.cx-in{display:flex;flex-direction:column;gap:var(--cx-g);padding:var(--cx-p)}
.cx-head{display:flex;align-items:center;gap:var(--cx-g)}
.cx-chip{width:var(--cx-chip);height:var(--cx-chip);border-radius:var(--cx-chipr);flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--cx-c);color:#ffffff;box-sizing:border-box}
.cx-chip svg{width:var(--cx-ic);height:var(--cx-ic)}
.cx-ht{display:flex;flex-direction:column;gap:2px;min-width:0}
.cx-label{font-size:calc(var(--cx-lab) * var(--tscale,1));line-height:calc(var(--cx-labl) * var(--tscale,1));font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cx-c)}
.cx-title{font-size:calc(var(--cx-tit) * var(--tscale,1));line-height:calc(var(--cx-titl) * var(--tscale,1));font-weight:700;color:var(--cx-c)}
.cx-body{font-size:calc(var(--cx-body) * var(--tscale,1));line-height:calc(var(--cx-bodyl) * var(--tscale,1));color:var(--ink)}
.cx-body p{margin:0 0 .6em}.cx-body ul{margin:0 0 .6em;padding-left:1.2em}.cx-body li{margin:0 0 .3em}
.cx-body>:last-child{margin-bottom:0}
.cx-s-example .cx-body{font-family:Georgia,'Noto Serif','Times New Roman',serif}
.cx-board{background:#ffffff;border:1px solid var(--line);border-radius:var(--cx-boardr);padding:var(--cx-boardp)}
[data-app-theme="hc"] .cx-board{border-color:#000000}
.cx-f-quiet{background:var(--s-raised)}
.cx-f-quiet .cx-chip{background:#ffffff;color:var(--cx-c);border:1.5px solid var(--cx-c)}
.cx-f-quiet .cx-title{color:var(--ink)}
.cx-f-band,.cx-f-band .cx-in{background:var(--s-raised)}
.cx-bandbar{display:flex;align-items:center;gap:var(--cx-bandg);background:var(--cx-c);color:#ffffff;padding:var(--cx-bandp)}
.cx-bandbar svg{width:var(--cx-bandic);height:var(--cx-bandic);flex:0 0 auto}
.cx-bandlabel{font-size:calc(var(--cx-bandlab) * var(--tscale,1));line-height:calc(var(--cx-bandlabl) * var(--tscale,1));font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.cx-f-band .cx-title{font-size:calc(var(--cx-stit) * var(--tscale,1));line-height:calc(var(--cx-stitl) * var(--tscale,1));font-weight:750}
.cx-f-adult{background:var(--s-raised)}
.cx-strip{display:flex;align-items:center;gap:7px;background:var(--s-sunken);color:var(--cx-c);padding:7px 14px;border-bottom:1px solid var(--line);font-size:calc(11.5px * var(--tscale,1));line-height:calc(15px * var(--tscale,1));font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cx-strip svg{width:15px;height:15px;flex:0 0 auto}
[data-app-theme="hc"] .cx{--cx-bw:2px}
.cx.cx-f-alert{--cx-bw:2px}[data-app-theme="hc"] .cx.cx-f-alert{--cx-bw:3px}
.cx.cx-f-band,[data-app-theme="hc"] .cx.cx-f-band{--cx-bw:3px}
.cx-s-safety{--cx-c:#b42318;--cx-t:#fef1ef}[data-app-theme="hc"] .cx-s-safety{--cx-c:#8a0f07;--cx-t:#ffffff}
.cx-s-warning{--cx-c:#b54708;--cx-t:#fdf0e6}[data-app-theme="hc"] .cx-s-warning{--cx-c:#7a2e00;--cx-t:#ffffff}
.cx-s-remember{--cx-c:#1b5f94;--cx-t:#e4eff8}[data-app-theme="hc"] .cx-s-remember{--cx-c:#0b4a7a;--cx-t:#ffffff}
.cx-s-key_concept{--cx-c:#2f3f8f;--cx-t:#e6eaf7}[data-app-theme="hc"] .cx-s-key_concept{--cx-c:#21306e;--cx-t:#ffffff}
.cx-s-definition{--cx-c:#0e6f63;--cx-t:#ddefec}[data-app-theme="hc"] .cx-s-definition{--cx-c:#06544a;--cx-t:#ffffff}
.cx-s-formula{--cx-c:#2f3f8f;--cx-t:#e6eaf7}[data-app-theme="hc"] .cx-s-formula{--cx-c:#21306e;--cx-t:#ffffff}
.cx-s-example{--cx-c:#4a4740;--cx-t:#f1efe9}[data-app-theme="hc"] .cx-s-example{--cx-c:#333029;--cx-t:#ffffff}
.cx-s-objectives{--cx-c:#5b3ea8;--cx-t:#efeafa}[data-app-theme="hc"] .cx-s-objectives{--cx-c:#40248a;--cx-t:#ffffff}
.cx-s-try_this{--cx-c:#16724a;--cx-t:#e3f2ea}[data-app-theme="hc"] .cx-s-try_this{--cx-c:#0a5233;--cx-t:#ffffff}
.cx-s-tip{--cx-c:#93326b;--cx-t:#f7e5ef}[data-app-theme="hc"] .cx-s-tip{--cx-c:#6e1f4e;--cx-t:#ffffff}
.cx-s-tool_path{--cx-c:#5a6a14;--cx-t:#eef1dc}[data-app-theme="hc"] .cx-s-tool_path{--cx-c:#3f4a0a;--cx-t:#ffffff}
.cx-s-did_you_know{--cx-c:#8a5300;--cx-t:#fbf0dd}[data-app-theme="hc"] .cx-s-did_you_know{--cx-c:#6b3f00;--cx-t:#ffffff}
.cx-s-look_local{--cx-c:#9a4423;--cx-t:#f9e9e1}[data-app-theme="hc"] .cx-s-look_local{--cx-c:#7a2f12;--cx-t:#ffffff}
.cx-s-note{--cx-c:#6f6c63;--cx-t:#ffffff}[data-app-theme="hc"] .cx-s-note{--cx-c:#303030;--cx-t:#ffffff}
.cx-s-competency{--cx-c:#3f4a56;--cx-t:#ffffff}[data-app-theme="hc"] .cx-s-competency{--cx-c:#2a323b;--cx-t:#ffffff}
.cx-s-teacher_note{--cx-c:#3f4a56;--cx-t:#ffffff}[data-app-theme="hc"] .cx-s-teacher_note{--cx-c:#2a323b;--cx-t:#ffffff}

/* ---- Aklat app: our additions on top of the factory's design (tools/build_student_app.py) ---- */
html,body{height:100%}
body{background:var(--page-bg,#efece4)}
.appstage{min-height:100%;display:flex;justify-content:center;align-items:flex-start;padding:16px;box-sizing:border-box}
.appstage .phone{height:calc(100dvh - 32px);max-height:860px}
.appstage .screen{height:100%;display:flex;flex-direction:column}
@media (max-width:520px){
  .appstage{padding:0}
  .appstage .phone{max-width:none;width:100%;height:100dvh;max-height:none;border-radius:0;padding:0;box-shadow:none;background:transparent}
  .appstage .screen{border-radius:0}
}
.fig img{display:block;width:100%;height:auto;border-radius:10px;background:#fff}
.fig .missing{padding:14px;border:2px dashed var(--bad);border-radius:10px;color:var(--bad);font-weight:700}
.fig details summary svg{width:16px;height:16px;flex:0 0 auto;vertical-align:-3px;margin-right:6px}
.tb p{margin:0 0 .85em}
.field{display:flex;flex-direction:column;gap:6px}
.field input{font:inherit;font-size:calc(var(--fs) * var(--tscale,1));padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--s-raised);color:var(--ink);min-height:var(--tap);box-sizing:border-box;width:100%}
.field label{font-weight:650}
.msg{margin:0;font-weight:650}
.msg.bad{color:var(--bad)}
.toolrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.appbar .iconbtn.text{width:auto;max-width:none;padding:0 10px;font-weight:650;white-space:nowrap}
/* The design's ".screen button{color:inherit}" outranks ".btn{color:var(--on-brand)}", which drew dark
   text on the blue button (found 2026-10-26). These restore the colours the design gives each button. */
.screen .btn{color:var(--on-brand)}
.screen .btn.ghost{color:var(--brand)}
.screen .btn.quiet{color:var(--ink-soft)}