` also carries `st-sheet` in its markup, so there is one definition of the sheet in the estate and this rule only adds what a scrolling app needs beyond it. `flex:1` is gone: the old comment said it existed "so a nearly- empty page reads as a sheet on a drawing board, not as a screen that ran out of content", but a column that is actually paper, ruled, with a contact ring, reads as a sheet at any height; a sheet with no bottom edge running off the window did not. `min-height:60svh` does that job instead, without needing the column to fill the viewport. --------------------------------------------------------------------- */ .ch-ground{display:flex;flex-direction:column;min-height:100svh;} .ch-ground .ch-main{ min-height:60svh; padding-block:var(--s7); } /* --------------------------------------------------------------------- 1. THE COLUMN The app is one thread, so the page is one column: 764px, not the marketing site's 1080. Wide enough for a row of when + who + action, narrow enough that the eye never has to travel. --------------------------------------------------------------------- */ .ch-wrap{max-width:764px;margin-inline:auto;padding-inline:var(--gutter);} .ch-wrap--wide{max-width:980px;} /* first run only: teaching beside the form */ .ch-main{padding-block:var(--s6) var(--s10);} /* Two-column teaching layout (first run only). */ .ch-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start;} .ch-split--wide{max-width:980px;} @media (max-width:920px){ .ch-split{grid-template-columns:1fr;gap:var(--s6);} } /* --------------------------------------------------------------------- 2. TOP BAR Sits inside .st-head so it inherits the sticky hairline shell. Left: who we are. Right: who you are, and the light switch. Actions live in the page, next to their context. --------------------------------------------------------------------- */ /* THE MARK IN THIS APP IS VIOLET, NOT TEAL (Ian, 2026-08-29, ans-20260829-151101-bac0: "I like the main site being teal, and coach being violet. As long as it is all consistently applied.") stica.css re-pins the whole shell subtree to brand teal, because on the marketing site one mark has to survive a visitor walking from a Craft page to a Coach page. This app is not that site. Every page it serves is Stica Coach, so the mark never changes colour mid-journey here, and the two door pages (login.html, invite.html) already drew it violet because they carry no .st-head to re-pin them. Six pages teal and two violet was the accident; this makes it eight violet. All four accent tokens move, not just the dot's --acc. Moving --acc alone left the current tab's underline drawn in teal two centimetres from a violet dot, which was measured in a real render rather than argued about: a 68x2 CSS bar of #0F909D (--a-brand-line) beside the mark. Half a mark is not a mark. The coach line declares a full set for both palettes (--a-coach-line, --a-coach-line-d, --a-coach-fill, --a-coach-text-d), so nothing here invents a value or loses a contrast ratio. This mirrors stica.css's own shell block exactly, one line lower in the cascade and at the same specificity, so it wins by order. The mail this app sends already draws the dot in --a-coach (lib/mailer.js COACH_ACCENT), so screen and inbox now match. */ .st-head,.st-skip{ --acc:var(--a-coach); --acc-line:var(--a-coach-line); --acc-fill:var(--a-coach-fill); --acc-text:var(--a-coach-fill); } :root[data-theme="dark"] .st-head,:root[data-theme="dark"] .st-skip{ --acc-line:var(--a-coach-line-d); --acc-text:var(--a-coach-text-d); } @media (prefers-color-scheme: dark){ :root[data-theme="auto"] .st-head,:root[data-theme="auto"] .st-skip{ --acc-line:var(--a-coach-line-d); --acc-text:var(--a-coach-text-d); } } .ch-top{ max-width:764px;margin-inline:auto;padding:var(--s3) var(--gutter); display:flex;align-items:center;gap:var(--s2); } .ch-top .st-brand{font-size:24px;} /* Direction A retires the uppercase letterspaced mono interface label (this app name badge, "Coach" beside the wordmark, was one). Public Sans 600, sentence case, no letter-spacing games: it reads as a plain word next to the mark, the way "Coach" already is in the copy everywhere else. No pen rule here: that prefix is for an eyebrow standing before a block of its own; this is one word riding along the brand line. */ .ch-appname{ font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:600; color:var(--mut); margin-left:4px;position:relative;top:2px; } .ch-top__right{margin-left:auto;display:flex;align-items:center;gap:var(--s3);} /* The two places a coach goes: Sessions (the dashboard) and Clients. The tab-per-client row left the dashboard on 2026-08-20 with the clients page and nothing replaced it, so a client's record had no road to it (Ian, 2026-08-21). Same underline-as-current as .ch-tab. */ .ch-nav{display:flex;align-items:center;gap:var(--s3);margin-left:var(--s4);} .ch-nav__link{ display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s1); text-decoration:none;white-space:nowrap; font-size:var(--fs-body-sm);font-weight:500;color:var(--ink2); box-shadow:inset 0 -2px 0 0 transparent; transition:color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease); } .ch-nav__link:hover{color:var(--ink);} .ch-nav__link[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 0 var(--acc-line);} @media (max-width:640px){ .ch-appname{display:none;} /* the word Coach gives its room to the two links */ .ch-nav{margin-left:var(--s2);} } /* A phone cannot hold brand, two links, avatar and the light switch on one line (measured 441px on a 390px screen), so the links take a second row under the brand, full width, and nothing is hidden to make room. */ @media (max-width:520px){ .ch-top{flex-wrap:wrap;row-gap:0;} .ch-nav{order:3;flex-basis:100%;margin-left:0;} } /* A person who coaches here and is also coached here carries a THIRD link ("My coach", coach/*.html, revealed by api/coach/me.js's alsoAClient). Two links already needed the whole row at 390px, per the note above, so the third one moves the wrap up to 640px — but only for that person. A coach with two links keeps the layout measured above, unchanged. */ @media (max-width:640px){ .ch-top:has(.ch-nav__link#nav-my-coach:not([hidden])){flex-wrap:wrap;row-gap:0;} .ch-nav:has(#nav-my-coach:not([hidden])){order:3;flex-basis:100%;margin-left:0;} } .ch-me{ display:inline-flex;align-items:center;gap:var(--s2); min-height:44px;padding:0 var(--s2);border-radius:var(--r-md); text-decoration:none;color:var(--ink2); font-size:var(--fs-body-sm);font-weight:600; transition:color var(--dur-1) var(--ease); } .ch-me:hover{color:var(--ink);} .ch-avatar{ width:30px;height:30px;border-radius:var(--r-dot);flex:none; display:inline-flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--acc) 14%,var(--surface)); border:1px solid var(--line2); font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink); } @media (max-width:640px){ .ch-me__name{display:none;} /* the avatar alone, with its aria-label */ } /* --------------------------------------------------------------------- 3. THE ASK: one plain sentence answering "what needs me" The sentence is the h1: it IS the headline of the coach's day. --------------------------------------------------------------------- */ .ch-ask{display:flex;align-items:center;justify-content:space-between;gap:var(--s4) var(--s6);flex-wrap:wrap;} .ch-ask__text{ margin:0;font-size:20px;font-weight:600;line-height:1.4; letter-spacing:-.3px;color:var(--ink);max-width:44ch; } .ch-ask__text b{color:var(--ink);font-weight:600;} /* semantic hook only; no gradient tricks */ .ch-ask__also{ flex-basis:100%;margin:0;padding-top:var(--s3);border-top:1px solid var(--line); font-size:var(--fs-body-sm);line-height:1.5;color:var(--mut); } .ch-ask__also a{color:var(--acc-text);text-underline-offset:3px;} /* --------------------------------------------------------------------- 4. FILTER BAR: clients are a filter on the thread, not a second nav Text tabs with the sanctioned active-tab underline in --acc-line. Scrolls sideways on a phone rather than wrapping into a wall. --------------------------------------------------------------------- */ .ch-bar{ display:flex;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4); margin:var(--s6) 0 var(--s2);flex-wrap:wrap; } .ch-tabs{display:flex;align-items:center;gap:var(--s3);overflow-x:auto;max-width:100%;} .ch-tab{ display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s1); white-space:nowrap;text-decoration:none; font-size:var(--fs-body-sm);font-weight:500;color:var(--ink2); box-shadow:inset 0 -2px 0 0 transparent; transition:color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease); } .ch-tab:hover{color:var(--ink);} .ch-tab[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 0 var(--acc-line);} /* Prototype only: a filter for a client whose page is not built is a span, not a dead link, so it stays honest under the cursor. */ span.ch-tab{cursor:default;} span.ch-tab:hover{color:var(--ink2);} /* --------------------------------------------------------------------- 5. THE THREAD A list of session rows, newest first. Hairlines divide, nothing is a card. Desktop: when | body | action. Phone: stacked, action last. --------------------------------------------------------------------- */ .ch-thread{list-style:none;margin:0;padding:0;} /* The two headings on the clients list (2026-08-28): clients on Stica, and clients the coach hands over themselves. Only ever rendered when BOTH groups have somebody in them, so this spacing is always separating two lists and never floating over one. The sub-line carries the consequence, which is the whole reason the grouping earns its place over a chip. */ /* THE UPLOAD TILE (Ian, 2026-08-31). One pressable line above the session list instead of the open form that used to fill the first screen. It is a .st-disclosure, so the open/close affordance, the border and the body padding all come from the shared stylesheet; this adds only the two-line summary and the accent edge that marks it as the one thing on this page you do rather than read. */ .ch-upload{margin:0 0 var(--s6);border-left:3px solid var(--acc-line);} .ch-upload > summary{align-items:baseline;gap:var(--s3);flex-wrap:wrap;} .ch-upload__title{font-weight:600;} .ch-upload__sub{color:var(--mut);font-size:14px;font-weight:400;} .ch-upload .st-disclosure__body{padding-top:var(--s4);} @media (max-width:520px){ .ch-upload__sub{flex-basis:100%;} } .ch-grouphead{margin:var(--s6) 0 0;} .ch-thread + .ch-grouphead{margin-top:var(--s7);} .ch-groupsub{margin:var(--s2) 0 var(--s3);color:var(--ink2);font-size:14px;line-height:1.5;} .ch-row{ display:grid;grid-template-areas:"when body act"; grid-template-columns:104px 1fr auto;gap:var(--s1) var(--s4); align-items:center;padding:var(--s4) 0;border-top:1px solid var(--line); } .ch-thread > .ch-row:first-child{border-top:0;} .ch-when{grid-area:when;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--ink2);white-space:nowrap;align-self:start;padding-top:3px;} .ch-when small{display:block;font-size:12px;color:var(--mut);} .ch-body{grid-area:body;min-width:0;} .ch-who{ margin:0;font-size:16px;font-weight:600;line-height:1.4;color:var(--ink); display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap; } .ch-note{margin:2px 0 0;font-size:var(--fs-body-sm);line-height:1.5;color:var(--mut);max-width:52ch;} .ch-act{grid-area:act;justify-self:end;} .st-btn.ch-act,.st-btn--sec.ch-act{font-size:14px;padding:9px 14px;} .st-btn--ghost.ch-act{font-size:14px;} @media (max-width:640px){ .ch-row{grid-template-areas:"when" "body" "act";grid-template-columns:1fr;} .ch-when{padding-top:0;} .ch-when small{display:inline;margin-left:var(--s2);} .ch-act{justify-self:start;margin-top:var(--s2);} } /* The state vocabulary: a dot and a word, in the working-state colour. Every value here clears 4.5:1 on both grounds (measured; see the build report). The word is always present; colour never stands alone. */ .ch-state{ display:inline-flex;align-items:center;gap:6px; font-family:var(--mono);font-size:10.5px;font-weight:500; letter-spacing:.8px;text-transform:uppercase;white-space:nowrap; } .ch-state::before{content:"";width:6px;height:6px;border-radius:var(--r-dot);background:currentColor;flex:none;} .ch-state--ready{color:var(--amber);} /* waiting on the coach */ .ch-state--upcoming{color:var(--cobalt);} /* a session still to come */ .ch-state--released{color:var(--green);} /* the client has it */ .ch-state--writing{color:var(--mut);} /* the machine is working */ .ch-state--failed{color:var(--oxide);} /* a fault needing a hand */ /* A state this app does not recognise. Hollow rather than filled, because a filled dot in any colour reads as a state the system is holding, and this is the absence of one. It must never look like --writing, which is the fault it exists to stop repeating. */ .ch-state--unknown{color:var(--mut);} .ch-state--unknown::before{background:transparent;box-shadow:inset 0 0 0 1px currentColor;} /* "You send it": a client the coach added themselves (Ian, 2026-08-28). NOT A STATE, which is why it is hollow and muted and never takes one of the five working colours above. It says who does the delivering, which is true of this client for ever and is nothing the coach is waiting on, so an amber (waiting on you) or an oxide (a fault) would both be lies about a perfectly ordinary client. Same hollow dot as --unknown, for the same reason said there: a filled dot reads as a state the system is holding. The muted ink clears 4.5:1 on both grounds, same as every value above, and the word is always present so the colour never stands alone. Rendered by coach/dashboard.html's byHandChip and coach/client.html's. */ .ch-state--byhand{color:var(--mut);} .ch-state--byhand::before{background:transparent;box-shadow:inset 0 0 0 1px currentColor;} /* The chips under a name on a session row, when there is more than one of them. A bare pair of inline-flex spans has only a collapsed space between it, which reads as one long chip at a glance. */ .ch-chips{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;} /* The one hand object the dashboard carries when it has data (sheet spec §8): a Kalam aside sitting beside the first standing prompt's name. */ .ch-row__note{margin-left:var(--s2);} /* The client-invitation state vocabulary (WP-a-client-is-invited, wave 4). Six named states, each an alias of a colour that already means this above, so a coach is never asked to learn a second palette: invited and delivered read as "still to come", waiting as "ready for the coach", bounced and complained as faults needing a hand, active as the client colour already used across the app. */ .ch-state--invited{color:var(--cobalt);} .ch-state--delivered{color:var(--cobalt);} .ch-state--waiting{color:var(--amber);} .ch-state--bounced{color:var(--oxide);} .ch-state--complained{color:var(--mut);} .ch-state--declined{color:var(--mut);} .ch-state--active{color:var(--green);} /* Wave 6 (WP-the-person-closes-their-account): the one state that can follow "active", never a fault and never a fresh invitation, so it gets the same muted reading as declined and complained rather than a new colour to learn. */ .ch-state--former{color:var(--mut);} /* The bounced row's inline fix: an email field and a resend button, sitting inside .ch-body (already grid-area:body) rather than claiming a grid area of its own - the prototype's own .ch-row__fix carried a dead grid-area:body rule doing nothing a parent grid area does not already do (design-fixes item 11). Plain flex, wraps cleanly at narrow widths. */ .ch-fixrow{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s2);} .ch-fixrow .st-input{flex:1 1 220px;min-height:44px;} /* Past rows step back so the present reads first. */ .ch-row--past .ch-who{color:var(--ink2);} .ch-row--past .ch-when{color:var(--mut);} .ch-row--past .ch-when small{color:var(--mut);} /* The "now" seam: everything above it is still to come, everything below has happened. One hairline and one small word. */ .ch-nowline{ display:flex;align-items:center;gap:var(--s3);margin:0;padding:var(--s2) 0; font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px; text-transform:uppercase;color:var(--mut); } .ch-nowline::before,.ch-nowline::after{content:"";height:1px;background:var(--line2);flex:1;} /* The thread with nothing in it yet: one quiet line, not a shrug. */ .ch-none{ margin:0;padding:var(--s6) 0;border-top:1px solid var(--line); font-size:var(--fs-body-sm);color:var(--mut); } /* --------------------------------------------------------------------- 6. CLIENT PAGE BLOCKS --------------------------------------------------------------------- */ .ch-back{ display:inline-flex;align-items:center;gap:var(--s2);min-height:44px; font-size:var(--fs-body-sm);font-weight:600;color:var(--ink2);text-decoration:none; transition:color var(--dur-1) var(--ease); } .ch-back:hover{color:var(--ink);} .ch-back svg{flex:none;} .ch-backrow{margin:0 0 var(--s2);} /* The one place the real name lives. It fails every card test (nothing lays it beside a sibling, it is not a click target, it does not float), so per the sheet-and-empty-states spec §3.2 it is a block: the rule above it and air, the icon carried on, not a bordered inset any more. */ .ch-namefact{ display:flex;gap:var(--s3);align-items:flex-start; border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s5); } .ch-namefact svg{flex:none;margin-top:3px;color:var(--mut);} .ch-namefact p{margin:0;font-size:var(--fs-body-sm);line-height:1.55;color:var(--ink2);max-width:58ch;} .ch-clientmeta{ margin:var(--s2) 0 0;font-family:var(--mono);font-size:var(--fs-small); line-height:1.8;color:var(--mut); } /* Commitments: what the client agreed to, each with its state said in words on the right. The dot repeats the state colour; the words carry it. */ /* A list of rows, per spec §3.3: the sheet's own paper colour as a flat fill (no background-image), which switches the ruling off underneath it, and --line2 between rows. No box around the list, no per-row box. */ .ch-commits{list-style:none;margin:0;padding:0;background-color:var(--paper);} .ch-commit{ display:flex;align-items:baseline;gap:var(--s3); padding:var(--s3) 0;border-top:1px solid var(--line2); } .ch-commits > .ch-commit:first-child{border-top:0;} .ch-commit::before{ content:"";width:7px;height:7px;border-radius:var(--r-dot);flex:none; position:relative;top:-1px;background:var(--line-ui); } .ch-commit--kept::before{background:var(--green);} .ch-commit--open::before{background:var(--cobalt);} .ch-commit--quiet::before{background:var(--amber);} .ch-commit__what{margin:0;font-size:var(--fs-body);line-height:1.5;color:var(--ink);} .ch-commit__state{ margin-left:auto;font-family:var(--mono);font-size:var(--fs-small); color:var(--mut);white-space:nowrap;padding-left:var(--s3); } .ch-commit--kept .ch-commit__state{color:var(--green);} .ch-commit--quiet .ch-commit__state{color:var(--amber);} @media (max-width:640px){ .ch-commit{flex-wrap:wrap;} .ch-commit__state{margin-left:calc(7px + var(--s3));padding-left:0;flex-basis:100%;white-space:normal;} } /* --------------------------------------------------------------------- 7. THE DOOR (sign-in) One column, centred, on the plain desk. It should feel like arriving, not like a form. --------------------------------------------------------------------- */ /* A column, not a centred grid cell: the sheet and the site line beneath it are two things, and place-items:center would give each its own row of the viewport and drive them apart. */ .ch-door{ min-height:100svh; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:var(--s5); padding:var(--s8) var(--gutter); } /* Direction A, §5: "Sign-in is a taped paper scrap on the plain desk, one Kalam line, no grid." That removes the "one card centred on bare grid with a Google button" archetype the comment below used to defend, without inventing a new component: the card now carries stica.css's own .st-stuck (§16, the tape-and-shadow paper object every other pinned note on the site already uses), and this block only overrides its sizing for a form rather than a note. .st-stuck itself supplies the background, the tape strip, the tilt and the shadow, and keeps its white paper in dark mode the way every other pinned scrap does, so the card never needs its own dark-mode background rule. The width went from 400 to 488 with the padding, kept from the old card: everything here is border-box, so leaving 400 would have kept the sheet's outer edge where the bare text used to end and squeezed the form inside it to 312px. 488 is 400px of form plus the inset either side. */ .ch-door__card{ width:100%;max-width:488px; padding:var(--s7); } /* On a phone the sheet keeps its edge but not its generous inset: 44px of padding either side of a 360px screen leaves the form 272px wide. */ @media (max-width:520px){ .ch-door{padding:var(--s5) var(--gutter);} .ch-door__card{padding:var(--s5);} } .ch-door .st-brand{font-size:38px;} /* No highlighter behind the wordmark on the door, and here only. The highlight is sized in em off the glyph box, and dark mixes it at 32% against light's 20%. Everywhere else the wordmark is 24-30px, so both choices are right. The door is the one place it renders at 38px, and big glyphs times the stronger dark mix stop reading as a marker stroke and start reading as a solid slab clipped under the word. The dot carries the identity here instead. Remove this rule to put the highlight back. */ .ch-door .st-brand{background-image:none;padding-left:0;} .ch-door__head{margin-bottom:var(--s6);} .ch-door__brand{margin:0 0 var(--s5);} .ch-door__head h1{margin-bottom:var(--s2);} .ch-door__head p:last-child{margin:0;} .ch-door__field{margin-bottom:var(--s4);} .ch-door .st-note-xs{margin:var(--s3) 0 0;} .ch-door__toggle{position:fixed;top:var(--s4);right:var(--s4);z-index:50;} .ch-block{width:100%;} .ch-or{ display:flex;align-items:center;gap:var(--s3);margin:var(--s5) 0; font-family:var(--mono);font-size:var(--fs-small);letter-spacing:1px; text-transform:uppercase;color:var(--mut); } .ch-or::before,.ch-or::after{content:"";height:1px;flex:1;background:var(--line);} /* Our own Google button (2026-08-14, replacing Google's drop-in widget). The widget was an iframe from Google's origin: it could not be restyled, their branding terms forbid trying, and every variant they offer puts a white slab or a white logo tile on our dark page. Ian called it scrappy three times, so it is gone. Google's branding rules do allow a custom button on the redirect flow, which is what this is. It is .st-btn--sec, the design system's own secondary button, so it matches the primary above it exactly: same 44px floor, same radius, same hover transition, same full width. That match is the thing the iframe could never do, since Google's tallest size is 40px against our 48. The mark itself is Google's official four-colour G, unaltered and given its clear space, which is what their rules require of anyone drawing their own button. Fixed 18px: it is a logo, not an icon in our set, so it does not take the 1.5px currentColor stroke every ch-ic uses. */ .ch-google{gap:var(--s3);} .ch-google__g{flex:none;width:18px;height:18px;} /* .st-btn--sec sets display:inline-flex as an author rule, which beats the browser's own [hidden]{display:none} at equal specificity - so a Google button shipped hidden in the markup would show anyway on a deployment with Google switched off. This is the same trap .ch-or documents one rule up; it bites any hidden element carrying a class that sets display. Attribute plus class outranks the class alone. */ .ch-google[hidden]{display:none;} /* Sits on the ground below the sheet now, so the column's own gap sets the distance and the old margin would double it. */ .ch-door__foot{ margin:0;text-align:center; font-family:var(--mono);font-size:var(--fs-small);color:var(--mut); } .ch-door__foot a{color:inherit;} /* The consent list on the acceptance page (WP-a-client-is-invited, wave 2, invite.html). Rows, not cards, per design-fixes.md: this is information to read, not something to interact with, except the recording checkbox below it, which is its own field and never one of these rows. */ .ch-consent{list-style:none;margin:0 0 var(--s5);padding:0;} .ch-consent li{padding:var(--s3) 0;border-top:1px solid var(--line);font-size:var(--fs-body-sm);line-height:1.55;color:var(--ink2);} .ch-consent li:first-child{border-top:0;} .ch-consent b{color:var(--ink);font-weight:600;display:block;margin-bottom:2px;} /* The one tick this page asks for. Kept apart from the informational rows above (consent-checklist.md's rule 4: recording gets its own tick, never bundled with anything else), and from any button below it, so nobody presses "yes" without the checkbox in view first. */ .ch-consent-tick{display:flex;align-items:flex-start;gap:var(--s3);cursor:pointer;} .ch-consent-tick input{margin-top:3px;flex:none;width:18px;height:18px;} .ch-consent-tick span{font-size:var(--fs-body-sm);line-height:1.5;color:var(--ink2);} /* Decline reads as the one restrictive option (consent-checklist.md's rule 6: any highlighting must fall on the most restrictive answer, never the reverse), while staying the same st-btn--sec size and weight as the two yes buttons above it, per design-fixes.md's item 4. */ .st-btn--sec.ch-danger{color:var(--oxide);border-color:color-mix(in srgb,var(--oxide) 35%,var(--line));} .st-btn--sec.ch-danger:hover{border-color:var(--oxide);} /* --------------------------------------------------------------------- 8. SMALL SHARED PIECES --------------------------------------------------------------------- */ /* Confirmation line after an action that changed something. */ .ch-done{ display:inline-flex;align-items:center;gap:var(--s2); font-size:var(--fs-body-sm);font-weight:600;color:var(--green); } .ch-done::before{content:"";width:7px;height:7px;border-radius:var(--r-dot);background:currentColor;flex:none;} /* Section gap inside the app column: quieter than the marketing 80px. */ /* .ch-sect is this platform's block (spec §5.3): a titled section lying on the sheet, divided from its neighbour by a rule and by air, the sheet's own ruling running through it. Not a box: no background, no border but the rule above, no radius, no shadow. */ .ch-sect{ margin-top:var(--s5); border-top:1px solid var(--line); padding-top:var(--s5); } .ch-sect:first-child{border-top:0;padding-top:0;margin-top:0;} .ch-sect > h2{margin-bottom:var(--s4);} /* Forms: a measure, not the full column. */ .ch-form{max-width:560px;} .ch-fieldset{border:0;padding:0;margin:0 0 var(--s5);} .ch-fieldset legend{margin-bottom:var(--s2);padding:0;} /* .st-field is a column flex, which stretches an inline-flex segment to full width; a two-option control should be the size of its options. */ .st-field > .st-segment{align-self:flex-start;} .st-btnrow .st-small{margin:0;} .ch-after{margin:var(--s3) 0 0;} /* The worked example under "how long your write-ups run": the same moment from one session, shown at whichever length is selected, so a coach reads the difference instead of being told about it. It borrows .ch-namefact's shape (the one existing inset panel in this file) rather than inventing a second card idiom, and differs only where it has to: no icon column, so no flex, and the text sits at the same measure as the form it belongs to. Deliberately quieter than the fields above it -- it is something to read while choosing, not another thing to fill in. THE SPEC SAID PROFILE.HTML HAD NO BOXES (sheet-and-empty-states spec §5.3): reading the code, this one does. It fails every card test in turn (nothing beside it, not a click target, does not float), so it is a block like everything else here, not the exception the spec missed. */ .ch-example{ border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s3); } .ch-example > .st-small{margin:0 0 var(--s3);color:var(--mut);} .ch-example__h{ margin:var(--s3) 0 var(--s1);font-size:var(--fs-small); font-weight:600;color:var(--ink); } .ch-example__h:first-child{margin-top:0;} .ch-example__p{ margin:0 0 var(--s2);font-size:var(--fs-body-sm); line-height:1.55;color:var(--ink2);max-width:58ch; } .ch-example__p:last-child{margin-bottom:0;} .ch-example__list{ margin:0;padding-left:var(--s4);font-size:var(--fs-body-sm); line-height:1.55;color:var(--ink2);max-width:58ch; } .ch-example__list li{margin-bottom:var(--s1);} .ch-example__list li:last-child{margin-bottom:0;} /* The recording, on a session page. A transcript is one utterance per line with a speaker prefix, so it is pre-formatted text and not prose: wrapping it into paragraphs would destroy the only structure it has. Scrolls inside its own pane rather than making the page thousands of lines long, and wraps rather than scrolling sideways, because a long line is a long sentence somebody said and not a table. BLOCK, PER THE CARD TEST, WITH A NOTE (sheet-and-empty-states spec §3.2): it is not a click target, nothing lays it beside a sibling, it does not float, so the mechanical answer is block, not card. Flagged rather than guessed at: the max-height/overflow scroll pane still needs SOME visible edge for a coach to see where the scroll region ends, which a bare top rule does not give it. Kept scrollable and flat rather than reintroducing a border on my own judgement; worth Morris's eye. */ .ch-transcript{ margin:var(--s3) 0 0;border-top:1px solid var(--line);padding-top:var(--s4); max-height:60vh;overflow-y:auto; font-family:var(--mono);font-size:var(--fs-small);line-height:1.7; color:var(--ink2); white-space:pre-wrap;overflow-wrap:anywhere; } .st-tile > .st-body-sm{margin-bottom:0;} /* Upload drop zone internals. */ .st-drop > .ch-ic{color:var(--mut);} .ch-drop__lead{margin:var(--s2) 0 var(--s1);font-size:var(--fs-body-sm);color:var(--ink);} .ch-drop__meta{margin:0 0 var(--s4);} /* Destructive text action: oxide is the fault colour, and losing data is the fault being risked. Word carries it; the colour agrees. */ .st-btn--ghost.ch-danger{color:var(--oxide);} .st-btn--ghost.ch-danger:hover{color:var(--oxide);text-decoration-thickness:2px;} /* Icon defaults: drawn SVG, one stroke weight, inherits currentColor. */ .ch-ic{display:inline-block;vertical-align:-3px;} .ch-ic path,.ch-ic circle,.ch-ic line,.ch-ic rect,.ch-ic polyline{ fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; } /* The light switch, made findable (Ian's ask, 2026-08-14 second round). The 34px bare glyph read as nothing at all: Ian looked at all six pages and asked for a feature they already had. So the control gains the word stica.css already gives it in the mobile nav panel ("Dark mode" / "Light mode", stating what the next press gives, matching the icon rule), a 44px target, and a boundary in --line-ui, which clears 3:1 against the ground in both themes. It stays quieter than any button: no fill at rest, regular weight, muted-side text. The svgs keep their st-themetoggle__ classes, so the sun/moon specificity repair above still applies to it unchanged. */ .ch-theme{ width:auto;height:auto;min-height:44px; gap:var(--s2);padding:0 var(--s4); border-color:var(--line-ui); font-family:var(--sans);font-size:var(--fs-body-sm);font-weight:500; color:var(--ink2); } .ch-theme:hover{color:var(--ink);border-color:var(--line-ui);background:color-mix(in srgb,var(--ink) 5%,transparent);} .ch-theme::after{content:"Dark mode";} :root[data-theme="dark"] .ch-theme::after{content:"Light mode";} @media (prefers-color-scheme: dark){ :root[data-theme="auto"] .ch-theme::after{content:"Light mode";} } /* German acceptance page (invite.html): the toggle's visible word, never only its aria-label. Wave 9 fix -- wave 9's own toggle work set the aria-label from STRINGS but left this ::after content in English, so a German visitor read "Light mode"/"Dark mode" on the button itself. Keyed off the invite.html already sets to "de-DE" once the invitation's own language is known, mirroring the pair immediately above. */ :root[lang="de-DE"] .ch-theme::after{content:"Heller Modus";} :root[lang="de-DE"][data-theme="dark"] .ch-theme::after{content:"Dunkler Modus";} /* Repair, measured in this prototype: stica.css's `.st-themetoggle svg` (0,1,1) outranks `.st-themetoggle__sun` (0,1,0), so both icons showed at once. Re-stated at the winning specificity for all three theme states. Belongs upstream in stica.css eventually. */ .st-themetoggle svg.st-themetoggle__sun{display:none;} :root[data-theme="dark"] .st-themetoggle svg.st-themetoggle__sun{display:block;} :root[data-theme="dark"] .st-themetoggle svg.st-themetoggle__moon{display:none;} @media (prefers-color-scheme: dark){ :root[data-theme="auto"] .st-themetoggle svg.st-themetoggle__sun{display:block;} :root[data-theme="auto"] .st-themetoggle svg.st-themetoggle__moon{display:none;} } /* ---- Step 2: read and release (coach/session.html) --------------------- Four classes, added 2026-08-15 with the session loop. Everything else on that screen is st-* or the ch-commit component above, reused rather than restyled. */ /* Two ways to save, or two ways to say something, side by side. They wrap on a phone rather than shrinking, because both labels are sentences and a truncated one would hide which button tells the client. */ .ch-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4);} .ch-actions > .st-btn{flex:0 1 auto;} /* The follow-up plan sits under its commitment rather than beside it: the commitment row is a baseline flex row and a form in it would ride the text. Full-width basis pushes it onto its own line inside the same row. */ .ch-commit{flex-wrap:wrap;} .ch-planform{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s2);} .ch-planform .st-input{width:auto;} /* Notes and messages: one thread, both audiences, each line saying which it is. Kept quieter than the document above it. */ .ch-notes{list-style:none;margin:0 0 var(--s4);padding:0;} .ch-note-row{padding:var(--s3) 0;border-top:1px solid var(--line);} .ch-notes > .ch-note-row:first-child{border-top:0;} .ch-note-row p{margin:0;} .ch-note-row p + p{margin-top:var(--s1);color:var(--mut);} /* --------------------------------------------------------------------- 12. THE WRITE-UP, IN PARTS Ian, 2026-08-15, on the first real reports: they "are very lengthy and present as a wall of text". Measured before this existed: 2,380 words in ONE textarea, of which the record of the session was 1,827. The document is still one document; only the reading of it is broken up. ROWS, NOT CARDS, and that is this file's own brief being obeyed rather than a shortcut: "no cards inside cards". These sit inside the panel that already exists, separated the same way .ch-commit rows are, so the screen gains a structure without gaining a second frame around everything. A CLOSED PART SAYS HOW BIG IT IS. Collapsing is only honest if the coach can see the size of what they are choosing not to open; without the word count it is hiding. --------------------------------------------------------------------- */ .ch-parts{list-style:none;margin:0 0 var(--s4);padding:0;} .ch-part{border-top:1px solid var(--line);} .ch-parts > .ch-part:first-child{border-top:0;} /* The whole header is the control, so the target is the row rather than a chevron a thumb has to find. 44px minimum, like everything else here. */ .ch-part__head{ width:100%;min-height:44px;display:flex;align-items:center;gap:var(--s3); padding:var(--s3) 0;margin:0;background:none;border:0; font:inherit;color:var(--ink);text-align:left;cursor:pointer; transition:color var(--dur-1) var(--ease); } /* Same reason as .ch-linkbtn above: the raw accent is 4.35:1 on this ground, so a hover state painted with it drops below the floor the rest of the row clears. Hover colours are read, not decorative. */ .ch-part__head:hover{color:var(--acc-text);} .ch-part__chev{ flex:none;fill:none;stroke:currentColor;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round; transition:transform var(--dur-2) var(--ease); } .ch-part__head[aria-expanded="true"] .ch-part__chev{transform:rotate(90deg);} .ch-part__title{font-weight:600;font-size:var(--fs-body);} .ch-part__size{ margin-left:auto;font-family:var(--mono);font-size:var(--fs-small); color:var(--mut);white-space:nowrap;padding-left:var(--s3); } /* An unrecognised part. It is shown, opened and named after its own heading (see lib/document-sections.js); the dot is what says the app does not know what it is, rather than dressing it up as one of the four it does know. */ .ch-part--unknown .ch-part__title::after{ content:"";display:inline-block;width:7px;height:7px;margin-left:var(--s2); border-radius:var(--r-dot);border:1px solid var(--line-ui); position:relative;top:-1px; } .ch-part__body{padding:0 0 var(--s4);} .ch-part__hint{margin:0 0 var(--s2);} .ch-part__body .st-textarea{margin:0;} /* The dates and check-ins, sitting immediately under the part that names the actions rather than in a panel of their own further down. Before this a coach read the same six commitments twice: once as prose inside the document, once as rows under a separate heading. Same two facts, one place, so the eye crosses them once. */ .ch-plan{margin:0 0 var(--s4);padding:var(--s3) 0 0;border-top:1px dashed var(--line);} .ch-plan__lead{margin:0 0 var(--s2);} /* --------------------------------------------------------------------- 13. ADDING A CLIENT FROM ANYWHERE The control used to exist only on the first-run screen, so a coach could add their first client and never a second (Ian found it live, 2026-08-15). It now sits at the end of the client tabs, which is where the clients already are, and a second way in sits under the upload dropdown, which is where a coach notices someone is missing. It borrowed .ch-tab until 2026-08-26, on the reasoning that it sat in a row of related things and a filled button would claim to be the most important item on the page. That reasoning expired when the per-client tabs were retired: the button was left alone in a tab row of one, so the underline-shaped, bare-text treatment made the page's only action read as a filter that happened to be switched off. Ian read it that way (2026-08- 26) and he is right; there is nothing beside it to be related to. It is now an outlined button, which reads as a thing you press without claiming primacy the way a filled one would. The original caution stands and is still what rules out .st-btn on its own here. --------------------------------------------------------------------- */ .ch-addrow{margin:var(--s4) 0 var(--s5);} .ch-add::before{content:"+";margin-right:var(--s1);font-weight:600;} /* Open is a state of the panel, not a selected filter: the emphasis says "this is doing something now" and nothing more. */ .ch-add[aria-expanded="true"]{color:var(--ink);border-color:var(--ink2);} /* A button that reads as a link, inside a line of help text. Not an : it goes nowhere, and an anchor with no href is a trap for a keyboard. */ /* --acc-text, NOT --acc (2026-08-31). This control is 11px micro-copy, and the raw brand violet measures 4.35:1 in light and 3.72:1 in dark against a 4.5:1 floor. The same violet passes at 14px, which is why it was never caught by eye. --acc-text is the readable partner and already resolves in both palettes (--a-coach-fill light, --a-coach-text-d dark), giving 5.01:1 and 5.04:1. This is the identical fault removed from the marketing site's privacy and terms pages the same afternoon; when one accent is corrected, every sibling product needs the same grep. */ .ch-linkbtn{ background:none;border:0;padding:0;font:inherit;color:var(--acc-text); text-decoration:underline;text-underline-offset:2px;cursor:pointer; } .ch-linkbtn:hover{color:var(--ink);} /* An anchor wearing this class picks up the stylesheet's visited colour otherwise, so the same control reads as two different things depending on whether the coach has been there before. */ a.ch-linkbtn:visited{color:var(--acc-text);} /* The line under the briefing that says what kind of thing it is. Set apart from the lists above it, because the claim it makes (these are facts, the judgement is yours) is the reason a coach can trust the rest. */ .ch-briefnote{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);} /* A part's editor grows to its text (autosize() in session.html) and stops here. Without a ceiling, the record of the session opens as a box a couple of hundred lines tall and the Save button ends up somewhere below the horizon. */ .ch-part__body .st-textarea{max-height:70vh;min-height:64px;} /* The 120px floor the design system puts under every textarea is right for a form field somebody is about to fill in and wrong for a two-line list that is already written. autosize() gives these their real height, so the floor only has to keep a one-line part comfortably above the 44px touch minimum. */ /* The two halves of the briefing, what they owe and what you owe. They need air above them: without it the second heading sits on the last line of the list before it and the two lists read as one. */ .ch-brief__h{margin-top:var(--s5);} /* A commitment's text stays BESIDE its dot however long it is. .ch-commit wraps so the follow-up form can drop onto its own line, and the side effect was an orphan: a paragraph long enough to need two lines wrapped below the dot, leaving a lone dot sitting on a line of its own above the text. Invisible on the short fixtures, obvious the moment a real commitment ran past one line. Growing and shrinking from a zero basis is what keeps it on the dot's line; min-width:0 lets it actually wrap its own text rather than refusing to go below its longest word. */ .ch-commit__what{flex:1 1 0;min-width:0;} /* Marking an action finished, on the client page and on the session page both. The buttons drop onto their own line inside the commitment row, the same way the follow-up form does, so a long action never has three buttons riding its text. They are the design system's secondary button at its small size rather than a new kind of control: this is an ordinary thing a coach does, not an alarming one, and the destructive-looking treatment would be wrong for something with an undo beside it. */ .ch-commit__acts{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2);} /* COMPACT ON PURPOSE, and this is the second version. The first used the secondary button at full size, which looked fine on a three-item fixture and was a wall on real data: one client has twenty-one open actions, so three full-sized buttons a row is sixty-three of them down one page, shouting louder than the actions they are about. These keep the 44px touch target the design system insists on and give back everything else: smaller type, tight padding, a hairline instead of a fill. */ .ch-mark{ font-size:13px;font-weight:600;padding:6px 12px;min-height:44px; background:transparent;color:var(--mut);border:1px solid var(--line); } .ch-mark:hover{color:var(--ink);border-color:var(--acc-line);background:transparent;} /* What it says once it is closed, with the way back on the same line. Quiet, because a closed action is finished business and should not shout over the ones still open above it. */ .ch-commit__done{flex:1 0 100%;margin:var(--s2) 0 0;font-size:var(--fs-small);color:var(--mut);} .ch-commit__done .ch-linkbtn{margin-left:var(--s1);} /* --------------------------------------------------------------------- WHAT THE COACH THEMSELVES OWES (2026-08-16, rebuilt as rows coach-review-2 E2, wave 3) Ian asked for the reminder to be clean and clear and to add no noise. It used to be a folded `

