/* Moyako Training — app styles (standalone). Theme tokens come from the shared
   pipeline: _shared/tokens/products/training.json -> generated/training-tokens.css
   (edit the JSON + run _shared/tokens/build-tokens.js; never hand-edit tokens here). */
@import url("_shared/tokens/generated/training-tokens.css");
*{box-sizing:border-box}
body[data-moyako-v2]{margin:0;background:var(--bg-primary);color:var(--text);
  font-family:-apple-system,Segoe UI,Roboto,system-ui,sans-serif;line-height:1.45}
.page{min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}

/* header + bottom nav */
.header{height:58px;display:flex;align-items:center;gap:12px;padding:0 18px;background:var(--bg-surface);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.header .logo{font-weight:800;font-size:17px}.header .logo b{color:var(--action)}
.header .spacer{flex:1}
.pill{background:var(--bg-raised);border:1px solid var(--line);border-radius:20px;padding:5px 12px;
  font-size:12px;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.pill b{color:var(--text)}
.course-switch{cursor:pointer;font-size:12px;color:var(--text);max-width:210px}
/* Mobile: the header holds a lot (switcher + streak + band + auth + gear). Keep it from
   widening the page — it scrolls within itself, items pack left, pills stay whole. */
@media (max-width:480px){
  .header{gap:8px;padding:0 12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .header::-webkit-scrollbar{height:0}
  .header .spacer{flex:0 0 2px}
  .header .pill,.header .logo,.course-switch{flex:0 0 auto}
  .course-switch{max-width:150px}
}
.bottom-nav{height:62px;display:flex;background:var(--bg-surface);border-top:1px solid var(--line);position:sticky;bottom:0;z-index:20}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:11px}
.bottom-nav a.active{color:var(--action)}.bottom-nav .ic{font-size:19px}
.body{flex:1;padding:20px;max-width:1120px;width:100%;margin:0 auto}

/* cards + type */
.moyako-card{background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.moyako-card.raised{background:var(--bg-raised)}
.row{display:flex;gap:var(--gap)}.col{flex:1}.wrap{flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.muted{color:var(--muted)}.small{font-size:12px}.tiny{font-size:11px}.center{text-align:center}
.kpi{font-size:28px;font-weight:800;color:var(--text)}
.tag{display:inline-block;font-size:11px;padding:2px 9px;border-radius:12px;background:var(--bg-raised);border:1px solid var(--line);color:var(--muted)}
.tag.H{color:#ffb74d;border-color:#8a5a1c}.tag.F{color:#7ec8ff;border-color:#2b5a80}
h1,h2,h3{margin:0 0 .4em}.h-sec{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:6px 0 10px}

/* buttons */
.btn-primary,.btn-secondary,.btn-ghost{border:none;border-radius:12px;padding:12px 16px;font-weight:700;font-size:14px;cursor:pointer;display:inline-block;text-align:center}
.btn-primary{background:var(--action);color:#08210c}.btn-primary.block,.btn-secondary.block{width:100%}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost{background:var(--bg-raised);color:var(--text);border:1px solid var(--line);font-weight:600;font-size:13px;padding:8px 12px}
.btn-primary[disabled]{opacity:.5;cursor:not-allowed}

/* two-pane */
.two-pane{display:flex;gap:var(--gap);align-items:stretch}
.two-pane .pane{flex:1;display:flex;flex-direction:column;gap:var(--gap)}
.two-pane .pane.right{flex:0 0 380px}
@media (max-width:820px){ .two-pane{flex-direction:column} .two-pane .pane.right{flex:1} .grid2{grid-template-columns:1fr} }

/* MTS ring */
.ring{--pct:0;--band:var(--band-train);width:132px;height:132px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--band) calc(var(--pct)*1%),color-mix(in srgb,var(--muted) 20%,transparent) 0);display:flex;align-items:center;justify-content:center;position:relative}
.ring.sm{width:104px;height:104px}
.ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--bg-surface)}
.ring .val{position:relative;text-align:center}.ring .val b{font-size:30px;color:var(--text)}.ring.sm .val b{font-size:24px}
.ring .val span{display:block;font-size:11px;color:var(--muted)}

/* mastery bars */
.bar{margin:10px 0}.bar .lab{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
.bar .lab a{color:var(--accent)}
.bar .track{height:9px;background:color-mix(in srgb,var(--muted) 20%,transparent);border-radius:6px;overflow:hidden}
.bar .fill{height:100%;border-radius:6px;background:var(--action)}
.bar .fill.mid{background:var(--accent)}.bar .fill.low{background:var(--danger)}
.bar.locked{opacity:.5}

/* progress */
.qprog{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.qprog .track{flex:1;height:8px;background:color-mix(in srgb,var(--muted) 20%,transparent);border-radius:6px;overflow:hidden}
.qprog .fill{height:100%;background:var(--action);border-radius:6px;transition:width .3s}

/* question player */
.crumb{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.stem{font-size:25px;color:var(--text);margin:10px 0 8px;min-height:40px;overflow-x:auto;overflow-y:hidden;max-width:100%}
@media (max-width:820px){ .stem{font-size:21px} }
.mascot{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text)}.mascot .face{font-size:22px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--bg-raised);cursor:pointer;font-size:17px}
.opt:hover{border-color:#3d5a80}
.opt .k{width:26px;height:26px;border-radius:7px;background:color-mix(in srgb,var(--muted) 26%,transparent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:0 0 auto}
.opt.correct{border-color:var(--action);background:color-mix(in srgb,var(--action) 16%,var(--bg-surface))}.opt.correct .k{background:var(--action);color:#08210c}
.opt.wrong{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,var(--bg-surface))}.opt.wrong .k{background:var(--danger);color:#2a0708}
.answer-box{font-size:30px;font-weight:700;color:var(--text);background:var(--bg-primary);border:2px solid var(--line);border-radius:12px;padding:14px 18px;min-height:62px;display:flex;align-items:center;justify-content:flex-end}
.answer-box.ok{border-color:var(--action)}.answer-box.no{border-color:var(--danger)}
.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.keypad button{background:var(--bg-raised);border:1px solid var(--line);color:var(--text);border-radius:11px;padding:16px 0;font-size:18px;cursor:pointer}
.keypad button:hover{border-color:var(--action)}.keypad button.fn{color:var(--accent)}.keypad button.act{background:var(--action);color:#08210c;font-weight:700}.keypad button.del{color:var(--danger)}
.fb{border-radius:12px;padding:14px 16px;font-size:14px;display:none}.fb.show{display:block}
.fb.right{background:color-mix(in srgb,var(--action) 16%,var(--bg-surface));border:1px solid var(--action)}.fb.wrongfb{background:color-mix(in srgb,var(--danger) 14%,var(--bg-surface));border:1px solid var(--danger)}
.fb .em{color:var(--accent);font-weight:700}

/* exam-sim */
.exam-bar{display:flex;align-items:center;gap:12px;background:var(--bg-surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;flex-wrap:wrap}
.timer{font-variant-numeric:tabular-nums;font-weight:800;color:var(--text)}
.qgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.qgrid .n{aspect-ratio:1;border:1px solid var(--line);border-radius:7px;background:var(--bg-raised);display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer}
.qgrid .n.done{background:color-mix(in srgb,var(--action) 16%,var(--bg-surface));border-color:var(--action)}.qgrid .n.flag{background:#3a2a10;border-color:var(--accent)}.qgrid .n.cur{outline:2px solid var(--info)}

/* onboarding + settings */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{background:var(--bg-raised);border:none;color:var(--muted);padding:8px 14px;font-size:13px;cursor:pointer}
.seg button.on{background:var(--action);color:#08210c;font-weight:700}
.choice{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--bg-raised);cursor:pointer;margin:8px 0;display:flex;justify-content:space-between;align-items:center}
.choice.on{border-color:var(--action);background:color-mix(in srgb,var(--action) 16%,var(--bg-surface))}
.choice.soon{opacity:.5;cursor:not-allowed}
.setrow{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:none}
.lock{color:var(--muted);font-size:12px}
.demo-note{max-width:1120px;margin:14px auto 0;color:var(--muted);font-size:12px}
.stat{display:flex;flex-direction:column;gap:2px}.stat .kpi{font-size:24px}

/* Light & wooden theme *tokens* now live in the shared pipeline (training.json).
   Only theme-specific component styles remain below. */
body[data-moyako-v2][data-theme="light"] .moyako-card{box-shadow:0 1px 3px rgba(16,27,45,.06),0 8px 24px rgba(16,27,45,.05)}
body[data-moyako-v2][data-theme="light"] .header{box-shadow:0 1px 0 var(--line)}

body[data-moyako-v2][data-theme="wooden"] .moyako-card{box-shadow:0 1px 2px rgba(74,48,20,.10),0 8px 22px rgba(74,48,20,.07)}
body[data-moyako-v2][data-theme="wooden"] .header{box-shadow:0 1px 0 var(--line)}