/* ============================================================ Study Hub — shared design system Extends the identity established in index.html: Fraunces (display) + Sora (UI) + JetBrains Mono (data) on a blue-biased near-black. Accent encodes which exam you are in; semantic colours are kept separate from accent. ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ /* ============================================================ StudyHub design system — warm paper, four section hues. From the "IELTS Website Redesign" spec, 2026-09-15. Token NAMES are unchanged from the dark theme on purpose: 44 pages reference them, so the theme moves by repointing values, not by a rename that would need every page edited and would miss some. ============================================================ */ /* ground + surfaces — warm paper, never pure grey */ --bg:#F7F2E8; /* Paper. Low glare, made for long sessions. */ --bg-2:#FCFAF4; --surface:#FFFFFF; /* Card. The default container for everything. */ --surface-2:#F4EDDD; --surface-3:#EFE7D6; --border:#E6DCC8; /* Line. All borders and dividers. */ --border-soft:#EFE7D6; --border-strong:#CFC5B2; /* text */ --text:oklch(0.24 0.03 55); /* Ink */ --muted:#6B6254; /* 5.1:1 on paper — AA at 14px */ /* Measured on the rendered page, not guessed: #90877A gave 3.17:1 on paper and 3.54 on a white card - both under WCAG 4.5 for the small meta text that uses it. #726B5E clears 4.5 on every light ground the site paints. */ --faint:#726B5E; /* Section hues — load-bearing, never decorative. A page wears exactly one. Each has THREE values: a fill for bars/rules/buttons, a darker `text` step for any type under 22px, and a tint for surfaces. Never the fill as small text — white on a fill is 3.6-4.4:1, which is short of AA at button size. Speaking is rose, not green, so it can never be misread as "correct". */ --sec-listening:oklch(0.60 0.13 200); --on-listening:oklch(0.42 0.11 200); --tint-listening:oklch(0.96 0.03 200); --sec-reading:oklch(0.60 0.15 40); --on-reading:oklch(0.44 0.13 40); --tint-reading:oklch(0.96 0.035 40); --sec-writing:oklch(0.55 0.15 300); --on-writing:oklch(0.42 0.13 300); --tint-writing:oklch(0.96 0.03 300); --sec-speaking:oklch(0.55 0.15 350); --on-speaking:oklch(0.42 0.13 350); --tint-speaking:oklch(0.96 0.03 350); /* exam accents, kept for the GRE side of the site */ --ielts:oklch(0.60 0.15 40); --ielts-lift:oklch(0.44 0.13 40); --gre:oklch(0.60 0.13 200); --gre-lift:oklch(0.42 0.11 200); --ielts2:oklch(0.52 0.17 25); /* semantic — green is a mark you earned, coral one you lost, gold is score only */ /* Earned and Lost always carry a glyph as well as colour: the ✓ / ✗ / ! is the signal, the hue only reinforces it. Lost is redder and darker than Reading. */ --ok:oklch(0.55 0.13 155); --warn:oklch(0.70 0.13 85); --bad:oklch(0.52 0.17 25); --gold:oklch(0.78 0.13 85); /* bands, exam date, mock CTA. Nothing else. */ --teal:oklch(0.56 0.13 150); --ok-bg:oklch(0.96 0.03 155); --warn-bg:oklch(0.97 0.04 85); --bad-bg:oklch(0.96 0.03 25); /* the live accent, re-pointed per page via [data-exam] / [data-section] */ --ac:var(--ielts); --ac-lift:var(--ielts-lift); --ac2:var(--ielts-lift); --ac-bg:var(--tint-reading); --serif:'Bricolage Grotesque','Fraunces',Georgia,serif; /* display + numbers, 700/800 */ --sans:'Instrument Sans','Sora',system-ui,-apple-system,sans-serif; --mono:'IBM Plex Mono','JetBrains Mono',ui-monospace,Menlo,monospace; /* diagram tokens — used by inline SVGs on techniques.html / maps.html. They live in :root so a page that draws a diagram cannot forget them: an undefined var() in an SVG `fill` silently computes to BLACK, which once turned every diagram on this site into unreadable boxes. On paper these are now TINTS, and the text on them is ink, not white. */ --mark:oklch(0.60 0.15 40); --mark-soft:oklch(0.96 0.035 40); --soft:var(--surface-2); --line:var(--border); /* stage fills for multi-step diagrams — light, so INK sits on them */ --st1:oklch(0.94 0.04 200); --st2:oklch(0.94 0.045 40); --st3:oklch(0.95 0.05 85); --st4:oklch(0.94 0.04 155); --st5:oklch(0.94 0.04 300); --st6:oklch(0.94 0.045 40); --test:oklch(0.24 0.03 55); --arr:oklch(0.60 0.15 40); /* ink for text sitting ON a --mark fill */ --on-mark:#FFFFFF; --shadow:0 8px 22px -14px rgba(60,40,20,.5); /* the only shadow in the system */ --rail:248px; --measure:54ch; /* body copy never exceeds 54 characters per line */ --max:1180px; --r:20px; /* Card */ --r-sm:14px; /* rows inside cards */ --r-chip:10px; --r-pill:999px; } /* A page wears one section hue. Set data-section on . */ [data-section="listening"]{ --ac:var(--sec-listening); --ac-lift:var(--on-listening); --ac-bg:var(--tint-listening); } [data-section="reading"] { --ac:var(--sec-reading); --ac-lift:var(--on-reading) ; --ac-bg:var(--tint-reading); } [data-section="writing"] { --ac:var(--sec-writing); --ac-lift:var(--on-writing) ; --ac-bg:var(--tint-writing); } [data-section="speaking"] { --ac:var(--sec-speaking); --ac-lift:var(--on-speaking); --ac-bg:var(--tint-speaking); } [data-exam="gre"]{ --ac:var(--gre); --ac-lift:var(--gre-lift); --ac-bg:rgba(47,129,247,.12); } html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } body{ background:var(--bg); color:var(--text); font-family:var(--sans); font-size:16px; /* the spec's floor: body copy never drops below 16px */ line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* ---------- typography ---------- */ h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;text-wrap:balance} h1{font-size:clamp(30px,4.4vw,46px);letter-spacing:-.02em} h2{font-size:clamp(23px,2.7vw,31px);letter-spacing:-.015em} h3{font-size:19px;letter-spacing:-.01em} h4{font-size:16px;font-family:var(--sans);font-weight:600} p{margin:0} em{font-style:italic;color:var(--ac-lift)} a{color:var(--ac-lift);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18)} a:hover{border-bottom-color:currentColor} /* Bold text was painted #fff for the dark theme. On paper that is white on cream — every on the site was invisible unless some other rule happened to set a colour. Inherit instead, so bold follows whatever surface it sits on. */ strong,b{font-weight:600;color:inherit} code,kbd{font-family:var(--mono);font-size:.88em;background:var(--surface-2); border:1px solid var(--border-soft);border-radius:5px;padding:1px 5px} .eyebrow{ font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--ac);display:block;margin-bottom:10px; } .lede{font-size:17px;color:var(--muted);max-width:var(--measure)} .measure{max-width:var(--measure)} .num{font-family:var(--mono);font-variant-numeric:tabular-nums} :focus-visible{outline:2px solid var(--ac-lift);outline-offset:2px;border-radius:3px} /* ---------- app shell: persistent rail + content ---------- */ /* ---------- page header ---------- */ /* Header card, measured off the reference build. The top strip is INK by default: the design system says nav, Today and Lectures are ink and paper, and the section hue appears only on that section's own pages — so it is keyed to data-section. */ .phead{background:var(--surface);border:1px solid var(--border); border-top:6px solid var(--text);border-radius:20px; padding:clamp(18px,3vw,32px);margin-bottom:18px} [data-section] .phead, body[data-section] .phead{border-top-color:var(--ac)} .phead h1{font-family:var(--serif);font-weight:800;letter-spacing:-.04em;line-height:1; font-size:clamp(30px,5vw,54px);margin:10px 0 14px} .phead .lede{font-size:17px;line-height:1.55;color:var(--muted);max-width:54ch;margin:0} .phead .eyebrow{font-size:11px;letter-spacing:.14em;color:var(--muted)} /* the stat strip under a header card */ .phead .meta-row{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px;padding-top:18px; border-top:1px dashed var(--border)} .phead .meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .chip{ display:inline-flex;align-items:center;gap:6px; font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-chip); padding:5px 10px;color:var(--muted); } .chip.ac{background:var(--ac-bg);border-color:transparent;color:var(--ac-lift)} .chip.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok)} .chip.warn{background:var(--warn-bg);border-color:transparent;color:var(--warn)} .chip.bad{background:var(--bad-bg);border-color:transparent;color:var(--bad)} /* ---------- READ blocks (constrained measure) ---------- */ .read{max-width:var(--measure);margin-bottom:40px} .read > * + *{margin-top:16px} .read h2{margin-top:8px} .read ul,.read ol{padding-left:20px;display:flex;flex-direction:column;gap:7px;color:var(--muted)} .read li strong{color:var(--text)} section.block{margin-bottom:52px;scroll-margin-top:24px} /* ---------- DO panels (full width, own surface) ---------- */ .panel{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r); overflow:hidden; } .panel-h{ display:flex;align-items:center;gap:11px;padding:15px 20px; border-bottom:1px solid var(--border-soft);background:var(--surface-2); } .panel-h .ttl{font-weight:600;font-size:14.5px} .panel-h .sub{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:1px} .panel-h .right{margin-left:auto;display:flex;align-items:center;gap:8px} .panel-b{padding:20px} .panel-b.tight{padding:14px} /* ---------- facts table ---------- */ .tbl-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);margin-bottom:26px} table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:460px} th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border-soft);vertical-align:top} th{background:var(--surface-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);font-weight:500;white-space:nowrap} tbody tr:last-child td{border-bottom:none} tbody tr:hover{background:rgba(255,255,255,.02)} td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap} /* ---------- stat tiles ---------- */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:26px} .tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 17px} .tile .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)} .tile .v{font-family:var(--serif);font-size:27px;font-weight:600;margin:5px 0 2px; font-variant-numeric:tabular-nums;line-height:1.1} .tile .d{font-size:12px;color:var(--muted);line-height:1.45} .tile.accent .v{color:var(--ac-lift)} .tile.ok .v{color:var(--ok)} .tile.warn .v{color:var(--warn)} .tile.bad .v{color:var(--bad)} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--sans);font-size:15px;font-weight:600; min-height:44px; /* the spec's touch target */ background:var(--surface);color:var(--text); border:1px solid var(--border);border-radius:12px; padding:10px 18px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s; } .btn:hover{background:var(--surface-2);border-color:var(--border-strong)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.45;cursor:not-allowed} /* Filled buttons use the DARKER step. White on the base hue is 3.6-4.4:1 — fine for a large heading, short of AA for 15px button text. On --ac-lift it is 5.3-8.0:1. */ .btn.primary{background:var(--ac-lift);border-color:transparent;color:var(--on-ac);box-shadow:var(--shadow)} .btn.primary:hover{background:var(--ac);box-shadow:none} .btn.gold{background:var(--gold);border-color:transparent;color:var(--text)} /* ink on gold: 8.2:1 */ .btn.ok{background:var(--ok);border-color:transparent;color:#fff} .btn.bad{background:var(--bad);border-color:transparent;color:#fff} .btn.ghost{background:transparent;box-shadow:none} .btn.sm{font-size:13.5px;padding:7px 13px;min-height:36px;border-radius:10px} .btn-row{display:flex;flex-wrap:wrap;gap:8px} /* ---------- forms ---------- */ input[type=text],input[type=number],input[type=date],select,textarea{ background:var(--surface);border:1px solid var(--border);border-radius:12px; color:var(--text);font-family:var(--sans);font-size:16px;padding:11px 14px;width:100%; min-height:44px; } textarea{resize:vertical;min-height:120px;line-height:1.6} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac)} label.fl{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--faint);margin-bottom:6px} /* ---------- progress ---------- */ .bar{height:6px;background:var(--surface-2);border-radius:100px;overflow:hidden} .bar > i{display:block;height:100%;background:var(--ac);border-radius:100px; transition:width .35s ease;width:0} .bar.ok > i{background:var(--ok)} /* ---------- callouts ---------- */ .note{ border-left:3px solid var(--ac);background:var(--ac-bg); border:1px solid var(--border);border-left:3px solid var(--ac); border-radius:var(--r-sm);padding:15px 18px;font-size:15px; color:var(--text);margin-bottom:22px;max-width:var(--measure); } .note.warn{border-left-color:var(--warn);background:var(--warn-bg)} .note.bad{border-left-color:var(--bad);background:var(--bad-bg)} .note.ok{border-left-color:var(--ok);background:var(--ok-bg)} .note .hd{font-weight:600;display:block;margin-bottom:3px} /* Scrollable table wrapper. Was copy-pasted locally into maps.html and sprint.html, so a page that used class="tw" without its own copy got an unstyled, overflowing table (official.html did). Global now. */ .tw{overflow-x:auto;margin:0 0 20px;border:1px solid var(--border-soft);border-radius:6px} .tw table{border-collapse:collapse;width:100%;font-size:13.5px;line-height:1.45; font-variant-numeric:tabular-nums} .tw th{text-align:left;font-family:var(--mono);font-weight:500;font-size:10.5px; letter-spacing:.06em;text-transform:uppercase;color:var(--faint);background:var(--surface-2); padding:9px 12px;border-bottom:1px solid var(--border-soft);white-space:nowrap} .tw td{padding:9px 12px;border-bottom:1px solid var(--border-soft);vertical-align:top; min-width:110px} .tw tr:last-child td{border-bottom:none} /* ---- Task 1 charts (```chart blocks -> inline SVG, assets/chart.js) ---- Thin marks, hairline recessive grid, generous padding. Text wears text tokens; only the marks carry series colour. */ .ch{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm); padding:16px 18px 12px;margin:0 0 18px} .ch svg{display:block;width:100%;height:auto;overflow:visible} .ch-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px; display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .ch-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase; color:var(--faint);font-weight:400} .ch-legend{display:flex;gap:14px;flex-wrap:wrap;margin:2px 0 10px} .ch-key{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)} .ch-key i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:0 0 10px} .ch .ch-tick{font-family:var(--mono);font-size:10.5px;fill:var(--faint); font-variant-numeric:tabular-nums} .ch .ch-dlabel{font-size:11.5px;fill:var(--muted)} .ch .ch-plabel{font-size:12px;fill:var(--muted)} .ch-data{margin-top:10px} .ch-data>summary{cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--faint);list-style:none;padding:4px 0} .ch-data>summary::-webkit-details-marker{display:none} .ch-data>summary::before{content:'\25B8 ';color:var(--ac)} .ch-data[open]>summary::before{content:'\25BE '} .ch-data>summary:hover{color:var(--muted)} .ch-pair{display:grid;gap:14px} @media(min-width:900px){.ch-pair{grid-template-columns:1fr 1fr}.ch-pair .ch{margin-bottom:0}} .ch-err{background:var(--bad-bg);border:1px solid var(--bad);color:var(--bad); border-radius:var(--r-sm);padding:10px 13px;font-size:12.5px;white-space:pre-wrap} /* ---------- footer ---------- */ .foot{margin-top:auto;padding:34px 0;border-top:1px solid var(--border-soft); color:var(--faint);font-size:12px} .foot .wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .foot a{color:var(--muted);border:none} /* ---------- chat widget (shared across every page) ---------- */ .chat-fab{position:fixed;bottom:24px;right:24px;z-index:60;width:56px;height:56px; border-radius:50%;background:var(--ac);color:#fff;border:none;cursor:pointer; box-shadow:0 12px 34px rgba(0,0,0,.5);font-size:22px;display:flex; align-items:center;justify-content:center;transition:transform .2s,background .2s} .chat-fab:hover{transform:scale(1.07);background:var(--ac-lift)} .chat-panel{position:fixed;bottom:92px;right:24px;z-index:60;width:396px; max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 130px); background:var(--surface);border:1px solid var(--border);border-radius:18px; display:none;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6)} .chat-panel.open{display:flex} .chat-hd{padding:14px 18px;border-bottom:1px solid var(--border-soft); display:flex;align-items:center;gap:10px;background:var(--surface-2)} .chat-hd .d{width:8px;height:8px;border-radius:50%;background:var(--ok); box-shadow:0 0 0 3px rgba(55,211,181,.22);flex:0 0 8px} .chat-hd .t{font-weight:600;font-size:13.5px} .chat-hd .s{font-family:var(--mono);font-size:9.5px;color:var(--faint);margin-top:1px} .chat-hd .x{margin-left:auto;background:none;border:none;color:var(--muted); font-size:21px;cursor:pointer;line-height:1;padding:0 3px} .chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px} .msg{padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.6; max-width:88%;white-space:pre-wrap;word-wrap:break-word} .msg.u{background:var(--ac);color:#fff;align-self:flex-end;border-bottom-right-radius:4px} .msg.a{background:var(--surface-2);align-self:flex-start;border-bottom-left-radius:4px} .msg.sys{background:var(--warn-bg);color:var(--warn);align-self:stretch; max-width:100%;font-size:12.5px} .typing{font-family:var(--mono);font-size:11px;color:var(--faint);padding:3px 4px} .chat-sugg{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px} .chat-sugg button{font-family:var(--sans);font-size:11.5px;background:var(--surface-2); border:1px solid var(--border);color:var(--muted);border-radius:100px; padding:5px 11px;cursor:pointer} .chat-sugg button:hover{border-color:var(--ac);color:var(--ac-lift)} .chat-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border-soft)} .chat-in input{flex:1} .chat-in button{background:var(--ac);border:none;border-radius:var(--r-sm);color:#fff; padding:0 15px;cursor:pointer;font-size:15px} .chat-in button:disabled{opacity:.5} @media (max-width:520px){ .chat-panel{right:12px;left:12px;width:auto;bottom:84px} .chat-fab{bottom:16px;right:16px} } /* ---------- notes: pencil on the right, per-section, light editor ---------- */ .note-fab{position:fixed;bottom:24px;right:96px;z-index:70;width:56px;height:56px;border-radius:50%; border:2px solid var(--warn);background:var(--warn);color:#241a00;font-size:24px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(0,0,0,.35);transition:transform .15s} .note-fab:hover{transform:translateY(-2px) scale(1.05)} .note-fab .badge{position:absolute;top:-5px;right:-5px;min-width:21px;height:21px;border-radius:100px;background:#241a00; color:var(--warn);font-family:var(--mono);font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px} .note-panel{position:fixed;bottom:92px;right:24px;z-index:71;width:452px;max-width:calc(100vw - 40px);max-height:min(80vh,760px); background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.5); display:none;flex-direction:column;overflow:hidden} .note-panel.open{display:flex} .note-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg-2)} .note-hd .t{font-weight:600;font-size:14px} .note-hd .s{font-family:var(--mono);font-size:10px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .note-hd button{margin-left:auto;background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1} .note-body{padding:12px 16px;overflow-y:auto;flex:1} .note-tb{display:flex;gap:2px;flex-wrap:wrap;align-items:center;padding:5px;background:var(--bg-2);border:1px solid var(--border);border-bottom:none;border-radius:10px 10px 0 0} .note-tb button{min-width:29px;height:27px;padding:0 6px;border:1px solid transparent;border-radius:6px;background:none;color:var(--muted); font-family:var(--sans);font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center} .note-tb button:hover{background:var(--surface);border-color:var(--border);color:var(--text)} .note-tb .sep{width:1px;height:17px;background:var(--border);margin:0 4px} .note-ed{min-height:132px;max-height:300px;overflow-y:auto;background:var(--bg-2);border:1px solid var(--border);border-radius:0 0 10px 10px; padding:11px 13px;color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.7;outline:none} .note-ed:focus{border-color:var(--warn)} .note-ed:empty::before{content:attr(data-ph);color:var(--faint);pointer-events:none} .note-ed h3{font-family:var(--serif);font-size:17px;margin:8px 0 4px} .note-ed ul,.note-ed ol{margin:6px 0;padding-left:22px} .note-ed li{margin:2px 0} .note-ed blockquote{border-left:2px solid var(--warn);margin:6px 0;padding:2px 0 2px 11px;color:var(--muted)} .note-ed pre{background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:8px 10px;font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;margin:6px 0} .note-row{display:flex;align-items:center;gap:8px;margin-top:9px;font-family:var(--mono);font-size:10.5px;color:var(--faint)} .note-row .sp{margin-left:auto} .note-scope{font-size:11.5px;color:var(--muted);margin-top:10px;padding:7px 10px;background:var(--bg-2);border-radius:8px;line-height:1.6} .note-scope:empty{display:none} .note-scope b{color:var(--warn)} .note-item{border:1px solid var(--border-soft);border-radius:10px;padding:10px 12px;margin-top:9px;background:var(--bg-2)} .note-item .meta{display:flex;gap:7px;align-items:center;font-family:var(--mono);font-size:10px;color:var(--faint);margin-bottom:5px;flex-wrap:wrap} .note-item .meta .tag{background:var(--warn-bg);color:var(--warn);border-radius:100px;padding:1px 8px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .note-item .meta button{background:none;border:none;color:var(--faint);cursor:pointer;font-size:11px;padding:0 2px} .note-item .meta button:hover{color:var(--warn)} .note-item .meta .sp{margin-left:auto} .note-item .body{font-size:13.5px;line-height:1.65;word-break:break-word} .note-item .body h3{font-family:var(--serif);font-size:16px;margin:6px 0 3px} .note-item .body ul,.note-item .body ol{margin:5px 0;padding-left:20px} .note-item .body blockquote{border-left:2px solid var(--warn);margin:5px 0;padding-left:10px;color:var(--muted)} .note-item .body pre{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:7px 9px;font-family:var(--mono);font-size:12px;white-space:pre-wrap} .note-item .body mark{background:var(--warn);color:#241a00;border-radius:2px;padding:0 2px} .note-empty{color:var(--muted);font-size:13px;padding:8px 0} /* the pencil beside every heading */ .sec-note{border:none;background:none;color:var(--faint);font-size:13px;cursor:pointer;padding:2px 5px;border-radius:6px; vertical-align:middle;opacity:.35;transition:opacity .15s,color .15s;font-family:var(--mono)} h2:hover .sec-note,h3:hover .sec-note,.sec-note:hover{opacity:1;color:var(--warn)} .sec-note.has{opacity:1;color:var(--warn);background:var(--warn-bg)} @media(max-width:600px){.note-panel{right:12px;left:12px;width:auto;bottom:86px;max-height:78vh} .note-fab{bottom:16px;right:84px;width:50px;height:50px;font-size:21px} .sec-note{opacity:.8}} /* ---- bank items on a unit page (unit.html block 4) ---------------------- */ .bankbox{margin-top:16px;padding-top:15px;border-top:1px solid var(--border)} .bk-hd{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase; color:var(--faint);margin-bottom:11px} .bk{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm); padding:11px 14px;margin-bottom:7px} .bk-h{font-size:13.5px;color:var(--muted);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap} .bk-h b{color:var(--text);font-weight:500} .bk-ar{color:var(--ac);font-size:11px} .bk-t{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em; text-transform:uppercase;color:var(--faint)} .bk-o{display:inline-block;font-size:13px;color:var(--text);padding:1px 7px;margin-right:4px; border:1px solid var(--border-strong);border-radius:100px} .bk-o.over{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)} .bk-s{font-size:13px;line-height:1.6;margin-top:6px;padding-left:10px; border-left:2px solid var(--border-strong)} .bk-w{font-size:12.5px;color:var(--muted);margin-top:5px} .bk-more>summary{cursor:pointer;font-size:12.5px;color:var(--ac-lift);padding:6px 0; list-style:none} .bk-more>summary::-webkit-details-marker{display:none} .bk-more>summary::before{content:'\25B8';margin-right:6px;font-size:9px} .bk-more[open]>summary::before{content:'\25BE'} /* ---- "New today" cards (review.html, WP4 feed) -------------------------- */ .bk.nt{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;cursor:pointer} .bk.nt input{margin-top:4px;accent-color:var(--ac);width:15px;height:15px;flex:none} .bk.nt.done{opacity:.45} .bk.nt.done .bk-h b{text-decoration:line-through;text-decoration-color:var(--faint)} /* ---- upload-to-mark panel (assets/mark.js, WP5) ------------------------- */ .mk{display:flex;flex-direction:column;gap:11px} .mk-kinds{display:flex;gap:7px;flex-wrap:wrap} .mk-kinds button{background:var(--bg-2);border:1px solid var(--border);color:var(--muted); border-radius:100px;padding:6px 14px;font-size:12.5px;cursor:pointer} .mk-kinds button.on{border-color:var(--ac);background:var(--ac-bg);color:var(--ac-lift)} .mk-hint{font-size:12.5px;color:var(--muted);margin:0} .mk-sheet{display:flex;gap:11px;flex-wrap:wrap} .mk-sheet label{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center} .mk-sheet select,.mk-sheet input{background:var(--surface);border:1px solid var(--border); color:var(--text);border-radius:7px;padding:5px 9px;font-size:13px} .mk textarea{background:var(--surface);border:1px solid var(--border);color:var(--text); border-radius:9px;padding:10px 13px;font-size:14px;line-height:1.6;font-family:inherit; resize:vertical;width:100%;box-sizing:border-box} .mk textarea:focus,.mk-sheet input:focus{outline:none;border-color:var(--ac)} .mk-files{display:flex;gap:11px;align-items:center;flex-wrap:wrap} .mk-list{font-family:var(--mono);font-size:11px;color:var(--faint)} .mk-status{font-size:12.5px;color:var(--muted)} .mk-hero{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;margin:18px 0 6px} .mk-big{font-family:var(--serif);font-size:44px;line-height:1;color:var(--text)} .mk-big span{font-size:20px;color:var(--faint)} .mk-bandbig{font-family:var(--mono);font-size:15px;letter-spacing:.06em;text-transform:uppercase; color:var(--ac-lift);border:1px solid var(--ac);border-radius:100px;padding:5px 14px} .mk-wc{font-family:var(--mono);font-size:11.5px;color:var(--faint)} .mk-warn{color:var(--warn)} .mk-note{font-size:12.5px;color:var(--muted);line-height:1.6;margin:6px 0} .mk-h{font-family:var(--serif);font-size:17px;margin:22px 0 9px} .mk-crit{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm); padding:12px 15px;margin-bottom:8px} .mk-ch{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .mk-band{font-family:var(--mono);font-size:13px;color:var(--ac-lift)} .mk-q{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:5px} .mk-ev{margin:7px 0 0;padding-left:17px;font-size:13px;line-height:1.6} .mk-ev li{margin-bottom:3px} .mk-up{font-size:12.5px;margin-top:7px;padding-left:10px;border-left:2px solid var(--ac)} .mk-fix{display:grid;grid-template-columns:auto 1fr;gap:12px;background:var(--bg-2); border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 15px;margin-bottom:8px} .mk-fix>div:only-child{grid-column:1/-1} .mk-n{font-family:var(--mono);font-size:12px;color:var(--ac-lift)} .mk-was{font-size:13px;color:var(--muted);text-decoration:line-through; text-decoration-color:var(--faint);line-height:1.6} .mk-now{font-size:13.5px;line-height:1.6;margin-top:6px;padding-left:10px; border-left:2px solid var(--teal)} .mk-rule{font-size:12.5px;color:var(--muted);margin-top:6px} .mk-tr>summary{cursor:pointer;font-size:12.5px;color:var(--ac-lift);padding:7px 0;list-style:none} .mk-tr>summary::-webkit-details-marker{display:none} .mk-tr>summary::before{content:'\25B8';margin-right:6px;font-size:9px} .mk-tr[open]>summary::before{content:'\25BE'} .mk-trb{white-space:pre-wrap;font-size:13px;line-height:1.7;background:var(--surface); border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 15px} .onpaper{margin-top:16px;border-top:1px solid var(--border);padding-top:12px} .onpaper>summary{cursor:pointer;font-size:13px;color:var(--ac-lift);list-style:none;padding:4px 0} .onpaper>summary::-webkit-details-marker{display:none} .onpaper>summary::before{content:'\25B8';margin-right:6px;font-size:9px} .onpaper[open]>summary::before{content:'\25BE'} /* ---- paraphrase harvest (review.html, WP4.5) ---------------------------- */ .bk.hv .hv-ans{font-size:12.5px;color:var(--muted)} .bk.hv .hv-ans i{color:var(--text);font-style:normal} .hv-in{display:grid;gap:9px;margin-top:9px} @media(min-width:720px){.hv-in{grid-template-columns:1fr 1fr}} .hv-in label{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:9.5px; letter-spacing:.08em;text-transform:uppercase;color:var(--faint)} .hv-in input{background:var(--surface);border:1px solid var(--border);color:var(--text); border-radius:7px;padding:7px 11px;font-size:13.5px;font-family:var(--sans)} .hv-in input:focus{outline:none;border-color:var(--ac)} /* ---- book-unit companions (WP6) ---------------------------------------- */ .bu-ex{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm); padding:13px 16px;margin-bottom:9px} .bu-eh{display:flex;gap:11px;align-items:baseline;flex-wrap:wrap} .bu-ref{font-family:var(--mono);font-size:12px;color:var(--ac-lift);flex:none} .bu-what{font-size:13.5px;line-height:1.6;flex:1;min-width:220px} .bu-pg{font-family:var(--mono);font-size:11px;color:var(--muted);text-decoration:none; white-space:nowrap} .bu-pg:hover{color:var(--ac-lift)} .bu-ans{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px} .bu-ans label{display:flex;align-items:center;gap:6px} .bu-ans label span{font-family:var(--mono);font-size:10.5px;color:var(--faint);min-width:16px; text-align:right} .bu-ans input{background:var(--surface);border:1px solid var(--border);color:var(--text); border-radius:6px;padding:5px 9px;font-size:13px;width:116px} .bu-ans input:focus{outline:none;border-color:var(--ac)} .bu-ans input.ok{border-color:var(--teal);background:var(--ok-bg,rgba(25,158,112,.10))} .bu-ans input.bad{border-color:var(--bad);background:rgba(217,89,38,.10)} .bu-res{font-size:12.5px;color:var(--muted);align-self:center} .bu-res i{color:var(--text);font-style:normal} .bu-mem{display:grid;gap:8px} .bu-list{margin-top:15px;padding-top:13px;border-top:1px solid var(--border)} .bu-row{display:block;background:var(--bg-2);border:1px solid var(--border); border-radius:var(--r-sm);padding:11px 14px;margin-bottom:7px;text-decoration:none} .bu-row:hover{border-color:var(--ac)} .bu-t{display:block;font-size:13.5px;color:var(--text);font-weight:500} .bu-m{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:4px} /* ---- the shell: header, six tabs, pill row, Everything index -------------- */ .app{display:block} /* the rail grid is gone */ .main{max-width:1180px;margin:0 auto;padding:clamp(14px,3vw,28px) clamp(14px,3vw,24px) 80px} .main > .wrap{max-width:none;padding:0} .shb-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap} .shb-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text)} .shb-brand .mark{color:var(--sec-reading);font-size:15px} .shb-brand .nm{font-family:var(--serif);font-weight:800;font-size:19px;letter-spacing:-.02em} .shb-days{margin-left:auto;display:flex;align-items:center;gap:5px;background:var(--ink-bg); color:var(--ink-fg);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600} .shb-days b{font-family:var(--serif);font-weight:800;font-size:16px;color:var(--gold)} /* the chip is a link to what it names (Home, the chooser, GRE); it must not look like body-text link */ a.shb-days,a.shb-days:hover{text-decoration:none;color:var(--ink-fg)} .shb-tabs{background:var(--surface);border:1px solid var(--border);border-radius:16px; padding:6px;display:flex;flex-wrap:wrap;gap:6px;position:sticky;top:8px;z-index:5; box-shadow:var(--shadow);margin-bottom:14px} .shb-tabs a:hover{text-decoration:none;background:var(--surface-2)} .shb-tabs a[aria-current]:hover{background:var(--text)} .shb-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px} .shb-pills a:hover{text-decoration:none;border-color:var(--border-strong)} /* "Resume: " under the menu; one tap back to where he stopped, from anywhere */ .shb-resume{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:-8px 0 18px;padding:6px 12px;border:1px dashed var(--border-strong); border-radius:999px;font-size:13.5px;color:var(--muted);text-decoration:none;background:var(--surface)} .shb-resume .lb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase} .shb-resume b{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw} .shb-resume:hover{text-decoration:none;border-color:var(--ac);color:var(--text)} .shb-pills+.shb-resume{margin-top:-10px} .shb-every{margin-top:48px;border-top:1px solid var(--border);padding-top:16px} .shb-every > summary{cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);list-style:none;padding:6px 0} .shb-every > summary::-webkit-details-marker{display:none} .shb-every > summary::before{content:'\25B8';margin-right:7px;font-size:9px} .shb-every[open] > summary::before{content:'\25BE'} .shb-egrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); padding:12px 0 4px} .shb-ecol .lbl{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--faint);margin-bottom:7px} .shb-ecol a{display:block;font-size:14px;color:var(--muted);text-decoration:none;padding:3px 0} .shb-ecol a:hover{color:var(--ac-lift)} .shb-ecol a[aria-current]{color:var(--text);font-weight:600} /* ---- Hub template: header card, then an auto-fit grid of cards ------------ From the redesign reference build. `.rowl` was a one-column stack defined only inside practice.html, so book-units, lectures and lecture.html — which use the same classes — rendered unstyled. It now lives here, as the grid the spec asks for, and every page that uses it gets the card. */ .rowl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px; margin-bottom:26px} .rowl.one{grid-template-columns:1fr} .rw{display:flex;flex-direction:column;gap:10px;background:var(--surface); border:1px solid var(--border);border-radius:var(--r);padding:20px;overflow:hidden; transition:border-color .15s} .rw:hover{border-color:var(--text)} /* push only a trailing ACTION to the card foot — applying this to any last child shoved body copy to the bottom and opened a hole in the middle of the card. */ .rw > a.btn:last-child,.rw > .btn-row:last-child{margin-top:auto} .rw .ti{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.02em; line-height:1.2} .rw .bl{font-size:15px;color:var(--muted);line-height:1.5;max-width:44ch} .rw .mt{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.06em} /* the section-hued top strip */ .rw.hero{border-top:6px solid var(--ac);border-radius:var(--r)} /* an honest gap: gold dashed, never an empty state */ .rw.soon{background:var(--bg-2);border:1px dashed var(--gold);opacity:1} .rw.soon .ti{color:var(--text)} .gh{font-family:var(--serif);font-weight:700;font-size:clamp(20px,2.6vw,26px); letter-spacing:-.02em;margin:34px 0 14px} /* stat tiles: one big number plus one small label — never a label alone */ .counts{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px} .ct{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm); padding:14px 16px;min-width:96px} .ct .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted)} .ct .v{font-family:var(--serif);font-size:28px;font-weight:800;margin-top:2px;letter-spacing:-.03em} /* --ac-lift is a light coral in dark mode (L .82) - it is the accent LIFTED for a dark ground. .btn.primary kept color:#fff on top of it, measuring 1.82:1 on the primary action button of every page. Text on an accent fill needs its own token that flips, exactly like --on-mark in journey-reading. */ :root{ --on-ac:#fff; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --on-ac:oklch(.20 .03 40); } } :root[data-theme="dark"]{ --on-ac:oklch(.20 .03 40); } /* --warn is tuned as a FILL and measures 2.70:1 as text. Same split as --ac/--ac-text: the fill stays exactly as designed, the text-weight variant clears WCAG. */ :root{ --warn-text:oklch(.52 .13 85); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --warn-text:oklch(.82 .12 85); } } :root[data-theme="dark"]{ --warn-text:oklch(.82 .12 85); } /* --ac is tuned as a FILL (buttons, pills, bars) and measures 4.20:1 as text on a card - fine for a 16px label, under WCAG for the 10px mono chips. A text-only variant keeps every fill exactly as designed and fixes the small type. */ :root{ --ac-text:oklch(.52 .15 40); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ac-text:oklch(.78 .12 40); } } :root[data-theme="dark"]{ --ac-text:oklch(.78 .12 40); } /* The ink panel is a deliberately dark surface, not a themed one. It used to be background:var(--text)/color:var(--bg), which inverts in dark mode: the panel turned paper-coloured while its paragraphs kept the hardcoded #CFC5B2 meant for a dark ground - beige on cream, measured at 1.44:1. These four tokens hold the panel steady in both themes; only its outline changes so it still reads as a raised block against a dark page. */ :root{ --ink-bg:oklch(.24 .03 55); --ink-fg:#F7F2E8; --ink-dim:#CFC5B2; --ink-faint:#A79E8D; --ink-edge:transparent; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ink-bg:oklch(.27 .028 55); --ink-edge:oklch(0.38 0.02 70); } } :root[data-theme="dark"]{ --ink-bg:oklch(.27 .028 55); --ink-edge:oklch(0.38 0.02 70); } /* the ink panel — max two per page, per the spec */ .inkp{background:var(--ink-bg);color:var(--ink-fg);border:1px solid var(--ink-edge);border-radius:22px; padding:clamp(20px,3.4vw,34px);display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;align-items:center; margin-bottom:18px} .inkp .eyebrow{color:var(--gold)} .inkp h2,.inkp .ti{font-family:var(--serif);font-weight:700; font-size:clamp(22px,3vw,34px);line-height:1.12;letter-spacing:-.03em;margin:10px 0 12px; max-width:24ch;color:var(--bg)} .inkp p{color:var(--ink-dim);font-size:15px;line-height:1.55;max-width:46ch} .inkp .tag{background:rgba(247,242,232,.1);border-radius:8px;padding:5px 11px;font-size:13px; color:var(--ink-dim);border:0} .inkp .btn{background:transparent;color:var(--ink-fg);border:1px solid rgba(247,242,232,.35)} .inkp .btn:hover{border-color:var(--ink-fg);background:transparent} .inkp .btn.primary{background:var(--ac);color:#fff;border:0} .inkp .box{background:rgba(247,242,232,.07);border:1px solid rgba(247,242,232,.14); border-radius:18px;padding:20px} /* ---- Hub template, continued: sections become cards ---------------------- review / library / lectures are built from `section.block` + `.read`. On paper a bare section on the ground reads as nothing at all, so a block that carries a heading becomes a card, matching the reference build. Blocks that only wrap a note or a grid stay transparent so cards do not nest inside cards. */ section.block{margin-bottom:18px;scroll-margin-top:72px} section.block:has(> .read){background:var(--surface);border:1px solid var(--border); border-radius:var(--r);padding:clamp(18px,3vw,28px)} section.block:has(> .read) > .read{margin-bottom:14px} section.block:has(> .read) > .read:only-child{margin-bottom:0} .read h2{font-family:var(--serif);font-weight:700;font-size:clamp(20px,2.6vw,26px); letter-spacing:-.02em} .read p{font-size:17px;line-height:1.55;max-width:54ch} /* a note that sits alone in a block should not gain a second border */ section.block:has(> .note:only-child){background:transparent;border:0;padding:0} /* tables read as rows on paper, per the spec */ table{border-collapse:separate;border-spacing:0;width:100%;font-size:15px;min-width:460px} th{background:transparent;font-family:var(--mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 12px; border-bottom:1px solid var(--border)} td{padding:12px;border-bottom:1px solid var(--border-soft);vertical-align:top} tbody tr:last-child td{border-bottom:0} tbody tr:hover td{background:var(--bg-2)} /* ---- Syllabus template: section header, unit rows worst-first ------------- The number and the bar are never the only signal: every state also carries a glyph — ✓ passing, ! under 70%, ✗ never practised — so the row reads the same to a colour-blind eye and in print. */ .syl-head h1{font-size:clamp(32px,5.4vw,58px);line-height:1;letter-spacing:-.04em; color:var(--ac);margin:10px 0 14px} .syl-stats{display:flex;flex-wrap:wrap;gap:20px;margin-top:22px;padding-top:18px; border-top:1px dashed var(--border)} .syl-stats .v{font-family:var(--serif);font-weight:800;font-size:26px;letter-spacing:-.03em} .syl-stats .l{font-size:12px;color:var(--muted)} .urow{border:1px solid var(--border-soft);border-radius:16px;padding:14px 16px; background:var(--surface);display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 20px;align-items:center} .urow.weak{background:var(--bg-2)} .urow .uhd{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;min-width:0} .urow .uid{font-family:var(--mono);font-size:12px;color:var(--ac-lift)} .urow .unm{font-weight:600;font-size:16px} .urow .ubar{height:8px;border-radius:99px;background:#F0E9DA;overflow:hidden; margin:10px 0 8px;max-width:320px} .urow .ubar > i{display:block;height:100%;border-radius:99px;background:var(--ac);width:0} .urow.weak .ubar > i{background:var(--bad)} .urow .umeta{font-size:13px;color:var(--muted)} .urow .uacts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end} .urow .uacts a{font:600 14px var(--sans);background:var(--surface);border:1px solid var(--border); border-radius:11px;padding:10px 16px;color:var(--text);text-decoration:none;min-height:40px; display:inline-flex;align-items:center} .urow .uacts a:hover{border-color:var(--text)} .urow .uacts a.learn{background:var(--ac-lift);border-color:transparent;color:#fff} /* the accuracy chip — glyph first, colour second */ .uchip{border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600; background:var(--surface-2);color:var(--muted)} .uchip.low{background:oklch(0.97 0.035 25);color:oklch(0.50 0.16 28)} .uchip.never{background:oklch(0.96 0.05 25);color:oklch(0.45 0.16 28)} .uchip.good{background:var(--surface-2);color:var(--muted)} /* honest callout — gold dashed, states the count, never an empty state */ .honest{background:var(--bg-2);border:1px dashed var(--gold);border-radius:var(--r); padding:clamp(16px,2.6vw,22px)} .honest .hd{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);margin-bottom:8px} /* ---- Unit template (P3) --------------------------------------------------- Nine blocks, each a card. A block that is not written says so with a count, in gold dashed — never a blank panel, never "coming soon". */ .blk{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:clamp(16px,2.6vw,24px);margin-bottom:14px} .blk.todo{background:var(--bg-2);border:1px dashed var(--gold);opacity:1} .blk h3{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.02em; margin:0 0 10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .blk h3 .n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted); background:var(--surface-2);border-radius:8px;padding:3px 8px} .blk p{font-size:17px;line-height:1.55;max-width:54ch} .blk .sub{font-size:15px;color:var(--muted);max-width:54ch} /* "try one" sits on the section tint so it reads as a task, not prose */ .blk.try{background:var(--ac-bg);border-color:var(--ac)} /* ---- Runner template (P4) ------------------------------------------------- Sticky bar, gold clock, material left and answer sheet right. Under 720px the columns stack and the sheet becomes a bottom sheet. */ .exambar,.bar{position:sticky;top:8px;z-index:40;background:var(--surface); border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow); padding:10px 14px;margin-bottom:16px} .clk,.exambar .clk{font-family:var(--serif);font-weight:800;font-variant-numeric:tabular-nums; font-size:26px;letter-spacing:-.03em;color:var(--gold)} .clk.warn,.exambar .clk.warn{color:var(--gold);animation:clkpulse 1.4s ease-in-out infinite} .clk.crit,.exambar .clk.crit{color:var(--bad);animation:clkpulse 1s ease-in-out infinite} @keyframes clkpulse{0%,100%{opacity:1}50%{opacity:.55}} @media (prefers-reduced-motion:reduce){.clk.warn,.clk.crit{animation:none}} /* band cells: one big number plus one small label */ .result .band{font-family:var(--serif);font-weight:800;font-size:clamp(44px,7vw,72px); letter-spacing:-.04em;color:var(--text)} .result .band.hit{color:var(--ok)} .result .band.miss{color:var(--bad)} .tile,.result .tile{background:var(--surface);border:1px solid var(--border); border-radius:var(--r-sm);padding:14px 16px} .tile .v{font-family:var(--serif);font-weight:800;font-size:26px;letter-spacing:-.03em} .tile .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted)} /* ---- Doc template (P5) ---------------------------------------------------- One column, 62ch, numbered h2s, a back-link eyebrow. */ .doc,.mdb{max-width:62ch} .mdb h2{font-family:var(--serif);font-weight:700;font-size:clamp(20px,2.6vw,26px); letter-spacing:-.02em;margin:32px 0 10px} .mdb h3{font-family:var(--serif);font-weight:700;font-size:19px;margin:24px 0 8px} .mdb p,.mdb li{font-size:17px;line-height:1.6} .mdb blockquote{border-left:3px solid var(--ac);background:var(--ac-bg);margin:16px 0; padding:12px 16px;border-radius:0 var(--r-sm) var(--r-sm) 0} /* ---- Reader / gallery (P6) ------------------------------------------------ */ .gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px} .gal .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); overflow:hidden} /* imagery placeholder: diagonal warm stripes and a mono label, never an illustration */ .imgslot{aspect-ratio:3/4;background:repeating-linear-gradient(45deg, var(--surface-2) 0 10px, var(--bg-2) 10px 20px);display:flex;align-items:flex-end; padding:10px;font-family:var(--mono);font-size:11px;color:var(--muted)} /* ---- Dark theme (P10) ----------------------------------------------------- The spec's values: ground L .19, card L .24, section hues lifted to L .72, their text variants to L .82. Follows the OS by default; the header toggle sets data-theme on and that wins in both directions. Only tokens are redefined here. Nothing in the component layer knows which theme is live, which is why one block covers all 44 pages. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:oklch(0.19 0.012 70); --bg-2:oklch(0.22 0.014 70); --surface:oklch(0.24 0.016 70); --surface-2:oklch(0.28 0.018 70); --surface-3:oklch(0.32 0.02 70); --border:oklch(0.34 0.02 70); --border-soft:oklch(0.28 0.018 70); --border-strong:oklch(0.44 0.022 70); --text:oklch(0.94 0.012 85); --muted:oklch(0.74 0.016 75); --faint:oklch(0.60 0.014 75); --sec-listening:oklch(0.72 0.12 200); --on-listening:oklch(0.82 0.10 200); --tint-listening:oklch(0.30 0.045 200); --sec-reading:oklch(0.72 0.13 40); --on-reading:oklch(0.82 0.11 40); --tint-reading:oklch(0.30 0.05 40); --sec-writing:oklch(0.72 0.13 300); --on-writing:oklch(0.82 0.11 300); --tint-writing:oklch(0.30 0.05 300); --sec-speaking:oklch(0.72 0.13 350); --on-speaking:oklch(0.82 0.11 350); --tint-speaking:oklch(0.30 0.05 350); --ielts:oklch(0.72 0.13 40); --ielts-lift:oklch(0.82 0.11 40); --gre:oklch(0.72 0.12 200); --gre-lift:oklch(0.82 0.10 200); --ielts2:oklch(0.72 0.15 25); --ok:oklch(0.72 0.12 155); --warn:oklch(0.80 0.12 85); --bad:oklch(0.72 0.15 25); --gold:oklch(0.82 0.12 85); --teal:oklch(0.72 0.12 200); --ok-bg:oklch(0.30 0.045 155); --warn-bg:oklch(0.30 0.05 85); --bad-bg:oklch(0.30 0.05 25); --mark:oklch(0.72 0.13 40); --mark-soft:oklch(0.30 0.05 40); --on-mark:oklch(0.19 0.012 70); --st1:oklch(0.32 0.05 200); --st2:oklch(0.32 0.055 40); --st3:oklch(0.33 0.06 85); --st4:oklch(0.32 0.05 155); --st5:oklch(0.32 0.05 300); --st6:oklch(0.32 0.055 40); --test:oklch(0.94 0.012 85); --arr:oklch(0.72 0.13 40); --shadow:0 8px 22px -14px rgba(0,0,0,.75); } } /* the toggle overrides the OS, in both directions */ :root[data-theme="dark"]{ --bg:oklch(0.19 0.012 70); --bg-2:oklch(0.22 0.014 70); --surface:oklch(0.24 0.016 70); --surface-2:oklch(0.28 0.018 70); --surface-3:oklch(0.32 0.02 70); --border:oklch(0.34 0.02 70); --border-soft:oklch(0.28 0.018 70); --border-strong:oklch(0.44 0.022 70); --text:oklch(0.94 0.012 85); --muted:oklch(0.74 0.016 75); --faint:oklch(0.60 0.014 75); --sec-listening:oklch(0.72 0.12 200); --on-listening:oklch(0.82 0.10 200); --tint-listening:oklch(0.30 0.045 200); --sec-reading:oklch(0.72 0.13 40); --on-reading:oklch(0.82 0.11 40); --tint-reading:oklch(0.30 0.05 40); --sec-writing:oklch(0.72 0.13 300); --on-writing:oklch(0.82 0.11 300); --tint-writing:oklch(0.30 0.05 300); --sec-speaking:oklch(0.72 0.13 350); --on-speaking:oklch(0.82 0.11 350); --tint-speaking:oklch(0.30 0.05 350); --ielts:oklch(0.72 0.13 40); --ielts-lift:oklch(0.82 0.11 40); --gre:oklch(0.72 0.12 200); --gre-lift:oklch(0.82 0.10 200); --ielts2:oklch(0.72 0.15 25); --ok:oklch(0.72 0.12 155); --warn:oklch(0.80 0.12 85); --bad:oklch(0.72 0.15 25); --gold:oklch(0.82 0.12 85); --teal:oklch(0.72 0.12 200); --ok-bg:oklch(0.30 0.045 155); --warn-bg:oklch(0.30 0.05 85); --bad-bg:oklch(0.30 0.05 25); --mark:oklch(0.72 0.13 40); --mark-soft:oklch(0.30 0.05 40); --on-mark:oklch(0.19 0.012 70); --st1:oklch(0.32 0.05 200); --st2:oklch(0.32 0.055 40); --st3:oklch(0.33 0.06 85); --st4:oklch(0.32 0.05 155); --st5:oklch(0.32 0.05 300); --st6:oklch(0.32 0.055 40); --test:oklch(0.94 0.012 85); --arr:oklch(0.72 0.13 40); --shadow:0 8px 22px -14px rgba(0,0,0,.75); } .shb-theme{background:var(--surface);border:1px solid var(--border);border-radius:999px; width:38px;height:38px;cursor:pointer;color:var(--muted);font-size:15px;line-height:1; margin-left:auto} .shb-theme:hover{border-color:var(--text);color:var(--text)} .shb-head .shb-days{margin-left:0} /* ---- Runner palette states (DS) ------------------------------------------ Eight states, every one carrying a glyph or a shape as well as a colour. */ .palette{display:flex;flex-wrap:wrap;gap:5px;padding:12px 0} .pq{position:relative;min-width:34px;min-height:34px;border-radius:10px; border:1px solid var(--border);background:var(--surface);color:var(--muted); font:600 13px var(--sans);cursor:pointer} .pq:hover{border-color:var(--text)} .pq.blank{border-style:dashed;color:var(--faint)} /* not answered */ .pq.done{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)} .pq.cur{outline:2px solid var(--ac);outline-offset:2px} /* the one you are on */ .pq.flag{border-color:var(--gold);background:var(--warn-bg)} .pq.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)} .pq.no{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)} .pq > i{position:absolute;top:-5px;right:-4px;font-style:normal;font-size:10px; line-height:1;background:var(--surface);border-radius:50%;padding:1px 2px} .pq.flag > i{color:var(--gold)} .pq.ok > i{color:var(--ok)} .pq.no > i{color:var(--bad)} /* ---- Today screen pieces -------------------------------------------------- */ .today .box{background:rgba(247,242,232,.07);border:1px solid rgba(247,242,232,.14); border-radius:18px;padding:20px} .today .box .k{color:var(--ink-dim)} .tgt{display:flex;align-items:baseline;gap:10px;margin:6px 0 14px;flex-wrap:wrap} .tgt .big{font-family:var(--serif);font-weight:800;font-size:clamp(38px,6vw,54px); letter-spacing:-.04em;color:var(--gold);line-height:1} .tgt .sm{font-size:13px;color:var(--ink-dim)} .tgtbar{height:8px;border-radius:99px;background:rgba(247,242,232,.14);overflow:hidden} .tgtbar > i{display:block;height:100%;border-radius:99px;background:var(--gold)} .tgtends{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px; color:var(--ink-dim);margin-top:6px} .tchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .tchips span{background:rgba(247,242,232,.1);border-radius:8px;padding:5px 11px;font-size:13px; color:var(--ink-dim)} .rowhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px; flex-wrap:wrap;margin-bottom:12px} .rowhead h2{font-family:var(--serif);font-weight:700;font-size:clamp(20px,2.6vw,26px); letter-spacing:-.02em;margin:0} .rowhead span{font-size:13.5px;color:var(--muted)} /* The four-paper card — measurements taken from the reference build, not guessed. 6px strip · 18px body · title Bricolage 700/21 · number Bricolage 800/22 in the hue's TEXT step · bar 8px/99px with 12px margins · meta 13.5/1.45 · worst 14/600. */ .rw.paper{padding:0;overflow:hidden;text-decoration:none;color:inherit;display:flex; flex-direction:column;text-align:start;border-radius:20px} .rw.paper:hover{border-color:var(--text)} .rw.paper .strip{display:block;height:6px;background:var(--ac)} .rw.paper .pbody{display:block;padding:18px} .rw.paper .prow{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .rw.paper .pname{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.02em} .rw.paper .pacc{font-family:var(--serif);font-weight:800;font-size:22px;color:var(--ac-lift)} .rw.paper .pbar{display:block;height:8px;border-radius:99px;background:#F0E9DA; overflow:hidden;margin:12px 0} .rw.paper .pbar > i{display:block;height:100%;border-radius:99px;background:var(--ac)} .rw.paper .punits{display:block;font-size:13.5px;line-height:1.45;color:var(--muted)} .rw.paper .pworst{display:block;font-size:14px;font-weight:600;margin-top:10px} /* dashed "add" panel — the Lectures capture block and anything like it */ .addpanel{background:var(--bg-2);border:1px dashed #D9CFBB;border-radius:20px; padding:clamp(18px,3vw,28px);margin-bottom:18px} .addpanel h2{font-family:var(--serif);font-weight:700;font-size:23px;letter-spacing:-.02em; margin:0} .addpanel > p{font-size:15px;line-height:1.5;color:var(--muted);max-width:60ch;margin:0 0 18px} .addgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px} .addgrid > div{background:var(--surface);border:1px solid var(--border-soft); border-radius:16px;padding:14px} .addgrid .lbl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px} .addgrid .lbl b{font-weight:600;font-size:15px} .addgrid .lbl span{font-family:var(--mono);font-size:11px;color:var(--muted)} /* stat strip inside a header card: big number, small label */ .phead .meta-row > div .v{font-family:var(--serif);font-weight:800;font-size:26px; letter-spacing:-.03em;line-height:1.1} .phead .meta-row > div .l{font-size:12px;color:var(--muted)} /* ---- Review screen, measured off design/StudyHub-App.reference.html -------- The "New today" panel sits on the Listening tint (it is a learning surface, not a section page), accuracy bars are 10px on a #F0E9DA track, and the 92.5% floor — 37/40, the raw score an 8.5 needs — is a gold rule across them. */ .revgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px; margin-bottom:18px} .panel-tint{background:var(--tint-listening);border:1px solid oklch(0.88 0.05 200); border-radius:20px;padding:clamp(18px,3vw,26px)} .panel-tint h2{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:-.02em; margin:0 0 8px} .panel-tint > p{font-size:15px;line-height:1.55;color:var(--muted);max-width:44ch;margin:0 0 16px} .panel-card{background:var(--surface);border:1px solid var(--border);border-radius:20px; padding:clamp(18px,3vw,26px)} .panel-card h2{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:-.02em; margin:0 0 4px} .panel-card > p{font-size:14.5px;line-height:1.5;color:var(--muted);max-width:50ch;margin:0 0 20px} .accgrid{display:grid;gap:13px} .accrow .top{display:flex;justify-content:space-between;gap:10px;font-size:15px;margin-bottom:6px} .accrow .top b{font-weight:500} .accrow .top span{font-family:var(--mono)} .accbar{position:relative;height:10px;border-radius:99px;background:#F0E9DA;overflow:hidden} .accbar > i{display:block;height:100%;border-radius:99px} /* the 92.5% floor — 37/40, what an 8.5 actually needs */ .accfloor{position:relative;height:26px} .accfloor .mark{position:absolute;left:92.5%;top:0;height:9px;width:2px;background:var(--gold)} .accfloor .lbl{position:absolute;right:0;top:12px;font-family:var(--mono);font-size:11px; color:var(--muted);white-space:nowrap} /* ---- Practice screen, measured off the reference ------------------------- */ .papergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px; margin:18px 0 14px} .pcell{border:1px solid var(--border);border-radius:12px;padding:8px 6px;text-align:center; background:var(--surface);display:flex;flex-direction:column;gap:2px;text-decoration:none; color:inherit} .pcell .no{font-family:var(--mono);font-size:10px;opacity:.65} .pcell .band{font-family:var(--serif);font-weight:700;font-size:17px} .pcell.scored{background:var(--surface-2);border-color:var(--border-strong)} .pcell.due{border-color:var(--bad);color:var(--bad)} .pcell.none{opacity:.6;border-style:dashed} .pcell:hover{border-color:var(--text)} .plegend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted)} /* a card on a section tint, and the ink counterpart beside it */ .tintcard{background:var(--ac-bg);border:1px solid oklch(0.88 0.06 40);border-radius:20px; padding:clamp(18px,3vw,26px)} .tintcard .eyebrow{color:var(--ac-lift);font-size:11px;letter-spacing:.12em} .tintcard h2{font-family:var(--serif);font-weight:700;font-size:23px;letter-spacing:-.02em; margin:8px 0} .tintcard p{font-size:15px;line-height:1.55;color:var(--muted);max-width:46ch;margin:0 0 14px} .inkcard{background:var(--ink-bg);color:var(--ink-fg);border:1px solid var(--ink-edge);border-radius:20px; padding:clamp(18px,3vw,26px);display:flex;flex-direction:column} .inkcard .eyebrow{color:var(--gold);font-size:11px;letter-spacing:.12em} .inkcard h2{font-family:var(--serif);font-weight:700;font-size:23px;letter-spacing:-.02em; margin:8px 0;color:var(--bg)} .inkcard p{font-size:15px;line-height:1.55;color:var(--ink-dim);max-width:46ch;margin:0 0 14px} .inkcard .mono{font-family:var(--mono);font-size:12.5px;color:var(--ink-faint);margin-bottom:14px} .inkcard .btn{background:transparent;color:var(--ink-fg);border:1px solid rgba(247,242,232,.35)} .inkcard .btn.primary{background:var(--gold);color:oklch(.24 .03 55);border:0} /* ---- Library screen, measured off the reference -------------------------- */ /* segmented tab strip sitting on the paper ground */ .segtabs{display:flex;flex-wrap:wrap;gap:6px;background:var(--bg);border-radius:14px;padding:5px; margin-bottom:14px;max-width:640px} .segtabs a,.segtabs button{font:600 14px var(--sans);border-radius:10px;padding:9px 14px; border:0;background:transparent;color:var(--muted);cursor:pointer;text-decoration:none} .segtabs a.on,.segtabs button.on{background:var(--surface);color:var(--text); box-shadow:0 1px 2px rgba(60,40,20,.08)} .filterpills{display:flex;flex-wrap:wrap;gap:8px} .filterpills a,.filterpills button{font:600 14px var(--sans);border-radius:999px;padding:8px 14px; border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer; text-decoration:none} .filterpills a.on,.filterpills button.on{background:var(--text);border-color:var(--text); color:var(--bg)} /* ranked row: a numbered hue tile beside the body */ .ranked{display:grid;gap:12px} .rankrow{background:var(--surface);border:1px solid var(--border);border-radius:18px; padding:clamp(16px,2.4vw,22px);display:grid;grid-template-columns:44px 1fr;gap:14px; align-items:start} .rankrow .n{width:44px;height:44px;border-radius:13px;background:var(--ac);color:#fff; display:grid;place-items:center;font:800 18px var(--serif)} .rankrow h3{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:-.02em; margin:0;text-wrap:balance} .rankrow p{font-size:14.5px;line-height:1.55;color:var(--muted);max-width:62ch;margin:6px 0 12px} .rankrow .tags{display:flex;gap:6px;flex-wrap:wrap} .rankrow .tags span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em; text-transform:uppercase;background:var(--surface-2);color:var(--muted);border-radius:6px; padding:3px 7px} /* the ink "almost nobody finds" panel and its link list */ .inkp.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px; align-items:center} .linklist{display:grid;gap:8px} .linklist a{display:flex;justify-content:space-between;gap:10px; background:rgba(247,242,232,.08);border:1px solid rgba(247,242,232,.16);border-radius:12px; padding:11px 14px;color:var(--bg);font-size:14.5px;font-weight:500;text-decoration:none} .linklist a:hover{background:rgba(247,242,232,.14);text-decoration:none} .linklist a.gold{background:var(--gold);color:var(--text);border-color:transparent;font-weight:600} /* ---- Unit screen, measured off the reference ----------------------------- Two-column auto-fit; the header and the wide blocks span the full row. The title is capped at 18ch so a long question-type name breaks like a headline. */ .unitgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px; align-items:start} .unitgrid > .wide{grid-column:1/-1} .unithead h1{font-family:var(--serif);font-weight:800;font-size:clamp(30px,4.6vw,50px); line-height:1.02;letter-spacing:-.04em;margin:10px 0 12px;max-width:18ch;text-wrap:balance} .unithead .eyebrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:11px; letter-spacing:.12em;color:var(--muted)} .unithead .worst{background:oklch(0.96 0.05 25);color:oklch(0.48 0.16 28);border-radius:7px; padding:4px 9px;letter-spacing:.06em} /* "The move" — numbered steps, one sentence each, readable aloud */ .steps{list-style:none;margin:0;padding:0;display:grid;gap:14px} .steps li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start} .steps li .n{width:30px;height:30px;border-radius:10px;background:var(--ac-bg); color:var(--ac-lift);font:700 14px var(--serif);display:grid;place-items:center} .steps li .t{font-size:16px;line-height:1.45;padding-top:4px;text-wrap:pretty} /* Traps — name, miss-rate, one-line tip */ .traps{display:grid;gap:12px} .trap{border:1px solid var(--border-soft);border-radius:14px;padding:13px 15px; background:var(--bg-2)} .trap .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline} .trap .nm{font-weight:600;font-size:15px} .trap .rate{font-family:var(--mono);font-size:12px;color:var(--bad)} .trap .tip{font-size:14px;line-height:1.45;color:var(--muted);margin-top:4px} /* what the teacher said — a lecture moment with a striped thumbnail */ .moments{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px} .moment{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:start;text-align:start; background:var(--bg-2);border:1px solid var(--border-soft);border-radius:14px;padding:12px; text-decoration:none;color:inherit} .moment:hover{border-color:var(--text)} .moment .thumb{aspect-ratio:4/3;border-radius:8px;display:block; background:repeating-linear-gradient(135deg,#E9E0CD 0 5px,#F4EDDD 5px 10px)} .moment .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted)} .moment .q{display:block;font-size:15px;line-height:1.45;margin-top:4px} /* ---- shared across Rows / Gallery / Doc ---------------------------------- */ /* the honest gold callout: a gap stated with a count, never an empty state */ .note.warn,.honest{background:oklch(0.97 0.04 85);border:1px dashed oklch(0.82 0.09 85); border-radius:20px;padding:clamp(18px,3vw,26px);border-left:1px dashed oklch(0.82 0.09 85)} .note.warn .hd,.honest .hd{display:block;font-weight:700;font-size:16px;margin-bottom:6px; font-family:var(--sans);letter-spacing:normal;text-transform:none;color:var(--text)} .note.warn{font-size:15px;line-height:1.55;color:var(--muted);max-width:none} .note.warn > *,.honest > *{max-width:64ch} /* gallery grid — auto-fill 260, 16 gap */ .gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px} .galhead{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .galhead .counter{font-family:var(--mono);font-size:12px;color:var(--muted);margin-left:auto} /* Doc template: numbered h2s and a back-link eyebrow */ .doc h2,.mdb h2{counter-increment:docsec} .doc.numbered,.mdb.numbered{counter-reset:docsec} .doc.numbered h2::before,.mdb.numbered h2::before{content:counter(docsec) ". "; font-family:var(--mono);font-size:.62em;color:var(--muted);letter-spacing:.06em} .backlink{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);text-decoration:none;margin-bottom:10px} .backlink:hover{color:var(--ac-lift)} /* Runner two-column: material left, answer sheet right; stacks under 720px */ .runner{display:grid;grid-template-columns:3fr 2fr;gap:18px;align-items:start} @media(max-width:720px){ .runner{grid-template-columns:1fr} .runner > .sheet{position:sticky;bottom:0;max-height:46vh;overflow:auto; background:var(--surface);border:1px solid var(--border);border-radius:20px 20px 0 0; box-shadow:0 -8px 22px -14px rgba(60,40,20,.5);z-index:20} } /* Today task rows — tick, title+meta, one action */ .tasks{display:grid;gap:10px} .task{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center; background:var(--bg-2);border:1px solid var(--border-soft);border-radius:14px;padding:13px 15px} .task .tick{width:28px;height:28px;border-radius:9px;background:var(--ac-bg);color:var(--ac-lift); font:700 13px var(--serif);display:grid;place-items:center} .task .t{font-weight:600;font-size:15px} .task .m{font-size:13px;color:var(--muted);line-height:1.45;margin-top:2px} /* single-column runners (exam, drill) share the runner frame */ .runner-single{max-width:860px} /* ---- upload and study progress ------------------------------------------ */ .upbar{margin-top:14px;background:var(--surface);border:1px solid var(--border); border-radius:14px;padding:14px 16px} .uphead{font-weight:600;font-size:15px;margin-bottom:8px} .uptrack{height:10px;border-radius:99px;background:#F0E9DA;overflow:hidden} .uptrack > i{display:block;height:100%;width:0;border-radius:99px;background:var(--ac); transition:width .35s ease} .uptrack.study > i{background:var(--gold)} .uplabel{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:7px; letter-spacing:.04em} .upnote{font-size:13px;color:var(--muted);line-height:1.5;margin-top:8px;max-width:54ch} /* ---- lecture gallery ----------------------------------------------------- */ .lecfile{grid-column:1/-1;display:flex;align-items:center;gap:12px;background:var(--surface); border:1px solid var(--border);border-radius:14px;padding:12px 14px;flex-wrap:wrap} .lecfile .ic{font-family:var(--mono);font-size:12px;color:var(--ac-lift);min-width:34px} .lecfile .nm{font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .lecfile .sz{font-family:var(--mono);font-size:11px;color:var(--faint)} .lightbox{position:fixed;inset:0;z-index:100;background:rgba(36,31,25,.92);display:flex; align-items:center;justify-content:center;padding:24px;cursor:zoom-out} .lightbox img{max-width:100%;max-height:100%;border-radius:12px;display:block} .lightbox p{color:var(--bg);font-family:var(--mono);font-size:12px} .lightbox .x{position:absolute;top:16px;right:20px;width:40px;height:40px;border-radius:50%; border:1px solid rgba(247,242,232,.4);background:transparent;color:var(--bg);font-size:22px; cursor:pointer;line-height:1} /* what was read off each photograph, under it */ /* ---- lecture write-up: findings as scannable lists, not walls -------------- */ .findings{list-style:none;counter-reset:f;margin:0;padding:0;display:grid;gap:10px} .findings li{counter-increment:f;display:grid;grid-template-columns:28px 1fr;gap:12px; background:var(--surface);border:1px solid var(--border-soft);border-radius:14px; padding:13px 15px} .findings li::before{content:counter(f);font-family:var(--mono);font-size:12px; color:var(--ac-lift);padding-top:2px} .findings li b{font-weight:600;font-size:15.5px;line-height:1.45;display:block} .findings li .why{display:block;font-size:13.5px;color:var(--muted);margin-top:4px; line-height:1.45} .findings li > *{grid-column:2} .findings li::before{grid-column:1} /* corrections: was -> should be */ .fixes{display:grid;gap:10px} .fix{background:var(--surface);border:1px solid var(--border-soft);border-radius:14px; padding:13px 15px} .fix .was{font-size:14.5px;color:var(--muted);text-decoration:line-through; text-decoration-color:var(--faint)} .fix .now{font-size:15.5px;font-weight:600;margin-top:5px;padding-left:11px; border-left:2px solid var(--ok)} .fix .rule{font-size:13px;color:var(--muted);margin-top:6px} /* actions as a checklist */ .todo{list-style:none;counter-reset:t;margin:0;padding:0;display:grid;gap:9px} .todo li{counter-increment:t;display:grid;grid-template-columns:auto 1fr auto;gap:12px; align-items:start;background:var(--surface);border:1px solid var(--border-soft); border-radius:14px;padding:13px 15px} .todo li input{margin-top:3px;width:17px;height:17px;accent-color:var(--ac)} .todo li label{cursor:pointer;min-width:0} .todo li label b{font-weight:600;font-size:15.5px;line-height:1.45;display:block} .todo li input:checked + label b{text-decoration:line-through;color:var(--muted)} .todo li .btn{white-space:nowrap} /* "more" folds — the detail stays available without shouting */ .more{margin-top:6px} .more > summary{cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--faint);list-style:none} .more > summary::-webkit-details-marker{display:none} .more > summary::before{content:'\25B8';margin-right:6px;font-size:8px} .more[open] > summary::before{content:'\25BE'} .more p{font-size:14px;line-height:1.55;color:var(--muted);margin-top:6px;max-width:62ch} .more.wide{background:var(--surface);border:1px solid var(--border);border-radius:14px; padding:13px 16px} /* a class's teaching points, shown on the unit page it belongs to */ .lecblock{margin-bottom:12px} .lecpoints{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px} .lecpoints li{background:var(--bg-2);border:1px solid var(--border-soft);border-radius:12px; padding:10px 13px} .lecpoints li b{display:block;font-weight:600;font-size:14.5px;line-height:1.45} .lecpoints li span{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.45} .lecquote{margin:8px 0 0;padding:10px 14px;border-left:3px solid var(--ac); background:var(--ac-bg);border-radius:0 12px 12px 0;font-size:14.5px;line-height:1.5} /* ---- lecture slide browser ------------------------------------------------ Built mobile-first: the board is the thing you actually read, so it gets the width and the text sits under it. Side-by-side only once there is room for both to stay legible. */ .slides{display:block} .slstage{position:relative;display:flex;align-items:center;gap:6px} .slimg{flex:1;min-width:0;padding:0;border:1px solid var(--line);border-radius:var(--r); overflow:hidden;background:var(--surface);cursor:zoom-in;display:block; aspect-ratio:4/3;max-height:52vh} .slimg img{width:100%;height:100%;object-fit:contain;display:block;background:var(--surface)} .slimg .imgslot{display:flex;align-items:center;justify-content:center;width:100%;height:100%; font-family:var(--mono);font-size:11px;color:var(--faint);padding:10px;text-align:center; word-break:break-all} .slnav{flex:0 0 40px;height:56px;border:1px solid var(--line);background:var(--surface); border-radius:var(--r-sm);font-size:24px;line-height:1;color:var(--text);cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0} .slnav:hover{border-color:var(--text)} .slnav:active{transform:scale(.96)} .slbar{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:12px 0 4px} .slbar .pos{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text)} .slbar .sub{font-size:12.5px;color:var(--muted);margin:0} .slmeta{border-top:1px solid var(--line);padding-top:12px;min-height:120px} .slmeta h3{font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.35; margin:0 0 8px;color:var(--text);letter-spacing:-.01em} .slmeta .shows{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 10px} .slmeta .exs{margin:0 0 10px;padding-left:18px} .slmeta .exs li{font-size:13.5px;line-height:1.55;color:var(--text);margin-bottom:5px} .slmeta .none{font-size:14px;color:var(--faint);font-style:italic;margin:0 0 10px} .slmeta .fname{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .slstrip{display:flex;gap:7px;overflow-x:auto;padding:14px 2px 4px; scrollbar-width:thin;-webkit-overflow-scrolling:touch} .slstrip .th{flex:0 0 58px;height:44px;padding:0;border:1px solid var(--line); border-radius:9px;overflow:hidden;background:var(--surface);cursor:pointer;position:relative; display:flex;align-items:center;justify-content:center} .slstrip .th img{width:100%;height:100%;object-fit:cover;display:block} .slstrip .th > span{font-family:var(--mono);font-size:11px;color:var(--faint)} .slstrip .th.on{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac-tint)} .slstrip .th.bare{opacity:.5} .lecdocs{display:grid;gap:8px} @media (min-width:860px){ .slides{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0 26px;align-items:start} .slstage{grid-column:1;grid-row:1} .slbar{grid-column:2;grid-row:1;margin:0 0 10px} .slmeta{grid-column:2;grid-row:1;margin-top:34px;border-top:none;padding-top:0} .slstrip{grid-column:1/-1;grid-row:2} .slimg{max-height:none} } @media (max-width:520px){ .slnav{flex:0 0 34px;height:48px;font-size:20px} .slimg{aspect-ratio:3/2;max-height:44vh} .slmeta h3{font-size:16px} .slstrip .th{flex:0 0 50px;height:38px} } /* ---- things built from a class, kept with it ---- */ .reslist{display:grid;gap:8px} .resrow{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm); padding:13px 16px;text-decoration:none;color:var(--text)} .resrow:hover{border-color:var(--text)} .resrow .rk{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase; color:var(--ac-text);border:1px solid currentColor;border-radius:999px;padding:2px 8px;white-space:nowrap} .resrow .rt{font-weight:600;font-size:15px;line-height:1.4} .resrow .rn{grid-column:2;font-size:13.5px;line-height:1.55;color:var(--muted)} @media(max-width:520px){ .resrow{grid-template-columns:1fr} .resrow .rk{justify-self:start} .resrow .rn{grid-column:1} } /* ---- lecture: the generated title demoted, rules as a table ---- */ .phead .fulltitle{font-size:14.5px;line-height:1.55;color:var(--muted);margin:10px 0 0;max-width:72ch} .ruletable{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:var(--r);overflow:hidden} .rulerow{background:var(--surface);display:grid;grid-template-columns:30px 1fr auto; gap:4px 14px;padding:15px 18px;align-items:start} .rulerow .rn{font-family:var(--mono);font-size:12px;color:var(--faint);padding-top:3px} .rulerow .rr{font-weight:600;font-size:15.5px;line-height:1.45} .rulerow .rw{font-size:13.5px;line-height:1.6;color:var(--muted);margin-top:5px} .rulerow .rj{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ac-text); cursor:pointer;white-space:nowrap;border:1px solid var(--line);border-radius:999px; padding:4px 10px;align-self:start} .rulerow .rj:hover{border-color:var(--ac)} .rulerow .more{grid-column:2} @media(max-width:560px){ .rulerow{grid-template-columns:24px 1fr;gap:4px 10px;padding:13px 14px} .rulerow .rj{grid-column:2;justify-self:start;margin-top:8px} } /* ---- lecture: the transcript ---- */ .trbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 14px} .trbar input{flex:1;min-width:190px;font-family:var(--sans);font-size:14.5px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm); padding:11px 14px;color:var(--text)} .trbar input:focus{outline:2px solid var(--ac);outline-offset:1px;border-color:transparent} .trbar .trcount{font-family:var(--mono);font-size:11.5px;color:var(--muted)} .turns{display:flex;flex-direction:column;gap:2px;background:var(--line); border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .turn{background:var(--surface);padding:13px 18px;display:grid; grid-template-columns:86px 1fr;gap:14px;align-items:baseline} .turn .tmeta{display:flex;flex-direction:column;gap:2px} .turn .tt{font-family:var(--mono);font-size:11.5px;color:var(--faint)} .turn .tw{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted)} .turn.tch .tw{color:var(--ac)} .turn.tch{border-left:2px solid var(--ac)} .turn p{margin:0;font-size:15px;line-height:1.65} .turn.hit{background:var(--ac-bg)} @media(max-width:560px){ .turn{grid-template-columns:1fr;gap:5px;padding:12px 14px} .turn .tmeta{flex-direction:row;gap:9px} } /* Amber-on-amber measured 2.46:1. The warning is carried by the border and the ground; the text itself stays ink so it can be read. */ .shb-days.unbooked{text-decoration:none;background:var(--warn-bg);color:var(--text); border:1px solid var(--warn)} .shb-days.unbooked b{color:var(--text)} .spkmap{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 14px; background:var(--surface)} .spkmap .spkhead{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:11px} .spkrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 0; border-top:1px solid var(--border-soft)} .spkrow:first-of-type{border-top:none} .spkrow .sw{font-family:var(--mono);font-size:12.5px;min-width:78px} .spkrow .sc{font-family:var(--mono);font-size:11px;color:var(--faint);flex:1;min-width:110px} .spkrow .sb{display:flex;gap:6px;flex-wrap:wrap} .spkstat{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:9px;min-height:14px} /* ---- lecture chapters: the class in order, boards where they belong ---- */ .trviews{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap} .chnote{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0 0 14px} .chapters{display:flex;flex-direction:column;gap:10px} .chap{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden} .chap.on{border-color:var(--ac)} .chhead{width:100%;display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:baseline; background:none;border:none;text-align:left;padding:15px 18px;cursor:pointer;color:var(--text)} .chhead .cht{font-family:var(--mono);font-size:12px;color:var(--faint)} .chhead .chr{font-weight:600;font-size:15.5px;line-height:1.45} .chhead .chn{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap} .chshots{display:flex;gap:7px;overflow-x:auto;padding:0 18px 15px;-webkit-overflow-scrolling:touch} .chshot{flex:0 0 116px;height:82px;padding:0;border:1px solid var(--line);border-radius:9px; overflow:hidden;background:var(--bg-2);cursor:zoom-in;display:flex;align-items:center; justify-content:center} .chshot img{width:100%;height:100%;object-fit:cover;display:block} .chshot .imgslot{font-family:var(--mono);font-size:11px;color:var(--faint)} .chmore{width:100%;background:none;border:none;border-top:1px solid var(--border-soft); padding:12px 18px;text-align:left;font-family:var(--mono);font-size:11.5px;color:var(--ac); cursor:pointer} .chmore:hover{background:var(--bg-2)} .chturns{border-top:1px solid var(--border-soft)} .chwhy{font-size:14px;line-height:1.6;color:var(--muted);margin:0;padding:13px 18px; border-bottom:1px solid var(--border-soft)} .chturns .turn{border-top:1px solid var(--border-soft)} @media(max-width:560px){ .chhead{grid-template-columns:44px 1fr;gap:4px 10px;padding:13px 14px} .chhead .chn{grid-column:2} .chshots{padding:0 14px 13px} .chshot{flex:0 0 98px;height:70px} } .chhead .chr .cont{color:var(--muted);font-weight:500} .chhead .chpart{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.07em; color:var(--faint);margin-top:4px;font-weight:400} .chhead .chalso{display:block;font-size:12.5px;line-height:1.5;color:var(--muted); margin-top:5px;font-weight:400} /* ---- homework rows (shared by /homework.html and the lecture page) ---- */ .hwlist{display:grid;gap:10px} .hwrow{display:grid;grid-template-columns:auto 1fr auto;gap:6px 14px;align-items:baseline; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm); padding:15px 18px;text-decoration:none;color:var(--text)} .hwrow:hover{border-color:var(--text)} .hwrow .tag{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase; border:1px solid currentColor;border-radius:999px;padding:2px 8px;white-space:nowrap} .hwrow .tag.todo{color:var(--warn)} .hwrow .tag.done{color:var(--ok)} .hwrow .t{font-weight:600;font-size:15.5px;line-height:1.4} .hwrow .m{grid-column:2;font-size:13px;color:var(--muted)} @media(max-width:560px){.hwrow{grid-template-columns:1fr}.hwrow .m{grid-column:1}} .hwslide{display:block;width:100%;max-width:420px;padding:0;border:1px solid var(--line); border-radius:var(--r-sm);overflow:hidden;background:var(--bg-2);cursor:zoom-in; aspect-ratio:4/3;margin:0 0 16px} .hwslide img{width:100%;height:100%;object-fit:contain;display:block} .hwslide .imgslot{display:flex;align-items:center;justify-content:center;width:100%;height:100%; font-family:var(--mono);font-size:11px;color:var(--faint)} .hwrules{border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 16px;margin:0 0 18px; background:var(--surface)} .hwrules summary{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--muted); cursor:pointer} .hwrules ol{margin:12px 0 0 18px;display:grid;gap:10px} .hwrules li{font-size:14.5px;line-height:1.55} .hwrules li b{font-weight:600;display:block} .hwrules li span{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.55} /* Amber text on the page ground measured 2.34:1. The warning is carried by the underline and weight; the text stays ink so it can actually be read. */ .capwarn{color:var(--text);text-decoration:underline;text-decoration-color:var(--warn); text-decoration-thickness:2px;text-underline-offset:3px} /* ---- companion: one shelf per book, collapsed ---- */ .bookshelf{border:1px solid var(--line);border-radius:var(--r);background:var(--surface); margin-bottom:12px;overflow:hidden} .bookshelf > summary{list-style:none;cursor:pointer;padding:17px 20px;display:grid;gap:5px} .bookshelf > summary::-webkit-details-marker{display:none} .bookshelf > summary::after{content:"open";position:absolute;right:20px; font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ac)} .bookshelf[open] > summary::after{content:"close"} .bookshelf > summary{position:relative;padding-right:76px} .bookshelf > summary:hover{background:var(--bg-2)} .bookshelf .bkname{font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.25; letter-spacing:-.01em} .bookshelf .bkmeta{font-size:12.5px;color:var(--muted)} .bookshelf .bkmeta b{color:var(--ok);font-weight:600} .bookshelf[open]{border-color:var(--border-strong)} .bookshelf > :not(summary){margin-left:20px;margin-right:20px} .bookshelf > :last-child{margin-bottom:18px} /* ---- unit: try one now ---- */ .tq{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:18px 20px} .tq-blurb{margin:0 0 12px;line-height:1.6} .tq-q{font-size:16px;line-height:1.55;font-weight:500;margin-bottom:14px} .tq-opts{display:flex;flex-wrap:wrap;gap:8px} .tq-o{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm); padding:11px 16px;font-size:15px;font-family:var(--sans);color:var(--text);cursor:pointer; min-width:52px} .tq-o:hover:not(:disabled){border-color:var(--text)} .tq-o:disabled{cursor:default} .tq-o.right{border-color:var(--ok);background:var(--ok-bg);font-weight:600} .tq-o.wrong{border-color:var(--bad);background:var(--bad-bg)} .tq-fb{margin-top:14px;font-size:14.5px;line-height:1.6;padding:12px 14px; border-radius:var(--r-sm);background:var(--bg-2);border-left:3px solid var(--line)} .tq-fb.ok{border-left-color:var(--ok)} .tq-fb.no{border-left-color:var(--bad)} .tq-fb div{margin-top:5px;color:var(--muted)} .tq-trap{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:10.5px; color:var(--bad);border:1px solid currentColor;border-radius:999px;padding:2px 8px} /* ---- homework: the "stuck?" box ---- */ .hwhelp{border:1px solid var(--line);border-radius:var(--r);background:var(--surface); margin:0 0 18px;overflow:hidden} .hwhelp > summary{list-style:none;cursor:pointer;padding:15px 18px;display:grid;gap:3px; position:relative;padding-right:74px} .hwhelp > summary::-webkit-details-marker{display:none} .hwhelp > summary::after{content:"open";position:absolute;right:18px;top:17px; font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ac)} .hwhelp[open] > summary::after{content:"close"} .hwhelp > summary:hover{background:var(--bg-2)} .hwhelp > summary b{font-size:15.5px} .hwhelp > summary span{font-size:13px;color:var(--muted);line-height:1.5} .hh-body{padding:0 18px 18px;border-top:1px solid var(--border-soft)} .hh-prompt{background:var(--bg-2);border-left:3px solid var(--line);border-radius:0 var(--r-sm) var(--r-sm) 0; padding:13px 16px;margin:16px 0;font-size:14.5px;line-height:1.6} .hh-prompt .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);margin-bottom:7px} .hh-prompt em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:9px} .hh-part{border-top:1px solid var(--border-soft);padding:15px 0} .hh-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--ac)} .hh-txt{font-family:var(--serif);font-size:16.5px;line-height:1.6;margin:8px 0 9px} .hh-why{font-size:13.5px;line-height:1.65;color:var(--muted)} .hh-why b{color:var(--text);font-weight:600} .hh-sec{margin-top:20px} .hh-sec h4{font-size:14px;font-weight:600;margin:0 0 9px} .hh-row{display:grid;gap:3px;padding:11px 14px;border:1px solid var(--line); border-radius:var(--r-sm);margin-bottom:7px;text-decoration:none;color:var(--text)} .hh-row:hover{border-color:var(--text)} .hh-if{font-size:14px;line-height:1.45} .hh-go{font-family:var(--mono);font-size:11.5px;color:var(--ac-text)} .hh-study{margin:0 0 0 18px} .hh-study li{font-size:14px;line-height:1.7;margin-bottom:4px} /* ---- homework marking: a report, not a text dump ---- */ .mk-head{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:12px} .mk-band{font-family:var(--serif);font-weight:800;font-size:22px;letter-spacing:-.02em; border:2px solid currentColor;border-radius:999px;padding:5px 16px} .mk-band.good{color:var(--ok)} .mk-band.ok{color:var(--ac)} .mk-band.warn{color:var(--warn)} .mk-band.bad{color:var(--bad)} .mk-scope{font-size:13px;color:var(--muted);line-height:1.5;flex:1;min-width:190px} .mk-verdict{font-size:16px;line-height:1.55;font-weight:500;margin:0 0 20px; padding-left:14px;border-left:3px solid var(--ac)} .mk-crit{border:1px solid var(--line);border-radius:var(--r);background:var(--surface); padding:16px 18px;margin-bottom:12px} .mk-ch{display:flex;align-items:center;gap:11px;margin-bottom:8px} .mk-cn{font-weight:600;font-size:15.5px;flex:1} .mk-cb{font-family:var(--mono);font-size:13px;font-weight:600;border:1px solid currentColor; border-radius:999px;padding:2px 10px} .mk-cb.good{color:var(--ok)} .mk-cb.ok{color:var(--ac)} .mk-cb.warn{color:var(--warn)} .mk-cb.bad{color:var(--bad)} .mk-desc{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 14px;font-style:italic} .mk-block{margin-bottom:14px} .mk-block h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase; margin:0 0 8px} .mk-block.ok h4{color:var(--ok)} .mk-block.no h4{color:var(--bad)} .mk-block ul{margin:0 0 0 18px} .mk-block li{font-size:14px;line-height:1.6;margin-bottom:5px} .mk-cap{border-left:2px solid var(--bad);padding:2px 0 2px 13px;margin-bottom:12px} .mk-lab{font-family:var(--mono);font-size:10.5px;color:var(--bad);letter-spacing:.06em} .mk-quote{font-family:var(--serif);font-size:15.5px;line-height:1.5;margin:5px 0 6px} .mk-why{font-size:13.5px;line-height:1.6;color:var(--muted)} .mk-one{background:var(--ac-bg);border-radius:var(--r-sm);padding:12px 15px;font-size:14.5px; line-height:1.6} .mk-one b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--ac);margin-bottom:5px} .mk-rules{border:1px solid var(--warn);border-radius:var(--r);background:var(--warn-bg); padding:15px 18px;margin-bottom:12px} .mk-rules h4{font-size:14px;margin:0 0 11px} .mk-rule{display:grid;grid-template-columns:26px 1fr;gap:11px;padding:8px 0; border-top:1px solid var(--border-soft)} .mk-rule:first-of-type{border-top:none} .mk-rule .mk-rn{font-family:var(--mono);font-size:12px;color:var(--warn)} .mk-rule b{font-size:14.5px;line-height:1.45} .mk-rule span{display:block;font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:3px} .mk-next{border:1px solid var(--line);border-radius:var(--r);padding:15px 18px;margin-bottom:12px; background:var(--surface)} .mk-next h4{font-size:14px;margin:0 0 9px} .mk-next ol{margin:0 0 0 18px} .mk-next li{font-size:14.5px;line-height:1.7;margin-bottom:5px} .mk-full{margin-top:8px} .mk-full summary{font-family:var(--mono);font-size:11px;color:var(--muted);cursor:pointer} .mk-raw{white-space:pre-wrap;font-size:13.5px;line-height:1.65;color:var(--muted); margin-top:10px;padding:13px 15px;background:var(--bg-2);border-radius:var(--r-sm)} /* what was built from a class, shown on its row in the list */ .rw .made{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .rw .made .mk{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase; border:1px solid var(--line);border-radius:999px;padding:4px 10px;text-decoration:none; color:var(--ac-text)} .rw .made .mk:hover{border-color:var(--ac)} .rw .made .mk.todo{color:var(--warn);border-color:var(--warn)} .rw .made .mk.done{color:var(--ok);border-color:var(--ok)} .rw .made .mk.quiet{color:var(--muted)} /* ---- unit blocks: reading width inside a full-row block ---- .unitgrid is auto-fit minmax(300px), which is right for the short status cards and wrong for prose: an 800-word deep-dive section was rendering in a 368px column. Blocks that carry content span the row (.wide) and cap their own text. */ .unitgrid > .blk.wide > *{max-width:68ch} .unitgrid > .blk.wide > h3{max-width:none} .unitgrid > .blk.wide .mdb{max-width:68ch} .unitgrid > .blk.wide .mdb p, .unitgrid > .blk.wide .mdb li{font-size:15.5px;line-height:1.75} .unitgrid > .blk.wide .mdb h2, .unitgrid > .blk.wide .mdb h3{font-family:var(--serif);font-weight:700;font-size:18px; line-height:1.3;margin:22px 0 8px} .unitgrid > .blk.wide .mdb ul, .unitgrid > .blk.wide .mdb ol{margin:10px 0 10px 20px} .unitgrid > .blk.wide .mdb li{margin-bottom:7px} .unitgrid > .blk.wide .mdb > *:first-child{margin-top:0} .unitgrid > .blk.wide .mdb table{display:block;overflow-x:auto;max-width:100%} /* a long block folds; the summary says what opening it gets you */ .blkfold > summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:11.5px; letter-spacing:.05em;color:var(--ac-text);padding:9px 0 3px;position:relative; padding-right:56px;display:block} .blkfold > summary::-webkit-details-marker{display:none} .blkfold > summary::after{content:"open";position:absolute;right:0;top:9px; font-size:10.5px;letter-spacing:.08em;color:var(--muted)} .blkfold[open] > summary::after{content:"close"} .blkfold > summary:hover{color:var(--text)} .blk.folded > .blkfold > *:not(summary){margin-top:12px} /* Phone: the menu used to fill half the first screen (three rows of tabs, then three to five rows of pills). Six tabs sit in two tight rows of three, and the pills become one row that scrolls sideways. !important because the tab and pill sizes are inline styles written by app.js. */ @media(max-width:560px){ /* 2026-10-24 (E009): one row of tabs that scrolls sideways, the lit tab centred by app.js; the pills stay out of the way until the lit tab is tapped again, so the first screen is header, one row of tabs, and the page. */ .shb-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; gap:4px;padding:5px;margin-bottom:10px;position:static;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)} .shb-tabs::-webkit-scrollbar{display:none} .shb-tabs a{flex:0 0 auto!important;width:auto!important;min-width:0!important;padding:8px 13px!important;font-size:14px!important;white-space:nowrap} /* the header stays one row: smaller chip, the date detail dropped */ .shb-head{flex-wrap:nowrap;gap:8px} .shb-brand .nm{font-size:17px} .shb-days{font-size:12px;padding:6px 10px;white-space:nowrap} .shb-days b{font-size:14px} .shb-days .dt{display:none} .shb-tabs.has-pills a[aria-current]::after{content:" \25BE";font-size:11px;opacity:.8} .shb-tabs.has-pills.open a[aria-current]::after{content:" \25B4"} .shb-pills{display:none;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; margin:0 0 14px;padding:0 0 2px} .shb-pills.open{display:flex} .shb-pills::-webkit-scrollbar{display:none} .shb-pills a{flex:0 0 auto;padding:7px 12px!important} .shb-resume{margin-top:0} /* one floating button instead of two: it opens a two-choice sheet (Ask / Note) */ body .chat-fab,body .note-fab{display:none!important} /* page-local copies of these rules exist; the phone wins */ .shb-fab{position:fixed;bottom:16px;right:16px;z-index:72;width:54px;height:54px;border-radius:50%;background:var(--ac);color:#fff;border:none; cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.4);font-size:22px;display:flex;align-items:center;justify-content:center} .shb-fab .badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:100px;background:var(--warn);color:#241a00; font-family:var(--mono);font-size:10.5px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 5px} .shb-fabmenu{position:fixed;bottom:78px;right:16px;z-index:72;display:none;flex-direction:column;gap:8px} .shb-fabmenu.open{display:flex} .shb-fabmenu button{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:10px 16px;font:inherit;font-size:14.5px; font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer;display:flex;gap:8px;align-items:center} .chat-panel.open ~ .shb-fab,.note-panel.open ~ .shb-fab{display:none} } /* Site search: the button in the header and the panel it opens. */ .shb-find{margin-left:auto;display:flex;align-items:center;gap:7px;background:var(--surface);color:var(--text); border:1px solid var(--border);border-radius:999px;padding:7px 14px;font:600 14px var(--sans);cursor:pointer} .shb-find:hover{border-color:var(--border-strong)} .shb-find span[aria-hidden]{font-size:17px;line-height:1} .shb-head .shb-find + .shb-theme{margin-left:0} .shb-search{position:fixed;inset:0;z-index:60;background:rgba(30,22,14,.45);display:flex;justify-content:center; align-items:flex-start;padding:9vh 16px 16px} .shb-search[hidden]{display:none} .shb-search .in{width:min(640px,100%);background:var(--surface);border:1px solid var(--border);border-radius:18px; padding:14px;box-shadow:0 24px 60px -20px rgba(30,20,10,.6);max-height:80vh;display:flex;flex-direction:column} .shb-search input{font:500 18px var(--sans);padding:12px 14px;border:1px solid var(--border-strong);border-radius:12px; background:var(--bg);color:var(--text);width:100%} .shb-search .res{overflow:auto;margin-top:10px} .shb-search .res a{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:10px 12px;border-radius:10px; text-decoration:none;color:var(--text);align-items:baseline} .shb-search .res a:hover,.shb-search .res a:first-child{background:var(--surface-2)} .shb-search .g{font:600 12px var(--sans);color:var(--muted);background:var(--bg-2);border-radius:999px;padding:2px 9px; white-space:nowrap} .shb-search .t{font:600 16px var(--sans)} .shb-search .d{grid-column:2;font-size:13.5px;color:var(--muted);line-height:1.4} .shb-search .none{color:var(--muted);font-size:15px;padding:12px} .shb-search .hint{font-size:12.5px;color:var(--muted);padding:8px 12px 0} @media(max-width:560px){ .shb-find .lb{display:none} .shb-find{padding:8px 11px} .shb-search{padding-top:16px} } /* The slim bar on reading pages that have no menu. */ .shb-slim{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--bg,#F7F2E8); border-bottom:1px solid var(--border,#E6DCC8);position:sticky;top:0;z-index:20;font-family:var(--sans,system-ui,sans-serif)} .shb-slim .shb-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text,#2a2018)} .shb-slim .shb-brand .nm{font-weight:800;font-size:17px} .shb-slim .back{font-size:15px;font-weight:600;text-decoration:none;color:var(--text,#2a2018); border:1px solid var(--border,#E6DCC8);border-radius:999px;padding:6px 13px;background:var(--surface,#fff)} .shb-slim .shb-find{margin-left:auto} @media(max-width:560px){ .shb-slim{gap:8px;padding:8px 12px} .shb-slim .shb-brand .nm{font-size:15px} .shb-slim .back{font-size:14px;padding:5px 10px} } /* a soft fade where the phone pill row continues off-screen */ @media(max-width:560px){ .shb-pills.more{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)} } /* E011 (2026-10-24): hub subtitles are one factual line; the "source of truth" paragraph is folded under "About this list". On a phone no content text is under 14 px; small capitals stay for labels only (eyebrows, chips, mono meta). */ .lede-note{margin:8px 0 14px;max-width:62ch} .lede-note>summary{font-size:13.5px;color:var(--muted);cursor:pointer;list-style:none;display:inline-block;padding:4px 0} .lede-note>summary::-webkit-details-marker{display:none} .lede-note>summary::after{content:none!important} /* the blkfold "open/close" word is not wanted here */ .lede-note>summary::before{content:"+ ";font-family:var(--mono)} .lede-note[open]>summary::before{content:"\2013 "} .lede-note>p{font-size:14px;color:var(--muted);line-height:1.55;margin:4px 0 0} @media(max-width:560px){ .sub,.bl,.m,.task .m,.rw .bl,.rw .mt,#tdTasks .mt,.prog-l,.card .meta,.card .row,.note-item .body,.lede-note>summary,.lede-note>p, .tgt-rows,.tgt-prog,.legend a,.res li,.shb-resume,td,.rowhead span,.task{font-size:14px!important} .card .row .rv{font-size:14px} /* content classes measured under 14 px on Review, the hubs, Practice and Lectures */ .bk-s,.bk-w,.def,.def span,span.pending,.srcrow button,span.from a,.umeta,.rn,.mk-hint,label.btn.sm,.bk-h{font-size:14px!important} }