/* PencilPay Training — SHARED design system (single source of truth).
   Used by the app pages (linked before style.css) AND embedded into the generated
   training page by scripts/build_training_site.py at build time. Anything that should
   look identical everywhere lives here: theme tokens, light/system/dark behaviour,
   top bar, theme switcher, layout width, cards, stat tiles, badges, status colours.
   Page-specific styles belong in webapp/static/style.css (app) or the builder (training). */

/* --- theme tokens --- */
:root{--bg:#0f1115;--card:#1a1d24;--ink:#e8eaed;--ink2:#d7dbe0;--mut:#9aa3af;--acc:#4f8cff;--ok:#37b24d;--warn:#f0a330;--bad:#e05c5c;--line:#2a2e37;--warn-soft:#3a2a12;--warn-bd:#5a4318;--ok-soft:#173a22;--bad-soft:#3a1717;--chip-active:#26303f;--hook:#bcd0f5}
html[data-theme="light"]{--bg:#f6f7f9;--card:#ffffff;--ink:#1b1f27;--ink2:#2b313b;--mut:#5b6471;--acc:#2f6fed;--ok:#2f9e44;--warn:#b3590a;--bad:#c92a2a;--line:#e3e6eb;--warn-soft:#fff3e2;--warn-bd:#ffd8a8;--ok-soft:#e7f6ec;--bad-soft:#fde8e8;--chip-active:#e6edfb;--hook:#2f5bb7}
@media(prefers-color-scheme:light){html[data-theme="system"]{--bg:#f6f7f9;--card:#ffffff;--ink:#1b1f27;--ink2:#2b313b;--mut:#5b6471;--acc:#2f6fed;--ok:#2f9e44;--warn:#b3590a;--bad:#c92a2a;--line:#e3e6eb;--warn-soft:#fff3e2;--warn-bd:#ffd8a8;--ok-soft:#e7f6ec;--bad-soft:#fde8e8;--chip-active:#e6edfb;--hook:#2f5bb7}}

/* --- base --- */
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--ink);transition:background .2s ease,color .2s ease}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
.muted{color:var(--mut)}
.fine{color:var(--mut);font-size:12px;margin-top:14px}
.good{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}

/* --- theme switcher --- */
.theme{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--card);flex:0 0 auto}
.theme button{border:0;background:transparent;color:var(--mut);cursor:pointer;font-size:13px;line-height:1;padding:6px 10px;border-radius:999px;transition:background .15s,color .15s}
.theme button:hover{color:var(--ink)}
.theme button.active{background:var(--acc);color:#fff}

/* --- top bar (identical on every page) --- */
.topbar{display:flex;align-items:center;gap:18px;padding:14px 24px;border-bottom:1px solid var(--line);background:var(--bg)}
.topbar .brand{font-weight:700}
.topbar nav{display:flex;gap:14px;flex-wrap:wrap}
.topbar nav a{color:var(--mut);font-size:15px}
.topbar nav a:hover{color:var(--ink);text-decoration:none}
.topbar nav a.active{color:var(--ink);font-weight:600}
.topbar .theme{margin-left:auto}
.topbar .who{font-size:13px;color:var(--mut);white-space:nowrap}
.topbar .who a{color:var(--mut)}

/* --- layout --- */
.wrap{max-width:1000px;margin:0 auto;padding:20px 24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}

/* --- stat tiles --- */
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 14px;min-width:110px}
.stat b{display:block;font-size:20px}
.stat span{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}

/* --- badges --- */
.badge{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--mut);white-space:nowrap}