/* pages/guide/codex.css — the guide as "the Codex" (wireframes 19/20).
 *
 * Replaces guide/base.css, guide/content.css, guide/tabs.css and
 * guide/skin-playful.css wholesale: this is a full redraw, not a re-skin of
 * the old prose-and-accordion layout, so keeping those files linked would
 * leave dead rules (.ladder, .mock, .gtabs…) with nothing left that emits
 * their markup. The page joins the same rail shell app.html/planner.html
 * use — see css/pages/trainer/shell.css and skin-playful-shell.css for
 * .shell/.side/.tabs, which this file does not redefine.
 *
 * Colours are tokens only (decision 0008). Case: buttons that uppercase
 * pair a :root[lang="hi"] cancel (decision 0015 departure §4).
 */

/* main's own width/padding come from the shared .shellui main (shell.css) —
   1020px, the same reading width every rail page gets. This file only adds
   what the Codex needs beyond that shared shell: the title font (no other
   .shellui page carries a .pagetitle — that's a planner.html pattern this
   page borrowed the markup for, but not, until now, the styling) and pushing
   the header controls to the row's end. */
.codexpage .topbar .pagetitle{
  font-family:var(--play-display);font-weight:700;font-size:1.5rem;
  letter-spacing:-.01em;white-space:nowrap;margin:0;
}
.codexpage .topbar .brand{margin-left:auto}
.codexpage .cdx-tag{
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--play-mute);font-family:var(--play-display);
}
:root[lang="hi"] .codexpage .cdx-tag{text-transform:none;letter-spacing:0}

/* ---- home (19a) --------------------------------------------------------- */

.cdx-hero{display:flex;align-items:flex-end;gap:14px;margin-bottom:14px}
.cdx-hero-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cdx-hero-t b{font-family:var(--play-display);font-weight:400;font-size:2rem;line-height:1.1;color:var(--play-ink)}
.cdx-ring{width:78px;height:78px;flex:none;padding:6px}
.cdx-ring>div{display:flex;flex-direction:column;gap:0;align-items:center}
.cdx-ring b{font-size:1.05rem;font-family:var(--play-display);color:var(--play-ink)}

.cdx-says{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.cdx-says .p-bub{font-size:.85rem}

.cdx-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.cdx-tile{
  border:2px solid var(--play-ink);border-radius:12px;overflow:hidden;
  background:var(--play-card);box-shadow:0 5px 0 var(--play-edge);
  display:flex;flex-direction:column;text-align:left;cursor:pointer;
  font:inherit;color:inherit;padding:0;
}
.cdx-tile:hover{transform:translateY(1px);box-shadow:0 4px 0 var(--play-edge)}
.cdx-tile:active{transform:translateY(5px);box-shadow:0 0 0 var(--play-edge)}
.cdx-tile:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.cdx-tile.is-next{box-shadow:0 6px 0 var(--play-edge);background:var(--play-accent-soft)}
.cdx-tile-head{
  display:flex;align-items:center;gap:6px;padding:5px 10px;
  background:var(--play-ink);color:var(--play-bg);
}
.cdx-tile.is-next .cdx-tile-head{background:var(--play-accent);color:var(--play-accent-ink)}
.cdx-tile-head b{margin-left:auto;font-size:.68rem;font-family:var(--play-display);font-weight:400;white-space:nowrap}
.cdx-tile-body{display:flex;flex-direction:column;gap:3px;padding:10px}
.cdx-tile-body b{font-size:.92rem;font-family:var(--play-display);font-weight:400;color:var(--play-ink);white-space:nowrap}
.cdx-tile-body .p-bar{height:9px;margin-top:2px}
.cdx-tile-status{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--play-link);white-space:nowrap}
:root[lang="hi"] .cdx-tile-status{text-transform:none;letter-spacing:0}
.cdx-tile-go{
  display:block;text-align:center;margin-top:2px;
  border:2px solid var(--play-ink);border-radius:14px;
  background:var(--play-accent);color:var(--play-accent-ink);
  box-shadow:0 3px 0 var(--play-edge);
  font-family:var(--play-display);font-weight:700;font-size:.78rem;
  padding:3px 8px;text-transform:uppercase;letter-spacing:.03em;
}
:root[lang="hi"] .cdx-tile-go{text-transform:none;letter-spacing:0}
.cdx-dex-count{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--play-mute)}
:root[lang="hi"] .cdx-dex-count{text-transform:none;letter-spacing:0}
.cdx-tile-search{
  align-self:flex-start;margin-top:2px;border:2px solid var(--play-ink);
  border-radius:999px;padding:0 10px;font-size:.68rem;background:var(--play-card);
  color:var(--play-ink);font-family:var(--play-display);
}

