/* Showup design system.
--------------------------------------------------------------------------
Ported from the Showup console handoff. Three rules carry the identity and
everything below follows from them:
1. Soft geometry on a near-black ground (owner decision 2026-08-03, chosen
against two squarer alternatives seen side by side). Cards, controls and
sheets round on a small radius scale (--r/--r-s/--r-pill) and sit with
real depth (--shadow). This deliberately FORKS this app's look from the
FORMWORK system BFT Scheduler uses — the two products still share type,
voice and spacing, but not geometry. The brandmark and the Book tab tile
stay square: they are the logo, not furniture.
2. Depth is one shadow token, tone bars are inset. Separation comes from
surface-on-ground contrast plus --shadow; drawn borders are reserved for
affordances (inputs, buttons, tinted alerts). A status edge is an inset
bar so it clips with the corner radius instead of tracing it.
3. Two families and a hard split of duty. Archivo carries prose, names,
headings and metric numerals; JetBrains Mono carries every label,
timestamp, price, status, table cell and button — always uppercase. If a
string is a value, it is Archivo. If it is a label about a value, it is
mono.
js/lib/theme.js resolves the user's preference (system/light/dark) to a
concrete data-theme on , so this file only needs one dark block rather
than duplicating tokens across a prefers-color-scheme query and an attribute
selector. */
/* Both families are variable fonts, which is why there are four files and not
the seven a static build would need: one file per family per subset spans the
whole weight axis, and the four weights this design uses are interpolated from
it. Declaring the range rather than a single weight is what enables that — with
`font-weight:400` the browser would synthesise 500/600/700 by smearing the
400 outlines, which is the fake-bold look that makes uppercase mono labels
muddy at 9.5px.
swap, not block: an offline cold start should show the layout in a system font
immediately rather than hold a blank screen. The fallback stacks in --sans and
--mono are metric-adjacent enough that the reflow is a change of texture, not
of line count.
Subsets are split so the common case stays small. latin is 34K and covers
everything the UI itself renders; latin-ext is another 32K and exists only for
accented client names, so unicode-range keeps it unfetched until such a name
is actually on screen. Chinese names fall through both to the system CJK face,
as they already did on the CDN — neither family has CJK coverage. */
@font-face{
font-family:'Archivo';
font-style:normal;
font-weight:100 900;
font-display:swap;
src:url('fonts/archivo-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Archivo';
font-style:normal;
font-weight:100 900;
font-display:swap;
src:url('fonts/archivo-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'JetBrains Mono';
font-style:normal;
font-weight:100 800;
font-display:swap;
src:url('fonts/jetbrains-mono-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'JetBrains Mono';
font-style:normal;
font-weight:100 800;
font-display:swap;
src:url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
color-scheme:light;
/* The page ground is a real grey, not an off-white. At #f1f2f3 it sat 1.12:1
from the white cards — a difference you could measure and not see, so every
card floated with no edge and the screen read as one undivided sheet. At
#e3e6ea the same card is 1.25:1 lighter than the ground and the border is
confirming a boundary the eye already found rather than drawing it alone.
Everything else in this block follows from that one move: the ground got
darker, so every grey printed on it had to get darker too. */
/* THE GROUND IS NEAR-WHITE, NOT MID-GREY (owner, 2026-08-25: "how to optimize
the light screen. is it better if it was all white?").
Measured before changing it: the page was #dae0e7 and the hero card sitting
on it was #eaeef2 — 1.14:1, a difference you can compute and cannot see. So
the two brightest surfaces on the screen were the TOP BAR and the TAB BAR,
both pure white, and the content between them was a grey slab. That is the
wrong way round, and it is what makes the theme read as dull rather than
bright: the chrome was lit and the work was not.
All-white is not the answer either — this app leans on cards, and with no
ground there is nothing for a card to be raised FROM. The answer is the one
every legible light interface uses: a near-white ground, white cards, and a
hairline doing the boundary work (see --edge). Lightening the ground only
RAISES every text contrast measured below, so nothing here gets tighter.
#f3f5f8 SPECIFICALLY (owner, 2026-08-26: "scheduler has the screen
whiter"). It is the value the sibling scheduler uses, and the two products
share a design system — so this is not a taste adjustment, it is the two
apps agreeing on their ground. Its note there says the same thing this one
does from the other side: "the design's --surface as the page ground: white
panels need something to sit on". */
--bg:#f3f5f8;
/* Chrome — the brand bar and the tab bar. In light they are white, so the
screen is bookended by the same surface the cards are made of and the grey
ground is only ever the middle. It also gives the two smallest labels in
the app — the tab words and the mode chip — a white backing to clear 4.5:1
against, which they cannot do on the ground at this weight. Dark keeps
chrome on the page colour: there the panels sit lighter than the page, so
inverting the chrome would put the brightest band at the edges. */
--chrome:#ffffff;
--surface:#ffffff;
/* The pressed/inset tint. Against a white card it now has to be visible in
its own right — it used to borrow the difference from a near-white page. */
--surface-2:#eaeef2;
/* RAISED, in both themes — which --surface-2 is NOT. In dark it is lighter
than the page and lifts a card off it; in light it is the pressed/inset
tint and sits DOWN. Painting a hero with it therefore worked in dark and
quietly failed in light, which is exactly what had happened. One token, one
meaning: the surface a card is raised to. */
--raised:#ffffff;
/* SUNKEN — the mirror of --raised, and the half of the pair light mode
actually needs. In dark you can say "you type here" by going lighter; in
light you are already at white, so the only direction left is down. Named
by MEANING like --raised, because --surface-2 is one step DARKER in light
and one step LIGHTER in dark: the same trap that made a card sink here and
lift there. */
--sunken:#e9edf2;
--inset:inset 0 1px 2px rgba(15,20,25,.07);
--soft:#ccd3da;
--ink:#111417;
--ink-invert:#ffffff;
/* Three greys, each set by the darkest ground it is ever printed on rather
than by how it looks on white. --muted 9.2:1 white / 7.3:1 ground,
--faint 6.0 / 4.8, --fainter 5.7 / 4.5. The last two sit close together
because 4.5:1 on a #e3e6ea ground is a hard floor at around #5e6770 and
there is no room below it — a fourth step would only be a fourth step that
could not be read. */
--muted:#3a424a;
--faint:#4e5760;
--fainter:#59626b;
/* Three border weights now, not two. --line divides inside a panel,
--line-strong bounds it, and --btn-bd outlines a control. The third one
matters because a button whose only edge is its border has to clear 3:1
to be found at all, while a card's border is confirming an edge the
surface change already made. Dark collapses the first two.
--line WAS #dde2e7, which is 1.2:1 on white — invisible (owner, 2026-08-16:
"in the light mode, i cannot see any hairlines"). That was defensible while
every hairline lived INSIDE a card: the surface change had already drawn
the boundary and the line was only confirming it. Today and the queue have
no cards, so the hairline IS the structure — the only thing separating the
hero from the day, or one session from the next — and a divider carrying
that much has to be seen. A token edit, not a per-screen override, because
the change of meaning applies everywhere the app has gone cardless. */
--line:#c4cdd6;
--line-strong:#aeb7c0;
--btn-bd:#828b95;
/* THE CARD'S OWN EDGE, and the single biggest thing this theme was missing.
A white card on a light grey ground is 1.33:1 — a difference you can
measure and barely see — so the card was relying on a wide soft shadow that
reads as a glow rather than as a boundary. A hairline ring plus a tight
contact shadow is how every legible light interface separates a surface
from its page. Transparent in dark, where the surface is already lighter
than the ground and an edge would only add noise. */
--edge:rgba(17,24,33,.11);
/* Green, like dark's lime, because green means "selected / in view" in both
themes — the accent used to be blue here. Dark enough (0.47) to clear
4.5:1 on an almost-white page, where the lime itself would vanish. */
--accent:oklch(0.55 0.11 170);
--accent-ink:#ffffff;
--neutral-mark:#8b939c;
/* Filled emphasis — selected segment, active day. Inverting to --ink is the
design's own idiom for "this one is chosen". */
--solid:var(--accent);
--on-solid:var(--accent-ink);
--toast-bg:#16191c;
--toast-ink:#ffffff;
/* There is no separate "success" hue: positive movement is the accent. */
--ok:var(--accent);
/* Both dropped a step in lightness for the same reason the accent did. A
status word is the only coloured thing on its row, so if it is the one
string that cannot be read the row has no status at all. */
--warn:oklch(0.53 0.145 62);
/* One orange in this theme too — see the note in the dark block. */
--bad:var(--warn);
/* Tinted backings are derived rather than picked, so they track the accent
and stay flat against whichever surface they land on. */
--ok-bg:color-mix(in oklab,var(--ok) 12%,var(--surface));
--warn-bg:color-mix(in oklab,var(--warn) 12%,var(--surface));
--bad-bg:color-mix(in oklab,var(--bad) 12%,var(--surface));
--scrim:rgba(22,25,28,.42);
--r:0;
--maxw:520px;
--nav-h:78px;
/* One height for every frozen head. Home's carries the most (month bar plus
week strip) and sets the number; the others stand to it rather than each
sizing to its own contents, so the chrome under the brand bar does not
change depth as you move between tabs. */
--freeze-h:121px;
/* One height for every client card — the roster, Home's attention feed and
Pay's unpaid list are the same object on three screens. */
--card-h:59px;
/* The two SOURCE-OF-TRUTH cards — a client on the roster, a session on the
calendar — stand taller than the cards that merely summarise them. Home's
attention feed and Pay's list are views onto these records, not the records
themselves, and the height is what says so. */
--card-h-lg:84px;
/* Geometry scale for the 2026-08-03 fork: --r for surfaces (cards, sheets),
--r-s for controls (inputs, buttons, icon tiles), --r-pill for status
chips and inline actions. The brandmark and Book tile stay square. */
--r:16px;
--r-s:12px;
--r-pill:999px;
/* One pill height for the whole app: two of them plus a 6px gap fill a
56px card rail exactly, which is where the number comes from. Anything
that wants to look like a rail pill uses this rather than guessing. */
--pill-h:25px;
/* Depth: one downward shadow for resting surfaces, one upward for the
sheet. Light needs far less ink than dark to read as lift. */
/* TWO SHADOWS, not one. The wide ambient alone made a card look lit rather
than lifted; the tight 1px contact shadow is the part the eye reads as an
edge sitting on a surface. */
--shadow:0 1px 2px rgba(15,20,25,.10),0 6px 18px rgba(15,20,25,.07);
--shadow-up:0 -2px 4px rgba(15,20,25,.08),0 -14px 34px rgba(15,20,25,.12);
/* Card gradient: lit faintly from above, the Bevel read. Light barely
moves (white to a breath of grey); dark travels further. --hi is the
1px top edge-light that sells the curvature — invisible in light. */
/* LIGHT GETS DEPTH TOO (owner TODO, actioned 2026-08-07). Dark travelled a
real gradient and carried a 6% edge light — the whole point of the Bevel
fork — while light ran four values of near-white and set --hi to fully
transparent. The result was two different apps: one with modelled cards
and one with flat rectangles, and only the dark one looked designed.
A longer travel, because white has less room to fall than near-black does
and a 4-value ramp reads as no ramp at all. */
/* THE FOOT OF A CARD MUST STAY ABOVE THE GROUND IT SITS ON. This ended on
#eef1f5, which is now exactly --bg — so every card faded into the page at
its bottom edge and the boundary died halfway down. Ends one step above the
ground instead: still a gradient, still the same direction of travel, but a
card is a card for its whole height. */
--card-grad:linear-gradient(180deg,#ffffff 0%,#fafbfc 100%);
/* The edge light is WHITE ON WHITE in dark and has to be the opposite here:
what lifts a pale card off a pale ground is the top edge being brighter
than the paper around it, which on white means a hairline of pure white
over a card that is no longer pure white. */
--hi:rgba(255,255,255,.9);
/* Frosted glass for the floating bar island and the + circle. */
--glass:rgba(255,255,255,.82);
--glass-hi:rgba(15,20,25,.10);
/* The grouping wash behind a banded region (Progress's body-data run).
FLAT, not a fade (owner, 2026-08-16: "proerly wrap the coloar the same
inteh background.. now it fades out") — a wash that evaporates halfway
down leaves the last card sitting on bare page, and the grouping claim
with it. One tint, edge to edge. */
--band-grad:rgba(15,20,25,.06);
/* Motion vocabulary. One curve, two beats: --dur-1 acknowledges a touch,
--dur-2 moves furniture (sheets, screens). Anything longer than .25s on a
phone reads as lag, not luxury. The reduced-motion guard below the type
rules disables every animation and transition wholesale. */
--ease:cubic-bezier(.2,.8,.2,1);
--dur-1:.14s;
--dur-2:.22s;
/* Archivo and JetBrains Mono come from Google Fonts (see index.html) with a
system fallback, so a cold offline start still renders in the right sizes
and weights. Self-host both before this goes to real users. */
--sans:Archivo,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--display:var(--sans);
--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme=dark]{
color-scheme:dark;
/* Near-black, not slate (2026-08-03). The old #3a4046 ground was a mid-grey
— exactly the band OLED panels, True Tone and auto-brightness shift most,
which is why the app read "a shade lighter" on the phone than on the
desk. Near-black renders stably on OLED, and the accents glow against it
instead of merely contrasting. */
--bg:#141619;
/* Same value as --bg: dark's chrome has always been the page colour, and
this token exists so light can differ without light needing an override
rule for every bar. */
--chrome:#141619;
--surface:#1f2226;
--surface-2:#25282d;
/* Dark keeps its extra step: the hero lifts further than an ordinary card. */
--raised:#25282d;
/* NOT SIMPLY "DOWN" HERE, and the honest version matters. A boxed field sits
on a card (--surface #1f2226) in some places and on a sheet (--bg #141619)
in others, and dark is already near the floor — there is no value that is
darker than both. #191c20 is darker than the card and lighter than the
page, so it separates from either; which DIRECTION it separates in changes
with the container, and in dark that is the convention rather than a
compromise. Light has room below white, so there it is genuinely sunken. */
--sunken:#191c20;
--inset:inset 0 1px 2px rgba(0,0,0,.28);
--soft:#33373d;
--ink:#f6f7f8;
--ink-invert:#141619;
--muted:#d5dade;
--faint:#c3c9ce;
/* Was #a4abb2, which came to 3.47:1 on a panel — so the weekday letters in
the day strip and the studio name under every session were the two things
on the screen you could not quite read. Dark hits the same floor light
does: below --faint there is only about one step left before a grey stops
being text. */
/* THE MOCK'S VALUE, not a brighter guess (2026-08-18). Ours was #bcc3ca where
the design says #a8afb6 — a step hot, on the tier that carries the most
text on any screen. It went unnoticed while the body ran 12% small; once
the type came up to the kit there was simply more of it, and the owner read
the result as "the white is a bit too sharp".
The other three tiers already match the design exactly: ink #f6f7f8,
muted #d5dade, faint #c3c9ce. This was the one that did not. */
--fainter:#a8afb6;
--line:#33373d;
--line-strong:#3d4248;
/* No edge in dark: the surface already sits lighter than the ground, so a
ring would be a second boundary drawn over one the eye has already found. */
--edge:transparent;
--btn-bd:#4a5057;
--accent:oklch(0.86 0.15 170);
--accent-ink:#141619;
--neutral-mark:#8b939b;
--toast-bg:#f6f7f8;
--toast-ink:#141619;
--shadow:0 8px 24px rgba(0,0,0,.35);
--shadow-up:0 -12px 32px rgba(0,0,0,.45);
--card-grad:linear-gradient(180deg,#262a30 0%,#1b1e22 100%);
--hi:rgba(255,255,255,.06);
--glass:rgba(31,34,38,.72);
--glass-hi:rgba(255,255,255,.09);
--band-grad:rgba(255,255,255,.05);
/* Both lifted for the same reason light's were lowered: a status word that
cannot be read leaves the row with no status. --bad moved furthest, from
0.72 to 0.82, because a red dark enough to look like a warning on paper is
the one hue that goes illegible fastest on a dark panel. */
/* Two colours carry meaning in this app and no others (owner's rule):
ACCENT green says "selected / in view", ORANGE says "needs attention".
There is no pink and no red — what used to be --bad is now the deeper,
hotter end of the same orange, so severity still reads as severity
without introducing a third hue to learn. */
--warn:oklch(0.83 0.15 70);
/* ONE orange, not two: a slightly hotter "bad" beside "warn" read as an
inconsistency rather than a severity, so attention has a single colour. */
--bad:var(--warn);
--scrim:rgba(0,0,0,.55);
}
*,*::before,*::after{box-sizing:border-box}
/* SCROLL DOWN, NEVER SIDEWAYS (owner, 2026-08-17: "fix the pages on mobile so
it won't jiggle left right up down, only scroll").
The drift comes from children that are WIDER than the viewport — a long mono
meta line, a wide sheet, a chip row — and the browser then lets the whole
page slide to reveal them. Locking overflow-x here stops the slide; the
min-width:0 below stops it being created, because a flex child defaults to
min-width:auto and refuses to shrink below its content.
overscroll-behavior-y kills the rubber-band bounce at the ends, which is the
up-down half of the jiggle. */
/* CLIP, NOT HIDDEN. overflow-x:hidden computes overflow-y to auto, which turns
html and body into scroll containers — and a position:sticky element sticks
to its nearest scrolling ancestor, so the top bar started sticking to a box
that never scrolls and rode away with the content. The page also stopped
scrolling at the document level entirely.
overflow:clip clips without establishing a scroll container, which is the
whole reason it exists. Sticky survives. */
html{overflow-x:clip}
body{overflow-x:clip;overscroll-behavior-y:none}
/* The actual CAUSE, not just the symptom: a flex or grid child defaults to
min-width:auto, so a long unbreakable string makes its row wider than the
screen and pushes the page out. Every row in this app is a flex line with a
text column, and these are those columns. */
.tb-row-b,.cl-row-b,.bk-body,.q-row .tb-row-b,.pg-m{min-width:0}
.tb-row-t,.tb-row-m,.cl-row-t,.cl-row-m,.bk-name,.bk-meta{min-width:0;overflow-wrap:anywhere}
/* Anything that genuinely has to be wide scrolls INSIDE itself rather than
taking the page with it. */
.pg-trend,.mh,.logset{max-width:100%}
html,body{margin:0;padding:0}
/* No rubber-band: the iOS bounce drags the whole page — sticky header
included — which reads as the bar "not being locked". Nothing here needs
pull-to-refresh; updates announce themselves with a reload bar instead. */
html,body{overscroll-behavior-y:none}
html{-webkit-text-size-adjust:100%}
body{
font-family:var(--sans);
color:var(--ink);
background:var(--bg);
font-size:var(--ds-body);
line-height:1.5;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,.big-amount,.stat .n{font-family:var(--display);letter-spacing:-.02em}
/* Times, money, counts and measurements sit in columns and change in place,
so they need fixed-width figures or the layout jitters. Archivo carries the
metric numerals, and its tabular set is what keeps them aligned. */
button{font:inherit;color:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---------- mono label roles ----------
The three sizes the handoff uses, named by where they sit rather than by
size, so a rename of the scale does not mean hunting down call sites. */
.eyebrow{font:500 var(--ds-label)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.eyebrow-sm{font:500 var(--ds-label)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.meta{font:400 var(--ds-label)/1.5 var(--mono);letter-spacing:.04em;color:var(--faint)}
/* ---------- layout shell ---------- */
#app{min-height:100vh}
.shell{
max-width:var(--maxw);
margin:0 auto;
min-height:100vh;
background:var(--bg);
display:flex;
flex-direction:column;
position:relative;
}
/* Opaque, not glass. A blurred bar is a soft edge, and this system does not
have soft edges — the 1px rule underneath does the separating, and it is the
only thing that does: the bar sits on the page background rather than on a
lighter panel of its own, so nothing competes with the title. */
/* FROZEN, AND HIGHER (owner, 2026-08-18). sticky only pins while an ancestor
is the scroll container; the moment a view puts its own scroller in between,
the bar rides up with the content and the coach loses the wordmark, the
avatar and the way out. fixed pins it to the viewport whatever any view does
underneath. The shell reserves the height via --top-h, which app.js already
publishes on every render and on resize.
The top padding drops from 13px to 6px above the safe area — the inset
already clears the notch, and 13px on top of it was a band of nothing. */
.topbar{
position:sticky;top:0;z-index:20;
background:var(--chrome);
border-bottom:1px solid var(--line-strong);
/* Bottom > top: the top pad sits under the status bar and the brand row has
its own slack, while the day line ends flush at its baseline and needs the
hairline held off it. */
/* 16px, MATCHING .main (owner, 2026-08-28: "the logo banner contains useful
info and functions, should we make that a bit wider?"). It was 18 while the
content below it was 16 — so the one bar on the screen carrying the day's
facts was NARROWER than the list it sits over, and its left half was
clipping. Aligning the two also lines the wordmark up with the first row
under it, which is what a coach reads as "the same column". */
padding:calc(env(safe-area-inset-top) + 8px) 16px 13px;
display:flex;align-items:center;justify-content:space-between;gap:12px;
}
/* A bar carrying a second row stacks instead: the brand row keeps the old
layout, and whatever rides under it gets the full width. app.js measures
the bar's real height into --top-h every render, so the taller bar moves
the sticky layers below it without anything here knowing the number. */
.topbar-2{display:block}
/* THE ROW IS ALWAYS A ROW. This rule was scoped to .topbar-2, so every screen
WITHOUT a second line — Clients, Calendar, Library, Money — put the wordmark
and the coach's avatar in a column, one under the other. The bar is flex, so
its single .topbar-row child stretched and its own children stacked. A
layout rule that only holds in the case it was written for is not a layout
rule. */
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
/* The client's own row, under the brand band. It carries the name, the standing
line and the status pill — and no controls, which is the point: the way back
lives in the band above rather than in line with the person's name. */
.cl-head-row{margin-top:10px;align-items:flex-start}
.cl-head-row .cl-state{margin-top:2px}
/* The title takes the slack so anything else in the bar — a back arrow before
it, a button after it — sits against its own edge rather than being spaced
out around the middle. */
.tb-title{flex:1;min-width:0}
/* The screen's name, riding beside the wordmark after a middle dot. Mono and
quieter than the brand so the pair reads as "product · where you are". */
/* Small and quiet beside the wordmark — the brand is the loud half, the
screen name is a caption on it. Same 12px on all four pages. */
.brand-page{display:flex;align-items:center;gap:7px;color:var(--faint);
font:500 var(--ds-label)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Back to sentence case. The five destinations now carry their title in
.pagehead below the brand bar, and this rule is left serving the screens you
arrive at from somewhere specific — a client, settings — which should be set
the same way as the pageheads they were opened from. */
.topbar h1{font-size:var(--ds-figure);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ONE LINE. "+852 9123 4567 · 5 SESSIONS LEFT" broke after SESSIONS at phone
width and pushed the tab row down with it. The line is three short facts and
a phone number; it shrinks to fit rather than wrapping, because a name and
its standing are read as one object. */
.topbar .sub{font:400 var(--ds-label)/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-top:5px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){.topbar .sub{font-size:var(--ds-micro);letter-spacing:.03em}}
.topbar .sub-over{margin:0 0 6px}
.main{flex:1;padding:4px 16px calc(var(--nav-h) + env(safe-area-inset-bottom) + 34px)}
/* ---------- page head ----------
Large, sentence case, Archivo. It is the one line of display type on the
screen and it is a phrase a coach would say — "Schedule", "Open the day" —
so it is set as language rather than as a caption. The tab bar underneath
stays in caps: those are five fixed labels on a control, not sentences. */
.pagehead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
padding:13px 0 11px}
/* Set in the tab bar's own type, one size up. The 28px version was a magazine
headline for a word the coach already knows — they pressed the tab, they know
which screen they are on. Small caps names the screen and gives the height
back to the content. */
.pagehead h1{font:600 var(--ds-strong)/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;
margin:0;color:var(--ink);min-width:0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pagehead-r{font:400 var(--ds-label)/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
color:var(--faint);flex:none}
/* ---------- week bar and day strip ----------
Seven cells, Monday to Sunday, and no scrolling. The old strip ran thirty
days sideways, which meant the answer to "what does this week look like"
depended on where you had last dragged it. A fixed week is a shape you can
learn; the arrows move it a week at a time and the label says which. */
/* Flex, not a 3-column grid: the Today button appears only when the selected
day is not today, so the bar has to hold three children or four. */
.cal-nav{display:flex;gap:8px;margin-bottom:8px}
.cal-nav .cal-nav-mid{flex:1;min-width:0}
/* A word, not a chevron — the other three controls are arrows and a month, and
a fourth arrow would have to mean something the first three do not. */
.cal-today{flex:none;display:flex;align-items:center;justify-content:center;min-width:58px;
font:500 var(--ds-label)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
color:var(--accent);border-color:var(--accent)}
/* On today it IS the call-off control, so it wears the colour of what it does.
Same slot, same size — only the meaning changes, which is why the min-width
above is fixed: the other three controls must not shuffle when it swaps. */
.cal-today.is-danger{color:var(--warn);border-color:var(--warn)}
/* AUG 2026 · WK 34 ON ONE ROW (owner). At 16px with .1em tracking the month,
the year and the week ran past the pill on a 375px screen and wrapped to
three lines, which pushed the whole strip down. Smaller, tighter, and told
not to wrap — the numbers are still the largest thing in the bar. */
.cal-nav .cal-nav-mid{}
/* 13px, not 9px. This is the one bar in the app that gets pressed dozens of
times a day — the week you are looking at is changed from here — and at 9px
the whole thing stood 35px tall, so all three of its controls were under a
thumb's worth. The pseudo-element trick used elsewhere does not apply: these
three sit edge to edge, so overlapping targets would steal each other's
taps. The bar just gets to be the size it is used at. */
/* Three separate pills rather than one segmented bar (owner's reference):
each control is its own rounded surface, which is why they can now carry
their own hit area without stealing a neighbour's tap. */
.cal-nav > *{padding:6px 13px;color:var(--muted);border:1px solid var(--line);
border-radius:var(--r-pill);background:var(--surface);background-image:var(--card-grad);
display:flex;align-items:center;justify-content:center}
/* The Book screen puts .icon-btn in this bar, and .icon-btn is a fixed 32px box.
32px minus the 28px of padding above left 4px of content, which flattened the
chevron to a 2px sliver. The bar sizes its own children; anything sitting in
it gives up its own dimensions. */
.cal-nav > .icon-btn{width:auto;height:auto}
.cal-nav svg{flex:none}
/* The month is set at the same size as the day numerals it labels, so the
two rows read as one instrument — a skinnier bar carrying bigger type. */
.cal-nav .cal-nav-mid{
gap:7px;font:500 var(--ds-strong)/1 var(--mono);letter-spacing:.06em;
text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
/* The ISO week, riding quietly beside the month it qualifies */
.cal-wk{font-size:var(--ds-small);color:var(--faint);letter-spacing:.1em}
/* Seven separate cards with air between them, not a fused strip: a day is a
thing you tap, and the gaps are what make that legible at a glance. */
.wk-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wk-strip.hidden{display:none}
/* Softly rounded like every other surface in this app — the day cells were
the only near-square things in the system, and the brandmark is meant to
be the one intentional square. */
.wk-d{
/* Half-pixel borders: on a phone's 2–3× screen this is a true hairline,
and every cell carries the same width so the selected one cannot shift
its neighbours by half a pixel. */
border:.5px solid var(--line);
background:var(--surface);padding:9px 2px 8px;
display:flex;flex-direction:column;align-items:center;gap:5px;}
.wk-d-w{font:500 var(--ds-micro)/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--fainter)}
/* SCALED UNDER THE MONTH BAR (owner, 2026-08-18: "reduce to match the new
month bar"). The bar came down to ~14px and the day numbers stayed at 16,
so the strip was shouting over the thing that labels it. Everything on this
screen now sits at or below the bar: the date strip reads first, the day
heading second, the rows third. */
.wk-d-n{font:600 var(--ds-small)/1 var(--mono);letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums}
/* The day's booked count, under the numeral — transparent at zero so all
seven cells keep the same height. */
.wk-d-ct{flex:none;font:500 var(--ds-label)/1 var(--mono);color:var(--faint)}
.wk-d-ct.blank{color:transparent}
/* The weekday label never takes colour — it is the same word on every cell
and colouring it just doubles a signal the numeral already carries. */
.wk-d.today .wk-d-n{color:var(--accent)}
/* A general holiday, in the red every wall calendar in Hong Kong prints them
in — and a mark in the corner, so it does not rest on colour alone. Today
wins the numeral if the two land on the same day: which day it is now is the
more urgent fact, and the corner mark still says holiday. */
/* A public holiday colours its numeral and nothing else — the corner dot was
a second mark for the same fact, and the day itself already names the
holiday in the line under the strip. */
.wk-d.hol .wk-d-n{color:var(--warn)}
.wk-d.today.hol .wk-d-n{color:var(--accent)}
/* Selected is a lime RING, not an inverted block (owner's reference): the
ground stays dark so the seven cells read as one row, and the accent marks
which one is being read rather than repainting it. */
/* A hairline ring, and nothing else: the border alone says which day is
being read. The numeral stays ink — green on a date means ONE thing in
this app, and that is today. */
/* THE SELECTED DAY IS WHITE, NOT GREEN (owner, 2026-08-17: "should it just be
white, no need for green border?").
Right — accent means "act on this", and the day you are already looking at
is not a thing to act on, it is where you are. Spending the accent on it
competed with UP NEXT, OFFER and BOOK, which are the rows that do want the
tap. A plain bright edge says "here" without asking for anything. */
/* FILLED WHITE (owner, 2026-08-18: "can we make the selected date a white
filled selection?"). The ring alone was a hairline change on a strip of
seven identical cells — findable, but you had to look for it. A filled cell
is the one thing on the screen you cannot miss, and it costs no colour the
app has spent elsewhere: --ink is the page's own text, so the strip inverts
rather than lighting up. Everything inside it flips to the ground colour,
including the day count and the today/holiday numerals — a green numeral on
a white cell would be unreadable and would say "act on this" about the day
you are already on. */
/* ONE MARK FOR "CHOSEN", AND IT IS THE ACCENT (owner, 2026-08-26: "review the
consistency in how a selected item looks.. roster gets an underline, calendar
is a highlighted cell").
Measured across the app first: the client tabs underline in the accent, the
month cell rings in the accent, the filter segment borders in the accent —
and this one alone inverted to plain ink, so the day a coach is reading was
the only selected thing in the app that did not use the colour selection is
made of. The SHAPE still varies with the control, which is right — a fill on
a cell, a rule under a tab, a ring on a date — but the colour saying "this
one" is now the same everywhere. */
.wk-d.on{border-color:var(--accent);background:var(--accent);background-image:none}
.wk-d.on .wk-d-n,.wk-d.on .wk-d-w,.wk-d.on .wk-d-ct{color:var(--on-solid)}
.wk-d.on .wk-d-ct.blank{color:transparent}
.wk-d.on.today .wk-d-n,.wk-d.on.hol .wk-d-n{color:var(--on-solid)}
/* Today, when it is NOT the day being read, keeps its accent numeral. When it
is, the fill says where you are and the accent is not needed twice. */
/* :not(.on) — a closed day that is also the selected day still has to be read.
The dim was being applied on top of the inverted fill, so the one cell the
coach had deliberately tapped ended up the least legible thing in the strip:
a 60%-opacity grey printed on near-black. Closed-and-selected keeps the
inversion and drops one step to --soft instead, which reads as quieter
without becoming unreadable. */
.wk-d.off:not(.on) .wk-d-n{color:var(--fainter);opacity:.6}
/* The line between the week and the day: which day, what hours it runs, and how
much of it is sold. Everything a coach would otherwise count off the cards. */
.dayline{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
font:400 var(--ds-label)/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;
color:var(--faint);padding:12px 1px 10px}
/* THE DAY STARTS HERE (owner, 2026-08-17: "a THICKER line above Today, below
waitlist.. and increase the space above today").
The waitlist and the day are two different subjects — one is people with no
hour, the other is the hour-by-hour — and they were separated by the same
hairline that separates two rows INSIDE a list. So the eye read straight
through the boundary and the waitlist looked like the day's first band.
A heavier rule and real air above it: this is the one place on the screen
where the reader is meant to change what they are thinking about. The rule
is on the DAY heading rather than under the waitlist, so it appears whether
or not anyone is waiting. */
.cal-day-sep{margin-top:26px;padding-top:0;border-top:2px solid var(--line-strong)}
.cal-day-sep.dayline{padding-top:16px}
/* The day's own name earns its size — it is the anchor for everything under
it, and at 10.5px mono it was quieter than the row times it introduces. */
.cal-day-sep .grow{font:600 var(--ds-label)/1.3 var(--mono);letter-spacing:.09em;color:var(--muted)}
.cal-day-sep .grow b{color:var(--ink)}
.dayline b{font-weight:500;color:var(--muted)}
/* ---------- list controls ----------
Search and its filters are one apparatus for narrowing a list, so they sit in
one block with a rule under it. Without the rule the filter row floated
between the header and the first card and looked like it belonged to neither. */
/* THE FREEZE RULE: the controls that frame a list — the week you are in, the
filters you set, the figure you came for — stay put while the list itself
scrolls under them. They stick directly below the brand bar, whose measured
height arrives as --top-h from app.js. The background is opaque and the
padding matches .main so cards pass cleanly underneath. */
/* Pulled up a hair so it OVERLAPS the brand bar instead of butting against it.
Both are sticky, and the bar's real height is fractional (safe-area inset +
padding); rounding --top-h to a whole pixel left a sub-pixel seam that
shimmered as rows scrolled through it. An overlap has no seam to shimmer. */
.freeze{position:sticky;top:calc(var(--top-h,56px) - 1px);z-index:15;
/* SAME GROUND AS THE BRAND BAR. This is what stops the bump. Two sticky
layers in different colours meet at a moving boundary, and the browser
resolves that boundary to a whole pixel a frame at a time — so the seam
between --chrome and --bg walked up and down by a pixel as you scrolled.
Painting both slabs the same colour leaves no seam to walk. (will-change:
transform used to live here and made it worse, not better: promoting a
sticky element to its own layer hands its offset to a compositor that
updates a frame behind the scroll.) */
background:var(--chrome);
/* Every frozen head stands the same height whatever it carries, so moving
between tabs does not resize the chrome under the brand bar. */
min-height:var(--freeze-h);
display:flex;flex-direction:column;justify-content:center;
margin:0 -16px 14px;padding:6px 16px 10px;
/* every frozen head is closed by one hairline, so the list visibly passes
UNDER it rather than merging into it */
border-bottom:1px solid var(--line-strong)}
/* One slab, one closing edge. With the frozen head now painted in --chrome it
is continuous with the bar above it, so the bar's own rule would be a line
drawn through the middle of a single surface. The head's rule closes the
whole thing. */
.shell:has(.freeze) .topbar{border-bottom-color:transparent}
/* The band device does NOT belong here, and the two are solving opposite
problems. A band is a soft-edged wash that says "these things belong
together" — it deliberately dies to nothing so it never closes. A frozen
head needs the exact opposite: a hard, unambiguous edge, because live
content is sliding underneath it and the eye has to know precisely where the
pinned layer stops. Swap the rule for a fade and the topmost scrolling row
bleeds through the gradient, which is the one thing the rule exists to stop.
What the band DOES have to offer is depth, so it lends that: a short fall of
shadow below the line, so the list reads as passing beneath a raised bar
rather than being cut off by a drawn one. The line stays; it just no longer
has to do the job alone. */
.freeze::after{
content:'';position:absolute;left:0;right:0;top:100%;height:10px;
pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.22),transparent);
}
.list-controls{padding:10px 0 14px;border-bottom:1px solid var(--line-strong);margin-bottom:14px}
.list-controls.freeze{padding:8px 16px 10px}
.list-controls.freeze .seg{margin-top:8px}
/* The library's two framing controls, stacked in one frozen block — the same
tight rule the clients filters sit above. */
.lib-head{display:flex;flex-direction:column;gap:8px;padding-bottom:10px}
.lib-head .mb-2{margin-bottom:0}
/* Pay's frozen head is the client header's two-figure strip, reused. It spent
several iterations as bespoke pay-* classes — an owed phrase, a collected
grid, a heading over it — and every one of them was a worse version of a
component this app already had. All that is left here is the wrapper. */
.pay-head{display:block;padding-top:10px;padding-bottom:12px}
/* The qualifier under a stat's figure: money gone stale, or the year to date.
Never the warn colour — the figure above it already carries that, and two
coloured lines make the smaller one shout over the total it qualifies. */
/* ONE LINE, ALWAYS. This sits inside a .freeze, and every frozen head in the
app is the same height by contract — a qualifier that wraps on a big enough
figure silently makes Pay's head taller than every other screen's. */
.stat-sub{font:400 var(--ds-label)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;
color:var(--faint);margin-top:6px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-controls .seg{margin-top:10px}
/* ---------- the right-hand end of a list row ----------
A value with a word under it. The booking sheet, the payments list and the
roster were three different shapes for the same job — a person on the left,
a figure on the right — so a coach had to learn the list again on each tab.
One class, and the count, the amount and the status all land in the same
column at the same size. */
.row-end{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right}
.row-val{font:500 var(--ds-small)/1 var(--mono);letter-spacing:.02em;
font-variant-numeric:tabular-nums;color:var(--ink)}
.row-lab{font:500 var(--ds-label)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
color:var(--faint);white-space:nowrap}
/* Tone as a word, not as a rule down the side. The status is the only thing on
the row that changes colour, so nothing else has to be read to find it. */
/* GOOD NEWS IS AS LOUD AS BAD NEWS (owner TODO, actioned 2026-08-07). Every
warning state in this app has a colour and every healthy one was grey, so a
screen could only ever tell a coach what was wrong — "Active" and "Renew" sat
in the same ink and only one of them was doing any work. The same word was
also green as a session flag and grey as a pill, so one status had two
appearances depending on which surface it landed on. */
.t-ok{color:var(--accent)}
.t-warn{color:var(--warn)}
.t-bad{color:var(--bad)}
/* ---------- brand bar ----------
The wordmark is mono and letterspaced because it is the one place the app
says its own name, and the mono face is the half of the type system that
does labels. Set in Archivo it would read as a heading — as if SHOWUP were
the title of the screen rather than the name over the door. */
.brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
/* The back chevron standing in for the mark: same footprint, so the word after
it does not shift between a screen that has one and a screen that does not. */
.brand > .icon-btn{flex:none;width:30px;height:30px;margin-left:-6px}
/* THE MARK (owner, 2026-08-12). Was a plain lime square standing in for a
logo; it is the sign-in stamp now. As a background-image rather than inline
SVG so one file serves every surface — coach bar, portal, favicon — and a
redraw is one file, not four copies to keep in step. Slightly larger than
the square was: the stamp carries its own padding in its viewBox, so at
17px the tick was tiny. */
/* The mark alone, leading a titled bar — see topbar(). Slightly smaller than
the branded row's, because there it carries the word and here it sits beside
a heading that is already doing the naming. */
.tb-mark-only{width:19px;height:19px;margin-right:11px}
.brand-mark{width:22px;height:22px;flex:none;
background:url('icons/mark.svg') center/contain no-repeat}
.brand-word{font:700 var(--ds-strong)/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink);flex:none}
.topbar-r{flex:none;}
/* A statement, not a control: no hover, no pointer, and the muted ink every
other read-only label in the app uses. */
/* One corner control: the face above, the role beneath it — the same
icon-over-label anatomy the tab bar uses, so the fifth destination reads
like the other four. */
.me-btn{display:flex;flex-direction:column;align-items:center;gap:4px;
background:none;border:0;padding:0;flex:none}
/* Round, like .avatar — the two marks in the system that stand for a person
rather than for a box. */
/* OUTLINED, where a client monogram is FILLED. The coach is the one person in
this app who is not a client, and a filled circle of initials drawn from the
client palette said the opposite — it could even come out the same colour as
someone on the roster. A ring is a different class of object at a glance,
costs no colour, and keeps the corner reading as chrome rather than data. */
/* BIGGER (owner). It is the only way into settings and the only thing in the
bar that is the coach themselves, and at 30px it was the smallest tap target
on the screen. */
/* Quieter than the avatar beside it: leaving is a real action but it is not
the one a coach reaches for twenty times a day, and two equally loud circles
in the corner make neither of them obvious. */
.exit-btn{width:34px;height:34px;border-radius:50%;flex:none;background:none;
border:1px solid transparent;color:var(--faint);
display:flex;align-items:center;justify-content:center}
.exit-btn:active{color:var(--ink)}
.topbar-r{display:flex;align-items:center;gap:6px}
.me{
width:36px;height:36px;border-radius:50%;flex:none;
background:none;border:1px solid var(--line-strong);color:var(--ink);
display:flex;align-items:center;justify-content:center;
/* A single letter has the room two never had, so it takes it — and with no
second glyph to space against, the tracking goes back to zero. */
font:700 var(--ds-small)/1 var(--mono);letter-spacing:0;
}
.me-btn:active .me{background:var(--surface-2)}
/* A segmented control whose question is not live yet — the repeat cadence on
Block time, dead until the box beside it is ticked. Dimmed rather than
hidden: appearing on tick would move the button under the coach's thumb. */
.seg.is-off{opacity:.4;pointer-events:none}
/* With no name saved there are no initials to show, so it falls back to the
generic figure and takes the neutral fill rather than a colour derived from
an empty string. */
.me svg{width:17px;height:17px;stroke-width:1.9;color:var(--ink)}
/* The date the brand bar no longer carries. It sits on the content rather than
in the header because it belongs to what is below it — this is the day the
run of day is for. */
/* ---------- bottom nav ----------
Copied from Bevel's bar (owner call, from a screenshot of the real thing):
a frosted pill island floats over the content carrying the four places —
icon over a sentence-case label, the active one on a soft pill highlight —
and the + is its own frosted circle to the RIGHT. The wrapper itself is
transparent and lets touches through; only the island and the circle are
real surfaces. Content scrolls behind the glass, which is the whole point
of the blur. */
.tabbar{
position:fixed;left:0;right:0;bottom:0;z-index:30;
max-width:var(--maxw);margin:0 auto;
display:flex;align-items:center;justify-content:center;gap:10px;
/* LOWER (owner, 2026-08-18: "move the bar a bit lower on mobile, there is a
bit of room"). The island was floating 4px above the safe area on top of
whatever the phone reserves for its own home indicator, which on a device
with no indicator at all left a visible band of nothing under it. Sitting
it down onto the safe area gives the list back the height it was wasting
and puts the bar where a thumb already rests. */
padding:0 14px calc(env(safe-area-inset-bottom) * 0.5);}
/* LOCKED, not floating (owner, 2026-08-16: "please lock the bottom bar in
place", with a mockup showing a solid band). The wrapper is transparent so
touches pass through it, which meant rows scrolled visibly BETWEEN the
island and the +, and the bar read as drifting over the content. It sits on
its own ground now, fenced from the list by a hairline — the same device
the top bar uses, and the reason both of them stay put while the middle of
the screen moves. The island keeps its own surface INSIDE that band. */
/* Lower on the glass (owner: "move the bar down more"). The caption under the
+ was holding the whole bar up off the bottom edge; without it the island
can sit where the thumb already is. */
.tabbar{
background:var(--chrome);
border-top:1px solid var(--line);
padding-top:8px;
}
/* The wrapper is the ground now, so it has to take its own touches back —
only the gaps between the controls stay transparent to them. */
.tabbar{pointer-events:auto}
.tab-island,.tab-fab{
pointer-events:auto;
background:var(--glass);
-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
box-shadow:var(--shadow);
}
.tab-island{flex:1;max-width:340px;display:flex;border-radius:var(--r-pill);padding:5px}
/* AIR BETWEEN THE ICON AND ITS WORD (owner, 2026-08-18). At 3px they read as
one smudged object; the label is there to teach the icon and it can only do
that if the eye registers them as two things. */
.tab{
flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
padding:7px 4px;border-radius:var(--r-pill);
color:var(--faint);font:600 var(--ds-small)/1 var(--sans);letter-spacing:.01em;
}
.tab.active{background:var(--glass-hi);color:var(--ink)}
.tab-ico{position:relative;display:flex}
/* Weight rather than colour. Green here means selected / in view / on track,
and a permanently lime circle would be the one green thing on screen not
describing a state — it would out-shout the UP NEXT tag, which is the only
accent on Home that earns it. A ring and a heavier stroke say "control"
just as clearly, and stay honest about a button whose job changes with the
screen. */
.tab-fab{flex:none;justify-content:center;color:var(--ink);}
/* The glyph carries the emphasis: a 2.4 stroke against the tab icons' 1.8. */
.tab-fab svg{stroke-width:2.4}
.tab-fab:active{}
/* Icon tile inside the create sheet's rows. */
/* Pinned to the mark's top-right rather than nudged there by margins. On an
11px dot the badge has to sit clear of the dot itself, or the count and the
mark merge into one smudge at arm's length. */
.tab .badge{
position:absolute;top:-5px;left:13px;
/* --ink-invert, not #fff. --bad is a dark red on a light page and a light red
on a dark one, so a hardcoded white label was legible in exactly one of the
two themes. The inverted ink follows the fill. */
background:var(--bad);color:var(--ink-invert);font:700 var(--ds-label)/1 var(--mono);
min-width:15px;height:15px;padding:0 4px;border-radius:var(--r-pill);
display:flex;align-items:center;justify-content:center;
}
.tab.centre .badge{top:-6px;left:auto;right:-7px}
/* ---------- desktop breakpoint ---------- */
/* THE RAIL, not a second app (owner, 2026-08-16: "should we also build a web
version?" -> "desktop i mean"). The old rule was one layout at every width
— a coach on a laptop got the same phone-width column, centred in a mostly
empty page, because a second set of screens kept in step with the first
was worse than no desktop mode at all. That still holds: nothing here
forks the markup or duplicates a view's logic.
What changes at 900px is the one thing that is actually wrong on a big
screen — a bar built for a thumb, reached with a mouse instead — and the
column gets the width back that a phone never had to give up. The five
destinations move from the bottom bar into a left rail, in the same DOM
order, same click handlers, same badge logic; only the CSS asks them to
stack a different way. What each screen DOES with the freed width past
that is a per-screen decision, made screen by screen, starting with Book.
*/
@media (min-width:900px){
:root{ --nav-h:0px; --maxw:760px; --rail-w:88px; }
.shell{ max-width:var(--maxw); margin-left:var(--rail-w); margin-right:auto; }
.tabbar{
left:0; right:auto; top:0; bottom:0;
width:var(--rail-w); max-width:var(--rail-w);
flex-direction:column; justify-content:flex-start; align-items:center;
gap:18px; padding:calc(env(safe-area-inset-top) + 22px) 0 22px;
background:var(--chrome); border-right:1px solid var(--line-strong);
border-radius:0; box-shadow:none;
-webkit-backdrop-filter:none; backdrop-filter:none;
}
.tab-island{
flex:1; max-width:none; flex-direction:column; gap:6px;
background:none; box-shadow:none; border-radius:0; padding:0;
-webkit-backdrop-filter:none; backdrop-filter:none;
}
.tab{ flex:none; width:64px; padding:9px 4px 8px }
/* Bottom-anchored floats (toast, install nudge) lose the bar they were
floating above — --nav-h:0 already clears the space under them, this
clears the rail beside them. */
.install-hint,.toast-wrap{ left:calc(var(--rail-w) + 16px) }
}
/* ---------- cards & lists ---------- */
/* Tonal, not drawn (2026-08-03): a card is a lighter surface on the ground,
and the eye finds the boundary without a stroke — the screen stops being a
grid of outlined boxes. Borders now mean something: an input you can type
in, a button you can press, a tinted alert, a tone edge. */
.card{
background:var(--surface);
background-image:var(--card-grad);
border-radius:var(--r);overflow:hidden;
box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 var(--hi),var(--shadow);
}
.card + .card{margin-top:12px}
.card-pad{padding:14px 16px}
.section-title{
font:500 var(--ds-label)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
color:var(--faint);margin:22px 2px 10px;
}
/* A heading that also carries a control — "N SNOOZED" opening the parked
cards. Same face and size as the heading it sits in, so it reads as part of
the label rather than a button dropped beside it; underlined because a word
that does something has to look different from the words that do not. */
.section-title:has(.sec-link){display:flex;align-items:baseline;justify-content:space-between;gap:12px}
/* The note was a second bare span inside a block, so it ran straight into the
count it qualifies: "MONEY · 1OLDEST AND LARGEST FIRST". A space alone was
not the fix — it inherited the heading's mono face, uppercase and .16em
tracking, so a sentence of ordinary English was set as though it were a
label. Three of them at three different lengths broke across lines at three
different points, which is the "jumbled" of the jumbled list.
Always its own line, and set as prose: sans, sentence case, no tracking.
Every section now has the same two-storey header — WHAT · HOW MANY, then one
quiet line saying why they are in this order. */
.section-title:has(.sec-note){display:flex;flex-direction:column;gap:5px}
.sec-link{font:inherit;letter-spacing:inherit;text-transform:inherit;
color:var(--muted);background:none;border:0;padding:0;
text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.sec-link:active{color:var(--ink)}
/* ---------- programme blocks ----------
A block is a phase of the same programme — Phase 1, then Phase 2 — so its
heading has to outrank the day headings underneath it without becoming a
second card. A rule across the top and the accent on the number does it:
the eye finds the phase boundaries first and the days inside them second. */
.blk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
border-top:1px solid var(--line-strong);margin:22px 0 0;padding:10px 2px 0}
.blk-head:first-child{margin-top:0}
.blk-name{flex:1;min-width:0;text-align:left;border:0;background:none;padding:0;
display:flex;flex-direction:column;gap:3px;color:var(--ink)}
.blk-t{font:600 var(--ds-strong)/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk-note{font:400 var(--ds-small)/1.4 var(--sans);color:var(--fainter);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk-count{font:400 var(--ds-label)/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
color:var(--fainter);flex:none}
/* The days inside a block. Same mono label as .section-title, one notch quieter
and much closer in, so it reads as belonging to the phase above it. */
.day-title{font:500 var(--ds-label)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
color:var(--fainter);margin:14px 2px 8px}
.blk-add{margin-top:10px}
/* The programme's phases, on the library row. Between the name and the tally
because it is part of what the programme is, not a count of it. */
.row-blocks{font:400 var(--ds-small)/1.4 var(--sans);color:var(--faint);margin-top:2px}
/* ---------- collapsible groups ----------
Nineteen rows of settings on a 390px phone is four screens of scrolling to
reach the one you want. Closed, each group is a single line that already
states its answer — "6 days · 146 starts / week" — so most visits end at the
header without opening anything. The row list underneath is unchanged; it is
only whether it is on screen that moves. */
.grp{
width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
background:none;text-align:left;margin-top:18px;margin-bottom:4px;
padding:0 0 9px;border-bottom:1px solid var(--line);
}
.grp-t{font:600 var(--ds-label)/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
color:var(--faint);flex:none}
/* THE SUMMARY IS A VALUE, SO IT IS ARCHIVO — and until the duplicate below was
removed it was mono uppercase, identical to the label beside it. Ten rows of
two competing small-caps strings with nothing to tell them apart is what made
this page read as busy: not its length (it is under one screen) but the
absence of any hierarchy inside each row. "Grace Lu" and "Never backed up"
are things the app is telling the coach; the word to their left is a label
about them. Two voices, one row. */
.grp-s{font:400 var(--ds-small)/1.3 var(--sans);letter-spacing:0;text-transform:none;
color:var(--ink-2);flex:1;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.grp-c{flex:none;color:var(--fainter);display:flex;align-self:center;
transition:transform .14s ease}
/* Open, the summary is redundant with the rows now showing it, and the rule
under the header would draw a second line right above the card's own top
border. Both step out of the way. */
.grp.on{border-bottom-color:transparent}
.grp.on .grp-t{color:var(--ink)}
.grp.on .grp-s{opacity:0}
.grp.on .grp-c{transform:rotate(180deg);color:var(--muted)}
.grp-body{padding-bottom:8px}
/* Same line, no control: used for the library's pattern headings while a search
is running, where everything matching is already showing and there is nothing
left to open. The count stays visible because it is the one thing a search
result wants to tell you. */
.grp-lbl{border-bottom-color:transparent}
.grp-lbl .grp-t{color:var(--ink)}
/* The .grp-go line that used to send you to the library lived here. The library
has its own tab now, so a second door on the settings screen would only be a
way of arriving somewhere you were already one tap from. */
/* ---------- booking, on a phone ---------- */
/* The week as seven touch targets. Each carries its own booked count, so the
coach picks the quiet day from the strip rather than by opening three of
them. */
/* The Book screen uses the Home calendar's own strip classes (.wk-strip /
.wk-d) — there is one week-strip in this app, not two that drift. Its only
local need is the gap under it before the slot list. */
.wk-strip{margin-bottom:2px}
/* Band headings are rules across the list, not cards — they say where you are
in the day and then get out of the way. */
/* SECTIONS YOU CAN SEE (owner, 2026-08-10: "Scheduling can use some lines to
separate the sections... can look like just a jumbled list"). The band label
was a small line of text floating in the same gap as everything else, so a
morning, a midday and an evening ran together into one column of thirty
near-identical rows and there was no telling, mid-scroll, which one you were
in.
A rule above it draws the seam. Sticky keeps the answer on screen: the whole
problem is that the heading scrolls away and the rows below it look like the
rows above. It sits on the page ground rather than a translucent one — rows
passing UNDER a see-through header is exactly the mush being fixed. */
.bk-band{display:flex;align-items:baseline;justify-content:space-between;
/* Under BOTH pinned layers — the bar and the frozen week strip — not behind
them. Both heights move with the safe-area inset and the user's text size,
so neither can be named here; app.js measures the pair on every render and
on resize as --top-h and --frozen-h. z-index below .freeze (15) so the strip always wins the overlap
as a band passes under it. */
position:sticky;top:calc(var(--top-h, 56px) + var(--frozen-h, 0px) - 1px);
z-index:2;background:var(--bg);padding:9px 2px 8px;
font:500 var(--ds-label)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);}
/* One section per band, so each heading is pinned inside its OWN block and is
carried off the top by its own rows rather than stacking with the next. */
.bk-sect{display:flex;flex-direction:column;gap:10px}
/* No rule and no gap on the first band — a line under the day strip is a seam
between two things that are already separate. */
.bk-sect:first-child > .bk-band{margin-top:4px;border-top:0}
.bk-band .dim{letter-spacing:.06em;color:var(--fainter)}
/* Rounded rows on the calendar's own 10px rhythm, not a fused grid of squares.
This board was the last squared surface left in the app (an earlier owner
call, since overtaken by the no-squares rule) and beside the rounded cards
on every other screen it read as a different product. */
.bk-list{display:flex;flex-direction:column;gap:10px}
/* THE BOOK BOARD, using the width instead of wasting it (owner, 2026-08-16:
desktop pass). A day's open slots are a chronological list on a phone
because there is nowhere else to put them; on a desktop column they were
the exact same single file of pill buttons with a whole extra column of
empty page beside them. Booked sessions and buffer rows stay full-width
cards — they carry a name and a reason — and only the open half-hour
buttons, which carry a time and nothing else, fall into a grid. CSS
grid's own auto-flow does the sorting: a full-span item ends its row and
the next slot starts a fresh one, so a booked session or a buffer still
breaks the grid exactly where it broke the list. AFTER .bk-sect's base
rule on purpose — same specificity, later wins, and this has to win when
the media query is active. */
@media (min-width:900px){
.bk-sect{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px }
.bk-sect > .bk-band,
.bk-sect > .bk-sess,
.bk-sect > .bk-r.buffer,
.bk-sect > .bk-r.gbusy{ grid-column:1/-1 }
}
/* A booked session sits in the board as the full Home card, unmodified — same
radius, gradient, tone bar and shadow as the same session on the calendar. */
.bk-sess{padding:0}
.bk-r{display:flex;align-items:center;justify-content:space-between;gap:12px;
width:100%;text-align:left;padding:13px 14px;
background:var(--surface);background-image:var(--card-grad);
border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
/* DEPTH, NOT COLOUR, separates a booking from an empty hour. Once the accent
edges came off, every row on the board sat on the same surface at the same
height and the eye had nothing to catch. A booked session is CONTENT: it
keeps the raised surface, the gradient and the shadow every card in this app
has. An open slot is the ABSENCE of content, so it drops to the page ground
with a hairline round it — present, tappable, and visibly a hole in the day
rather than a thing in it. No new colour, no new token: this is the same
surface/ground relationship the rest of the sheet already runs on. */
.bk-r.open{background:var(--bg);background-image:none;box-shadow:none;padding:11px 14px}
.bk-r.open:active{}
.bk-t{font:500 var(--ds-small)/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.bk-s{font:500 var(--ds-label)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.bk-r.open:active{background:var(--surface-2)}
/* OPEN is the default state of a board that is mostly open — colouring it made
the whole list green and left nothing for the accent to mean. Green is for
what you have selected; an untouched free slot is just a row. */
.bk-r.open .bk-s{color:var(--faint)}
/* Booked is the only row that names a person, so it is the only one that gets
the accent mark and the sans face. */
/* Inset, not a left border: on a rounded box a border traces the corner arc as
a tapering wedge, and it shunts the row's content 2px out of column. */
.bk-r.booked{box-shadow:inset 3px 0 0 var(--accent),var(--shadow)}
.bk-r.booked .bk-t{color:var(--ink)}
.bk-r.booked .bk-s{font:600 var(--ds-small)/1.2 var(--sans);letter-spacing:-.005em;
text-transform:none;color:var(--ink)}
.bk-r.buffer{background:var(--bg)}
.bk-r.buffer .bk-t,.bk-r.buffer .bk-s{opacity:.45}
/* A Google event holding the row: quieter than a booking, firmer than buffer */
.bk-r.gbusy{background:var(--bg);box-shadow:inset 3px 0 0 var(--line-strong),var(--shadow)}
.bk-r.gbusy .bk-t,.bk-r.gbusy .bk-s{opacity:.6}
.bk-r.gbusy .bk-s{font-size:var(--ds-small)}
/* The tick only exists once a row is chosen; before that it would be a column
of empty boxes asking to be ticked. */
.bk-tick{display:none;color:var(--accent);flex:none}
.row.on .bk-tick{display:block}
.row.on{background:var(--surface-2);box-shadow:inset 2px 0 0 var(--accent)}
.row.dimmed{opacity:.5}
/* ---------- working hours ---------- */
/* A rota, not a form. Seven rows of the same four things, so the eye runs down
the "first" column and reads the week rather than reading seven paragraphs. */
.hrs{display:grid;grid-template-columns:1fr auto auto 46px;gap:1px;
background:var(--line);border:1px solid var(--line-strong);
border-radius:var(--r-s);overflow:hidden}
.hrs-h{background:var(--surface-2);padding:8px 12px;
font:500 var(--ds-label)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.hrs-h.r{text-align:right}
.hrs-d{background:var(--surface);display:flex;align-items:center;gap:9px;padding:9px 12px;
text-align:left;font:500 var(--ds-label)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
/* The dot is the switch. A day is open or it is not, and that is the whole
control — no toggle chrome for a binary that already has a row to live in. */
.hrs-d i{width:8px;height:8px;flex:none;border:1px solid var(--btn-bd)}
.hrs-d.on{color:var(--ink)}
.hrs-d.on i{background:var(--accent);border-color:var(--accent)}
.hrs-c{background:var(--surface);padding:5px 8px;display:flex;align-items:center}
.hrs-c.off,.hrs-n.off{opacity:.38}
.hrs-n{background:var(--surface);padding:9px 12px;text-align:right;
font:500 var(--ds-label)/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.step{gap:2px;}
.step-b{width:22px;height:24px;flex:none;border:1px solid var(--line);border-radius:8px;color:var(--faint);
font:400 var(--ds-small)/1 var(--mono)}
.step-b:hover:not(:disabled){color:var(--ink);border-color:var(--btn-bd)}
.step-b:disabled{opacity:.3}
.step-v{min-width:52px;text-align:center;font:500 var(--ds-label)/1 var(--mono);
font-variant-numeric:tabular-nums;color:var(--ink)}
.hrs-r{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:5px 0}
.hrs-r + .hrs-r{border-top:1px solid var(--line)}
.hrs-r > span{font:400 var(--ds-small)/1.3 var(--sans);color:var(--muted)}
.hrs-cfg{padding:6px 14px}
.hrs-sum{margin-top:22px;background:var(--surface);border:1px solid var(--line-strong);padding:14px 16px}
.hrs-sum-v{font:700 var(--ds-title)/1.2 var(--sans);letter-spacing:-.015em;margin-top:9px}
.hrs-sum-s{font:400 var(--ds-label)/1.6 var(--mono);letter-spacing:.02em;color:var(--faint);margin-top:7px}
.list{display:flex;flex-direction:column}
.row{
display:flex;align-items:center;gap:12px;
padding:13px 15px;text-align:left;width:100%;
}
.row + .row{border-top:1px solid var(--line)}
.row:active{background:var(--surface-2)}
/* Generic, not row-scoped: session-item cards and tappable cards use the same
middle-column-takes-the-space anatomy. flex:1 is inert outside a flex parent. */
.grow{flex:1;min-width:0}
/* Declared block because inside a button these have to be spans — a button
takes phrasing content only, and half the rows in the app are buttons. */
.row-title,.row-sub{display:block}
.row-title{font:600 var(--tb-row)/1.3 var(--sans);letter-spacing:-.005em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* THE SUBTITLE IS THE SENTENCE, NOT THE LABEL (owner, 2026-08-27: "how can we
make font sizes bigger, surface what is useful"). The note this replaces
claimed row subtitles are "almost always meta — a prescription, a date, a
count". Measured, they are not: "Put it in your bio — enquiries come here",
"Adds only what is missing by name", "Replaces everything with demo". Those
are sentences, and setting a sentence in tracked 11px uppercase mono is the
hardest-to-read combination the app has — caps remove word shape, the size
removes stroke detail, and the tracking pulls what is left apart. Both of
the ones on Settings were also TRUNCATING at the row width, so the coach got
two thirds of a sentence in the least legible face available.
Archivo, sentence case, and the design system's own rule is restored:
Archivo speaks, Mono labels and measures. The genuinely mono cases — a dose,
a date, a count — override locally; .shelf-flat already does. */
.row-sub{font:400 var(--ds-small)/1.4 var(--sans);color:var(--faint);
margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{color:var(--fainter);flex-shrink:0}
.chev svg{width:18px;height:18px}
/* avatar — one of the two round things in the system */
.avatar{
width:40px;height:40px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font:600 var(--ds-body)/1 var(--sans);color:#fff;letter-spacing:-.02em;
}
/* ---------- pills / badges ----------
Outlined, not filled. The handoff's only status chip is a 1px accent outline
with matching text, and filling them would put five competing blocks of
colour on a screen whose whole point is restraint. */
.pill{
display:inline-flex;align-items:center;gap:5px;
font:500 var(--ds-label)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
padding:5px 8px;border:1px solid currentColor;border-radius:var(--r-pill);white-space:nowrap;flex:none;
}
.pill-ok{color:var(--accent)}
.pill-warn{color:var(--warn)}
.pill-bad{color:var(--bad)}
.pill-neutral{color:var(--faint)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor}
/* ---------- attention feed ----------
Borrows .session-item wholesale — see the note down there. Only the action
button is new, and it is placed in the flag slot rather than on a row of its
own, so an attention card is exactly as tall as a booked one.
The padding moves off the card and onto the body button so the tap target
reaches the card's own edges. Compound selector, not order, keeps it ahead of
.session-item's own padding. */
/* Attention cards share the roster's compact two-line anatomy; the reason
line wears the tone (not just the 3px edge) and stays a mono label —
uppercase, one line, ellipsized. */
.attn-reason{text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
display:block;max-width:100%}
/* THE CLIENT-CARD COLOUR RULE (owner, 2026-08-05): on a client card the
ONLY coloured text is an amount owed. Everything else — the reason line,
the status word, the credit fraction — is neutral, and the card's left
EDGE is what carries the accent (orange = needs attention, per the app's
two-colour rule). Colouring a whole sentence spends the signal on words
that never vary, and it was doing exactly that here. Session cards in the
calendar are the one exception, where the status word carries colour
because those cards have no edge at all. */
/* ---------- stats ----------
One card, not two. Two bordered boxes side by side read as two separate
things a coach has to consider; the day's numbers are one glance, so they
share a card and are divided by a single hairline. Label above value —
the label is the question, and you read it before the answer. */
.stat-grid{
display:grid;grid-template-columns:1fr 1fr;
background:var(--surface);
background-image:var(--card-grad);
border-radius:var(--r);overflow:hidden;
box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 var(--hi),var(--shadow);
}
.stat{padding:12px 14px 14px}
.stat + .stat{border-left:1px solid var(--line)}
.stat .l{font:400 var(--ds-label)/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.stat .n{font-size:var(--ds-name);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin-top:7px}
.stat .n-warn{color:var(--warn)}
.stat .n-bad{color:var(--bad)}
/* ---------- client header ----------
The same two-figure strip as Today, sunk into a card that also holds the
waiver line and the contact row. One card rather than a stat block stacked on
a detail block, because they are one answer: this is where the person stands
and this is how you reach them.
The strip loses its own border and keeps only the hairline between the two
figures — the card is already drawing the box, and a border inside a border
at 1px each reads as a smudge rather than as two edges. */
.cli-head-foot{padding:12px 14px 14px;border-top:1px solid var(--line-strong)}
/* Mono, because it is a label about a state rather than a value in its own
right, and small enough that the two buttons under it stay the loudest thing
in the foot. */
.cli-waiver{font:400 var(--ds-label)/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.cli-waiver.miss{color:var(--warn)}
/* Roster rail: the card keeps two-thirds; the right third stacks two
labelled pills that say the ask (Waitlist → wanted day/time, Request →
the requested slot). Off is near-silent so quiet rows stay quiet. */
/* THE ROSTER CARD (owner, 2026-08-05): full width, with its two asks along the
bottom INSIDE it. The rail version gave a third of every row to two pills
and squeezed the name and the status into the remaining two-thirds — on a
roster, the name is the thing being read. Home and Pay keep the rail: there
the pill is an ACTION on the card (Nudge, Payment), which is a different
relationship from a label that states the card's own standing. */
/* All three classes are named on purpose. .session-item.si-compact sets
`align-items:center` at the same specificity AND later in the file, so it won
every earlier attempt at this rule — the pill row kept collapsing to its text
width and centring, which is what truncated WAITLIST to "WAITLI…". */
/* 56px — the same height as the client cards on Home and Pay. The budget is
tight and deliberate: 5 + title 16 + gap 4 + pill 25 + 6. The pill keeps its
--pill-h; the padding is what gives way, because a shared card height is
worth more than four pixels of air. */
.session-item.si-compact.client-card{display:flex;flex-direction:column;align-items:stretch;
justify-content:center;gap:4px;padding:5px 14px 6px 15px;min-height:var(--card-h)}
/* The navigating half: name on the left, where they stand on the right. Reset
to a bare row because .session-item's own button styling now belongs to the
card wrapping it, not to this. */
.cc-main{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;
text-align:left;background:none;border:0;padding:0;color:inherit}
.cc-main .row-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The count and the status word share the first line rather than stacking —
stacked they cost the card a whole row for two short strings. */
/* Name and count on one baseline. The name gives way first when the row is
tight — the count is four characters and a word, and truncating THAT would
leave a fraction with no unit. */
.cc-name{display:flex;align-items:baseline;gap:8px;min-width:0}
/* The count and the word that says which way it runs, set as one quiet
string. Quieter than the status word opposite: it qualifies the person, it
is not a state of its own. */
.cc-rem{font:400 var(--ds-label)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
color:var(--faint);flex:none;white-space:nowrap}
/* First line of an attention card: who, then what the card wants from you —
the same top-right corner the calendar cards put UP NEXT and CHECK-IN in. */
.cc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cc-top .cc-main{flex:1;min-width:0}
/* Second line: when they are next in, then the two asks. */
.cc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cc-foot .row-sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The pills size to their words here, not to the card: they share this line
with the next-session label, and stretching them would push it out. */
.cc-pills{display:flex;gap:8px;flex:none}
.cc-pills .cr-pill{flex:none;height:var(--pill-h);padding:0 10px}
/* A row with no rail beside it takes the whole width — Pay's unpaid list,
where the card IS the action and there is nothing to sit next to. The height
is stated rather than left to the content: without a pill row its second
line is plain text, which came out 3px shorter than the same card on Home
and Clients. Three pixels is invisible alone and obvious in a column. */
/* Every pill centres its contents — waitlist and request included. */
.cr-pill{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;
padding:0 10px;min-width:0;border:1px solid var(--line-strong);border-radius:var(--r-pill);
background:none;color:var(--faint);opacity:.4;text-align:center}
.cr-pill svg{flex:none}
.cr-pill-w{font:500 var(--ds-label)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cr-pill.on{opacity:1;color:var(--accent);border-color:var(--accent)}
.cr-pill.req.on{opacity:1;color:var(--warn);border-color:var(--warn)}
.cr-pill:disabled{opacity:.2}
/* Action pills (Home attention, Pay): the EXACT roster pill geometry, never
resized. They take no tone — the card's edge already says "attention", and
an orange label beside an orange edge is the same word twice.
A lone pill sits centred against its card; the moment a second pill joins
it — a waitlist ask, a booking request — the pair stacks from the top. */
/* Fixed to the shared pill height, whether it stands alone or has a sibling.
Never stretches to the card. Text centred — a lone pill beside a card
reads as a button, and a button's label sits in the middle of it. */
/* Same 86 x --pill-h box as the UP NEXT / CHECK-IN tags on the calendar
cards above — see .up-next-tag. */
.cr-pill.act{opacity:1;color:var(--muted);flex:0 0 auto;
min-width:86px;height:var(--pill-h);
justify-content:center;text-align:center}
.cr-pill.act .cr-pill-w{white-space:normal;line-height:1.3;text-align:center}
/* An empty day: a dashed card the size of the session card that would have
been there, so the day holds its shape either way. Mono uppercase, like
every other label in this app that states a condition rather than a name. */
/* THE EMPTY-STATE RULE (owner, 2026-08-05): anywhere a list, a day or a
filter has nothing in it, say so in a DASHED BAR — never a filled card. A
filled card is a thing; an absence must not look like a thing. Mono
uppercase in --faint, like every other label that states a condition
rather than a name. `.between` when the bar also carries an action pill,
`.col` when it carries a sentence and a button beneath it. */
/* The same height as every client card (--card-h) — an absence keeps the
row's height and changes only its treatment: dashed instead of filled, no
accent edge. */
.empty-bar,.day-empty{display:flex;align-items:center;justify-content:center;gap:0;
min-height:var(--card-h);padding:9px 12px;background:none;
border:1px dashed var(--line-strong);border-radius:var(--r);
font:500 var(--ds-label)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
color:var(--faint);text-align:center}
.empty-bar.col{flex-direction:column;padding:16px 14px;line-height:1.5;min-height:0;}
/* Two figures on one quiet line, replacing the display boxes Today and Pay
used to open with — a glance-line, not a fifth of the screen. */
/* the contact card's QR sits on white by necessity, not by style */
.bcard-qr{display:flex;justify-content:center;margin-top:12px;padding:10px;
background:#fff;border-radius:var(--r-s)}
.bcard-qr canvas{display:block;max-width:200px;width:100%;height:auto;image-rendering:pixelated}
/* Waitlist sheet: seven weekday chips, up to two lit */
/* Package card: facts in a right-hand pill column, pencil on the name line */
/* One width for the whole column, whatever the words are. PAID is four letters
and "10 REMAINING" is twelve, so two pills stacked on the same right edge
used to step in and out like a ragged margin. `stretch` makes every pill in
the column as wide as the widest, and the text centres inside it — the same
rule the action pills on the roster follow. The min-width holds the shape
when the only pill present is a short one. */
.pill-col{display:flex;flex-direction:column;gap:4px;align-items:stretch;flex:none}
.pill-col .pill{justify-content:center;min-width:104px}
.pkg-edit{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
margin-left:6px;vertical-align:middle;border:1px solid var(--btn-bd);border-radius:8px;
background:none;color:var(--muted)}
/* Status chips beside the client name: read-only facts, right-aligned,
wrapping when a client has several things true at once. */
.tb-chips{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;
max-width:46%;align-self:center}
/* ---------- buttons ----------
Every button label is a mono CTA in the handoff, uppercase in both themes. */
/* A BUTTON SPEAKS (owner, 2026-08-27, reading the measured review back:
"caps are load-bearing on eight different things"). Nav labels, section
headers, row meta, chips, stat captions, buttons, the day bar and the tab row
were all uppercase mono — and when everything is emphasised nothing is, so
the eye has no rung to grab.
Caps keep the two places they are genuinely labels: a section header names a
group, a status chip names a state. A button names an ACTION, which is speech
— "Start session", not START SESSION — and Archivo says it at a size that
reads one-handed. This is also what makes a primary read as an offer rather
than signage, which is the difference the owner was naming between a tool and
a chore. */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:13px 16px;
font:600 var(--ds-strong)/1 var(--sans);letter-spacing:-.006em;
border:1px solid transparent;border-radius:var(--r-s);transition:opacity .12s ease;
}
.btn:active{opacity:.75}
.btn svg{width:16px;height:16px;stroke-width:2}
/* One lime per view. btn-primary is the single accent action a screen or
sheet is for; everything else is soft (bordered, ink) or ghost (bordered,
muted). A former .btn-accent twin of this rule let two limes share a sheet
unnoticed — it is gone, and the discipline is the class system itself. */
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{background:transparent;border-color:var(--btn-bd);color:var(--muted)}
/* --btn-bd, not --line-strong: this button has no fill, so the border is the
whole control and has to clear 3:1 on its own. A card border does not — the
surface change either side of it already says where the card stops. */
.btn-soft{background:transparent;border-color:var(--btn-bd);color:var(--ink)}
.btn-danger{background:transparent;border-color:var(--bad);color:var(--bad)}
/* Outlined accent: an action the card is recommending, not one it is insisting
on. Filled is reserved for the single primary action of a whole screen. */
.btn-block{width:100%}
/* The add bar, wherever a list can be added to. One rule so Booking, Clients
and the Library cannot drift apart, and one margin so the first card of the
list always sits the same distance under it. */
.btn-sm{padding:9px 12px;font-size:var(--ds-label)}
.btn-lg{padding:15px 18px;font-size:var(--ds-small)}
.btn:disabled{opacity:.4;pointer-events:none}
.btn-row{display:flex;gap:9px}
/* min-width:0 so five icon actions share a phone's width without the row
overflowing; the side padding drops because these are square-ish targets,
not word-bearing buttons. */
.btn-row .btn{flex:1;min-width:0;padding-left:10px;padding-right:10px}
/* ---------- hit areas ----------
The density here is deliberate: a 32px icon button and a 32px segment are the
right size on the page and the wrong size under a thumb. Inflating them to
44px would buy the target and spend the layout — five filter chips at 44px
are a toolbar, not a filter.
So the visible box stays where it was drawn and the target grows past it,
with an absolutely positioned pseudo-element that catches the taps the chip
is too small to catch itself. Nothing moves; the 44px is simply there.
The rule is centred on the control, so the overhang is split evenly above
and below rather than stealing from whatever sits underneath. */
.me,.icon-btn,.seg button,.btn-sm,.pkg-history-toggle,
.cr-pill,.step-b,.pkg-edit,.wl-dow,.sec-link,.chip-tog,.pkg-owe-btn{position:relative}
.me::after,.icon-btn::after,.seg button::after,.btn-sm::after,
.pkg-history-toggle::after,
/* The most-tapped controls in the app were the ones missing from this list:
Nudge/Payment/Wake are 25px tall, and the waitlist and request toggles,
the hours steppers and the package edit pencil are all under 30px. The
visible box stays where it was drawn; only the target grows. */
.cr-pill::after,.step-b::after,.pkg-edit::after,.wl-dow::after,.pkg-owe-btn::after,
.sec-link::after,.chip-tog::after{
content:'';position:absolute;left:0;right:0;
top:50%;height:44px;transform:translateY(-50%);
}
/* Square controls are short in both directions, so they take the width too. */
.me::after,.icon-btn::after{left:50%;right:auto;width:44px;transform:translate(-50%,-50%)}
/* ---------- forms ---------- */
.field{margin-bottom:14px}
.field > label{display:block;font:500 var(--ds-label)/1 var(--mono);letter-spacing:.14em;
text-transform:uppercase;color:var(--faint);margin:0 0 7px}
/* A FIELD IS A WELL, NOT A CARD. These were painted with --surface — the same
white as the sheet they sit on — so a form was a set of outlines on a flat
plane and the only thing saying "you write here" was a border. Sunk one step
with a 1px inner shadow, they read as somewhere to put something before a
word of the label is read. This is the boxed form style only: the inline
rows inside a sheet override the background further down and STAY
borderless, because a bordered input inside a ruled row is two containers
saying the same thing — see .sh-row-v. */
.input,.textarea,.select{
width:100%;padding:12px 13px;background:var(--sunken);box-shadow:var(--inset);
border:1px solid var(--line-strong);border-radius:var(--r-s);
/* 14px, not 16 (owner, 2026-08-16: "the texts filling in the boxes are
TOO big"). 16px was only ever the iOS anti-zoom floor; the viewport
meta now carries maximum-scale=1, which stops the focus zoom without
touching pinch (iOS has ignored the cap for pinch since iOS 10). */
font-size:var(--ds-body);font-family:var(--sans);color:var(--ink);appearance:none;
}
/* Placeholders were never styled, so they were the browser's #757575 on
whatever surface the field happened to sit on — 1.75:1 in dark, which is a
grey on a grey. That would matter less if they were decoration, but half of
them carry the format the field wants: "+852 …", "12345678-000", "at least 6
characters". --fainter is the quietest grey in the system that is still
checked against both grounds. */
.input::placeholder,.textarea::placeholder{color:var(--fainter);opacity:1}
/* The border alone carries the focus state now that there are no shadows
to glow with. */
/* Focus fills the well white and keeps the accent edge: the field you are in is
the one that is no longer recessed. */
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent);
background:var(--surface);box-shadow:none}
.textarea{min-height:80px;resize:vertical;line-height:1.45}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235c646c' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px}
/* the chevron colour is baked into the data URI, so dark needs its own copy */
:root[data-theme=dark] .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23d5dade' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.field-row{display:flex;gap:10px}
.field-row > .field{flex:1}
/* A price-list row: the name across the top with its bin, and the numbers as
sheet rows under it. The three-abreast number layout below this went with
them (2026-08-26) — squeezing "Price (HKD)" and "Valid days" into 90px
columns was the old shape solving a problem the row shape does not have. */
.tpl-row{margin-bottom:10px}
.tpl-head{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.tpl-head .input{flex:1;min-width:0}
.tpl-head .icon-btn{flex:none}
/* ARCHIVO SPEAKS, MONO LABELS AND MEASURES — the design system's own rule, and
this broke it on every form in the app. A hint is a SENTENCE ("How every
message and link reaches them.", "Leave blank if not yet signed."), and a
full line of mono reads as terminal output. It also mattered more in light
than in dark: grey mono prose next to grey mono prose on a light ground is
where the eye stops being able to tell a note from a field.
--ds-small rather than --ds-label, because Archivo at a label size is smaller
on the page than mono at the same token — the mono face runs wide. */
.hint{font:400 var(--ds-small)/1.5 var(--sans);letter-spacing:0;color:var(--faint);margin:7px 0 0}
/* ---------- lock screen ----------
The whole page, not a sheet over it, because there is nothing underneath: the
store has not been decrypted, so anything behind this would be an app with no
clients in it. No brand bar and no tab bar either — every destination they
offer is unreachable until the passcode is in.
Sat a little above centre. Optically centred content wants to be high of the
true middle, and here it also keeps the field clear of a phone keyboard. */
.lock{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 20px 15vh}
.lock-box{width:100%;max-width:340px}
.lock-brand{justify-content:center;margin-bottom:18px}
.lock-note{font:400 var(--ds-small)/1.55 var(--sans);color:var(--faint);text-align:center;margin:0 0 18px}
/* Reserved height, so a wrong passcode does not shove the button down the page
under the thumb that is already moving towards it. */
.lock-err{font:400 var(--ds-label)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;
color:var(--bad);min-height:16px;margin-top:9px;text-align:center}
/* 17px of padding on 10.5px of type, which is the only way this control reaches
44px without getting louder — and it is the one control on the screen that
must not be hit by accident, so it stays the smallest text and the quietest
grey while still being a full-sized target. */
.lock-wipe{display:block;width:100%;margin-top:20px;padding:17px 12px;background:none;border:0;
color:var(--faint);font:400 var(--ds-label)/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}
/* Segmented controls are outlined cells, and the chosen one inverts to --ink.
No track behind them — the track was doing a job that a border does better. */
.seg{display:flex;gap:5px}
.seg button{flex:1;padding:10px 8px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);
color:var(--muted);font:500 var(--ds-small)/1 var(--sans);letter-spacing:0}
/* Selected = a green ring, exactly as a selected day on the calendar. It used
to be an inverted ink slab, which was a THIRD way of saying "this one" in an
app whose rule is green for selected/in-view. Same class serves the Clients
filters, so both tab rows now say it the one way. */
.seg button.on{background:var(--surface-2);border-color:var(--accent);color:var(--ink)}
.check-row{display:flex;align-items:center;gap:10px;padding:10px 0}
/* checkboxes reach here carrying .input, whose appearance:none hides the tick */
.check-row input[type=checkbox]{
width:19px;height:19px;flex:none;padding:0;border:0;
background:none;appearance:auto;-webkit-appearance:checkbox;accent-color:var(--accent);
}
.check-row span{font-size:var(--ds-small)}
/* ---------- modal / sheet ---------- */
.scrim{
position:fixed;inset:0;z-index:50;background:var(--scrim);
display:flex;align-items:flex-end;justify-content:center;
animation:fade .18s ease;
}
/* a stacked sheet keeps its parent visible behind it, but only one backdrop dims */
.scrim-under{background:transparent}
/* The exit is the entrance run backwards: scrim fades while the sheet sinks.
ui.js adds .closing and removes the node 200ms later; pointer-events off so
a departing scrim can never swallow the tap that dismissed it. */
.scrim.closing{animation:fade-out .16s ease forwards;pointer-events:none}
.scrim.closing .sheet{animation:sink var(--dur-2) ease forwards}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fade-out{to{opacity:0}}
@keyframes rise{from{transform:translateY(24px)}to{transform:translateY(0)}}
@keyframes sink{to{transform:translateY(28px);opacity:0}}
.sheet{
width:100%;max-width:var(--maxw);
background:var(--bg);
border-radius:20px 20px 0 0;box-shadow:var(--shadow-up);
max-height:92vh;display:flex;flex-direction:column;
animation:rise .22s cubic-bezier(.2,.8,.2,1);
padding-bottom:env(safe-area-inset-bottom);
}
.sheet-head{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:16px 18px 12px;position:sticky;top:0;
}
.sheet-head h2{font-size:var(--ds-figure);font-weight:700;margin:0;letter-spacing:-.02em}
/* The title as a door to the person — see openSheet(). It has to look like the
heading it replaces, so it inherits everything and adds only the chevron that
says it goes somewhere. */
.sheet-title-go{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;
background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left}
.sheet-title-go svg{color:var(--faint);flex:none}
.sheet-sub{padding:0 18px 2px;font:var(--ds-w-medium) var(--ds-micro)/1.5 var(--mono);
letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
/* The instruction that turns a list of names into a set of controls. Quieter
than the heading it sits beside — it is read once, on the first class a coach
ever opens, and never needed again. */
/* Also a sentence — "Tap a name to mark one person" is an instruction, not a
label. Same rule as .sh-act-s above. */
.sect-hint{font:var(--ds-w-regular) var(--ds-small)/1.35 var(--sans);letter-spacing:0;
text-transform:none;color:var(--fainter)}
.sheet-grip{width:34px;height:3px;background:var(--line-strong);margin:9px auto 0}
.sheet-body{padding:4px 18px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sheet-foot{padding:12px 18px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line-strong);background:var(--surface)}
/* ---- THE ACTION-SHEET ROW (owner mocks 29–31, 2026-08-19) ----------------
Every sheet used field(): a label stacked above its control, which is a FORM.
The mocks are statements you can change — mono key in a fixed left column,
value beside it, and what the app already knows on the right.
A grid, not flex, and for the same reason the runner's set table is one: the
value column holds an on one row and a plain span on the next, and
under flex those two land in different places. The key column is the widest
label in the sheet (WHATSAPP), so every sheet in the app aligns the same. */
.sh-rows{border-left:1px solid var(--line);padding-left:14px;margin-top:6px}
.sh-row{display:grid;grid-template-columns:88px minmax(0,1fr) auto;align-items:center;
gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.sh-row:last-child{border-bottom:0}
.sh-row-k{font:var(--ds-w-medium) var(--ds-micro)/1.3 var(--mono);letter-spacing:.11em;
text-transform:uppercase;color:var(--fainter)}
/* The control CARRIES this class rather than sitting inside a span with it —
see sheetRow(). It inherits the row rather than drawing a box inside it: a
bordered input in a ruled row is two containers saying the same thing, and it
was the single biggest reason these sheets read as forms. */
.sh-row-v{min-width:0;border:0;background:none;padding:0;width:100%;
font:var(--ds-w-regular) var(--ds-strong)/1.3 var(--sans);color:var(--ink)}
.sh-row-v::placeholder{color:var(--fainter)}
/* A SELECT NEEDS A HEIGHT. Stripping the box left height:auto on it, which is
how a