-surface: #ffffff`), so darkening is correct for every one
of them. Contrast that with the sidebar footer in ui-system.css §99,
which is white-on-deep-green and had to move the OPPOSITE way — always
check the surface before shifting a text token.
========================================================================== */
@media (max-width: 640px) {
/* #6b756f -> #39443e : same hue, roughly 4.4:1 -> 8.3:1 on white.
#9aa39d -> #6b756f : the old "secondary" value becomes the new
"muted", which keeps the two tiers visually distinct instead of
collapsing them into one flat colour. */
.financials-page.financials-page {
--fp-text-secondary: #39443e;
--fp-text-muted: #6b756f;
}
.leads-page.leads-page {
--lp-text-secondary: #39443e;
--lp-text-muted: #6b756f;
}
.lessons-stats-page.lessons-stats-page {
--lsp-text-secondary: #39443e;
--lsp-text-muted: #6b756f;
}
/* Lessons Studio uses a slightly cooler muted grey (#8b929a). */
.ls-v2.ls-v2 {
--v2-text-secondary: #39443e;
--v2-text-muted: #6b756f;
}
.school-payroll.school-payroll {
--sp-text-secondary: #39443e;
--sp-text-muted: #6b756f;
}
.school-schedule.school-schedule {
--ss-text-secondary: #39443e;
--ss-text-muted: #6b756f;
}
.sv2.sv2 {
--sv2-text-secondary: #39443e;
--sv2-text-muted: #6b756f;
}
.teachers-stats-page.teachers-stats-page {
--tsp-text-secondary: #39443e;
--tsp-text-muted: #6b756f;
}
.team-profiles-v2.team-profiles-v2 {
--tp-text-secondary: #39443e;
--tp-text-muted: #6b756f;
}
/* Every redesigned screen opens with an eyebrow + title + subtitle
trio, and the subtitle is the line the user photographed ("Everyone
currently learning at your school…").
WEIGHT ONLY — the 14.5px size bump that used to be here is gone.
These subtitles are 13.5px by design, which is above the 13px floor
the generator works to; nothing was wrong with their size. They
read grey because of their colour, which the palette overrides
above already fix. 500 is the weight floor this whole fix works to,
so what is left here is insurance against a screen declaring 400.
The eyebrow rule that sat below this one is GONE for the same
reason. It forced `.sv2-eyebrow` and its seven siblings to 700 —
but these are small, uppercase, letter-spaced labels, so at 700
they became the loudest thing on the screen, louder than the title
they introduce. That is a large part of why the user said "it looks
like they are all in bold". Their own design weight is left alone. */
.sv2-subtitle,
.fp-subtitle,
.lp-subtitle,
.lsp-subtitle,
.sp-subtitle,
.ss-subtitle,
.tsp-subtitle,
.tp-subtitle {
font-weight: 500 !important;
}
/* ------------------------------------------------------------------
WAVE 4 — the dashboard (`--dv2-*`) and the sidebar
Found by auditing the rendered page rather than the stylesheets:
a script walked every visible text node on `/app` at 390px and
printed the ones below 14px or below weight 500. That surfaced two
families the three waves above had all missed.
------------------------------------------------------------------ */
/* 1. The dashboard grey.
`dashboard-v2.css` declares one grey, `--dv2-gray: #8b929a`, and
every one of its nine uses is a `color:` — the hour gutter, the
weekday headers, the "scroll for earlier hours" hint and the "No
lessons scheduled for today." line. Darkening the token therefore
fixes all four at once with no risk to borders or backgrounds.
#8b929a is 2.9:1 on white, which is BELOW WCAG AA for body text.
#5c646c is 5.9:1. This is the one place in the whole fix where
contrast really was the problem as well as stroke width.
THE SPECIFICITY HERE IS NOT DECORATION. When a teacher picks a
banner photo, `lib/bannerPalette` writes a themed palette and
`body.dv2-themed .dashboard-v2` re-points --dv2-gray at it. That
selector scores (0,2,1). A plain `.dashboard-v2` (0,1,0) would lose
to it, so themed dashboards would have stayed pale grey while
default ones went dark — the sort of half-fix that is worse than
none. Tripling the class gives (0,3,0), which wins outright.
Overriding the themed tone on phones is deliberate: legibility
beats colour harmony on a 390px screen. */
.dashboard-v2.dashboard-v2.dashboard-v2,
.dv2-popover.dv2-popover.dv2-popover,
.dv2-bells.dv2-bells.dv2-bells {
--dv2-gray: #5c646c;
}
/* 2. Four dashboard lines that were also simply too small: the hour
gutter (9px), the weekday headers (10px), the "scroll for earlier
hours" hint (11px) and the "No lessons scheduled for today." line.
THEIR SIZES ARE NO LONGER SET HERE. They were, with four hand-written
values, and that was a duplicate of what the generator already does
from the same source numbers — so every retune had to be made twice
and this copy was always the one left behind. `mobile-typography.css`
is layered and these rules are not, and a LAYERED `!important` beats
an unlayered one, so these were losing silently anyway.
Only the weight floor stays, and only where the source declares
below 500. */
.dv2-empty {
font-weight: 500 !important;
}
/* 2b. The school identity card: bells stop sitting ON the eyebrow.
------------------------------------------------------------------
`.dv2-bells--on-hero` is docked `position: absolute; top: 16px;
right: 20px` inside the identity card. On a desktop the card is wide
enough that the bells and the "SCHOOL OVERVIEW" line never meet. On a
phone the eyebrow runs straight underneath them and the two are
painted on top of each other — the user photographed it reading
"SCHOOL OVE 💳 N 🌱 🌴".
Rather than shrink the text back down, let the card wrap and give the
bells their own full-width row above the logo and the school name.
`order: -1` keeps them visually first; they are already first in the
DOM, so the tab order does not change.
Scoped to `.dash-identity` so the teacher dashboard hero, which docks
the same component over a photo with plenty of room, is untouched. */
.dash-identity {
flex-wrap: wrap;
}
.dash-identity .dv2-bells.dv2-bells--on-hero {
position: static;
order: -1;
width: 100%;
justify-content: flex-end;
}
/* 3. The sidebar nav labels are NOT fixed here — see the note below.
------------------------------------------------------------------
THE SIDEBAR OVERRIDE CANNOT LIVE IN THIS FILE.
The sizes it has to beat are written in app.css, which global.css
pulls into `@layer base`. This file is unlayered. The CSS cascade
treats `!important` in a LAYER as stronger than `!important`
outside every layer, and it does so BEFORE it ever looks at
specificity — so `.app-sidebar.app-sidebar .app-sidebar-nav
.app-sidebar-item { font-size: 14px !important }` (0,4,0) still
loses to app.css's (0,3,0). Measured, not assumed: the rule was
live in the served CSS and the label still computed to 12.5px.
Nothing above has this problem, because the nine page palettes and
dashboard-v2.css are unlayered like this file.
The sidebar fix therefore sits at the bottom of app.css, inside the
same layer, where ordinary specificity applies again.
------------------------------------------------------------------ */
}
/* ==================================================================
* MOBILE REDESIGN — phones only (≤640px)
* ==================================================================
* Built from three HTML mockups the owner supplied on 2026-09-07
* ("mobile-flagship-redesign", "mobile-batch4-pages",
* "mobile-schedule-week").
*
* THE RULES THIS FILE IS BUILT UNDER — decided by the owner, so do not
* quietly relax any of them:
*
* 1. PHONES ONLY. Every rule lives inside `@media (max-width: 640px)`.
* A computer must render exactly what it rendered before.
* 2. KEEP THE PALETTE. The mockups introduce a coral (#e0562f) and a
* warmer yellow (#ffd602). Both were rejected, TWICE — re-use the
* existing navy / green / lemon-yellow tokens instead and invent no
* new colour. Copy the mockups' LAYOUT, not their ink.
* 3. EVERY FEATURE KEEPS A DOOR. Blocks may be folded away, merged or
* dropped from a phone screen, but no control may become
* unreachable. Where a mockup deletes one, it moves behind the ⚙,
* into a tile, or onto the screen that owns it.
*
* ⛔ THERE USED TO BE A FOURTH RULE — "NO LOGIC CHANGES, reflow only".
* THE OWNER LIFTED IT ON 2026-09-09, and that was the whole point:
*
* "rebuild it exactly like in the reference mockups… but obv the
* logic behind each button and feature should stay"
*
* Three releases of phone work had shipped with almost no visible effect,
* because that rule made this a stylesheet-only problem and the mockups
* are not a stylesheet change. They DELETE blocks, MERGE controls and
* REORDER pages: "Pending reschedulings" has to become a tile reading
* "Reschedules", and no CSS can rewrite a word. Reaching the mockups
* needs the components — see SchedulePage.tsx and StudentsListV2.tsx.
*
* The app has been on Fredoka + Poppins product-wide since 56cd7c81, so
* the old "keep Inter" rule is gone as well. This file still declares no
* `font-family`; that belongs to typo.css.
*
* WHY A SEPARATE FILE, AND WHY LAST
* ---------------------------------
* `mobile-compact.css` is GENERATED by `scripts/gen-mobile-compact.mjs`
* and is overwritten on every run — hand edits there are lost. This file
* is hand-written and is imported after it (and after
* mobile-legibility.css) in AppLayout.astro, so it wins same-specificity
* conflicts by source order without needing `!important` everywhere.
*
* `!important` is used only where the generated stylesheet already
* shouts, since there is no other way to answer it.
*
* BREAKPOINT
* ----------
* 640px, matching every other phone rule in the codebase
* (mobile-typography.css, mobile-compact.css, the colour-contrast bump
* in colors.css). Picking a different number here would create screens
* that are half-compacted.
* ================================================================== */
@media (max-width: 640px) {
/* ==================================================================
* 1. STUDENTS — one toolbar, and a card you can actually stack
* ==================================================================
* Mockup note: "4 stacked buttons + 3 filter rows became one toolbar.
* Cards dropped from ~350px to ~70px — the same 6 students now fit in
* one screen instead of three."
*
* The card was a VERTICAL stack: flag+name, then badges, then the
* teacher chip, then a big tinted rate box. Four full-width bands for
* one student. Below it becomes a row: the rate lifts out of the flow
* into the top-right corner (the card is already `position: relative`),
* and the three remaining bands tighten up.
*
* Nothing is hidden. The mockup's compact card quietly dropped the
* teacher chip; we keep it, shrunk, because "who teaches this student"
* is exactly the kind of thing an owner scans a list for.
* ================================================================== */
/* ---- Page chrome: a toolbar, not a title block ----
The mockup opens the screen with search + ⚙ + and goes straight to
the chips and the cards. Production instead opened with roughly 430px
of chrome above the first student: an eyebrow, an H1, a sentence, four
full-width buttons, a "include my school students" pill and three
tabs — and only then the toolbar, whose own dropdowns overflowed the
right edge.
Nothing here is deleted. The blocks stay exactly where they are in the
markup and are folded away behind the ⚙, which unfolds them in place
(`.sv2--phone-filters-open`). That is why this needed a component
change: a stylesheet can hide a control, but only the component can
give the teacher a way to get it back. */
.sv2 {
display: flex;
flex-direction: column;
}
/* Pull the toolbar and the chips above everything else. Every other
child keeps its document order, since the default `order` is 0. */
.sv2-search-row {
order: -2;
margin-bottom: 10px;
gap: 7px;
flex-wrap: nowrap;
align-items: center;
}
.sv2-filter-row { order: -1; }
.sv2-search-box { flex: 1 1 auto; min-width: 0; }
/* The eyebrow, the H1 and the sentence under it. The top bar already
says "Students" one centimetre higher up, so this block is pure
repetition on a phone — it stays hidden even when the panel opens. */
.sv2-header > div:first-child { display: none; }
/* Folded away by default … */
.sv2-header,
.sv2-sub-tabs,
.sv2-search-row .sv2-select {
display: none;
}
/* … `!important` only here, because this label carries its display in an
inline style attribute and nothing else can answer that. */
.sv2-include-school { display: none !important; }
/* … and unfolded, in place, by the ⚙. */
.sv2--phone-filters-open .sv2-header { display: block; }
.sv2--phone-filters-open .sv2-sub-tabs { display: flex; }
.sv2--phone-filters-open .sv2-search-row .sv2-select { display: block; }
.sv2--phone-filters-open .sv2-include-school { display: inline-flex !important; }
/* Open, the selects need their own line — they cannot share the
toolbar's single non-wrapping row with the search box. */
.sv2--phone-filters-open .sv2-search-row {
flex-wrap: wrap;
}
.sv2--phone-filters-open .sv2-search-row .sv2-select {
flex: 1 1 45%;
min-width: 0;
}
/* The three toolbar buttons. Square, so they read as icons next to the
search field rather than as competing text buttons. */
.sv2-phone-filters-btn,
.sv2-phone-add-btn,
.sv2-phone-group-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
/* 38px clears the 36px tap-target floor the phone stylesheets use. */
width: 38px;
height: 38px;
border-radius: 10px;
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.sv2-phone-filters-btn {
border: 1px solid var(--sv2-border, #e2e4e0);
background: var(--sv2-surface, #ffffff);
color: var(--sv2-text, #1c231f);
}
/* Unmistakably "this panel is open", so the extra rows below have a
visible cause. */
.sv2-phone-filters-btn.is-open {
border-color: var(--sv2-brand-blue, #0f0069);
background: var(--sv2-brand-blue-light, #ecebf7);
}
/* The primary action wears the app's own green, as it does on desktop. */
.sv2-phone-add-btn {
border: 1px solid var(--sv2-brand-green, #0e503f);
background: var(--sv2-brand-green, #0e503f);
color: #ffffff;
font-size: 20px;
font-weight: 700;
}
/* "New class" — the app's blue, the same pairing the desktop header
uses (green student / blue class) so the two actions are telling the
same story on both screens.
⛔ IT IS A SEPARATE BUTTON, NOT A MENU ON THE GREEN "+".
Hiding it one tap deeper is how it got lost in the first place: the
desktop button was always rendered, just parked inside the filters
panel nobody opens looking for a create action. */
.sv2-phone-group-btn {
border: 1px solid var(--sv2-brand-blue, #0f0069);
background: var(--sv2-brand-blue, #0f0069);
color: #ffffff;
}
/* One student per row — a 260px minimum on a 390px screen was already
one column, but the gap was sized for a desktop grid. */
.sv2-grid {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.sv2-card {
padding: 9px 12px;
border-radius: 12px;
}
/* ---- Two lines, and each one has exactly one job ----
Line 1: flag + NAME, with a narrow strip on the right for the rate.
Line 2: the badges, with a narrow strip on the right for the actions.
Everything else is pulled out of the flow into those two strips.
Two earlier attempts are worth recording, because both looked
reasonable and both were wrong:
- Rate top-right AND the three action buttons on line 1 left the
name ~140px, so four students out of five read "Aiko Yam…",
"Camille L…". A list of names you cannot read is not a list.
- Moving the rate down to the badge line freed the name, but the
76px it took away from the badges made "Individual · B1 · Native
Japanese" WRAP, and the card grew from 87px to 143px — taller
than the version we were trying to shrink.
Splitting the two right-hand strips across the two lines is what
finally fits both. */
.sv2-card-top {
margin-bottom: 4px;
/* Gap lives in the escape hatch at the end of this file: the generated
sheet shouts 4.6px here and nothing unlayered can answer it.
Historic note, 13px not 7px: the green 🎓 badge is positioned at
`right: -5px` of the flag, so it hangs 5px OUTSIDE the flag's box and
ate most of the gap. At 7px the badge sat hard against the first
letter and the two read as one smudged glyph. The gap has to clear
the badge, not the flag. */
gap: 13px;
padding-right: 64px;
}
.sv2-badge-row {
margin-bottom: 0;
gap: 4px;
padding-right: 90px;
/* Never wrap: a second badge line is what made the card tall. If a
student collects more chips than fit, they scroll. */
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
min-height: 26px;
align-items: center;
}
.sv2-badge-row::-webkit-scrollbar { display: none; }
.sv2-badge-row > * { flex: 0 0 auto; }
/* The three row actions (schedule / add / menu) move off the name's
line and into the badge line's right-hand strip. */
.sv2-card-icons {
position: absolute;
bottom: 6px;
right: 12px;
gap: 3px;
/* The badge row beneath scrolls sideways, so a long badge
("Native French") slides straight under this pinned cluster and the
two render on top of each other. The gutter cannot help — the row
scrolls past it by design. An opaque backdrop is what makes a
pinned overlay legible above moving content. */
background: #fff;
padding-left: 6px;
border-radius: 8px;
}
/* Both the rate and the icons live in the card's right-hand strip, so
everything on the left must stop before it reaches them. The badge
row reserves its own gutter above; these are the two lines that were
still sliding underneath the icons — the name, and the group card's
"No students yet in this group." */
.sv2-card-top {
padding-right: 96px;
}
/* `!important` because this element carries an inline `padding: 6px 0`
from the component, and an inline style beats a normal stylesheet
rule. Without the marker the line sat straight under the icons with
`padding-right: 0`. */
.sv2-group-empty {
padding-right: 90px !important;
}
/* The two little badges that sit on the flag — "learns with us" at the
bottom-right, "in several groups" at the top-right — are pinned to
the SAME corner. On a desktop flag there is room between them; once
the phone rules shrink the flag they land on top of each other, and
two overlapping emoji just read as a smudge. Send the upper one to
the opposite side so the pair sits diagonally. */
.sv2-multi-badge {
right: auto;
left: -8px;
}
.sv2-icon-btn {
width: 26px;
height: 26px;
font-size: 12px;
}
/* The teacher line: same information, one notch quieter, and no longer
reserving 12px of empty space beneath itself. */
.sv2-teacher-chip,
.sv2-teacher-chip--assigned {
margin: 3px 0 0;
padding: 0;
font-size: 11px;
gap: 5px;
}
.sv2-teacher-dot {
width: 15px;
height: 15px;
font-size: 8px;
}
/* The hover-only "change" hint is unreachable on a touch screen, and it
was reserving width for a word nobody can ever see. */
.sv2-teacher-chip--assigned .sv2-change-hint {
display: none;
}
/* The rate / sessions box: out of the flow, into the TOP-right corner,
level with the name.
Losing the tinted background is deliberate: a filled block that size
in a corner reads as a button, and it is not one. The colour survives
in the number itself. */
.sv2-value-box {
position: absolute;
top: 8px;
right: 12px;
padding: 0;
background: none;
text-align: right;
/* Was 62px, which fitted "€30 / class" in Inter with a few pixels to
spare. The house body font became POPPINS on 2026-09-07, and
Poppins sets the same string at the same size about 38% wider
(measured with canvas measureText at 13.5px: Inter 58px, Poppins
80px), so the value spilled left across the level and language
pills. Widened to fit, and the badge row below now reserves the
same gutter so the two cannot meet again. */
max-width: 92px;
}
/* The "RATE" caption is dropped on a phone. It was stacked ABOVE the
amount, making the box ~39px tall in a 71px card, which drove the
amount straight down into the icon cluster pinned to the same corner
(measured: value t28-48, icons t26-62 — a full overlap, present with
Inter too and merely made obvious by the wider Poppins). A green
"€30 / class" in the corner does not need to be told it is a rate. */
.sv2-value-box .sv2-value-lbl {
display: none;
}
.sv2-value-box .sv2-value-val {
font-size: 13.5px;
white-space: nowrap;
}
/* The little progress bar under a sessions balance would collide with
the badge row now that the box is only 70px wide and floating. */
.sv2-value-box .sv2-progress-track {
display: none;
}
/* ---- The toolbar ------------------------------------------------
Three separate wrapping rows (actions / filter chips / search +
selects) stacked into most of a screen before a single student
appeared. They become three SINGLE-LINE rows that scroll sideways —
which keeps every control reachable without a redesign of the
controls themselves. */
.sv2-header-actions,
.sv2-filter-row {
/* `flex-direction: row` is NOT redundant here. students-v2.css has its
own `@media (max-width: 640px)` block (near its end) that sets
`flex-direction: column` on `.sv2-header-actions` — that is what
turned four buttons into four full-width bands filling the screen
before a single student appeared. Setting only `flex-wrap` changed
nothing visible, because a column has no sideways wrapping to
suppress. Same trap for the button width just below. */
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
overflow-x: auto;
/* Room for the scrollbar on the platforms that draw one, so it never
sits on top of the buttons. */
padding-bottom: 2px;
/* Hide the bar itself — the row is obviously scrollable from the
clipped chip at its edge. */
scrollbar-width: none;
}
.sv2-header-actions .sv2-btn {
width: auto;
white-space: nowrap;
}
.sv2-header-actions::-webkit-scrollbar,
.sv2-filter-row::-webkit-scrollbar,
.sv2-search-row::-webkit-scrollbar {
display: none;
}
.sv2-header-actions > *,
.sv2-filter-row > * {
flex: 0 0 auto;
}
.sv2-filter-row {
margin-bottom: 10px;
gap: 6px;
}
.sv2-filter-chip {
padding: 6px 11px;
font-size: 12.5px;
}
/* Search keeps the full width it needs to be usable; the three selects
ride along on the same line and scroll. */
.sv2-search-row {
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
margin-bottom: 12px;
scrollbar-width: none;
}
.sv2-search-box {
flex: 1 0 150px;
padding: 7px 11px;
}
.sv2-select {
flex: 0 0 auto;
padding: 7px 9px;
font-size: 12.5px;
}
/* The sub-tabs (Enrolled / Intake forms / Archived) were spaced for a
desktop row and pushed "Archived" off the screen. */
.sv2-sub-tabs {
gap: 14px;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.sv2-sub-tabs::-webkit-scrollbar { display: none; }
.sv2-sub-tab {
flex: 0 0 auto;
font-size: 13px;
}
/* ==================================================================
* 2. LEADS — a 7-column table is not a phone screen
* ==================================================================
* Mockup note: "The old screen was a 6-column desktop table clipped at
* the edge of the phone. Same data, reflowed as cards — nothing is cut
* off, nothing needs horizontal scrolling."
*
* This is done in pure CSS. Every `` already carries a `data-field`
* attribute (LeadsList.tsx uses it to open the drawer on the right
* field), so the column headings can be re-created as `::before` labels
* without touching the markup at all — no React change, no risk to the
* click handlers, and the table stays a table for screen readers.
* ================================================================== */
/* ---- The toolbar ----
Four controls on one non-wrapping row: a status dropdown, a search
box, "Move to My School" and "Add lead". At 390px that ran 205px past
the right edge, so "Add lead" was completely off screen — while the
empty state underneath said, in as many words, 'click "Add lead" to
create your first one'.
The mockup's answer is the same toolbar it uses on Students: a search
field, then small square buttons. So the two wordy buttons keep their
icons and drop their labels, which buys back about 250px and lets all
four fit. Their names survive as `title` / `aria-label`. */
.leads-toolbar {
gap: 8px;
flex-wrap: nowrap;
}
.leads-search-box {
flex: 1 1 auto;
min-width: 0;
}
.leads-btn-label {
display: none;
}
/* Without their labels these are icon buttons, so make them square
rather than leaving them padded for text that is no longer there. */
.leads-toolbar .leads-btn {
flex: 0 0 auto;
/* 38px clears the 36px tap-target floor the phone stylesheets use. */
width: 38px;
height: 38px;
padding: 0;
justify-content: center;
}
/* The status dropdown keeps its words — it is the only control whose
current VALUE ("All statuses", "Trial booked") has to be readable
without opening it — but it may not push the others off the edge. */
.leads-toolbar .status-filter {
flex: 0 1 auto;
min-width: 0;
}
.leads-toolbar .sf-trigger {
max-width: 130px;
}
.leads-toolbar .sf-trigger > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.leads-page .leads-table,
.leads-page .leads-table tbody,
.leads-page .leads-table tr,
.leads-page .leads-table td {
display: block;
width: auto;
}
/* The header row's only job was to label the columns. Each cell now
carries its own label, so the row is redundant — and `display: none`
on a `` is safe here because the labels are reproduced below,
so nothing is lost to a screen reader either. */
.leads-page .leads-table thead {
display: none;
}
.leads-page .leads-table {
border: none;
background: none;
overflow: visible;
}
/* One lead = one card.
Every cell is placed EXPLICITLY rather than left to auto-flow. The
first version used `order` plus a negative margin to lift the status
badge up onto the name's line; it worked, but left a band of dead
space under the badge and made each card ~375px tall — twelve leads
came to 4,500px of scrolling. Naming the four rows costs six lines
and takes the guesswork out. */
.leads-page .leads-table tbody tr.lead-tr {
background: var(--lp-surface, #fff);
border: 1px solid var(--lp-border, #e7e5df);
border-radius: 13px;
padding: 11px 13px;
margin-bottom: 8px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px 12px;
align-items: start;
}
.leads-page .leads-table tbody td.lead-cell {
padding: 0;
border-bottom: none;
font-size: 12.5px;
min-width: 0;
line-height: 1.35;
}
/* Row 1 — the title line: who they are, and how far they have got. */
.leads-page .leads-table td[data-field='name'] {
grid-column: 1;
grid-row: 1;
}
.leads-page .leads-table td[data-field='name'] .lead-name {
font-size: 14.5px;
font-weight: 700;
}
.leads-page .leads-table td[data-field='status'] {
grid-column: 2;
grid-row: 1;
justify-self: end;
text-align: right;
}
/* Rows 2–3 — the four placement facts, two per line. */
.leads-page .leads-table td[data-field='programme_id'] { grid-column: 1; grid-row: 2; }
.leads-page .leads-table td[data-field='desired_level'] { grid-column: 2; grid-row: 2; }
.leads-page .leads-table td[data-field='class_mode'] { grid-column: 1; grid-row: 3; }
.leads-page .leads-table td[data-field='class_format'] { grid-column: 2; grid-row: 3; }
/* Row 4 — how much of the placement questionnaire is answered. */
.leads-page .leads-table td[data-field='progress'] {
grid-column: 1 / -1;
grid-row: 4;
}
/* ---- The re-created column headings ----
One rule per column because CSS cannot map an attribute value onto a
different string. Keep this list in sync with the `| `s in
LeadsList.tsx — if a column is renamed there and not here, the label
silently goes stale. */
.leads-page .leads-table td[data-field]::before {
display: block;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--lp-text-muted, #b3b2ba);
margin-bottom: 2px;
}
.leads-page .leads-table td[data-field='programme_id']::before { content: 'Course'; }
.leads-page .leads-table td[data-field='desired_level']::before { content: 'Level'; }
.leads-page .leads-table td[data-field='class_mode']::before { content: 'Type'; }
.leads-page .leads-table td[data-field='class_format']::before { content: 'Mode'; }
.leads-page .leads-table td[data-field='progress']::before { content: 'Progress'; }
/* Name and status are the card's title and badge — labelling them
would be stating the obvious twice. */
.leads-page .leads-table td[data-field='name']::before,
.leads-page .leads-table td[data-field='status']::before { content: none; }
/* The tick column, only present while moving leads between cabinets.
It carries no `data-field`, so it needs its own explicit slot or it
auto-places into whichever cell happens to be free and shoves a real
field out of the layout. */
.leads-page .leads-table td.lead-pick-cell {
grid-column: 1 / -1;
grid-row: 5;
}
/* The toolbar above the table gets the same single-line treatment as
Students, for the same reason. */
.leads-page .leads-toolbar {
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
scrollbar-width: none;
}
.leads-page .leads-toolbar::-webkit-scrollbar { display: none; }
.leads-page .leads-toolbar > * { flex: 0 0 auto; }
.leads-page .leads-search-box { flex: 1 0 140px; max-width: none; }
/* ==================================================================
* 3. LESSONS STUDIO — the generate button stops being a full-width bar
* ==================================================================
* Mockup note: "Cards shrank from ~260px … to ~90px — the generate
* action is now an icon button, not a full-width bar repeated on every
* card."
*
* The button keeps its label in the DOM (it is what a screen reader
* announces, and what the desktop shows); on a phone the label is
* clipped to zero width and the button collapses to a square in the
* card's top-right corner. The pointer target stays 34px, comfortably
* above the 24px minimum.
* ================================================================== */
.ls-v2-card {
padding: 11px 12px;
border-radius: 12px;
position: relative;
}
.ls-v2-card-top {
margin-bottom: 6px;
/* Space for the generate square AND the kebab menu. */
padding-right: 72px;
}
.ls-v2-avatar {
width: 30px;
height: 30px;
font-size: 12px;
}
.ls-v2-card-name { font-size: 14px; }
.ls-v2-card-badges {
margin-bottom: 6px;
gap: 4px;
}
/* Last topic + stats collapse into one quiet two-line block instead of
two bands separated by a rule and 20px of margin. */
.ls-v2-card-lasttopic {
padding-top: 7px;
margin-bottom: 3px;
}
.ls-v2-card-stats {
margin-bottom: 0;
}
/* The former full-width bar. `margin-top: auto` (which pinned it to the
bottom of a flex column) has to be cancelled explicitly or it fights
the absolute positioning. */
/* ⛔ `!important` is NOT decoration here. This file is imported by
AppLayout, but `lessons-studio.css` is imported by the PAGE
(`pages/app/lessons-studio/index.astro`), which loads AFTER the
layout. So at equal specificity the page's `width: 100%` and
`padding: 8px 0` won, and the button stayed a full-width green bar
drawn straight across the card's title — measured at 357px wide when
it should be 34px. Everything below that the page file also declares
has to be marked, or the collapse silently does not happen.
(`position`, `top`, `right`, `height` and `overflow` are NOT in the
page file, so they applied fine and needed no marker.) */
.ls-v2-quick-btn {
position: absolute;
top: 10px;
right: 42px;
width: 34px !important;
height: 34px;
margin-top: 0 !important;
padding: 0 !important;
border-radius: 9px !important;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* Hide the WORDS, keep the button and its ✨.
This used to be `font-size: 0` plus a `::before { content: '✨' }`,
and it did not work: the generated phone stylesheet sets a font-size
on this button with `!important` from inside `@layer base`, and an
important declaration in a layer beats an unlayered one — so the words
came back at full size inside a 34px box and rendered as two clipped
half-lines, "Gener/nex".
The label is now its own element in the markup, so `display` does the
job. The generator never touches `display`, and the accessible name
lives on the button's own `aria-label`. */
.ls-v2-quick-label {
display: none;
}
.ls-v2-quick-btn > span[aria-hidden] {
font-size: 15px;
line-height: 1;
}
/* ---- The page chrome ----
The mockup opens on the toolbar, exactly as Students does: a search
field, the All / Students / Groups chips, then the cards. Production
spent ~200px first on an eyebrow, a title, a two-line description and
two full-width buttons — and then overflowed anyway, because the
search box and the sort dropdown share one 386px row on a 390px
screen.
The heading goes (the top bar already says "Lessons Studio"). The two
buttons stay: they are the only doors to the teaching style and to a
new workspace. They are simply put on one line with the sort control,
which is what the space bought pays for. */
.ls-v2-eyebrow,
.ls-v2-title,
.ls-v2-sub {
display: none;
}
.ls-v2-toolbar-right {
flex-wrap: wrap;
gap: 8px;
width: 100%;
}
.ls-v2-search {
flex: 1 1 100%;
min-width: 0;
}
.ls-v2-sort {
flex: 1 1 auto;
min-width: 0;
}
.ls-v2-header-actions {
gap: 8px;
}
.ls-v2-header-actions .ls-v2-btn {
flex: 1 1 0;
min-width: 0;
}
/* ==================================================================
* 4. RESOURCES — the three stacked dropdowns
* ==================================================================
* Mockup note: "Three stacked dropdowns (language / level / trains)
* folded behind one filter button, matching every other list page."
*
* They are folded onto ONE SCROLLING LINE rather than behind a button.
* A button would have to open a panel that does not exist yet, and
* building that panel is new behaviour — which this pass is not allowed
* to introduce. One line costs the same vertical space as a collapsed
* button and keeps every filter one tap away instead of two.
* ================================================================== */
.res-filters {
display: block;
}
.res-chips,
.res-selects {
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
scrollbar-width: none;
}
.res-chips::-webkit-scrollbar,
.res-selects::-webkit-scrollbar { display: none; }
.res-chips > *,
.res-selects > * { flex: 0 0 auto; }
.res-chips { margin-bottom: 6px; }
.res-select {
/* 13px is the floor the original file documents: below 16px iOS zooms
on focus, and the existing code accepts that trade for a select but
not below 13px legibility. Left exactly where it was. */
padding: 6px 8px;
}
/* ==================================================================
* 5. PAYMENTS — left-aligned rows, one line of filters, a clean input
* ==================================================================
* Mockup notes: "the student list below moves from centered blocks
* (harder to scan) to the same left-aligned row component used on
* Students"; "the amount field's broken overlapping spinner is replaced
* with a plain clean input"; and on the detail screen, "'Select a
* student on the left' removed — mobile navigates in, there's no 'left'
* here."
* ================================================================== */
/* ---- The page's own title block ----
Eyebrow, "Payments", and a sentence explaining the page — 125px of it,
directly under a top bar that already says "Payments". The mockup opens
on the money instead. Scoped to this page rather than to `.page-header`
generally, because that class is shared with screens this pass has not
looked at. */
.app-finance-page > .page-header {
display: none;
}
/* ---- "Period analytics" ----
The section header is a two-column desktop shape: a title column on
the left and its controls on the right. At 390px that gave the title
103px and the six range buttons 215px, so the buttons broke into three
ragged rows of two and three, and the caption next to them turned into
a five-line paragraph. Stacked, the title gets the full width and the
buttons get one line they can scroll. */
.ppv3-page .page-section-header {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.ppv3-page .page-section-actions {
width: 100%;
}
.ppv3-period-pills {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
/* Hide the scrollbar but keep the scrolling — a visible bar on a phone
just eats a row of pixels. */
scrollbar-width: none;
/* The row is edge-to-edge, so let the last pill reach the edge too
rather than stopping short of it. */
padding-bottom: 2px;
}
.ppv3-period-pills::-webkit-scrollbar { display: none; }
.ppv3-period-pills > * { flex: 0 0 auto; }
/* ---- The three headline figures ----
The mockup gives all-time earnings a full-width card of its own and
sets the two monthly figures side by side beneath it. Stacked, the
three cards cost 356px to say three numbers. */
.ppv3-stats-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.ppv3-stat-card--alltime {
/* First and full width, as the mockup draws it. */
order: -1;
grid-column: 1 / -1;
}
/* A centred block forces the eye back to the middle on every row. Names
are read down a left edge. */
.ppv3-tile {
text-align: left;
padding: 10px 12px;
border-radius: 12px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
}
.ppv3-tile-flag { grid-row: 1 / span 2; }
/* The name owns the whole first line, out to the right edge.
Sharing that line with the money note left it ~154px and truncated
most of the list to "Rafael …", "Camille…", "Aiko Ya…" — the same
mistake the Students card made, for the same reason. */
.ppv3-tile-name {
grid-column: 2 / -1;
grid-row: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ppv3-tile-type {
grid-column: 2;
grid-row: 2;
justify-self: start;
}
/* The money note drops to the second line, opposite the type badge —
still on the right edge, where every amount in the app lives. */
.ppv3-tile-note {
grid-column: 3;
grid-row: 2;
text-align: right;
white-space: nowrap;
align-self: center;
}
.ppv3-tile-status-dot {
/* Was pinned to a centred card's corner; on a row it reads better as
a marker on the left edge, next to the flag. */
top: 10px;
left: 6px;
right: auto;
}
/* Two dropdowns stacked is two bands of chrome above the list. */
.ppv3-dropdown-row {
gap: 6px;
}
.ppv3-filter-select {
min-width: 0;
padding: 7px 8px;
}
/* ---- The amount field ----
`` draws a native up/down spinner that, in a
12px-tall field, overlaps the value being typed. Hiding the spinner
is the whole fix: the keyboard on a phone is numeric anyway, so the
arrows were never the way anybody entered an amount. */
.ppv3-form-input.amount {
appearance: textfield;
-moz-appearance: textfield;
}
/* ---- The details open UNDER the person, not after the list ----
Owner, 2026-09-09: "The details of recording payment and memory should
open under the person that was selected, not in the end of the list".
It was worse than untidy: the panel rendered after the WHOLE list, so
tapping somebody near the top put the answer several screens further
down, with nothing on it to say whose it was.
The list is a two-column grid, so the panel has to span both columns
or it would sit in one half. The markup change that puts it here is in
PaymentsTileGrid.tsx (`inlineDetail`) — no stylesheet can move a node
from the end of a list into the middle of it. */
.ppv3-tile-detail {
grid-column: 1 / -1;
margin: -2px 0 8px;
}
/* On a computer the panel is a card of its own. Inside the list it reads
as a continuation of the row above, so it drops the outer frame and
keeps one left edge tying it to the person it belongs to. */
.ppv3-tile-detail .ppv3-detail-panel {
border: none;
border-left: 3px solid var(--ppv3-navy, #0f0069);
border-radius: 0 10px 10px 0;
padding: 12px;
}
/* ---- Amount and date stack ----
The row is `display: flex` with no wrap: the amount is `flex: 1` and
the date is a fixed 150px. Inside the detail panel, which is ~304px
wide on a phone, that does not fit — and it could not shrink either,
because a flex item will not go below its intrinsic width without an
explicit `min-width: 0`, and a native date input's intrinsic width is
large. The date field was running 119px past the right edge.
One field per line. Nothing is lost, and a date input is the last
control that should be squeezed — its native picker is unusable at
half width. */
.ppv3-form-row {
flex-wrap: wrap;
}
.ppv3-form-row .ppv3-form-input {
flex: 1 1 100%;
min-width: 0;
width: 100%;
}
.ppv3-form-input.amount::-webkit-outer-spin-button,
.ppv3-form-input.amount::-webkit-inner-spin-button {
appearance: none;
-webkit-appearance: none;
margin: 0;
}
/* ---- "Select a student on the left" ----
There is no "left" on a phone: the list and the detail are the same
column, one under the other.
The WHOLE empty panel goes, not just the sentence. Hiding only the
text was the first attempt and it was worse than doing nothing — it
left a tall empty bordered box with a lone 👆 floating in it, which
reads as a screen that failed to load. There is genuinely nothing to
show until a student is picked, and the panel reappears the moment
one is.
Nothing is deleted from the component: on a computer the sentence is
still true, still visible, and still points at a real left column. */
.ppv3-detail-empty {
display: none;
}
/* …but hiding the SENTENCE alone left its container behind: a 304x312
empty bordered box under the last student, which reads as a panel that
failed to load. Hide the panel itself whenever the only thing in it is
that placeholder. `:has()` keeps this tied to the real condition — the
moment a student IS selected the panel has content instead, and it
comes straight back. */
.ppv3-detail-panel:has(.ppv3-detail-empty) {
display: none;
}
/* The little round icon is pinned to the card's top-right corner, so a
two-word title ran underneath it and "LESSONS GIVEN" lost its N.
Now the text stops before the icon starts. */
.ppv3-stat-card-body {
padding-right: 34px;
}
/* ==================================================================
* 6. SCHEDULE — a week grid wide enough to read
* ==================================================================
* Mockup note: "The week grid now scrolls horizontally so each day
* column is wide enough for real text: no more 'Ces/ar' wrapping."
*
* Seven columns across 390px leaves ~46px each, which is narrower than
* most first names — hence "Ces/ar", "Das/ha". Fixed 100px columns and
* a sideways scroll give every name room; the hour gutter is pinned to
* the left edge so you never lose track of what time you are looking
* at.
*
* ⚠ The sticky day-header gives up its stickiness here. `position:
* sticky; top: …` resolves against the nearest scroll container, and
* making `.cal-week` one moves that anchor from the page to the grid.
* Keeping both would need a DOM change; on a phone, being able to READ
* the day column is worth more than the header following you down.
* ================================================================== */
.cal-week {
/* `overflow: clip` (the desktop value) exists so the header can stick
to the PAGE. We trade that for a horizontal scroller. */
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
/* Land on a day boundary rather than mid-column. `proximity` rather
than `mandatory`: mandatory fights a deliberate small nudge. */
scroll-snap-type: x proximity;
/* Load-bearing, and the reason the grid first opened already scrolled
44px to the right with Monday tucked under the hour gutter — the
header read "ION 7" instead of "MON 7" and today's lessons were
sliced down the middle.
`scroll-snap-align: start` on a day column means "align this column
with the START of the scrollport", and the scrollport starts at
x = 0, which is underneath the sticky 44px hour column. Declaring
that the usable area begins 44px in makes "start" mean "just right
of the hours" — what a reader means by it. */
scroll-padding-left: 44px;
}
.cal-week-header,
.cal-week-body {
/* 44px gutter + 7 real columns. `min-content` on the track keeps the
two grids in exact lockstep, which is what stops the day names
drifting away from their columns as you scroll. */
grid-template-columns: 44px repeat(7, 100px);
width: max-content;
min-width: 100%;
}
/* Not sticky any more (see the warning above) — say so explicitly
rather than letting it resolve to something surprising. */
.cal-week-header {
position: static;
}
/* Keep the hours visible while the days scroll past them. */
.cal-week-hours,
.cal-week-corner {
position: sticky;
left: 0;
z-index: 4;
background: var(--color-white, #fff);
}
.cal-week-corner {
background: var(--color-neutral-50, #f7f7fb);
}
.cal-week-day-col {
scroll-snap-align: start;
}
.cal-week-day-header {
padding: 8px 4px 10px;
}
/* ---- The rail above the grid ----
The mockup replaces the whole rail with one compact grid of icon
tiles. Everything the rail used to spend ~350px of phone screen on —
the greeting, the "Explore this page" card, the big yellow CTA, six
full-width text rows and the colour legend — becomes eight small tiles
about 130px tall in total, so the calendar itself is visible without
scrolling.
An earlier pass tried to reach this with CSS alone, by pairing the six
rows into a 2-column grid. It could not: the labels are sentences
("Pending reschedulings"), so they had to be clipped with an ellipsis
and the screen still read as a wall of text — "Pending resched…". The
tiles carry SHORT labels of their own (`schedule.tile.*`), which is a
markup change, and that is why this needed the component and not just
a stylesheet. */
.sched-rail-greeting,
.sched-rail-cta,
.sched-rail-section,
.sg-open {
display: none;
}
.sched-tiles {
display: grid;
/* Four per row: eight actions land in two tidy rows with no horizontal
scrolling, which a teacher would have to discover. */
grid-template-columns: repeat(4, 1fr);
gap: 6px;
padding: 2px 0 10px;
}
.sched-tile {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 5px;
/* Tall enough for a TWO-line label at the 12px legibility floor. The
first version set 62px against a 10.5px label, which broke that
floor — mobile-legibility.spec.ts caught all eight tiles. The floor
is not negotiable: the owner has reported unreadable phone text
twice, and 12px is where this font stops resolving into visible
stems at phone density. */
min-height: 74px;
padding: 9px 2px 8px;
border: 1px solid var(--color-border, #e7e5df);
border-radius: 12px;
background: var(--color-surface, #ffffff);
color: var(--color-text, #1a1a2e);
font: inherit;
cursor: pointer;
}
.sched-tile-icon {
font-size: 17px;
line-height: 1;
}
.sched-tile-label {
/* 12px is the phone legibility floor, not a design preference — see
the min-height note above. A tile is ~84px wide, so a label may take
two lines; the grid row stretches to the tallest tile so the row
still reads as even. The labels are authored short per language
(`schedule.tile.*`) to keep that to two. */
font-size: 12px;
font-weight: 600;
line-height: 1.15;
text-align: center;
hyphens: auto;
}
/* The primary action wears the app's own navy, not the mockup's coral —
the owner keeps her existing palette. */
.sched-tile--primary {
background: var(--color-primary-900, #0f0069);
border-color: var(--color-primary-900, #0f0069);
color: #ffffff;
}
.sched-tile--active {
border-color: var(--color-primary-900, #0f0069);
background: #eef2ff;
}
/* Count bubble, pinned to the tile's corner rather than sitting in the
flow — a tile is too narrow to hold a label and a number side by side. */
.sched-tile-badge {
position: absolute;
top: 3px;
right: 3px;
min-width: 18px;
padding: 0 4px;
border-radius: 999px;
background: var(--color-primary-900, #0f0069);
color: #ffffff;
/* 11px, not the 9.5px this started at: a count nobody can read is not
a count. It sits just under the 12px prose floor because a two-digit
number has no x-height or descenders to lose — the same reason
uppercase labels are allowed to stop at 12 (see the note in
gen-mobile-typography.mjs). */
font-size: 11px;
font-weight: 700;
line-height: 18px;
text-align: center;
}
/* Now that a column is 100px instead of 46px, the event card can show a
real name instead of two clipped syllables. */
.cal-event {
padding: 4px 6px 4px 8px;
border-radius: 7px;
}
/* One line, with an ellipsis if it truly does not fit.
The desktop rule clamps the name to TWO lines, which assumes the card
is tall enough for two. A 60-minute lesson on a phone is not: the
second line was being sliced through the middle by the card's own
`overflow: hidden`, so "Camille Laurent" rendered as "Camille" plus
the top halves of the letters below it — which reads as a rendering
fault rather than a truncation. One clean line is honest, and at the
current column width most names fit it whole anyway. */
.cal-event-who {
-webkit-line-clamp: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: normal;
font-size: 11.5px;
}
/* ==================================================================
* 7. SETTINGS & MY PROFILE
* ==================================================================
* Mockup note: "compacted every locked feature to one line instead of a
* paragraph, and fixed the Danger Zone bug where the button and warning
* text overlapped."
* ================================================================== */
/* A locked integration is a row you cannot use. It does not deserve
three lines of a phone screen explaining itself. */
.acct-integration-row--locked {
padding-top: 8px;
padding-bottom: 8px;
}
.acct-locked-note {
font-size: 11px;
padding: 2px 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* ---- Label-and-button rows (`.acct-row-between`) ----
Mockup note: "fixed the Danger Zone bug where the button and warning
text overlapped."
The overlap had TWO causes, and only fixing one of them leaves it
looking broken:
1. The buttons were dead. Every one of them used the generic `.btn` /
`.btn-primary`, and `buttons.css` is not among the stylesheets
AppLayout loads — measured in the browser, they all computed to
`padding: 0` with a transparent background. A button with no
padding is not a button, it is a run of text sitting next to
another run of text, which is exactly what "overlapping" looked
like. Fixed at the source by moving those pages onto the live
`.acct-btn` classes (ui-system.css has documented this trap since
the account screens were written).
2. The row is `display: flex; justify-content: space-between`. Even
with a real button, 390px is not enough for a three-line warning
and a 168px button side by side. Below, they stack, and the
button takes the full width — the right target size for the most
destructive control on the page. */
.acct-row-between {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.acct-row-between .acct-btn,
.acct-row-between .acct-toggle,
.acct-row-between .acct-locked-note {
align-self: flex-start;
}
/* The danger-zone action is the one that should be unmissable and
deliberate, so it spans the row rather than hugging its label. */
.acct-danger-panel .acct-row-between .acct-btn {
width: 100%;
justify-content: center;
}
/* The "You also teach lessons" banner is the same shape under a
different class name, and it needs the same treatment: side by side
at 390px its paragraph was squeezed into a ~110px column and set one
or two words per line. */
.acct-teach-banner {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.acct-teach-banner .acct-btn {
align-self: flex-start;
}
/* ==================================================================
* 8. NOTES — the one pill that was the wrong colour
* ==================================================================
* Mockup note: "the 'My Classes' pill … was green here instead of
* yellow everywhere else. Standardized to yellow like every other
* screen."
*
* Scoped to the notes page so a green pill that is legitimately green
* somewhere else is not repainted by accident.
* ================================================================== */
.notes-page .app-sidebar-badge--green,
.notes-view .app-sidebar-badge--green {
background: var(--color-brand-yellow-400, #fbe840);
color: var(--color-brand-indigo-500, #0f0069);
}
/* ==================================================================
* 9. STUDENT PROFILE — the Lessons tab
* ==================================================================
* Mockup note: "Same bug as Leads: a raw desktop table with the last
* column ('MORE') clipped off-screen, and dates wrapping to 3 lines.
* Reflowed as cards — same information, nothing cut off."
*
* Measured before touching it: the table was 431px wide inside a 390px
* screen, i.e. 82px of it simply unreachable.
*
* Same treatment as Leads, with one difference — that table already had
* a `data-field` on every cell, this one had nothing, so a `data-col`
* hook was added to the component purely so the labels can be rebuilt
* here. Keep the two lists in step.
* ================================================================== */
.lh-tbl,
.lh-tbl tbody,
.lh-tbl tr,
.lh-tbl td {
display: block;
width: auto;
}
/* The headings are re-created per cell below, so the row of them is
redundant rather than lost. */
.lh-tbl thead { display: none; }
.lh-tbl { border: none; background: none; }
/* One lesson = one card, laid out explicitly.
Row 1: the lesson number + date, and its status on the right.
Row 2: duration and money.
Row 3: the teacher's note, full width. */
.lh-tbl tbody tr {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 6px 10px;
align-items: start;
padding: 11px 12px;
margin-bottom: 8px;
border: 1px solid var(--color-neutral-200, #e7e5df);
border-radius: 12px;
background: var(--color-white, #fff);
}
.lh-tbl tbody td {
padding: 0;
border: none;
min-width: 0;
}
.lh-num-col { grid-column: 1; grid-row: 1; }
.lh-tbl td[data-col='date'] {
grid-column: 2;
grid-row: 1;
font-weight: 600;
/* The reason dates were setting on three lines: a 60px column. With
the full width there is no reason to break at all. */
white-space: nowrap;
}
.lh-tbl td[data-col='status'],
.lh-tbl td[data-col='students'] {
grid-column: 3;
grid-row: 1;
justify-self: end;
}
.lh-tbl td[data-col='duration'] { grid-column: 2; grid-row: 2; }
.lh-tbl td[data-col='money'] {
grid-column: 3;
grid-row: 2;
justify-self: end;
text-align: right;
}
.lh-tbl td[data-col='note'] {
grid-column: 1 / -1;
grid-row: 3;
font-size: 12px;
line-height: 1.4;
}
/* The bin sits with the card rather than in a column of its own — a
whole column for one icon is what pushed the table past the edge. */
.lh-actions-col {
position: absolute;
top: 8px;
right: 8px;
}
/* Keep the note clear of the bin. */
.lh-tbl tbody tr { padding-right: 40px; }
/* ---- The rebuilt column headings ----
One rule per column: CSS cannot map an attribute value onto a
different string. Keep in step with the ` | `s in
LessonsHistoryTab.tsx. Date and status are self-evident and are left
unlabelled; a date that says "Date" above it is noise. */
.lh-tbl td[data-col='duration']::before,
.lh-tbl td[data-col='money']::before,
.lh-tbl td[data-col='note']::before {
display: block;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-muted, #8888a4);
margin-bottom: 1px;
}
.lh-tbl td[data-col='duration']::before { content: 'Duration'; }
.lh-tbl td[data-col='money']::before { content: 'Money'; }
.lh-tbl td[data-col='note']::before { content: 'Teacher\2019s note'; }
/* ==================================================================
* 10. STUDENT PROFILE — the Payments tab
* ==================================================================
* Mockup note: "'Individual · Sofiia · 1h 30' was wrapping across 3
* lines in one cramped column. Now a clean two-line row per lesson."
*
* Two lines exactly, as asked:
* line 1 date ................................. amount
* line 2 what the class was ................... paid / unpaid
* ================================================================== */
.ptv2-tbl,
.ptv2-tbl tbody,
.ptv2-tbl tr,
.ptv2-tbl td {
display: block;
width: auto;
}
.ptv2-tbl thead { display: none; }
.ptv2-tbl { border: none; background: none; }
.ptv2-tbl tbody tr {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 4px 10px;
align-items: center;
padding: 10px 34px 10px 12px;
margin-bottom: 8px;
border: 1px solid var(--color-neutral-200, #e7e5df);
border-radius: 12px;
background: var(--color-white, #fff);
}
.ptv2-tbl tbody td {
padding: 0;
border: none;
min-width: 0;
}
/* ⛔ Every cell is placed BY NAME, never by position.
Two different tables share `.ptv2-tbl`: "Lessons to pay" is
`count | period | what | amount`, "Lessons paid" is
`# | date | what | amount | status | actions`. The first version
placed cells with `:nth-child` and `.ptv2-muted`, which put the
period and the description in the same grid slot — the date range
printed on top of the amount. Names cannot collide like that. */
.ptv2-num-col { grid-column: 1; grid-row: 1 / span 2; }
/* Line 1, left: what identifies the row. */
.ptv2-tbl tbody td[data-col='date'],
.ptv2-tbl tbody td[data-col='period'] {
grid-column: 2;
grid-row: 1;
font-weight: 600;
}
/* A single date never needs to wrap; a RANGE ("18 Jun – 7 Sep") does. */
.ptv2-tbl tbody td[data-col='date'] { white-space: nowrap; }
/* Line 1, right: the money. */
.ptv2-tbl tbody td[data-col='amount'] {
grid-column: 3;
grid-row: 1;
justify-self: end;
text-align: right;
white-space: nowrap;
}
/* Line 2, left: "Individual · Sofia · 1 hour" — the line the mockup
caught wrapping over three lines in a cramped column. It now has the
full width of the card. */
.ptv2-tbl tbody td[data-col='what'] {
grid-column: 2 / -1;
grid-row: 2;
font-size: 12px;
line-height: 1.4;
}
/* …unless there is a status pill to sit beside, in which case the
description gives the right-hand end back to it. */
.ptv2-tbl tbody tr:has(td[data-col='status']) td[data-col='what'] {
grid-column: 2;
}
.ptv2-tbl tbody td[data-col='status'] {
grid-column: 3;
grid-row: 2;
justify-self: end;
}
/* The lesson count on the outstanding row reads as a quantity, so say
so — "21" alone in a corner is a mystery. */
.ptv2-tbl tbody td[data-col='count'] {
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
font-weight: 700;
text-align: center;
min-width: 26px;
}
.ptv2-actions-col {
position: absolute;
top: 8px;
right: 6px;
}
/* ==================================================================
* 11. GROUP PROFILE — the Members list
* ==================================================================
* Mockup note: "Real layout bug: the 'A1 · Joined Jun 8, 2026' meta
* text was floating disconnected above the member's name instead of
* sitting under it. Fixed the stack, and made 'leave date' and
* remove/reactivate proper equal-weight buttons instead of a stray
* dashed line and a lone icon."
*
* The mockup was right and worth checking rather than assuming: reading
* the JSX suggests the meta already sits under the name (it is the
* second child), but `.gd-member-name` is `display: flex` with
* `align-items: center`, so the name and the meta are laid out SIDE BY
* SIDE and the shorter meta is centred against the taller name — which
* is what "floating above" looks like. Measured in the browser: the
* meta's top was above the name's.
*
* ⛔ What is NOT here, deliberately: the mockup's headline feature —
* "Members split into Active and Inactive tabs" and "a new Archive
* action" — is ALREADY BUILT. Both tabs render (with counts) and the
* Archive button already sits next to Reactivate. Rebuilding either
* would have been new logic on top of working logic.
* ================================================================== */
/* The two `.gd-member-name` rules that lived here (stack the meta under
the name; keep the avatar beside it) were REMOVED on 2026-09-07 — not
because they were wrong, they fixed a real bug, but because the
members list was then rebuilt from the owner's own mockup
(mobile-group-members-redesign.html) and `.gd-member-name` no longer
exists. The row is now `.gd-member-top` > `.gd-member-idlink` >
`.gd-member-id`, which stacks the meta under the name by construction.
CSS aimed at a deleted class is a trap for whoever reads it next.
See "Group members list" in specs/design/specs.md. */
/* The "stray dashed line": the actions strip carried a dashed top
border that read as a torn edge rather than a divider. The row is
already a card with its own border; it needs no second one.
Scoped through `.gd-member-row` on purpose. The dashed rule lives in
GroupDetailPage.tsx's own inline | |