.cdx-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cdx-stat{
  border:2px solid var(--play-ink);border-radius:12px;background:var(--play-card);
  text-align:center;padding:8px 6px;
}
.cdx-stat.is-days{background:var(--play-paper)}
.cdx-stat b{display:block;font-family:var(--play-display);font-weight:400;font-size:1.1rem;color:var(--play-ink)}

@media (max-width:640px){
  .cdx-tiles{grid-template-columns:repeat(2,1fr)}
  .cdx-stats{grid-template-columns:repeat(3,1fr)}
}

/* ---- inside a chapter: the card stack (19b/20a/20b share this shell) ---- */

.cdx-chhead{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.cdx-back{
  width:26px;height:26px;flex:none;border:2px solid var(--play-ink);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--play-card);color:var(--play-ink);font-size:.75rem;
  text-decoration:none;cursor:pointer;
}
.cdx-back:hover{background:var(--play-paper)}
.cdx-back:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.cdx-chhead b{font-family:var(--play-display);font-weight:400;font-size:1rem;color:var(--play-ink);white-space:nowrap}
.cdx-chhead .p-bar{flex:1;height:8px}
.cdx-chhead .p-pill{font-size:.7rem;white-space:nowrap}

.cdx-card{
  border:2px solid var(--play-ink);border-radius:14px;background:var(--play-card);
  box-shadow:7px 7px 0 var(--play-edge);padding:16px;margin-bottom:14px;
}
.cdx-card-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cdx-card-head b{font-family:var(--play-display);font-weight:400;font-size:1.05rem;color:var(--play-ink)}

.cdx-nav{display:flex;align-items:center;gap:8px}
.cdx-nav-btn{
  border:2px solid var(--play-ink);border-radius:14px;background:var(--play-card);
  color:var(--play-ink);box-shadow:0 4px 0 var(--play-edge);
  font-family:var(--play-display);font-size:.85rem;padding:5px 16px;cursor:pointer;
}
.cdx-nav-btn:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}
.cdx-nav-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--play-edge)}
.cdx-nav-btn:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.cdx-nav-btn[disabled]{visibility:hidden}
.cdx-nav-gap{flex:1}

/* ---- the checkpoint bar --------------------------------------------------
   The header's progress bar is the navigation: one segment per page, each a
   jump — replacing the dot row that used to repeat the same information at
   the bottom. Seen pages fill with the accent; the CURRENT page is taller
   and carries the edge shadow, so the state reads without colour. The
   button is 28px tall (#138's floor is 24) around an 8px visual bar. */
.cdx-seg{flex:1;min-width:0;display:flex;align-items:center;gap:5px}
.cdx-seg-btn{
  flex:1;min-width:0;height:28px;padding:0;margin:0;border:0;background:none;
  display:flex;align-items:center;cursor:pointer;
}
.cdx-seg-btn i{
  display:block;width:100%;height:8px;border:2px solid var(--play-ink);
  border-radius:999px;background:var(--play-card);
}
.cdx-seg-btn.is-seen i{background:var(--play-accent)}
.cdx-seg-btn.is-on i{height:14px;box-shadow:0 3px 0 var(--play-edge)}
.cdx-seg-btn:hover i{background:var(--play-accent-soft)}
.cdx-seg-btn.is-seen:hover i{background:var(--play-accent)}
.cdx-seg-btn:focus-visible{outline:3px solid var(--play-link);outline-offset:2px;border-radius:999px}
/* Narrow screens: the header row (back + title + bar + pill) squeezes each
   segment to ~20px, under #138's 24px floor. The bar drops to its own
   full-width row instead, so four segments get ~70px each. */
@media (max-width:640px){
  .cdx-chhead{flex-wrap:wrap}
  .cdx-seg{flex-basis:100%;order:10}
}
.cdx-go{
  display:block;text-align:center;margin-top:14px;width:100%;box-sizing:border-box;
  border:2px solid var(--play-ink);border-radius:14px;
  background:var(--play-accent);color:var(--play-accent-ink);
  box-shadow:0 4px 0 var(--play-edge);
  font-family:var(--play-display);font-weight:700;font-size:.95rem;
  padding:7px 20px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;
}
:root[lang="hi"] .cdx-go{text-transform:none;letter-spacing:0}
.cdx-go:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}
.cdx-go:active{transform:translateY(4px);box-shadow:0 0 0 var(--play-edge)}
.cdx-go:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

