/* 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:#9a6b00;--chart-c:#0d7a70;--chart-grid:#DCE5EB;--chart-axis:#526778}
:root[data-theme="dark"]{--chart-a:#7db3ff;--chart-b:#e0b04a;--chart-c:#5CCBBC;--chart-grid:#2A3D4E;--chart-axis:#A9BBC8}
main.learn{padding:24px var(--gutter) 8px}
.learn section{margin:28px 0}
.eyebrow{font:600 13px var(--font-body);letter-spacing:.06em;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 12px 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(--primary);color:var(--primary);background:var(--primary-tint)}
.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)}
.learn .tool{display:block;align-items:initial;justify-content:initial;min-width:0;min-height:0;font:inherit;color:inherit;cursor:auto;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:var(--radius);padding:18px 20px;margin:14px 0;box-shadow:var(--shadow);text-align:left}
.learn .tool:hover{background:var(--card);color:inherit}
.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;min-height:44px;font-family:var(--font-mono)}
.tool select{min-height:44px}
.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}

/* ===== textbook layer ===== */
.learn{font-size:1rem;line-height:1.7}
.learn section{margin:56px 0}
.learn section:first-of-type{margin-top:36px}
.learn h2{margin:0 0 .5em}
.learn h3{margin:1.4em 0 .4em}
.learn .card h3,.learn .unit-card h3{margin-top:0}
.learn .hero-band{margin:12px 0 24px;border-left-color:var(--primary)}
.learn .lede{max-width:62ch;color:var(--ink)}
.learn .lede.l-zh{max-width:34em}
/* readable measure: running text only; cards, tables, tools keep their container width */
.learn section>p,.learn section>ul,.learn section>ol,.learn section>div.l-en,.learn section>div.l-zh,.learn section>.check-q,.learn section>.callout{max-width:72ch}
:lang(zh-CN) .learn section>p,:lang(zh-CN) .learn section>ul,:lang(zh-CN) .learn section>ol,:lang(zh-CN) .learn section>div.l-zh,:lang(zh-CN) .learn section>.check-q,:lang(zh-CN) .learn section>.callout{max-width:38em}
.learn p,.learn li{overflow-wrap:anywhere}
.learn li{margin:.25em 0}
.crumbs{color:var(--muted)}
.toc{padding:8px 0;border-bottom:1px solid var(--line);gap:2px 16px}
.toc a{display:inline-flex;align-items:center;min-height:36px;font-size:.9375rem}
.toc a[href]{color:var(--muted);text-decoration:none}.toc a[href]:hover{color:var(--primary);text-decoration:underline}
/* kind of block: activity vs check vs reading */
#activity .tool,.learn .tool{background:var(--primary-tint)}
:root[data-theme="dark"] .learn .tool{background:var(--primary-tint)}
.learn .tool .btn:not(.btn-primary){background:var(--surface)}
#check{background:var(--warn-tint);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);padding:8px 22px 18px}
#check h2{margin-top:16px}
.check-q{margin:18px 0;padding:0 0 14px;border-bottom:1px solid var(--line)}
.check-q:last-child{border-bottom:0}
details.answer{background:var(--surface);border-color:var(--control)}
details.answer>summary{color:var(--primary);min-height:32px}
.learn details{border-radius:var(--radius-sm)}
.learn details>summary{padding:4px 0;min-height:32px}
.callout{background:var(--surface)}
.callout.note{border-left-color:var(--primary)}
.learn table{font-size:.9375rem}
.tablewrap{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);margin:12px 0}
.tablewrap table{margin:0}.tablewrap tr:last-child td{border-bottom:0}
.tablewrap td:first-child{white-space:normal}
.flow-table td:first-child,.mathmap td:first-child{white-space:nowrap}
.formula{max-width:100%;overflow-x:auto}
.learn pre{max-width:100%;overflow-x:auto}
.learn img,.learn svg{max-width:100%}
.learn .grid.c3,.learn .grid.c2{margin:12px 0}
.learn label{font-size:.9375rem}
.stats .k{font-size:.8125rem}
.hints .hint-meta,.legend,.result{font-size:.875rem}
.chart .tip{font-size:12px}
/* mascot line, used where a question is asked */
.guide{display:flex;gap:14px;align-items:center;margin:22px 0;padding:0}
.guide img{flex:0 0 auto;width:56px;height:56px}
.guide .line{font-size:.9375rem;color:var(--ink);max-width:60ch;margin:0}
/* challenge bridge */
.bridge{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:36px 0 0}
.bridge p{margin:0;max-width:56ch}
.bridge .acts{display:flex;flex-wrap:wrap;gap:10px}
.pager{margin:20px 0 0}
.pager .btn{max-width:100%;text-align:center}
@media(max-width:520px){.pager{flex-direction:column}.pager .btn,.bridge .btn{width:100%}}
/* path */
ol.path{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px;counter-reset:u}
ol.path>li{margin:0;display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
ol.path>li.done{border-color:var(--primary)}
ol.path .n0{width:44px;height:44px;border-radius:50%;background:var(--primary-tint);color:var(--primary);display:flex;align-items:center;justify-content:center;font:600 1.125rem var(--font-body)}
ol.path h3{margin:0 0 4px}
ol.path .meta{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 8px}
ol.path .do{margin:0 0 10px;max-width:68ch}
ol.path .acts{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
ol.path .acts a{display:inline-flex;align-items:center;min-height:44px}
ol.path details{margin:4px 0 0}
.bonus-grid{display:grid;gap:14px}@media(min-width:760px){.bonus-grid{grid-template-columns:repeat(3,1fr)}}
.bonus-grid .card{display:flex;flex-direction:column;gap:6px}.bonus-grid h3{margin:0}
.learn section>ol.path,.learn section>ol.loop{max-width:none}
@media(min-width:900px){ol.path{grid-template-columns:1fr 1fr;align-items:start}}
#kg-list{max-width:none!important}
@media(max-width:480px){.kv{grid-template-columns:1fr;gap:0}.kv dd{margin:0 0 8px}ol.path>li{grid-template-columns:36px minmax(0,1fr);gap:0 12px;padding:16px}ol.path .n0{width:36px;height:36px;font-size:1rem}.learn .tool{padding:16px}}