`, its own quieter widget above the session list; it is now two kinds of row IN that list (checkInRowsHtml()/promiseRowsHtml() in coach/dashboard.html), so the .ch-owed* rules that styled the fold are gone with it -- .ch-row and its own parts above carry these rows now. `.ch-row--prompt` is a bare hook, not a size or colour swap: a coach reads a prompt row the same way they read a session row, never louder. The date box beside a promise and the add-one box share the follow-up form's shape, because they are the same gesture in the same kind of row. -------------------------------------------------------------------- */ .ch-row__sub{display:block;font-size:var(--fs-body-sm);color:var(--mut);margin-top:2px;} /* The date sits in the same row as the three answers and saves on change, so a promise is one line of controls rather than two. */ .ch-duebox{width:auto;min-height:44px;padding:6px 10px;font-size:13px;} .ch-addpromise{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s3);} .ch-addpromise .st-input{flex:1 1 240px;} /* --------------------------------------------------------------------- 14. THE THREE QUIET LINES UNDER AN ACTION (migration 054, 2026-08-16) When and where, the first step, done when. Quieter than the plan form above them on purpose: those are dates a coach sets to run the follow-up, these are three facts about what was actually said, and the page should not shout the second kind as loud as the first. THE LABEL IS ALWAYS THERE, MUTED, WHETHER THE LINE IS FILLED OR NOT. "a blank line shows its greyed label rather than vanishing, so a coach can see there is somewhere to put it" is the plan's own words: a label that only appeared once something was typed would be exactly the vanishing it refuses, so the colour never changes between empty and filled. --------------------------------------------------------------------- */ .ch-quiet{flex:1 0 100%;display:flex;flex-direction:column;gap:var(--s1);margin-top:var(--s3);padding-top:var(--s2);border-top:1px dashed var(--line);} .ch-quiet__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);} .ch-quiet__label{ flex:0 0 auto;min-width:9ch; font-size:var(--fs-small);color:var(--mut); } .ch-quiet__field{ flex:1 1 200px;min-height:32px;width:auto; border:0;border-bottom:1px solid transparent;background:none; font:inherit;font-size:var(--fs-small);color:var(--ink);padding:2px 0; } .ch-quiet__field:hover,.ch-quiet__field:focus{border-bottom-color:var(--line-ui);outline:none;} /* --------------------------------------------------------------------- 15. THE TICK, AND WHAT APPROVING THE LAST PART OFFERS (WP-coach-stands-alone, "the check-in build" section 3b; decided memory/decisions/coach-report-parts-tick-but-never-block.md) The tick means "I have read and approved this part", nothing more, and it never blocks Release — there is no gate here, only a control. It sits INSIDE the part body rather than in .ch-part__head, because the head is already a