/* Legal Dictum app shell — STEP-04 (aesthetic pass: the website's gold/cream identity wraps the app; subject palettes live inside the Study catalog). One CSS file, no frameworks, no CDNs. */ @font-face{font-family:'Fraunces';src:url('fonts/fraunces-normal.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap;} @font-face{font-family:'Fraunces';src:url('fonts/fraunces-italic.woff2') format('woff2'); font-weight:100 900;font-style:italic;font-display:swap;} @font-face{font-family:'LnumDigits';src:local('Times New Roman'),local('Tinos'),local('Liberation Serif');unicode-range:U+0030-0039;} :root{ /* brand (from the live website index page) */ --gold:#b07d2a;--gold-light:#d4a843;--gold-pale:#f5e6c0; --bg:#fffdf5;--surface:#fff9ec;--border:#e8d5a0;--border2:#d4b96a; --brand-ink:#1c1a14;--brand-ink2:#3d3826;--muted:#8a7d5a; /* subject palette (JS re-themes these; defaults = tort teal) */ --paper:#f2f8f8;--paper-2:#deeeed;--paper-3:#cae0e0;--rose:#a8d0d0;--rose-pale:#e8f5f5; --ink:#0e2e30;--ink-soft:#1a4a4e;--ink-mid:#386870;--ink-mute:#6a9298;--accent:#2f8a90;--accent-dk:#246b70; --serif:'LnumDigits',Georgia,'Times New Roman',serif;--display:'LnumDigits',Georgia,'Times New Roman',serif; --wordmark:'Fraunces',Georgia,serif;--mono:'Menlo','Courier New',ui-monospace,monospace; --r:10px;--r-lg:18px; } html.night{ --gold:#d4a843;--gold-light:#e5c26a;--gold-pale:#3a2f18; --bg:#141210;--surface:#1b1814;--border:#3a3222;--border2:#57482a; --brand-ink:#efe9dc;--brand-ink2:#d8cfba;--muted:#a2946f; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} [hidden]{display:none!important;} html{font-size:17px;} body{background:var(--bg); background-image:radial-gradient(ellipse at 10% 0%,rgba(212,168,67,.10) 0%,transparent 50%), radial-gradient(ellipse at 90% 100%,rgba(176,125,42,.07) 0%,transparent 50%); font-family:var(--serif);color:var(--brand-ink);min-height:100vh;} /* the app column is EXACTLY one viewport tall so .scroll really is the scroller (operator, 2026-07-17): before this the body scrolled instead, which silently broke every position:sticky bar inside .scroll and every #scroll.scrollTo() */ .app{position:relative;max-width:480px;margin:0 auto;height:100vh;height:100dvh;background:transparent; display:flex;flex-direction:column;} @media(min-width:520px) and (max-width:899px){.app{min-height:100vh;margin:0 auto;}} /* ── top bar (website header language) ─────────────────────────── */ .top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97); backdrop-filter:blur(12px);border-bottom:1px solid var(--border);} html.night .top{background:color-mix(in srgb,var(--bg) 96%,transparent);} .top-in{display:flex;align-items:center;gap:10px;padding:12px 16px;} .ld-logo{display:inline-flex;flex-direction:column;align-items:stretch;gap:3px;text-decoration:none;flex-shrink:0;} .ld-logo-row{display:flex;align-items:center;gap:10px;} .ld-logo-img{height:38px;width:auto;display:block;} .ld-logo-text{font-family:var(--wordmark);font-size:1.12rem;font-weight:700;color:var(--brand-ink);white-space:nowrap;} .ld-logo-text em{font-style:italic;font-weight:400;color:var(--gold);} /* tagline: the website's mono-eyebrow language, centred under the wordmark */ /* tagline: JS (fitTagline) computes uniform letter tracking so the line ends flush with the logo row edge-to-edge */ .ld-tagline{display:block;white-space:nowrap;font-family:var(--mono);font-style:normal; font-size:.56rem;text-transform:uppercase;color:var(--gold);opacity:.85;} /* padding-right so the name never kisses the screen edge (Kshitiz report, 2026-07-17) */ .whoami{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;background:none;border:none;cursor:pointer;padding-right:6px;} .who-name{font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--brand-ink);} .who-tier{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);} /* tier colours (operator, 2026-07-11): Scholar purple, Student plan sky blue */ .who-tier.t-scholar,.ttl.t-scholar{color:#6d4bb3;} .who-tier.t-student,.ttl.t-student{color:#2f7fb5;} html.tier-scholar .htab.active{color:#6d4bb3;border-bottom-color:#6d4bb3;} html.tier-student .htab.active{color:#2f7fb5;border-bottom-color:#2f7fb5;} .top2{display:flex;align-items:center;justify-content:space-between;padding:7px 16px 9px;border-top:1px solid var(--border);} .hnav{display:flex;gap:16px;margin:0 auto;} .htab{font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--muted); background:none;border:none;cursor:pointer;padding:4px 2px;border-bottom:2px solid transparent;white-space:nowrap;} .htab.active{color:var(--gold);border-bottom-color:var(--gold);} @media(max-width:430px){.htab{font-size:.78rem;}.hnav{gap:10px;}} .psel{appearance:none;font-family:var(--display);font-size:.9rem;font-weight:600;color:var(--gold); background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);cursor:pointer; padding:9px 30px 9px 12px;width:100%; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:right 13px center,right 8px center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;} .portal-card{--card-lip:linear-gradient(90deg,var(--gold),var(--gold-light));} .spacer{flex:1;} .credits{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.72rem;color:var(--muted);} .credits .dot{width:7px;height:7px;border-radius:50%;background:#16a34a;} .credits b{color:var(--brand-ink);} .iconbtn{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--border);border-radius:50%;background:var(--surface);cursor:pointer;color:var(--muted);transition:.15s;} .iconbtn:hover{border-color:var(--gold);color:var(--gold);} .iconbtn svg{width:16px;height:16px;} .avatarbtn{background:var(--gold);color:#fff;font-family:var(--display);font-weight:600;border:none;} .signin-mini{font-family:var(--display);font-weight:700;font-size:.8rem;color:var(--gold); border:1px solid var(--border2);background:color-mix(in srgb,var(--gold) 8%,transparent); border-radius:var(--r);padding:6px 15px;cursor:pointer;transition:.15s;} .signin-mini:hover{background:var(--gold-pale);} /* content area */ .scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:24px;} /* a shown panel is a full-height column so the copyright footer sits at the BOTTOM of the screen (above any banner / the tab bar) even when the tab's content is short (operator, 2026-07-19) */ .panel{display:none;}.panel.show{display:flex;flex-direction:column;min-height:calc(100% + 1px);animation:fadeUp .35s ease;} .panel .foot{margin-top:auto;} @keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}} .pad{padding:18px 16px 8px;} .h-title{font-family:var(--display);font-size:1.6rem;font-weight:700;letter-spacing:-.01em;} .h-sub{color:var(--muted);font-size:.9rem;margin-top:4px;} /* ── hero (website home language) ──────────────────────────────── */ .hero{text-align:center;padding:44px 24px 30px;position:relative;} .hero-eyebrow{font-family:var(--mono);font-size:.6rem;letter-spacing:4px;text-transform:uppercase; color:var(--gold);margin-bottom:14px;opacity:.85;} .hero-logo{font-family:var(--wordmark);font-size:clamp(2.5rem,9vw,3.6rem);font-weight:700;line-height:1.05;letter-spacing:-.5px;} .hero-logo .word-legal{color:var(--brand-ink);display:block;} .hero-logo .word-dictum{color:var(--gold);display:block;font-style:italic;} .hero-tagline{font-size:.98rem;color:var(--muted);font-style:italic;margin-top:10px;} /* section dividers */ .divider{max-width:900px;margin:26px 0 18px;padding:0 16px;display:flex;align-items:center;gap:16px;} .divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);} .divider-label{font-family:var(--mono);font-size:.6rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold);white-space:nowrap;} /* ── study catalog (subject-tinted inside the cream frame) ─────── */ .subjects{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;padding:6px 16px 0;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);} .subjects::-webkit-scrollbar{display:none;} .subject{flex:0 0 auto;cursor:pointer;padding:12px 2px;border-bottom:2.5px solid transparent;display:flex;align-items:baseline;gap:7px;} .subject .nm{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--muted);} .subject .ct{font-family:var(--mono);font-size:.6rem;color:var(--muted);opacity:.7;} .subject.active{border-bottom-color:var(--sub-accent);} .subject.active .nm{color:var(--sub-accent);} .levels{padding:16px 16px 8px;} .level{margin-bottom:30px;} .level-head{display:flex;align-items:baseline;gap:11px;margin-bottom:14px;} .level-kicker{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);} .level-name{font-family:var(--display);font-style:italic;font-size:1.28rem;font-weight:600;color:var(--brand-ink);} .level-rule{flex:1;height:1px;background:var(--border);align-self:center;} /* collapsed foundation levels (operator, 2026-07-19): folded but present — the head stays, tiles hide; the note invites the tap */ .level-foldhead{cursor:pointer;-webkit-user-select:none;user-select:none;} .level-foldnote{font-family:var(--mono);font-size:.62rem;letter-spacing:.05em; color:var(--muted);white-space:nowrap;} .level-foldnote b{color:var(--accent);font-weight:700;text-transform:uppercase;} .level.folded .tgrid{display:none;} .level.folded .level-head{margin-bottom:6px;opacity:.75;} .tgrid{display:block;} .topic{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); padding:16px 18px;margin-bottom:12px;cursor:pointer;transition:all .22s;position:relative;overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.04);animation:fadeUp .45s ease both;} .topic::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent); border-radius:var(--r-lg) var(--r-lg) 0 0;opacity:.85;} .topic:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.09);border-color:var(--accent);} .topic.open{border-color:var(--accent);transform:none;} .topic .top-row{display:flex;justify-content:flex-end;} .topic .mark{font-family:var(--mono);font-size:.85rem;color:var(--muted);transition:.2s;} .topic.open .mark{color:var(--accent);transform:rotate(45deg);} .topic .ttl{font-family:var(--wordmark);font-size:1.06rem;font-weight:700;line-height:1.25;margin:2px 0 6px;color:var(--brand-ink);} .topic .blurb{font-size:.88rem;color:var(--brand-ink2);line-height:1.6;} .topic .sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;color:var(--muted);margin-top:9px;} .inner{display:none;}.inner.show{display:block;} .inner-in{border-left:2px solid var(--accent);padding:2px 0 4px 16px;margin:2px 0 14px;} .inner-for{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;} .tile{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:.15s;} .tile:hover{border-color:var(--accent);transform:translateX(3px);} .tile .ic{font-family:var(--mono);font-size:.54rem;letter-spacing:.07em;text-transform:uppercase;padding:2px 6px;border-radius:4px;border:1px solid currentColor;flex-shrink:0;} .tile.part .ic{color:var(--accent-dk);} .tile.test .ic{color:#9a5a2a;} html.night .tile.part .ic{color:var(--accent);} html.night .tile.test .ic{color:#d9a06a;} .tile .tlabel{font-family:var(--display);font-size:.96rem;font-weight:600;flex:1;color:var(--brand-ink);} .tile .cost{font-family:var(--mono);font-size:.6rem;color:var(--muted);} /* the explicit "Updated" word (operator, 2026-07-16) — the tinge alone was ambiguous: blue also means unread, and colour-only states are invisible to some eyes */ .tile .cost.upd{color:#4a6f9e;border:1px solid rgba(109,147,196,.45);border-radius:999px; padding:2px 8px;margin-right:6px;flex-shrink:0;} .tile .cost.read{color:var(--accent-dk);} .tile .cost.prog{color:var(--gold);} /* subtle state tints (operator, 2026-07-10): unread = quiet blue, in-progress = green edge, finished sits quieter on gold-pale */ .tile.done{background:var(--gold-pale);border-color:var(--border2);} .tile.part-read{border-left:3px solid #5f8a6b;background:rgba(95,138,107,.07);} .tile.fresh{border-left:3px solid #6d93c4;background:rgba(109,147,196,.07);} html.night .tile.done{background:var(--gold-pale);} html.night .tile.part-read{background:rgba(95,138,107,.14);} html.night .tile.fresh{background:rgba(109,147,196,.14);} .tile .cost.score{color:var(--accent-dk);border:1px solid var(--border2);border-radius:999px; padding:3px 9px;background:var(--surface);cursor:pointer;white-space:nowrap;} .tile .cost.score:hover{background:var(--gold-pale);} html.night .tile .cost.read,html.night .tile .cost.score{color:var(--accent);} /* header credit pill (aspirant only) */ .creditpill{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--gold); border:1px solid var(--border2);border-radius:999px;padding:4px 10px;background:var(--surface); white-space:nowrap;} /* My Space attempts */ .ms-att{cursor:pointer;} .ms-att:hover .li-t{color:var(--gold);} /* logged-out landing (old-site index language) */ body.loggedout .authonly{display:none!important;} body:not(.loggedout) .anononly{display:none!important;} .about-card{border-left:4px solid var(--gold);} .about-card .body{font-size:.95rem;line-height:1.8;color:var(--brand-ink2);} .goldb{color:var(--gold);font-weight:700;} /* the Portals shelf, redesigned in the house language (operator, 2026-07-19): squircle cards, gold top band, iconed like the dashboard tiles */ .portal-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 16px;} @media(min-width:900px){.portal-tiles{max-width:860px;margin:0 auto;grid-template-columns:1fr 1fr 1fr;}} .ptile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px; padding:22px 18px 16px;border-radius:18px;border:1px solid var(--border);cursor:pointer; background:linear-gradient(165deg,var(--surface),var(--bg));text-align:left; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden;} .ptile::before{content:'';position:absolute;top:0;left:0;right:0;height:4px; background:linear-gradient(90deg,var(--gold),var(--gold-light));} .ptile:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(28,26,20,.12);border-color:var(--gold);} .pt-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center; background:var(--gold-pale);color:var(--gold);} .pt-ico .ldi{width:21px;height:21px;} .pt-name{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--brand-ink);} .pt-desc{font-family:var(--serif);font-size:.82rem;line-height:1.55;color:var(--muted);} .pt-go{margin-top:auto;padding-top:6px;font-family:var(--display);font-style:italic; font-size:.8rem;font-weight:600;color:var(--gold);} /* STEP-10: skeleton + offline */ .topic.skel{pointer-events:none;} .sk-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface),var(--gold-pale),var(--surface)); background-size:200% 100%;animation:sk 1.2s linear infinite;margin-bottom:9px;} .sk-line.w60{width:60%;} .sk-line.w90{width:90%;} .sk-line.w40{width:40%;} @keyframes sk{from{background-position:200% 0;}to{background-position:-200% 0;}} #offbar{position:fixed;top:0;left:0;right:0;z-index:80;text-align:center;padding:7px 12px; background:#92400e;color:#fff;font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;} /* STEP-09 dashboard */ .searchwrap{position:relative;} .search{width:calc(100% - 32px);font-family:var(--serif);} .search:focus{outline:none;border-color:var(--gold);color:var(--brand-ink);} #search-results{position:absolute;left:16px;right:16px;top:100%;z-index:40;background:var(--bg); border:1px solid var(--border2);border-radius:12px;box-shadow:0 10px 30px rgba(28,26,20,.14); overflow:hidden;max-height:52vh;overflow-y:auto;} .sr{display:flex;flex-direction:column;gap:2px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);} .sr:last-child{border-bottom:none;} .sr:hover{background:var(--gold-pale);} .sr-t{font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--brand-ink);} .sr-s{font-family:var(--mono);font-size:.6rem;letter-spacing:.05em;color:var(--muted);text-transform:uppercase;} .dash-streak{display:flex;justify-content:space-between;align-items:stretch;gap:6px;margin:0 16px 14px;padding:14px 12px; background:var(--surface);border:1px solid var(--border2);border-radius:14px;} .dash-streak:empty{display:none;} .continue-card{cursor:default;} /* case/concept of the day: squircle tiles, content revealed on tap */ .day-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 16px 14px;} .day-tile{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 20px; border-radius:28px;border:1px solid var(--border2);cursor:pointer;transition:.15s;text-align:left; background:linear-gradient(135deg,var(--surface),var(--gold-pale));} .day-tile:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(176,125,42,.18);border-color:var(--gold);} .dt-ico{font-size:1.6rem;line-height:1;} .dt-name{font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.3;color:var(--brand-ink);} /* this week's test: the old dashboard's featured-test soul */ .test-day{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border:1px solid #fcd34d;position:relative;overflow:hidden;} .test-day::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top right,rgba(255,255,255,.5) 0%,transparent 60%);pointer-events:none;} html.night .test-day{background:linear-gradient(135deg,#3a2f18,#57482a);border-color:#57482a;} .ft-pill{display:inline-flex;align-items:center;padding:3px 11px;border-radius:20px;background:#92400e;color:#fff; font-family:var(--mono);font-size:.55rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;} .test-day .ttl{color:#451a03;} html.night .test-day .ttl{color:#fde68a;} /* day page (case/concept full view) */ .dp-sheet{max-width:640px;} .dp-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;} .dp-date{font-family:var(--display);font-style:italic;font-weight:700;font-size:1.02rem;color:var(--brand-ink);} .dp-kicker{font-family:var(--mono);font-size:.6rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-top:3px;} .dp-archive{flex-shrink:0;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase; color:var(--gold);background:var(--surface);border:1px solid var(--border2);border-radius:999px;padding:7px 13px;cursor:pointer;} .dp-archive:hover{background:var(--gold-pale);} /* day page: a full page, not a drawer */ #daypage{position:fixed;inset:0;z-index:70;} .dp-page{position:relative;height:100%;display:flex;flex-direction:column;background:var(--bg); overflow-x:hidden; background-image:radial-gradient(ellipse at 10% 0%,rgba(212,168,67,.10) 0%,transparent 50%);} .dp-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,.97); border-bottom:1px solid var(--border);backdrop-filter:blur(12px);} html.night .dp-bar{background:color-mix(in srgb,var(--bg) 96%,transparent);} .dp-back{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface); color:var(--brand-ink2);font-size:1rem;cursor:pointer;flex-shrink:0;} .dp-main{flex:1;overflow-y:auto;} .dp-content{max-width:640px;margin:0 auto;padding:28px 20px 60px;} .dp-side{position:absolute;top:0;right:0;bottom:0;width:250px;max-width:80%; background:var(--surface);border-left:1px solid var(--border2);box-shadow:-8px 0 24px rgba(28,26,20,.12); transform:translateX(105%);transition:transform .28s ease;display:flex;flex-direction:column; gap:6px;padding:18px 14px;overflow-y:auto;} .dp-side.open{transform:none;} .dp-side-head{font-family:var(--mono);font-size:.6rem;letter-spacing:3px;text-transform:uppercase; color:var(--gold);margin-bottom:6px;} .dp-datebtn{font-family:var(--serif);font-size:.8rem;text-align:left;padding:9px 12px;border-radius:10px; cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--brand-ink2);} .dp-datebtn.cur{border-color:var(--gold);background:var(--gold-pale);color:var(--gold);font-weight:700;} .dp-lock{text-align:center;padding:26px 10px;font-family:var(--serif);color:var(--brand-ink2);} .dp-lock .lk{font-size:1.8rem;margin-bottom:10px;} .dp-lock p{margin:8px 0 14px;font-size:.9rem;line-height:1.6;} /* states of interest: type-in + removable tiles */ /* squircle boxes of EQUAL height, small Add (operator, 2026-07-19) */ .state-add{display:flex;gap:8px;margin-bottom:12px;align-items:stretch;} .state-input{flex:1;min-width:0;font-family:var(--serif);font-size:.9rem;color:var(--brand-ink); background:var(--surface);border:1px solid var(--border);border-radius:12px; height:44px;padding:0 16px;} .state-input:focus{outline:none;border-color:var(--gold);} #state-addbtn{flex-shrink:0;height:44px;padding:0 22px;border-radius:12px; font-size:.88rem;display:inline-flex;align-items:center;justify-content:center;} .state-chips{display:flex;flex-wrap:wrap;gap:8px;} .schip{position:relative;display:inline-flex;align-items:center;gap:6px; font-family:var(--display);font-size:.8rem;font-weight:600;padding:8px 26px 8px 14px; border-radius:12px;border:1px solid var(--gold);background:var(--gold-pale);color:var(--gold);} .schip .sx{position:absolute;top:-7px;right:-7px;width:19px;height:19px;border-radius:50%; border:1px solid var(--border2);background:var(--bg);color:var(--brand-ink2); font-size:.55rem;line-height:1;cursor:pointer;display:grid;place-items:center;} .schip .sx:hover{background:var(--gold);color:#fff;border-color:var(--gold);} .dp-title{font-family:var(--display);font-size:1.4rem;font-weight:700;color:var(--brand-ink);margin-bottom:10px;line-height:1.3;} .dp-body{font-family:var(--serif);font-size:1rem;line-height:1.75;color:var(--brand-ink2);} /* the global reset strips

margins; restore real paragraph breaks here. Justified with auto-hyphenation so narrow phone columns avoid word rivers. */ /* house rule (operator 2026-07-15): justified, and a word is NEVER split across lines — auto-hyphenation was breaking words mid-word on the day pages */ .dp-body p,.dp-body li{margin:0 0 1.1em;text-align:justify;text-justify:inter-word; hyphens:none;-webkit-hyphens:none;word-break:normal;overflow-wrap:anywhere;} .dp-body p:last-child{margin-bottom:0;} @media(min-width:900px){.searchwrap,#daily-cards,#quote-slot,.dash-streak{max-width:760px;margin-left:auto;margin-right:auto;}} /* Scholar pricing overlay */ #pricing,#confirming,#archive{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;} .pr-bg{position:absolute;inset:0;background:rgba(28,26,20,.55);} .pr-sheet{position:relative;width:100%;max-width:560px;max-height:88vh;overflow-y:auto; background:var(--bg);border:1px solid var(--border2);border-radius:18px 18px 0 0; padding:26px 22px calc(26px + env(safe-area-inset-bottom));} @media(min-width:900px){#pricing,#confirming,#archive{align-items:center;}.pr-sheet{border-radius:18px;}} .pr-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%; border:1px solid var(--border);background:var(--surface);color:var(--brand-ink2);cursor:pointer;} .pr-title{font-family:var(--wordmark);font-size:1.5rem;font-weight:700;color:var(--brand-ink);margin-bottom:8px;} .pr-title em{color:var(--gold);} .pr-sub{font-family:var(--serif);font-size:.95rem;line-height:1.6;color:var(--brand-ink2);margin-bottom:18px;} .pr-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;} .pr-plan{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 16px; border:1px solid var(--border2);border-radius:12px;background:var(--surface);cursor:pointer;transition:.15s;} .pr-plan:hover{border-color:var(--gold);background:var(--gold-pale);} .pr-months{font-family:var(--mono);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);} .pr-price{font-family:var(--display);font-size:1.35rem;font-weight:700;color:var(--brand-ink);} .pr-note{font-family:var(--serif);font-style:italic;font-size:.74rem;color:var(--gold);} .pr-week{font-family:var(--mono);font-size:.6rem;letter-spacing:.03em;color:var(--muted);} /* two ladders (operator, 2026-07-11): full Scholar standard, Student plan the concession */ .pr-ladder{margin-bottom:18px;} .pr-ladder-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;} .pr-rung-name{font-family:var(--wordmark);font-size:1.06rem;font-weight:700;color:var(--brand-ink);} .pr-ladder.pr-full .pr-rung-name{color:#6d4bb3;} .pr-ladder.pr-student .pr-rung-name{color:#2f7fb5;} .pr-rung-tag{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);} .pr-rung-note{font-family:var(--serif);font-size:.8rem;line-height:1.55;color:var(--brand-ink2);margin:-2px 0 10px;} .pr-ladder.pr-student .pr-plan:hover{border-color:#2f7fb5;background:color-mix(in srgb,#2f7fb5 8%,transparent);} /* plan comparison chart (operator, 2026-07-13) */ .pr-compare{margin-bottom:18px;} .pr-comp-title{font-family:var(--wordmark);font-size:1.06rem;font-weight:700;color:var(--brand-ink);margin-bottom:10px;} .pr-comp{width:100%;border-collapse:collapse;font-family:var(--serif);font-size:.78rem;line-height:1.4;} .pr-comp th,.pr-comp td{padding:8px 6px;border-bottom:1px solid var(--border);text-align:center;vertical-align:middle;} .pr-comp td:first-child{text-align:left;color:var(--brand-ink2);padding-left:0;} .pr-comp th{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:6px;} .pr-comp th span{display:block;font-size:.52rem;letter-spacing:.06em;margin-top:1px;} .pr-comp td:nth-child(2){color:var(--muted);} .pr-comp tr:last-child td{border-bottom:none;} /* ---------- the four-way compare (operator, 2026-07-15) ---------- Aspirant · Exam Hall Pass · Student plan · Scholar. It was ambiguous with three columns and a pass that opens only one part of the app; now each column is colour-keyed, the rows are banded by WHAT they are about (the library, the Exam Hall, everything else), and no cell says "yes" without saying how much. */ .pr-comp-note{font-family:var(--serif);font-size:.78rem;line-height:1.6;color:var(--brand-ink2); margin:0 0 12px;} .pr-comp-note b{color:var(--brand-ink);font-weight:700;} .pr-comp4{font-size:.72rem;} .pr-comp4 th,.pr-comp4 td{padding:8px 4px;} .pr-comp4 td:first-child{padding-right:8px;} .pr-comp4 th:nth-child(3){color:var(--gold);} /* Exam Hall Pass */ .pr-comp4 th:nth-child(4){color:#2f7fb5;} /* Student plan */ .pr-comp4 th:nth-child(5){color:#6d4bb3;} /* Scholar */ /* the band that says which part of the app the next rows are about */ .pr-comp-band td{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);background:var(--gold-pale); text-align:left;padding:6px 8px !important;border-bottom:1px solid var(--border);} .pr-comp4 tbody tr:not(.pr-comp-band) td:not(:first-child){font-family:var(--mono);font-size:.6rem;line-height:1.35;} .pr-c-no{color:#a34a4a;} /* not available on this plan */ .pr-c-lim{color:var(--muted);} /* available, but on the daily allowance */ .pr-comp-foot{font-family:var(--serif);font-size:.72rem;line-height:1.6;color:var(--muted); margin:10px 0 0;} .pr-comp-foot b{color:var(--brand-ink2);} /* the unused money being carried into an upgrade */ .pr-credit{font-family:var(--serif);font-size:.82rem;line-height:1.65;color:var(--brand-ink2); background:var(--gold-pale);border:1px solid var(--border2);border-radius:var(--r); padding:10px 12px;margin:0 0 14px;} .pr-credit b{color:var(--brand-ink);} .pr-price s{color:var(--muted);font-weight:400;margin-right:5px;text-decoration-thickness:1px;} .pr-fine{font-family:var(--serif);font-size:.78rem;line-height:1.55;color:var(--muted);} /* ── the tabbed pricing sheet (operator, 2026-07-19; structure from his PS5 screenshots, house aesthetics): tier tabs · benefits with greyed misses · duration radio-cards with %-off + Convert dual price · one CTA · compare ── */ .pr-tabs{display:flex;gap:6px;background:var(--bg);border:1px solid var(--border); border-radius:999px;padding:5px;margin-bottom:16px;} .pr-tab{flex:1;border:none;background:none;font-family:var(--wordmark);font-weight:700; font-size:.8rem;color:var(--muted);padding:9px 6px;border-radius:999px;cursor:pointer; white-space:nowrap;transition:all .18s;} .pr-tab.on{background:var(--gold-pale);color:var(--brand-ink);box-shadow:0 1px 4px rgba(28,26,20,.12);} .pr-rn-scholar{color:#6d4bb3;} .pr-rn-student{color:#2f7fb5;} .pr-rn-hall{color:var(--gold);} .pr-benefits{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin:4px 0 14px;} .pr-ben{display:flex;align-items:baseline;gap:8px;font-family:var(--serif);font-size:.82rem; line-height:1.45;color:var(--brand-ink2);} .pr-ben i{font-style:normal;font-weight:700;color:var(--gold);flex-shrink:0;} .pr-ben.off{color:var(--muted);opacity:.55;} .pr-ben.off i{color:var(--muted);} .pr-cards{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;} .pr-card{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; text-align:left;padding:13px 16px;background:var(--bg);border:1.5px solid var(--border); border-radius:var(--r-lg);cursor:pointer;transition:all .18s;} .pr-card.on{border-color:var(--gold);background:var(--gold-pale);} .pr-card .pr-c-main{display:flex;flex-direction:column;gap:2px;} .pr-card .pr-price s{color:var(--muted);font-weight:400;font-size:.85em;margin-right:4px;} .pr-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--border2);flex-shrink:0; position:relative;transition:all .18s;} .pr-radio.on{border-color:var(--gold);} .pr-radio.on::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--gold);} .pr-cta{width:100%;padding:14px;border:none;border-radius:999px;cursor:pointer; background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#fff; font-family:var(--wordmark);font-weight:700;font-size:.95rem;margin-bottom:8px; box-shadow:0 2px 10px rgba(176,125,42,.35);} .pr-cta:active{transform:translateY(1px);} .pr-comp-toggle{width:100%;padding:11px;border:1.5px solid var(--border2);border-radius:999px; background:none;cursor:pointer;font-family:var(--wordmark);font-weight:700;font-size:.85rem; color:var(--brand-ink2);margin-bottom:14px;} .pr-comp-wrap{margin-bottom:6px;} .pr-links{color:var(--gold);} .pr-links a{color:var(--gold);text-decoration:underline;} .pr-confirm{text-align:center;padding:40px 24px;} /* running-attempt banner */ #runbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:10px; padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--brand-ink);color:#fff; font-family:var(--serif);font-size:.9rem;box-shadow:0 -4px 16px rgba(0,0,0,.25);} #runbar .rb-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #runbar .rb-txt em{color:var(--gold-light);font-style:italic;} #runbar .rb-btn{flex-shrink:0;border:none;border-radius:8px;padding:11px 18px;cursor:pointer; font-family:var(--display);font-weight:700;font-size:.9rem;min-height:44px; transition:transform .1s ease,filter .12s ease,background .12s ease;touch-action:manipulation;} #runbar .rb-btn:active{transform:scale(.94);filter:brightness(.85);} #runbar .rb-resume{background:var(--gold);color:#fff;} #runbar .rb-resume:active{background:var(--gold-light);} #runbar .rb-end{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);} /* resume-reading banner: the runbar's quieter sibling (paper, gold border) */ #readbar{position:fixed;left:0;right:0;bottom:0;z-index:59;display:flex;align-items:center;gap:10px; padding:9px 16px calc(9px + env(safe-area-inset-bottom));background:var(--surface); border-top:1.5px solid var(--gold);color:var(--brand-ink); font-family:var(--serif);font-size:.88rem;box-shadow:0 -4px 16px rgba(0,0,0,.12);} #readbar .rb-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #readbar .rb-txt em{color:var(--gold);font-style:italic;} #readbar .rb-btn{flex-shrink:0;border:none;border-radius:8px;padding:0 16px;cursor:pointer; font-family:var(--display);font-weight:700;font-size:.85rem;height:40px;align-self:center; display:inline-flex;align-items:center;justify-content:center;position:relative;top:-2px; transition:transform .1s ease,filter .12s ease;touch-action:manipulation;} #readbar .rb-btn:active{transform:scale(.94);filter:brightness(.9);} #readbar .rb-resume{background:var(--gold);color:#fff;} #readbar .rb-end{background:transparent;color:var(--muted);border:1px solid var(--border2);} /* stats card (operator, 2026-07-11): streak · pages read · tests attempted. Streak counts forever; the two numbers reset with the calendar month. */ .stat-seg{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;text-align:center;} .ss-num{font-family:var(--wordmark);font-size:1.35rem;font-weight:700;color:var(--brand-ink);line-height:1;} .ss-lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);line-height:1.5;} .ss-dots{display:inline-flex;align-items:center;gap:3px;} .ss-wk{font-family:var(--mono);font-size:.6rem;color:var(--brand-ink2);margin-right:3px;} .stk-dot{width:7px;height:7px;border-radius:50%;background:var(--border2);display:inline-block;} .stk-dot.on{background:var(--gold);} .stat-div{width:1px;align-self:stretch;background:var(--border2);margin:2px 4px;} /* daily tiles: free/read chip; weekly test score line */ .dt-chip{font-family:var(--mono);font-size:.56rem;letter-spacing:.05em;color:var(--gold); border:1px solid var(--border);border-radius:999px;padding:2px 8px;margin-top:5px;} .dt-chip.done{color:var(--accent-dk);border-color:var(--border2);} .dt-chip.new{color:#4a6f9e;border-color:#a9c3de;background:rgba(109,147,196,.10);} .day-tile.fresh{box-shadow:inset 0 0 0 2px rgba(109,147,196,.35);} .btn-fresh{box-shadow:0 0 0 3px rgba(109,147,196,.30);} html.night .dt-chip.new{color:#9dbde0;border-color:#4a6f9e;} .wt-score{font-family:var(--mono);font-size:.68rem;color:var(--accent-dk);margin:2px 0 4px;} .revise{display:inline-flex;align-items:center;gap:5px;margin-top:2px;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);cursor:pointer;background:none;border:none;} /* ── cards (website card language: gold border, colored lip, lift) ─ */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); padding:18px;margin:0 16px 14px;position:relative;overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.04);transition:all .22s;animation:fadeUp .45s ease both;} .card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--card-lip,var(--gold)); border-radius:var(--r-lg) var(--r-lg) 0 0;} .card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.08);} .card .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;} .card .ttl{font-family:var(--wordmark);font-size:1.16rem;font-weight:700;margin-bottom:4px;color:var(--brand-ink);} .card .body{font-size:.9rem;color:var(--brand-ink2);line-height:1.65;} .plan-card{--card-lip:linear-gradient(90deg,var(--gold),var(--gold-light)); background:linear-gradient(135deg,color-mix(in srgb,var(--gold-pale) 45%,var(--surface)),var(--surface));} .card.case-day{--card-lip:#6d28d9;} .card.concept-day{--card-lip:#15803d;} .search{margin:14px 16px;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:11px 16px;color:var(--muted);font-size:.9rem;cursor:pointer;transition:.15s;} .search:hover{border-color:var(--gold);} .qgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:0 16px 4px;} .q{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 6px;cursor:pointer;font-size:.74rem;color:var(--muted);transition:all .2s;} .q:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--gold);} .q .qi{font-size:1.2rem;} .btn{display:block;width:100%;text-align:center;padding:12px;border-radius:var(--r);font-family:var(--display);font-weight:700;font-size:.96rem;cursor:pointer;border:none;margin-top:10px;transition:.15s;} .btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#fff;} .btn-primary:hover{transform:translateY(-1px);} .btn-ghost{background:transparent;border:1.5px solid var(--border2);color:var(--gold);} .btn-ghost:hover{background:var(--gold-pale);} .row2{display:flex;gap:10px;}.row2 .btn{margin-top:10px;} .li{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:.15s;} .li:hover{background:var(--surface);} .li .li-t{font-size:.95rem;flex:1;color:var(--brand-ink2);} .li .li-m{font-family:var(--mono);font-size:.66rem;color:var(--muted);} .profile{display:flex;align-items:center;gap:12px;padding:18px 16px;} .avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#fff;display:grid;place-items:center;font-family:var(--display);font-size:1.2rem;} .ms-name{font-family:var(--display);font-size:1.12rem;font-weight:600;color:var(--brand-ink);} .ms-mail{font-family:var(--mono);font-size:.72rem;color:var(--muted);} .dim{font-size:.6rem;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;margin:18px 16px 6px;} .pref-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:.9rem;color:var(--brand-ink2);} .fontctl{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.8rem;} .fbtn{font-family:var(--mono);font-size:.8rem;padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--brand-ink2);cursor:pointer;} .fbtn:hover{border-color:var(--gold);color:var(--gold);} /* footer (website footer language) */ .foot{margin-top:26px;border-top:1px solid var(--border);background:var(--surface); padding:24px 16px;text-align:center;} .foot-logo{font-family:var(--wordmark);font-size:1rem;color:var(--brand-ink);} .foot-logo em{color:var(--gold);font-style:italic;} .foot-copy{font-family:var(--mono);font-size:.6rem;color:var(--muted);letter-spacing:1px;margin-top:8px;opacity:.75;} /* toast */ #toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);background:var(--brand-ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:.85rem;z-index:99;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;} /* ── sign-in sheet ──────────────────────────────────────────────── */ .sheet-wrap{position:fixed;inset:0;z-index:60;} .sheet-bg{position:absolute;inset:0;background:rgba(28,26,20,.5);backdrop-filter:blur(2px);} .sheet{position:absolute;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;background:var(--bg); border:1px solid var(--border);border-bottom:none; border-radius:18px 18px 0 0;padding:14px 22px 30px;box-shadow:0 -8px 40px rgba(0,0,0,.25);animation:up .25s ease;} @keyframes up{from{transform:translateY(40px);opacity:.4;}to{transform:none;opacity:1;}} .sheet-grab{width:38px;height:4px;border-radius:4px;background:var(--border);margin:0 auto 16px;} .sheet-title{font-family:var(--wordmark);font-size:1.5rem;font-weight:700;text-align:center;color:var(--brand-ink);} .sheet-title em{font-style:italic;font-weight:400;color:var(--gold);} .sheet-sub{text-align:center;color:var(--muted);font-size:.9rem;line-height:1.5;margin:8px 0 18px;} .gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px; border-radius:999px;border:1px solid var(--border2);background:var(--surface);cursor:pointer; font-family:var(--display);font-weight:600;font-size:1rem;color:var(--brand-ink);transition:.15s;} .gbtn:hover{border-color:var(--gold);background:var(--gold-pale);} .sheet-cancel{display:block;margin:12px auto 0;background:none;border:none;color:var(--muted);font-size:.85rem;cursor:pointer;} /* ── tap responsiveness: kill iOS Safari's 300ms click delay + double-tap zoom on everything interactive. This alone fixes most "had to press twice" reports on mobile. ── */ button,.tile,.topic,.day-tile,.ptile,.htab,a,[role="button"],[data-open], input,select,textarea,label{touch-action:manipulation;} /* ── press feedback: a tap visibly registers (light→dark toggle) ── */ .tile:active,.topic:active,.day-tile:active,.ptile:active,.li[data-open]:active{ transform:scale(.982);background:var(--gold-pale);border-color:var(--gold); transition:transform .1s ease,background .12s ease,border-color .12s ease;} .btn:active,.htab:active,.pr-plan:active,.gbtn:active,.revise:active,.fbtn:active, .signin-mini:active,.whoami:active,.state-input+.btn:active{ transform:scale(.96);filter:brightness(.9); transition:transform .1s ease,filter .12s ease;} /* ── loading overlay: fast scales/gavel/book animation while a page arrives ── */ #ldload{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center; background:rgba(28,26,20,.18);backdrop-filter:blur(1.5px);} .ldl-pill{width:76px;height:76px;border-radius:50%;background:var(--bg); border:1px solid var(--border2);box-shadow:0 6px 30px rgba(0,0,0,.25); display:flex;align-items:center;justify-content:center;} .ldl-ico{font-size:2.1rem;line-height:1;} .ldl-ico.pop{animation:ldlpop .32s ease;} @keyframes ldlpop{0%{transform:scale(.5) rotate(-14deg);opacity:.2;} 60%{transform:scale(1.18) rotate(5deg);}100%{transform:scale(1) rotate(0);opacity:1;}} /* ── new-account notice (DPDP): items + fine print + agree button ── */ .cn-list{list-style:none;margin:2px 0 12px;padding:0;display:flex;flex-direction:column;gap:7px;} .cn-list li{font-size:.83rem;line-height:1.55;color:var(--brand-ink2);background:var(--surface); border:1px solid var(--border);border-radius:8px;padding:8px 12px;} .cn-list li b{color:var(--brand-ink);} .cn-fine{font-size:.75rem;color:var(--muted);line-height:1.6;margin:0 0 14px;} .cn-fine a{color:inherit;text-decoration:underline;} .cn-agree{width:100%;} #consent .sheet{max-height:88vh;overflow-y:auto;} /* ── DESKTOP (>=900px) ─────────────────────────────────────────── */ @media(min-width:900px){ .app{max-width:1020px;} .top-in{padding:14px 28px;gap:22px;} .top2{padding:8px 28px 10px;gap:22px;} .scroll{padding-bottom:0;} .pad{padding:26px 28px 8px;} .hero{padding:64px 24px 42px;} .hero::before{height:44px;} .subjects{padding:6px 28px 0;} .levels{padding:20px 28px 8px;} .tgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;} .topic{margin-bottom:0;} .inner{grid-column:1/-1;} .card,.search{max-width:760px;margin-left:auto;margin-right:auto;} .qgrid{max-width:760px;margin-left:auto;margin-right:auto;} .divider{margin-left:auto;margin-right:auto;max-width:820px;} .sheet{bottom:auto;top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:400px;border-radius:18px;border-bottom:1px solid var(--border);} @keyframes up{from{opacity:0;}to{opacity:1;}} } /* PWA install bar (reuses runbar button styles) */ #installbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:10px; padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--brand-ink);color:#fff; font-family:var(--serif);font-size:.9rem;box-shadow:0 -4px 16px rgba(0,0,0,.25);} #installbar .rb-txt{flex:1;} /* ---- Bare Acts shelf (v52): plain act rows, list style, nothing loud ---- */ .ba-act .li-t{font-family:var(--display);font-weight:600;} .ba-soon{cursor:default;opacity:.55;} .ba-soon:hover{background:none;} /* ---- Quote of the day (v52) ---- */ #quote-slot .card{margin-top:14px;} .quote-card .q-text{font-family:var(--display);font-style:italic;font-size:1.08rem;line-height:1.55;color:var(--brand-ink2);margin-top:6px;} .quote-card .q-by{font-family:var(--serif);font-size:.85rem;color:var(--muted);margin-top:8px;text-align:right;} /* ---- bookmark flag dots (v52): My Space list ---- */ .flagdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:9px;vertical-align:baseline;} .flagdot.f-g{background:#c34a8b;} /* magenta, was green (operator, 2026-07-11) */ .flagdot.f-a{background:#c89a3e;} .flagdot.f-r{background:#b85564;} /* ---- Exam Hall chips + My Space legal row (v52): the Study slider, reused ---- */ .eh-chips{border-bottom:1px solid var(--border);margin-bottom:4px;} .legal-links{position:static;border-bottom:none;padding:6px 16px 10px;} .legal-links .subject{text-decoration:none;} /* ---------- installed-app bottom tab bar (appmode; operator, 2026-07-12) ---------- html.appmode is set by app.js when running from the home screen (PWA standalone) or with ?app=1 for preview. The website (normal browser) never gets these rules. */ #bottomnav{display:none;} html.appmode .hnav{display:none;} html.appmode .top2{display:none;} html.appmode #bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:60; display:flex;justify-content:space-around;align-items:stretch; background:var(--surface);border-top:1px solid var(--border); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -4px 16px rgba(0,0,0,.06);} html.appmode #bottomnav .htab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px; border:none;border-bottom:none;padding:3px 6px;font-size:.6rem;letter-spacing:.02em;color:var(--muted);} html.appmode #bottomnav .bn-ico{font-size:1.2rem;line-height:1.1;} html.appmode #bottomnav .htab.active{color:var(--gold);border:none;} html.appmode .scroll{padding-bottom:calc(64px + env(safe-area-inset-bottom));} /* the fixed bottom banners ride above the tab bar in appmode */ html.appmode #runbar,html.appmode #readbar,html.appmode #installbar{ bottom:calc(66px + env(safe-area-inset-bottom));padding-bottom:10px;} /* ---------- animation smoothness (operator, 2026-07-19) ---------- Every animation rides transform/opacity (compositor-only); fixed bars get their own layer so scrolling never repaints them; people who ask the OS for less motion get less motion. */ #bottomnav,#readbar,#runbar,#installbar,#offbar{transform:translateZ(0);} #ldconfirm .lc-card{animation:lcpop .18s ease;} @keyframes lcpop{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}} .pd-panel{animation:pdopen .16s ease;transform-origin:top center;} @keyframes pdopen{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;} } /* ---------- v58 polish (operator, 2026-07-12) ---------- */ /* the house icons: sized and seated like the text they replace */ .ldi{width:1em;height:1em;vertical-align:-.12em;display:inline-block;} .bn-ico .ldi{width:21px;height:21px;} .bn-glyph{font-size:1.15rem;line-height:1;} /* iPhone rounded screens (viewport-fit=cover): honour the safe areas and lift the tab bar clear of the home-indicator curve, YouTube-style */ html.appmode .top{padding-top:env(safe-area-inset-top);} html.appmode #offbar{padding-top:calc(7px + env(safe-area-inset-top));} html.appmode #bottomnav{padding:8px 4px calc(16px + env(safe-area-inset-bottom));} html.appmode .dp-bar{padding-top:calc(10px + env(safe-area-inset-top));} /* a visible bottom banner (resume / running test) must never hide content: the page gets extra breathing room while a banner is up */ body.bbar .scroll{padding-bottom:120px;} html.appmode body.bbar .scroll{padding-bottom:calc(136px + env(safe-area-inset-bottom));} /* phones: the resume banner says just "Resume reading" — no truncated title */ @media(max-width:480px){#readbar .rb-detail,#runbar .rb-detail{display:none;}} /* today's-usage popover (pill tap in the reader bar) lives in the shadow DOM; its styles are in reader.css */ /* ---------- night + active-tab polish (operator, 2026-07-12) ---------- */ /* the purple monogram vanishes on dark: give it its own paper chip at night */ html.night .ld-logo-img{background:#f3ecdb;border-radius:7px;padding:2px;} /* which tab am I on: the active tab's icon sits in a soft gold pill; night adds a quiet halo (operator's YouTube-style cue, in the house voice) */ #bottomnav .bn-ico{display:inline-flex;align-items:center;justify-content:center; padding:2px 14px;border-radius:14px;transition:background .15s;} #bottomnav .htab.active .bn-ico{background:var(--gold-pale);color:var(--gold);} #bottomnav .htab.active .ldi *{stroke-width:2.1;} #bottomnav .htab.active .bn-lbl{font-weight:700;} html.night #bottomnav .htab.active .bn-ico{background:rgba(212,168,67,.16); box-shadow:0 0 14px rgba(212,168,67,.45);} /* ---------- My Space, reimagined (operator, 2026-07-12) ---------- House rhythm: a calm identity block, divider labels doing the naming (cards lost their redundant kickers), one settings card, activity sections that exist only when they have something to say. */ .ms-hero{display:flex;align-items:center;gap:14px;padding:26px 16px 10px;} .ms-hero .avatar{width:54px;height:54px;font-size:1.45rem; box-shadow:0 2px 10px color-mix(in srgb,var(--gold) 35%,transparent);} .ms-hero-t{min-width:0;} .ms-hero .ms-name{font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--brand-ink);} .ms-hero .ms-mail{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ms-hero .revise{margin-left:auto;flex-shrink:0;} .ms-settings .pref-row{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:11px 0;border-bottom:1px solid var(--border);} .ms-settings .pref-row:last-child{border-bottom:none;} .pref-sub{display:block;font-size:.72rem;color:var(--muted);font-weight:400; line-height:1.45;margin-top:2px;max-width:230px;} .ms-group{margin-bottom:6px;} .ms-quiet{font-family:var(--serif);font-size:.85rem;color:var(--muted); padding:10px 16px;line-height:1.6;} .ms-legal{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:2px 16px 14px; font-size:.8rem;} .ms-legal a{color:var(--gold);text-decoration:none;font-family:var(--display);font-weight:600;} .ms-legal span{color:var(--border2);} .ms-signout{border-top:1px solid var(--border);margin-top:8px;} .ms-signout .li-t{color:var(--muted);font-weight:400;} /* archive entries carry the topic name under the date (operator, 2026-07-12) */ .dp-datebtn .dp-datesub{display:block;font-size:.72rem;color:var(--muted); font-family:var(--serif);margin-top:2px;line-height:1.35;} /* night: the banners keep their own dark ground (their bg rides --brand-ink / paper vars, which flip light at night — white text went unreadable) */ html.night #runbar{background:#26211a;} html.night #readbar{background:var(--surface);} /* ---------- the house portal dropdown (operator, 2026-07-12) ---------- */ .psel-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%; font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--gold); background:var(--bg);border:1px solid var(--border2);border-radius:var(--r); padding:11px 14px;cursor:pointer;transition:border-color .15s;} .psel-btn:hover{border-color:var(--gold);} .psel-caret{font-size:.55rem;color:var(--gold);transition:transform .18s;flex-shrink:0;} .psel-btn.open .psel-caret{transform:rotate(180deg);} .portal-card{position:relative;} .psel-menu{position:absolute;left:16px;right:16px;z-index:70;margin-top:6px;padding:5px; background:var(--surface);border:1px solid var(--border2);border-radius:12px; box-shadow:0 14px 34px rgba(28,26,20,.18);} .pm-item{display:block;width:100%;text-align:left;padding:11px 13px;border:none; background:none;cursor:pointer;border-radius:8px;transition:background .12s;} .pm-item:hover{background:var(--gold-pale);} .pm-item.cur{background:var(--gold-pale);box-shadow:inset 3px 0 0 var(--gold);} .pm-name{display:block;font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--brand-ink);} .pm-item.cur .pm-name{color:var(--gold);} .pm-desc{display:block;font-size:.74rem;color:var(--muted);margin-top:1px;line-height:1.4;} html.night .psel-menu{box-shadow:0 14px 34px rgba(0,0,0,.55);} /* the portal card must not clip its own dropdown (cards default overflow:hidden) */ .portal-card{overflow:visible;} /* resume banners, two lines: kicker + the full title (operator, 2026-07-12; runbar joined the same pattern 2026-07-13 — the two banners must match) */ #readbar .rb-stack,#runbar .rb-stack{display:flex;flex-direction:column;gap:2px; white-space:normal;overflow:visible;} #readbar .rb-kick,#runbar .rb-kick{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em; text-transform:uppercase;color:var(--muted);} #readbar .rb-title,#runbar .rb-title{font-family:var(--serif);font-style:italic;font-size:.94rem; color:var(--gold);line-height:1.35;} #runbar .rb-kick{color:rgba(255,255,255,.75);} #runbar .rb-title{color:var(--gold-light);} /* the portal menu floats FIXED above all stacking contexts (operator report: the quote/search cards painted over the absolute version) */ .psel-menu{position:fixed;left:auto;right:auto;margin-top:0;z-index:200; max-height:60vh;overflow-y:auto;} /* ---------- the portal picker SHEET (redo, operator 2026-07-12) ---------- */ .psel-menu{display:none !important;} /* the retired dropdown, in old caches */ .pk-wrap{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;} .pk-bg{position:absolute;inset:0;background:rgba(18,14,6,.55);backdrop-filter:blur(2px);} .pk-sheet{position:relative;width:100%;max-width:520px;margin:0 auto;background:var(--surface); border:1px solid var(--border2);border-bottom:none;border-radius:18px 18px 0 0; padding:10px 14px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -14px 44px rgba(0,0,0,.35);animation:pkUp .22s ease;} @keyframes pkUp{from{transform:translateY(34px);opacity:.4}to{transform:none;opacity:1}} .pk-title{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em; text-transform:uppercase;color:var(--muted);margin:8px 4px 10px;} /* ---------- the portal dropdown, in-flow (third build; operator 2026-07-12) ---------- */ .pk-wrap{display:none !important;} /* the retired sheet, in old caches */ .psel-list{margin-top:8px;border:1px solid var(--border2);border-radius:12px; background:var(--bg);padding:5px;} .psel-list .pm-item{display:block;width:100%;text-align:left;padding:11px 13px; border:none;background:none;cursor:pointer;border-radius:8px;transition:background .12s;} /* ---------- the portal dropdown panel (final; operator 2026-07-12) ---------- */ .psel-list{display:none !important;} /* the retired accordion, in old caches */ .pd-wrap{position:fixed;inset:0;z-index:300;} .pd-panel{position:absolute;background:var(--surface);border:1px solid var(--border2); border-radius:12px;box-shadow:0 16px 44px rgba(20,14,4,.26);padding:5px; overflow-y:auto;-webkit-overflow-scrolling:touch;} html.night .pd-panel{box-shadow:0 16px 44px rgba(0,0,0,.6);} .pd-panel .pm-item{display:block;width:100%;text-align:left;padding:11px 13px; border:none;background:none;cursor:pointer;border-radius:8px;transition:background .12s;} /* the day page slides over the dashboard like the overlay it is */ /* while the portal dropdown is open, nothing behind it moves */ body.pd-open, body.pd-open .scroll{overflow:hidden !important;} .pd-panel{overscroll-behavior:contain;} /* the day page slides out to the right on close (no entry animation) */ #daypage.dp-closing{transform:translateX(100%);transition:transform .24s ease;} /* ---------- the Today ledger + dashboard teaser (operator, 2026-07-12) ---------- */ .lt-sum .li-t b{font-family:var(--display);font-size:.95rem;color:var(--brand-ink);} .lt-sub{cursor:pointer;} .lt-x{color:var(--gold);font-weight:700;font-family:var(--display);} .lt-list{border-left:2px solid var(--border2);margin:0 0 4px 22px;} .lt-item{padding:8px 14px;border-bottom:1px dashed var(--border);} .lt-item .li-t{font-weight:400;font-size:.86rem;color:var(--brand-ink2);} .dash-today{font-family:var(--serif);font-size:.85rem;color:var(--muted); text-align:center;padding:2px 16px 12px;} .dt-more{background:none;border:none;color:var(--gold);font-family:var(--display); font-weight:700;font-size:.8rem;cursor:pointer;padding:0 0 0 6px;} /* ---------- audit additions (2026-07-12, v60) ---------- */ /* logged-out home: pricing before sign-in */ .anon-plans{text-align:center;margin:12px 0 4px;} /* house confirm dialog (replaces the stock browser confirm) */ #ldconfirm{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;} #ldconfirm .lc-bg{position:absolute;inset:0;background:rgba(28,26,20,.55);} #ldconfirm .lc-card{position:relative;background:var(--paper,#fffdf5);color:var(--ink,#1c1a14); border-radius:14px;padding:22px 20px 16px;max-width:340px;width:calc(100% - 48px); box-shadow:0 10px 40px rgba(0,0,0,.3);} #ldconfirm .lc-card p{font-family:var(--serif);font-size:.95rem;line-height:1.55;margin:0 0 16px;} #ldconfirm .lc-row{display:flex;gap:10px;justify-content:flex-end;} #ldconfirm .lc-row.lc-stack{flex-direction:column;align-items:stretch;} #ldconfirm .lc-row.lc-stack .btn{width:100%;margin:0;} html.night #ldconfirm .lc-card{background:#221e19;color:#e8e2d8;} /* Exam Hall rows: the lock shows before the tap */ .eh-lock{margin-right:7px;opacity:.55;} /* what a past paper or a live window costs an aspirant (operator, 2026-07-15) */ .eh-cost{margin-left:auto;flex-shrink:0;font-family:var(--mono);font-size:.6rem; color:var(--gold);border:1px solid var(--border2);border-radius:999px;padding:2px 8px;} /* aspirant plan card: live allowance line */ .plan-allow{display:block;margin-top:8px;font-family:var(--display);font-weight:700; font-size:.84rem;color:var(--gold);} .plan-allow:empty{display:none;} /* pricing sheet: portal-band honesty note under the Student ladder */ .pr-rung-warn{font-family:var(--serif);font-size:.8rem;line-height:1.55;margin:-4px 0 10px; padding:9px 12px;border-left:3px solid var(--gold);background:var(--gold-pale); border-radius:0 8px 8px 0;color:var(--brand-ink,#1c1a14);} /* ---------- Today ledger sections + bookmarks regroup (v61) ---------- */ .lt-headline{font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--ink); padding:2px 16px 8px;} .lt-sec{font-family:var(--display);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);margin:12px 16px 4px;} .lt-note{font-family:var(--serif);font-size:.8rem;color:var(--muted);margin:0 16px 8px;font-style:italic;} .lt-click{cursor:pointer;} .lt-click:active{opacity:.6;} .lt-score{white-space:nowrap;} .lt-score.lt-click{color:var(--gold);font-weight:700;} /* ---------- aspirant allowance pill IN THE HEADER (v64) ---------- The reader's exact pill (.rd-allow / .ra-seg), copied verbatim so the header pill and the reader pill are identical (operator, 2026-07-12). Reader lives in a closed shadow root styled by reader.css, so these light-DOM rules never reach it. The --paper-2/--rose/--ink vars are set on the root by theme(). */ .rd-allow{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;cursor:pointer; background:var(--paper-2);border:1px solid var(--rose);border-radius:9px;padding:3px 9px;} .rd-allow[hidden]{display:none;} .hdr-allow{margin-right:8px;} .ra-seg{display:inline-flex;flex-direction:column;align-items:center;line-height:1.1;} .ra-seg b{font-family:var(--display);font-size:.8rem;font-weight:700;color:var(--ink);} .ra-seg i{font-family:var(--mono);font-style:normal;font-size:.42rem;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-mute);} .ra-credit b{color:#b07d2a;} .ra-consult b{color:#8a8f98;} .ra-peek b{color:#9aa0a6;} /* the usage dropdown — reader's .rd-usage, copied for the header (light DOM) */ .rd-usage{position:fixed;z-index:135;top:52px;left:10px;right:10px;max-width:380px;margin:0 auto; background:#fff;border:1px solid var(--rose);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18); padding:14px 16px;font-size:.8rem;line-height:1.5;} .rd-usage h4{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-mute);margin:10px 0 4px;} .rd-usage h4:first-child{margin-top:0;} .rd-usage .ru-row{position:relative;padding-left:14px;color:var(--ink-mid); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .rd-usage .ru-row::before{content:"\2022";position:absolute;left:2px;color:var(--accent);} .rd-usage .ru-none{color:var(--ink-mute);font-style:italic;padding-left:14px;} .rd-usage .ru-count{float:right;color:var(--ink);font-weight:600;} html.night .rd-usage{background:var(--paper-2);border-color:var(--rose);} /* ---------- fixed-chrome text-size guard (operator, 2026-07-13) ---------- The A-/A+ control scales the html font-size, so every rem in the app rides it. The fixed chrome — top header and the appmode bottom tab bar — must NOT: at 125% they wrap and break the layout. Their type is pinned back to the 17px base in plain px. Content everywhere else keeps scaling. */ .ld-logo-text{font-size:19px;} .ld-tagline{font-size:9.5px;} .who-name{font-size:15.3px;} .who-tier{font-size:10.2px;} .signin-mini{font-size:13.6px;} .top .htab{font-size:15.3px;} @media(max-width:430px){.top .htab{font-size:13.3px;}} .hdr-allow .ra-seg b{font-size:13.6px;} .hdr-allow .ra-seg i{font-size:7.2px;} html.appmode #bottomnav .htab{font-size:10.2px;} html.appmode #bottomnav .bn-ico{font-size:20.4px;} /* the bottom tab bar is chrome, not copy: its labels must not be selectable (operator, 2026-07-13) */ #bottomnav,#bottomnav *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;} /* the day page's education-only footer (operator, 2026-07-13) */ .dp-disclaimer{margin-top:28px;padding-top:12px;border-top:1px dashed var(--border); font-size:.78rem;color:var(--muted);font-style:italic;line-height:1.6;} /* ---------- operator fixes, 2026-07-13 (evening) ---------- */ /* header parity: the app header and the reader bar both sit at 56px */ .top-in{padding:11px 16px;min-height:56px;box-sizing:border-box;} .ld-logo-img{height:32px;} /* PWA: rubber-banding must not drag the whole shell up while scrolling */ html.appmode, html.appmode body{overscroll-behavior-y:none;} .scroll{overscroll-behavior:contain;} /* logged out, the app shows only Home: Study / Bare Acts / Exam Hall tabs are hidden in BOTH navs until sign-in (operator, 2026-07-13) */ body.loggedout .htab[data-tab="study"], body.loggedout .htab[data-tab="bareacts"], body.loggedout .htab[data-tab="examhall"]{display:none !important;} /* ---------- the act contents page (operator, 2026-07-13) ---------- */ #actpage{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;} .ap-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;min-height:56px;box-sizing:border-box; border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;} .ap-back{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex-shrink:0; border:1px solid var(--border);background:var(--bg);color:var(--muted);cursor:pointer;font-size:1rem;} .ap-t{min-width:0;} .ap-name{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--brand-ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ap-meta{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);} .ap-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 16px 46px;overscroll-behavior:contain;} .ap-ch{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold); margin:20px 2px 8px;line-height:1.6;} .ap-no{font-family:var(--mono);font-weight:600;font-size:.78rem;color:var(--gold);margin-right:2px;} #actpage .li{cursor:pointer;} #actpage .li.ba-soon{cursor:default;opacity:.55;} /* ---------- Bare Acts as CARDS (operator, 2026-07-15) ---------- The shelf, an act's chapters, and a chapter's sections all read as cards, the same shape Study uses. Section counts and page counts are gone: an act is a thing you open, not a row of statistics. */ .ba-grid{display:block;} .ba-card,.ap-chcard,.ap-seccard{display:flex;align-items:center;gap:9px; background:var(--bg);border:1px solid var(--border);border-radius:var(--r); padding:12px 13px;margin-bottom:8px;cursor:pointer;transition:.15s;} .ba-card:hover,.ap-chcard:hover,.ap-seccard:hover{border-color:var(--accent);transform:translateX(3px);} .ba-card .ic{font-family:var(--mono);font-size:.54rem;letter-spacing:.07em;text-transform:uppercase; padding:2px 6px;border-radius:4px;border:1px solid currentColor;flex-shrink:0;color:var(--gold);} .ba-name{font-family:var(--display);font-size:.98rem;font-weight:600;flex:1;color:var(--brand-ink); hyphens:none;-webkit-hyphens:none;word-break:normal;} .ba-note{font-family:var(--mono);font-size:.6rem;color:var(--muted);flex-shrink:0;} /* an act's chapter card: the chapter, and the sections it spans */ .ap-chcard{flex-direction:column;align-items:flex-start;gap:4px;} .ap-chname{font-family:var(--display);font-size:.98rem;font-weight:600;color:var(--brand-ink); line-height:1.35;hyphens:none;-webkit-hyphens:none;word-break:normal;} .ap-chrange{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--muted);} /* a chapter's section card: the number, then the heading */ .ap-seccard{align-items:baseline;} .ap-sectitle{font-family:var(--display);font-size:.95rem;font-weight:600;flex:1;color:var(--brand-ink); line-height:1.4;hyphens:none;-webkit-hyphens:none;word-break:normal;} /* the successor reference sits AFTER the heading, in brackets, quietly */ .ap-now{font-family:var(--mono);font-weight:400;font-size:.66rem;color:var(--muted);white-space:nowrap;} .ba-card.ba-soon,.ap-seccard.ba-soon{cursor:default;opacity:.55;transform:none;} .ba-card.ba-soon:hover,.ap-seccard.ba-soon:hover{border-color:var(--border);transform:none;} /* the Exam Hall's own chip row is centred (operator, 2026-07-15) */ .eh-chips{justify-content:center;gap:18px;} /* ---------- Tests (operator, 2026-07-15) ---------- The three kinds sit in a row; the tests of the kind you pick open underneath in the Study tab's accordion, so a test is one tap away. Nothing announces how many slots a shelf holds. All three kinds FIT the screen — no sideways scroll, no half-visible third chip. */ .et-side{display:flex;flex-direction:row;gap:6px;margin:2px 0 6px;} .et-kind{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; flex:1 1 0;min-width:0; background:var(--bg);border:1px solid var(--border);border-radius:var(--r); padding:8px 6px;cursor:pointer;text-align:center;transition:.15s;} .et-kind:hover{border-color:var(--accent);} .et-kind.active{border-color:var(--accent);background:var(--gold-pale);} .et-kn{font-family:var(--display);font-size:.92rem;font-weight:600;color:var(--brand-ink); white-space:nowrap;} .et-kd{font-family:var(--mono);font-size:.53rem;letter-spacing:.02em;color:var(--muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;} .et-main{min-width:0;} /* Chapters kind: ONE subject on screen at a time (operator, 2026-07-17). The pills pick the subject; only that subject's chapter accordion renders, so the shelf no longer stacks every subject x every chapter and grows without end. */ .et-subbar{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:10px 0 4px;padding:2px 0;} .et-subbar::-webkit-scrollbar{display:none;} .et-sub{flex:0 0 auto;font-family:var(--display);font-size:.85rem;font-weight:600;color:var(--muted); background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:7px 14px; cursor:pointer;transition:.15s;white-space:nowrap;} .et-sub:hover{border-color:var(--accent);} .et-sub.active{border-color:var(--accent);background:var(--gold-pale);color:var(--brand-ink);} /* a slot waiting for its test: visible, so the shelf reads, but inert */ .tile.et-slot{cursor:default;opacity:.5;} .tile.et-slot:hover{border-color:var(--border);transform:none;} .tile.et-slot .ic{color:var(--muted);} /* an act's section tiles inside a chapter: the number leads, then the heading */ .tile.ap-sec .ic{color:var(--gold);font-family:var(--mono);font-weight:600;} .tile.ap-sec .tlabel{line-height:1.4;} /* ---------- Exam Hall v3 polish + Test Builder (operator, 2026-07-14) ---------- */ /* the hall body breathes like the Study catalog (.levels): year heads were flush against the phone's left edge */ #eh-body{padding:16px 16px 8px;} #eh-body .subjects{margin:-16px -16px 8px;padding:6px 16px 0;} #eh-body > .card{margin:6px 0 14px;} @media(min-width:900px){#eh-body{padding:20px 28px 8px;}#eh-body .subjects{margin:-20px -28px 8px;padding:6px 28px 0;}} /* the builder card */ .eh-build{margin-bottom:18px;} .ehb-lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase; color:var(--gold);margin:14px 0 7px;} .ehb-chips{display:flex;flex-wrap:wrap;gap:8px;} .ehb-chip{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--muted); background:var(--bg);border:1px solid var(--border2);border-radius:16px;padding:6px 13px; cursor:pointer;transition:.15s;-webkit-user-select:none;user-select:none;} .ehb-chip.on{color:#fff;background:var(--gold);border-color:var(--gold);} html.night .ehb-chip.on{color:#1b1610;} .ehb-note{font-size:.78rem;font-style:italic;color:var(--muted);margin-top:10px;} .ehb-none{font-size:.85rem;color:var(--muted);font-style:italic;} #ehb-scores .li{padding:9px 0;} /* Build Your Own: subject accordions + refined chips (operator, 2026-07-14) */ .ehb-kicker{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase; color:var(--gold);margin-bottom:8px;} .ehb-count{font-family:var(--serif);text-transform:none;letter-spacing:0;color:var(--brand-ink); font-size:.78rem;font-style:italic;margin-left:6px;} .ehb-subj{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer; padding:11px 2px;border-bottom:1px solid var(--border);-webkit-user-select:none;user-select:none;} .ehb-subj-name{font-family:var(--display);font-weight:600;font-size:.94rem;color:var(--brand-ink);} .ehb-subj-meta{font-family:var(--mono);font-size:.66rem;color:var(--gold);} .ehb-subj.open .ehb-subj-name{color:var(--gold);} .ehb-subj + .ehb-chips{padding:12px 2px 14px;border-bottom:1px solid var(--border);} /* BYOT split panel (operator redesign, 2026-07-14): subjects left, chapters right, uniform rows, up to five picks */ .ehb-split{display:flex;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden; min-height:200px;background:var(--bg);} .ehb-left{flex:0 0 38%;display:flex;flex-direction:column;border-right:1px solid var(--border); background:var(--surface);} .ehb-sub{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer; font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--muted); padding:12px 12px;border-left:3px solid transparent;border-bottom:1px solid var(--border); -webkit-user-select:none;user-select:none;} .ehb-sub.on{color:var(--gold);border-left-color:var(--gold);background:var(--bg);} .ehb-dot{font-family:var(--mono);font-style:normal;font-size:.6rem;color:#fff;background:var(--gold); border-radius:9px;padding:1px 6px;margin-left:6px;vertical-align:1px;} .ehb-right{flex:1;display:flex;flex-direction:column;} .ehb-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none; border:none;border-bottom:1px solid var(--border);cursor:pointer; font-family:var(--serif);font-size:.86rem;color:var(--brand-ink2);padding:11px 12px; -webkit-user-select:none;user-select:none;} .ehb-row:last-child,.ehb-sub:last-child{border-bottom:none;} .ehb-row.on{color:var(--brand-ink);background:var(--gold-pale);} .ehb-tick{flex-shrink:0;width:17px;height:17px;border:1px solid var(--border2);border-radius:5px; display:grid;place-items:center;font-style:normal;font-size:.66rem;color:#fff;background:var(--bg);} .ehb-row.on .ehb-tick{background:var(--gold);border-color:var(--gold);} .ehb-picked{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;} /* the Live chip glows magenta while a live test is scheduled or running */ .eh-chips .subject.live-on .nm{color:#a83279;} .eh-chips .subject.live-on.active{border-bottom-color:#a83279;} /* ---------- day pages: watermark + key-term accent (operator, 2026-07-16) ---------- */ /* the site watermark was missing on Case/Concept of the Day; same look as the reader */ #daypage .rd-wm{position:fixed;inset:0;pointer-events:none;z-index:99;overflow:hidden;} #daypage .rd-wm span{position:absolute;font-family:var(--mono);font-size:13px;color:var(--brand-ink); opacity:.055;transform:rotate(-24deg);white-space:nowrap;} html.night #daypage .rd-wm span{opacity:.04;} /* the subtle key-term accent: first mention of a case / section / act / maxim. Colour only (operator, 2026-07-17): the under-band read as an underline, and the subject accent could land on green — now a fixed teal tuned per mode. */ .dp-body .dp-key{color:#1f7a80;font-weight:600;} html.night .dp-body .dp-key{color:#63c5cd;} /* peekable cross-references in the daily Case/Concept body ([[peek]] in daily drafts) — the light-DOM twin of reader.css .rd-peek; the panel itself opens in its own shadow host (peekFromPage) so the excerpt keeps reader styling */ .dp-body .rd-peek{color:inherit;cursor:pointer;text-decoration:none;touch-action:manipulation;} .dp-body .rd-peek::after{content:'\221E';color:var(--accent);font-weight:700; font-size:.72em;margin-left:4px;padding:1px 6px;border:1.5px solid var(--accent); border-radius:7px;background:var(--paper-2);display:inline-block;line-height:1.35; vertical-align:middle;} .dp-body .rd-peek:hover::after,.dp-body .rd-peek:active::after{background:var(--accent);color:#fff;} /* corrected placement (operator, 2026-07-19): sentence keeps its words; the ∞ chip sits separately at the paragraph's end, right side, uniform colours */ .dp-body .rd-peektext::after{display:none;} .dp-body .rd-parapeek{float:right;margin-left:8px;} .dp-body .rd-peek::after{color:#2e6e78;border-color:#2e6e78;background:transparent;} html.night .dp-body .rd-peek::after{color:#fff;border-color:#fff;background:transparent;} /* ── LIVE tests (operator, 2026-07-16) ───────────────────────────── The wine-red live banner sits UNDER the header in normal flow — it pushes the dashboard down and never covers content (same two-line kicker+title language as the bottom banners). The Live chip's tiles wear their window state; countdowns tick in the mono face. */ :root{--wine:#722f37;--wine-deep:#5c242c;--wine-light:#8e3f49;} html.night :root, html.night{--wine:#7e343e;--wine-deep:#652830;--wine-light:#9a4550;} #livebar{display:flex;align-items:center;gap:10px;padding:9px 16px; background:linear-gradient(135deg,var(--wine) 0%,var(--wine-deep) 100%); border-bottom:1px solid var(--wine-deep);color:#fff; font-family:var(--serif);font-size:.88rem;} #livebar .lb-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;overflow:hidden;} #livebar .lb-kick{display:flex;align-items:center;gap:6px;font-family:var(--mono); font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:#f0d9dc;} #livebar .lb-dot{width:7px;height:7px;border-radius:50%;background:#ffd9de; box-shadow:0 0 0 0 rgba(255,217,222,.7);animation:lb-pulse 1.6s infinite;} @keyframes lb-pulse{0%{box-shadow:0 0 0 0 rgba(255,217,222,.6);} 70%{box-shadow:0 0 0 7px rgba(255,217,222,0);}100%{box-shadow:0 0 0 0 rgba(255,217,222,0);}} #livebar .lb-title{font-style:italic;color:#fff;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;} #livebar .lb-btn{flex-shrink:0;border:1px solid rgba(255,255,255,.55);border-radius:8px; padding:9px 18px;cursor:pointer;background:transparent;color:#fff; font-family:var(--display);font-weight:700;font-size:.85rem;min-height:40px; transition:transform .1s ease,background .12s ease;touch-action:manipulation;} #livebar .lb-btn:active{transform:scale(.94);background:rgba(255,255,255,.14);} /* Live chip states (operator, 2026-07-16): scheduled = wine, no dot; window OPEN = wine + the animated dot; nothing scheduled = normal colour */ .subject.live-sched .nm,.subject.live-on .nm{color:var(--wine);} .subject.live-on::after{content:'';display:inline-block;width:7px;height:7px;margin-left:6px; border-radius:50%;background:var(--wine);animation:lb-pulse 1.6s infinite;vertical-align:2px;} /* Live tiles: window states */ .tile.lt{align-items:flex-start;} .tile.lt .t{display:flex;flex-direction:column;gap:3px;min-width:0;} .tile.lt .t b{font-weight:700;} .tile.lt .lt-sub{font-size:.78rem;color:var(--muted);font-style:italic;} .tile.lt .lt-line{font-size:.78rem;color:var(--brand-ink2);} .tile.lt .lt-dim,.lt-dim{color:var(--muted);} .tile.lt .lt-count{font-family:var(--mono);font-size:.72rem;color:var(--wine);} .lt-badge{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em; color:var(--wine);border:1px solid var(--wine);border-radius:4px;padding:2px 5px;} .lt-badge.on{background:var(--wine);color:#fff;animation:lb-pulse 1.6s infinite;} .lt-badge.res{color:var(--gold);border-color:var(--gold);} .tile.lt.lt-wait,.tile.lt.lt-hold,.tile.lt.lt-arch{cursor:default;opacity:.92;} .tile.lt.lt-wait:active,.tile.lt.lt-hold:active,.tile.lt.lt-arch:active{transform:none;} .tile.lt.lt-on{border-color:var(--wine);box-shadow:0 1px 6px rgba(114,47,55,.18);} .tile.lt.lt-res{border-color:var(--gold);} .lt-note{font-size:.78rem;color:var(--muted);margin:10px 2px 0;font-style:italic;} #livebar .lb-x{border:none;background:transparent;color:rgba(255,255,255,.75); padding:9px 10px;min-height:40px;font-size:.85rem;} /* BYOT / live score rows (operator, 2026-07-16 night) */ .lt-byrow .li-t{display:flex;flex-direction:column;gap:2px;} .lt-byrow .lt-line{font-size:.78rem;} .lt-byrow.has-chaps{cursor:pointer;} .lt-chaps{font-size:.78rem;color:var(--muted);font-style:italic;} /* Buddy mode (operator, 2026-07-16; aesthetics pass same night) */ .lt-buddy{flex-shrink:0;border:1px solid var(--gold);border-radius:6px;background:transparent; color:var(--gold);font-family:var(--mono);font-size:.6rem;letter-spacing:.08em; padding:4px 8px;cursor:pointer;align-self:flex-start;} .lt-buddypanel{display:flex;flex-direction:column;gap:4px;margin-top:6px;padding:9px 11px; background:var(--surface);border:1px solid var(--border);border-radius:10px;} .lt-coderow{display:flex;align-items:center;gap:10px;} .lt-code{font-family:var(--mono);font-size:1.05rem;letter-spacing:.3em;color:var(--gold);} .lt-share,.lt-copy{display:inline-flex;align-items:center;border:1px solid var(--border2); border-radius:7px;background:transparent;color:var(--gold);cursor:pointer; font-family:var(--display);font-weight:600;font-size:.74rem;padding:5px 11px;min-height:30px; transition:transform .1s ease;} .lt-share:active,.lt-copy:active{transform:scale(.94);} .lt-share{margin-left:auto;} /* the redeem row, REDONE (operator, 2026-07-17): two matched squircles filling the row — the code field grows from the left, Join holds the right edge. Same height, same radius, centered on one axis; nothing floats or wraps. */ .ehb-buddyrow{display:flex;gap:10px;align-items:center;margin:8px 0 14px;} .ehb-codein{flex:1;min-width:0;height:48px;font-family:var(--mono); font-size:1.02rem;letter-spacing:.22em;text-transform:uppercase;text-align:center; padding:0 12px;border:1.5px solid var(--border2);border-radius:14px;background:var(--bg); color:var(--brand-ink);box-sizing:border-box;} .ehb-codein:focus{outline:none;border-color:var(--gold);} .ehb-codein::placeholder{color:var(--muted);opacity:.55;letter-spacing:.1em;} .ehb-buddyrow .ehb-joinbtn{flex:0 0 auto;width:auto;height:48px;min-height:0;padding:0 26px; margin:0; /* the base .btn carries margin-top:10px, which sat Join 10px below the code field */ font-size:.92rem;display:inline-flex;align-items:center;justify-content:center; border:1.5px solid var(--border2);border-radius:14px;box-sizing:border-box;} .bf-late{color:#722f37;font-weight:600;} .rd-root.night .bf-late{color:#c98a93;} .ehb-ready .row2{display:flex;gap:10px;} .ehb-ready #ehb-readyshare:not([hidden]){margin:8px 0 2px;} html.kb-open #bottomnav{display:none!important;} .ehb-readyrow{display:flex;gap:10px;} .ehb-peekcard{margin-top:6px;} .ehb-peekcard .row2{display:flex;gap:10px;} /* BYOT day lifecycle (operator, 2026-07-16) */ .ehb-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .ehb-modes .ehb-chip{width:100%;text-align:center;padding:11px 8px;} .lt-act{border:1px solid var(--border2);border-radius:6px;background:transparent; color:var(--gold);font-size:.72rem;font-family:var(--display);font-weight:600; padding:3px 9px;cursor:pointer;margin-right:4px;} .lt-act.lt-actdim{color:var(--muted);border-color:var(--border);} .ehb-abandon{color:var(--muted);} /* BYOT clean tiles (operator, 2026-07-16 midnight) */ .lt-byrow{align-items:flex-start;gap:8px;} .lt-byrow.lt-open2{cursor:pointer;} .lt-plus{flex-shrink:0;width:30px;height:30px;border:1px solid var(--border2); border-radius:8px;background:transparent;color:var(--gold);font-size:1.05rem; line-height:1;cursor:pointer;font-family:var(--mono);} /* ---------- operator fixes, 2026-07-17 (night): header on narrow phones ---------- Amit's screenshots: the identity block clipped to "Prati…/ASPIR…" (and ran off-screen in the PWA) while the credits pill crowded the logo, because no header flex item could shrink. Let the whoami block give way with an ellipsis, and tighten the row on narrow viewports. */ @media(max-width:480px){ .top-in{gap:6px;padding-left:10px;padding-right:8px;} .whoami{min-width:0;flex-shrink:1;padding-right:2px;} .who-name{display:block;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .who-tier{white-space:nowrap;} .hdr-allow{margin-right:4px;gap:6px;padding:3px 7px;} .ld-logo-text{font-size:17px;} .ld-logo-img{height:28px;} } @media(max-width:360px){ .who-name{max-width:64px;} .hdr-allow{gap:5px;padding:3px 6px;} } /* ---------- wide screens: iPad / laptop (operator, 2026-07-19) ---------- The app column caps and centres on big glass instead of stretching edge to edge; the header row aligns to the same width. Grids inside already go multi-column at 900px (tgrid, portal-tiles, day-grid). */ @media(min-width:900px){ .panel{width:100%;max-width:920px;margin-left:auto;margin-right:auto;} .top-in{max-width:1140px;margin:0 auto;width:100%;} } @media(min-width:1280px){ .panel{max-width:1000px;} }