/* the tap-a-piece sentence, inside its card */
.cdx-sentence{font-family:var(--jp);font-size:1.6rem;text-align:center;line-height:1.7;margin:10px 0}
.cdx-sentence .tok{
  background:none;border:0;font:inherit;color:var(--play-ink);cursor:pointer;
  border-bottom:4px solid transparent;padding:0 1px;
}
.cdx-sentence .tok:hover,.cdx-sentence .tok:focus-visible{border-bottom-color:var(--play-soft)}
.cdx-sentence .tok.is-on{border-bottom-color:var(--play-accent)}
.cdx-sentence .tok:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.cdx-legend{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;font-size:.72rem;color:var(--play-mute)}
.cdx-tokbox{
  border:2px dashed var(--play-soft);border-radius:12px;padding:8px 12px;margin-top:10px;
  background:var(--play-paper);color:var(--play-mute);font-size:.85rem;min-height:1.4em;
}
.cdx-wordorder{display:flex;gap:10px;margin-top:12px}
.cdx-wordorder>div{flex:1;border:2px solid var(--play-ink);border-radius:12px;background:var(--play-paper);padding:8px 10px}
.cdx-wordorder .cdx-tag{display:block;margin-bottom:2px}
.cdx-wordorder b{font-size:.85rem;color:var(--play-ink)}
.cdx-wordorder em{color:var(--play-link);font-style:normal}

/* six-things / paired-facts compact list, used inside a card */
.cdx-facts{display:flex;flex-direction:column;gap:8px}
.cdx-facts>div{display:flex;gap:8px;align-items:baseline}
.cdx-facts b{flex:none;color:var(--play-ink)}
.cdx-facts span{color:var(--play-ink);font-size:.88rem}

@media (max-width:640px){
  .cdx-wordorder{flex-direction:column}
}

/* ---- the end-of-chapter check ------------------------------------------- */

