/* RUDO Learning Hub - styles layered on /assets/rudo.css. Gold is the only accent. Zero emoji.
   Bilingual long prose: <div class="l-en" lang="en">...</div><div class="l-zh" lang="zh">...</div>;
   site.js sets <html lang> from the reader's choice and the rules below hide the other language. */
html:not([lang="zh-CN"]) .l-zh{display:none!important}
html[lang="zh-CN"] .l-en{display:none!important}
:root{--chart-a:#1f63b0;--chart-b:#b8860b;--chart-c:#0d8a80;--chart-grid:#e2d8c6;--chart-axis:#575f6e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--chart-a:#5b9be6;--chart-b:#d4a82a;--chart-c:#2bb3a4;--chart-grid:#2a3245;--chart-axis:#b4bccb}}
:root[data-theme="dark"]{--chart-a:#5b9be6;--chart-b:#d4a82a;--chart-c:#2bb3a4;--chart-grid:#2a3245;--chart-axis:#b4bccb}
main.learn{padding:24px 0 8px;overflow-x:hidden}
.learn section{margin:28px 0}
.eyebrow{font:600 12px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin:0 0 6px}
.lede{font-size:1.1rem;color:var(--slate);max-width:62ch}
.hero-band{border-left:4px solid var(--gold);padding:4px 0 4px 16px;margin:8px 0 20px}
.crumbs{font-size:.9rem;margin:0 0 10px}.crumbs a{text-decoration:none}
.tag{display:inline-block;font:600 11px var(--font-mono);letter-spacing:.04em;padding:.1em .55em;border-radius:6px;border:1px solid var(--line);color:var(--slate);background:var(--paper-cream);margin:0 4px 4px 0}
.tag.gold{border-color:var(--gold);color:var(--ink);background:var(--gold-soft)}
.tag.real{border-color:var(--moss-500);color:var(--moss-700)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tag.real{color:var(--moss-300)}}
.tag.syn{border-style:dashed}
.unit-grid{display:grid;gap:14px}
@media(min-width:700px){.unit-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.unit-grid.three{grid-template-columns:repeat(3,1fr)}}
.unit-card{display:flex;flex-direction:column;gap:6px;min-width:0}
.unit-card h3{margin:0}.unit-card .num{font-size:.85rem;color:var(--slate)}
.unit-card .status{margin-top:auto;font-size:.85rem;color:var(--slate)}
.unit-card.done{border-color:var(--gold)}
.callout{background:var(--paper-cream);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--radius-sm);padding:12px 14px;margin:12px 0}
.callout.note{border-left-color:var(--slate-2)}
.kv{display:grid;grid-template-columns:minmax(90px,max-content) 1fr;gap:4px 14px;font-size:.95rem}
.kv dt{color:var(--slate);font-weight:600}.kv dd{margin:0}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tablewrap table{min-width:420px}
td.n,th.n{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
details{border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px;margin:8px 0;background:var(--paper-cool)}
details>summary{cursor:pointer;font-weight:600}
details[open]>summary{margin-bottom:6px}
.check-q{margin:14px 0}.check-q p{margin:.2em 0}
ol.flow{padding-left:1.3em}ol.flow li{margin:.25em 0}
.flow-table td:first-child{white-space:nowrap;font-family:var(--font-mono);font-size:.85rem}
.age{display:grid;gap:10px}@media(min-width:760px){.age{grid-template-columns:repeat(3,1fr)}}
.age>div{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px}
.age h4{margin:0 0 4px;font:600 .9rem var(--font-mono)}
.tool{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);min-width:0}
.tool .row{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:8px 0}
.tool label{display:flex;flex-direction:column;font-size:.85rem;color:var(--slate);gap:3px}
.tool input[type=number]{width:8em;font-family:var(--font-mono)}
.result{font:600 1.05rem var(--font-mono);padding:8px 10px;background:var(--paper-cool);border:1px solid var(--line);border-radius:var(--radius-sm);overflow-wrap:anywhere}
.bigstat{font:400 2.4rem/1 var(--font-display)}
.stats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.stats>div{background:var(--paper-cool);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px}
.stats .k{font-size:.8rem;color:var(--slate)}.stats .v{font:600 1.4rem var(--font-mono)}
.hints{margin:10px 0}.hints .hint{display:none}.hints .hint.shown{display:block;margin:6px 0;padding:8px 10px;border-left:3px solid var(--gold);background:var(--paper-cream)}
.hints .hint-meta{font-size:.8rem;color:var(--slate)}
.five{display:grid;gap:8px}
.five label{display:grid;grid-template-columns:1fr 6em;gap:8px;align-items:center;font-size:.92rem}
.five input{width:100%}
.chart{width:100%;position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .tip{position:absolute;pointer-events:none;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font:12px var(--font-mono);box-shadow:var(--shadow);white-space:nowrap;display:none;z-index:2}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.85rem;color:var(--slate);margin:4px 0}
.legend i{display:inline-block;width:18px;height:3px;vertical-align:middle;margin-right:6px;border-radius:2px}
.progress-bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.progress-bar>span{display:block;height:100%;background:var(--gold)}
.toc{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.9rem;margin:10px 0 0}
.mathmap td:first-child{font-family:var(--font-mono);font-size:.82rem;white-space:nowrap}
.pager{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:32px 0 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.formula{font-family:var(--font-mono);background:var(--paper-cool);border:1px dashed var(--line);border-radius:6px;padding:8px 10px;overflow-x:auto;white-space:nowrap}
@media print{.site-head,.site-foot,.no-print{display:none!important}body{background:var(--paper-cool)}}
.tablewrap td:first-child{white-space:nowrap}