/* ═══════════════════════════════════════════════════════════════════════════
BayRen Academy — additions on top of the shared BayRen design system
(main.css, copied from Grammar). Only Academy-specific components live here.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
Academy theme layer (2026-08-23) — the same family as bayrenedu.com:
Cormorant Garamond display with the gold italic accent, a light header with
the full logo, warm paper, navy + gold. Everything below overrides main.css
(Grammar's system) ONLY for this app. Self-hosted fonts, no CDN.
═══════════════════════════════════════════════════════════════════════════ */
@font-face {
font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
src: url('../fonts/cormorant-garamond-600-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
src: url('../fonts/cormorant-garamond-500-italic.woff2') format('woff2');
}
/* Bangla: TIRO BANGLA (Asaf, 5 Sep 2026 — "i like font 3", picked from the
three-face specimen BayRen Platform/mockups/bangla-type.html). A text face
drawn for long reading, so a lesson body reads like a book page rather than
an app label. One weight, Bengali subset only (54 KB; Latin letters inside a
Bangla line keep coming from Inter, as before). Bold Bangla terms are the
browser's synthetic bold — the specimen showed exactly that and he chose it.
SIL OFL 1.1 — see ../fonts/LICENSE-tiro-bangla.txt.
Hind Siliguri (28 Aug — "use the best quality bangla fonts available") stays
declared and second in every stack, so deleting the Tiro block below is a
complete rollback. */
@font-face {
font-family: 'Tiro Bangla'; font-style: normal; font-weight: 400; font-display: swap;
src: url('../fonts/tiro-bangla-400.woff2') format('woff2');
unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6,
U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D,
U+20B9, U+25CC, U+A8F1;
}
@font-face {
font-family: 'Hind Siliguri'; font-style: normal; font-weight: 400; font-display: swap;
src: url('../fonts/hind-siliguri-400.woff2') format('woff2');
unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6,
U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D,
U+20B9, U+25CC, U+A8F1;
}
@font-face {
font-family: 'Hind Siliguri'; font-style: normal; font-weight: 600; font-display: swap;
src: url('../fonts/hind-siliguri-600.woff2') format('woff2');
unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6,
U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D,
U+20B9, U+25CC, U+A8F1;
}
:root {
--font-display: 'Cormorant Garamond', 'Tiro Bangla', 'Hind Siliguri', 'Noto Sans Bengali', 'Playfair Display', Georgia, serif;
--font-body: 'Inter', 'Tiro Bangla', 'Hind Siliguri', 'Noto Sans Bengali', system-ui, -apple-system, sans-serif;
--font-bn: 'Tiro Bangla', 'Hind Siliguri', 'Noto Sans Bengali', 'Inter', sans-serif;
/* Referenced at two call sites since 26 Aug and never defined, so each ran on
its own inline fallback and both failed AA on paper. */
--gold-ink: var(--accent-strong);
--header-h: 72px;
}
/* With the face chosen (G3 of the polish pass): the Bangla a student actually
READS is never under 16 px and always has 1.8 leading. Tiro sits a shade
smaller on the line than Hind Siliguri did, and main.css's .95/.92rem
glosses were tuned for a caption, not for the line that carries the meaning.
max() keeps anything already larger (a heading's g-solo) exactly as it is. */
.q-bn, .q-sentence .sen-bn, .example .bn, .fb-bn, .check-card .bn, .ma-sent .bn,
.g .g-bn.g-solo, .prompt-bn, .tapdict .td-bn { font-size: max(16px, 1em); line-height: 1.8; }
/* ═══ DAYLIGHT (1 Sep — direction B "Paper & line", Asaf's pick of three
mockups). No dark panels anywhere: the navy .sunrise slabs and the navy
footer become paper-and-line surfaces; navy and gold survive as accents.
Shared main.css stays byte-identical — everything here is an override.
Each skill gets ONE gentle hue, used identically on the dashboard skill
card, the practice doors and anywhere else that colours a skill. ═══ */
:root {
--bg: #faf8f2; /* a half-step brighter paper */
--surface-2: #f3f0e8;
/* The six per-skill hexes that used to live here failed every contrast
floor in the design system and said "colour means skill", which Asaf
retired on 4 Sep. The skill rows and the practice doors sit in a
`br-cycle` now and read --tone (5 Sep). */
/* Signal edges — the one hairline a correct/wrong panel needs. Aliases of
the tokens' own edge values, kept here so no page carries a hex. */
--correct-edge: #bfe3d0;
--wrong-edge: #f4cbc9;
/* neutral warm shadows — the navy-tinted ones made every card read blue-grey */
--shadow-xs: 0 1px 2px rgba(96,88,70,.06);
--shadow-sm: 0 1px 3px rgba(96,88,70,.07), 0 4px 12px rgba(96,88,70,.05);
--shadow-md: 0 2px 6px rgba(96,88,70,.06), 0 12px 32px rgba(96,88,70,.09);
--shadow-lg: 0 6px 18px rgba(96,88,70,.09), 0 28px 64px rgba(96,88,70,.13);
}
/* The sunrise, by day: white card, hairline frame, one gold thread on the
left. Everything that sat on navy (white headings, #bccadb body, pale gold
eyebrow) is re-inked for paper. */
.sunrise {
background: var(--surface);
border: 1px solid var(--line);
border-left: 4px solid var(--gold);
border-radius: 6px;
color: var(--text);
}
.sunrise::after { display: none; } /* the horizon hairline was for the dark */
.sunrise h1, .sunrise h2, .sunrise h3 { color: var(--ink); }
.sunrise p { color: var(--muted); }
.eyebrow { color: var(--accent-strong); }
.eyebrow::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.eyebrow::after { background: linear-gradient(90deg, var(--gold), transparent); }
/* The two navy lesson cards, by day. The formula keeps its weight with a navy
thread and chips; the IELTS note becomes the gold aside it always was.
display: block matters: shared main.css lays the card out as a flex ROW
(h3 beside the chips), which is why the chips "leaned right" when the
heading was invisible (Asaf, 1 Sep). By day it reads top-to-bottom. */
.formula-card {
display: block;
background: var(--surface);
border: 1px solid var(--line);
border-left: 4px solid var(--navy);
box-shadow: var(--shadow-xs);
}
.formula-card .fx { color: var(--navy); background: var(--navy-50); border: 1px solid var(--navy-100); }
.formula-card .fop { color: var(--accent-strong); }
.formula-card .fnote, .formula-card .body { color: var(--text); }
.formula-card .fplus { color: var(--accent-strong); }
.formula-card > h3 { color: var(--ink); }
.formula-card .body b, .formula-card .fnote b { color: var(--accent-strong); }
.formula-card mark { color: var(--ink); box-shadow: inset 0 -.42em 0 var(--tone-tint, var(--gold-100)); background: transparent; }
.ielts-card {
background: var(--gold-50);
border: 1px solid var(--gold-300);
box-shadow: var(--shadow-xs);
}
.ielts-card .ihead { color: var(--accent-strong); }
.ielts-card p { color: var(--text); }
.ielts-card p b { color: var(--ink); }
.ielts-card mark { color: var(--ink); box-shadow: inset 0 -.42em 0 var(--tone-tint, var(--gold-100)); background: transparent; }
/* White-outline buttons sat on navy; on paper they become quiet ghosts. */
.btn-outline-light {
background: transparent; color: var(--navy);
box-shadow: inset 0 0 0 1.5px var(--line-strong);
backdrop-filter: none;
}
.btn-outline-light:hover { color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--gold-600); }
/* More dark-era inks caught in Asaf's 1-Sep review, re-inked for paper.
The crumbs/quiz-timer ones are defensive: no template hits them today,
but the shared sheet still paints them for a navy ground. */
.feature-card.sunrise .fc-meta { color: var(--muted); }
input::placeholder, textarea::placeholder { color: var(--muted); }
.page-head .crumbs { color: var(--muted); }
.page-head .crumbs a { color: var(--accent-strong); }
.page-head .bn-sub { color: var(--muted); }
.quiz-timer { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
/* The level test's timer, progress bar and close button stay on screen while
the student scrolls a passage (Asaf, 1 Sep — his one sticky pick). */
.focus-head.test-focus {
/* below the (sticky) site header — which never wraps in focus mode, the
nav is hidden there, so --header-h is its true height */
position: sticky; top: var(--header-h); z-index: 40;
background: var(--bg);
padding-top: .5rem; padding-bottom: .5rem;
border-bottom: 1px solid var(--line);
}
h1, h2, h3 { font-weight: 600; letter-spacing: 0; font-variant-numeric: lining-nums; }
.num, .big-chip, .proof b, .result-ielts b, .summary .big, .results .big, .level-chip,
/* the placement score — the ONE number the whole test produces. Cormorant
sets its figures old-style by default, so "6 / 10" was drawn with a
short 1 and a small o and read as 6 / IO. */
.pc-score { font-variant-numeric: lining-nums; }
h1 { font-size: clamp(2.4rem, 5.6vw, 3.8rem); line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.1; }
h3 { font-size: 1.4rem; line-height: 1.2; }
.hl-it { font-style: italic; font-weight: 500; color: var(--accent-large); }
.sunrise .hl-it { color: var(--accent-large); }
.hl-it .g-bn, .tagline .g-bn { font-style: normal; } /* Bengali has no italic; don't let the browser fake one */
/* Header — light, like the website; a thin sunrise line on top */
.site-head {
background: rgba(255,255,255,.88);
border-bottom: 1px solid var(--line);
box-shadow: 0 1px 0 rgba(11,42,73,.03);
height: auto; min-height: var(--header-h);
}
/* The header takes as many rows as it needs (27 Aug, Asaf: "we need everything
to work perfectly on phone and desktop"). Signed out, the bar carries four
things — logo, sign in, the gold register button and the language segment —
and nothing was allowed to give: .brand is flex-shrink:0 and .head-nav could
not wrap, so the PAGE grew wider than the screen instead. Measured signed
out at 360px: 391px of page, with the "বাংলা" pill hanging off the right edge
where it could not be tapped. (On the build still live, which offers the
third "মিশ্র" option, it was 431px — dropping that option narrowed the fault
but did not fix it.)
Deliberately NO breakpoint. The two blocks further down (430px and 520px)
were hand-picked, and each left a band where the header was still wider than
the screen — 320-446, and again 521-580 where the 520px compact rules switch
off before the screen is wide enough for the full-size header. A third magic
number would only invite a fourth. This wraps exactly when it stops fitting,
at every width, and does nothing at all when everything already fits — so
desktop and the signed-in header (which fits today) are untouched.
Only .head-nav wraps, never .inner. A flex row wraps at the OUTER level
first, so letting .inner wrap drops the whole nav BELOW the brand — measured,
and not what was asked for. Held on one line, the nav has to fold inside
itself instead, which puts the language segment under the buttons and leaves
the logo where it belongs. */
.site-head .inner { height: auto; min-height: var(--header-h); }
.head-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: .3rem; }
.site-head::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--gold-300), var(--gold) 38%, var(--gold-600) 62%, var(--navy) 100%);
}
.brand { gap: .6rem; }
/* The chip was a fixed 42x42 plate (main.css). With the emblem's 2.07:1 shape
that capped the width and object-fit letterboxed the mark down to about half
the height it was given — which is why it still looked small after the swap
(6 Sep). Sizing now comes from the ![]()
alone. */
.brand .logo-chip { background: transparent; box-shadow: none; padding: 0;
width: auto; height: auto; display: inline-flex; align-items: center; }
/* THE MARK, BIG ENOUGH TO READ (6 Sep 2026, Asaf: "BayRen Logo needs to be
larger and clearer to see"). logo.svg is a SQUARE 1080x1080 canvas holding
the whole stacked lockup — emblem, wordmark AND the word EDUCATION — so
inside a 50x44 box with object-fit:contain it rendered 44x44 with a third of
the height empty: a ~39x29 mark whose tagline was under 3px tall. The page
already prints "BayRen Academy" as live text beside it, so the artwork only
needs the emblem: static/emblem.svg is that crop, 880x425, and it has been
sitting unused since the logo was drawn. The box now matches its shape, so
contain fills it instead of letterboxing it. */
.brand .logo-chip img { height: 48px; width: 100px; }
.brand-name { color: var(--navy); font-weight: 600; font-size: 1.5rem; letter-spacing: .005em; display: inline-flex; align-items: baseline; }
.brand-name .hl { color: var(--accent-large); }
/* 13 Sep 2026: .66rem was 10.6px on a phone-width laptop and 11.2px at
1024px — under the estate's 12px floor for anything a person reads
(tests/test_phone_pass.py holds that floor for the phone pass block; this
line predates it). .78rem is 12.5px at the base root and never less. */
.brand-sub { font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-left: .55rem; position: relative; top: -.15em; }
.head-link { color: var(--text); font-weight: 500; }
.head-link:hover { color: var(--navy); background: var(--navy-50); }
.head-link.active { color: var(--navy); background: var(--gold-100); }
.head-signout .icon { color: var(--muted); }
@media (max-width: 520px) {
.brand-name { font-size: 1.2rem; }
.brand .logo-chip img { height: 38px; width: 79px; }
.brand-sub { display: none; }
.head-nav { gap: .1rem; }
.head-link { padding: .4rem .5rem; }
}
@media (max-width: 430px) {
/* Five items in the nav once signed in — the logo alone carries the brand */
.signed-in .brand-name { display: none; }
}
/* Footer — Daylight: the navy slab sat on screen on every short page (flex
min-height pins it); now it is paper with one navy rule, like a colophon. */
.site-foot {
margin-top: 0; padding: 2.4rem 0 2rem;
background: var(--bg);
border-top: 1.5px solid var(--navy);
color: var(--muted);
}
.site-foot a { color: var(--text); }
.site-foot a:hover { color: var(--navy); }
.site-foot .foot-brand { font-family: var(--font-display); font-size: 1.25rem; color: var(--navy); }
.site-foot .foot-brand .hl { color: var(--accent-large); }
.site-foot .tagline { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.05rem; color: var(--muted); }
.site-foot .tagline .g-bn { font-style: normal; }
.site-foot .foot-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.site-foot .foot-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.site-foot .foot-row + .foot-row { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .82rem; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
/* ── One mode (5 Sep 2026) ────────────────────────────────────────────────── */
/* The server picks the line: .g-bn.g-solo is the student's line, Bangla with
the English terms inside it; the admin () shows the
EN/BN pair stacked. Nothing is hidden by a mode class any more. */
/* Bangla as the PRIMARY line (bn mode) — full size, not the muted twin. */
/* Bangla as the PRIMARY line (bn mode): full colour and weight, no twin
margin — but NOT the parent's Latin leading. The matra rides above the
letters and the conjuncts stack below, so the line the student actually
reads keeps the 1.75 ui.css asks for (this rule used to say `inherit` and,
loading later, cancelled that fix on every Bangla-mode page). */
.g .g-bn.g-solo, .g-inline .g-bn.g-solo {
font-size: 1.02em; color: inherit; margin-top: 0; font-weight: inherit; line-height: 1.75;
}
h1 .g .g-bn.g-solo, h2 .g .g-bn.g-solo, h3 .g .g-bn.g-solo {
font-size: 1em; color: inherit; font-weight: inherit; margin-top: 0;
}
/* ── English + Bangla guidance pairs ─────────────────────────────────────── */
.g { display: block; }
.g .g-en { display: block; }
.g .g-bn { display: block; font-family: var(--font-bn); color: var(--muted); font-size: .94em; margin-top: .15em; line-height: 1.7; }
h1 .g .g-bn, h2 .g .g-bn, h3 .g .g-bn { font-weight: 500; font-size: .62em; color: var(--muted); margin-top: .25em; }
.g-inline .g-bn { font-family: var(--font-bn); }
.g-inline .g-sep { opacity: .5; }
.btn .g-inline .g-bn { font-size: .92em; opacity: .9; }
.field label .g .g-bn { text-transform: none; letter-spacing: 0; font-weight: 500; }
.flash .g .g-bn { color: inherit; opacity: .85; }
.lead .g .g-bn { font-size: .98em; }
/* ── Landing ─────────────────────────────────────────────────────────────── */
.hero-academy {
position: relative; overflow: hidden; text-align: left;
padding: clamp(2.4rem, 6vw, 5rem) 0 clamp(2.4rem, 5vw, 4rem);
background:
radial-gradient(55% 60% at 88% 0%, rgba(216,176,76,.26) 0%, rgba(216,176,76,.08) 45%, transparent 72%),
var(--bg);
}
.hero-academy .container { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-academy .eyebrow { color: var(--accent-strong); }
.hero-academy .eyebrow::before { display: none; }
.hero-academy .eyebrow::after { background: linear-gradient(90deg, var(--gold-600), transparent); }
.hero-academy h1 { margin: .9rem 0 1rem; max-width: none; font-size: clamp(2.4rem, 4.8vw, 3.6rem); line-height: 1.04; text-wrap: balance; }
.hero-academy h1 .g, .hero-academy h1 .g-en { display: block; }
.hero-academy h1 .hl-it .g-en { font-style: italic; font-weight: 500; }
.hero-academy .lead { font-size: 1.1rem; max-width: 33rem; margin: 0 0 1.5rem; color: var(--text); }
.hero-actions { display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; align-items: center; }
.cta-note { font-size: .85rem; color: var(--muted); margin: .8rem 0 0; }
.proof-row { display: flex; gap: clamp(1.2rem, 3vw, 2.4rem); flex-wrap: wrap; margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--line-strong); }
.proof { display: flex; flex-direction: column; gap: .05rem; }
.proof b { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1; color: var(--navy); }
.proof b .g-bn { display: none; }
.proof span { font-size: .82rem; color: var(--muted); }
/* The product, not a picture: an example result card */
.hero-visual { position: relative; padding: 14px 14px 14px 0; }
.hero-visual::before {
content: ''; position: absolute; inset: 22px -10px -8px 26px;
background: var(--navy); opacity: .07; border-radius: var(--r-xl); transform: rotate(2.2deg);
}
.result-card {
position: relative; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
padding: 1.4rem 1.5rem 1.5rem; transform: rotate(-1.3deg);
animation: fadeUp .7s var(--ease-out) .12s both;
}
.result-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--gold-300), var(--gold-600) 50%, var(--gold-300));
border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.result-card .kicker { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-strong); }
.result-card .kicker .g-bn { display: none; }
.result-level { display: flex; align-items: center; gap: 1rem; margin: .75rem 0 .6rem; }
.result-level .big-chip { font-family: var(--font-display); font-weight: 600; font-size: 2.5rem; line-height: 1; color: #fff; background: var(--navy); border-radius: 16px; padding: .5rem .75rem .4rem; }
.result-level .name { font-weight: 600; color: var(--ink); font-size: 1.12rem; line-height: 1.2; }
.result-level .name small { display: block; color: var(--muted); font-size: .8rem; font-weight: 500; margin-top: .15rem; }
.result-ielts { display: flex; align-items: center; justify-content: space-between; padding: .65rem 0; margin: .4rem 0 .9rem; border-top: 1px dashed var(--line-strong); border-bottom: 1px dashed var(--line-strong); color: var(--text); font-size: .92rem; }
.result-ielts b { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; line-height: 1; color: var(--navy); }
.result-steps { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.result-steps li { display: flex; align-items: center; gap: .7rem; font-size: .92rem; color: var(--ink); }
.result-steps .n { width: 22px; height: 22px; border-radius: 50%; background: var(--gold-100); color: var(--accent-strong); font-weight: 700; font-size: .74rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.result-steps .min { margin-left: auto; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.result-card .rc-label { font-size: .78rem; font-weight: 600; color: var(--muted); }
.result-card .bar { height: 6px; background: var(--surface-2); border-radius: 3px; margin-top: .9rem; overflow: hidden; }
.result-card .bar span { display: block; width: 27%; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-600)); border-radius: 3px; }
.result-card .bar-note { display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); margin-top: .35rem; }
@media (max-width: 880px) {
.hero-academy .container { grid-template-columns: 1fr; }
.hero-visual { max-width: 440px; margin: .6rem auto 0; padding: 10px 10px 10px 0; }
.result-card { transform: rotate(-.8deg); }
}
/* How it works — editorial, numbered */
.how { padding: clamp(2.6rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); }
.how-head { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: .4rem; }
.how-head h2 { margin: 0; white-space: nowrap; }
.how-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-600), transparent); }
.ac-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 1.4rem 0 2.2rem; border-top: 1px solid var(--line-strong); }
.ac-step { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 1.6rem 1.6rem 1.4rem 0; border-right: 1px solid var(--line); }
.ac-step + .ac-step { padding-left: 1.6rem; }
.ac-step:last-child { border-right: 0; }
.ac-step .num { display: block; width: auto; height: auto; border-radius: 0; background: transparent; font-family: var(--font-display); font-weight: 600; font-size: 2.3rem; line-height: 1; color: var(--accent-large); margin-bottom: .7rem; }
.ac-step h3 { margin: 0 0 .35rem; font-size: 1.4rem; }
.ac-step p { margin: 0; color: var(--text); }
@media (max-width: 760px) {
.ac-steps { grid-template-columns: 1fr; }
.ac-step { border-right: 0; border-bottom: 1px solid var(--line); padding: 1.2rem 0; }
.ac-step + .ac-step { padding-left: 0; }
.ac-step:last-child { border-bottom: 0; }
.how-head h2 { white-space: normal; }
}
/* Closing band */
.band { padding: 0 0 clamp(2.5rem, 6vw, 4.5rem); }
.band .sunrise { border-radius: var(--r-xl); padding: clamp(1.8rem, 5vw, 3rem) clamp(1.4rem, 5vw, 3rem); display: flex; align-items: center; justify-content: space-between; gap: 1.4rem 2rem; flex-wrap: wrap; }
.band h2 { margin: 0 0 .25rem; color: var(--ink); }
.band p { margin: 0; color: var(--muted); }
.band .band-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* ── Dashboard ───────────────────────────────────────────────────────────── */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 26px 0 18px; }
.dash-head h1 { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 2.8rem); color: var(--ink); }
.tier-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); font-size: .82rem; font-weight: 600; background: var(--navy-50); color: var(--navy-700); }
.tier-chip.free { background: var(--gold-100); color: var(--accent-strong); }
.four-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px; }
@media (max-width: 760px) { .four-grid { grid-template-columns: 1fr; } }
.qcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px 24px 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; min-height: 180px; }
.qcard .qcard-title { display: flex; align-items: center; gap: 10px; }
.qcard .qcard-title .icon { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--gold-50); color: var(--gold-700); flex: none; }
.qcard h2 { margin: 0; font-size: 1.45rem; color: var(--ink); }
.qcard .qcard-body { color: var(--text); flex: 1; }
.qcard .qcard-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.empty-note { color: var(--muted); }
.level-line { display: flex; align-items: center; gap: .9rem; margin: .2rem 0 .6rem; }
.level-line .level-chip.big { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; line-height: 1; padding: .45rem .7rem .35rem; border-radius: 14px; background: var(--navy); color: #fff; letter-spacing: 0; }
.level-line strong { font-size: 1.15rem; color: var(--ink); }
/* ── Modules grid ────────────────────────────────────────────────────────── */
.modules { margin-bottom: 48px; }
.modules h2 { margin: 0 0 4px; font-size: 1.2rem; color: var(--ink); }
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
.module { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.module:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--ink); }
.module .module-name { font-weight: 600; }
.module .module-state { font-size: .82rem; color: var(--muted); }
.module.locked { background: var(--surface-2); }
.module.locked .module-state { color: var(--accent-strong); }
/* ── Auth: a navy side panel + the form ──────────────────────────────────── */
.goal-split { max-width: 1060px; }
.auth-shell { align-items: stretch; padding: clamp(1.2rem, 4vw, 3rem) 20px 4rem; }
.auth-split {
width: 100%; max-width: 960px; margin: 0 auto; align-self: flex-start;
display: grid; grid-template-columns: .88fr 1.12fr;
border-radius: var(--r-xl); overflow: hidden; background: var(--surface);
border: 1px solid var(--line); box-shadow: var(--shadow-lg);
animation: fadeUp .5s var(--ease-out) both;
}
.auth-side { padding: clamp(1.6rem, 4vw, 2.6rem); display: flex; flex-direction: column; gap: 1.3rem; }
.auth-side::after { display: none; }
.auth-side .logo-plate { width: 66px; height: 66px; background: #fff; border-radius: 16px; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.auth-side .logo-plate img { height: 50px; width: auto; }
.auth-side h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: 1.08; margin: 0; color: var(--ink); }
.auth-side h2 .g-bn { font-size: .6em; font-weight: 400; color: var(--muted); }
.auth-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.auth-points li { display: flex; gap: .65rem; color: var(--text); font-size: .93rem; line-height: 1.5; }
.auth-points .icon { color: var(--accent-large); width: 20px; height: 20px; flex: none; margin-top: .15em; }
.auth-side .side-foot { margin-top: auto; font-size: .82rem; color: var(--muted); }
.auth-side .side-foot a { color: var(--accent-strong); }
.auth-main { padding: clamp(1.6rem, 4vw, 2.6rem); }
.auth-main h1 { font-size: clamp(1.8rem, 3vw, 2.3rem); margin: 0 0 .25rem; }
.auth-main .sub { margin: 0 0 1.4rem; color: var(--muted); }
.auth-main .field label { text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.auth-main .field label .g { display: inline; }
.auth-main .field label .g .g-bn { font-weight: 500; font-size: .92em; }
.auth-main .opt { font-weight: 500; color: var(--muted); font-size: .8rem; margin-left: .4rem; }
.auth-main .opt .g-inline .g-sep, .auth-main .opt .g-inline .g-bn { font-size: 1em; }
.auth-main .field .hint { margin-top: .3rem; }
.form-section { display: flex; align-items: center; gap: .7rem; margin: 1.5rem 0 .9rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-strong); }
.form-section::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.form-section .g-inline .g-bn { letter-spacing: 0; text-transform: none; font-weight: 600; }
.auth-main .checkline label { text-transform: none; letter-spacing: 0; font-size: .88rem; font-weight: 500; color: var(--text); margin: 0; }
.auth-main .auth-alt { margin-top: 1.2rem; }
@media (max-width: 820px) {
.auth-split { grid-template-columns: 1fr; }
.auth-side { flex-direction: row; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; }
.auth-side .logo-plate { width: 50px; height: 50px; border-radius: 12px; }
.auth-side .logo-plate img { height: 38px; }
.auth-side h2 { font-size: 1.35rem; }
.auth-points, .auth-side .side-foot { display: none; }
}
/* ── Misc ────────────────────────────────────────────────────────────────── */
.icon { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.auth-card .sub { color: var(--muted); }
.tagline .g .g-bn { color: inherit; opacity: .8; }
.site-foot .tagline { text-align: right; }
@media (max-width: 620px) { .site-foot .tagline { text-align: left; } }
/* ── Learn: curriculum browser ───────────────────────────────────────────── */
.container.narrow { max-width: 820px; }
.crumbs { font-size: .85rem; color: var(--muted); margin: 18px 0 6px; }
.crumbs a { color: var(--navy-700); }
.skill-block { margin: 26px 0 8px; }
.skill-title { font-size: 1.15rem; color: var(--ink); margin: 0 0 10px; }
.skill-title .bn { font-family: var(--font-bn); font-weight: 500; color: var(--muted); font-size: .9em; }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.topic-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.topic-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--ink); }
.topic-name { font-weight: 600; line-height: 1.3; }
.topic-bn { font-family: var(--font-bn); color: var(--muted); font-size: .9rem; }
.level-chip { display: inline-block; align-self: flex-start; padding: 2px 8px; border-radius: var(--r-pill); background: var(--navy-50); color: var(--navy-700); font-size: .72rem; font-weight: 700; letter-spacing: .03em; }
.level-chip.big { font-size: .9rem; padding: 5px 12px; }
.topic-mastery { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); margin-top: 4px; }
.topic-mastery .bar { flex: 1; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.topic-mastery .bar span { display: block; height: 100%; background: var(--gold); }
.bn-sub { display: block; font-family: var(--font-bn); font-size: .55em; font-weight: 500; color: var(--muted); margin-top: 4px; }
.mastery-line { color: var(--text); }
/* ── Topic page ──────────────────────────────────────────────────────────── */
.activity-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 28px; }
.activity { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); flex-wrap: wrap; }
.activity-text { display: flex; flex-direction: column; }
.activity-title { font-weight: 600; color: var(--ink); }
.activity-bn { font-family: var(--font-bn); color: var(--muted); font-size: .9rem; }
.btn.locked { opacity: .75; }
.lesson { margin-top: 12px; }
.lesson-intro { font-family: var(--font-bn); font-size: 1.05rem; line-height: 1.8; }
.items h2, .lesson h2 { font-size: 1.2rem; color: var(--ink); margin: 18px 0 10px; }
.passage-list { display: flex; flex-direction: column; gap: 8px; }
.passage-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
.passage-row:hover { box-shadow: var(--shadow-sm); color: var(--ink); }
.passage-title { font-weight: 600; flex: 1; }
.check-opt.right { border-color: var(--correct); background: var(--correct-bg); }
.check-opt.wrong { border-color: var(--wrong); background: var(--wrong-bg); }
/* (1 Sep) The dark-era formula-card ink patch that used to sit here was the
bug Asaf reported live — it repainted the heading white and the note
near-white AFTER the Daylight block had already re-inked the card for a
white ground, so the first card of 16 lessons was unreadable. The Daylight
block near the top of this sheet is the ONLY place that colours
.formula-card now — never re-ink it this far down the sheet. */
.formula { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.fpart { padding: 4px 10px; border-radius: var(--r-sm); background: var(--navy-50); color: var(--navy-700); font-weight: 600; }
.fplus { color: var(--muted); }
.fnote { color: var(--muted); font-size: .92rem; }
/* ── Practice feedback + summary ─────────────────────────────────────────── */
.feedback { margin: 14px auto 0; max-width: 640px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.fb-head { font-weight: 700; margin-bottom: 6px; }
.fb-head.ok { color: var(--correct); }
.fb-head.bad { color: var(--wrong); }
.fb-correct { font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.fb-bn { font-family: var(--font-bn); line-height: 1.8; }
.fb-en { color: var(--muted); margin-top: 4px; }
.fb-en.fb-only, .fb-bn.fb-only { color: var(--text); line-height: 1.75; } /* the one language shown IS the explanation, not a footnote */
.summary { max-width: 640px; margin: 24px auto; padding: 24px; text-align: center; }
.summary .big, .results .big, #vq-result .big { font-family: var(--font-display); font-size: 2.4rem; color: var(--ink); margin: 4px 0 14px; }
/* ── Vocabulary quiz ─────────────────────────────────────────────────────── */
.vq-q { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 14px 16px; margin: 0 0 12px; }
.vq-q legend { font-weight: 600; color: var(--ink); padding: 0 6px; }
.vq-q .q-num { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 50%; background: var(--gold-100); color: var(--accent-strong); font-size: .8rem; margin-right: 4px; }
.vq-sentence { color: var(--text); margin: 6px 0 8px; }
.vq-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.vq-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.vq-opt.is-answer { border-color: var(--correct); background: var(--correct-bg); }
.vq-opt.is-wrong { border-color: var(--wrong); background: var(--wrong-bg); }
.vq-q.ok legend::after { content: " ✓"; color: var(--correct); }
.vq-q.bad legend::after { content: " ✗"; color: var(--wrong); }
#vq-result { padding: 22px; margin-top: 18px; }
/* ── Passage exercise ────────────────────────────────────────────────────── */
.passage-h1 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ink); margin: 6px 0 12px; }
.audio-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 16px; }
.audio-box audio { width: 100%; margin-top: 6px; }
.cast-switch { display: flex; gap: 8px; margin-top: 8px; }
.passage-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .passage-layout { grid-template-columns: 1fr; } }
/* Phones: IELTS widgets carry wide intrinsic content (letter selects with long option
text, tables). Never let them widen the page — shrink, wrap, or scroll inside. */
.passage-layout > * { min-width: 0; }
.ielts .qg { overflow-x: auto; }
.ielts .match-select { min-width: 0; max-width: 100%; }
.ielts section.qg .q-num { flex-basis: auto; width: auto; min-width: 26px; padding: 0 .45em; border-radius: 999px; }
@media (max-width: 520px) {
.ielts .qg-match-row { flex-wrap: wrap; }
.ielts .qg-match-row .match-select { flex: 1 1 100%; }
}
.passage-pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; max-height: 70vh; overflow: auto; }
.passage-para { line-height: 1.75; margin: 0 0 1em; }
.labelled-para .para-letter { display: inline-block; font-weight: 700; color: var(--navy-700); margin-right: 8px; }
.questions-pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; }
.submit-dock { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.results { margin-top: 18px; padding: 22px; }
.passage-results { margin-top: 18px; padding: 0; }
.passage-results .completion { margin-top: 0; }
.passage-results .review-h { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin: 26px 0 4px; color: var(--ink); }
.passage-results .feedback-panel { margin-top: 12px; animation: none; }
.passage-results .fb-answer { margin: .15rem 0 .4rem; color: var(--text-primary); }
.passage-results .fb-answer .q-num { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .8rem; font-weight: 700; margin-right: 4px; vertical-align: middle; }
.passage-results .fb-en p { margin: 0 0 .35rem; }
.passage-results .fb-en p:last-child { margin-bottom: 0; }
.res-q { padding: 10px 0; border-top: 1px solid var(--line); }
.res-q.ok .res-head { color: var(--correct); }
.res-q.bad .res-head { color: var(--wrong); }
.res-head .q-num { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 50%; background: var(--navy-50); color: var(--navy-700); font-size: .8rem; margin-right: 6px; }
.res-bn { font-family: var(--font-bn); line-height: 1.8; margin: 6px 0 0; color: var(--text); }
.res-en { color: var(--muted); margin: 4px 0 0; font-size: .95rem; }
.ielts .qg-maplink { margin: 0 0 10px; }
/* ── Prompts (speaking / writing) ────────────────────────────────────────── */
.prompt-q { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--ink); margin: 6px 0 10px; }
.prompt-hero { padding: 20px 22px; margin: 10px 0 16px; }
.prompt-hero .prompt-q { margin-top: 8px; }
.prompt-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.part-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--navy); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.part-pill .icon { width: 14px; height: 14px; }
.prompt-lead { margin: 4px 0 10px; color: var(--text); }
.prompt-instr { margin: 10px 0 0; }
.prompt-hero audio, .model-answer audio { width: 100%; margin-top: 10px; }
.ma-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ma-head h3 { margin: 0; font-size: 1rem; color: var(--ink); }
.band-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 700; }
.band-chip.band-7 { background: var(--gold-100); color: var(--accent-strong); }
.band-chip.band-9 { background: var(--navy); color: #fff; }
.ma-phrases { margin-top: 8px; }
.prompt-actions { justify-content: flex-start; margin-top: 18px; }
.done-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-pill); background: var(--success-soft); color: var(--success-ink); font-weight: 700; }
.done-chip .icon { width: 18px; height: 18px; }
.done-chip.pop-in { animation: popIn var(--m-spring) both; }
.next-up { margin-top: 14px; padding: 16px 18px; }
.next-up .next-line { margin: 0 0 4px; font-weight: 600; }
.next-up .next-why { margin: 0 0 10px; font-size: .88rem; color: var(--text-muted); }
.next-up .btn { max-width: 100%; white-space: normal; }
.model-answer { padding: 18px 20px; margin: 14px 0; }
.model-answer h3 { margin: 0 0 10px; font-size: 1rem; color: var(--accent-strong); }
.ma-sent { margin: 0 0 10px; }
.ma-sent .en { display: block; color: var(--ink); }
.ma-sent .bn { display: block; font-family: var(--font-bn); color: var(--muted); font-size: .95rem; }
.chip { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); background: var(--gold-50); color: var(--accent-strong); margin: 2px 4px 2px 0; font-size: .85rem; }
.chip .bn { font-family: var(--font-bn); }
/* ── Admin ───────────────────────────────────────────────────────────────── */
.admin-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 4px; }
.admin-nav a { padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: .88rem; color: var(--navy-700); }
.admin-nav a.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 14px; }
.filters select, .filters input { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font: inherit; }
.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: .92rem; }
.admin-table th, .admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.admin-table input[type=text], .admin-table select, .admin-table textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-xs); font: inherit; }
.admin-table.wording textarea { min-width: 260px; }
.admin-table tr.overridden { background: var(--gold-50); }
.status-chip { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); font-size: .72rem; font-weight: 700; letter-spacing: .03em; background: var(--surface-2); color: var(--muted); margin-right: 4px; }
.status-chip.st-draft { background: var(--surface-2); color: var(--muted); }
.status-chip.st-review { background: var(--gold-100); color: var(--accent-strong); }
.status-chip.st-approved { background: var(--info-bg); color: var(--navy-700); }
.status-chip.st-published { background: var(--correct-bg); color: var(--correct); }
.status-chip.st-archived { background: var(--wrong-bg); color: var(--wrong); }
.status-chip.on { outline: 2px solid var(--navy); }
.workflow { padding: 14px 16px; margin: 10px 0 16px; }
.workflow-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.workflow-form input[type=text] { flex: 1; min-width: 200px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; }
.editor .field { margin-bottom: 12px; }
.editor textarea, .editor input[type=text], .editor input[type=number], .editor select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; background: var(--surface); }
.editor textarea[lang=bn] { font-family: var(--font-bn); }
.advanced { margin: 12px 0; } .advanced summary { cursor: pointer; color: var(--muted); }
.history li { margin: 2px 0; }
.pager { display: flex; gap: 8px; margin-top: 12px; }
/* ── Review queue: a topic on one page, one button ───────────────────────── */
.review-h { font-size: 1.15rem; color: var(--ink); margin: 22px 0 10px; }
.review-h .tiny { font-weight: 500; }
.review-summary p { margin: 0 0 8px; }
.rq-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 10px; }
.rq-card.rq-live { border-left: 4px solid var(--correct); }
.rq-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: .85rem; margin-bottom: 6px; }
.rq-pick { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; }
.rq-pick input { width: auto; margin: 0; accent-color: var(--gold-600); }
.rq-body .rq-line { margin: 4px 0; line-height: 1.55; }
.rq-body .bn { font-family: var(--font-bn); }
.rq-options { margin: 4px 0 6px 22px; padding: 0; }
.rq-options li { margin: 2px 0; }
.rq-options li.rq-right, .rq-right { color: var(--correct); font-weight: 600; }
.rq-tick { font-size: .8rem; font-weight: 600; }
.rq-seg { padding: 1px 4px; border-radius: var(--r-xs); }
.rq-seg.rq-wrong { background: var(--wrong-bg); color: var(--wrong); text-decoration: line-through; }
.rq-explain { border-left: 3px solid var(--gold-300); padding-left: 10px; margin-top: 8px; }
.review-lesson { margin-top: 4px; }
.review-submit { background: var(--surface); box-shadow: var(--shadow-md); }
@media (min-width: 760px) { .review-submit { position: sticky; bottom: 0; } } /* on a phone it would cover a third of the screen */
.review-submit .rq-pick { margin: 8px 0; }
.editor textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.inline-form { display: inline-block; margin: 4px 0 0; }
.activities { margin: 6px 0 14px; }
.activities-table input[type=text] { min-width: 180px; margin: 2px 0; }
.add-activity { margin-top: 10px; }
.block-edit { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px 4px; margin: 0 0 12px; background: var(--surface); }
.block-edit legend { font-weight: 700; font-size: .85rem; color: var(--navy-700); padding: 0 6px; display: flex; gap: 12px; align-items: center; }
.block-edit legend .rq-pick { font-weight: 500; color: var(--muted); }
.block-edit .field { margin-bottom: 8px; }
.block-edit .field label { font-size: .78rem; }
@media (max-width: 520px) { .review-submit .btn { white-space: normal; max-width: 100%; text-align: center; } }
/* ── Onboarding: welcome + goal ──────────────────────────────────────────── */
.welcome-steps { margin: 18px 0 26px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 520px) { .choice-grid { grid-template-columns: 1fr; } }
label.choice-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .95rem; color: var(--text); }
.choice-card input { width: auto; margin: 0; accent-color: var(--gold-600); }
.choice-card.selected { border-color: var(--navy); background: var(--navy-50); }
.choice-card .g .g-bn { margin-top: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
label.choice-pill { display: inline-flex; align-items: center; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--surface); cursor: pointer; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); }
.choice-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
label.choice-pill.selected { border-color: var(--navy); background: var(--navy); }
label.choice-pill.selected, label.choice-pill.selected span { color: #fff; }
.intro-icon .icon { width: 44px; height: 44px; color: var(--gold-700); margin-bottom: 6px; }
/* ── The test runner ─────────────────────────────────────────────────────── */
.test-head { padding: 1.4rem 0 1.2rem; }
.test-head h1 { font-size: clamp(1.3rem, 4vw, 1.7rem); }
.test-head h1 .bn { font-family: var(--font-bn); font-weight: 500; font-size: .8em; color: var(--muted); }
.test-head .head-level { background: var(--navy-50); color: var(--navy); margin-left: 6px; vertical-align: middle; }
.test-head .bn-sub { font-family: inherit; }
.test-head .bn-sub .bn { font-family: var(--font-bn); }
.test-head .crumbs { color: var(--muted); }
.test-shell { transition: max-width .2s; }
[hidden] { display: none !important; } /* the hidden attribute always wins over .btn / .flash display rules */
.test-shell.wide { max-width: 1100px; }
.test-shell .passage-pane { max-height: 60vh; }
.rating-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.rating-scale { display: flex; gap: 8px; margin-top: 8px; }
.rating-btn { flex: 1; padding: 12px 0; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); font: inherit; font-weight: 700; color: var(--navy-700); cursor: pointer; }
.rating-btn.selected { background: var(--navy); border-color: var(--navy); color: #fff; }
#sample { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); font: inherit; }
.dock-note .bn { font-family: var(--font-bn); }
.action-dock .btn-sm { white-space: nowrap; }
/* ── Results ─────────────────────────────────────────────────────────────── */
.results-page .skill-title { margin: 26px 0 10px; }
.result-hero { display: grid; grid-template-columns: 1fr 2fr; gap: 18px; padding: 22px; align-items: center; }
@media (max-width: 680px) { .result-hero { grid-template-columns: 1fr; } }
.result-level { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.result-level .label, .stat .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.result-level .label .g .g-bn, .stat .label .g .g-bn { text-transform: none; letter-spacing: 0; font-size: .9em; }
.level-big { font-family: var(--font-display); font-size: 3.2rem; line-height: 1; color: var(--navy); font-weight: 700; }
.level-name { font-weight: 600; color: var(--ink); }
.level-name .bn { font-family: var(--font-bn); font-weight: 500; color: var(--muted); }
.result-ielts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 520px) { .result-ielts { grid-template-columns: 1fr; } }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--surface-2); border-radius: var(--r-md); }
.stat-big { font-family: var(--font-display); font-size: 1.9rem; color: var(--ink); line-height: 1.1; }
.start-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; margin-top: 16px; border-left: 4px solid var(--gold); }
.start-icon .icon { width: 30px; height: 30px; color: var(--gold-700); }
.start-sentence { font-size: 1.12rem; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.start-sentence .g .g-bn { font-weight: 500; font-size: .95em; }
.skill-rows { padding: 8px 18px; }
.skill-row { display: grid; grid-template-columns: 1.2fr 1.5fr 1.6fr; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.skill-row:last-child { border-bottom: 0; }
@media (max-width: 640px) { .skill-row { grid-template-columns: 1fr; gap: 6px; } }
.skill-name { font-weight: 600; color: var(--ink); }
.skill-name .bn { font-family: var(--font-bn); font-weight: 500; color: var(--muted); font-size: .9em; }
.skill-bar { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.skill-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-600)); }
.skill-meta { font-size: .92rem; color: var(--text); }
.chips .chip { margin: 2px 6px 6px 0; }
.counselor-box { margin-top: 26px; padding: 18px 20px; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.counselor-box p { margin: 0; }
.history-list { padding-left: 18px; }
.level-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* ── Phase 3: header on phones, next activity, tasks, progress, roadmap ───── */
.head-signout .icon { display: none; width: 18px; height: 18px; }
@media (max-width: 520px) {
.brand-sub { display: none; } /* "BayRen" alone — room for the links */
.head-nav { gap: .15rem; }
.head-link { padding: .4rem .5rem; }
.head-signout .head-link-text { display: none; }
.head-signout .icon { display: inline-block; vertical-align: -4px; }
.head-signout { padding: .4rem .45rem; flex: none; } /* the icon must never be squeezed */
/* Long bilingual button labels wrap inside the button instead of widening the page */
.qcard-actions .btn, .next-card .btn, .hero-actions .btn, .lesson-done .btn, .summary .btn, .abroad-card .btn { white-space: normal; max-width: 100%; text-align: center; }
}
/* A long unbreakable label can never push a card past the screen edge */
@media (max-width: 760px) { .four-grid { grid-template-columns: minmax(0, 1fr); } }
.qcard { min-width: 0; }
.icon-hint { width: 1.05em; height: 1.05em; vertical-align: -0.18em; color: var(--gold-700); }
.next-line { font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.next-line .g .g-bn { font-weight: 500; }
.next-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; margin: 14px 0 22px; border-left: 4px solid var(--gold); }
.next-card form { display: inline; }
.tasks { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.tasks h3 { margin: 0 0 8px; font-size: .95rem; color: var(--ink); }
.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.task { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; }
.task-mark { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.task.done .task-mark { background: var(--correct); border-color: var(--correct); }
.task.done .task-mark .icon { width: 13px; height: 13px; }
.task-link { display: flex; flex-direction: column; color: var(--ink); min-width: 0; }
.task.done .task-link { color: var(--muted); text-decoration: line-through; }
.task-title { font-weight: 600; line-height: 1.3; }
.task-min { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.stat-rows { display: flex; flex-direction: column; gap: 6px; }
.stat-row { margin: 0; display: flex; align-items: center; gap: 8px; }
.stat-row .icon { width: 18px; height: 18px; color: var(--gold-700); flex: none; }
.stat-row .g-inline .g-bn { font-size: .9em; }
.stat-sub { margin: 14px 0 6px; font-size: .95rem; color: var(--ink); }
.progress-bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; margin: 4px 0 2px; }
.progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-600)); }
.skill-mini { display: flex; flex-direction: column; gap: 6px; }
.skill-mini-row { display: grid; grid-template-columns: minmax(110px, 1.2fr) 2fr 42px; gap: 10px; align-items: center; font-size: .9rem; }
.skill-mini-row .skill-bar { height: 8px; }
.skill-mini-name .bn { font-family: var(--font-bn); font-size: .88em; }
.skill-mini-pct { text-align: right; color: var(--muted); font-size: .82rem; }
@media (max-width: 420px) { .skill-mini-row { grid-template-columns: 1fr 1.4fr 40px; } }
.verdict { margin: 0 0 14px; font-weight: 600; }
.verdict.mastered, .verdict.passed { color: var(--correct); }
.verdict.failed { color: var(--wrong); }
.verdict .g .g-bn { font-weight: 500; color: inherit; opacity: .85; }
.lesson-done { margin: 16px 0 6px; }
.activity.is-done .activity-title { color: var(--muted); }
.activity.is-done .activity-title .icon { color: var(--correct); }
/* Roadmap list */
.roadmap { list-style: none; margin: 8px 0 40px; padding: 0; }
.rm-topic { display: flex; align-items: center; gap: 10px; margin: 22px 0 8px; flex-wrap: wrap; }
.rm-topic-name { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.rm-topic-bn { font-family: var(--font-bn); color: var(--muted); }
.rm-step { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; margin: 0 0 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.rm-step.current { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-100); }
.rm-step.done { background: var(--surface-2); }
.rm-step.done .rm-title { color: var(--muted); }
.rm-step.skipped { opacity: .6; }
.rm-mark { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--navy-700); }
.rm-mark .icon { width: 14px; height: 14px; }
.rm-step.done .rm-mark { background: var(--correct); border-color: var(--correct); color: #fff; }
.rm-step.current .rm-mark { border-color: var(--gold-600); color: var(--gold-700); }
.rm-step.locked .rm-mark { color: var(--muted); }
.rm-text { display: flex; flex-direction: column; min-width: 0; }
.rm-title { font-weight: 600; color: var(--ink); line-height: 1.3; }
.rm-bn { font-family: var(--font-bn); color: var(--muted); font-size: .9rem; }
.rm-state { white-space: nowrap; }
@media (max-width: 520px) {
.rm-step { grid-template-columns: 24px 1fr; }
.rm-state { grid-column: 2; justify-self: start; }
}
.rm-step.optional { border-style: dashed; }
.rm-step.optional .rm-title { font-weight: 500; }
/* ── Admin analytics ─────────────────────────────────────────────────────── */
.an-grid .qcard { min-height: 0; }
.an-big { font-family: var(--font-display); font-size: 2rem; color: var(--ink); margin: 0 0 4px; line-height: 1.1; }
.an-big .an-label { font-family: var(--font-body, inherit); font-size: .9rem; color: var(--muted); font-weight: 500; }
.an-table { margin: 10px 0 4px; font-size: .85rem; }
.an-table th, .an-table td { padding: 5px 8px; }
.an-bars { display: flex; align-items: flex-end; gap: 3px; height: 48px; margin-top: 10px; }
.an-bar { flex: 1; min-height: 2px; background: var(--gold); border-radius: 2px 2px 0 0; opacity: .85; }
.an-pair { flex: 1; display: flex; gap: 1px; align-items: flex-end; height: 100%; }
.an-bar-b { background: var(--navy); opacity: .7; }
.an-mini-title { margin: 12px 0 2px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-strong); }
/* ── Study-abroad plan ──────────────────────────────────────────────────── */
.abroad-card { margin-bottom: 14px; }
.abroad-card .skill-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.abroad-card .skill-title .icon { width: 20px; height: 20px; color: var(--gold-700); }
.abroad-card .skill-title .tier-chip { margin-left: auto; }
.abroad-line { margin: 6px 0; }
.abroad-note { margin-top: 12px; }
.doc-list { list-style: none; padding: 0; margin: 8px 0 12px; }
.doc-list .doc { padding: 8px 0; border-bottom: 1px solid var(--line); }
.doc-list .doc.done .g-en, .doc-list .doc.done .g-bn { color: var(--muted); text-decoration: line-through; }
.doc-pick { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; text-transform: none; letter-spacing: 0; }
.doc-pick input { margin-top: 6px; accent-color: var(--gold-600); }
.timeline { padding-left: 20px; margin: 8px 0 0; }
.timeline li { margin-bottom: 12px; }
.counselor-box { border-left: 4px solid var(--gold-600); }
/* ── Practice in focus mode (Phase 3) ───────────────────────────────────── */
.practice-shell { max-width: 680px; padding: 1.2rem 20px 8rem; }
.focus-note { max-width: 680px; margin: .5rem auto 0; padding: 0 20px; font-size: .92rem; }
.q-title { font-size: 1.02rem; font-weight: 600; color: var(--text-secondary); margin: .6rem 0 .7rem; }
.q-sentence { font-size: 1.35rem; border-radius: var(--r-lg); padding: 1.25rem 1.4rem; box-shadow: var(--elev-1); }
.focus-head.is-done .progress > i { background: var(--success); }
.action-dock { box-shadow: 0 -8px 24px rgba(11,42,73,.06); }
.action-dock .btn-lg { padding: .85rem 2rem; }
@media (max-width: 520px) {
.action-dock .inner { flex-direction: column; align-items: stretch; gap: .5rem; }
.action-dock .dock-note { text-align: center; }
.action-dock .btn-lg { width: 100%; }
.action-dock .dock-note:empty { display: none; }
}
/* ── Dashboard as a journey (Phase 3) ───────────────────────────────────── */
.dash { padding-top: clamp(1.6rem, 4vw, 2.6rem); }
.dash-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.dash-top h1 { margin: 0 0 .7rem; }
.dash-top .coach-line { max-width: 56ch; }
.journey-strip { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-5) var(--s-7); align-items: center; padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.1rem, 3vw, 1.8rem); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--elev-1); margin-bottom: var(--s-5); position: relative; overflow: hidden; }
.journey-strip::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--accent), var(--accent-strong)); }
.js-level { display: flex; align-items: center; gap: var(--s-4); margin-top: .5rem; }
.js-level .big-chip { font-family: var(--font-display); font-weight: 600; font-size: 2.1rem; line-height: 1; color: var(--navy); background: var(--surface); border: 1.5px solid var(--navy); border-radius: 14px; padding: .5rem .7rem .4rem; font-variant-numeric: lining-nums; }
.js-level .big-chip.muted-chip { background: var(--surface-sunken); color: var(--text-muted); }
.js-level-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.js-level-text strong { font-size: 1.15rem; color: var(--text-primary); }
.js-level-text .t-caption b { color: var(--text-primary); }
.js-right { display: flex; flex-direction: column; gap: .7rem; }
.js-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.js-pills .lvl-n { font-weight: 500; opacity: .8; }
@media (max-width: 760px) { .journey-strip { grid-template-columns: 1fr; } }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; margin-bottom: var(--s-8); }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-main, .dash-side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.dash .card { padding: var(--s-5); border-radius: var(--r-lg); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.card-head h3 { margin: 0; }
.feature-card .fc-bn { font-family: var(--font-bn); color: var(--muted); margin: 0 0 .4rem; }
.feature-card .fc-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.hero-empty { background: var(--surface); border-style: solid; padding: clamp(1.6rem, 4vw, 2.4rem); }
.hero-empty .es-icon { width: 64px; height: 64px; }
.goal-summary p { margin: 0 0 .8rem; }
.goal-summary .btn + .btn { margin-left: .4rem; }
.modules { margin-bottom: 2rem; }
.modules h2 { margin: 0 0 .2rem; }
.modules .module-grid { margin-top: .8rem; }
.dash .coach-line .icon { color: var(--accent-strong); }
/* ── Roadmap as a journey (Phase 3) ─────────────────────────────────────── */
.roadmap-page .page-head { margin-top: 0; }
.rm-progress { flex-direction: column; align-items: flex-end; gap: .3rem; }
.rm-now { margin-bottom: var(--s-5); }
.rm-now form { display: inline; }
.unit .level-chip { font-size: .68rem; }
.unit-head .unit-meta .pill { padding: .22rem .6rem; font-size: .74rem; }
.step .rm-bn { font-family: var(--font-bn); color: var(--text-muted); font-size: .9rem; }
@media (max-width: 620px) {
.rm-progress { align-items: flex-start; }
.unit-head { padding: var(--s-3) var(--s-4); gap: var(--s-2); }
.unit-head .unit-prog { display: none; }
.unit-steps { padding-left: calc(var(--s-4) + 14px); padding-right: var(--s-4); }
.unit-steps::before { left: calc(var(--s-4) + 13px); }
.step { flex-wrap: wrap; }
.step .step-go { width: 100%; padding-left: 0; }
.step .step-go .btn { width: 100%; }
}
/* ── Topic page: hero + path (Phase 3) ──────────────────────────────────── */
.topic-hero { display: grid; grid-template-columns: 1fr auto; gap: var(--s-5) var(--s-7); align-items: center; margin: var(--s-4) 0 var(--s-6); }
.topic-hero h1 { margin: .3rem 0 .4rem; }
.topic-hero .t-lead { margin: 0; max-width: 52ch; }
.topic-hero .crumbs { margin: 0; }
.topic-mastery-card { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--elev-1); min-width: 260px; }
.topic-mastery-card .ring-wrap { position: relative; width: 84px; height: 84px; flex: none; }
.topic-mastery-card .ring { width: 84px; height: 84px; }
.topic-mastery-card .ring circle { stroke-width: 11; }
.topic-mastery-card .ring-label { position: absolute; inset: 0; display: grid; place-items: center; }
.topic-mastery-card .ring-label b { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1; color: var(--text-primary); font-variant-numeric: lining-nums; }
.topic-mastery-card .ring-label > span { font-size: .68rem; color: var(--text-muted); display: block; text-align: center; }
.tm-text { display: flex; flex-direction: column; gap: .15rem; }
.tm-state { font-size: 1.15rem; color: var(--text-primary); }
.tm-state.state-mastered { color: var(--success-ink); }
.tm-state.state-developing { color: var(--accent-strong); }
@media (max-width: 700px) { .topic-hero { grid-template-columns: 1fr; } .topic-mastery-card { min-width: 0; } }
.path-title { margin: 0 0 var(--s-3); }
.path { position: relative; display: flex; flex-direction: column; gap: var(--s-2); margin: 0 0 var(--s-7); padding-left: 18px; }
.path::before { content: ''; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--background-deep); }
.path-step { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: .8rem 1rem .8rem 1.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); flex-wrap: wrap; }
.path-step .path-dot { position: absolute; left: -18px; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); display: grid; place-items: center; font-weight: 700; font-size: .82rem; color: var(--text-muted); }
.path-step .path-dot .icon { width: 16px; height: 16px; }
.path-step.is-done .path-dot { background: var(--success); border-color: var(--success); color: #fff; }
.path-step.is-done .activity-title { color: var(--text-muted); }
.path-step.is-current { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-faint); }
.path-step.is-current .path-dot { background: var(--accent); border-color: var(--accent); color: var(--navy-900); }
.path-step.is-side { background: var(--surface-sunken); border-style: dashed; }
.path-step .activity-text { flex: 1; min-width: 0; }
.path-step .activity-title { font-weight: 600; color: var(--text-primary); }
/* ── Test intro + results reveal ────────────────────────────────────────── */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-6); text-align: left; margin: var(--s-5) 0; padding: var(--s-4) var(--s-5); background: var(--accent-faint); border-radius: var(--r-lg); border: 1px solid var(--gold-300); }
.intro-list { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.intro-list li { display: flex; align-items: flex-start; gap: .6rem; color: var(--text-primary); font-size: .95rem; line-height: 1.4; }
.intro-list .icon { width: 18px; height: 18px; color: var(--accent-strong); flex: none; margin-top: .15em; }
@media (max-width: 560px) { .intro-grid { grid-template-columns: 1fr; } }
.reveal-pop { display: inline-block; animation: popIn var(--m-spring) .2s both; }
/* ── Landing: the journey band + "a day at the Academy" ─────────────────── */
.journey-band { padding: clamp(2.6rem, 6vw, 4.5rem) 0; }
.jb-head { max-width: 640px; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.jb-head h2 { margin: .4rem 0 .5rem; }
.jb-head .t-lead { margin: 0; }
.levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-3); position: relative; }
.levels::before { content: ''; position: absolute; left: 8%; right: 8%; top: 26px; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-strong) 30%, var(--primary) 100%); border-radius: 2px; opacity: .6; }
.level-node { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; }
.level-node .ln-dot { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 3px solid var(--primary); color: var(--primary); font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; font-variant-numeric: lining-nums; box-shadow: 0 0 0 6px var(--background-deep); }
.level-node .ln-dot .icon { width: 24px; height: 24px; }
.level-node.is-start .ln-dot { background: var(--accent); border-color: var(--accent); color: var(--navy-900); }
.level-node.is-end .ln-dot { background: var(--primary); color: var(--accent); }
.level-node .ln-name { font-weight: 600; color: var(--text-primary); font-size: .95rem; line-height: 1.2; margin-top: .3rem; }
.level-node .ln-cefr { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--text-muted); }
@media (max-width: 760px) {
.levels { grid-template-columns: repeat(3, 1fr); gap: var(--s-5) var(--s-3); }
.levels::before { display: none; }
}
.loop-section { padding: clamp(2.6rem, 6vw, 4.5rem) 0 0; }
.loop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.loop-item h3 { margin: var(--s-4) 0 .3rem; font-size: 1.3rem; }
.loop-item p { margin: 0; color: var(--text-secondary); }
.loop-demo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4); min-height: 250px; display: flex; flex-direction: column; gap: var(--s-3); justify-content: center; box-shadow: var(--elev-1); }
.loop-demo .path-step.demo { padding: .7rem .9rem .7rem 1.3rem; margin-left: 18px; }
.loop-demo .q-sentence.demo { font-size: 1.1rem; padding: .8rem 1rem; margin: 0; }
.loop-demo .option-card { padding: .65rem .85rem; font-size: .95rem; pointer-events: none; }
.loop-demo .feedback-panel.demo { margin: 0; padding: .7rem .9rem; }
.loop-demo .feedback-panel .fb-title { font-size: 1.1rem; margin: 0; }
.loop-demo .feedback-panel .fb-icon { width: 30px; height: 30px; }
.loop-demo .feedback-panel .fb-xp { margin-top: .2rem; }
.loop-demo-rewards .badge-grid { grid-template-columns: repeat(3, 1fr); }
.loop-demo-rewards .badge-tile { padding: var(--s-2); }
.loop-demo-rewards .badge-tile .badge-icon { width: 44px; height: 44px; }
@media (max-width: 860px) { .loop-grid { grid-template-columns: 1fr; } .loop-demo { min-height: 0; } }
/* ── "Why this next" (Phase 6) ──────────────────────────────────────────── */
.feature-card .fc-why { display: flex; align-items: flex-start; gap: .4rem; margin: .2rem 0 .6rem; color: var(--accent-strong); font-size: .92rem; line-height: 1.45; }
.feature-card .fc-why .icon { width: 16px; height: 16px; flex: none; margin-top: .2em; }
.feature-card .fc-why .bn { color: var(--muted); }
/* ── Profile / achievements (Phase 7) ───────────────────────────────────── */
.me-hero { display: flex; align-items: center; gap: var(--s-6); padding: var(--s-5) var(--s-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--elev-1); margin-bottom: var(--s-5); }
.me-ring { position: relative; width: 110px; height: 110px; flex: none; }
.me-ring .ring { width: 110px; height: 110px; }
.me-ring .ring-label { position: absolute; inset: 0; display: grid; place-items: center; }
.me-ring .ring-label b { font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1; color: var(--text-primary); font-variant-numeric: lining-nums; display: block; text-align: center; }
.me-ring .ring-label > span { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.me-text { flex: 1; min-width: 0; }
.me-text h2 { margin: .2rem 0 .6rem; }
.me-stats { padding: var(--s-4) var(--s-5); background: var(--accent-faint); border: 1px solid var(--gold-300); border-radius: var(--r-lg); justify-content: space-between; }
.me-badges { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.xp-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.xp-history li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-3); align-items: center; padding: .65rem var(--s-4); border-top: 1px solid var(--border); }
.xp-history li:first-child { border-top: 0; }
.xp-history .xh-kind { font-weight: 500; color: var(--text-primary); }
.xp-history .xh-amt { font-weight: 700; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.head-me .icon { width: 18px; height: 18px; }
.pill.pill-level:hover { color: var(--gold-300); }
@media (max-width: 560px) { .me-hero { flex-direction: column; align-items: flex-start; } .xp-history li { grid-template-columns: 1fr auto; } .xp-history .xh-date { display: none; } }
/* ── Level test in focus mode (Phase 7) ─────────────────────────────────── */
.test-focus .quiz-timer { background: var(--primary-soft); color: var(--primary); font-variant-numeric: tabular-nums; }
.test-focus .quiz-timer.warn { background: var(--warning-soft); color: var(--warning); }
.test-focus .quiz-timer.danger { background: var(--danger-soft); color: var(--danger-ink); }
.btn.danger { color: var(--danger-ink); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); }
.media-delete { margin-top: 4px; }
.test-title { align-items: flex-start; }
.test-title h1 { margin: .2rem 0 .2rem; }
.test-title #part-instr { margin: 0; }
.test-title #q-note { margin-left: auto; }
.test-shell { padding-top: var(--s-4); }
@media (max-width: 520px) { .test-focus .quiz-timer { padding: .3rem .55rem; font-size: .8rem; } .test-title #q-note { width: 100%; margin-left: 0; } }
/* ── Learn library (Phase 7) ────────────────────────────────────────────── */
.library .unit-no .icon { width: 20px; height: 20px; }
.lib-skill .unit-head .unit-meta .pill { padding: .2rem .55rem; font-size: .72rem; }
.lib-levels { padding: 0 var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.lib-level h3 { margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; font-family: var(--font-body); }
.lib-level h3 .pill { padding: .18rem .5rem; font-size: .68rem; letter-spacing: 0; text-transform: none; }
.lib-level.is-mine { padding: var(--s-3); margin: 0 calc(-1 * var(--s-3)); border-radius: var(--r-md); background: var(--accent-faint); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-2); }
.lib-topic { display: flex; flex-direction: column; gap: .35rem; padding: .7rem .85rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); color: var(--text-primary); transition: transform var(--m-fast), box-shadow var(--m-fast), border-color var(--m-fast); }
.lib-topic:hover { transform: translateY(-1px); box-shadow: var(--elev-1); border-color: var(--border-strong); color: var(--text-primary); }
.lib-topic .lib-name { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.lib-topic .lib-state { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--text-muted); }
.lib-topic .lib-state .icon { width: 13px; height: 13px; }
.lib-topic.state-mastered { border-color: var(--correct-edge); }
/* The six skill units of the library sit in a br-cycle: the icon plate and
the progress take the unit's hue; a mastered topic keeps the signal. */
.lib-skill .unit-head .unit-no { background: var(--tone-tint); color: var(--tone); }
.lib-skill .unit-head .progress > i { background: var(--tone); }
.lib-skill .lib-topic:hover { border-color: var(--tone-edge); }
.lib-skill .lib-topic .progress > i { background: var(--tone); }
.lib-topic.state-mastered .lib-state { color: var(--success-ink); }
.lib-topic.state-developing .lib-state { color: var(--accent-strong); }
.lib-topic.state-learning .lib-state, .lib-topic.state-practising .lib-state { color: var(--primary-hover); }
.lib-topic .progress { margin-top: .1rem; }
@media (max-width: 560px) { .lib-grid { grid-template-columns: 1fr 1fr; } .lib-levels { padding: 0 var(--s-4) var(--s-4); } }
/* ── Accessibility helpers ──────────────────────────────────────────────── */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: .6rem 1rem; border-radius: var(--r-sm); background: var(--primary); color: #fff; font-weight: 600; transition: top var(--m-fast); }
.skip-link:focus { top: 12px; outline: none; box-shadow: var(--glow-gold); }
.head-link[aria-current="page"] { color: var(--navy); background: var(--gold-100); }
/* ── Level test part map ────────────────────────────────────────────────── */
.part-map { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: .4rem; }
.pm-dot { flex: 1; height: 6px; border-radius: 3px; background: var(--background-deep); position: relative; }
.pm-dot.is-done { background: var(--success); }
.pm-dot.is-current { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-faint); }
/* ── Admin: pictures gallery ────────────────────────────────────────────── */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-3); }
.media-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.media-tile img { width: 100%; height: 130px; object-fit: cover; display: block; background: var(--surface-sunken); }
.media-tile .media-meta { padding: .6rem .7rem; display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; }
.media-tile code { font-size: .72rem; word-break: break-all; }
.media-tile.is-unused { border-style: dashed; }
/* ── The live-course page (/course — the free-taste wall lands here) ─────── */
.course-facts { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .55rem; }
.course-facts li { display: flex; gap: .55rem; align-items: flex-start; }
.course-facts li .icon { color: var(--gold-ink, #8a6d1f); flex: 0 0 auto; margin-top: .2rem; }
.course-fee { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
padding: .8rem 1rem; margin: 1rem 0; border: 1px solid var(--border);
border-radius: var(--r-md); background: var(--surface-sunken); }
.course-fee .fee { font-size: 1.6rem; font-family: var(--font-display, inherit); }
/* ── Command centre (directive v2 §1–4, 2026-08-25) ─────────────────────────
The dashboard's priority order made visual: ONE dominant next-step panel,
then a compact journey strip, then a single merged Today card. Density over
whitespace — the desktop dashboard aims at one screen. */
/* 1 · the next-step panel outranks everything else on the page */
.next-panel { position: relative; margin-bottom: var(--s-4);
box-shadow: var(--shadow-md), 0 0 0 1px rgba(216, 176, 76, .35);
padding: clamp(1.4rem, 3.4vw, 2.2rem) clamp(1.3rem, 3.4vw, 2.2rem); }
.next-panel h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
.next-panel .eyebrow { color: var(--accent-strong); letter-spacing: .18em; }
/* the consequence line: what finishing this unlocks (v2 §1.4) */
.next-panel .fc-after { margin: .1rem 0 .55rem; color: var(--text); font-size: .95rem;
padding-left: .75rem; border-left: 3px solid var(--accent); line-height: 1.45; }
/* 2 · journey strip: tighter, with the goal folded into the caption */
.journey-strip { margin-bottom: var(--s-4); }
.journey-strip .js-links { display: block; margin-top: .15rem; }
.journey-strip .js-links a { color: var(--accent-strong); text-decoration: none; }
.journey-strip .js-links a:hover { text-decoration: underline; }
/* 3 · Today: goal + tasks share one card; the goal row loses its own chrome */
/* 4 · density: the dashboard breathes less, reads faster */
.dash { padding-top: clamp(1.1rem, 3vw, 1.8rem); }
.dash-top { margin-bottom: var(--s-4); }
.dash-top h1 { margin-bottom: .45rem; }
.dash .card { padding: var(--s-4); }
.dash-grid { gap: var(--s-4); margin-bottom: var(--s-6); }
.dash .card .card-head { margin-bottom: var(--s-3); }
.modules { margin-bottom: 1.4rem; }
/* phone fixes (390px audit, 2026-08-25): the panel's long titles must wrap
(grid items default to min-width:auto), and the header must fit */
.feature-card > div { min-width: 0; }
.next-panel h2, .next-panel .fc-bn { overflow-wrap: break-word; }
@media (max-width: 430px) {
.site-head .inner { padding-inline: .6rem; }
.head-nav { gap: .05rem; }
.head-link { padding: .5rem .38rem; font-size: .92rem; }
}
/* ── Lesson stepper (directive v2 §5, 2026-08-25): learn → check → continue.
With JS one part shows at a time; the dots fill as the student advances;
the mark-read button waits at the final part. No JS = everything visible. */
/* The lesson is a PLAYER now (static/js/lesson.js); this page keeps the whole
text as a disclosure — revision, and the path without JavaScript. */
.lesson.read-all { margin-top: var(--s-6); border-top: 1px solid var(--border); padding-top: var(--s-4); }
.lesson.read-all > summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) 0; }
.lesson.read-all > summary::-webkit-details-marker { display: none; }
.lesson.read-all > summary::before { content: "+"; float: right; font-size: 1.4rem; line-height: 1; color: var(--text-muted, #6b7888); }
.lesson.read-all[open] > summary::before { content: "\2212"; }
.lesson.read-all > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lesson.read-all .ra-title { font-weight: 700; color: var(--ink, var(--text-primary)); }
/* A concept card shows two examples; the rest wait behind one line. */
.more-examples { margin-top: var(--s-2); }
.more-examples > summary { cursor: pointer; font-size: .9rem; color: var(--text-secondary, #55606e); padding: 4px 0; }
.more-examples > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* "Which one is right?" — a mistake pair turned into a decision. */
.lesson-pick h3 { margin: 0 0 4px; font-size: 1.15rem; }
.lesson-pick .t-caption { display: block; margin-bottom: var(--s-4); }
.lesson-pick .option-card { text-align: left; }
.lesson-shell .concept-card, .lesson-shell .ielts-card { margin: 0; }
/* ── Sub-areas (directive v2 §7) — a topic's taught areas as small focused
sets. The cards are the learn-library pattern; gated cards go quiet. */
.sub-areas { margin: var(--s-6) 0 0; }
.sub-areas .t-caption { margin: .2rem 0 var(--s-3); color: var(--text-muted); }
.sub-areas .gate-cta { margin: 0 0 var(--s-3); font-size: .85rem; color: var(--text-secondary); flex-direction: row; align-items: center; gap: .45rem; }
.sub-areas .gate-cta .icon { width: 15px; height: 15px; flex: none; color: var(--accent-strong); }
.lib-topic.is-gated { opacity: .6; }
.lib-topic.is-gated:hover { transform: none; box-shadow: none; border-color: var(--border); }
/* ── Mastery gate (directive v2 §8, ships dark) — a gated step explains
itself: lock + why + how, never a dead button. Warm, not punitive. */
.gate-chip { display: inline-flex; align-items: flex-start; gap: .45rem; max-width: 34ch;
font-size: .85rem; line-height: 1.45; color: var(--text-secondary);
background: var(--surface-sunken); border: 1px dashed var(--border-strong, var(--border));
border-radius: var(--r-md); padding: .5rem .7rem; }
.gate-chip .icon { width: 15px; height: 15px; flex: none; margin-top: .15em; color: var(--accent-strong); }
.gate-chip b { color: var(--text-primary); font-weight: 700; }
.gate-cta { display: inline-flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.gate-open { color: var(--success-ink, var(--text-secondary)); }
.gate-notice { display: flex; align-items: center; gap: .5rem; }
.gate-notice .icon { width: 16px; height: 16px; flex: none; }
/* ── The learning controller (25 Aug): Continue · Today · Journey ────────── */
.dash-lc .dash-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.dash-status { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dash-duo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.continue-card { padding: 1.4rem 1.5rem; }
.continue-card h2 { margin: .25rem 0 .5rem; font-size: 1.45rem; }
.continue-card .fc-meta { display: flex; gap: 1rem; align-items: center; }
.today-card .task-list { margin: .4rem 0 0; }
.today-line { display: flex; align-items: center; gap: .4rem; margin: .8rem 0 0; }
.today-card.is-done .today-line { color: var(--success); }
.journey-sm { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.2rem; display: grid; gap: .8rem; }
.journey-sm .js-level { display: flex; gap: .8rem; align-items: center; }
.jp-path { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; }
.jp-node { display: inline-flex; align-items: center; gap: .45rem; padding: .15rem 0; }
.jp-node + .jp-node::before { content: ""; width: 26px; height: 2px; background: var(--border-strong); margin: 0 .55rem; }
.jp-dot { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; background: var(--surface); flex: none; }
.jp-dot .icon { width: .7rem; height: .7rem; }
.jp-node.is-done .jp-dot { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.jp-node.is-current .jp-dot { border-color: var(--accent-strong); background: var(--accent); }
.jp-node.is-current .jp-name { font-weight: 600; }
.jp-node.is-upcoming { color: var(--muted); }
.jp-building { margin: 0; }
@media (max-width: 760px) {
.dash-duo { grid-template-columns: 1fr; }
.dash-lc .dash-top { flex-direction: column; gap: .5rem; }
}
/* ── One-time hint card ────────────────────────────────────────────────────── */
.hint-card {
display: flex; gap: 12px; align-items: flex-start;
max-width: 720px; margin: 0 auto 16px; padding: 14px 16px;
background: #fffdf5; border: 1px solid var(--gold, #d8b04c); border-radius: 12px;
box-shadow: 0 4px 14px rgba(216, 176, 76, .18);
}
.hint-card .hint-ic svg { width: 20px; height: 20px; color: var(--gold, #d8b04c); margin-top: 2px; }
.hint-card .hint-body { flex: 1; font-size: .95rem; line-height: 1.55; }
.hint-card .btn { flex: none; }
/* ── The one-go micro-lesson entrance (26 Aug) ────────────────────────────── */
.onego-card {
display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
margin: 18px 0 24px; padding: 22px 24px;
background: linear-gradient(168deg, #fffdf5 0%, #fff 70%);
border: 1px solid var(--gold, #d8b04c); border-radius: 14px;
box-shadow: 0 8px 24px rgba(216, 176, 76, .14);
}
.onego-card .onego-text { flex: 1 1 320px; }
.onego-card h2 { margin: 0 0 6px; font-size: 1.25rem; }
.onego-card p { margin: 0; color: var(--muted, #6b7888); font-size: .95rem; line-height: 1.55; }
/* 13 Sep 2026: the card lost its heading — it said the same thing as the line
under it, in worse Bangla. The line carries the card now, so it takes the
heading's weight instead of the caption's. */
.onego-card p.onego-line { color: var(--ink, #0b2a49); font-size: 1.05rem; font-weight: 600; line-height: 1.7; }
.onego-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.onego-skip { display: flex; flex-direction: column; gap: 2px; }
.onego-skip .t-caption { padding-left: 4px; }
/* per-question review at the end of a check */
.set-review { max-width: 640px; margin: 18px auto 6px; text-align: left; }
.set-review h3 { margin: 0 0 12px; font-size: 1.05rem; }
.set-review .rv { border: 1px solid var(--line, #e7ebf1); border-left-width: 4px; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.set-review .rv.ok { border-left-color: #2e9e6b; }
.set-review .rv.bad { border-left-color: #c0392b; }
.set-review .rv-q { margin: 0 0 6px; font-weight: 600; color: var(--navy, #0b2a49); }
.set-review .rv-a { margin: 0 0 4px; font-size: .92rem; }
.set-review .rv-e { margin: 0; font-size: .92rem; color: var(--muted, #6b7888); line-height: 1.55; }
/* ── Module graduation (26 Aug) ───────────────────────────────────────────── */
.grad-chip { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: .85rem; color: var(--muted, #6b7888); }
.grad-chip svg { width: 15px; height: 15px; color: var(--gold, #d8b04c); flex: none; }
.grad-chip.is-done { color: #1f8d5f; font-weight: 600; }
.grad-chip.is-ready { font-weight: 600; }
.grad-ready-card {
display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
padding: 16px 20px; border: 1px solid var(--gold, #d8b04c);
background: linear-gradient(168deg, #fffdf5 0%, #fff 70%);
box-shadow: 0 6px 20px rgba(216, 176, 76, .16);
}
.grad-ready-line { flex: 1 1 260px; display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 600; color: var(--navy, #0b2a49); }
.grad-ready-line svg { width: 18px; height: 18px; color: var(--gold, #d8b04c); flex: none; }
/* the living level's chance line (26 Aug) */
.chance-line { display: inline-flex; gap: 6px; align-items: center; color: var(--gold-ink, #96741f); font-weight: 600; }
.chance-line svg { width: 14px; height: 14px; flex: none; }
/* ── Practice doors on the home (26 Aug): colourful, compact, honest ─────── */
.app-doors { margin-top: 22px; }
.app-doors .t-section { margin-bottom: 10px; }
.doors-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.app-door {
--door-c: var(--gold, #d8b04c);
display: flex; align-items: center; gap: 8px; padding: 12px 14px;
border: 1px solid var(--line);
border-left: 3px solid var(--door-c); border-radius: 8px;
background: var(--surface);
color: var(--navy, #0b2a49); font-weight: 600; font-size: .92rem;
transition: transform .2s, box-shadow .2s;
}
.app-door:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11, 42, 73, .10); }
.app-door svg { width: 18px; height: 18px; color: var(--door-c); flex: none; }
.app-door span { flex: 1; }
.app-door.locked { opacity: .75; }
/* Each door takes the hue the cycle hands it — colour carries no meaning. */
.doors-row .app-door { --door-c: var(--tone); }
.doors-row .app-door:hover { background: var(--tone-tint); }
/* ═══════════════════════════════════════════════════════════════════════════
ARRANGEMENT — phone and laptop (Asaf, 28 Aug)
"adjust how things are arranged for phones as well as laptops."
═══════════════════════════════════════════════════════════════════════════ */
/* The reading column. The measure was never the problem — 680px at the old 16px
was already ~74 characters, at the wide end of comfortable. The TYPE was the
problem, and ui.css's root step fixes that. So this widens only a little, to
hold the line length steady as the type grows, rather than opening a canyon.
It also fixes something that was wrong at every width: .action-dock .inner
was 720px while .practice-shell was 680px, so the Continue button never lined
up with the cards above it. One token now feeds both. */
:root { --focus-w: 680px; }
@media (min-width: 1024px) { :root { --focus-w: 720px; } }
.focus-head, .focus-title, .focus-note, .practice-shell { max-width: var(--focus-w); }
.action-dock .inner { max-width: var(--focus-w); }
/* The topic page and the dashboard get the room instead — they are lists and
grids, which genuinely use width. */
@media (min-width: 1080px) { .container.narrow { max-width: 900px; } }
@media (min-width: 1440px) { :root { --container: 1240px; } }
@media (min-width: 1200px) { .lib-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
/* The dashboard used to go half-and-half between 760 and 899px: .journey-strip
had already collapsed while .dash-grid was still two columns. */
@media (max-width: 900px) { .journey-strip { grid-template-columns: 1fr; } }
/* Phone: a 375px screen was losing 88px — nearly a quarter of it — to nested
padding (.practice-shell 20 + .concept-card 24, both sides). That is the
"NO WASTED SPACE" rule broken on the primary device. */
@media (max-width: 520px) {
.practice-shell, .focus-head, .focus-title, .focus-note { padding-left: 14px; padding-right: 14px; }
.concept-card { padding: 1.15rem 1.15rem 1rem; }
.mistake-card { padding: .9rem 1rem; }
.check-card { padding: 1.1rem 1.15rem; }
}
/* Small print declared in THIS sheet, which loads last — raising it in ui.css
would lose the cascade. Each was under 15px on a laptop (28 Aug). */
.auth-main .opt { font-size: .88rem; }
.lib-topic .lib-state { font-size: .86rem; }
.module .module-state { font-size: .86rem; }
.proof span { font-size: .86rem; }
.task-min { font-size: .86rem; }
.topic-mastery { font-size: .86rem; }
/* ═══ The Daylight dashboard (1 Sep, direction B) ═════════════════════════
Home sections sit flat on the paper under one navy rule each — like a
well-set page, not a stack of boxes. The Continue card (the .sunrise
override above) stays the one white card with the gold thread. */
.dash .card {
background: transparent; border: 0; border-top: 1.5px solid var(--navy);
border-radius: 0; box-shadow: none;
padding: var(--s-4) 0 var(--s-4) 2px;
}
.dash .card .card-head { margin-bottom: var(--s-3); }
.dash .card:hover { box-shadow: none; transform: none; }
/* The six-skill card left the home on 13 September 2026 (Asaf: "remove this"),
and its rules went with it — the .sk-ic / .sk-band / .bandbar / .js-links
family had no other user. These two lines are NOT the card's: the level-test
results page and /me render .skill-rows and .skill-row too. */
.skill-rows { display: flex; flex-direction: column; }
/* Each row takes the hue the cycle hands it. */
.skill-rows .skill-row { --row-c: var(--tone); }
/* The journey band on /me keeps its old dashboard styling; only the wrapper
changed pages. Give it the paper-flat look there too. */
.me-stats { margin-top: var(--s-5); }
/* The mock trend table (/me): bands per sitting, wide content scrolls itself. */
.mock-trend { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
padding: .9rem 1.1rem; box-shadow: var(--shadow-xs); }
.table-scroll { overflow-x: auto; }
.trend-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.trend-table th { text-align: right; font-size: .76rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: var(--muted); padding: .35rem .55rem; border-bottom: 1.5px solid var(--navy); }
.trend-table th:first-child { text-align: left; }
.trend-table td { text-align: right; padding: .55rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
.trend-table tr:last-child td { border-bottom: 0; }
.trend-table .tt-name { text-align: left; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.trend-table .tt-name .t-caption { display: block; font-weight: 400; }
.trend-table .tt-overall { font-weight: 700; color: var(--ink); }
/* Gamification polish (1 Sep): the breakdown under the XP pop, the week line. */
.xp-pop-lines { font-size: .72rem; font-weight: 600; margin-top: .3rem; opacity: .95; text-align: center; line-height: 1.5; }
.week-line { margin: .35rem 0 0; }
.week-line.is-done { color: var(--success); }
/* The before-you-go guide modal (1 Sep) — the estate's first and only modal. */
.modal-overlay {
position: fixed; inset: 0; z-index: 120;
background: rgba(19, 35, 58, .45);
display: flex; align-items: center; justify-content: center;
padding: 1rem;
}
.modal-card {
position: relative;
background: var(--surface); border: 1px solid var(--line);
border-top: 3px solid var(--gold);
border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
padding: 1.6rem 1.5rem 1.4rem; max-width: 420px; width: 100%;
display: flex; flex-direction: column; gap: .8rem; text-align: center;
}
.modal-card .modal-line { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink); }
.modal-card .modal-progress { margin: 0; color: var(--success-ink); font-weight: 600; }
.modal-card .modal-open { align-self: center; min-width: 60%; }
.modal-close {
position: absolute; top: .4rem; right: .55rem;
border: 0; background: none; font-size: 1.5rem; line-height: 1;
color: var(--muted); cursor: pointer; padding: .3rem;
}
.modal-close:hover { color: var(--ink); }
/* ═══════════════════════════════════════════════════════════════════════════
THE LADDER — the Academy home. Asaf picked it 4 September 2026.
ONE grid, two layouts. A path is a single column, so on a laptop a lone
column of nodes stranded in the middle is how this shape fails; the same
markup therefore puts the units rail on one side of it and the day on the
other, and a phone lays those three areas end to end instead.
Every colour here comes from the design tokens — --tone (the page's accent,
teal estate-wide), --d-* for ink and line, and the signal colours for the
states that MEAN something. No hex literals: BayRen Platform/test_design_tokens.py
exists because two carried-over colours failed their own contrast check.
═══════════════════════════════════════════════════════════════════════════ */
.lad { display: grid; gap: var(--d-s5, 24px); margin: var(--d-s5, 24px) 0 0; }
/* ── the units ─────────────────────────────────────────────────────────────
On a phone this is a strip of chips that scrolls sideways; on a laptop it
straightens into the rail. Same list, same order, same counts. */
.lad-rail {
display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px;
scrollbar-width: none; -ms-overflow-style: none;
}
.lad-rail::-webkit-scrollbar { display: none; }
.lad-u {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
padding: 7px 13px; border-radius: 999px; text-decoration: none;
border: 1px solid var(--d-line, #e4e9ef); background: var(--d-ground, #fff);
color: var(--d-muted, #5b6b80); font-size: .78rem; font-weight: 600;
white-space: nowrap; line-height: 1.2;
}
.lad-u:hover { border-color: var(--tone); color: var(--d-ink, #14283c); }
.lad-u em { font-style: normal; opacity: .65; font-weight: 500; }
.lad-u-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--d-line-strong, #d3dae3); flex: 0 0 auto; }
.lad-u.is-done .lad-u-dot { background: var(--correct, #1a7a51); }
.lad-u.is-current .lad-u-dot,
.lad-u.is-started .lad-u-dot { background: var(--tone); }
.lad-u-count { font-variant-numeric: tabular-nums; opacity: .7; font-weight: 500; }
.lad-u.is-here {
background: var(--tone); border-color: var(--tone); color: #fff;
}
/* A finished unit wears the correct signal (a tone-correct wrapper in the
template), and its count is the word that travels with the colour. */
.lad-u.is-done { background: var(--tone-tint); border-color: var(--tone-edge); color: var(--tone); }
.lad-u.is-done .lad-u-dot { background: var(--tone); }
.lad-u.is-here .lad-u-dot { background: #fff; }
.lad-u.is-here em, .lad-u.is-here .lad-u-count { opacity: .85; color: #fff; }
/* ── the path ───────────────────────────────────────────────────────────── */
.lad-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.lad-head h2 { margin: 0; }
.ladder { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 10px; }
.ladder::before {
content: ""; position: absolute; left: 21px; top: 16px; bottom: 16px; width: 2px;
background: var(--d-line, #e4e9ef); border-radius: 2px;
}
.lnode { position: relative; }
.lnode-a {
display: flex; align-items: center; gap: 13px; text-decoration: none;
color: inherit; border-radius: var(--d-r-group, 14px); padding: 2px;
}
a.lnode-a:hover .lnode-name { color: var(--tone); }
a.lnode-a:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }
.lnode-dot {
position: relative; z-index: 1; flex: 0 0 auto;
width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
background: var(--d-ground, #fff); border: 2px solid var(--d-line-strong, #d3dae3);
color: var(--d-faint, #8496a8);
}
.lnode-dot svg { width: 18px; height: 18px; display: block; }
.lnode-txt { min-width: 0; }
.lnode-name { display: block; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.lnode-sub { display: block; font-size: .74rem; color: var(--d-faint, #8496a8); line-height: 1.35; }
/* the six states — each NAMED in the markup as well as coloured, so a student
who cannot tell green from grey still knows where they are */
.lnode.is-mastered .lnode-dot { background: var(--correct, #1a7a51); border-color: var(--correct, #1a7a51); color: #fff; }
.lnode.is-passed .lnode-dot { border-color: var(--correct, #1a7a51); color: var(--correct, #1a7a51); }
.lnode.is-learning .lnode-dot { border-color: var(--tone); color: var(--tone); }
.lnode.is-locked { opacity: .45; }
.lnode.is-locked .lnode-dot { background: var(--d-sunken, #f5f7fa); }
/* THE one step that matters. Bigger than everything, and only ever one. */
.lnode.is-now .lnode-dot {
width: 60px; height: 60px;
background: var(--tone); border-color: var(--tone); color: #fff;
box-shadow: 0 0 0 7px var(--tone-tint);
}
.lnode.is-now .lnode-dot svg { width: 25px; height: 25px; }
.lnode.is-now .lnode-name { font-size: 1.12rem; }
/* its action, indented past the spine so the path still reads as a line */
.lnode-act { margin: 8px 0 4px 73px; display: grid; gap: 7px; max-width: 320px; }
.lnode-act .btn { width: 100%; }
.lnode-test .lnode-dot { border-style: dashed; background: var(--tone-tint); border-color: var(--tone-edge); color: var(--tone); }
.lnode-test.is-now .lnode-dot,
.lnode-test.is-mastered .lnode-dot { border-style: solid; }
.lnode-test.is-mastered .lnode-dot { background: var(--correct, #1a7a51); border-color: var(--correct, #1a7a51); color: #fff; }
/* THE current node breathes — the one thing on the page that says "here". */
.lnode.is-now .lnode-dot { animation: br-pulse-tone 2.4s ease-in-out infinite; }
/* ── the day ────────────────────────────────────────────────────────────── */
.lad-side { display: grid; gap: 14px; align-content: start; }
.lad-card { padding: 14px; }
.lad-card-h {
margin: 0 0 2px; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--d-faint, #8496a8);
}
.quests { display: grid; gap: 7px; }
.qrow { display: flex; align-items: baseline; gap: 9px; font-size: .8rem; }
.qrow-t { flex: 1 1 auto; color: var(--d-muted, #5b6b80); }
.qrow-n { font-variant-numeric: tabular-nums; color: var(--d-faint, #8496a8); font-size: .74rem; }
.lad-card .meter {
display: block; height: 5px; border-radius: 999px;
background: var(--d-sunken, #f5f7fa); overflow: hidden;
}
.lad-card .meter > i { display: block; height: 100%; border-radius: 999px; background: var(--tone); }
.lad-card .meter > i.is-done { background: var(--correct, #1a7a51); }
.lb { display: grid; gap: 5px; }
.lb-row { display: flex; align-items: center; gap: 9px; font-size: .8rem; }
.lb-r { width: 14px; color: var(--d-faint, #8496a8); font-variant-numeric: tabular-nums; }
.lb-n { flex: 1 1 auto; }
.lb-p { font-variant-numeric: tabular-nums; color: var(--d-muted, #5b6b80); }
.lb-row.is-you { font-weight: 700; color: var(--tone); }
.lad-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.lad-tool {
border: 1px solid var(--d-line, #e4e9ef); border-radius: var(--d-r-group, 14px);
padding: 10px 4px; display: grid; gap: 5px; justify-items: center; text-align: center;
font-size: .62rem; color: var(--d-muted, #5b6b80); line-height: 1.25;
}
.lad-tool .lt-ic svg { width: 17px; height: 17px; display: block; }
/* Each tool door wears its own tone-* class in _ladder.html (the same four
hues as the tool pages); the sheet only reads --tone (test_colour). */
.lad-tool .lt-ic { color: var(--tone); }
/* ── the laptop ─────────────────────────────────────────────────────────────
Three columns. The rail straightens out of the chip strip, the day moves
beside the path, and the path keeps the middle — still the largest thing on
the screen, which is the whole point of choosing this shape. */
@media (min-width: 980px) {
.lad {
grid-template-columns: 216px minmax(0, 1fr) 268px;
gap: var(--d-s6, 32px);
align-items: start;
}
.lad-rail {
display: grid; gap: 2px; overflow: visible;
position: sticky; top: var(--d-s5, 24px);
max-height: calc(100vh - 120px); overflow-y: auto;
}
.lad-u {
border: 0; border-radius: var(--d-r-sm, 8px); background: transparent;
justify-content: flex-start; padding: 8px 10px; white-space: normal;
}
.lad-u:hover { background: var(--d-sunken, #f5f7fa); }
.lad-u.is-here { background: var(--tone-tint); color: var(--tone); border: 0; }
.lad-u.is-here .lad-u-dot { background: var(--tone); }
.lad-u.is-here em, .lad-u.is-here .lad-u-count { color: var(--tone); }
.lad-u-name { flex: 1 1 auto; }
.lad-path { max-width: 520px; }
.lad-side { position: sticky; top: var(--d-s5, 24px); }
}
/* The path never widens past comfortable reading, even on a big monitor. */
@media (min-width: 1360px) {
.lad { grid-template-columns: 240px minmax(0, 1fr) 300px; }
}
/* The next step said in words. On the current node it sits under the dot; when
the step lives in another unit (a due review, a weak topic) it becomes a
strip above the path — otherwise the path has no way to mention it at all. */
/* CONTINUE, over the button that is the whole point of the page. .62rem read
9.9px between 761px and 1023px — the smallest text in the app, and on the
one word a student is meant to act on. The phone already overrode it to
.76rem further down the sheet; this makes every width agree. */
.lnode-act-eyebrow, .lad-continue-eyebrow {
font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--tone);
}
.lnode-act-line, .lad-continue-line { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.lad-continue {
display: grid; gap: 6px; justify-items: start; text-decoration: none; color: inherit;
padding: 14px; margin-bottom: 14px;
border: 1px solid var(--tone-edge); background: var(--tone-tint);
border-radius: var(--d-r-tablet, 16px);
}
.lad-continue .btn { margin-top: 2px; }
.lad-continue:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }
/* ═══════════════════════════════════════════════════════════════════════════
THE NINE NEW EXERCISE KINDS (4 September 2026, academy/drills.py)
One screen, one answer, tap or type, under ten seconds. Asaf: "the task must
also be simple and easy to do, otherwise the students will feel overwhelmed."
Nothing here invents a colour; --tone is the page's accent.
═══════════════════════════════════════════════════════════════════════════ */
/* listening — the play button, and the sentence being read aloud */
.say-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 4px 0 10px; }
.speak-btn { gap: 7px; }
.speak-btn.is-playing { border-color: var(--tone); color: var(--tone); }
.speak-btn.is-playing .icon { animation: speakPulse 1s ease-in-out infinite; }
@keyframes speakPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
/* speaking */
.say-target {
font-size: 1.25rem; line-height: 1.45; font-weight: 500;
padding: 14px 16px; margin: 4px 0 2px;
border-radius: var(--d-r-tablet, 16px);
background: var(--tone-tint); border: 1px solid var(--tone-edge);
}
.say-go.is-listening { animation: micPulse 1.1s ease-in-out infinite; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 var(--tone-tint) } 50% { box-shadow: 0 0 0 9px var(--tone-tint) } }
.say-out { min-height: 2.2em; display: grid; gap: 9px; justify-items: start; font-size: .95rem; }
.say-out .ok { color: var(--correct, #1a7a51); font-weight: 600; }
.say-out .muted { color: var(--d-faint, #8496a8); }
.say-out audio { width: 100%; max-width: 320px; }
/* tap the pairs — two columns, tap a word then its meaning */
.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pair-col { display: grid; gap: 7px; align-content: start; }
.pair-chip {
appearance: none; font: inherit; text-align: left; cursor: pointer;
padding: 11px 12px; border-radius: var(--d-r-group, 14px);
border: 1.5px solid var(--d-line-strong, #d3dae3); background: var(--d-ground, #fff);
color: var(--d-ink, #14283c); min-height: 44px; line-height: 1.3;
}
.pair-chip:hover { border-color: var(--tone); }
.pair-chip.selected { border-color: var(--tone); background: var(--tone-tint); color: var(--tone); }
.pair-chip.is-done { opacity: .4; pointer-events: none; border-style: dashed; }
.pair-chip:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }
/* speed match — the clock is decoration; running out marks nothing */
.speed-word {
font-size: 1.7rem; font-weight: 600; text-align: center; padding: 10px 0 4px;
font-family: var(--d-font-display, Georgia, serif);
}
.speed-bar {
height: 4px; border-radius: 999px; background: var(--d-sunken, #f5f7fa);
overflow: hidden; margin: 0 0 14px;
}
.speed-bar > i { display: block; height: 100%; width: 100%; background: var(--tone); border-radius: 999px; }
/* complete the word */
.masked {
font-size: 1.6rem; letter-spacing: .18em; font-weight: 600; text-align: center;
padding: 8px 0 12px; font-variant-numeric: tabular-nums;
}
/* the conversation, with one line missing */
.convo {
display: grid; gap: 8px; padding: 13px; margin: 4px 0 12px;
border: 1px solid var(--d-line, #e4e9ef); border-radius: var(--d-r-tablet, 16px);
}
.convo-line { display: flex; gap: 8px; align-items: baseline; font-size: .95rem; line-height: 1.45; }
/* The speaker is a LABEL, not a choice. It used to be a round lettered chip —
the same shape as the option chips two inches below it, so a beginner read
"A" twice on one screen with two different meanings (found by playing it,
5 Sep). Now it reads as a script: a muted letter and a colon. */
.convo-line .who {
flex: 0 0 auto; min-width: 18px; font-size: .78rem; font-weight: 700;
color: var(--d-faint, #8496a8); letter-spacing: .04em;
}
.convo-line .who::after { content: ":"; }
.convo-line.is-gap .said {
color: var(--tone); font-weight: 600; letter-spacing: .06em;
}
.convo-line.is-gap .who { color: var(--tone); }
/* shared bits */
.big-bn { font-size: 1.15rem; line-height: 1.5; font-weight: 500; }
.wide-input { width: 100%; max-width: 420px; }
@media (max-width: 420px) {
.pair-grid { gap: 7px; }
.pair-chip { padding: 10px; font-size: .88rem; }
.say-target { font-size: 1.1rem; }
}
/* Bangla that IS the question, not a helper beside it.
`.q-bn` is hidden in English mode by design (Bangla is opt-in — Asaf,
23 Aug: the always-on twin lines "came off as condescending"). But for
"write the English sentence" and "complete the word", the Bangla is the
only thing to work from: hidden, those questions cannot be answered at all.
So they use this instead, and it is never hidden. */
.prompt-bn {
font-family: var(--font-bn, 'Noto Sans Bengali', sans-serif);
color: var(--d-ink, #14283c); font-size: 1rem; line-height: 1.55; margin: 2px 0 6px;
}
.prompt-bn.big-bn { font-size: 1.15rem; font-weight: 500; }
.q-hint {
font-size: .82rem; color: var(--d-faint, #8496a8); margin: 2px 0 6px;
display: flex; align-items: center; gap: 6px;
}
/* ── The day strip: hearts, streak, quests, league (5 Sep) ─────────────────
One line under the header, on every student page, rendered only when one of
the three mechanics is switched on (templates/_daybar.html). Chips are
capsules from the design system's shape scale; each one is a link to the
place that explains the number, because a number a student cannot ask about
is a number that worries them. */
.daybar-wrap {
background: var(--d-ground, #fff);
border-bottom: 1px solid var(--d-line, #e4e9ef);
}
.daybar {
max-width: var(--container); margin: 0 auto; padding: 7px 20px;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.day-chip {
display: inline-flex; align-items: center; gap: 5px;
min-height: 32px; padding: 4px 11px;
border: 1px solid var(--d-line, #e4e9ef); border-radius: var(--d-r-capsule, 999px);
background: var(--d-ground, #fff);
color: var(--d-muted, #5b6b80); font-size: .86rem; line-height: 1;
text-decoration: none;
}
a.day-chip:hover { border-color: var(--d-line-strong, #d3dae3); color: var(--d-ink, #14283c); }
.day-chip .icon { width: 15px; height: 15px; }
.day-n { font-weight: 700; color: var(--d-ink, #14283c); font-variant-numeric: tabular-nums; }
.day-t { font-weight: 600; color: var(--d-ink, #14283c); }
.day-hearts .day-ic { color: var(--d-wrong, #c23a37); }
.day-hearts.is-empty { border-color: var(--wrong-edge); background: var(--d-wrong-bg, #fdecec); }
.day-hearts.is-empty .day-n { color: var(--d-wrong, #c23a37); }
.day-streak .day-ic { color: var(--d-warn, #8a660f); }
.day-streak.is-cold .day-ic { color: var(--d-faint, #8496a8); }
.day-quests .day-ic { color: var(--tone, #2f6fb0); }
.day-quests.is-done { background: var(--d-correct-bg, #e8f6ef); border-color: var(--correct-edge); }
.day-quests.is-done .day-ic, .day-quests.is-done .day-n { color: var(--d-correct, #1a7a51); }
.day-league .day-ic { color: var(--gold, #d8b04c); }
/* A heart just lost: one short pulse, and nothing at all for a student who
asked their system for less motion. */
@keyframes day-heart-lost {
0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); }
}
.day-hearts.just-lost .day-ic { animation: day-heart-lost .42s var(--d-ease, ease); }
@media (prefers-reduced-motion: reduce) { .day-hearts.just-lost .day-ic { animation: none; } }
/* In focus mode (a set is running) the page does not render the strip at all
(daybar_hide); the hearts read-out sits in the progress row instead —
_focus_hearts.html, styled at the end of this sheet (6 Sep). */
@media (max-width: 420px) {
.daybar { gap: 6px; padding: 6px 14px; }
.day-chip { font-size: .82rem; padding: 4px 9px; }
}
/* Only when the row genuinely runs out of width does the tier lose its name —
a lone trophy says nothing. Measured at 375px: all four chips fit. */
@media (max-width: 340px) { .day-league .day-t { display: none; } }
/* ── The out-of-hearts sheet ───────────────────────────────────────────────
Nothing here can be bought: the three doors are wait, practise the thing
that has been going wrong, or (from step 9) review your own words. The one
screen allowed to mention money is templates/quota.html. */
.hearts-sheet { text-align: center; display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem 1.4rem; }
.hearts-row { display: flex; justify-content: center; gap: 8px; }
.hs-heart .icon { width: 30px; height: 30px; color: var(--d-line-strong, #d3dae3); }
.hs-heart.is-on .icon { color: var(--d-wrong, #c23a37); }
.hearts-h { margin: 0; }
.hearts-body { margin: 0; color: var(--d-muted, #5b6b80); line-height: 1.6; }
.hearts-timer { margin: 0; font-weight: 700; color: var(--d-ink, #14283c); font-variant-numeric: tabular-nums; }
.hearts-doors { display: flex; flex-direction: column; gap: .6rem; align-items: center; margin-top: .4rem; }
.hearts-doors .btn-lg { min-width: 70%; }
.hearts-modal { gap: .7rem; }
.hearts-modal .t-section { margin: 0; }
/* ── The weekly league ─────────────────────────────────────────────────────
The promotion and demotion zones are drawn, not only described: a student
should see where they stand without counting rows. */
.lg-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.lg-head .t-section { margin: 0; }
.lg-badge {
width: 46px; height: 46px; flex: 0 0 46px; border-radius: var(--d-r-capsule, 999px);
display: inline-flex; align-items: center; justify-content: center;
background: var(--gold-100, #fbf3d7); color: var(--gold-600, #8a660f);
}
.lg-badge .icon { width: 24px; height: 24px; }
.lg-card { padding: 1.1rem 1rem; }
.lg-table { list-style: none; margin: 0; padding: 0; }
.lg-row {
display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: .6rem;
padding: .6rem .5rem; border-bottom: 1px solid var(--d-line, #e4e9ef);
}
.lg-row:last-child { border-bottom: 0; }
.lg-rank { font-weight: 700; color: var(--d-muted, #5b6b80); font-variant-numeric: tabular-nums; text-align: center; }
.lg-name { color: var(--d-ink, #14283c); }
.lg-pts { font-weight: 700; color: var(--d-ink, #14283c); font-variant-numeric: tabular-nums; }
.lg-row.is-you { background: var(--tone-tint, #ebf2fb); border-radius: var(--d-r-sm, 8px); }
.lg-row.is-you .lg-name { font-weight: 700; }
.lg-row.is-up .lg-rank { color: var(--d-correct, #1a7a51); }
.lg-row.is-down .lg-rank { color: var(--d-muted, #5b6b80); }
.lg-line {
display: flex; align-items: center; gap: .6rem; margin: .3rem 0;
font-size: .8rem; color: var(--d-muted, #5b6b80);
}
.lg-line::before, .lg-line::after { content: ''; flex: 1; height: 1px; background: var(--d-line, #e4e9ef); }
.lg-line-up { color: var(--d-correct, #1a7a51); }
.lg-line-up::before, .lg-line-up::after { background: var(--correct-edge); }
.lg-about { margin-top: .8rem; }
.lg-opt { margin-top: .9rem; text-align: center; }
.lg-back { margin-top: 1.2rem; text-align: center; }
/* A quest that is done reads as done, not only as a full bar. */
.qrow.is-done .qrow-t { color: var(--d-muted, #5b6b80); }
.qrow.is-done .qrow-n .icon { width: 15px; height: 15px; color: var(--d-correct, #1a7a51); }
/* ── The four tools (5 September 2026) ──────────────────────────────────────
My Words, Say it, Build and Meaning sit BESIDE the path, not on it, so they
share one calm head and otherwise borrow the page furniture. */
.tool-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.tool-head .t-section { margin: 0; }
.tool-head p { margin: .15rem 0 0; }
.tool-badge {
width: 46px; height: 46px; flex: 0 0 46px; border-radius: var(--d-r-capsule, 999px);
display: inline-flex; align-items: center; justify-content: center;
background: var(--tone-tint, #ebf2fb); color: var(--tone, #2f6fb0);
}
.tool-badge .icon { width: 24px; height: 24px; }
.tool-cta { margin: 1rem 0; }
.tool-note { color: var(--d-muted, #5b6b80); }
.tool-back { margin-top: 1.4rem; }
/* My Words: the word, its meaning, and how far along the ladder it is. */
.word-group { display: block; margin: 1.3rem 0 .5rem; }
.word-list { list-style: none; margin: 0; padding: 0; }
.word-row {
display: grid; grid-template-columns: 1fr auto; gap: 2px .8rem; align-items: baseline;
padding: .6rem .2rem; border-bottom: 1px solid var(--d-line, #e4e9ef);
}
.word-row:last-child { border-bottom: 0; }
.word-en { grid-column: 1; grid-row: 1; font-weight: 600; color: var(--d-ink, #14283c); }
/* "(V)" used to sit inside the word itself; it is a label, so it is a capsule. */
.word-pos {
display: inline-block; margin-left: .4rem; padding: .05rem .45rem; vertical-align: .12em;
border-radius: var(--d-r-capsule, 999px); border: 1px solid var(--tone-edge, var(--d-line));
color: var(--tone, var(--d-muted)); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.word-bn { grid-column: 1; grid-row: 2; color: var(--d-muted, #5b6b80); font-size: .92rem; }
.word-box { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; gap: 3px; align-items: center; }
.word-box i {
width: 7px; height: 7px; border-radius: 999px; background: var(--d-line-strong, #d3dae3);
}
.word-box i.on { background: var(--tone, #2f6fb0); }
/* Build: the shape, then the student's own sentence. */
.build-card { text-align: center; padding: 1.1rem 1rem; }
.build-kicker {
display: block; font-size: .74rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--d-muted, #5b6b80);
}
.build-formula {
margin: .5rem 0 .2rem; font-size: 1.15rem; font-weight: 700; color: var(--d-ink, #14283c);
letter-spacing: .01em;
}
.build-note { margin: .3rem 0 0; }
.build-label { display: block; margin: 1rem 0 .35rem; font-weight: 600; }
.build-input {
width: 100%; padding: .8rem .9rem; font: inherit; line-height: 1.5;
border: 1px solid var(--d-line-strong, #d3dae3); border-radius: var(--d-r-input, 10px);
background: var(--d-ground, #fff); color: var(--d-ink, #14283c); resize: vertical;
}
.build-input:focus-visible { outline: 2px solid var(--tone); outline-offset: 1px; }
.build-verdict { margin-top: .9rem; padding: .8rem .9rem; border-radius: var(--d-r-group, 14px); }
.build-verdict.ok { background: var(--d-correct-bg, #e8f6ef); color: var(--d-correct, #1a7a51); }
.build-verdict.no { background: var(--d-wrong-bg, #fdecec); color: var(--d-wrong, #c23a37); }
.build-verdict .bv-title { margin: 0; font-weight: 700; }
.build-verdict .bv-line { margin: .2rem 0; }
.build-verdict .bv-line.muted { color: var(--d-muted, #5b6b80); }
.build-switch { margin-top: .8rem; text-align: center; }
.shape-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.shape-row {
display: block; padding: .7rem .8rem; border: 1px solid var(--d-line, #e4e9ef);
border-radius: var(--d-r-group, 14px); margin-bottom: 7px; text-decoration: none;
}
.shape-row:hover { border-color: var(--tone-edge, #d3dae3); }
.shape-list .shape-row { border-left: 4px solid var(--tone); }
.shape-list .shape-formula { color: var(--tone); }
.shape-formula { display: block; font-weight: 600; color: var(--d-ink, #14283c); }
/* Meaning: the look-up box and the popover the tap opens. */
.look-form { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1rem 0; }
.tapdict {
position: absolute; z-index: 130; max-width: 300px;
background: var(--d-ground, #fff); border: 1px solid var(--d-line, #e4e9ef);
border-top: 3px solid var(--tone, #2f6fb0);
border-radius: var(--d-r-group, 14px); box-shadow: var(--d-shadow);
padding: .8rem .9rem .7rem; font-size: .95rem;
}
.tapdict p { margin: .15rem 0; }
.tapdict .td-head { font-size: 1.02rem; }
.tapdict .td-say { color: var(--d-muted, #5b6b80); font-size: .88rem; }
.tapdict .td-mean { color: var(--d-ink, #14283c); }
.tapdict .td-ex { margin-top: .4rem; color: var(--d-muted, #5b6b80); font-size: .9rem; }
.tapdict .td-ex-bn { color: var(--d-muted, #5b6b80); font-size: .9rem; }
.tapdict .td-near, .tapdict .td-miss { color: var(--d-muted, #5b6b80); font-size: .9rem; }
.tapdict .td-saved { margin-top: .45rem; color: var(--d-correct, #1a7a51); font-size: .85rem; font-weight: 600; }
/* 5 Sep: the sentence the word sits in, the "did you mean" question, the
part of speech, and a card that pops rather than appears. */
.tapdict .td-ctx { margin-top: .45rem; padding-top: .4rem; border-top: 1px dashed var(--d-line, #e4e9ef); font-size: .92rem; line-height: 1.7; }
.tapdict .td-ctx-k { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tone, #2f6fb0); }
.tapdict .td-maybe { margin: 0 0 .5rem; padding-right: 1.4rem; }
.tapdict .td-pos { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tone, #2f6fb0); border: 1px solid var(--tone-edge, #d3dae3); border-radius: 999px; padding: 0 .4rem; vertical-align: .15em; }
.tapdict.pop-in { animation: popIn var(--m-spring, .28s) both; }
.tapdict .td-miss { padding-right: 1.4rem; }
.tapdict .td-close {
position: absolute; top: .1rem; right: .35rem; border: 0; background: none;
font-size: 1.25rem; line-height: 1; color: var(--d-faint, #8496a8); cursor: pointer;
}
/* The four chips on the home are doors now, not labels. */
a.lad-tool { text-decoration: none; }
a.lad-tool:hover { border-color: var(--tone-edge, #d3dae3); }
/* ═══════════════════════════════════════════════════════════════════════════
THE PHONE PASS — revamp step 10, 5 September 2026.
Measured at 360 / 375 / 390 / 412 / 430 px by dev_phone_pass.py (every
signed-in page, English and Bangla, played not just loaded). Three kinds
of fault, fixed in ONE place so the next pass can read what this one found:
* a label that pushed the page sideways,
* a tap target under 40 px on a touch screen,
* type under 12 px — on the cheap Android phones the directive names,
that is not read, it is guessed.
Laptop layouts are untouched: the sizes are scoped to touch screens and
phone widths, and Asaf approved the laptop on the-ladder.html as it is.
═══════════════════════════════════════════════════════════════════════════ */
/* 1. Nothing pushes the page wider than the phone. The one-go card's button
("Start the lesson · about 5 minutes") was wider than its card at every
phone width, and the topic page scrolled sideways (390 px on a 360 px
phone). Long labels wrap inside their button instead. */
@media (max-width: 520px) {
.onego-actions { width: 100%; align-items: stretch; }
.onego-actions .btn, .gate-cta .btn, .grad-chip .btn, .grad-ready-card .btn,
.lad-continue .btn, .lnode-act .btn, .hearts-doors .btn, .tool-cta .btn,
.completion-actions .btn, .modal-card .btn, .path-step .btn {
white-space: normal; max-width: 100%; text-align: center;
}
/* This label is three flex items ("Start the lesson", "·", "about 5
minutes"); as a flex row each wrapped inside itself into two ragged
columns. As a block the words flow like a sentence. */
.onego-actions .btn { display: block; line-height: 1.35; }
}
/* 2. Tap targets. 40 px is the floor for anything a thumb must hit, 44 for
the button a screen is about. Touch screens only: a mouse needs no room
and the laptop keeps its proportions. */
@media (pointer: coarse) {
.btn, .btn-sm { min-height: 44px; }
.lad-u { min-height: 38px; }
.day-chip { min-height: 36px; }
.head-link { display: inline-flex; align-items: center; min-height: 40px; }
.head-me, .head-signout { min-width: 40px; justify-content: center; }
.icon-btn { width: 42px; height: 42px; }
.modal-close { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; padding: 0; }
.tapdict .td-close { min-width: 36px; min-height: 36px; display: inline-grid; place-items: center; }
.inline-input, .gap-input { min-height: 40px; }
.tile, .seg-chip { min-height: 40px; }
.check-opt { min-height: 44px; }
.task-link { min-height: 36px; justify-content: center; }
.back-home { min-height: 36px; }
.unit-head { min-height: 44px; }
}
/* 3. Type. Nothing a student reads goes under 12.5 px on a phone. The four
tool doors on the home were 9.9 px — "My Words" and "অর্থ" alike. */
@media (max-width: 760px) {
.lad-tool { font-size: .78rem; }
.lad-card-h { font-size: .76rem; }
.lnode-sub { font-size: .8rem; }
.qrow { font-size: .86rem; }
.qrow-n { font-size: .8rem; }
.lad-u { font-size: .8rem; }
.level-chip, .unit .level-chip { font-size: .76rem; }
.lnode-act-eyebrow, .lad-continue-eyebrow, .build-kicker, .toast .toast-kicker { font-size: .76rem; }
.badge-tile .badge-date { font-size: .78rem; }
.unit-head .unit-meta .pill, .lib-skill .unit-head .unit-meta .pill, .lib-level h3 .pill { font-size: .78rem; }
.me-stats .stat span { font-size: .78rem; }
.me-ring .ring-label > span, .topic-mastery-card .ring-label > span,
.completion .ring-wrap .ring-label > span { font-size: .76rem; }
}
@media (max-width: 430px) {
.head-link { font-size: .94rem; }
}
/* ═══ COLOUR — the polish pass, 5 September 2026 ═══════════════════════════
Asaf: "there's a lack of color." Every rule here reads --tone or a signal;
the hue comes from a tone-* wrapper or a br-cycle in the template, never
from a name in this sheet (BayRen Platform/docs/design-system.md). */
/* A teaching card is a tinted tablet with its own hairline, not a white box
with a shadow — the capsule-and-tablet look Asaf picked for the estate. */
body.br-skin .concept-card { background: var(--tone-tint); border-color: var(--tone-edge); box-shadow: none; }
body.br-skin .concept-card h3::before { background: var(--tone); }
body.br-skin .check-card { background: var(--d-ground); border-color: var(--tone-edge); }
body.br-skin .check-card .check-kicker { color: var(--tone); }
body.br-skin .concept-card .tip-line { border-color: var(--tone-edge); }
body.br-skin .concept-card .example { background: var(--d-ground); border: 1px solid var(--tone-edge); }
/* The quest rows: each its own hue from the cycle; a done one is a signal. */
.quest { display: grid; gap: 4px; }
.quest .meter > i { background: var(--tone); }
.quest .qrow-n { color: var(--tone); }
.quest.is-done .meter > i { background: var(--correct); }
/* ═══ MOTION — the polish pass ═════════════════════════════════════════════
"a bit more animation would make things more lively." Each one short,
each one a moment that means something, and ALL of them off for a device
that asked for less motion — one guard, so a keyframe added next month
cannot forget it. */
.lesson-shell #stage.card-in { animation: slideUp var(--m-med, .26s) both; }
.day-streak.just-grew { animation: streakPop .5s var(--d-ease, ease) both; }
.day-streak.just-grew .day-ic { color: var(--d-warn); }
.day-quests.is-done .day-ic { animation: popIn var(--m-spring, .3s) both; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* THE SKILLS STRIP stood here from 6 Sep to 13 Sep 2026 — six bands in a
sideways-scrolling line under the greeting. Asaf removed the numbers
themselves ("remove this — Grammar 4.0, Vocabulary 4.5 …"), so .skill-strip,
.sks, .sks-name and .sks-v have no user left. */
/* ── THE ANSWER, WHERE THE STUDENT CAN READ IT (6 Sep 2026) ──────────────────
Asaf: "when a student presses check. the screen should slightly scroll to
see what is being explained." The Check bar is position:fixed at the bottom
(main.css .action-dock), and scrollIntoView aligns against the layout
viewport — it knows nothing about a fixed element, so it used to park the
explanation UNDERNEATH the bar. scroll-margin-bottom reserves that height,
and practice.js asks for block:"end", so the whole panel lands above it. */
#feedback { scroll-margin-bottom: 8.5rem; }
@media (max-width: 520px) { #feedback { scroll-margin-bottom: 9.5rem; } }
/* ── THE PATH READS AS A JOURNEY (6 Sep 2026) ────────────────────────────────
Asaf: "there also needs to be a bit more color … It needs to get the duoling
liveliness." The ladder was one navy column; each node now carries its own
hue from br-cycle (tokens.css), which the states still override — a finished
node is the correct-green, the current one indigo. Every value below is a
token: no hue is ever named in this file. */
.ladder .lnode .lnode-dot {
border-color: var(--tone-edge, var(--d-line));
background: var(--tone-tint, var(--d-ground));
color: var(--tone, var(--navy));
transition: transform var(--d-fast, .16s) var(--d-ease, ease),
background var(--d-fast, .16s) var(--d-ease, ease);
}
.ladder .lnode.is-now .lnode-dot { transform: scale(1.08); }
.ladder .lnode-a:hover .lnode-dot { transform: scale(1.06); }
.ladder .lnode.is-locked .lnode-dot { background: var(--d-sunken); color: var(--d-muted); }
/* The answer that just landed. A right option lifts once — one beat, then
still. Guarded estate-wide by the reduced-motion block further down. */
@keyframes br-land { 0% { transform: scale(1); } 45% { transform: scale(1.035); } 100% { transform: scale(1); } }
.option-card.correct { animation: br-land var(--d-med, .26s) var(--d-ease, ease) 1; }
/* The streak, when there is one to be proud of. */
@keyframes br-flicker { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.08); } }
.day-streak:not(.is-cold) .day-ic { animation: br-flicker 2.4s var(--d-ease, ease) infinite; transform-origin: 50% 80%; }
/* The four stat labels on /me measured 11.2px at every width — under the 12px
floor the phone pass enforces for anything a student reads (6 Sep 2026). */
.me-stats .stat span, .me-stats .stat .g-bn { font-size: .8rem; }
/* ── THE FINISH SCREEN, ONE SHAPE (6 Sep 2026) ───────────────────────────────
Asaf: "some of the buttons don't align properly after the quiz is finished."
The actions row was a centred, wrapping flex row holding a gold Home, the
sentence that explains the NEXT step, its why, and ghost buttons of three
different widths — a ragged pile, with the words under the wrong button.
Now (ui.js finishActions, every runner): the gold door first, the quiet
doors in ONE row of equal width under it, the next step as a small tinted
tablet after the buttons. On a phone the ring shrinks so Home sits on the
first screen. Tokens only, as the phone-pass rule above requires. */
/* justify-content: the old flex rule (ui.css) centred the row; a centred grid
never stretches its auto column, so the buttons shrank to their words. */
.completion .completion-actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: stretch; gap: 10px; max-width: 340px; margin: 0 auto; }
.completion .completion-actions .btn { width: 100%; max-width: none; white-space: normal; text-align: center; }
.completion .completion-secondary { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.completion .next-up {
max-width: 340px; margin: 14px auto 0; padding: 12px 14px;
display: grid; gap: 6px; justify-items: center; text-align: center;
background: var(--tone-tint); border: 1px solid var(--tone-edge);
border-radius: var(--d-r-group, 14px); box-shadow: none;
}
.completion .next-up .next-line { margin: 0; font-weight: 600; color: var(--d-ink); }
.completion .next-up .next-why { margin: 0; font-size: .88rem; color: var(--d-muted); }
.completion .next-up .btn { width: auto; margin-top: 4px; }
/* The out-of-hearts sheet: two doors of one width, not 60 % over 100 %. */
.modal-card .btn { width: 100%; max-width: 320px; align-self: center; min-width: 0; white-space: normal; }
@media (max-width: 520px) {
.completion { padding: 1.2rem 1rem 1.3rem; margin: var(--s-4) auto; }
.completion .ring, .completion .ring-wrap { width: 108px; height: 108px; }
.completion .ring-wrap .ring-label b { font-size: 1.7rem; }
.completion .gains { gap: 14px; margin-bottom: var(--s-4); }
}
/* ── THE DAY COLUMN, SHAPED (6 Sep 2026) ─────────────────────────────────────
Asaf: "this box isn't designed correctly … none of the boxes on the right of
the academy are shaped correctly." The Daylight rule (.dash .card, 1 Sep)
lost its look to the skin but kept its padding — 16px 0 16px 2px — and it
beat .lad-card's own 14px, so every box in this column ran its text, rows,
meters and doors into its left and right borders. The heading was an 11.6px
uppercase caption, the tool doors 11.2px on a laptop, and "আজ" / "লক্ষ্য:
3টি কাজ" wrapped onto two lines. The skills card and the graduation card
keep the Daylight rule — only this column was asked about. Tokens only. */
.dash .lad-card.card { padding: 14px 16px 16px; display: grid; gap: 10px; align-content: start; }
.dash .lad-card.card .lad-card-head {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
flex-wrap: nowrap; margin: 0; min-height: 28px;
}
.lad-card .lad-card-h {
margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.2;
letter-spacing: 0; text-transform: none; color: var(--d-ink);
}
/* the count beside the heading: the day's 1/3, the quests' 2/3, the league's tier */
.lad-count {
display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
min-height: 26px; padding: 2px 10px; border-radius: var(--d-r-capsule, 999px);
background: var(--tone-tint); color: var(--tone); border: 1px solid var(--tone-edge);
font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lad-count .icon { width: 14px; height: 14px; }
/* today: rows a thumb can hit, the minutes as a small pill */
.lad-card .task-list { gap: 0; }
.lad-card .task {
grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center;
padding: 6px 0; min-height: 44px; border-top: 1px solid var(--d-line);
}
.lad-card .task:first-child { border-top: 0; }
.lad-card .task-mark { width: 22px; height: 22px; border-color: var(--d-line-strong); }
.lad-card .task-title { font-size: .93rem; line-height: 1.3; }
.lad-card .task-min {
font-size: .84rem; padding: 2px 8px; border-radius: var(--d-r-capsule, 999px);
background: var(--d-sunken); color: var(--d-muted);
}
@media (max-width: 420px) {
.lad-card .task { grid-template-columns: 24px minmax(0, 1fr); }
.lad-card .task-min { grid-column: 2; justify-self: start; }
}
/* a finished day: the whole card wears the correct signal (tone-correct in
the template), its head a tinted band, the count with a check in it */
.today-card.is-done .lad-card-head {
margin: -14px -16px 0; padding: 10px 16px;
background: var(--tone-tint); border-bottom: 1px solid var(--tone-edge);
border-radius: var(--d-r-tablet, 16px) var(--d-r-tablet, 16px) 0 0;
}
.lad-card .today-line, .lad-card .week-line { margin: 0; }
.today-card.is-done .today-line, .lad-card .week-line.is-done { color: var(--tone); }
/* quests and the league share the rhythm */
.lad-card .quest { gap: 5px; }
.lad-card .qrow { font-size: .9rem; align-items: center; min-height: 24px; }
.lad-card .qrow-n { font-size: .84rem; }
.lad-card .lb-row { font-size: .9rem; min-height: 30px; }
.lad-card p:last-child { margin-bottom: 0; }
.lad-card .btn-sm { width: 100%; }
/* the four doors: tinted with their own tone, readable at every width */
.lad-tool {
font-size: .82rem; font-weight: 600; padding: 12px 6px; gap: 7px; min-height: 70px;
background: var(--tone-tint); border-color: var(--tone-edge); color: var(--tone);
}
.lad-tool .lt-ic svg { width: 20px; height: 20px; }
/* ── THE DAY ON THE PHONE (6 Sep 2026) ───────────────────────────────────────
Two of the three extras Asaf ticked once the column was reshaped.
1. The Today box used to come after all twelve steps of the ladder on a
phone — below 980px the three areas simply stack in DOM order. display:
contents lets the path's and the column's children take their own place
in the .lad grid, so Today sits under the unit's Continue strip, before
the title and the nodes; the other three boxes keep their place after the
path. The laptop's three real columns (min-width: 980px) are untouched.
2. A set's page opened with the whole day strip reduced to one hearts chip
on its own 48px row; the read-out now sits in the progress row
(_focus_hearts.html) and the strip is not rendered there. */
@media (max-width: 979px) {
.lad { gap: 16px; }
.lad-path, .lad-side { display: contents; }
.lad-rail { order: 1; }
.lad-continue { order: 2; }
.today-card { order: 3; }
.lad-head { order: 4; }
.ladder { order: 5; }
.lad-side > .card:not(.today-card) { order: 6; }
}
.focus-head .focus-hearts { flex: none; }
/* ── "Find the mistake" reads as a sentence (13 Sep 2026) ──────────────────
The question borrowed .tile-bank from the sentence builder, so a sentence
arrived as a grid of identical bordered buttons — one per word, one for the
comma, one for the full stop. Asaf read "Good morning, sir." off the screen
as `goodmorning,sir.` and called the question vague.
Every part stays tappable (in one item the comma IS the answer), but it is
set as running text: normal word spacing, punctuation hugging the word
before it, and a dotted underline instead of a box. main.css is shared with
six other apps, so .seg-chip is overridden here rather than changed there.
Tokens only, no hex — tests/test_colour holds that line. */
.spot-sentence {
margin: 0 0 var(--s-4);
font-size: 1.15rem; line-height: 2.1;
color: var(--ink);
}
.spot-sentence .seg-chip {
/* inline-BLOCK, not inline: a