.cdx-check{
  border:2px solid var(--play-ink);border-radius:14px;background:var(--play-paper);
  padding:14px;margin-top:14px;
}
.cdx-check-q{font-family:var(--play-display);font-size:1rem;color:var(--play-ink);margin-bottom:8px}
.cdx-check-jp{font-family:var(--jp);font-size:1.3rem;margin-bottom:8px}
.cdx-check-opts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.cdx-check-opts button{
  border:2px solid var(--play-ink);border-radius:14px;background:var(--play-card);
  color:var(--play-ink);box-shadow:0 3px 0 var(--play-edge);
  font-family:var(--play-display);font-size:.85rem;padding:4px 16px;cursor:pointer;
}
.cdx-check-opts button:hover{transform:translateY(1px);box-shadow:0 2px 0 var(--play-edge)}
.cdx-check-opts button:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.cdx-check-opts button.is-right{background:var(--good);border-color:var(--play-ink);color:#fff;box-shadow:0 3px 0 var(--play-edge)}
.cdx-check-opts button.is-wrong{background:var(--bad);border-color:var(--play-ink);color:#fff;box-shadow:0 3px 0 var(--play-edge)}
.cdx-check-fb{font-size:.85rem;color:var(--play-mute);min-height:1.3em}
.cdx-check-fb.is-right{color:var(--good)}
.cdx-check-progress{display:flex;gap:5px;margin-bottom:10px}
.cdx-check-progress i{
  flex:1;height:6px;border-radius:999px;border:2px solid var(--play-ink);
  background:var(--play-card);display:block;
}
.cdx-check-progress i.is-done{background:var(--play-accent)}
.cdx-check-done{display:flex;align-items:center;gap:10px}
.cdx-check-done .p-node{width:40px;height:40px;font-size:1.1rem}

/* ---- the dex (19c) ------------------------------------------------------- */

.cdx-dexbar{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cdx-dexbar .p-bx{flex:1;padding:5px 12px;color:var(--play-mute);font-size:.85rem;display:flex;gap:6px;align-items:center}
.cdx-dexbar input{border:0;background:none;flex:1;font:inherit;color:var(--play-ink);outline:none;font-family:var(--play-display)}
.cdx-dexbar input::placeholder{color:var(--play-mute)}
.cdx-dex-total{font-size:.78rem;white-space:nowrap}

.cdx-chips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.cdx-chip{
  border:2px solid var(--play-ink);border-radius:14px;padding:2px 12px;
  background:var(--play-card);color:var(--play-ink);
  font-family:var(--play-display);font-size:.78rem;cursor:pointer;white-space:nowrap;
}
.cdx-chip:hover{background:var(--play-paper)}
.cdx-chip.is-on{background:var(--play-accent);color:var(--play-accent-ink);font-weight:700}
.cdx-chip:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

.cdx-note{
  border:2px dashed var(--play-soft);border-radius:12px;padding:8px 12px;
  background:var(--play-paper);color:var(--play-mute);font-size:.85rem;margin-bottom:12px;
}

.cdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cdx-term{
  border:2px solid var(--play-ink);border-radius:12px;background:var(--play-card);
  padding:8px 10px;text-align:left;cursor:pointer;font:inherit;color:inherit;
}
.cdx-term:hover{background:var(--play-paper)}
.cdx-term:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.cdx-term[hidden]{display:none}
.cdx-term-row{display:flex;align-items:baseline;gap:5px}
.cdx-term-row b{font-family:var(--play-display);font-weight:400;font-size:.92rem;color:var(--play-ink)}
.cdx-term-row span{font-family:var(--jp);font-size:.8rem;color:var(--play-mute)}
.cdx-term .cdx-tag{font-size:.6rem;display:block;margin-top:1px}

.cdx-termcard .cdx-body{color:var(--play-mute);font-size:.9rem;margin:8px 0}
.cdx-termcard .cdx-demo{display:flex;align-items:center;gap:8px;margin:10px 0}
.cdx-termcard .say{
  border:2px solid var(--play-ink);border-radius:999px;padding:2px 12px;
  background:var(--play-card);color:var(--play-ink);font-family:var(--play-display);
  font-size:.78rem;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
}
.cdx-termcard .say:hover{background:var(--play-paper)}
.cdx-termcard .say[data-novoice]{opacity:.5;cursor:default}
.cdx-termcard .cdx-lib{margin-left:auto;font-size:.78rem;white-space:nowrap}

/* ---- the exam staircase + paper bar (20a) -------------------------------- */

.cdx-stair{display:flex;align-items:flex-end;gap:8px;padding:6px 0 0}
.cdx-step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:0;color:var(--play-mute)}
.cdx-step.is-here{color:var(--play-ink)}
.cdx-step-block{
  width:100%;border:3px solid var(--play-soft);border-radius:4px;background:var(--play-card);
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
}
.cdx-step.is-here .cdx-step-block{
  border-color:var(--play-ink);background:var(--play-accent);
  box-shadow:0 5px 0 var(--play-edge);color:var(--play-accent-ink);
}
.cdx-step-block b{font-family:var(--play-display);font-weight:400;font-size:1.2rem}
.cdx-step-mark{
  font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--play-ink);color:var(--play-bg);border-radius:999px;padding:1px 8px;margin-bottom:4px;
}
:root[lang="hi"] .cdx-step-mark{text-transform:none;letter-spacing:0}
.cdx-step-lbl{font-family:var(--play-display);font-size:.75rem;margin-top:5px;color:inherit}

.cdx-paper{margin-top:14px}
.cdx-paper-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cdx-paper-hd b{font-family:var(--play-display);font-weight:400;font-size:.95rem;color:var(--play-ink);white-space:nowrap}
.cdx-paper-hd i{flex:1;border-top:2px dashed var(--play-track);display:block}
.cdx-paper-bar{
  display:flex;border:3px solid var(--play-ink);border-radius:4px;overflow:hidden;height:46px;
}
.cdx-paper-bar>div{
  display:flex;align-items:center;justify-content:center;
  border-right:3px solid var(--play-ink);box-sizing:border-box;
}
.cdx-paper-bar>div:last-child{border-right:0}
.cdx-paper-bar b{font-family:var(--play-display);font-weight:400}
.cdx-paper-parts{display:flex;margin-top:6px}
.cdx-paper-parts>div{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
.cdx-paper-parts b{font-family:var(--play-display);font-weight:400;font-size:.78rem;color:var(--play-ink)}
.cdx-paper-parts span{font-size:.65rem;color:var(--play-mute)}

.cdx-pass{display:flex;gap:10px;align-items:stretch;margin-top:12px}
.cdx-pass-nums{flex:1;display:flex;flex-direction:column;gap:5px}
.cdx-pass-row{display:flex;align-items:center;gap:8px}
.cdx-pass-row b{font-family:var(--play-display);font-weight:400;font-size:1.05rem;color:var(--play-ink)}
.cdx-pass-row span{flex:1;color:var(--play-mute);font-size:.82rem}
.cdx-pass-tanu{width:250px;flex:none;border:2px solid var(--play-ink);border-radius:12px;background:var(--play-paper);padding:10px 12px;display:flex;gap:8px;align-items:flex-start}
.cdx-pass-tanu .p-bub{font-size:.8rem}

@media (max-width:640px){
  .cdx-pass{flex-direction:column}
  .cdx-pass-tanu{width:auto}
}

/* ---- the how-it-works chain (20b) ---------------------------------------- */

.cdx-chain{display:flex;align-items:center;justify-content:center;gap:0;margin:4px 0 16px;flex-wrap:wrap}
.cdx-chain-stop{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.cdx-chain-stop:focus-visible{outline:3px solid var(--play-link);outline-offset:3px;border-radius:10px}
.cdx-chain-stop .cdx-tag{max-width:70px;white-space:normal;text-align:center;line-height:1.15}
.cdx-chain-line{width:22px;border-top:3px solid var(--play-ink);margin-bottom:22px;flex:none}
.cdx-chain-line.is-todo{border-top-style:dashed;border-top-color:var(--play-soft)}

.cdx-widget{border:2px solid var(--play-ink);border-radius:12px;background:var(--play-paper);padding:10px 12px}
.cdx-widget-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.cdx-widget-row>div{flex:1;min-width:180px}

/* step 1: today's stages, click-through */
.cdx-stagepick{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.cdx-stagepick button{
  flex:1;min-width:90px;border:2px solid var(--play-ink);border-radius:12px;
  background:var(--play-card);color:var(--play-ink);cursor:pointer;
  padding:8px 10px;font:inherit;text-align:left;
}
.cdx-stagepick button.is-on{background:var(--play-accent);color:var(--play-accent-ink)}
.cdx-stagepick button b{display:block;font-family:var(--play-display);font-weight:400;font-size:.85rem}
.cdx-stagepick button span{font-size:.68rem;opacity:.85}
.cdx-stagepick button:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.cdx-stagedetail{font-size:.85rem;color:var(--play-mute)}

/* step 2: real grade buttons + real intervals */
.cdx-grademock{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.cdx-grademock button{
  flex:1;min-width:64px;border:2px solid var(--play-ink);border-radius:12px;
  background:var(--play-card);box-shadow:0 3px 0 var(--play-edge);
  font-family:var(--play-display);font-size:.78rem;padding:4px 6px;cursor:pointer;color:var(--play-ink);
}
.cdx-grademock button.is-on{background:var(--play-accent);color:var(--play-accent-ink)}
.cdx-grademock button:hover{transform:translateY(1px);box-shadow:0 2px 0 var(--play-edge)}
.cdx-grademock button:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.cdx-graderesult{font-size:.8rem;color:var(--play-mute);margin-top:6px}
.cdx-grademock i{display:block;font-style:normal;font-size:.62rem;opacity:.8;margin-top:1px}

/* step 3: type the romaji, for real */
.cdx-romaji-demo{text-align:center;padding:6px 0}
.cdx-romaji-demo .jp{font-size:3.2rem;line-height:1}
.cdx-romaji-demo input{
  margin-top:8px;width:110px;text-align:center;border:2px solid var(--play-ink);
  border-radius:10px;padding:5px 8px;font:1rem var(--play-display);
  background:var(--play-card);color:var(--play-ink);
}
.cdx-romaji-demo input.is-right{border-color:var(--good);background:var(--play-accent-soft)}
.cdx-romaji-demo input.is-wrong{border-color:var(--bad)}
.cdx-romaji-fb{font-size:.78rem;color:var(--play-mute);min-height:1.2em;margin-top:4px}

/* step 4: real reference tabs */
.cdx-reftabs{display:flex;gap:5px;margin-bottom:8px}
.cdx-reftabs button{
  border:2px solid var(--play-ink);border-radius:12px;background:var(--play-card);
  color:var(--play-ink);font-family:var(--play-display);font-size:.78rem;
  padding:3px 12px;cursor:pointer;
}
.cdx-reftabs button.is-on{background:var(--play-accent);color:var(--play-accent-ink)}
.cdx-reftabs button:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.cdx-refrow{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:.85rem;padding:4px 0;border-bottom:1px dashed var(--play-track)}
.cdx-refrow:last-child{border-bottom:0}
.cdx-refrow .jp{font-family:var(--jp)}
.cdx-refrow .cdx-pill{border:2px solid var(--play-ink);border-radius:999px;padding:0 8px;font-size:.68rem}

/* step 6: a live mini Plan+Stats */
.cdx-planpeek{display:flex;gap:14px;align-items:center}
.cdx-planpeek .p-ring{width:56px;height:56px;flex:none}
.cdx-chart{display:flex;align-items:flex-end;gap:4px;height:50px;flex:1}
.cdx-chart i{flex:1;background:var(--play-accent);border-radius:3px 3px 0 0;display:block}

/* ===== turn 21: the restoration pass ==================================== */
/* Every colour below resolves to a --play-* token (decision 0008). The board
   draws #2a2520 ink / #f97316 ember / #faf7f1 paper / #b8afa2 soft, which are
   --play-ink / --play-accent / --play-paper / --play-soft in the light theme
   this frame was drawn in; using the tokens keeps the dark theme correct,
   where those literals would be wrong. */

/* ---- 21a: the resume band ---------------------------------------------- */
.cdx-band{
  border:2px solid var(--play-ink);border-radius:14px;background:var(--play-card);
  box-shadow:7px 7px 0 var(--play-edge);overflow:hidden;margin-bottom:16px;
}
.cdx-band-top{display:flex;align-items:center;gap:12px;padding:12px 14px}
.cdx-band-tanu{width:52px;height:52px;flex:none;color:var(--play-ink)}
.cdx-band-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
/* The subtitle is a sentence, not a label — it must not inherit .cdx-tag's caps. */
.codexpage .cdx-band-t .cdx-tag{color:var(--play-ink);text-transform:none;letter-spacing:0;font-size:.8rem;line-height:1.45}
.cdx-band-t b{font-family:var(--play-display);font-weight:400;font-size:1.3rem;line-height:1.05;color:var(--play-ink)}
.cdx-band-go{
  flex:none;background:var(--play-accent);color:var(--play-accent-ink);
  border:2px solid var(--play-ink);border-radius:14px;padding:6px 20px;
  font-family:var(--play-display);font-weight:700;font-size:1rem;
  box-shadow:0 4px 0 var(--play-edge);text-decoration:none;white-space:nowrap;
}
.cdx-band-go:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}
.cdx-band-go:active{transform:translateY(4px);box-shadow:0 0 0 var(--play-edge)}
.cdx-band-go:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.cdx-band-cells{display:flex;align-items:stretch;border-top:2px solid var(--play-ink)}
.cdx-band-cell{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  padding:8px 4px;border-right:2px solid var(--play-ink);background:var(--play-paper);
}
.cdx-band-cell b{font-family:var(--play-display);font-weight:400;font-size:1.35rem;color:var(--play-ink)}
.cdx-band-cell .cdx-tag{font-size:.6rem;text-align:center}
.cdx-band-acct{
  width:250px;box-sizing:border-box;flex:none;display:flex;flex-direction:column;
  gap:2px;padding:8px 12px;justify-content:center;
}
.cdx-band-acct b{font-size:.82rem;color:var(--play-ink);word-break:break-all}
.cdx-band-acct .cdx-tag{font-size:.6rem}
.cdx-band.is-empty{display:flex;align-items:center;gap:12px;padding:12px 14px}
.cdx-band.is-empty .cdx-band-t{flex:1}
.cdx-ringnote{
  font-size:.72rem;color:var(--play-mute);font-family:var(--play-display);
  margin:-6px 0 14px;line-height:1.4;
}
.cdx-exportbtn{
  flex:none;background:var(--play-card);color:var(--play-ink);
  border:2px solid var(--play-ink);border-radius:14px;padding:5px 14px;
  font-family:var(--play-display);font-size:.85rem;cursor:pointer;
  box-shadow:0 4px 0 var(--play-edge);white-space:nowrap;align-self:flex-start;
}
.cdx-exportbtn:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}
.cdx-exportbtn:active{transform:translateY(4px);box-shadow:0 0 0 var(--play-edge)}
.cdx-exportbtn:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.cdx-flash{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);
  background:var(--play-ink);color:var(--play-bg);border-radius:999px;
  padding:8px 18px;font-family:var(--play-display);font-size:.9rem;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:60;
}
.cdx-flash.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- 21e: the payoff line on a fact ------------------------------------- */
/* Both are <span>s inside .cdx-facts, and `.cdx-facts span` is (0,1,1) — it
   beats a bare class and was repainting the pill in --play-ink on the ember
   fill (2.32:1 measured in dark). Scoped to .codexpage so these win. */
.codexpage .cdx-payoff{
  display:block;margin-top:6px;border-top:2px dashed var(--play-track);
  padding-top:6px;font-size:.82rem;color:var(--play-ink);line-height:1.45;
}
.codexpage .cdx-payoff-tag{
  display:inline-block;background:var(--play-accent);color:var(--play-accent-ink);
  border-radius:999px;padding:0 8px;margin-right:6px;font-size:.6rem;
  letter-spacing:.06em;text-transform:uppercase;vertical-align:1px;
}
:root[lang="hi"] .codexpage .cdx-payoff-tag{text-transform:none;letter-spacing:0}
/* The payoff is a row of its own, not a third item on the fact's line:
   .cdx-facts>div is a baseline flex row, so it needs a full-width basis. */
.codexpage .cdx-facts>div{flex-wrap:wrap}
.codexpage .cdx-payoff{flex-basis:100%}
/* 21e's solid/dashed grammar — wins solid, traps dashed and tinted. Both need
   a border-width first; border-style alone paints nothing. */
.codexpage .cdx-facts.is-win>div,
.codexpage .cdx-facts.is-trap>div{
  border:2px solid var(--play-ink);border-radius:12px;padding:9px 11px;
  align-items:flex-start;
}
.codexpage .cdx-facts.is-trap>div{border-style:dashed;background:var(--play-paper)}

/* ---- 21d: the three-row proof ------------------------------------------- */
.cdx-wordorder>div.is-odd{border-style:dashed;background:var(--play-paper)}
.cdx-order{
  display:block;margin-top:3px;font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--play-mute);font-family:var(--play-display);
}
:root[lang="hi"] .cdx-order{text-transform:none;letter-spacing:0}
.cdx-wordorder em{color:var(--play-link);font-style:normal;font-weight:700}
.cdx-orderpayoff{display:flex;align-items:flex-start;gap:9px;margin-top:10px}
.cdx-payoff-tanu{width:40px;height:40px;flex:none;color:var(--play-ink)}

/* ---- 21f: staircase v3 --------------------------------------------------- */
.cdx-examname{font-size:.85rem;color:var(--play-ink);margin:0 0 4px;line-height:1.4}
/* The level description is prose, and the greyed future levels still have to
   be readable — the staircase already signals progression by height and by the
   "you are here" mark, so it does not need to signal it by fading text too. */
.codexpage .cdx-step-sub{white-space:normal;text-align:center;line-height:1.25;font-size:.66rem;text-transform:none;letter-spacing:0;color:var(--play-ink)}
.cdx-where{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;
  border:2px dashed var(--play-soft);border-radius:12px;padding:8px 11px;
  background:var(--play-paper);font-size:.8rem;color:var(--play-ink);line-height:1.45;
}
.cdx-where>span:not(.cdx-where-ic){flex:1;min-width:180px}
.cdx-where-link{color:var(--play-ink);white-space:nowrap;font-size:.78rem;text-decoration:underline}
.cdx-where-link:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

/* ---- 21b: where progress lives ------------------------------------------ */
.cdx-homes{display:flex;align-items:stretch;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.cdx-home{
  flex:1;min-width:220px;border:2px solid var(--play-ink);border-radius:12px;
  padding:11px;background:var(--play-paper);
}
.cdx-home.is-dashed{border-style:dashed;background:var(--play-card)}
.cdx-home.is-here{box-shadow:0 4px 0 var(--play-edge)}
.cdx-home-hd{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.cdx-home-hd b{font-family:var(--play-display);font-weight:400;font-size:.95rem;color:var(--play-ink)}
.cdx-home-ic{width:30px;height:30px;font-size:.85rem;flex:none}
.cdx-home.is-here .cdx-home-ic{background:var(--play-accent);color:var(--play-accent-ink)}
.cdx-home-you{font-size:.6rem;white-space:nowrap}
.codexpage .cdx-home-body{color:var(--play-ink);display:block;text-transform:none;letter-spacing:0;font-size:.82rem;line-height:1.5}
.cdx-home-note{display:block;margin-top:4px;font-size:.6rem}
.cdx-exportrow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:2px solid var(--play-track);padding-top:10px;margin-bottom:10px;
}
.codexpage .cdx-export-note{color:var(--play-ink);flex:1;min-width:200px;text-transform:none;letter-spacing:0;font-size:.8rem;line-height:1.45}
.cdx-export-where{font-size:.6rem;white-space:nowrap}

/* ---- 21b: the closing card (Hindi only) --------------------------------- */
.cdx-closing{display:flex;align-items:flex-start;gap:12px;margin-top:12px}
.cdx-closing-tanu{width:56px;height:56px;flex:none;color:var(--play-ink)}
.cdx-closing-tag{font-size:.6rem;margin-bottom:5px;display:inline-block}
.cdx-closing-body{font-size:.85rem;line-height:1.6;margin:0}

/* ---- 21c: the rules strip ------------------------------------------------ */
.cdx-rules{display:flex;align-items:stretch;gap:10px;margin-top:10px;flex-wrap:wrap}
.cdx-rule{
  flex:1;min-width:240px;border:2px solid var(--play-ink);border-radius:12px;
  padding:11px;background:var(--play-card);
}
.cdx-rule.is-soft{background:var(--play-paper)}
.cdx-rule-hd{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.cdx-rule-hd b{font-family:var(--play-display);font-weight:400;font-size:.95rem;color:var(--play-ink)}
.cdx-rule-ic{width:26px;height:26px;font-size:.75rem;flex:none}
.cdx-keyrow{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cdx-keys{display:flex;gap:3px;flex:none}
.cdx-kbd{
  border:2px solid var(--play-ink);border-radius:6px;background:var(--play-card);
  box-shadow:0 3px 0 var(--play-edge);padding:1px 8px;font-family:var(--play-display);
  font-size:.75rem;color:var(--play-ink);
}
.codexpage .cdx-keyrow .cdx-tag{flex:1;text-transform:none;letter-spacing:0;font-size:.8rem}
.codexpage .cdx-rule-note{color:var(--play-ink);display:block;text-transform:none;letter-spacing:0;font-size:.8rem;line-height:1.5;margin:6px 0 0}
.cdx-rule-dev{border-top:2px dashed var(--play-track);padding-top:6px}
.cdx-pairs{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0 0}
.cdx-pair{font-size:.82rem;white-space:nowrap}

/* ---- 21g: the four reference tabs --------------------------------------- */
.cdx-reftabs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.cdx-reftab{
  border:2px solid var(--play-ink);border-radius:12px;padding:10px 11px;
  background:var(--play-card);display:flex;flex-direction:column;gap:6px;
}
.cdx-reftab.is-accent{background:var(--play-paper)}
.cdx-reftab-hd{display:flex;align-items:center;gap:6px}
.cdx-reftab-hd b{font-family:var(--play-display);font-weight:400;font-size:.9rem;color:var(--play-ink)}
.cdx-reftab-ic{width:32px;height:32px;font-size:.9rem;flex:none}
.codexpage .cdx-reftab-body{color:var(--play-ink);text-transform:none;letter-spacing:0;font-size:.78rem;line-height:1.5;flex:1}
.cdx-reftab-tag{font-size:.6rem;align-self:flex-start}
.codexpage .cdx-edge{display:block;text-transform:none;letter-spacing:0;font-size:.78rem;margin-top:6px;line-height:1.45}

@media (max-width:640px){
  .cdx-band-cells{flex-wrap:wrap}
  .cdx-band-cell{min-width:33%;border-bottom:2px solid var(--play-ink)}
  .cdx-band-acct{width:100%;border-top:2px solid var(--play-ink)}
  .cdx-band-top{flex-wrap:wrap}
  .cdx-band-go{width:100%;text-align:center;box-sizing:border-box}
  .cdx-reftabs-grid{grid-template-columns:repeat(2,1fr)}
  .cdx-homes{flex-direction:column}
  .cdx-rules{flex-direction:column}
}