/* Theory screens (see theory.js). Uses the tokens from index.html. */
.kaw{font-family:var(--ka)}
.rd{display:block;font:italic 400 var(--t-s)/1.3 var(--ru);color:var(--muted);margin-top:1px}
.rdi{font:italic 400 var(--t-m) var(--ru);color:var(--muted)}
/* icons sit in the title row: pinned to the top-right corner of the screen, the title makes room */
.pad{position:relative}
.thtop{position:absolute;top:var(--s4);right:max(16px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:var(--s2);z-index:2}
.thtop+*{padding-right:96px}
.thq{width:100%;border:1px solid var(--line);background:var(--paper);color:var(--fg);border-radius:var(--r);padding:12px 12px;font:400 var(--t-m) var(--ru);margin-bottom:8px}
.throw{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mcard{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 12px;margin-top:8px;font-family:var(--ru)}
.mcard:hover{border-color:var(--accent)}
.mcard.off{opacity:.55;cursor:default}
.mcard .mt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mcard .mt b{font-size:var(--t-m)}
.mcard .mt .kaw{font-size:var(--t-m);color:var(--muted)}
.mcard .mt small{font-size:var(--t-s);color:var(--muted)}
.mn{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font:700 var(--t-m) var(--ru);display:flex;align-items:center;justify-content:center}
.mw{flex:none;font:700 var(--t-s) var(--ru);color:var(--bad);background:var(--bad-soft);border-radius:var(--r);padding:2px 8px}
.mok{flex:none;color:var(--ok);font-weight:700}
.mnum{font:700 var(--t-s) var(--ru);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
.thh .kaw{font-size:var(--t-m);color:var(--muted);font-weight:400;margin-left:4px}
.thp{font:400 var(--t-m)/1.55 var(--ru);margin:8px 0}
.th3{font:700 var(--t-m) var(--ru);margin:16px 0 8px}
.tw{overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);-webkit-overflow-scrolling:touch}
.tt{border-collapse:collapse;width:100%;min-width:420px;font:400 var(--t-m)/1.35 var(--ru)}
.tt th,.tt td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:8px 8px;text-align:left;vertical-align:top;font-weight:400}
.tt thead th{background:var(--bg);font-weight:700;position:sticky;top:0}
.tt tbody th{font-weight:700;background:var(--bg);position:sticky;left:0;min-width:110px}
.tt .hl{background:var(--accent-soft)}
.tt .kaw{font-size:var(--t-m)}
.steps{margin:0;padding-left:24px;font:400 var(--t-m)/1.5 var(--ru)}
.steps li{margin:3px 0}
.forms{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:4px 12px}
.frm{padding:7px 0;border-bottom:1px solid var(--line)}
.frm:last-child{border:0}
.gtr{font:italic 400 var(--t-m) var(--ru);color:var(--muted)}
.case{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;margin-top:8px}
.case summary{cursor:pointer;font:400 var(--t-m)/1.4 var(--ru)}
.case .cru{color:var(--muted)}
.cka{margin-top:8px;border-left:2px solid var(--line);padding-left:12px;font-size:var(--t-m)}
.cans{font:700 var(--t-m) var(--ru);margin:8px 0 2px}
.cwhy{font:400 var(--t-m)/1.5 var(--ru);margin:2px 0 8px}
.traps{margin:0;padding:12px 12px 12px 28px;background:var(--bad-soft);border-radius:var(--r);font:400 var(--t-m)/1.5 var(--ru)}
.traps li{margin:3px 0}
.qchips{display:flex;flex-wrap:wrap;gap:8px}
.qchip{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);padding:2px 12px;font:700 var(--t-s) var(--ru)}
.qchip.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.qchip.bad{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.term{background:none;border:0;padding:0;font:inherit;color:inherit;border-bottom:1px dotted var(--accent);cursor:pointer}
.gcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;margin-top:8px;font-family:var(--ru)}
.gcard summary{cursor:pointer;font-size:var(--t-m)}
.gdef{font:400 var(--t-m)/1.5 var(--ru);margin:8px 0}
.gru{font:400 var(--t-m)/1.5 var(--ru);margin:2px 0}
.gl{font:700 var(--t-s) var(--ru);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:12px 0 3px}
.gex{border-left:2px solid var(--line);padding-left:12px;font-size:var(--t-m)}
.shbg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:20}
.shpanel{position:fixed;left:0;right:0;bottom:0;z-index:21;max-width:640px;margin:0 auto;max-height:80vh;overflow-y:auto;background:var(--paper);color:var(--fg);border-radius:var(--r) 16px 0 0;padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px));font-family:var(--ru)}
.shgrip{width:36px;height:4px;border-radius:var(--r-s);background:var(--line);margin:0 auto 12px}
.shhead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.shtitle{font-size:var(--t-l)}
.shx{border:0;background:none;font-size:var(--t-xl);color:var(--muted);padding:2px 8px}
.shpanel .prow{display:flex;gap:8px;margin-top:16px}
.shpanel .prow .mini{flex:1}
.rdrow{display:flex;gap:8px;align-items:center;margin:8px 0 2px}
.hintbox{margin-top:8px;border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:var(--r);padding:8px 12px;font:400 var(--t-m)/1.5 var(--ru);background:var(--paper)}
.hchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chipm,.chipt{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);padding:2px 12px;font:700 var(--t-s) var(--ru);color:var(--fg)}
.chipm{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.why{margin-top:12px;border:1px solid var(--accent);border-radius:var(--r);padding:12px 12px;font-family:var(--ru)}
.why p{font:400 var(--t-m)/1.5 var(--ru);margin:4px 0}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px}
.cn{border:1px solid var(--line);background:var(--bg);border-radius:var(--r);padding:1px 8px;font:400 var(--t-s) var(--ru)}
.ca{color:var(--muted)}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin:8px 0}
.lgrid div{border:1px solid var(--line);border-radius:var(--r-s);padding:4px;text-align:center;display:flex;justify-content:space-around;align-items:baseline}
.lgrid .kaw{font-size:var(--t-l)}
.toptraps{margin:0;padding-left:24px;font:400 var(--t-m)/1.5 var(--ru)}
.toptraps li{margin:8px 0}
.toptraps .chipm{margin-left:4px;white-space:nowrap}
.qrow .cnt{margin-left:auto}