/* ───────────────────────────────────────────────────────────────────────────────────────
 * WHY EVERY TOKEN BELOW CARRIES A FALLBACK
 *
 * This sheet is loaded on BOTH surfaces — over admin/css/clcm-admin.css in wp-admin, and over
 * public/css/clcm-public.css on the portal and the token pages — and those two define different
 * token sets. Four names exist in only one of them:
 *
 *     --clcm-font-serif, --clcm-font-sans, --clcm-navy-mid   admin.css only
 *     --clcm-font-body                                        public.css only
 *
 * An unresolved var() does not fall back to an inherited value: it makes the WHOLE declaration
 * invalid at computed-value time. So on the portal `.clcm-rd-hero`'s
 * `background:linear-gradient(..., var(--clcm-navy-mid) 100%)` painted NO background while its
 * colour stayed `--clcm-white` — white text on the white portal surface, an invisible hero — and
 * every `font-family:var(--clcm-font-serif)` was dropped, so the redesign's typography never
 * applied to a single client-facing page. The mirror image was true on admin for --clcm-font-body.
 *
 * None of this was visible until redesign_tags() started delivering this sheet to the portal in
 * v2.268.0; before that it was not loaded there at all, so the bug shipped hidden behind a bigger
 * one. Found by an asset-delivery audit of that fix, 2026-10-13.
 *
 * The fallback values are copied from the host that does define each token, so the rendered result
 * is identical on the surface that has it and correct on the one that does not. A tenant's own
 * tokens still win: they are printed as html:root (0,1,1), which outranks these :root reads.
 * ─────────────────────────────────────────────────────────────────────────────────────── */
/* ONE SHEET, TWO SURFACES — SO NO BARE TOKEN DEPENDENCIES.
   This file is loaded by the coach admin AND by the client portal, but --clcm-text-muted is
   defined only in admin/css/clcm-admin.css. On the portal every rule below that read it bare got
   no colour at all and fell back to whatever it inherited, which is why muted text on a reskinned
   portal screen was not muted. Each use now carries the token's own value as its fallback, so the
   sheet stands up wherever it is loaded; where the admin sheet IS present its :root still wins.
*/
/* Waymark redesign — list-page component vocabulary. v2.264.0.
 *
 * A SEPARATE STYLESHEET ON PURPOSE. admin/css/clcm-admin.css is pinned byte-for-byte against
 * v2.239.0 by tests/test-tenant-colours-v2240-css.php, which carves every rule added since and
 * hashes them. Adding components there would re-baseline that guard on every screen of this
 * redesign; keeping them here leaves the pin protecting the rules it was written for, and makes
 * each screen's new CSS reviewable on its own.
 *
 * NO COLOUR LITERALS. Everything resolves through --clcm-* so a branded tenant recolours it, and
 * so tests/test-tenant-colours-v2240-sweep.php — which scans every shipped file for stray Waymark
 * shades — stays quiet. Spacing and radii come from the token scale added in phase 1.
 */

/* ── page header ─────────────────────────────────────────────────────────────── */
.clcm-rd-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:0 0 14px; }
.clcm-rd-head h1 { font-family:var(--clcm-font-serif, 'Lora', Georgia, serif); font-weight:600; font-size:24px; line-height:1.2;
  color:var(--clcm-navy); margin:0 0 4px; text-wrap:balance; }
.clcm-rd-sub { font-size:13.5px; color:var(--clcm-text-muted, #5A6478); margin:0; max-width:52ch; }

/* ── the card every list page sits in ────────────────────────────────────────── */
.clcm-rd-card { background:var(--clcm-white); border:1px solid var(--clcm-border, #DDD8CE);
  border-radius:var(--clcm-radius-xl); overflow:hidden; }

/* A card whose content is NOT a table. The bare .clcm-rd-card has no padding on purpose — a
   table draws its own gutters — but the portal fills its cards with self-bordered boxes, which
   then sit flush against the edge. Opt in rather than changing .clcm-rd-card, so the coach-side
   tables keep edge-to-edge rows. */
.clcm-rd-card--padded > :not(.clcm-rd-bar) { margin-left:16px; margin-right:16px; }
/* THE LAST CHILD THAT ACTUALLY DRAWS, which is not always :last-child.
   An inline <script> is a child like any other to :last-child and renders nothing, so the 16px
   landed on an invisible element while the real last thing in the card sat flush on its bottom
   border. Measured on the portal's Messages card, 2026-10-16: the composer's bottom edge was at
   515px and the card's at 516px, with 12px above it and 16px either side — Jose saw the missing
   margin before any test did, because no test asks what a box's fourth side looks like.
   The selector says "an element with no drawing sibling after it", so a card that ends in a
   script, a style or a template is spaced from the last thing a person can see. */
.clcm-rd-card--padded > *:not(script):not(style):not(template):not(:has(~ *:not(script):not(style):not(template))) { margin-bottom:16px; }
/* The section heading keeps its heading semantics; it only needs to stop looking like one. */
h2.clcm-rd-count, h3.clcm-rd-count { font-family:var(--clcm-font-sans, 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif); font-size:13px; margin:0; }

/* ── tabs: gold underline on the active one, count in a pill ─────────────────── */
/* SCROLLS. The client profile carries 13 tabs and they must not wrap or clip — this strip was
   written for the 2-4 a list page has. overflow-x on the strip, no-shrink on the tabs. */
.clcm-rd-tabs { display:flex; gap:4px; padding:0 16px; border-bottom:1px solid rgba(var(--clcm-navy-rgb),.08);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.clcm-rd-tabs::-webkit-scrollbar { display:none; }
/* A STRIP THAT CARRIES BOTH VOCABULARIES TAKES THIS ONE'S GROUND.
   .clcm-tab-bar is kept on reskinned strips on purpose — it is what clcm-admin.js finds to
   centre the open tab and paint the scroll fades, and one marker test orders against it. But it
   also paints a navy band, and .clcm-rd-tabs declares no background of its own, so the band
   survived underneath navy-on-light tabs. It was invisible in the coach shell, where the
   white-label skin forces the bar transparent with !important — and that is exactly the
   environment this work was looked at in. Anywhere the shell is off (shows_shell() false) the
   band was there. Two classes beat one, so this wins without !important of its own.
   The white-label's !important still wins over this, and also says transparent. */
.clcm-tab-bar.clcm-rd-tabs { background:transparent; padding:0 16px;
  border-bottom:1px solid rgba(var(--clcm-navy-rgb),.08); }
.clcm-tab-bar.clcm-rd-tabs.clcm-rd-tabs--page { padding:0; }
.clcm-rd-tab { flex:0 0 auto; white-space:nowrap; display:inline-flex; align-items:center; gap:7px; padding:13px 10px 11px; font-size:13.5px;
  font-weight:700; color:var(--clcm-text-muted, #5A6478); text-decoration:none; border-bottom:2px solid transparent;
  transition:color var(--clcm-dur-hover) var(--clcm-ease), border-color var(--clcm-dur-hover) var(--clcm-ease); }
/* RESTATE THE COLOUR ON EVERY LINK STATE. WordPress core styles a:focus and a:active at (0,1,1),
   which beats a single class — so a clicked tab flashed core's blue until the next page load.
   The same fix is documented in clcm-admin.css for .clcm-chip-bar and .clcm-tab-bar; the new
   tabs needed their own. */
.clcm-rd-tab:link, .clcm-rd-tab:visited { color:var(--clcm-text-muted, #5A6478); }
.clcm-rd-tab:hover, .clcm-rd-tab:focus, .clcm-rd-tab:active { color:var(--clcm-navy); }
.clcm-rd-tab.is-on:link, .clcm-rd-tab.is-on:visited,
.clcm-rd-tab.is-on:focus, .clcm-rd-tab.is-on:active { color:var(--clcm-navy); }
/*
 * ── FOCUS RINGS READ gold-text, NEVER gold ──────────────────────────────────────────
 *
 * --clcm-gold is the tenant's RAW SAVED ACCENT. --clcm-gold-text is that hue darkened by
 * tokens_for() until it clears 3:1 on white AND on #ede7d9, which is what WCAG 1.4.11 asks of a
 * focus indicator — whitelabel's own comment says the token exists "for icons, state borders and
 * focus rings (3:1, WCAG 1.4.11)".
 *
 * Five rings in this sheet read the raw accent: these tabs, the sortable table headings, the row
 * titles, the Settings sub-nav and every primary button. Both host sheets have always written
 * var(--clcm-gold-text, var(--clcm-gold, #C8A45D)), so this sheet was the one that diverged.
 *
 * THE HEX FLOOR IS NOT DECORATION. A var() chain that bottoms out in another var() is void
 * at computed-value time if nothing defines the last name — and a voided `outline` is NO
 * FOCUS CUE AT ALL, which is worse than a low-contrast one.
 * tests/test-a11y-blocking-v2269.php pins that floor on the sort button for exactly this
 * reason, and it caught a first pass of this fix that added the measured token and left the
 * floor off. It is the same shape as the --clcm-clay bug in the settings partial, where a
 * bare var() dropped the colour from three reconnect warnings.
 *
 * WHY IT WOULD HAVE HIDDEN: Waymark's own saved accent clears 3:1, so nothing looks wrong from
 * here. A
 * tenant who saves a pale gold gets an invisible keyboard focus ring on every coach screen, and
 * nobody on this side would ever see it. Audit, 2026-10-15.
 */
.clcm-rd-tab:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:-2px; border-radius:4px; }
.clcm-rd-tab.is-on { color:var(--clcm-navy); border-bottom-color:var(--clcm-gold); }
.clcm-rd-tab-n { font-size:11.5px; font-weight:700; line-height:1; padding:3px 7px; border-radius:var(--clcm-radius-sm);
  background:rgba(var(--clcm-gold-rgb),.20); color:var(--clcm-gold-ink); font-variant-numeric:tabular-nums; }
.clcm-rd-tab.is-on /* .20, not .30. The count sits in --clcm-gold-ink on a tint of the accent, and at .30 that
   pairing measures 4.26 on white — an AA miss for an 11.5px label, found on the Home clients
   tab strip at 375px. Lightening the GROUND rather than darkening the ink keeps the badge the
   accent's colour, which is the point of it; .20 measures 4.61 and leaves some headroom. Both
   halves are tenant tokens, so tokens_for() still governs the pairing for a tenant's own gold. */
.clcm-rd-tab-n { background:rgba(var(--clcm-gold-rgb),.20); }

/* ── the row between tabs and table: what you are looking at, and a filter ───── */
.clcm-rd-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; }
.clcm-rd-count { font-size:13px; font-weight:700; color:var(--clcm-navy); }
.clcm-rd-count span { font-weight:400; color:var(--clcm-text-muted, #5A6478); }

/* ── table ───────────────────────────────────────────────────────────────────── */
.clcm-rd-table { width:100%; border-collapse:collapse; }
.clcm-rd-table thead th { background:var(--clcm-surface-tint); font-size:11.5px; font-weight:700;
  letter-spacing:.04em; color:var(--clcm-text-muted, #5A6478); text-align:left; padding:9px 16px; white-space:nowrap;
  border-bottom:1px solid rgba(var(--clcm-navy-rgb),.08); }
/* A sortable heading is a BUTTON so the keyboard can reach it, and it has to be invisible as a
   button: font:inherit takes the <th>'s 11.5px/700/.04em, and the reset removes the UA chrome. The
   state lives on the <th> as aria-sort — the arrow is that same fact drawn as a shape, because the
   only cue before was a colour, which tells a colour-blind reader nothing. Literal fallbacks on the
   focus colour: this sheet also loads over clcm-public.css, where a missing token would void the
   whole declaration. */
.clcm-rd-table thead th > .clcm-rd-sort { display:inline; background:none; border:0; margin:0;
  padding:0; font:inherit; letter-spacing:inherit; color:inherit; text-align:inherit;
  text-transform:inherit; cursor:pointer; }
.clcm-rd-table thead th > .clcm-rd-sort:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D));
  outline-offset:2px; border-radius:2px; }
.clcm-rd-table thead th .sort-icon { margin-left:4px; opacity:.45; }
.clcm-rd-table thead th[aria-sort="ascending"] .sort-icon,
.clcm-rd-table thead th[aria-sort="descending"] .sort-icon { opacity:1; }
.clcm-rd-table tbody td { padding:11px 16px; font-size:13.5px; color:var(--clcm-text);
  border-bottom:1px solid rgba(var(--clcm-navy-rgb),.06); vertical-align:middle; }
.clcm-rd-table tbody tr:last-child td { border-bottom:0; }
.clcm-rd-table tbody tr { transition:background var(--clcm-dur-hover) var(--clcm-ease); }
.clcm-rd-table tbody tr:hover { background:var(--clcm-surface-tint); }
.clcm-rd-muted { color:var(--clcm-text-muted, #5A6478); }
.clcm-rd-num { font-variant-numeric:tabular-nums; }

/* The row title carries the link; the whole row is a hit target via the overlay below, so the
   anchor stays the one accessible name and keyboard users still tab to exactly one thing. */
/* NO position HERE. ::after below is absolute with inset:0, so it resolves against the nearest
   POSITIONED ancestor — and while this element was itself relative, the overlay sized to the
   LINK instead of the row. The whole-row hit target the comment promised never existed. The
   row carries the positioning (.clcm-rd-row below), so the overlay now spans it. */
.clcm-rd-title { font-weight:700; font-size:13.5px; color:var(--clcm-navy); text-decoration:none; }
/* a.clcm-rd-title, NOT .clcm-rd-title. The overlay makes the whole row click the title's link,
   which is the point on the eight screens where that title IS a link. On rows whose title is a
   plain <span> there is no link to open, and the overlay still spanned the row and still took
   the click: it is positioned, so it paints above static inline content. That made real links
   in those rows unreachable with a mouse -- the Receipt link on Membership's billing table,
   the mailto on Help, and span-titled rows on Platform, Certification and the invoices list.
   Keyboard users were unaffected throughout, because a pseudo-element cannot take focus, which
   is why it read as fine in review.

   Scoping it to the anchor is the whole fix: rows with a real link keep the hit target, rows
   without one lose an overlay that could only ever swallow clicks. The .row-actions carve-out
   further down this file exists for exactly this collision and needed no equivalent here. */
/*
 * THE OVERLAY IS CONFINED BY THE CELL, NOT THE ROW — and that is a correctness fix, not a
 * refinement.
 *
 * `position:relative` on a <tr> is honoured by Blink and IGNORED by WebKit: CSS leaves the
 * effect of relative positioning on table rows undefined, and the two engines made opposite
 * choices. So in Safari — every iPhone, and therefore the installed PWA — the row established
 * NO containing block, and `inset:0` on each title's ::after resolved against a far larger
 * ancestor instead. The last row's overlay is painted last, so it covered the whole list AND
 * the tab bar above it: every tap on this screen opened the LAST client in the list.
 *
 * Reported from a phone on 2026-10-17 — tapping any client name, or the Inactive or Leads tab,
 * opened Zaira Potschka, who is row 14 of 14. It was invisible in Chrome at the same width,
 * which is where it was built and tested.
 *
 * A <td> takes `position:relative` in every engine, so the containing block goes there. The
 * overlay now spans its own CELL rather than the row: the name and the space around it in that
 * first column stay clickable, and the rest of the row is simply not a link. That trade is the
 * point — the failure mode is now "the row is not clickable there", never "the row opened
 * somebody else's client".
 */
a.clcm-rd-title::after { content:''; position:absolute; inset:0; }
.clcm-rd-row { position:relative; }
.clcm-rd-row > td,
.clcm-rd-table tbody td { position:relative; }
.clcm-rd-row:focus-within { background:var(--clcm-surface-tint); }
.clcm-rd-title:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:2px; border-radius:3px; }

/* ── identity cell: initials disc + name ─────────────────────────────────────── */
.clcm-rd-ident { display:flex; align-items:center; gap:10px; }
.clcm-rd-disc { flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--clcm-font-serif, 'Lora', Georgia, serif); font-weight:600; font-size:12px; letter-spacing:.02em;
  color:var(--clcm-white); text-transform:uppercase; }

/* ── status pill: a dot and a word, never colour alone ───────────────────────── */
.clcm-rd-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--clcm-radius-sm);
  font-size:12px; font-weight:700; white-space:nowrap; }
.clcm-rd-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }
/* ── the five tones, each with its OWN tint ─────────────────────────────────────
 *
 * Three of these used to share one ground, rgba(navy,.06), and differ only in ink: "Paid",
 * "Refunded" and "Draft" were the same pale blue chip with green, red and grey text. The mockup
 * gives each tone a tint of its own family, so the chip itself carries the meaning and a glance
 * down a column separates them before any word is read.
 *
 * TAKEN FROM THE MOCKUP'S OWN TONE MAP, verbatim:
 *     sage    #EBF0EA / #4E6B4A      rose    #F6E7E3 / #a3402f
 *     gold    #F5EEDF / #83662D      neutral #F1EEE8 / #5A6478
 *     navy    #E8ECF1 / #102A43
 *
 * AND DELIBERATELY NOT TENANT-DERIVED, which is a change: the grounds used to come from the org's
 * own navy and gold, so a branded tenant tinted its status chips. These say good, waiting and
 * wrong — they are semantic, not brand, and a green brand must not turn "Refunded" green. The
 * tenant's colour stays on everything that IS brand: the rail, the active row, the accents.
 *
 * The --navy tone is declared but currently unused; it is the mockup's fifth and is here so a
 * screen that needs an informational chip reaches for it rather than inventing a sixth. */
/* THE :hover AND :active STATES ARE ON THESE SAME RULES ON PURPOSE.
   wp-admin's bare `a:hover { color:#135e96 }` is (0,1,1) and .clcm-rd-pill--warn is (0,1,0),
   so hovering the Appointments list's "Needs invoice" chip — an <a> wearing a pill — turned
   its text WordPress blue inside a gold chip (Jose, 2026-10-17). Writing separate hover rules
   would mean a second copy of all ten literals below; extending the selector list keeps ONE
   declaration per tone, which is also what the pinned literal counts in
   tests/test-tenant-colours-v2240-sweep.php are counting. */
.clcm-rd-pill--on,
a.clcm-rd-pill--on:hover,
a.clcm-rd-pill--on:active    { background:#EBF0EA; color:#4E6B4A; }
.clcm-rd-pill--off,
a.clcm-rd-pill--off:hover,
a.clcm-rd-pill--off:active   { background:#F1EEE8; color:#5A6478; }
.clcm-pay-disc--wait,
.clcm-rd-pill--warn,
a.clcm-rd-pill--warn:hover,
a.clcm-rd-pill--warn:active  { background:#F5EEDF; color:#83662D; }
.clcm-rd-pill--alert,
a.clcm-rd-pill--alert:hover,
a.clcm-rd-pill--alert:active { background:#F6E7E3; color:#a3402f; }
.clcm-rd-pill--navy,
a.clcm-rd-pill--navy:hover,
a.clcm-rd-pill--navy:active  { background:#E8ECF1; color:#102A43; }

/* ── Agreement, ?clcm_sign= — mockup "Portal App" vSign (l.286-295); README l.127 ──
 *
 * SCOPED TO .clcm-sign-card--agreement ON PURPOSE. .clcm-sign-card / -header / -meta /
 * -body / -footer / -done are shared with the invoice page (render_pay_content, l.620-731)
 * and the checkout-return page (l.375-397). An unscoped rule here restyles all three, and
 * the Lora rules would be WRONG there: Lora is for long-form reading — an agreement is, an
 * invoice is not. Each of those surfaces opts in from its own spec.
 *
 * THE TINT PAIR IS THE ONE ALREADY REVIEWED for .clcm-rd-pill--on above: #EBF0EA / #4E6B4A,
 * the mockup's own sage tone. Neither needs a sweep allowlist entry — the sweep hunts the
 * navy and gold families only (tests/test-tenant-colours-v2240-sweep.php:74-75, $NAVY/$GOLD;
 * no sage shade is in either). And, like the pill tones, these are deliberately NOT
 * tenant-derived, for the reason given at l.141-158: "signed" is semantic, not brand, and
 * tokens_for() (modules/whitelabel/class-clcm-whitelabel.php:106-181) emits no sage key, so
 * there is no tenant value to read. The tenant's own colours still reach this surface
 * everywhere they should: the header navy, the brand gold, and the measured on-navy inks.
 */
.clcm-sign-card--agreement { border-radius:var(--clcm-radius-2xl); }
.clcm-sign-card--agreement .clcm-sign-meta { font-size:12.5px; font-weight:800; margin:0 0 4px;
  color:var(--clcm-gold-on-navy, var(--clcm-gold)); }
.clcm-sign-card--agreement .clcm-sign-header h1 {
  font-family:var(--clcm-font-serif, 'Lora', Georgia, serif); font-size:26px; line-height:1.15; }
@media (min-width:720px) {
  .clcm-sign-card--agreement .clcm-sign-header h1 { font-size:30px; }
}
.clcm-sign-card--agreement .clcm-sign-body {
  font-family:var(--clcm-font-serif, 'Lora', Georgia, serif); font-size:15.5px; line-height:1.7; }

/* The reading box. A NEW class, so the invoice body (l.627) and the two error cards
   (l.565, l.791) keep today's full-bleed .clcm-sign-body. */
.clcm-sign-doc { background:var(--clcm-white); border:1px solid rgba(var(--clcm-navy-rgb),.10);
  border-radius:var(--clcm-radius-xl); padding:18px; max-height:340px; overflow-y:auto;
  overscroll-behavior:contain; }
/* v2.358.2 — THE READING BOX FITS THE SCREEN IT IS ON. 340px at every width held a 35,000px agreement in a 376px window
   on a phone (95 box-heights), and the paper-form underscore runs ("Name: ______") pushed it sideways. On a phone the
   agreement now flows in the page with no inner scroll; wider screens get a box most of the window tall. Long words and
   underscore runs wrap, so it never scrolls sideways. The first-run signing screen (.clcm-fr-doc) gets the same. */
.clcm-sign-doc { overflow-wrap:anywhere; overflow-x:hidden; }
@media (max-width:599px) {
  .clcm-sign-doc { max-height:none; overflow:visible; overscroll-behavior:auto; }
}
@media (min-width:600px) {
  .clcm-sign-doc { max-height:max(340px, 60vh); }
}
/* A CLIENT PRINTS AND SAVES THIS DOCUMENT — see the <head> comment at l.111-117, which is
   why the tab title is resolved from the row's coach. overflow:auto clips at the first
   screenful in print, so without this the agreement they keep is a fragment of the one
   they signed. */
@media print {
  .clcm-sign-doc { max-height:none; overflow:visible; border:0; padding:0; }
}

/* The confirmation. clcm-public.css:1090 reserved `.clcm-sign-done > .clcm-sign-tick` as
   the tick's flex hook and nothing ever rendered one; this gives it a body. The tint lives
   on a MODIFIER because .clcm-sign-done is also the invoice page's void/refunded (l.693)
   and slot-gone (l.706) block, and sage there would tell someone whose money came back
   that something succeeded. */
.clcm-sign-done--ok { align-items:center; gap:10px; padding:14px 16px;
  border-radius:var(--clcm-radius-xl); background:#EBF0EA; }
.clcm-sign-done--ok > p { color:#4E6B4A; }
.clcm-sign-done--ok > .clcm-sign-tick { margin-top:0; display:grid; place-items:center;
  color:#4E6B4A; }
.clcm-sign-done--ok > .clcm-sign-tick .ph { font-size:20px; }
/* The frozen signature is full-width with a gold rule under it; keep it on white rather
   than letting that rule sit on the tint. */
.clcm-sign-done--ok > .clcm-sign-signature { background:var(--clcm-white);
  border-radius:var(--clcm-radius-sm); padding:6px 10px 8px; box-sizing:border-box; }

/* One Parisienne field instead of an input plus a mirror (mockup l.291). 28px clears the
   16px iOS zoom floor by a wide margin. */
.clcm-sign-input--script { font-family:var(--clcm-font-accent, 'Parisienne', cursive);
  font-size:28px; height:56px; padding:0 16px; }


/* ── row actions: visible, reachable, and ABOVE the row overlay ───────────────
 *
 * TWO BUGS LIVED HERE, both shipped in the first cut of this vocabulary.
 *
 * FIRST, "row-actions" is a WordPress CORE admin class, and core CSS shoves it off-screen
 * (left:-9999em) until the row is hovered. clcm-admin.css undoes that, but only under
 * `.clcm-table` — so under `.clcm-rd-table` the buttons were hover-only, which means they did not
 * exist at all on a phone or tablet, where there is no hover. That is the exact reason the original
 * rule gives for existing; this one is its twin for the new table.
 *
 * SECOND, .clcm-rd-title::after spans the whole row to make it clickable, and it paints OVER this
 * cell — so even on a mouse the Message and Delete buttons would have opened the row instead. The
 * overlay has no z-index, so a positioned ancestor-free `z-index:1` here is enough to sit above it.
 */
.clcm-rd-table .row-actions {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
  position: relative !important;   /* relative, not static: it must also form a stacking context */
  left: auto !important;
  z-index: 1;                      /* above .clcm-rd-title::after */
  padding: 0; color: inherit; font-size: inherit;
}
.clcm-rd-table td.col-actions { width: 1%; white-space: nowrap; text-align: right; }

/* ── rows arrive in sequence, capped so a long list does not crawl in ────────── */
@media (prefers-reduced-motion: no-preference) {
  .clcm-rd-table tbody tr { animation:clcm-rd-in var(--clcm-dur-enter) var(--clcm-ease) both; }
  .clcm-rd-table tbody tr:nth-child(1){animation-delay:0ms}    .clcm-rd-table tbody tr:nth-child(2){animation-delay:28ms}
  .clcm-rd-table tbody tr:nth-child(3){animation-delay:56ms}   .clcm-rd-table tbody tr:nth-child(4){animation-delay:84ms}
  .clcm-rd-table tbody tr:nth-child(5){animation-delay:112ms}  .clcm-rd-table tbody tr:nth-child(6){animation-delay:140ms}
  .clcm-rd-table tbody tr:nth-child(7){animation-delay:168ms}  .clcm-rd-table tbody tr:nth-child(8){animation-delay:196ms}
  .clcm-rd-table tbody tr:nth-child(9){animation-delay:224ms}  .clcm-rd-table tbody tr:nth-child(10){animation-delay:252ms}
  .clcm-rd-table tbody tr:nth-child(11){animation-delay:280ms}
  .clcm-rd-table tbody tr:nth-child(n+12){animation-delay:308ms}
  @keyframes clcm-rd-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
}

@media (max-width:860px) {
  .clcm-rd-head { flex-direction:column; }
  /* SCROLL, do not compress. display:block + overflow-x alone lets the table shrink to the
     viewport and squeeze the first column to about one character per line — measured at 375px,
     not reasoned. A min-width forces the overflow that makes the scroll real, and the name
     column gets a floor so it is the LAST thing to give. */
  .clcm-rd-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .clcm-rd-table thead, .clcm-rd-table tbody { display:table; width:100%; min-width:560px; }
  .clcm-rd-table thead th:first-child, .clcm-rd-table tbody td:first-child { min-width:180px; }
}

/* ── phone ───────────────────────────────────────────────────────────────────
   Both of these are "label on the left, control on the right" rows, which is a
   desktop shape. At 375px the count and the filter box fight for one line and the
   input collapses to nothing. They stack, and the control takes the full width. */
@media (max-width:560px) {
  .clcm-rd-bar, .clcm-rd-panel-head { flex-direction:column; align-items:stretch; gap:10px; }
  .clcm-rd-bar .clcm-search-wrap, .clcm-rd-bar input[type="text"],
  .clcm-rd-bar select { width:100%; }
  .clcm-rd-head { gap:10px; }
  .clcm-rd-head h1 { font-size:21px; }
  /* overflow-wrap:anywhere lived here and was wrong: with a table that scrolls, a name has room,
     and "anywhere" broke it mid-word ("Chri / stia / n"). Normal word wrapping, long unbroken
     strings only. */
  .clcm-rd-ident { align-items:flex-start; }
  .clcm-rd-ident > span:last-child { min-width:0; overflow-wrap:break-word; }
  .clcm-rd-stats { grid-template-columns:1fr 1fr; }
}

/* ═══ SECOND VOCABULARY: the shapes a list page does not have ═══════════════════
 *
 * Added because four screens asked for them by name rather than because a mockup did:
 * Settings and Client Profile are a sub-nav plus form rows, not a table; Metrics and the
 * coach Home both carry stat tiles the list vocabulary has no word for; and Metrics needed
 * a page-level tab strip that is not inside a card.
 *
 * .clcm-rd-panel exists SEPARATELY from .clcm-rd-card on purpose. The card is a bare
 * container — no padding, overflow hidden — because a table draws its own gutters. A form
 * does not, and swapping .clcm-card for .clcm-rd-card on Settings would have put 25 sections'
 * content flush against the edge. The panel is the padded sibling.
 *
 * Still no colour literals: everything resolves through --clcm-*.
 */

/* ── panel: a card that holds prose or a form ────────────────────────────────── */
.clcm-rd-panel { background:var(--clcm-white); border:1px solid var(--clcm-border, #DDD8CE);
  border-radius:var(--clcm-radius-xl); margin:0 0 16px; overflow:hidden; }
.clcm-rd-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid rgba(var(--clcm-navy-rgb),.08); }
.clcm-rd-panel-head h2, .clcm-rd-panel-head h3 { font-family:var(--clcm-font-serif, 'Lora', Georgia, serif); font-weight:600;
  font-size:16px; color:var(--clcm-navy); margin:0; }
.clcm-rd-panel-body { padding:16px 18px; }
/* The row of buttons that closes a form panel. Tinted and ruled off so the controls read as
   belonging to the panel rather than floating under its last field. */
.clcm-rd-panel-foot { display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:14px 18px; border-top:1px solid rgba(var(--clcm-navy-rgb),.08);
  background:var(--clcm-surface-tint); }

/* ── a settings row: what it is on the left, the control on the right ────────── */
.clcm-rd-field { display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:14px 0; border-bottom:1px solid rgba(var(--clcm-navy-rgb),.06); }
.clcm-rd-field:last-child { border-bottom:0; }
.clcm-rd-field-l { flex:1 1 auto; min-width:0; }
.clcm-rd-field-l label, .clcm-rd-field-l .clcm-rd-field-name {
  display:block; font-size:13.5px; font-weight:700; color:var(--clcm-navy); margin:0 0 2px; }
.clcm-rd-field-l p { margin:0; font-size:12.5px; color:var(--clcm-text-muted, #5A6478); max-width:58ch; }
.clcm-rd-field-c { flex:0 0 auto; width:min(340px, 46%); }
.clcm-rd-field-c .clcm-drop { min-width:0; max-width:100%; }   /* in a wrapping row a chosen file's nowrap name would hold the panel at its own width */
.clcm-rd-field-c:has(> .clcm-btn) { min-width:min-content; }   /* a nowrap button widens its column, not the panel's clip. Only a button: a chosen file's name must not */
.clcm-rd-field-c input, .clcm-rd-field-c select, .clcm-rd-field-c textarea { width:100%; }
/* A textarea squeezed into 340px is unusable; this is the row that gives it the width. */
.clcm-rd-field--wide { display:block; }
.clcm-rd-field--wide .clcm-rd-field-c { width:100%; margin-top:8px; }
.clcm-rd-field--wide textarea.clcm-input { height:auto; }   /* .clcm-wrap .clcm-input pins a field to 34px; here rows= decides */

/* ── left sub-nav, for a screen with many sections ───────────────────────────── */
.clcm-rd-subnav { display:flex; flex-direction:column; gap:2px; padding:8px; }
.clcm-rd-subnav a { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--clcm-radius-sm);
  font-size:13px; font-weight:700; text-decoration:none; color:var(--clcm-text-muted, #5A6478);
  transition:background var(--clcm-dur-hover) var(--clcm-ease), color var(--clcm-dur-hover) var(--clcm-ease); }
.clcm-rd-subnav a:link, .clcm-rd-subnav a:visited { color:var(--clcm-text-muted, #5A6478); }
.clcm-rd-subnav a:hover, .clcm-rd-subnav a:focus, .clcm-rd-subnav a:active {
  color:var(--clcm-navy); background:var(--clcm-surface-tint); }
.clcm-rd-subnav a.is-on, .clcm-rd-subnav a.is-on:link, .clcm-rd-subnav a.is-on:visited,
.clcm-rd-subnav a.is-on:focus, .clcm-rd-subnav a.is-on:active {
  color:var(--clcm-navy); background:rgba(var(--clcm-gold-rgb),.16); }
.clcm-rd-subnav a:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:1px; }

/* ── page-level tabs: outside a card, so no side gutter ──────────────────────── */
.clcm-rd-tabs--page { padding:0; margin:0 0 14px; }

/* ── stat tiles ──────────────────────────────────────────────────────────────── */
.clcm-rd-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:0; border:1px solid rgba(var(--clcm-navy-rgb),.10); border-radius:var(--clcm-radius-xl);
  background:var(--clcm-white); overflow:hidden; margin:0 0 16px; }
/* The mockup's own measurements for a cell: 13px 16px 14px, a 12.5px/600 label, a 28px Lora
   number and a 12px/600 note 6px under it (mockups/Waymark Coach v2.dc.html:160-170). */
.clcm-rd-stat { padding:13px 16px 14px; border-right:1px solid rgba(var(--clcm-navy-rgb),.08); }
.clcm-rd-stat:last-child { border-right:0; }
.clcm-rd-stat-l { font-size:12.5px; font-weight:600; line-height:1.3; color:var(--clcm-text-muted, #5A6478); margin:0 0 4px; }
.clcm-rd-stat-n { font-family:var(--clcm-font-serif, 'Lora', Georgia, serif); font-weight:600; font-size:28px; line-height:1;
  color:var(--clcm-navy); font-variant-numeric:tabular-nums; }
.clcm-rd-stat-hint { font-size:12px; font-weight:600; line-height:1.35; color:var(--clcm-text-muted, #5A6478); margin:6px 0 0; }
/* A cell whose sparkline was dropped centres its value. The mockup pairs number and line on one
   baseline with the line pushed right, so a number left-aligned beside nothing reads as a mistake.
   Only cells the mockup actually draws a line in carry this — Home's Total clients and Upcoming
   sessions. Cells the mockup leaves bare stay left, because there they already match. */
.clcm-rd-stat--nospark { text-align:center; }
/* A number with its sparkline beside it. The mockup pairs them on one baseline and pushes the
   line to the cell's right edge (align-items:flex-end, justify-content:space-between, gap 8px),
   which is why the figure stays the thing you read first. The SVG carries flex:none so a long
   money string never squeezes it. Without a sparkline the row is a no-op, so a cell can gain or
   lose one without the markup changing shape. */
.clcm-rd-stat-row { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.clcm-rd-stat-row .clcm-rd-stat-n { margin:0; }
/* A cell that is a link. The mockup makes every KPI cell clickable and washes it on hover; the
   anchor must not take WordPress admin's blue, and the label/number/note keep their own colours. */
a.clcm-rd-stat, a.clcm-rd-stat:link, a.clcm-rd-stat:visited { display:block; text-decoration:none; color:inherit; }
a.clcm-rd-stat:hover, a.clcm-rd-stat:focus { background:#FBFAF7; text-decoration:none; color:inherit; }
/* THE NUMBER ANSWERS THE POINTER (Jose, 2026-10-22). This line is not new — it has held the
   number at navy since the tiles shipped, as armour: wp-admin sets a:hover at (0,1,1) and any
   link of ours that states colour on its base class alone loses the moment a pointer lands on
   it. So the armour stays and only what it holds changes.
   The chain is the tenant story: --clcm-gold-text is emitted by tokens_for() ONLY for an org
   that saved its own accent, already darkened until it reads on white and on cream. Waymark
   defines it in no sheet, so Waymark falls through to sage — its interaction colour, kept
   distinct from gold, which is its brand figure. --clcm-sage-ink is defined in BOTH hosts
   (clcm-admin.css and clcm-public.css), so the inner var() cannot delete this declaration on
   the host that lacks it; no hex is written here, because every Waymark literal that ships
   has to earn an entry in tests/test-tenant-colours-v2240-sweep.php. */
a.clcm-rd-stat:hover .clcm-rd-stat-n, a.clcm-rd-stat:focus .clcm-rd-stat-n { color:var(--clcm-gold-text, var(--clcm-sage-ink)); }
.clcm-rd-stat-hint--good { color:var(--clcm-sage-ink); }
.clcm-rd-stat-hint--warn { color:var(--clcm-gold-ink); }
.clcm-rd-stat-hint--alert { color:var(--clcm-danger); }

/* ═══ HOME'S TWO COLUMNS ═════════════════════════════════════════════════════════
   The mockup's row under the KPI strip: the schedule takes the room it needs and the
   activity column takes what is left, both wrapping to one column when the window is
   narrow (mockups/Waymark Coach v2.dc.html:173-174). flex rather than grid because
   the two basis values differ and the wrap has to happen on content, not a breakpoint. */
.clcm-rd-home { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; }
.clcm-rd-home-main { flex:999 1 560px; min-width:0; }
.clcm-rd-home-side { flex:1 1 300px; min-width:0; }
.clcm-rd-home-side > .clcm-rd-card { margin-bottom:16px; }

/* ═══ HOME'S DAY SCHEDULE ════════════════════════════════════════════════════════
   The mockup's left column on Home: an hour grid with the day's sessions placed on
   it by time (mockups/Waymark Coach v2.dc.html:184-196). Geometry is the mockup's —
   34px to the hour, the first line 14px down, a 50px right-aligned time gutter and
   blocks starting at 64px — but the WINDOW is computed from the day rather than
   fixed at 8am-9pm, because a real 7am session would otherwise be drawn above the
   top of the grid where nobody would see it. */
.clcm-rd-sched { position:relative; padding:14px 12px 0 0; }
.clcm-rd-sched-hr { position:absolute; left:0; right:0; display:flex; align-items:flex-start; gap:8px; pointer-events:none; }
/* The hour label reads --clcm-text-muted, NOT the faint tier. clcm-admin.css line 61 records
   the decision and the measurement behind it: the lighter tier is 3.10 on white, 3.02 on the
   tint and 2.82 on cream, AA-failing on every ground this product has, which is why
   --clcm-text-faint was never defined. This rule had the hex pasted in anyway and measured
   exactly that 3.10 on the schedule's white ground, twelve labels down the Home screen. */
.clcm-rd-sched-hr > b { flex:none; width:50px; text-align:right; font-size:11.5px; font-weight:600;
  color:var(--clcm-text-muted, #4C5566); white-space:nowrap; transform:translateY(-7px); }
.clcm-rd-sched-hr > i { flex:1; height:1px; background:rgba(var(--clcm-navy-rgb),.07); display:block; }
.clcm-rd-sched-now { position:absolute; left:52px; right:0; display:flex; align-items:center; z-index:3; pointer-events:none; }
.clcm-rd-sched-now > s { width:8px; height:8px; border-radius:50%; background:var(--clcm-gold); margin-left:-4px; }
.clcm-rd-sched-now > i { flex:1; height:1.5px; background:var(--clcm-gold); display:block; }
.clcm-rd-sched-now > b { position:absolute; left:-50px; width:46px; text-align:right; font-size:11px;
  font-weight:800; color:var(--clcm-gold-ink); background:var(--clcm-white); }
.clcm-rd-sess { position:absolute; left:64px; right:12px; border:0; border-radius:6px; padding:0 10px;
  display:flex; align-items:center; gap:8px; overflow:hidden; z-index:2; text-decoration:none; }
.clcm-rd-sess:hover, .clcm-rd-sess:focus { text-decoration:none; filter:brightness(.97); }
.clcm-rd-sess-t { font-size:12px; font-weight:800; white-space:nowrap; opacity:.92; }
.clcm-rd-sess-n { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clcm-rd-sess-k { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.86; }
/* The four states the mockup draws, and the one it does not: a session nobody attended. */
.clcm-rd-sess--next { background:var(--clcm-navy); }
.clcm-rd-sess--next, .clcm-rd-sess--next:link, .clcm-rd-sess--next:visited, .clcm-rd-sess--next:hover { color:#fff; }
.clcm-rd-sess--soon { background:#E8ECF1; }
.clcm-rd-sess--soon, .clcm-rd-sess--soon:link, .clcm-rd-sess--soon:visited, .clcm-rd-sess--soon:hover { color:var(--clcm-navy); }
.clcm-rd-sess--done { background:#F1EEE8; }
.clcm-rd-sess--done, .clcm-rd-sess--done:link, .clcm-rd-sess--done:visited, .clcm-rd-sess--done:hover { color:#5A6478; }
.clcm-rd-sess--ask { background:#FBF7EE; box-shadow:inset 0 0 0 1px #EADFC6; }
.clcm-rd-sess--ask, .clcm-rd-sess--ask:link, .clcm-rd-sess--ask:visited, .clcm-rd-sess--ask:hover { color:var(--clcm-gold-ink); }
.clcm-rd-sched-none { position:absolute; left:64px; top:40%; font-size:13.5px; color:var(--clcm-text-muted, #5A6478); }
.clcm-rd-daynav { margin-left:auto; display:flex; align-items:center; gap:4px; }
.clcm-rd-daynav a { display:grid; place-items:center; height:28px; min-width:28px; padding:0 8px;
  border:1px solid #DDD8CE; border-radius:6px; background:var(--clcm-white); color:var(--clcm-navy);
  font-size:12.5px; font-weight:700; text-decoration:none; }
.clcm-rd-daynav a:hover, .clcm-rd-daynav a:focus { background:#FBFAF7; color:var(--clcm-navy); text-decoration:none; }

@media (max-width:860px) {
  .clcm-rd-field { flex-direction:column; gap:8px; }
  .clcm-rd-field-c { width:100%; }
  .clcm-rd-stat { border-right:0; border-bottom:1px solid rgba(var(--clcm-navy-rgb),.08); }
}

/* ── the portal's next-session hero ──────────────────────────────────────────
 *
 * The one element of the redesigned dashboard the portal had no equivalent for: the NEXT session,
 * large, on navy, with the Join button as the obvious thing to press. Later sessions keep the
 * existing .clcm-appt-card row — a hero per session would be no hierarchy at all.
 *
 * Ink on the gold button is set in PHP from $clcm_ptok['on-gold'], exactly as the To-pay badge
 * above it does: a tenant may save a pale gold, and the readable ink for it is computed there and
 * cannot be expressed here. Everything else is tokens, so a branded org recolours the whole block.
 */
/* position+overflow so the corner mark can sit half off the card, as the mockup draws it. */
.clcm-rd-hero { position:relative; overflow:hidden;
  border-radius:var(--clcm-radius-2xl); padding:20px 22px; margin:0 0 14px;
  background:linear-gradient(135deg, var(--clcm-navy) 0%, var(--clcm-navy-mid, #1C3A56) 100%);
  color:var(--clcm-white); display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; }
.clcm-rd-hero-when { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--clcm-on-navy-muted, rgba(255,255,255,.82)); margin:0 0 6px; }
.clcm-rd-hero-what { font-family:var(--clcm-font-serif, 'Lora', Georgia, serif); font-weight:600; font-size:22px;
  line-height:1.2; margin:0 0 4px; }
.clcm-rd-hero-sub { font-size:13.5px; color:var(--clcm-on-navy-muted, rgba(255,255,255,.82)); margin:0; }
.clcm-rd-hero-cta { display:inline-flex; align-items:center; gap:8px; padding:11px 20px;
  border-radius:var(--clcm-radius-xl); background:var(--clcm-gold); font-weight:700; font-size:14px;
  text-decoration:none; white-space:nowrap;
  transition:transform var(--clcm-dur-press) var(--clcm-ease), box-shadow var(--clcm-dur-hover) var(--clcm-ease); }
.clcm-rd-hero-cta:hover { box-shadow:0 6px 18px rgba(var(--clcm-gold-rgb),.45); }
.clcm-rd-hero-cta:active { transform:scale(.97); }
.clcm-rd-hero-cta:focus-visible { outline:2px solid var(--clcm-white); outline-offset:2px; }
@media (max-width:560px) {
  .clcm-rd-hero { flex-direction:column; align-items:stretch; }
  .clcm-rd-hero-cta { justify-content:center; }
  .clcm-rd-hero-what { font-size:19px; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   v2.266.0 — THE PORTAL SHELL: a rail on a desktop, a tab bar on a phone
   ════════════════════════════════════════════════════════════════════════════════════════

   The built portal had ONE navigation at every width: a horizontal strip of pills that scrolled
   sideways. The mockup has two, and they are different things rather than one thing reflowed —
   a 232px rail beside the content on a desktop, and five fixed tabs along the bottom of a phone
   with everything else behind "More". A client on a phone was swiping a row of eleven to reach
   Files; now Files is two taps and never moves.

   ONE BREAKPOINT, 860px, and the two navigations are display:none at each other's width, so only
   one is ever in the accessibility tree. That is also why the markup is duplicated rather than
   re-ordered: the mockup's own isDesk/isPhone branches are separate for the same reason, and a
   single list bent into both shapes would compromise at both.

   Measured off the mockup, not approximated: rail 232px / padding 16px 12px / gap 2px; row 36px
   at 0 10px with a 9px radius and a 14px label; the open row a WHITE card with a navy hairline
   and a 1px shadow; glyphs 18px, gold when open. */

@media (min-width: 861px) {
  /* The rail and the content sit side by side.
     GRID ON THE EXISTING CONTAINER, not a new wrapper. .clcm-portal-nav-wrap and
     .clcm-portal-body are already siblings, and the body's closing </div> is some two thousand
     lines below among nested modals — introducing a wrapper means finding that exact tag, which
     is a silent-breakage risk for no gain. The header spans both columns; the crop backdrop is
     position:fixed and only needs a cell to belong to. */
  .clcm-portal { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
  .clcm-portal-header, .clcm-crop-backdrop { grid-column: 1 / -1; }
  /* The two portal FRAGMENTS -- the paused-workspace notice and the coach's own view of /portal/ --
     put a .clcm-portal-section straight inside .clcm-portal with no rail beside it, so grid
     auto-placement dropped it into column 1 and squeezed its row of buttons into 232px. The real
     portal keeps every section inside .clcm-portal-body, so this child combinator reaches those
     two fragments and nothing else. Drop it and both pages narrow to the rail width again. */
  .clcm-portal > .clcm-portal-section { grid-column: 1 / -1; }
  .clcm-portal-nav-wrap { grid-column: 1; position: sticky; top: 0; }
  .clcm-portal-nav {
    display: flex; flex-direction: column; gap: 2px; padding: 16px 12px;
    border-right: 1px solid rgba(var(--clcm-navy-rgb), .06);
    overflow: visible;
    /* The horizontal bar was a white CAPSULE — a 999px radius, a hairline, a drop shadow and
       justify/align centre, all of which make sense for a floating pill row and none of which
       do for a rail. Undone explicitly rather than hoped to be overridden: the radius alone
       drew an oval around the whole column. */
    background: transparent; box-shadow: none;
    border-top: 0; border-left: 0; border-bottom: 0; border-radius: 0;
    justify-content: flex-start; align-items: stretch;
    margin-bottom: 0;
  }
  .clcm-portal-nav-link {
    display: flex; align-items: center; gap: 10px;
    /* height AND padding, both: the legacy rule sets `padding: 10px clamp(...)`, which on a
       36px box makes a 44px row. The shorthand has to be overridden, not just the height. */
    height: 36px; min-height: 36px; padding: 0 10px; border-radius: 9px;
    /* The legacy rail was uppercase, tracked and clamped down to .62rem so twelve tabs could
       share one horizontal row. None of that applies to a vertical rail, and the mockup sets a
       plain 14px sentence-case label — so all three are undone here rather than inherited. */
    font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--clcm-text-muted, #5A6478);
    white-space: nowrap; flex: 0 0 auto;
  }
  /* :not(.clcm-rd-tab-n) IS THE RULE, NOT A REFINEMENT. The attention count beside Actions is
     also a <span>, so a bare `> span` gave the badge `flex: 1 1 auto` too and it grew to eat
     every pixel left in the rail — a 9px "3" sitting at the left end of a 150px gold slab.
     Found 2026-10-22 in a screenshot taken for the marketing page, which is the only reason
     anybody looked: it is on every client's portal, and a count only appears when something
     actually needs them, so the broken state is the one a client sees on their worst day. */
  .clcm-portal-nav-link > span:not(.clcm-rd-tab-n) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .clcm-portal-nav-link > .clcm-rd-tab-n { flex: 0 0 auto; }
  .clcm-portal-nav-link .ph { font-size: 18px; line-height: 1; flex: 0 0 auto; color: var(--clcm-text-muted, #5A6478); }
  .clcm-portal-nav-link:hover { background: rgba(var(--clcm-navy-rgb), .045); color: var(--clcm-navy); }
  .clcm-portal-nav-link.active {
    background: #fff; color: var(--clcm-navy); font-weight: 800;
    border: 1px solid rgba(var(--clcm-navy-rgb), .1);
    box-shadow: 0 1px 2px rgba(var(--clcm-navy-rgb), .06);
    padding: 0 9px;   /* the border takes the other pixel, so the label does not shift */
  }
  .clcm-portal-nav-link.active .ph { color: var(--clcm-gold-ink); }
  .clcm-portal-body { grid-column: 2; min-width: 0; padding-left: 22px; }
  /* The phone bar and its sheet do not exist at this width. */
  .clcm-portal-phonenav { display: none; }
}

@media (max-width: 860px) {
  /* The rail is replaced, not reflowed. */
  .clcm-portal-nav-wrap { display: none; }

  .clcm-portal-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: stretch;
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid rgba(var(--clcm-navy-rgb), .08);
    /* The mockup's 30px of bottom padding is the home-indicator strip. On a real device that is
       what env() reports, and on one without it the fallback is the ordinary 8px. */
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px);
  }
  .clcm-portal-tab {
    flex: 1 1 0; min-width: 0; height: 48px; border: 0; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--clcm-text-muted, #5A6478); text-decoration: none; font-family: var(--clcm-font-body, 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif);
  }
  .clcm-portal-tab .ph { font-size: 22px; line-height: 1; }
  .clcm-portal-tab > span {
    font-size: 10.5px; font-weight: 800; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .clcm-portal-tab.active { color: var(--clcm-navy); }
  .clcm-portal-tab.active .ph { color: var(--clcm-gold-ink); }

  /* Nothing may hide behind the bar: 48px of tab + its padding, plus the safe area.
     scroll-margin-top is the SAME problem at the other end, added with the phone app bar: the
     skip link targets #clcm-portal-main, and a fixed bar covers the top 50px of whatever an
     anchor jump scrolls into view — so the first thing a keyboard user landed on sat behind it. */
  .clcm-portal-body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    scroll-margin-top: calc(58px + env(safe-area-inset-top, 0px)); }

  .clcm-portal-scrim {
    position: fixed; inset: 0; z-index: 41;
    /* TENANT-AWARE, like every other scrim in this file. This was a hard-coded triplet of
       Waymark's own navy-dark on a CLIENT-FACING surface: the wash behind the portal's phone
       "More" sheet. tokens_for() emits navy-rgb per org, and .clcm-cmd-scrim and this sheet's own
       box-shadow both already use it. No surface is exempt. */
    background: rgba(var(--clcm-navy-rgb, 11, 29, 48), .35);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .clcm-portal-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 42;
    background: #fff; border-radius: 24px 24px 0 0;
    padding: 10px 14px calc(34px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 40px rgba(var(--clcm-navy-rgb), .18);
  }
  .clcm-portal-sheet-grip { display: flex; justify-content: center; padding-bottom: 10px; }
  .clcm-portal-sheet-grip span { width: 38px; height: 5px; border-radius: 5px; background: var(--clcm-border); }
  .clcm-portal-sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .clcm-portal-sheet-item {
    height: 76px; border-radius: 14px; border: 1px solid rgba(var(--clcm-navy-rgb), .1);
    background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; text-decoration: none; text-align: center; padding: 0 6px;
  }
  .clcm-portal-sheet-item .ph { font-size: 22px; color: var(--clcm-gold-ink); }
  .clcm-portal-sheet-item img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
  .clcm-portal-sheet-item > span {
    font-size: 12.5px; font-weight: 700; color: var(--clcm-navy);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
  }
}

/* x-cloak keeps the sheet and its scrim out of sight until Alpine has taken over; without it both
   flash at full size on every page load before the component initialises. */
.clcm-portal-phonenav [x-cloak] { display: none !important; }

/* ── the primary action is NAVY, as the mockup has it ──────────────────────────
 *
 * Every primary button in the design is a navy fill with white text and no border — the page
 * action, "Join session", "Save". This product's .clcm-btn-primary was gold with navy text and a
 * gold glow, which made the one loud control on a screen compete with the accent rather than sit
 * under it.
 *
 * STILL THE TENANT'S COLOUR, just the other one: var(--clcm-navy) is the org's primary exactly as
 * var(--clcm-gold) was its accent, so a branded workspace gets a branded button. Nothing here is a
 * literal.
 *
 * AN OVERRIDE, NOT AN EDIT. The rule it replaces lives in admin/css/clcm-admin.css, which is byte-
 * pinned against v2.239.0; editing it there would have to be declared as a change to an existing
 * rule, and that pin has no vocabulary for one. This sheet loads after it and is not pinned, which
 * is the same route the portal rail's overrides take.
 */
.clcm-btn-primary {
  background: var(--clcm-navy);
  color: var(--clcm-on-navy-strong, #fff);
  border-color: transparent;
}
/* ── AND THE SAME BUTTON AS A LINK, which the rule above cannot reach ─────────────
 *
 * admin.css restates the primary button's label colour for every link state:
 *
 *     a.clcm-btn-primary:link, :visited, :hover, :active, :focus
 *         { color: var(--clcm-on-gold, var(--clcm-navy)); }
 *
 * That selector is (0,2,1). The rule above is (0,1,0) and its :hover twin is (0,2,0), so BOTH
 * lose to it on `color` no matter which sheet loads later — specificity is decided before order.
 * The redesign therefore won the navy `background` and lost the white label.
 *
 * And the colour it lost to is not even gold: --clcm-on-gold is defined in no stylesheet in this
 * plugin, and tenant tokens only define it when an org has changed its colours, so for Waymark's
 * own organisation the var() fell through to --clcm-navy. The result was a navy label on a navy
 * fill — contrast 1.00:1, an invisible button — on every anchor primary in the product: Add
 * Client on the coach Home, Create Course, Email support, and the page action on several more.
 * <button class="clcm-btn-primary"> was fine, which is why this hid for a release: the two look
 * identical in the markup and only one of them was broken.
 *
 * Matched at (0,2,1) and listed in the same state order, so this ties on specificity and wins on
 * order — this sheet is enqueued with clcm-admin as a dependency and always loads after it.
 * Found by an asset-delivery audit, 2026-10-13.
 */
a.clcm-btn-primary:link,
a.clcm-btn-primary:visited,
a.clcm-btn-primary:hover,
a.clcm-btn-primary:active,
a.clcm-btn-primary:focus { color: var(--clcm-on-navy-strong, #fff); }
.clcm-btn-primary:hover {
  background: var(--clcm-navy-mid, var(--clcm-navy));
  color: var(--clcm-on-navy-strong, #fff);
  box-shadow: 0 6px 16px rgba(var(--clcm-navy-rgb), .22);
}
.clcm-btn-primary:active { transform: scale(.97); }
/* The gold glow belonged to the gold fill; on navy it reads as a smear rather than a lift. */
.clcm-btn-primary:focus-visible { outline: 2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════════
   THE MOCKUP'S MEASUREMENTS
   ───────────────────────────────────────────────────────────────────────────────
   Jose, 2026-10-13: "Make sure the sizes are in line with mock up as well not just
   the visual." A measurement audit compared every number in the approved mockups
   against what the browser actually receives and found 106 differences; these are
   the ones on components that exist. Every value below is quoted from
   design_handoff_waymark_redesign/mockups/Waymark Coach v2.dc.html.

   WHY HERE AND NOT IN clcm-admin.css: that sheet is byte-pinned against v2.239.0
   (tests/test-tenant-colours-v2240-css.php) so that Waymark's own chrome cannot
   drift unnoticed. This file is enqueued WITH clcm-admin as a dependency, so it
   loads after and wins at equal specificity — the metrics change without the pin
   having to be relaxed, and reverting is deleting one block.

   box-sizing is set per component rather than globally: the mockup has a global
   *{box-sizing:border-box} and this product does not, so a height here would
   otherwise be a height PLUS padding PLUS border.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── buttons: 32px, 0 12px, radius 7, weight 700 (lines 436, 446, 496, 591-593) ── */
.clcm-wrap .clcm-btn, #clcm-coach-portal .clcm-btn {
  box-sizing: border-box; height: 32px; padding: 0 12px; border-radius: 9px;
  font-weight: 700; line-height: 1; display: inline-flex; align-items: center; gap: 6px;
}
.clcm-wrap .clcm-btn-sm, #clcm-coach-portal .clcm-btn-sm { height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12px; }
.clcm-wrap .clcm-btn-secondary, #clcm-coach-portal .clcm-btn-secondary { border-width: 1px; }
/* An icon-only row action is a 26px square, not a pill (line 571). */
.clcm-wrap .clcm-rd-table .row-actions { flex-wrap: nowrap; }
.clcm-wrap .clcm-rd-table .row-actions .clcm-btn-icon { width: 26px; height: 26px; padding: 0; border-radius: 6px; }

/* ── fields: 34px, 0 10px, 1px border, radius 7 (line 339 and the Settings rows) ── */
.clcm-wrap .clcm-input, .clcm-wrap .clcm-select {
  box-sizing: border-box; height: 34px; padding: 0 10px; border-width: 1px; border-radius: 7px;
}
.clcm-wrap .clcm-textarea { padding: 8px 10px; border-width: 1px; border-radius: 7px; }
/* The list filter is the shorter one: 30px (line 543). */
.clcm-wrap .clcm-rd-bar .clcm-search-input, .clcm-wrap .clcm-rd-bar .clcm-input {
  box-sizing: border-box; height: 30px; padding: 0 9px;
}
.clcm-wrap .clcm-rd-bar .clcm-search-input[style], .clcm-wrap .clcm-rd-bar input.clcm-search-input {
  padding-left: 32px;   /* the magnifier still needs its room */
}

/* ── the toolbar strip: 48px, left-packed, not space-between (lines 542, 668) ── */
.clcm-wrap .clcm-rd-bar {
  /* justify-content IS the left-packing. This block set min-height, padding and gap and never
     touched it, so the base rule's space-between still won: every coach list page rendered the row
     count hard left and the filter hard right with a void between — while the gap: 8px beside it
     was inert, because with free space a gap never shows. */
  justify-content: flex-start;
  /* VERTICAL PADDING, because min-height alone is not breathing room. With `padding:0` a bar
     holding only text was fine — min-height centred it in 48px — but a bar holding a 40px filter
     input was 48px of which the control was 40, leaving it 4px clear of the tab underline above
     and the table header below. Reported on Clients and the Library, 2026-10-16; measured gap to
     the tab bar was 0. Text-only bars are unchanged: min-height still wins for them. */
  box-sizing: border-box; min-height: 48px; height: auto; padding: 10px 12px 10px 16px; gap: 8px;
}
.clcm-wrap .clcm-rd-card > .clcm-rd-bar { min-height: 46px; }   /* the card header (line 175) */

/* ── cards and panels are 10px, not 14 (lines 160, 174, 268, 339, 533) ── */
.clcm-wrap .clcm-rd-card, .clcm-wrap .clcm-rd-panel, #clcm-coach-portal .clcm-rd-card { border-radius: 10px; }
.clcm-wrap .clcm-modal { border-radius: 12px; }
.clcm-wrap .clcm-modal-body { padding: 18px; }
.clcm-wrap .clcm-form-grid { gap: 16px 14px; }

/* ── headings and labels ── */
.clcm-wrap .clcm-rd-count { font-size: 14px; }
.clcm-wrap .clcm-rd-panel-head h2, .clcm-wrap .clcm-rd-panel-head h3 {
  font-family: var(--clcm-font-sans, 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif); font-size: 14px; font-weight: 700;
}
.clcm-wrap .clcm-rd-sub { max-width: 680px; }
/* Sentence case, no tracking — the mockup's field labels are plain 12.5px/700 navy. */
.clcm-wrap .clcm-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; }

/* ── table vocabulary (lines 549, 555-556, 563) ── */
.clcm-wrap .clcm-rd-table thead th { letter-spacing: normal; }
/* THE HEADING MOVES WITH ITS OWN COLUMN. The base pairs them at 16px; this density block tightened
   the CELL to 12px and left the heading at 16px, so from the second column on the heading sat 4px
   to the right of the data under it — measured on a render, 2026-10-14: heading text at x=282.28,
   cell text at x=278.28. Column one looked right only because a separate first-child rule gives
   the cell 16px back. The mockup pairs the two paddings in every drawn table. */
.clcm-wrap .clcm-rd-table thead th { padding: 9px 12px; }
.clcm-wrap .clcm-rd-table tbody td { padding: 9px 12px; }
.clcm-wrap .clcm-rd-table tbody td:first-child,
.clcm-wrap .clcm-rd-table thead th:first-child { padding-left: 16px; }
.clcm-wrap .clcm-rd-disc { width: 26px; height: 26px; font-size: 10.5px; letter-spacing: 0; }
.clcm-wrap .clcm-rd-pill { box-sizing: border-box; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; }
.clcm-wrap .clcm-rd-pill::before { width: 5px; height: 5px; }

/* ── tabs: the underline is exactly the label's width, and they sit 20px apart ── */
.clcm-wrap .clcm-rd-tabs { gap: 20px; }
.clcm-wrap .clcm-rd-tabs .clcm-rd-tab, .clcm-wrap .clcm-rd-tabs .clcm-tab { padding-left: 0; padding-right: 0; }
.clcm-wrap .clcm-rd-tab-n { padding: 1px 6px; }

/* ── Home: one rhythm of 14px, and the side column's own basis ── */
.clcm-wrap .clcm-rd-stats { margin-bottom: 14px; }
.clcm-wrap .clcm-rd-home { gap: 14px; }
.clcm-wrap .clcm-rd-home-side { flex: 1 1 320px; }
.clcm-wrap .clcm-rd-home-main > .clcm-rd-card { margin-bottom: 14px; }
.clcm-wrap .clcm-rd-home-side > .clcm-rd-card { margin-bottom: 14px; }
.clcm-wrap .clcm-rd-stat-n { margin: 0; }
.clcm-wrap .clcm-rd-sched-none { top: 180px; margin: 0; }

/* ── course cards (lines 745-760) ── */
.clcm-wrap .clcm-course-grid { gap: 14px; }
.clcm-wrap .clcm-course-card { border-radius: 10px; box-shadow: none; }
.clcm-wrap .clcm-course-thumb { height: 118px; }
.clcm-wrap .clcm-course-body { padding: 14px 14px 12px; }
.clcm-wrap .clcm-course-title { font-weight: 600; line-height: 1.25; }

/* ── the shell's own spacing (Waymark Coach v2.dc.html:36, screen wrapper) ──────
   The mockup's page body is ONE flex column with gap:14px, so the title block and
   the first content block sit 14px apart. Ours stacked .clcm-rd-head's 14px margin
   on top of .clcm-content's 22px padding and came to 36px — two and a half times
   the designed gap, on every screen. */
.clcm-wrap .clcm-rd-head + .clcm-content,
.clcm-coach-admin .clcm-wrap .clcm-content { padding-top: 0 !important; }
.clcm-wrap .clcm-rd-head { margin-bottom: 14px; }
.clcm-coach-admin .clcm-wrap { padding-bottom: 28px; }

/* ── Home's activity rows (lines 212-224) ──────────────────────────────────────
   The mockup leads each row with a 28px initials disc, not an 8px dot, and sets the
   row at 10px 14px with an 11px gap. */
.clcm-wrap .clcm-activity-item { padding: 10px 14px; gap: 11px; line-height: 1.35; }
/* The activity row's circle is the CLIENT's avatar now, not a status dot — it carries their
   initials, so it needs the disc's own geometry rather than a resized dot. The old rule grew
   an 8px dot to 28px and gave it nothing to hold, which is what shipped as a blank blob.
   .clcm-rd-disc supplies the size, the radius and the centring; this only stops the flex row
   squashing it and lines it up with the first line of text. */
.clcm-wrap .clcm-activity-disc { flex: 0 0 auto; margin-top: 0; }

/* ── the schedule closes 14px under its last hour line, as the mockup does ───── */
.clcm-wrap .clcm-rd-sched { padding-bottom: 0; }

/* ═══ THE CLIENT PORTAL ════════════════════════════════════════════════════════
   From "Waymark Client Portal.dc.html" and "Portal App.dc.html". The portal's cards
   were built at desktop-app scale — 28px padding, a 23px underlined section title —
   where the mockup is a tighter 16px card with a 17px Lora title and no divider. */
.clcm-portal-section, .clcm-portal-standalone .clcm-portal-section { padding: 16px; border-radius: 16px; }
.clcm-portal-standalone .clcm-section-title {
  font-family: var(--clcm-font-serif, 'Lora', Georgia, serif); font-size: 17px; font-weight: 600;
  margin: 0; padding-bottom: 0; border-bottom: 0;
}
/* THE SAME 17px INSIDE THE PORTAL SHELL, which is where the mockup actually draws these cards.
   The rule above reaches only .clcm-portal-standalone, and the shell is not standalone — so
   "Your Plan", "Action Items", "Continue your course", "About your coach" and "Quick journal"
   kept clcm-public.css's 23px, well outside the drawing's range (17px, with 16px as its
   secondary). Measured on a render, 2026-10-14. Size, family and weight only: the shell's cards
   keep their own margin and divider, which the mockup does not ask to remove. */
.clcm-portal .clcm-section-title {
  font-family: var(--clcm-font-serif, 'Lora', Georgia, serif); font-size: 17px; font-weight: 600;
}
.clcm-portal-grid, .clcm-portal-standalone .clcm-portal-grid { gap: 16px; }
.clcm-portal-standalone .clcm-rd-hero-cta, .clcm-rd-hero-cta {
  box-sizing: border-box; height: 44px; padding: 0 18px; border-radius: 12px;
  font-size: 14.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px;
}

/* ═══ THE PORTAL HEADER STANDS ON THE PAGE, NOT ON A NAVY CARD ═══════════════════
   Portal App.dc.html:64-70. The mockup opens the portal with "Welcome back," in
   Parisienne over the client's name in Lora, both on the page's own cream — and the
   navy does not disappear, it MOVES: it is the next-session hero card below
   (.clcm-rd-hero, which already paints that gradient).

   WHY THIS ORDER MATTERS. clcm-public.css:143 records that Parisienne was dropped
   from this line because "at this size, on navy, it was genuinely hard to read — and
   it is the first line a client sees". That judgement was right, and it is about the
   GROUND. Restoring the script face without moving the greeting off the navy would
   have walked straight back into it. The ground moves first; the face follows.

   --clcm-gold-ink is used rather than the mockup's #A07C3A: clcm-public.css:28 records
   its measured contrast on cream as 4.90, which clears AA. The mockup's lighter tone
   is not measured anywhere in this product.

   In clcm-redesign.css because clcm-public.css is byte-pinned against v2.239.0; this
   sheet is enqueued with clcm-public as a dependency and therefore wins. */
.clcm-portal .clcm-portal-header {
  background: none; box-shadow: none; border-radius: 0; margin-bottom: 18px;
}
.clcm-portal .clcm-portal-header-inner { padding: 4px 0 0; gap: 16px; }
.clcm-portal .clcm-portal-label {
  font-family: 'Parisienne', cursive; font-weight: 400; font-size: 30px; line-height: 1;
  letter-spacing: 0; color: var(--clcm-gold-ink); margin: 0;
}
.clcm-portal .clcm-portal-name {
  color: var(--clcm-navy); font-size: 30px; line-height: 1.1; margin-top: 2px;
}
.clcm-portal .clcm-portal-welcome { color: var(--clcm-text-muted, #5A6478); }
/* The avatar badge and the coach chip were drawn to sit on navy. */
/* THE FLIP RE-INKED ONLY THE BORDER. clcm-public.css also gives this disc a 25%-gold background
   and a CREAM initial, both measured against the navy header this redesign removed — so a client
   with no photo (the default) read their own initial at 1.19:1 on pale beige. --clcm-gold-ink is
   defined by BOTH hosts, is emitted for every tenant by tenant_tokens(), and clcm-public.css:28
   records its measured 4.62:1 on the 20%-gold chip, which is the closest documented ground to this
   disc. The background shorthand resets background-image, but an uploaded photo sets that inline
   per-longhand and still wins, so photos are unaffected. */
.clcm-portal .clcm-portal-avatar { border-color: var(--clcm-border, #DDD8CE);
  background: rgba(var(--clcm-gold-text-rgb, var(--clcm-gold-rgb)),.18); color: var(--clcm-gold-ink, #83662D); }
.clcm-portal .clcm-portal-coach { background: var(--clcm-white); border: 1px solid var(--clcm-border, #DDD8CE); }
.clcm-portal .clcm-portal-coach, .clcm-portal .clcm-portal-coach * { color: var(--clcm-navy); }
/* THE PAINTED STATE HAS TO BE A SHAPE, NOT A SLAB. Jose, 2026-10-18: clicking Log out in the
   client portal "looks unpolished". Three faults in one declaration, which used to read
   `:hover, :focus { background:#FBFAF7 }`:
     1. no radius — and the hit area is `padding:14px 10px` with a negative margin
        (clcm-public.css:1698), so the paint was a ~48px SQUARE slab around a 12px word,
        reading as a stray tooltip rather than a control;
     2. `:focus`, not `:focus-visible` — so a MOUSE click left the slab stuck on screen, which
        is precisely the moment Jose saw it;
     3. a hard-coded near-white, on a surface a tenant can re-ground. Every other portal
        surface asks the palette.
   The hit area is deliberate (clcm-public.css:1694 records it) and is untouched: only the
   painted box is pulled in, so the target still measures 44px while the shape reads as a pill. */
.clcm-portal .clcm-portal-logout {
  border-radius: 999px;
  transition: background .14s cubic-bezier(.2,.8,.2,1);
}
.clcm-portal .clcm-portal-logout:hover,
.clcm-portal .clcm-portal-logout:focus-visible {
  background: var(--clcm-cream, #F7F4EE);
  background-clip: padding-box;
}
.clcm-portal .clcm-portal-logout:focus:not(:focus-visible) { background: transparent; }

/* ═══ THE RAIL'S SEARCH CONTROL AND THE ⌘K PALETTE ═══════════════════════════════
   The control's measurements are the mockup's (Waymark Coach v2.dc.html:45): 32px
   tall, 4px above and 10px below, 0 9px inside, a 1px #DDD8CE hairline at radius 7,
   a 15px magnifier and the hint at 11px/700. Its absence was the rail's largest
   measured gap — the first nav row sat 40px higher than the approved design. */
.clcm-cp-search {
  box-sizing: border-box; flex: none; display: flex; align-items: center; gap: 8px;
  height: 32px; margin: 4px 0 10px; padding: 0 9px; width: 100%;
  border: 1px solid #DDD8CE; border-radius: 7px; background: var(--clcm-white);
  color: var(--clcm-text-muted, #5A6478); font-family: var(--clcm-font-body, 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif); font-size: 13px;
  cursor: pointer; text-align: left;
}
.clcm-cp-search:hover { background: #FBFAF7; }
.clcm-cp-search .ph { font-size: 15px; }
.clcm-cp-search-l { flex: 1; }
.clcm-cp-search-k { font-size: 11px; font-weight: 700; color: var(--clcm-text-muted, #5A6478); }

/* .clcm-cmd-row[hidden] TOO, or typing in the palette narrows nothing. An author-origin
   `.clcm-cmd-row{display:flex}` beats the browser's own [hidden]{display:none}, and
   clcm-command.js filters purely by setting `r.hidden` — so every rail destination stayed on
   screen while "Nothing matches that." appeared underneath the full list. clcm-admin.css:2050
   documents this exact trap in its own words for .clcm-drop-chosen; it was remembered there and
   forgotten here. [hidden] on the class is (0,2,0) against (0,1,0), so it wins regardless of order. */
.clcm-cmd[hidden], .clcm-cmd-row[hidden] { display: none; }
.clcm-cmd { position: fixed; inset: 0; z-index: 100000; display: flex;
  align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.clcm-cmd-scrim { position: absolute; inset: 0; background: rgba(var(--clcm-navy-rgb),.28); }
.clcm-cmd-box { position: relative; width: min(560px, 100%); max-height: 70vh; display: flex;
  flex-direction: column; background: var(--clcm-white); border: 1px solid rgba(var(--clcm-navy-rgb),.1);
  border-radius: 12px; box-shadow: 0 24px 60px rgba(var(--clcm-navy-rgb),.28); overflow: hidden; }
.clcm-cmd-top { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 48px;
  border-bottom: 1px solid rgba(var(--clcm-navy-rgb),.08); }
.clcm-cmd-top .ph { font-size: 17px; color: var(--clcm-text-muted, #5A6478); }
.clcm-cmd-q { flex: 1; border: 0; outline: 0; background: none; font-family: var(--clcm-font-body, 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-size: 15px; color: var(--clcm-navy); padding: 0; }
.clcm-cmd-esc { height: 22px; padding: 0 7px; border: 1px solid #DDD8CE; border-radius: 5px;
  background: var(--clcm-white); color: var(--clcm-text-muted, #5A6478); font-size: 11px;
  font-weight: 700; cursor: pointer; }
.clcm-cmd-list { overflow-y: auto; padding: 6px; }
.clcm-cmd-head { margin: 6px 8px 4px; font-size: 11.5px; font-weight: 700;
  color: var(--clcm-text-muted, #5A6478); }
.clcm-cmd-row { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px;
  border-radius: 7px; text-decoration: none; color: var(--clcm-navy); font-size: 13.5px; }
.clcm-cmd-row:hover, .clcm-cmd-row.is-on { background: #F7F4EE; color: var(--clcm-navy); text-decoration: none; }
.clcm-cmd-row .ph { font-size: 17px; color: var(--clcm-text-muted, #5A6478); }
.clcm-cmd-row.is-on .ph { color: var(--clcm-navy); }
.clcm-cmd-none { margin: 10px 8px; font-size: 13.5px; color: var(--clcm-text-muted, #5A6478); }
/* The page behind a modal must not scroll under it. */
html.clcm-cmd-on, html.clcm-cmd-on body { overflow: hidden; }

/* ═══ THE INBOX ══════════════════════════════════════════════════════════════════
   Two panes: a 320px list and the conversation (Waymark Coach v2.dc.html:666-667).
   The list's own rows are 12px 14px with a 32px disc; the thread pane sits on the
   mockup's #FDFCFA so the bubbles read against something slightly off-white. */
.clcm-ib { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  min-height: 60vh; overflow: hidden; }
.clcm-ib-list { border-right: 1px solid rgba(var(--clcm-navy-rgb), .08); display: flex;
  flex-direction: column; min-width: 0; }
.clcm-ib-filters { margin-left: auto; display: flex; gap: 2px; padding: 2px;
  background: var(--clcm-cream); border-radius: 7px; }
.clcm-ib-filter { height: 24px; display: inline-flex; align-items: center; padding: 0 9px;
  border-radius: 5px; font-size: 12.5px; font-weight: 700; text-decoration: none;
  color: var(--clcm-text-muted, #5A6478); }
.clcm-ib-filter.is-on { background: var(--clcm-white); color: var(--clcm-navy);
  box-shadow: 0 1px 2px rgba(var(--clcm-navy-rgb), .08); }
.clcm-ib-filter:hover, .clcm-ib-filter:focus { color: var(--clcm-navy); text-decoration: none; }
.clcm-ib-row { display: flex; gap: 10px; padding: 12px 14px; text-decoration: none;
  border-bottom: 1px solid rgba(var(--clcm-navy-rgb), .06); color: var(--clcm-navy); }
.clcm-ib-row:hover, .clcm-ib-row:focus { background: #FBFAF7; text-decoration: none; color: var(--clcm-navy); }
.clcm-ib-row.is-on { background: var(--clcm-cream); }
.clcm-ib-row-main { flex: 1; min-width: 0; }
.clcm-ib-row-top { display: flex; align-items: baseline; gap: 6px; }
.clcm-ib-row-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clcm-ib-row-name.is-unread { font-weight: 700; }
.clcm-ib-row-when { font-size: 11.5px; color: var(--clcm-text-muted, #5A6478); white-space: nowrap; }
.clcm-ib-row-prev { display: block; margin-top: 2px; font-size: 12.5px;
  color: var(--clcm-text-muted, #5A6478); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clcm-ib-row-n { flex: none; align-self: center; box-sizing: border-box; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 5px; background: var(--clcm-navy); color: var(--clcm-white);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.clcm-ib-pane { display: flex; flex-direction: column; min-width: 0; }
.clcm-ib-thread { flex: 1; overflow-y: auto; padding: 20px 20px 12px; background: #FDFCFA; }
.clcm-ib-back { display: none; }   /* the phone's way back to the list; see the phone block of v2.320.0 below */
.clcm-ib-send { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px;
  border-top: 1px solid rgba(var(--clcm-navy-rgb), .08); }
/* ELEMENT-QUALIFIED for the reason recorded beside the field measurements above: the reply box is
   a textarea wearing .clcm-input, and clcm-admin.css styles it through .clcm-wrap
   textarea.clcm-input, which is one element more specific than two classes and therefore wins on
   padding however late this sheet loads. Unqualified, this box kept admin.css's 10px 14px. */
.clcm-ib-send textarea.clcm-input { flex: 1; height: auto; min-height: 44px; padding: 9px 11px; }
/* .clcm-ib-none DELETED: it was a second copy of .clcm-rd-empty's bare-<p> case under a private
   name, and the Inbox — its only user in the whole plugin — now uses the shared one. */
@media (max-width: 860px) {
  /* One column on a phone: the list, then the conversation under it. */
  .clcm-ib { grid-template-columns: minmax(0, 1fr); }
  .clcm-ib-list { border-right: 0; border-bottom: 1px solid rgba(var(--clcm-navy-rgb), .08); }
}

/* The portal's status badge for a declined request. clcm-public.css ships a class per status and
   is byte-pinned, so the new one lives here. Grey, not red, for the reason recorded beside
   clcm_rd_tone(): a request that was never accepted is not an alarm. */
.clcm-badge--declined { background: #F1EEE8; color: #5A6478; }

/* ═══ NOTICE — the component the redesign was missing ═══════════════════════════════════════
 *
 * Designed in round 2 (Waymark Design Requests, section 1) because the system had no notice at all
 * and the live screens were still using the pre-redesign generic blue/amber/red boxes. The invoice
 * list stacks up to five of them, which is why it was the last admin screen left.
 *
 * TONE IS CARRIED BY ICON SHAPE AND A WORD, NEVER BY COLOUR ALONE — the design states this, and it
 * is also the only way the component works for someone who cannot distinguish the tints: info is a
 * circle (ph-info), warning a triangle (ph-warning), alert an octagon (ph-warning-octagon). Do not
 * reuse one shape across two tones; that is why ph-warning was added to the subsetted font in
 * v2.268.1 rather than borrowing the octagon.
 *
 * THE TINTS ARE LITERALS AND THE BRAND COLOURS ARE TOKENS. The six tints below name no token
 * because none exists for them, and they are not brand colours — a tenant's navy and gold still
 * come through var(), so a branded org gets its own ink on these grounds. Were the tints tokenised
 * they would have to be derived per tenant, which is a bigger change than this component needs.
 *
 * ORDER MATTERS INSIDE THIS BLOCK: the phone rules sit at the END of it, after the base rules they
 * override. The file's older phone block sits earlier than the rules it modifies and loses at equal
 * specificity — a trap worth not repeating.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
.clcm-rd-notice { display:flex; gap:12px; align-items:flex-start; padding:12px 14px;
  border-radius:10px; border:1px solid; }
.clcm-rd-notice + .clcm-rd-notice { margin-top:8px; }
/* 20px before the page content, 8px between notices — the design's spacing rule, expressed so a
   stack of any length gets it without the markup counting. */
.clcm-rd-notices { margin:0 0 20px; }
.clcm-rd-notice-ico { flex:none; width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center; }
.clcm-rd-notice-bd { flex:1; min-width:0; }
/* AN ICONLESS TILE PAINTS NOTHING. Jose, 2026-10-18: "wierd blank button in billing history
   message". The Billing History caveat used an EMPTY <span class="clcm-rd-notice-ico"> purely
   to indent the opened panel under the summary text, but this class is a filled 28x28 tile, so
   it rendered as a dead grey-blue button beside the paragraph. :empty keeps the spacer doing
   its one job — holding the indent — and is a sweep, not a patch: any other call site that ever
   omits the glyph is covered by the same line. Tone still travels by icon SHAPE plus a word,
   because a notice that HAS a tone still has its glyph. */
.clcm-rd-notice-ico:empty { background: transparent !important; }
.clcm-rd-notice-t { font-size:14px; font-weight:800; color:var(--clcm-navy); margin:0; }
.clcm-rd-notice-p { font-size:13px; line-height:1.5; color:var(--clcm-text, #1A1A2E); margin:2px 0 0; }
.clcm-rd-notice-act { flex:none; height:30px; padding:0 12px; border-radius:7px; font-size:12.5px;
  font-weight:700; cursor:pointer; white-space:nowrap; border:1px solid transparent; }

/* ── the three tones ─────────────────────────────────────────────────────────── */
.clcm-rd-notice--info  { background:#F2F5F9; border-color:#D9E1EA; }
.clcm-rd-notice--info  .clcm-rd-notice-ico { background:#E3E9F0; color:var(--clcm-navy); }
.clcm-rd-notice--info  .clcm-rd-notice-act { background:#fff; border-color:#C9D3DF; color:var(--clcm-navy); }

.clcm-rd-notice--warn  { background:#FBF6EA; border-color:#EADFC6; }
.clcm-rd-notice--warn  .clcm-rd-notice-ico { background:#F5EEDF; color:var(--clcm-gold-ink); }
.clcm-rd-notice--warn  .clcm-rd-notice-act { background:var(--clcm-navy); color:var(--clcm-on-navy-strong, #fff); }

/* The alert ink is its own colour, not --clcm-danger: the design pairs #9A3B2B with these two
   tints for contrast, and it is also the button fill, where --clcm-danger would be too bright. */
.clcm-rd-notice--alert { background:#FBEFEC; border-color:#EDCFC7; }
.clcm-rd-notice--alert .clcm-rd-notice-ico { background:#F6E1DB; color:#9A3B2B; }
.clcm-rd-notice--alert .clcm-rd-notice-act { background:#9A3B2B; color:#fff; }

/* ── the context bar: always first, full width, never dismissible ────────────── */
.clcm-rd-ctxbar { display:flex; gap:10px; align-items:center; min-height:40px;
  padding:6px 8px 6px 14px; border-radius:10px; margin:0 0 12px;
  background:var(--clcm-navy); color:var(--clcm-on-navy-strong, #fff); }
.clcm-rd-ctxbar i { font-size:16px; color:var(--clcm-gold); flex:none; }
.clcm-rd-ctxbar-bd { flex:1; min-width:0; font-size:13px; line-height:1.4; }
.clcm-rd-ctxbar-bd span { color:rgba(255,255,255,.78); }
.clcm-rd-ctxbar .clcm-rd-notice-act { height:28px; padding:0 12px; background:transparent;
  border-color:rgba(255,255,255,.25); color:var(--clcm-on-navy-strong, #fff); }

/* ── the list variant: money events never stack as separate boxes ───────────── */
.clcm-rd-nlist { border-radius:12px; background:#fff; border:1px solid; overflow:hidden; }
.clcm-rd-nlist--alert { border-color:#EDCFC7; }
.clcm-rd-nlist--alert > .clcm-rd-nlist-head { background:#FBEFEC; }
.clcm-rd-nlist--warn  { border-color:#EADFC6; }
.clcm-rd-nlist--warn  > .clcm-rd-nlist-head { background:#FBF6EA; }
.clcm-rd-nlist-head { display:flex; gap:12px; align-items:center; padding:12px 14px; }
.clcm-rd-nlist-sub { font-size:12.5px; color:var(--clcm-text-muted, #5A6478); margin:1px 0 0; }
.clcm-rd-nlist-counts { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
/* The header counts rows BY TONE IN WORDS, so the number is never the only signal. */
.clcm-rd-ncount { height:22px; padding:0 8px; border-radius:5px; font-size:11.5px; font-weight:800;
  display:inline-flex; align-items:center; white-space:nowrap; }
.clcm-rd-ncount--alert { background:#F6E1DB; color:#9A3B2B; }
.clcm-rd-ncount--warn  { background:#F5EEDF; color:var(--clcm-gold-ink); }
.clcm-rd-ncount--info  { background:#E8ECF1; color:var(--clcm-navy); }
.clcm-rd-nrow { display:flex; gap:12px; align-items:flex-start; padding:11px 14px;
  border-top:1px solid rgba(var(--clcm-navy-rgb), .08); }
.clcm-rd-nrow-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.clcm-rd-nrow-who { font-size:13.5px; font-weight:800; color:var(--clcm-navy); }
.clcm-rd-nrow-amt { margin-left:auto; font-size:13.5px; font-weight:800; color:var(--clcm-navy);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.clcm-rd-nrow-what { font-size:13px; line-height:1.5; color:var(--clcm-text, #1A1A2E); margin:3px 0 0; }
.clcm-rd-npill { height:20px; padding:0 7px; border-radius:5px; font-size:11px; font-weight:800;
  display:inline-flex; align-items:center; white-space:nowrap; }
.clcm-rd-nrow .clcm-rd-notice-act { height:28px; padding:0 10px; background:#fff;
  border-color:var(--clcm-border); color:var(--clcm-navy); }
/* The disclosure control. Shares the row's padding and rule so the list reads as one stack, but it
   is deliberately NOT .clcm-rd-nrow — it is a control, not an event, and anything counting events
   must not count it. list-style:none hides the native marker; the word carries the affordance. */
.clcm-rd-nmore { display:flex; gap:12px; align-items:center; padding:11px 14px; cursor:pointer;
  border-top:1px solid rgba(var(--clcm-navy-rgb), .08); list-style:none; }
.clcm-rd-nmore::-webkit-details-marker { display:none; }
.clcm-rd-nmore:hover { background:var(--clcm-surface-tint); }

/* ── phones: LAST in this block, so these win over the base rules above ─────── */
@media (max-width: 782px) {
  /* The action wraps under the text rather than squeezing the sentence to a column. flex:1 on the body is a 0 basis,
     which never forces a wrap; the body's basis is the line less the icon and its gap, so the action has to. */
  .clcm-rd-notice { flex-wrap:wrap; }
  .clcm-rd-notice .clcm-rd-notice-bd { flex-basis:calc(100% - 40px); }
  .clcm-rd-notice .clcm-rd-notice-act { margin-left:40px; }
  /* The amount drops under the client's name instead of competing with it for the line. */
  .clcm-rd-nrow-amt { margin-left:0; width:100%; }
  .clcm-rd-nlist-head { flex-wrap:wrap; }
  .clcm-rd-nlist-counts { justify-content:flex-start; margin-left:40px; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   THE CLIENT DASHBOARD — the hero's second action, the three strips, the action rows
   mockups/Portal App.dc.html:70-108 (desktop P1), same markup on the phone

   WHY A STRIP COMPONENT. The mockup draws three different things — an invoice to pay, an
   agreement to sign, the install prompt — as ONE shape: a 36px tinted icon tile, two lines
   of text, an action on the right, wrapping on a phone. They are one component here for the
   same reason they are one shape there: a client scanning the top of their dashboard should
   read "things waiting for me", not three unrelated boxes. The TINT is what separates them,
   and only the money one is tinted (gold), because only the money one has a deadline.

   Every var() carries a fallback: this stylesheet also loads over clcm-admin.css, where the
   portal's tokens do not exist, and one unresolved var() voids the whole declaration.
   ════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the hero's eyebrow and its live dot ────────────────────────────────────────────────
   The mockup's eyebrow is NOT uppercase and NOT muted white: it is gold, lower case, with a
   7px gold dot in front of it (Portal App.dc.html:72). The dot is decorative — the sentence
   beside it already says "today" — so it is a styled span with no text and no aria role. */
.clcm-rd-hero-when { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  letter-spacing:0; text-transform:none; opacity:1; margin:0 0 8px;
  /* NOT --clcm-gold-light: admin says #DFC089 and the portal says #d9b87a, so the shared
     sheet cannot read it — and the mockup's eyebrow is the first of those two. The readable
     gold-on-navy ink for a tenant's own gold is computed in PHP and arrives inline; this is
     the floor under it, and --clcm-gold is one of the few golds both hosts agree on. */
  color:var(--clcm-gold, #C8A45D); }
.clcm-rd-hero-dot { flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--clcm-gold, #C8A45D); }
.clcm-rd-hero-body { flex:1 1 240px; min-width:0; }
/* FLEX-BASIS FOLLOWS THE MAIN AXIS, AND THE PHONE BREAKPOINT TURNS IT. The 240px above is a
   minimum WIDTH for the side-by-side row. At <=560px .clcm-rd-hero becomes flex-direction:column
   (see the block far above), and that same 240px silently becomes a minimum HEIGHT — so a body
   holding ~65px of text was padded to 240 and the card stood 342px tall on a phone: a navy block
   with an empty middle between the session details and the buttons. Reported from a real phone,
   2026-10-22; measured at 390px, 342px -> 167px.

   IT HAS TO LIVE HERE, NOT IN THAT BLOCK. Both selectors are (0,1,0) and a media query adds no
   specificity, so an override written up there loses to this line simply by being earlier in the
   file — which it did, silently, until the card was measured again. Keeping the reset beside the
   declaration it corrects is also the only place a reader meets both at once. */
@media (max-width:560px) { .clcm-rd-hero-body { flex-basis:auto; } }
/* The mark is decorative and absolutely positioned, so it sits OUTSIDE the flex flow and
   carries no alt text — the hero already says everything it says. */
.clcm-rd-hero-mark { position:absolute; right:-20px; bottom:-40px; width:170px; opacity:.07;
  pointer-events:none; }

/* Two actions now, so they travel as a group and wrap together. */
.clcm-rd-hero-acts { display:flex; gap:8px; flex-wrap:wrap; }

/* "Reschedule" — the quiet one. An outline on the navy ground, so it reads as the second
   choice beside the gold Join without being a dead grey. */
.clcm-rd-hero-ghost { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:var(--clcm-radius-xl, 12px); background:transparent;
  border:1px solid rgba(255,255,255,.22); font-weight:700; font-size:14px; text-decoration:none;
  white-space:nowrap;
  transition:transform var(--clcm-dur-press, .14s) var(--clcm-ease, cubic-bezier(.2,.8,.2,1)),
             background-color var(--clcm-dur-hover, .18s), border-color var(--clcm-dur-hover, .18s); }
.clcm-rd-hero-ghost, .clcm-rd-hero-ghost:link, .clcm-rd-hero-ghost:visited,
.clcm-rd-hero-ghost:hover, .clcm-rd-hero-ghost:active, .clcm-rd-hero-ghost:focus {
  color:var(--clcm-on-navy-strong, #fff); }
.clcm-rd-hero-ghost:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); }
.clcm-rd-hero-ghost:active { transform:scale(.97); }
.clcm-rd-hero-ghost:focus-visible { outline:2px solid var(--clcm-white, #fff); outline-offset:2px; }

/* ── the strip ──────────────────────────────────────────────────────────────────────── */
.clcm-rd-strip { display:flex; align-items:center; gap:14px; padding:14px 16px; flex-wrap:wrap;
  margin:0 0 14px; border-radius:14px; background:var(--clcm-white, #fff);
  border:1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .1); }
/* THE TINT IS THE DIFFERENTIATOR, so it has to be a value that differs. This read
   var(--clcm-surface-tint, #FBF7EE) — and surface-tint is #FDFCFA in BOTH hosts, so it resolved
   and the gold-cream fallback never fired. #FDFCFA beside the untinted sibling's #FFFFFF is a ~1%
   luminance step: the one thing this block's own note says separates the money strip from the
   others was effectively absent. #FBF7EE is the author's intended value, visible in the fallback
   it never reached, and the literal this file already uses for .clcm-rd-sess--ask. */
.clcm-rd-strip--gold { background:#FBF7EE;
  border-color:rgba(var(--clcm-gold-rgb, 200,164,93), .45); }
.clcm-rd-strip-ico { flex:none; width:36px; height:36px; border-radius:10px; display:grid;
  place-items:center; font-size:18px;
  background:rgba(var(--clcm-navy-rgb, 16,42,67), .08); color:var(--clcm-navy, #102A43); }
.clcm-rd-strip--gold .clcm-rd-strip-ico { background:rgba(var(--clcm-gold-rgb, 200,164,93), .22);
  color:var(--clcm-gold-text, #83662D); }
.clcm-rd-strip-body { flex:1 1 160px; min-width:0; }
.clcm-rd-strip-t { font-size:14.5px; font-weight:800; margin:0;
  color:var(--clcm-navy, #102A43); }
.clcm-rd-strip-s { font-size:12.5px; margin:2px 0 0;
  color:var(--clcm-text-muted, #5A6478); }
/* The strip's own actions. 14.5px/800 at 40px is the mockup's; our .clcm-btn-sign is a
   16px/700 page-level button and reads a size too loud inside a 64px-tall strip. */
.clcm-rd-strip-cta { display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 16px; border:0; border-radius:10px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:800; text-decoration:none; white-space:nowrap;
  background:var(--clcm-navy, #102A43); color:var(--clcm-on-navy-strong, #fff);
  transition:transform var(--clcm-dur-press, .14s) var(--clcm-ease, cubic-bezier(.2,.8,.2,1)),
             background-color var(--clcm-dur-hover, .18s), box-shadow var(--clcm-dur-hover, .18s); }
.clcm-rd-strip-cta, .clcm-rd-strip-cta:link, .clcm-rd-strip-cta:visited,
.clcm-rd-strip-cta:hover, .clcm-rd-strip-cta:active, .clcm-rd-strip-cta:focus {
  color:var(--clcm-on-navy-strong, #fff); }
.clcm-rd-strip-cta:hover { background:var(--clcm-navy-mid, #1C3A56);
  box-shadow:0 6px 16px rgba(var(--clcm-navy-rgb, 16,42,67), .22); }
.clcm-rd-strip-cta:active { transform:scale(.97); }
.clcm-rd-strip-cta--ghost { background:var(--clcm-white, #fff);
  border:1px solid var(--clcm-border, #DDD8CE); }
.clcm-rd-strip-cta--ghost, .clcm-rd-strip-cta--ghost:link, .clcm-rd-strip-cta--ghost:visited,
.clcm-rd-strip-cta--ghost:hover, .clcm-rd-strip-cta--ghost:active,
.clcm-rd-strip-cta--ghost:focus { color:var(--clcm-navy, #102A43); }
.clcm-rd-strip-cta--ghost:hover { background:var(--clcm-surface-tint, #FBF7EE);
  box-shadow:none; }
/* "Not now" — smaller again, because dismissing is never the thing we are asking for. */
.clcm-rd-strip-cta--quiet { height:36px; padding:0 12px; border-radius:9px; font-size:13px;
  font-weight:700; }

/* ── the dashboard's Action Items card ──────────────────────────────────────────────────
   SCOPED TO .clcm-rd-acts, and that is the whole point of the hook. .clcm-action-row,
   .clcm-action-check and .clcm-action-text are shared with the Actions TAB, which the mockup
   draws as a table with status pills — a different screen with different geometry. An
   unscoped rule here would restyle both from one mockup.

   The box is the mockup's: a 22px rounded SQUARE at 1.5px (Portal App.dc.html:107), not our
   2px circle, and NAVY when ticked rather than sage. The mockup spends both colours
   deliberately — sage is the "Done" pill on the Actions tab, navy is a settled checkbox —
   so this does not make sage mean something new, it leaves sage where it already was. */
.clcm-rd-acts-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.clcm-rd-acts-n { font-size:12.5px; font-weight:700; color:var(--clcm-gold-text, #83662D); }
.clcm-rd-acts .clcm-action-check { border-radius:7px; border-width:1.5px; }
.clcm-rd-acts .clcm-action-check.completed { background:var(--clcm-navy, #102A43);
  border-color:var(--clcm-navy, #102A43); color:var(--clcm-on-navy-strong, #fff); }
.clcm-rd-acts .clcm-action-check i { font-size:12px; line-height:1; }
.clcm-rd-acts .clcm-action-text { font-size:14.5px; font-weight:400; line-height:1.4; }

/* ── the dashboard's "Continue your course" card ────────────────────────────────────────
   The mockup's own geometry: a 6px track, a gold fill, and the number beside the bar rather
   than inside it (Portal App.dc.html:114).

   THE TRACK IS NOT THE MOCKUP'S #EDE7D9. That is the portal's page canvas, and this bar sits
   on a WHITE card, where a cream track is all but invisible — and no token holds it: both
   hosts' --clcm-cream is the lighter #F7F4EE, lighter still. A tenth of the navy is tenant-
   aware, reads on white on every palette, and cannot be mistaken for the gold fill. */
.clcm-rd-course-sub { font-size:13px; margin:3px 0 0; color:var(--clcm-text-muted, #5A6478); }
.clcm-rd-course-now { font-size:15px; font-weight:700; margin:10px 0 0; color:var(--clcm-navy, #102A43); }
.clcm-rd-course-meter { display:flex; align-items:center; gap:10px; margin:10px 0 0; }
/* The ring is a fixed figure, never a flex item that grows: a px basis on a flex child is
   read on whichever axis the parent is using, which is the bug class swept on 2026-10-22. */
.clcm-rd-ring { flex:0 0 auto; display:block; }
/* UNUSED SINCE v2.303.0 and kept deliberately. The portal's course card draws a ring now, so
   nothing renders these three rules. They stay because the fill below carries one of the gold
   literals that tests/test-tenant-colours-v2240-sweep.php accounts for by EXACT count: deleting
   the rule fails that entry, so removing this costs an allowlist edit and buys nothing.
   (The hex is deliberately NOT written in this comment. Writing it out added a 36th occurrence
   the allowlist did not claim, and the sweep refused the build — it does not strip comments,
   precisely so a literal cannot hide in one.)
   If a bar is ever wanted again, this is still the bar. */
.clcm-rd-course-track { flex:1; height:6px; border-radius:6px; overflow:hidden;
  background:rgba(var(--clcm-navy-rgb, 16,42,67), .10); }
.clcm-rd-course-fill { display:block; height:100%; background:var(--clcm-gold, #C8A45D); }
.clcm-rd-course-pct { font-size:12.5px; font-weight:700; color:var(--clcm-navy, #102A43);
  font-variant-numeric:tabular-nums; }
.clcm-rd-course .clcm-rd-strip-cta { margin:12px 0 0; }

/* ── the dashboard's Quick journal ──────────────────────────────────────────────────────
   The composer the mockup draws (Portal App.dc.html:123-128): a three-line box set in the
   reading face, a pill switch and the save beside it.

   THE SWITCH IS A REAL CHECKBOX. The mockup's pill is a styled <span>, which on this page
   would be a control a keyboard cannot reach and a screen reader cannot name — and the save
   path reads form.shared.checked, so it has to be an input anyway. The input is clipped
   rather than display:none, which would take it out of the tab order with the pixels. */
.clcm-rd-qj-text { width:100%; margin:10px 0 0; padding:10px 12px; resize:vertical;
  border:1px solid var(--clcm-border, #DDD8CE); border-radius:10px; outline:none;
  font:400 15px/1.55 var(--clcm-font-serif, 'Lora', Georgia, serif);
  /* colour INHERITED on purpose: --clcm-text is one of the tokens the two hosts set to
     different values (#2c2c2c admin, #1A1A2E portal), so the shared sheet may not read it,
     and each host's own body colour is the right answer anyway. */
  color:inherit; background:var(--clcm-white, #fff); }
.clcm-rd-qj-text:focus-visible { border-color:var(--clcm-navy, #102A43);
  box-shadow:0 0 0 3px rgba(var(--clcm-navy-rgb, 16,42,67), .12); }
.clcm-rd-qj-foot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0 0; }
.clcm-rd-qj-save { margin-left:auto; height:36px; padding:0 14px; border-radius:9px; font-size:13px; }

.clcm-rd-switch { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; }
.clcm-rd-switch input { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.clcm-rd-switch-track { flex:none; width:34px; height:20px; border-radius:999px; padding:2px;
  display:flex; justify-content:flex-start; background:rgba(var(--clcm-navy-rgb, 16,42,67), .20);
  transition:background-color var(--clcm-dur-hover, .18s), justify-content 0s; }
.clcm-rd-switch-dot { width:16px; height:16px; border-radius:50%;
  background:var(--clcm-white, #fff); }
.clcm-rd-switch input:checked + .clcm-rd-switch-track { background:var(--clcm-navy, #102A43);
  justify-content:flex-end; }
.clcm-rd-switch input:focus-visible + .clcm-rd-switch-track {
  outline:2px solid var(--clcm-navy, #102A43); outline-offset:2px; }

/* TWO OFF STATES DRAWN AT 3:1. Off is the state that has to be legible: the switch is ON by
   default, so its faint pill (navy at 20% on white, 1.49:1) appeared exactly when a client turned
   SHARING OFF, and the unticked Action Items box drew its 1.5px edge in --clcm-border, 1.42:1. A
   control's identifying edge needs 3:1 against what it sits on. The secondary ink this sheet
   already uses everywhere, --clcm-text-muted with its #5A6478 fallback, is 5.95:1 on white; the
   portal does not define the token, so both hosts land on the same grey.
   Both rules match the OFF state only, so the navy track and the navy .completed box look exactly
   as they did; :not(:hover) leaves the box's sage hover in clcm-public.css in charge. */
.clcm-rd-switch input:not(:checked) + .clcm-rd-switch-track { box-shadow:inset 0 0 0 1px var(--clcm-text-muted, #5A6478); }
.clcm-rd-acts .clcm-action-check:not(.completed):not(:hover) { border-color:var(--clcm-text-muted, #5A6478); }

/* A FOCUS THAT FORCED COLOURS CAN SEE. The Quick journal box and the agreement's signature field
   both drop the outline and show focus with a border colour and a box-shadow. Windows High
   Contrast discards box-shadow and forces every border to one system colour, so neither field
   showed focus at all there. A TRANSPARENT outline paints nothing on an ordinary screen and is
   drawn in the system colour when colours are forced — no ring colour changes anywhere. The sign
   field's outline:none lives in clcm-public.css (byte-pinned); this sheet loads after it on the
   agreement page at equal specificity, so this declaration wins. */
.clcm-rd-qj-text:focus-visible,
.clcm-sign-input:focus { outline:2px solid transparent; outline-offset:2px; }

/* ── the dashboard's "Your Plan" card ───────────────────────────────────────────────────
   The mockup's navy card (Portal App.dc.html:119-122): a gold eyebrow, the plan name in the
   serif, the remaining count with its NUMBER at 24px, and a bar showing what has been used.

   The gold eyebrow's ink still arrives inline from PHP, as it did before this restyle: a
   tenant may save a pale gold and the readable version of it on their own navy is measured,
   not tokenised. Everything else is tokens, so a branded org recolours the whole card.

   .clcm-plan-current (clcm-public.css) still carries the geometry it always had; this adds
   the mockup's type and the bar on top of it. The inline background/colour/radius/padding
   the card used to carry are gone — they were a stylesheet written into an attribute, where
   a tenant's html:root palette could not reach them. */
.clcm-rd-plan { background:var(--clcm-navy, #102A43); color:var(--clcm-on-navy-strong, #fff);
  border-radius:16px; padding:16px 18px; margin:0 0 16px; }
.clcm-rd-plan-eyebrow { font-size:11.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; margin:0; }
.clcm-rd-plan-name { font-family:var(--clcm-font-serif, 'Lora', Georgia, serif); font-weight:600;
  font-size:18px; margin:4px 0 0; }
.clcm-rd-plan-line { font-size:15px; margin:6px 0 0; }
.clcm-rd-plan-n { font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; }
.clcm-rd-plan-track { display:block; height:5px; border-radius:5px; overflow:hidden; margin:10px 0 0;
  background:rgba(255,255,255,.14); }
.clcm-rd-plan-fill { display:block; height:100%; background:var(--clcm-gold, #C8A45D); }
/* v2.383.0 — the client's own controls under the plan card: the card-on-file section's buttons exactly (a 36px sentence-case
   outlined button; the destructive one muted red, red on hover). They wrap, so two fit a 375px phone without overflow. */
.clcm-rd-plan-ctl { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
/* v2.385.0 — a client with more than one plan: each further plan card stands clear of the buttons (or the card) above it,
   instead of sitting 2px under them. One plan: no such sibling, nothing changes. */
.clcm-rd-plan ~ .clcm-rd-plan { margin-top:18px; }
.clcm-rd-plan-ctl .clcm-btn-outline { display:inline-flex; align-items:center; gap:6px; box-sizing:border-box; height:36px; padding:0 14px;
  max-width:100%; border:1px solid var(--clcm-border, #DDD8CE); border-radius:9px; background:var(--clcm-white, #fff); color:var(--clcm-navy, #102A43);
  font-size:13px; font-weight:700; letter-spacing:0; text-transform:none; text-decoration:none; transform:none; cursor:pointer; }
.clcm-rd-plan-ctl .clcm-btn-outline:hover { background:var(--clcm-cream, #F7F4EE); color:var(--clcm-navy, #102A43); }
.clcm-rd-plan-ctl .clcm-pf-danger { color:#9A3B2B; }
.clcm-rd-plan-ctl .clcm-pf-danger:hover { background:#9A3B2B; border-color:#9A3B2B; color:var(--clcm-white, #fff); }
.clcm-rd-plan-ctl .clcm-btn-outline:disabled { opacity:.6; cursor:default; }
.clcm-rd-plan-ctl .clcm-btn-outline:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:2px; }
/* An empty note takes no room but stays in the accessibility tree, as #clcm-card-msg does. */
#clcm-plan-msg:empty { position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); }
.clcm-rd-plan-note { margin:0 0 12px; }

/* ── journal moods: a word, with a dot that only decorates ──────────────────────────────
   Design 5F, Jose's call 2026-10-14. The emoji are gone from the labels (see
   CLCM_Journal::moods()); what is left is five short words, chosen from a radio group and shown
   back as a pill.

   THE DOT IS NEVER THE ANSWER. It repeats the word beside it and carries aria-hidden everywhere it
   renders — this product's rule is that a tone is a shape and a word, never a colour, and a mood
   dot is the easiest place to break that rule without noticing. Which is also why the chips carry
   no tint of their own: a selected chip is navy-on-cream, the same as every other selected thing
   in the product, and the dot stays the same colour whether it is chosen or not.

   The slate and rose tones are the only two that cannot come from a token — neither palette
   defines one, and a tenant does not recolour a mood. They are brand-neutral greys/rose at low
   saturation so they read as a scale beside the three that ARE tokens. */
.clcm-rd-moods { display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  border:0; padding:0; margin:0 0 10px; }
.clcm-rd-moods-l { padding:0; font-size:13px; font-weight:700; width:100%; margin:0 0 6px;
  color:var(--clcm-text-muted, #5A6478); }
.clcm-rd-mood { display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 12px; border-radius:999px; font-size:13px; font-weight:600;
  border:1px solid var(--clcm-border, #DDD8CE); background:var(--clcm-white, #fff);
  transition:background-color var(--clcm-dur-hover, .18s), border-color var(--clcm-dur-hover, .18s); }
.clcm-rd-mood:hover { background:var(--clcm-surface-tint, #FBF7EE); }
.clcm-rd-mood input { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.clcm-rd-mood:has(input:checked) { background:var(--clcm-navy, #102A43);
  border-color:var(--clcm-navy, #102A43); color:var(--clcm-on-navy-strong, #fff); }
.clcm-rd-mood:has(input:focus-visible) { outline:2px solid var(--clcm-navy, #102A43);
  outline-offset:2px; }
/* :has() is well supported now, but a browser without it must still show which mood is chosen —
   so the checked state is also announced by the radio itself, which is a real input and not a
   styled span. Nothing here is the only carrier of that state. */
.clcm-rd-mood-dot { flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--clcm-text-muted, #5A6478); }
.clcm-rd-mood-dot--gold  { background:var(--clcm-gold, #C8A45D); }
.clcm-rd-mood-dot--navy  { background:var(--clcm-navy, #102A43); }
.clcm-rd-mood-dot--sage  { background:var(--clcm-sage, #8FA58B); }
.clcm-rd-mood-dot--slate { background:#8A93A3; }
.clcm-rd-mood-dot--rose  { background:#C08A86; }
/* On the navy chip the gold and navy dots would vanish into the ground, so the chosen chip's dot
   goes to paper. The word is doing the work either way. */
.clcm-rd-mood:has(input:checked) .clcm-rd-mood-dot { background:var(--clcm-on-navy-strong, #fff); }
.clcm-rd-mood-pill { display:inline-flex; align-items:center; gap:6px; }

/* ── the portal's two columns ───────────────────────────────────────────────────────────
   Same component as the coach Home, different basis: the client mockup's columns are near
   enough equal (320px / 280px, Portal App.dc.html:103,117) where the coach's schedule column
   deliberately takes everything it can. */
.clcm-rd-home--portal > .clcm-rd-home-main { flex:1 1 320px; }
.clcm-rd-home--portal > .clcm-rd-home-side { flex:1 1 280px; }

/* ── phones: LAST in this block ─────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* Both hero actions go full width rather than sitting as two half-pills. */
  .clcm-rd-hero-acts { width:100%; }
  .clcm-rd-hero-acts > * { flex:1 1 auto; }
  /* The strip's action drops under the text, lined up with it rather than with the tile. */
  .clcm-rd-strip-cta { margin-left:50px; }
}

/* ── My Courses — the cover card ─────────────────────────────────────────────────
 * Applied 2026-10-15 from the Courses reskin. The partial emits .clcm-rd-course* rather than
 * reusing the .clcm-course-* names in admin/css/clcm-admin.css:1389-1456, for three reasons the
 * agent checked and I verified: the mockup disagrees with that block on nearly every property;
 * the block sits inside the file pinned by tests/test-tenant-colours-v2240-css.php; and
 * .clcm-course-thumb is ALSO a portal class (public/class-clcm-public.php) while this sheet
 * loads on both hosts, so reusing the name would have reached the portal.
 *
 * Do NOT delete the old .clcm-course-* block as "unreferenced": the portal has its own class of
 * that name, and test-tenant-colours-v2240-css.php:215 names .clcm-course-card
 * .clcm-course-actions in its added-rule allowlist. Retiring it is its own change.
 */
.clcm-rd-coursegrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:14px; padding:14px 16px 16px; }
/* The hairline the mockup draws under the count/filter bar. A table page gets it from the
   thead's own border-bottom; a card grid has no thead, so the grid carries it. */
.clcm-rd-card > .clcm-rd-bar + .clcm-rd-coursegrid { border-top:1px solid rgba(var(--clcm-navy-rgb),.08); }

.clcm-rd-course { display:flex; flex-direction:column; background:var(--clcm-white);
  border:1px solid rgba(var(--clcm-navy-rgb),.10); border-radius:var(--clcm-radius-md); overflow:hidden; }

/* THE COVER IS A PLACEHOLDER. Striped cream so an empty one reads as missing art; a featured
   image fills it. No cursor:pointer and no hover lift — the old card had both, but nothing on
   it is clickable except its own buttons, and the mockup's card is static too. */
.clcm-rd-course-cover { position:relative; box-sizing:border-box; height:118px; display:flex;
  align-items:flex-end; padding:10px 12px;
  background:repeating-linear-gradient(135deg, var(--clcm-cream) 0 10px, var(--clcm-cream-dark, #EDE7D9) 10px 20px); }
.clcm-rd-course-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.clcm-rd-course-glyph { font-size:18px; color:var(--clcm-text-muted, #5A6478); }

/* Status chips sit in a ROW at the top-left. The old rule pinned EVERY badge to top:10px;
   right:10px, so a course that was both Shared and Draft printed one pill on top of the other. */
.clcm-rd-course-tags { position:absolute; top:10px; left:10px; right:10px; display:flex;
  flex-wrap:wrap; gap:6px; }
.clcm-wrap .clcm-rd-course-tags .clcm-rd-pill { height:auto; padding:2px 8px; font-size:11.5px;
  border-radius:5px; }
.clcm-wrap .clcm-rd-course-tags .clcm-rd-pill::before { display:none; }
/* THE SIXTH TONE. The old Draft badge was `style="background:var(--clcm-navy)"` over a class whose
   colour is var(--clcm-on-gold, var(--clcm-navy)) — and --clcm-on-gold is defined by no sheet, so
   the word "Draft" rendered NAVY ON NAVY and could not be read. This tone states both. */
.clcm-rd-pill--ink { background:var(--clcm-navy); color:var(--clcm-on-navy-strong, #fff); }

.clcm-rd-course-body { display:flex; flex-direction:column; gap:6px; flex:1 1 auto;
  padding:14px 14px 12px; }
.clcm-rd-course-title { font-family:var(--clcm-font-serif, 'Lora', Georgia, serif); font-size:16px;
  font-weight:600; line-height:1.25; color:var(--clcm-navy); margin:0; }
.clcm-rd-course-meta { font-size:12.5px; color:var(--clcm-text-muted, #5A6478); margin:0; }
/* margin-top:auto IS the mockup's flex spacer: the buttons sit on the card's floor, so a
   two-line title cannot push one card's action row out of line with its neighbour's. */
.clcm-rd-course-acts { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:8px; }
.clcm-wrap .clcm-rd-course-acts .clcm-btn-icon { width:26px; height:26px; padding:0; }
.clcm-wrap .clcm-rd-course-del { color:var(--clcm-danger); }
.clcm-wrap .clcm-rd-course-del:hover { color:var(--clcm-danger); background:var(--clcm-cream);
  border-color:var(--clcm-border); }

@media (prefers-reduced-motion: no-preference) {
  .clcm-rd-course { animation:clcm-rd-in var(--clcm-dur-enter) var(--clcm-ease) both; }
  .clcm-rd-course:nth-child(1){animation-delay:0ms}   .clcm-rd-course:nth-child(2){animation-delay:40ms}
  .clcm-rd-course:nth-child(3){animation-delay:80ms}  .clcm-rd-course:nth-child(4){animation-delay:120ms}
  .clcm-rd-course:nth-child(5){animation-delay:160ms} .clcm-rd-course:nth-child(6){animation-delay:200ms}
  .clcm-rd-course:nth-child(7){animation-delay:240ms} .clcm-rd-course:nth-child(8){animation-delay:280ms}
  .clcm-rd-course:nth-child(n+9){animation-delay:320ms}
}

@media (max-width:560px) {
  .clcm-rd-coursegrid { grid-template-columns:1fr; padding:12px; }
}

/* ─── Row names and bare content links stop turning WordPress blue ───────────────
 * Measured in a live page 2026-10-15: of every anchor on a coach screen, these two were the only
 * ones no hover rule of ours matched, so WordPress core's `a:hover,a:active{color:#135e96}` —
 * a (0,1,1) selector from load-styles.php — reached them.
 *
 *   .clcm-rd-title   the clickable client name in every list row. This is what the owner saw:
 *                    hovering a NAME turned it WordPress blue.
 *   a with no class  the mailto addresses in a table and the "Export to CSV" link.
 *
 * Each restates the colour it already has at rest, read off the computed style rather than
 * guessed, so hover changes nothing but the row tint that was always there. 64 of our rules
 * already set a hover colour and are deliberately untouched — they meant it.
 *
 * THIS LIVES HERE AND NOT IN clcm-admin.css. That sheet's Waymark rendering is pinned against a
 * v2.239.0 fixture by tests/test-tenant-colours-v2240-css.php, and a new rule there has to be
 * declared in an allowlist with a pinned count and hash. .clcm-rd-title is a redesign class
 * defined in THIS file, so its hover rule belongs beside it. The portal never emits .clcm-wrap,
 * so both rules are inert on the other host this sheet loads on.
 *
 * The rail is deliberately absent — nav links are never coloured as a group — and so is
 * WordPress's own admin bar, which is core's chrome rather than ours to repaint.
 */
.clcm-wrap .clcm-rd-title:hover,
.clcm-wrap .clcm-rd-title:active { color: var(--clcm-navy); }

.clcm-wrap a:not([class]):hover,
.clcm-wrap a:not([class]):active { color: var(--clcm-text); }

/* ── an icon-only button is a square, so centre the glyph in it ──────────────────
 * .clcm-btn-icon already gets its 26px box (l.752 for a table's row actions, l.1425 for a course
 * card), but .clcm-btn is `display:inline-flex` with NO justify-content, so the glyph sat against
 * the left edge of it. Measured on the Courses cards before this rule: 2px of gap on the left and
 * 12px on the right of a 26px button. Found by the Groups reskin, which hit the same thing.
 */
.clcm-wrap .clcm-btn-icon { justify-content:center; gap:0; }

/* ═══ GROUPS — the detail screen's chrome, and two row controls on the list ═══════════
 * Markup: admin/partials/groups/clcm-group-edit.php and clcm-groups-list.php. Geometry from the
 * mockup's own detail screen (back button, 52px mark, 20px stat cells, 28px row tiles, 13.5/12.5
 * row type) and decisions 5C / 5E.
 *
 * ADMIN-ONLY SCOPE. Both screens are coach-admin, so where a rule must out-rank a component in
 * clcm-admin.css it is scoped .clcm-wrap — not the ".clcm-wrap, #clcm-coach-portal" pair the
 * portal-facing rules in this sheet use. Every token read below carries its own value as a
 * fallback, per the note at the head of this file: --clcm-text-muted, --clcm-font-sans and
 * --clcm-gold-dark are defined on the COACH side only, and a bare var() on one of those deletes
 * the whole declaration on the portal. --clcm-gold-text is defined in NO sheet on purpose
 * (the two-tone focus ring was declined); it is read with a fallback here exactly as the ~15
 * existing sites in clcm-public.css read it, so defining it later would light them all up at once. */

/* ── the back link ──────────────────────────────────────────────────────────────
 * WordPress core ships a:hover, a:active { color:#135e96 } at (0,1,1) from load-styles.php, which
 * beats a lone class — an anchor class with no hover colour of its own turns admin blue under the
 * cursor. The resting ink is restated on every state, exactly as .clcm-rd-tab does above. */
.clcm-rd-back { display:inline-flex; align-items:center; gap:6px; margin:0 0 12px; font-size:13px;
  font-weight:700; color:var(--clcm-text-muted, #5A6478); text-decoration:none;
  transition:color var(--clcm-dur-hover) var(--clcm-ease), transform var(--clcm-dur-press) var(--clcm-ease); }
.clcm-wrap .clcm-rd-back:link, .clcm-wrap .clcm-rd-back:visited { color:var(--clcm-text-muted, #5A6478); }
.clcm-wrap .clcm-rd-back:hover, .clcm-wrap .clcm-rd-back:focus { color:var(--clcm-navy); text-decoration:none; }
.clcm-wrap .clcm-rd-back:active { color:var(--clcm-navy); transform:scale(.97); }
.clcm-rd-back:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D));
  outline-offset:2px; border-radius:4px; }

/* ── identity header: the thing's mark, its name, its state ────────────────────
 * The tile is --clcm-gold-dark with a white glyph, the mockup's own pairing, and it is safe for
 * every tenant and not only for Waymark: whitelabel derives gold-dark through fg_on_light(), the
 * accent darkened until it clears 4.5:1 on cream, and contrast is symmetric — so white on it
 * always clears the 3:1 a glyph needs. The glyph is aria-hidden; the name beside it is the label.
 * 14px radius, not the mockup's 12: there is no 12px token, and inventing one is a token change. */
.clcm-rd-idhead { display:flex; align-items:center; gap:14px; min-width:0; }
.clcm-rd-idtile { flex:none; width:52px; height:52px; border-radius:var(--clcm-radius-xl, 14px);
  background:var(--clcm-gold-dark, #A07C3A); color:var(--clcm-white, #fff); display:grid; place-items:center; }
.clcm-rd-idbody { min-width:0; }
.clcm-rd-idline { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* .clcm-rd-head h1 carries a margin-bottom for the one-line header; beside a pill it must not. */
.clcm-rd-head .clcm-rd-idline h1 { margin:0; }

/* ── a detail page's stat strip: Home's cells, two sizes down ─────────────────── */
.clcm-rd-stats--compact .clcm-rd-stat { padding:12px 16px; }
.clcm-rd-stats--compact .clcm-rd-stat-l { font-size:12px; }
.clcm-rd-stats--compact .clcm-rd-stat-n { font-size:20px; line-height:1.1; }

/* ── the count beside a panel title ────────────────────────────────────────────
 * It sits inside the h3, so it has to leave Lora explicitly: a count is UI, not a heading. */
.clcm-rd-panel-n { font-family:var(--clcm-font-sans, 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-size:12.5px; font-weight:600; color:var(--clcm-text-muted, #5A6478); }

/* ── a row of controls that wraps, and the checkbox labels in it ───────────────
 * These replace ten copies of display:flex;gap:8px;align-items:flex-end and four copies of an
 * inline checkbox label. padding-bottom on the label is what lines its text up with the inputs
 * beside it, each of which sits under its own label. */
.clcm-rd-inline { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; }
.clcm-rd-check { display:inline-flex; align-items:center; gap:6px; padding-bottom:8px; cursor:pointer;
  font-size:13px; color:var(--clcm-text, #1A1A2E); }
.clcm-label.clcm-rd-label-s { font-size:11.5px; }

/* ── chips, and the control that takes one out ─────────────────────────────────
 * A button, never an anchor: the <a href="#"> this replaces escaped core's blue only because it
 * carried an inline colour. The target is a 16px square inside the chip, not the glyph's ~8px. */
.clcm-rd-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.clcm-rd-pill-x { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0;
  margin:0; border:0; background:none; color:inherit; font:inherit; font-weight:700; line-height:1;
  cursor:pointer; opacity:.6; transition:opacity var(--clcm-dur-hover) var(--clcm-ease); }
.clcm-rd-pill-x:hover { opacity:1; }
.clcm-rd-pill-x:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D));
  outline-offset:1px; border-radius:3px; }

/* ── a hairline between stacked blocks inside one panel ───────────────────────── */
.clcm-rd-rule { border:0; border-top:1px solid rgba(var(--clcm-navy-rgb),.08); margin:20px 0; }

/* ── a detail-page list row: tile, title, second line, actions ─────────────────
 * The mockup's section row, for a list that is not a table. It draws the rule from the second row
 * on, hence the sibling selector rather than a border on every row. */
.clcm-rd-lrow { display:flex; align-items:center; gap:11px; padding:10px 0; }
.clcm-rd-lrow + .clcm-rd-lrow { border-top:1px solid rgba(var(--clcm-navy-rgb),.06); }
.clcm-rd-lrow-ico { flex:none; width:28px; height:28px; border-radius:7px; display:grid; place-items:center;
  background:var(--clcm-cream, #F7F4EE); color:var(--clcm-gold-ink, #83662D); }
.clcm-rd-lrow-main { flex:1 1 auto; min-width:0; }
.clcm-rd-lrow-t { display:block; font-size:13.5px; font-weight:700; color:var(--clcm-navy); }
.clcm-rd-lrow-s { display:block; font-size:12.5px; line-height:1.45; color:var(--clcm-text-muted, #5A6478); margin-top:1px; }
.clcm-rd-lrow-acts { flex:none; display:flex; align-items:center; gap:6px; }

/* ── a destructive control: muted ink, red only under the cursor (decision 5C) ──
 * The trio is the notice--alert one already reviewed in this sheet (#FBEFEC / #EDCFC7 / #9A3B2B):
 * semantic, not brand, and the shade sweep hunts the navy and gold families only. Scoped with
 * .clcm-wrap so it out-ranks .clcm-btn-ghost:hover and .clcm-metric-act:hover, the two components
 * it is worn over. Link states are restated for the day it lands on an <a>. */
.clcm-wrap .clcm-rd-del, .clcm-wrap .clcm-rd-del:link,
.clcm-wrap .clcm-rd-del:visited { color:var(--clcm-text-muted, #5A6478); }
.clcm-wrap .clcm-rd-del:hover, .clcm-wrap .clcm-rd-del:focus, .clcm-wrap .clcm-rd-del:active {
  background:#FBEFEC; border-color:#EDCFC7; color:#9A3B2B; }

/* ── the edit-a-note panel clcm-group-edit.php builds in JavaScript ────────────
 * It was assembled as a style string containing background:#fff — a colour literal no tenant could
 * reach and no sweep could see, because it existed only inside a JS string. */
.clcm-rd-notebox { margin:12px 0; padding:14px; background:var(--clcm-white, #fff);
  border:1px solid rgba(var(--clcm-navy-rgb),.12); border-radius:var(--clcm-radius-md, 10px); }
.clcm-rd-notebox-t { font-size:12.5px; font-weight:700; color:var(--clcm-navy); margin:0 0 8px; }
.clcm-rd-notebox-body { min-height:120px; text-align:left; }

/* ═══ LIBRARY + WORKSHEET BUILDER ═══════════════════════════════════════════════
   From the mockup: the list rows, the card shape, this screen's tabs, and the
   builder's header strip. No colour literal in the navy or gold families, and no
   var() fallback on an emitted token, so the sweep's exact counts for this file
   are unaffected. The --clcm-text-muted / --clcm-font-serif fallbacks below are
   required: neither token exists in clcm-public.css, and this sheet loads there. */

/* ── the cFile tile: a 26px rounded square naming the KIND of row ────────────────
   The mockup leads every non-person row with this instead of the person disc
   (.clcm-rd-disc): flex:none, 26px, radius 6, cream ground, gold ink, 14px glyph. */
.clcm-rd-ico, .clcm-rd-fileico { flex:0 0 auto; width:26px; height:26px; border-radius:var(--clcm-radius-sm);
  display:grid; place-items:center; background:var(--clcm-cream); color:var(--clcm-gold-ink); }
.clcm-rd-ico > i, .clcm-rd-fileico i { font-size:14px; line-height:1; }

/* ── the identity cell's text stack, and its meta lines ──────────────────────────
   .clcm-rd-idt is shared with the Clients list; .clcm-rd-meta is the 12px line under
   a row title — the author's name, a question/response count, a file's size. */
.clcm-rd-idt { min-width:0; display:flex; flex-direction:column; gap:2px; }
.clcm-rd-meta { font-size:12px; font-weight:400; line-height:1.4; color:var(--clcm-text-muted, #5A6478); }
/*
 * THE ONE LINK THAT LIVES IN A META LINE (the Library's "N responses") NEEDS BOTH FIXES.
 *
 * Colour: WordPress core sets a:hover/a:active at (0,1,1) from load-styles.php, so a
 * single class on an anchor turns core blue under the cursor. Every state is restated.
 * It reads --clcm-gold-ink, not --clcm-gold-dark, which the markup used inline: gold-dark
 * is ~3.1:1 on white and this is 12px text, where 4.5:1 is the bar; gold-ink is measured
 * at 5.38.
 *
 * z-index: a.clcm-rd-title::after spans the whole row and paints over static inline
 * content, so without the lift this link is unreachable with a mouse while looking
 * perfectly normal — the Membership-screen Receipt bug.
 */
.clcm-rd-meta a { font-weight:700; text-decoration:none; position:relative; z-index:1; }
.clcm-wrap .clcm-rd-meta a, .clcm-wrap .clcm-rd-meta a:link, .clcm-wrap .clcm-rd-meta a:visited,
.clcm-wrap .clcm-rd-meta a:hover, .clcm-wrap .clcm-rd-meta a:focus,
.clcm-wrap .clcm-rd-meta a:active { color:var(--clcm-gold-ink); }

/* The same carve-out .row-actions already has above, for the plugin's own class. The
   Library's Move / Transfer / Share / Edit / Delete cells sit under the row overlay
   without it. */
.clcm-wrap .clcm-rd-table td.clcm-row-actions { position:relative; z-index:1; }

/* ── THE GENERAL CASE of that same bug ───────────────────────────────────────────
   Two agents independently hit it and two more avoided it by not putting .clcm-rd-row
   on their rows at all. a.clcm-rd-title::after is `position:absolute; inset:0` — it
   spans the whole row so the title is clickable anywhere, and it therefore paints over
   every control in an ordinary cell. Only .row-actions and .clcm-row-actions are lifted
   by name. Any button or link a reskin drops into a plain <td> gives its click to the
   row and looks perfectly normal doing it. Lift them all, by shape rather than by name. */
.clcm-wrap .clcm-rd-table tbody td .clcm-btn,
.clcm-wrap .clcm-rd-table tbody td button { position:relative; z-index:1; }

/* ── a page tab strip used as a card header ──────────────────────────────────────
   .clcm-rd-tabs--page zeroes the gutter and adds a 14px bottom margin because it was
   written for a strip standing on the page. The Library now carries it on the card's
   top edge (its three classes are pinned by a test), so it needs the card's own 16px
   gutter and no margin. Four selectors deep on purpose: it has to beat
   .clcm-tab-bar.clcm-rd-tabs.clcm-rd-tabs--page whatever the order. */
/* THE TOP GUTTER, which this rule used to zero along with the rest.
   A page strip drawn INSIDE a card had its first tab's text 1px below the card's top border
   while its left gutter was 17px — measured on the Library, 2026-10-16, after Jose saw words
   pressed against the edge. 4px here plus the tab's own 13px top padding makes it 17px, so the
   corner reads as one measurement rather than two.
   It belongs on THIS rule rather than a new one: at 0,4,0 this is the most specific thing that
   matches a page strip inside a card, and a less specific rule elsewhere is simply overruled —
   which is exactly what happened to the first attempt. */
.clcm-wrap .clcm-rd-card > .clcm-tab-bar.clcm-rd-tabs--page { padding:4px 16px 0; margin:0; }

/* ── an in-card empty row: a sentence on the left, the way out on the right ──────
   A modifier, not a redefinition: .clcm-rd-empty is also used by the Clients list and
   Reports (a centred block and a bare <p>). Everything this row needs is declared here,
   and .clcm-wrap outranks a plain .clcm-rd-empty base either way. */
.clcm-wrap .clcm-rd-empty--row { display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; padding:18px 16px; margin:0; text-align:left;
  font-size:13.5px; line-height:1.5; color:var(--clcm-text-muted, #5A6478); }

/* ── the builder's / sub-screen's header strip ───────────────────────────────────
   12px/20px, one hairline under it, a quiet back control, an 18px Lora title and a 13px
   muted meta. It replaces the navy band the worksheet editor and the responses reader
   used to open with. No fill of its own: the mockup's parent is a white app card, ours
   is the cream page, and in both the strip takes the surface it sits on. */
.clcm-rd-editbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 20px; border-bottom:1px solid rgba(var(--clcm-navy-rgb),.08); }
.clcm-rd-editbar-div { width:1px; height:18px; flex:0 0 auto; background:rgba(var(--clcm-navy-rgb),.12); }
.clcm-rd-editbar-t { font-family:var(--clcm-font-serif, 'Lora', Georgia, serif); font-weight:600;
  font-size:18px; line-height:1.2; color:var(--clcm-navy); margin:0; padding:0; }
.clcm-rd-editbar-meta { font-size:13px; font-weight:700; color:var(--clcm-text-muted, #5A6478); }
.clcm-rd-editbar-back { display:inline-flex; align-items:center; gap:6px; font-size:13px;
  font-weight:700; text-decoration:none; }
/* Resting colour restated on every state (core's a:hover/a:active is (0,1,1)), then the
   hover tint after it so it wins on source order at equal specificity. */
.clcm-wrap .clcm-rd-editbar-back, .clcm-wrap .clcm-rd-editbar-back:link,
.clcm-wrap .clcm-rd-editbar-back:visited, .clcm-wrap .clcm-rd-editbar-back:hover,
.clcm-wrap .clcm-rd-editbar-back:focus,
.clcm-wrap .clcm-rd-editbar-back:active { color:var(--clcm-text-muted, #5A6478); }
.clcm-wrap .clcm-rd-editbar-back:hover, .clcm-wrap .clcm-rd-editbar-back:focus { color:var(--clcm-navy); }
.clcm-wrap .clcm-rd-editbar-back:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold));
  outline-offset:2px; border-radius:4px; }

/* ── the worksheet's title field ─────────────────────────────────────────────────
   Lora 600 26px on a single hairline, no box, and the accent under it on focus.
   .clcm-wrap .clcm-input pins every field to 34px/7px radius, so this is written to
   outrank it (0,3,0) rather than beside it. The focus ring .clcm-input:focus already
   paints is left alone — a border colour is not a focus cue. */
.clcm-wrap .clcm-input.clcm-ws-title { width:100%; height:auto; padding:4px 0 10px; border:0;
  border-bottom:1px solid rgba(var(--clcm-navy-rgb),.12); border-radius:0; background:transparent;
  font-family:var(--clcm-font-serif, 'Lora', Georgia, serif); font-weight:600; font-size:26px;
  line-height:1.2; color:var(--clcm-navy); }
.clcm-wrap .clcm-input.clcm-ws-title:focus { border-bottom-color:var(--clcm-gold-text, var(--clcm-gold)); }

@media (max-width:640px) {
  .clcm-rd-editbar { padding:10px 14px; gap:8px; }
  .clcm-wrap .clcm-input.clcm-ws-title { font-size:21px; }
}

/* ═══ APPOINTMENTS ═══ */
/* ── a row title that LINKS but does not claim the row ───────────────────────────
 * .clcm-rd-title carries an ::after overlay that makes the whole row click through to
 * the anchor. Right on the eight screens whose row has one destination; wrong on the
 * Appointments row, which holds three links — the client (or group), "Needs invoice"
 * and Join — where the overlay paints over the last two and takes their clicks, the
 * defect already fixed once for Membership's Receipt link. Same typography, no overlay.
 * The hover rule restates the colour because wp-admin otherwise recolours a:hover. */
.clcm-rd-rowlink { font-weight:700; font-size:13.5px; color:var(--clcm-navy); text-decoration:none; }
.clcm-rd-rowlink:hover, .clcm-rd-rowlink:focus { color:var(--clcm-navy); text-decoration:underline; }
.clcm-rd-rowlink:focus-visible { outline:2px solid var(--clcm-gold, #C8A45D); outline-offset:2px; border-radius:3px; }

/* ── the small pill: a SECOND badge in a cell that already has one ───────────────
 * "Today" beside a date, "Needs invoice" under a client, the refund amount under a
 * status pill. 11.5px is the scale's smallest step; the three sites used an off-scale
 * inline 10px before. Must sit after .clcm-rd-pill::before — equal specificity. */
.clcm-rd-pill--sm { padding:2px 7px; font-size:11.5px; gap:5px; }
.clcm-rd-pill--sm::before { width:5px; height:5px; }

/* ═══ ORGANIZATION ═══ */
/* ── a table's money column: the mockup's cMoney cell (right, navy, bold, tabular) ───────── */
/* Both halves matter: without the th rule the heading sits left over right-aligned figures. */
.clcm-rd-table th.clcm-rd-money,
.clcm-rd-table td.clcm-rd-money { text-align: right; }
.clcm-rd-table td.clcm-rd-money { font-weight: 700; color: var(--clcm-navy);
  font-variant-numeric: tabular-nums; }

/* ── the second line of an identity cell: a role, a pairing level ───────────────────────── */
/* 12.5px/muted, NOT the mockup's 12px #8A93A3: --clcm-text-faint is deliberately absent
   (clcm-admin.css documents it as AA-failing on every ground this product has), and 12.5px
   muted is what platform.php and the client profile already inline for this exact line. */
.clcm-rd-subline { font-size: 12.5px; font-weight: 400; line-height: 1.45;
  color: var(--clcm-text-muted, #5A6478); }

/* ═══ CERTIFICATION + WHITEBOARDS ═══ */
/* ═══ CERTIFICATION + WHITEBOARDS ════════════════════════════════════════════════
 * Four shapes the list vocabulary had no word for, all taken from the coach mockup:
 * a document's icon tile, a table progress rail, requirement chips, and a form row
 * inside a card. Plus one carve-out for a control in an ordinary cell.
 * ═════════════════════════════════════════════════════════════════════════════════ */

/* ── a DOCUMENT's icon tile, where a PERSON gets an initials disc ──────────────────
   The mockup's own file cell (v2.dc.html:557, cFile): a 26px tile at radius 6, cream
   ground, gold-ink glyph at 14px. Tracks, whiteboards, templates and agreements are
   things, not faces — the coloured initials disc stays for clients and coaches. */
/* .clcm-rd-fileico is defined with .clcm-rd-ico in the LIBRARY block above: the two agents
   drew the same 26px cream/gold document tile under two names. One rule, both names. */
/* ── progress inside a table row ───────────────────────────────────────────────────
   The mockup pairs a 64px rail with the count beside it and switches the fill from
   navy to gold on the LAST remaining step (v2.dc.html:1622).

   THE TRACK IS NOT THE MOCKUP'S #EDE7D9, for the reason this sheet already gives for
   the portal's course meter: cream on a white row is all but invisible, and no token
   holds that shade on the portal host at all. A tenth of the navy is tenant-aware and
   reads on every palette. The fill's width is inline — it is a number out of data. */
.clcm-rd-prog { display:flex; align-items:center; gap:8px; }
.clcm-rd-prog-track { flex:0 0 auto; width:64px; height:5px; border-radius:5px;
  background:rgba(var(--clcm-navy-rgb),.10); overflow:hidden; }
.clcm-rd-prog-fill { display:block; height:100%; border-radius:5px; background:var(--clcm-navy); }
.clcm-rd-prog--near .clcm-rd-prog-fill { background:var(--clcm-gold); }
.clcm-rd-prog-n { font-size:12.5px; font-weight:700; color:var(--clcm-navy);
  font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ── requirement chips: what a candidate still has to finish ───────────────────────
   Not in the mockup — the product names every requirement where the mockup draws a
   bare bar, and the audit's rule is to keep the richer thing and restyle it. A met
   chip carries a TICK as well as its tint, so it is never colour alone; the tints are
   .clcm-rd-pill--on's already-reviewed sage pair rather than two more shades, and are
   deliberately not tenant-derived for the same reason that pill's are not. */
.clcm-rd-reqs { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; }
.clcm-rd-req { display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
  border-radius:var(--clcm-radius-sm); font-size:12px; font-weight:600;
  background:var(--clcm-surface-tint); color:var(--clcm-text-muted, #5A6478);
  border:1px solid rgba(var(--clcm-navy-rgb),.08); }
.clcm-rd-req i { font-size:11px; line-height:1; }
.clcm-rd-req--met { background:#EBF0EA; color:#4E6B4A; border-color:transparent; }

/* ── a form row inside a card (the certification enrolment row) ───────────────────
   Card gutters, and fields that share the line and wrap rather than squeeze. */
.clcm-rd-formrow { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:0 16px 16px; }
.clcm-rd-formrow .clcm-select, .clcm-rd-formrow .clcm-input { flex:1 1 200px; min-width:200px; }

/* ── a control in an ORDINARY cell sits above the row overlay ─────────────────────
   a.clcm-rd-title::after spans the row with inset:0 and paints over static content.
   Only .row-actions was lifted out of its way (l.292), so the whiteboards "N drafts"
   button was taking the row's click instead of its own — the same defect shape as the
   Membership screen's receipt link. The children are lifted, not the <td>: z-index on
   a positioned table cell is the quirkier of the two. */
.clcm-rd-table td.clcm-rd-cellact > * { position:relative; z-index:1; }

/* ── the candidate's progress cell keeps room for its chips ───────────────────────
   240px was the inline min-width this cell already carried; screen-scoped so a 64px
   rail in a narrow column elsewhere does not inherit a floor it does not want. */
.clcm-cert-progress { min-width:240px; }

/* ═══ CLIENTS ═══ */
/* ═══ My Clients list (admin/partials/clients/clcm-clients-list.php) ═════════════
 *
 * Mockup: "Waymark Coach v2.dc.html" → pages().clients, rendered by the generic list-page
 * template at l.491-578. Every value below is that template's, read through the token scale.
 * The screen's page header, card, tabs and table body already use this sheet's existing
 * vocabulary; these are the components it did not yet have.
 *
 * TOKEN POLICY, per this sheet's own header. Every token read below carries a fallback EXCEPT
 * --clcm-navy and --clcm-gold, which are the two that clcm-admin.css and clcm-public.css both
 * define — checked, not assumed — and which this sheet already reads bare throughout. Adding
 * fallbacks to those two would put a fresh navy and gold literal into a file whose every
 * Waymark literal is counted by tests/test-tenant-colours-v2240-sweep.php, for no gain.
 * Nothing below reads --clcm-text-faint, --clcm-sage-ink, --clcm-on-gold, --clcm-on-navy-muted
 * or --clcm-gold-dark: none of those is defined on both surfaces, and an unresolved var()
 * voids its whole declaration.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── header action menu (the CSV import / export dropdown) ────────────────────────
 *
 * The menu keeps position:fixed because clcmToggleCsvMenu() in the partial measures the
 * trigger and writes viewport top/left onto it. display lives here as the RESTING state
 * only — that function toggles the element's own inline display, so it still wins.
 *
 * NO box-shadow here. The menu's shadow is the one tenant-measured value on this screen and
 * it stays inline in the partial: tests/test-tenant-colours-v2240-admin.php reads it out of
 * that element's style attribute to prove a branded org's shadow is its own navy. */
.clcm-rd-menu-wrap { position:relative; display:inline-block; }
.clcm-rd-caret { font-size:10px; line-height:1; }
/* ABSOLUTE, ANCHORED TO .clcm-rd-menu-wrap — not fixed with coordinates worked out in JS.
 *
 * It was position:fixed with top/left set from the button's getBoundingClientRect(). That is
 * only correct while "fixed" means "relative to the viewport", and .clcm-wrap carries
 * overflow-x:clip, which in current Chrome makes it a containing block for fixed descendants.
 * The viewport coordinates were then measured from the wrap's own top-left — down by the header
 * and right by the rail — and the menu opened in the middle of the table (Jose, 2026-10-16).
 * Older Chrome resolves it against the viewport, which is why it looked fine in testing.
 *
 * Anchoring to the wrapper is correct under BOTH behaviours and needs no JS at all: the wrapper
 * is already position:relative, the button is in it, and right:0 puts the menu's right edge on
 * the button's. .clcm-wrap clips on X only — overflow-y is visible — so a menu dropping below
 * a right-aligned button is not clipped either way.
 */
.clcm-rd-menu { display:none; position:absolute; top:calc(100% + 5px); right:0; min-width:200px; z-index:9999; overflow:hidden;
  background:var(--clcm-white, #fff); border:1px solid var(--clcm-border, #DDD8CE);
  border-radius:var(--clcm-radius-md, 10px); }
.clcm-rd-menu-item { display:flex; align-items:center; gap:9px; width:100%; padding:11px 15px;
  box-sizing:border-box;   /* width:100% + padding inside a 200px menu */
  background:none; border:0; border-top:1px solid rgba(var(--clcm-navy-rgb, 16,42,67),.08);
  font-size:13px; font-weight:600; line-height:1.3; text-align:left; text-decoration:none;
  cursor:pointer;
  transition:background var(--clcm-dur-hover, .18s) var(--clcm-ease, cubic-bezier(.2,.8,.2,1)); }
.clcm-rd-menu-item:first-child { border-top:0; }
/* One row is a <button>, the other an <a>. WordPress core's load-styles.php carries
   `a:hover, a:active { color:#135e96 }` at (0,1,1), which BEATS a single class — that blue
   under the cursor is the defect the owner reported. So the resting ink is restated for every
   link state, and again under .clcm-wrap at (0,3,0) so nothing in core can reach it. There is
   no colour CHANGE on hover at all here: the affordance is the ground. */
.clcm-rd-menu-item,
.clcm-rd-menu-item:link, .clcm-rd-menu-item:visited,
.clcm-rd-menu-item:hover, .clcm-rd-menu-item:focus, .clcm-rd-menu-item:active,
.clcm-wrap .clcm-rd-menu-item:hover, .clcm-wrap .clcm-rd-menu-item:active {
  color:var(--clcm-text, #1A1A2E); }
.clcm-rd-menu-item:hover, .clcm-rd-menu-item:focus { background:var(--clcm-cream, #F7F4EE); }
.clcm-rd-menu-item:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D));
  outline-offset:-2px; }
.clcm-rd-menu-item > i { flex:0 0 auto; font-size:14px; color:var(--clcm-gold-ink, #83662D); }

/* ── filter bar: the control group on the right ───────────────────────────────────
 *
 * .clcm-rd-sel-auto is (0,1,0) ON PURPOSE. It beats .clcm-select from clcm-admin.css
 * (same specificity, later sheet) and LOSES to this sheet's own
 * `.clcm-rd-bar select { width:100% }` phone rule at (0,1,1) — which is what the inline
 * width:auto it replaces was defeating. */
.clcm-rd-bar-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.clcm-rd-sel-auto { width:auto; padding:9px 38px 9px 14px; }

/* ── identity cell: name on top, a faint second line under it ─────────────────────
 *
 * Mockup l.556: a 13.5px/700 navy name block over a 12px faint one. The top line stays a
 * BLOCK, not a flex row, so the inline "Secondary" / "View only" / "was X's" chips that
 * already follow the name keep flowing and wrapping exactly as they did when this was one
 * plain <span>. The name keeps .clcm-rd-title and all of its existing rules.
 *
 * The sub-line is --clcm-text-muted, NOT the mockup's own fainter grey: that shade is the
 * README's --clcm-text-faint, which no stylesheet defines, and this sheet is not the place to
 * invent a token. The line therefore reads a little darker than the mockup — noted as a
 * deviation rather than papered over with a literal. */
/* .clcm-rd-idt is defined in the LIBRARY block above as a flex column with gap:2px; this
   screen's -top/-sub children sit in it unchanged, and -sub drops its own margin-top so the
   two spacings cannot add up. */
.clcm-rd-idt-top { display:block; line-height:1.3; }
.clcm-rd-idt-sub { display:block; font-size:12px; line-height:1.35;
  overflow-wrap:anywhere; color:var(--clcm-text-muted, #5A6478); }
/* The mailto is the third anchor on this screen, so it needs the same guard against core's
   `a:hover, a:active { color:#135e96 }` as the two above: the ink is inherited at rest and
   restated under .clcm-wrap for hover and active. The underline is the hover affordance.
   position/z-index: a.clcm-rd-title::after spans the whole row and paints over static inline
   content, so a real link inside the row has to be lifted clear of it — the same lift this
   mailto carried inline when the email was its own column. */
.clcm-rd-idt-sub a { position:relative; z-index:1; text-decoration:none; }
.clcm-rd-idt-sub a, .clcm-rd-idt-sub a:link, .clcm-rd-idt-sub a:visited,
.clcm-rd-idt-sub a:hover, .clcm-rd-idt-sub a:focus, .clcm-rd-idt-sub a:active,
.clcm-wrap .clcm-rd-idt-sub a:hover, .clcm-wrap .clcm-rd-idt-sub a:active { color:inherit; }
.clcm-rd-idt-sub a:hover, .clcm-rd-idt-sub a:focus { text-decoration:underline; }
.clcm-rd-idt-sub a:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D));
  outline-offset:2px; border-radius:3px; }

/* ── select column (a plugin feature; the mockup has no checkboxes) ───────────────
 * (0,2,1), so it outranks this sheet's own `.clcm-rd-table thead th` at (0,1,2). */
.clcm-rd-table th.col-check, .clcm-rd-table td.col-check { width:34px; text-align:center; }
.clcm-rd-table td.col-check input[type="checkbox"] { position:relative; z-index:1; margin:0;
  accent-color:var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); }

/* ── icon-only row actions (eye / pencil; also a plugin feature) ──────────────────
 *
 * Mockup l.301: a 26px bordered square, muted ink, 14px glyph. 28px here because these are
 * real controls rather than the mockup's decorative spans, and 24px is below the comfortable
 * touch floor. One class over both an <a> and a <button>, so the button chrome is reset.
 *
 * THE EYE IS AN ANCHOR, and WordPress core's load-styles.php carries
 * `a:hover, a:active { color:#135e96 }` at (0,1,1) — the WordPress blue the owner reported
 * today. The resting muted ink is therefore restated for every link state, and again under
 * .clcm-wrap at (0,3,0) where core cannot reach it. The ink does NOT change on hover: the
 * affordance is the ground and the border, which is also what the mockup draws. */
.clcm-rd-iact { flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center;
  padding:0; border:1px solid var(--clcm-border, #DDD8CE);
  border-radius:var(--clcm-radius-sm, 6px); background:var(--clcm-white, #fff);
  font-size:14px; line-height:1; cursor:pointer; text-decoration:none; box-shadow:none;
  transition:background var(--clcm-dur-hover, .18s) var(--clcm-ease, cubic-bezier(.2,.8,.2,1)),
             color var(--clcm-dur-hover, .18s) var(--clcm-ease, cubic-bezier(.2,.8,.2,1)),
             border-color var(--clcm-dur-hover, .18s) var(--clcm-ease, cubic-bezier(.2,.8,.2,1)),
             transform var(--clcm-dur-press, .14s) var(--clcm-ease, cubic-bezier(.2,.8,.2,1)); }
.clcm-rd-iact, .clcm-rd-iact:link, .clcm-rd-iact:visited,
.clcm-rd-iact:hover, .clcm-rd-iact:focus, .clcm-rd-iact:active,
.clcm-wrap .clcm-rd-iact:hover, .clcm-wrap .clcm-rd-iact:active {
  color:var(--clcm-text-muted, #5A6478); }
.clcm-rd-iact:hover, .clcm-rd-iact:focus, .clcm-rd-iact:active {
  background:var(--clcm-cream, #F7F4EE);
  border-color:var(--clcm-border, #DDD8CE); box-shadow:none; }
.clcm-rd-iact:active { transform:scale(.97); }
.clcm-rd-iact:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D));
  outline-offset:2px; }
.clcm-rd-iact > i { font-size:14px; line-height:1; }

/* ── bulk action bar (not drawn in the mockup; kept per AUDIT.md) ──────────────────
 *
 * display:flex lives here, not inline, so Alpine's x-show / x-cloak own `display` alone.
 * The two TENANT-MEASURED inks stay inline in the partial: `on-gold` comes from
 * CLCM_Whitelabel::viewer_tokens(), and --clcm-on-navy-muted is emitted as html:root only
 * for a branded org. rgba(255,255,255,…) is the one literal family here and it is
 * tenant-safe by construction: it is white at an opacity over whatever navy the org uses. */
.clcm-rd-bulk { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:12px 16px 0; padding:10px 14px; border-radius:var(--clcm-radius-md, 10px);
  background:var(--clcm-navy); color:var(--clcm-white, #fff); font-size:13px;
  box-shadow:0 6px 16px rgba(var(--clcm-navy-rgb, 16,42,67),.18); }
.clcm-rd-bulk > strong { font-weight:700; }
.clcm-rd-bulk-sp { flex:1 1 auto; }
.clcm-rd-bulk .clcm-select { width:auto; padding:7px 30px 7px 12px; }
.clcm-rd-bulk-btn { flex:0 0 auto; height:30px; padding:0 12px; border:0;
  border-radius:var(--clcm-radius-sm, 6px); background:rgba(255,255,255,.15);
  color:var(--clcm-white, #fff); font-size:12.5px; font-weight:700; line-height:1;
  white-space:nowrap; cursor:pointer;
  transition:background var(--clcm-dur-hover, .18s) var(--clcm-ease, cubic-bezier(.2,.8,.2,1)),
             transform var(--clcm-dur-press, .14s) var(--clcm-ease, cubic-bezier(.2,.8,.2,1)); }
.clcm-rd-bulk-btn:hover, .clcm-rd-bulk-btn:focus { background:rgba(255,255,255,.26); }
.clcm-rd-bulk-btn:active { transform:scale(.97); }
.clcm-rd-bulk-btn:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D));
  outline-offset:2px; }
/* The ink is set inline by the partial (per-tenant), so only the ground belongs here.
   The hover is a brightness step rather than --clcm-gold-dark: that token is defined in
   clcm-admin.css and NOT in clcm-public.css, and a bare read of it would void the whole
   declaration on the surface that lacks it. brightness() needs no token and no literal. */
.clcm-rd-bulk-btn--go { background:var(--clcm-gold); }
.clcm-rd-bulk-btn--go:hover, .clcm-rd-bulk-btn--go:focus { filter:brightness(.95); }
.clcm-rd-bulk-btn--quiet { background:transparent; }
.clcm-rd-bulk-btn--quiet:hover, .clcm-rd-bulk-btn--quiet:focus { background:rgba(255,255,255,.14); }

/* ── empty state: one muted sentence, no illustration (README) ────────────────────
 * Scoped to its own class so the shared .clcm-empty-state on other screens is untouched. */
/* ── phone ────────────────────────────────────────────────────────────────────────
 *
 * The table already scrolls sideways here (README: "tables scroll horizontally") from this
 * sheet's existing @media (max-width:640px) block, and that block's
 * `.clcm-rd-ident > span:last-child { min-width:0; overflow-wrap:break-word }` still matches
 * .clcm-rd-idt, so the two-line identity cell wraps rather than blowing the column out.
 *
 * The col-check rule is a FIX, not new styling. That same block sets
 * `.clcm-rd-table thead th:first-child, .clcm-rd-table tbody td:first-child { min-width:180px }`
 * for the identity column — but on THIS screen the first cell is the 34px select box, which a
 * min-width overrides regardless of any width, so the phone layout spent 180px on a checkbox.
 * (0,2,1) beats that rule's (0,1,2). .col-check exists on no other screen. */
@media (max-width:640px) {
  .clcm-rd-bulk { margin:12px 12px 0; }
  .clcm-rd-table thead th.col-check, .clcm-rd-table tbody td.col-check { min-width:0; width:34px; }
}

/* ═══ METRICS ═══ */
/* ═══ METRICS — admin/partials/metrics/clcm-metrics-dashboard.php ═══════════════════════════
 *
 * THE STAT STRIP'S CELL, WORN BY THREE PINNED CLASS NAMES.
 *
 * That screen's cells cannot carry .clcm-rd-stat-l / -n / -hint like every other strip: two
 * regression tests read its figures straight out of the markup through the pre-redesign names,
 * and in the pre-redesign ORDER.
 *   tests/test-metrics-dashboard-numbers-v2221.php:117 reads each of the five cards' notes as
 *     <div class="clcm-stat-label">LABEL</div> immediately followed by <div class="clcm-hint">;
 *   tests/test-metrics-index-v2222.php:1030 reads the Index card as <div class="clcm-stat-value">
 *     then the label then <div class="clcm-hint">.
 * Both want the value BEFORE the label; the mockup puts the label above the number
 * (mockups/Waymark Coach v2.dc.html:501-505). So the partial keeps the DOM those tests pin, and
 * these rules put the three children back in the mockup's order and give them the strip's own
 * type — the same declarations .clcm-rd-stat-l / -n / -hint carry, so a Metrics cell renders
 * identically to a Home or Reports one.
 *
 * `order` is safe here: a cell is three static divs with nothing focusable in it, so no tab order
 * and no reading order rides on the visual sequence — a screen reader hears "72, Average
 * Transformation Index, across 3 clients", which is the sentence in either direction.
 *
 * SCOPED TO .clcm-metrics, because .clcm-stat-value / .clcm-stat-label / .clcm-hint are the
 * pre-redesign vocabulary and are still on ~20 other screens, which this must not restyle.
 */
.clcm-metrics .clcm-rd-stat,
.clcm-platform .clcm-rd-stat,
.clcm-invoices .clcm-rd-stat { display:flex; flex-direction:column; min-width:0; }
.clcm-metrics .clcm-rd-stat > .clcm-stat-label,
.clcm-platform .clcm-rd-stat > .clcm-stat-label,
.clcm-invoices .clcm-rd-stat > .clcm-stat-label { order:1; margin:0 0 4px; font-size:12.5px;
  font-weight:600; line-height:1.3; color:var(--clcm-text-muted, #5A6478);
  text-transform:none; letter-spacing:0; }
.clcm-metrics .clcm-rd-stat > .clcm-stat-value,
.clcm-platform .clcm-rd-stat > .clcm-stat-value,
.clcm-invoices .clcm-rd-stat > .clcm-stat-value { order:2; margin:0; font-size:28px; line-height:1;
  font-family:var(--clcm-font-serif, 'Lora', Georgia, serif); font-weight:600;
  color:var(--clcm-navy); font-variant-numeric:tabular-nums; }
.clcm-metrics .clcm-rd-stat > .clcm-hint,
.clcm-platform .clcm-rd-stat > .clcm-hint,
.clcm-invoices .clcm-rd-stat > .clcm-hint { order:3; margin:6px 0 0; font-size:12px;
  font-weight:600; line-height:1.35; color:var(--clcm-text-muted, #5A6478); }

/* .clcm-platform rides the four rules above rather than restating them: the Platform screen's
 * two stat strips are the same component, and its cells keep the PRE-redesign .clcm-stat-value /
 * .clcm-stat-label names on purpose — test-platform-revenue-tiles-v2211.php reads the platform's
 * monthly revenue straight out of that exact DOM pair, and three money assertions hang off the
 * one capture. Renaming the children would not make the figure wrong, it would make it
 * UNREADABLE, and the revenue would quietly stop being checked. Same reason .clcm-metrics does it.
 */

/* ONE RHYTHM DOWN THE SCREEN. The mockup's page is a column with a 14px gap (Waymark Coach
   v2.dc.html:492); .clcm-rd-card declares no margin of its own, which is why every card on this
   screen used to carry an inline margin-top. The strip's bottom margin is dropped so the gap is
   stated in exactly one place. */
.clcm-metrics > * + .clcm-rd-card,
.clcm-metrics > * + .clcm-rd-stats { margin-top:16px; }
.clcm-metrics > .clcm-rd-stats { margin-bottom:0; }

/* ═══ REPORTS ═══ */
/* ═══ REPORTS — the date-range disclosure, and five small vocabulary additions ═══════════════
   admin/partials/reports/clcm-reports.php. Everything else that screen now uses is already in
   this sheet (.clcm-rd-head, .clcm-rd-tabs, .clcm-rd-stats, .clcm-rd-card, .clcm-rd-bar,
   .clcm-rd-table, .clcm-rd-notice); these are the pieces it had nowhere to borrow from.

   APPEND AT THE END OF THE FILE. .clcm-rd-stat-n--muted is a single class, like the
   .clcm-rd-stat-n it narrows, so it wins on order rather than on specificity.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the date-range button, and the real form underneath it ──────────────────────────────────
   The design's header carries one button stating the range (Waymark Coach v2.dc.html:1348) and
   no fields. The product's two date boxes, the org "Showing" select and Apply are what actually
   drive the screen, so the button discloses them instead of replacing them. A <details> needs no
   JS; it does not light-dismiss (Esc and an outside click do not close one), so the panel is
   closed by pressing the button again.

   A STYLED <summary> MUST STOP BEING A LIST ITEM. .clcm-btn sets display:inline-flex, which
   already drops the ::marker in Chromium and Firefox, but Safari draws
   ::-webkit-details-marker regardless — both are turned off here rather than trusting either
   engine's default. There is no caret glyph here: ph-caret-down joined the subset only in v2.317.0 (for the
   shared picker), and this button was drawn without one. */
.clcm-rd-range { position:relative; }
.clcm-rd-range-btn { list-style:none; cursor:pointer; }
.clcm-rd-range-btn::-webkit-details-marker { display:none; }
.clcm-rd-range-btn::marker { content:''; }
.clcm-rd-range-btn > span { white-space:nowrap; }
.clcm-rd-range[open] .clcm-rd-range-btn { background:var(--clcm-surface-tint); }
/* admin.css styles no .clcm-btn:focus-visible, and a <summary> is focusable, so this control
   would have had the browser default ring. gold-text with the hex floor, for the reason given at
   l.95-117 of this file: a var() chain that bottoms out in another var() is void if nothing
   defines the last name, and a voided outline is no focus cue at all. */
.clcm-rd-range-btn:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D));
  outline-offset:2px; }
/* Over the page, not inside the header's flex row: an absolutely positioned panel cannot stretch
   .clcm-page-header-actions when it opens, which is what pushed the title row down. Right-edge
   aligned, because the button sits at the right end of the header. */
.clcm-rd-range-pop { position:absolute; z-index:20; top:calc(100% + 6px); right:0;
  min-width:260px; max-width:min(340px, calc(100vw - 32px)); padding:14px; text-align:left;
  border:1px solid rgba(var(--clcm-navy-rgb),.10); border-radius:var(--clcm-radius-md);
  background:var(--clcm-white); box-shadow:0 12px 32px rgba(var(--clcm-navy-rgb),.18); }
.clcm-rd-range-form { display:flex; flex-direction:column; gap:10px; }
.clcm-rd-range-f { display:flex; flex-direction:column; gap:4px; }
.clcm-rd-range-f > span { font-size:12.5px; font-weight:600; color:var(--clcm-text-muted, #5A6478); }
.clcm-rd-range-f input, .clcm-rd-range-f select { width:100%; }
.clcm-rd-range-form > .clcm-btn { justify-content:center; }

/* ── the stat cell's two extras ──────────────────────────────────────────────────────────────
   "8 / 10" — the denominator belongs to the figure, not to the note under it, so it stays inside
   .clcm-rd-stat-n and is only quietened. And a cell whose value is WORDS rather than a number
   ("Not shown", where an organization has not turned revenue sharing on) takes a smaller size:
   28px Lora on two words reads as a headline that something is wrong. */
.clcm-rd-stat-of { font-size:16px; font-weight:500; color:var(--clcm-text-muted, #5A6478); margin-left:4px; }
.clcm-rd-stat-n--muted { font-size:17px; color:var(--clcm-text-muted, #5A6478); }

/* ── empty state: one muted sentence, no illustration (README, "Empty states") ───────────── */
/* ── two cell helpers ────────────────────────────────────────────────────────────────────────
   A right-aligned money column (the mockup's own `['Amount',1]` flag) and the warn ink that
   "No activity yet" used to read inline as var(--clcm-gold-dark). It is --clcm-gold-ink here,
   the same token .clcm-rd-stat-hint--warn reads, so this sheet has one gold for text on light. */
.clcm-rd-right { text-align:right; }
.clcm-rd-warn-ink { color:var(--clcm-gold-ink); }

/* ── a table's total row ─────────────────────────────────────────────────────────────────────
   Reports is the only coach screen with one, and the figure in it is deliberately NOT the sum of
   the column above ("Hours you delivered" counts a group hour once, the column counts it per
   attendee), so the row has to read as a statement rather than as one more row.

   SCOPED TO .clcm-rd-foot, NOT TO `tfoot`. admin/partials/platform/clcm-billing-history.php has
   a tfoot inside a .clcm-rd-table that this pass has not looked at; a bare element selector here
   would restyle that screen from a file nobody was editing for it. */
.clcm-rd-table .clcm-rd-foot td { background:var(--clcm-surface-tint); padding:12px 16px;
  font-size:13px; font-weight:700; color:var(--clcm-navy); border-bottom:0;
  border-top:1px solid rgba(var(--clcm-navy-rgb),.08); }
.clcm-rd-table .clcm-rd-foot .clcm-rd-total { color:var(--clcm-gold-ink); }

/* ── phones: the panel is not a popover once the button is full width ───────────────────────
   admin.css:1940 gives every child of .clcm-page-header-actions width:100% below 782px, so the
   disclosure fills the row and its panel belongs in the flow under it. */
@media (max-width:782px) {
  .clcm-rd-range, .clcm-rd-range-btn { width:100%; }
  .clcm-rd-range-btn { justify-content:center; }
  .clcm-rd-range-pop { position:static; width:100%; max-width:none; margin-top:8px; box-shadow:none; }
}

/* ── the empty state, merged ──────────────────────────────────────────────────────
 * Two agents defined .clcm-rd-empty for the same name and two different shapes: the
 * Clients list puts the class on a DIV holding an <h3> and a <p>; Reports puts it on a
 * bare <p> that IS the sentence. So the base carries the muted sentence typography — the
 * bare-<p> case needs it — and the child rules dress the heading case over the top.
 * margin:0 is for the <p> case, whose browser default margin would otherwise show. */
.clcm-rd-empty { margin:0; padding:26px 16px 30px; font-size:13.5px; line-height:1.5;
  color:var(--clcm-text-muted, #5A6478); }
.clcm-rd-empty h3 { margin:0 0 6px; font-family:var(--clcm-font-serif, 'Lora', Georgia, serif);
  font-weight:600; font-size:17px; line-height:1.3; color:var(--clcm-navy); }
.clcm-rd-empty p { margin:0 0 14px; font-size:13.5px; line-height:1.5; max-width:52ch;
  color:var(--clcm-text-muted, #5A6478); }

/* ── a page-level grid of cards standing side by side ──────────────────────────────
   Deliberately UNSCOPED and generically named: the Platform support view is the first
   screen to want it, not the last. It replaces an inline
   display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px with the
   same measurements, so nothing moves today. The 18px is that screen's existing value
   rather than the 14px page rhythm. Reads no token, so neither host can lose it. */
.clcm-rd-cardgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:18px; align-items:start; }

/* ── .clcm-rd-del worn over a SECONDARY button (Platform: Decline, Suspend) ────────
   The .clcm-rd-del rule above already out-ranks .clcm-btn-secondary on ink, ground and
   border. But .clcm-btn-secondary:hover ALSO raises --clcm-shadow-sm, the gold-tinted lift,
   which left a gold shadow under a button that had just gone red. Decision 5C's restraint is
   a flat hover. */
.clcm-wrap .clcm-btn-secondary.clcm-rd-del:hover,
.clcm-wrap .clcm-btn-secondary.clcm-rd-del:focus { box-shadow:none; }

/* ── Settings sub-nav: GROUPED ─────────────────────────────────────────────────────
   The rail's 15 flat items became four labelled groups (Account / Client communication /
   Integrations / Practice) — the mockup's own grouping. The group WRAPPER is structurally
   required: .clcm-rd-subnav is itself the flex column, so without it the anchors become
   children of a plain block div and lose the column gap.

   No :hover/:focus/:active restatement here on purpose — nothing below is an anchor. The
   items keep .clcm-settings-nav-item / .clcm-rd-subnav a, which already restate all three
   states and so already out-rank core's a:hover{color:#135e96}. A heading is a <p>. */
.clcm-rd-subnav .clcm-rd-subnav-g { display:flex; flex-direction:column; gap:2px; }
/* 10px, not the mockup's 12: this margin STACKS on the gap the container already applies to
   its flex children (2px here, 4px on .clcm-settings-nav). Unrendered — tune on a real one. */
.clcm-rd-subnav .clcm-rd-subnav-g + .clcm-rd-subnav-g { margin-top:10px; }
.clcm-rd-subnav .clcm-rd-subnav-h { margin:0; padding:0 8px 4px;
  font-size:11.5px; font-weight:700; line-height:1.3; color:var(--clcm-text-muted, #5A6478); }
/* A section that is broken or blocking carries a dot (S16-2.15). The label takes the room, so the dot sits at the
   right; it WRAPS rather than ellipsising, so a long label is never cut. The dot is gold INK, not the mock-up's
   light gold (2.2:1 on white, too faint for the only visual cue); the word is there for a screen reader. */
.clcm-rd-subnav a .clcm-set-l { flex:1; min-width:0; overflow-wrap:anywhere; }
.clcm-set-dot { flex:none; width:7px; height:7px; border-radius:50%; background:var(--clcm-gold-ink); }   /* both hosts define it; its forced-colours rule is in the v2.325.0 block */

/* ═══ THE CLIENT PROFILE, SECOND PASS ═══════════════════════════════════════════════ */

/* ── a RECORD row ──────────────────────────────────────────────────────────────────
   The mockup draws ONE row on five of this screen's tabs: a date (or a title) with its
   controls on the right, prose beneath, hairline-separated inside a single panel rather than
   stacked as bordered cards. Session Notes, Action Items, Journal, Worksheets and
   Certification each carried their own inline-styled wrapper before this.
   MERGE NOTE: the Groups and Whiteboards detail screens draw this same row. One copy. */
.clcm-rd-rec { padding:14px 18px; border-top:1px solid rgba(var(--clcm-navy-rgb), .07); }
.clcm-rd-rec:first-child { border-top:0; }
/* --inset: the same row in a panel body that keeps its own padding (Journal, Worksheets), so
   the row contributes only vertical rhythm and the hairline insets with the body. */
.clcm-rd-rec--inset { padding:14px 0; }
/* --mid: a one-line row with its control centred on it (Action Items). */
.clcm-rd-rec--mid { display:flex; align-items:center; gap:14px; }
.clcm-rd-rec-head { display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:8px; }
/* --top: a left-aligned cluster that wraps — a title with its state pills beside it. */
.clcm-rd-rec-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.clcm-rd-rec-when { font-size:13px; font-weight:700; color:var(--clcm-navy); }
.clcm-rd-rec-by { font-weight:500; color:var(--clcm-text-muted, #5A6478); }
.clcm-rd-rec-t { font-size:14px; font-weight:700; color:var(--clcm-navy); }
.clcm-rd-rec-body { font-size:13.5px; line-height:1.55; color:var(--clcm-text, #1A1A2E);
  margin-top:4px; }
.clcm-rd-rec-task { font-size:13.5px; line-height:1.45; color:var(--clcm-text, #1A1A2E); }
/* A completed item is STRUCK THROUGH as well as muted. The strike is the signal that survives
   greyscale and a colour-blind reader; the opacity:.6 this replaces was colour alone. */
.clcm-rd-rec-task.is-done { text-decoration:line-through; color:var(--clcm-text-muted, #5A6478); }
.clcm-rd-rec .clcm-rd-meta { margin-top:8px; }
.clcm-rd-rec--mid .clcm-rd-meta { margin-top:2px; }
.clcm-rd-rec-cta { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
/* The empty states reuse .clcm-rd-ico for the glyph they already had, so this adds only its
   breathing room rather than a second icon class. */
.clcm-rd-empty > .clcm-rd-ico { margin-bottom:10px; }

/* ── a row title that is a LINK ────────────────────────────────────────────────────
   .clcm-rd-lrow-t carries typography only, so an <a> wearing it turns #135e96 under the
   cursor — core's a:hover,a:active at (0,1,1) beats a lone class. Every state restated.
   NOT a.clcm-rd-title: that class carries ::after{position:absolute;inset:0}, which is
   unscoped — inside a .clcm-rd-lrow (not positioned) it would size to whatever ancestor IS
   positioned and swallow the row's own Download and Remove buttons. */
.clcm-wrap a.clcm-rd-lrow-t, .clcm-wrap a.clcm-rd-lrow-t:link,
.clcm-wrap a.clcm-rd-lrow-t:visited { color:var(--clcm-navy); text-decoration:none; }
.clcm-wrap a.clcm-rd-lrow-t:hover, .clcm-wrap a.clcm-rd-lrow-t:focus,
.clcm-wrap a.clcm-rd-lrow-t:active { color:var(--clcm-gold-ink); text-decoration:underline; }
a.clcm-rd-lrow-t:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold));
  outline-offset:2px; border-radius:3px; }

/* ── .clcm-rd-del WORN OVER .clcm-rd-iact ──────────────────────────────────────────
   A REAL COLLISION, measured, not a precaution. `.clcm-wrap .clcm-rd-iact:hover` pins the ink
   muted at (0,3,0) and sits LATER in this file (l.1906) than `.clcm-wrap .clcm-rd-del:hover`
   (l.1572), which is also (0,3,0) — so the bin button on five tabs of the client profile
   would stay grey under the cursor and decision 5C's "red only on hover" would never arrive.
   (0,4,0) settles it by specificity instead of by source order. Same alert trio as -del.

   THE SECOND RULE is for the three buttons that must keep .clcm-metric-act--danger
   (test-client-purge-v251.php counts >= 3 of it in that partial, so it cannot be dropped):
   that class ships padding:4px 8px;font-size:16px because every hand-written use of it was a
   bare × glyph, which is not a 28px icon button's shape. */
.clcm-wrap .clcm-rd-iact.clcm-rd-del:hover, .clcm-wrap .clcm-rd-iact.clcm-rd-del:focus,
.clcm-wrap .clcm-rd-iact.clcm-rd-del:active {
  background:#FBEFEC; border-color:#EDCFC7; color:#9A3B2B; }
.clcm-wrap .clcm-rd-iact.clcm-metric-act--danger { padding:0; font-size:14px; line-height:1; }

/* ── the themes rail: label | rail | count ─────────────────────────────────────────
   A MODIFIER on .clcm-rd-prog, not a second bar component: the track, the fill and the
   navy->gold switch are reviewed there already, including why the track is a tenth of the
   navy rather than the mockup's own cream. Replaces a hand-rolled bar on a #EEF1F5 track. */
.clcm-rd-prog--wide { gap:12px; }
.clcm-rd-prog--wide .clcm-rd-prog-l { flex:0 0 130px; font-size:13px; font-weight:700;
  color:var(--clcm-navy); }
.clcm-rd-prog--wide .clcm-rd-prog-track { flex:1 1 auto; width:auto; height:8px; }
.clcm-rd-prog--wide .clcm-rd-prog-n { flex:0 0 34px; text-align:right; font-weight:400;
  color:var(--clcm-text-muted, #5A6478); }

/* ── a verification number ─────────────────────────────────────────────────────────
   MERGE NOTE: the Certification screen prints the same code and wants the same treatment. */
.clcm-rd-code { color:var(--clcm-navy); font-variant-numeric:tabular-nums; letter-spacing:.03em; }

/* ── conversation bubbles ──────────────────────────────────────────────────────────
   One solid navy side, one tinted side with a hairline. The AI tab's loop hand-picked four
   reds for a flagged line; the flagged state now borrows the notice component's reviewed
   alert trio, and the word "flagged" plus a ph-warning carries the tone, so colour is never
   the only signal.
   --end / --solid, NOT --me / --them, on purpose: on this screen the CLIENT's line is the
   right-hand solid one, the opposite of the mockup's own "me", and a name that encodes the
   speaker would be wrong on half the surfaces that want this.
   --flag sits after --solid so a flagged client line reads as flagged (order, same (0,2,0)).
   MERGE NOTE: the Inbox screen draws these same bubbles. */
.clcm-rd-bubs, .clcm-ib-thread { display:flex; flex-direction:column; gap:12px; }
.clcm-rd-bub, .clcm-ib-thread > .clcm-msg { max-width:80%; align-self:flex-start; }
.clcm-rd-bub--end, .clcm-ib-thread > .clcm-msg--mine { align-self:flex-end; }
.clcm-rd-bub-who, .clcm-ib-thread .clcm-msg-time { font-size:11px; line-height:1.4; margin:0 4px 3px;
  color:var(--clcm-text-muted, #5A6478); }
.clcm-rd-bub--end .clcm-rd-bub-who { text-align:right; }
.clcm-rd-bub-t, .clcm-ib-thread .clcm-msg .clcm-msg-bubble { padding:10px 14px; border-radius:var(--clcm-radius-xl, 14px);
  font-size:13.5px; line-height:1.6; white-space:pre-wrap;
  background:var(--clcm-cream); color:var(--clcm-text, #1A1A2E);
  border:1px solid rgba(var(--clcm-navy-rgb), .10); }
.clcm-rd-bub--solid .clcm-rd-bub-t,
.clcm-ib-thread .clcm-msg--mine .clcm-msg-bubble { background:var(--clcm-navy);
  color:var(--clcm-on-navy-strong, #fff); border-color:transparent; }
.clcm-rd-bub--flag .clcm-rd-bub-t { background:#FBEFEC; border-color:#EDCFC7; color:#9A3B2B; }
.clcm-rd-bub-flagged { font-weight:700; color:#9A3B2B; }

/* ═══ SECURITY ═════════════════════════════════════════════════════════════════════ */

/* ── a status pill that carries an ICON as well as a word ──────────────────────────
   The tone map already gives each pill its own tint, but on the audit log that tint was the
   ONLY thing separating "Signed in" from "Crisis escalation FAILED — owner not emailed":
   severity was carried by colour alone, which the tone rule forbids. The glyph is the same
   fact drawn as a SHAPE, so the tier survives a reader who cannot see hue, a greyscale print
   and a tenant palette. The pill's word is unchanged — it is still the action label, and the
   tier still comes from clcm_rd_tone() and nothing else.

   --ico suppresses the 6px dot .clcm-rd-pill::before draws: a dot AND a glyph is two marks
   for one fact. The <i> is aria-hidden in the markup, so a screen reader hears what it did
   before. MERGE NOTE: no other pill in the plugin holds an icon yet; the next one that wants
   to wants these two rules, not its own. */
.clcm-rd-pill--ico::before { display:none; }
.clcm-rd-pill > i { flex:0 0 auto; font-size:12px; line-height:1; }

/* ── an identifier inside a pill ───────────────────────────────────────────────────
   The exempted reviewer accounts are chips, each holding the account in a <code>. NOTHING in
   this plugin normalises <code>, so WordPress core's own
     code { padding:3px 5px 2px; background:rgba(0,0,0,.07); font-size:13px }
   applies and draws a grey box inside the chip, taller than the chip itself. The monospace
   family is the point and stays; the box does not.
   MERGE NOTE: generic — any chip or pill printing an id, a slug or an address wants it. */
.clcm-rd-pill code { margin:0; padding:0; background:none; border:0; border-radius:0;
  font-size:inherit; font-weight:inherit; color:inherit; }

/* ── an address in a table cell ────────────────────────────────────────────────────
   The audit log's IP column. Monospace so a column of addresses aligns digit for digit —
   scanning for a repeated address is the whole reason the column is there. Replaces three
   inline declarations on that one cell.
   MERGE NOTE: the Platform screen prints addresses too; when it needs them it wants this
   rule, not a second one. */
.clcm-rd-table td.clcm-rd-ip { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12.5px; color:var(--clcm-text-muted, #5A6478); white-space:nowrap; }
/* v2.389.0 — the audit log's action pill may wrap. Pills never wrap anywhere else, and here one long
   label ("Visitor address forwarded from outside the CDN — not trusted") took half the table and pushed
   the IP column out of a panel that clips. */
.clcm-wrap .clcm-rd-table.clcm-sec-audit .clcm-rd-pill { white-space:normal; height:auto; min-height:22px; max-width:300px;
  padding-top:3px; padding-bottom:3px; line-height:1.25; text-align:left; }
.clcm-wrap .clcm-rd-table.clcm-sec-audit .clcm-rd-pill > i { align-self:flex-start; margin-top:2px; }
.clcm-wrap .clcm-rd-table.clcm-sec-audit td:nth-child(2) { min-width:240px; }

/* ── the last settings row in a panel whose body ALSO holds an inline <script> ─────
   .clcm-rd-field:last-child (l.376) is what removes the hairline under a panel's final row.
   A <script> element is a sibling like any other, so in a panel whose body ENDS with the
   script that drives its own controls, :last-child matches the SCRIPT — the last visible row
   keeps its border and the card closes on a stray rule above its own padding.

   :last-of-type is by TAG, so this can only match when the last div child really is a field;
   it can only ever remove a border that should not be there. It complements the rule at l.376
   rather than replacing it. Deliberately unscoped: every panel in this shape is fixed by it,
   and only in that direction. */
.clcm-rd-panel-body > .clcm-rd-field:last-of-type { border-bottom:0; }

/* ═══ THE PORTAL'S PHONE APP BAR ═══════════════════════════════════════════════════
   The mockup's phone top chrome: the screen's name and the client's own face, above every
   screen. Nearly all of the phone shell already existed — the five-tab bar, the More sheet,
   the scrim, the safe-area insets and the rail swap at 860px — and was left alone. This was
   the one real gap: a phone opened with the full desktop masthead and then the page, and
   nothing stayed put to say where you were.

   Markup: public/class-clcm-public.php, right after .clcm-portal-nav-wrap, which is where the
   tab list and the screen-title map are in scope. The title map was MOVED there rather than
   copied, so the bar and the screen's own h1 cannot come to disagree about a screen's name.

   MERGE NOTE: the coach mobile shell wants this same bar — these rules, not a second name.

   display:none is the DEFAULT rather than a desktop override, so the bar can never appear
   beside the 232px rail even if the phone block below is edited later. */
.clcm-portal-appbar { display: none; }

@media (max-width: 860px) {
  .clcm-portal-appbar {
    /* FIXED, not sticky: the bar is emitted after the rail, so document order would put a
       sticky bar BELOW the masthead instead of above it. z-index 30 is deliberate — under the
       More sheet (42) and its scrim (41), because that sheet is modal and must dim this too;
       under .clcm-skip-link (100), so a focused skip link still paints over it; under the crop
       dialog and the crisis panel. */
    position: fixed; top: 0; left: 0; right: 0; z-index: 30;
    box-sizing: border-box;
    display: flex; align-items: center; gap: 10px;
    /* 34px avatar + 8px above and below = the 50px .clcm-portal-shell clears. */
    min-height: 50px;
    padding: 8px 16px;
    /* The notch. The tab bar does the same at the other end with env(safe-area-inset-bottom);
       neither assumes a device that has one, hence the 0px fallback. */
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    /* The same ground and hairline as .clcm-portal-tabbar, so the two ends of the shell match:
       the literal white is the one that rule uses, and the hairline is tenant-aware. */
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid rgba(var(--clcm-navy-rgb), .08);
    -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px);
  }
  /* The brand, kept SHORT so the bar stays 50px and the page still starts high — Jose asked
     for the logo up here but "make sure the page doesn't stay too long on top". 26px leaves
     the 8px of air above and below that the bar was built around. */
  .clcm-portal-appbar-logo {
    flex: 0 1 auto; min-width: 0; max-height: 26px; max-width: 150px;
    width: auto; height: auto; object-fit: contain; object-position: left center; display: block; }
  /* …and it is not drawn twice: the page's own masthead logo stands down at this width. */
  .clcm-portal-topbar .clcm-portal-logo { display: none; }

  /* Plain text, not a heading: the screen's own h1 sits just below, and two headings saying the
     same word is one too many to read out. */
  .clcm-portal-appbar-title {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--clcm-font-body, 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif);
    font-size: 13px; font-weight: 700; color: var(--clcm-text-muted, #5A6478);
  }
  /* The client's face, and the way to My Profile. --clcm-gold-text-rgb is defined by NEITHER
     host on purpose; read with a fallback it is the house idiom, copied from .clcm-portal-avatar.
     --clcm-gold-ink is read BARE because both hosts define it — and because a hex fallback here
     would be one more swept gold literal in a file whose count is pinned. */
  .clcm-portal-appbar-me {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--clcm-border);
    background: rgba(var(--clcm-gold-text-rgb, var(--clcm-gold-rgb)), .18);
    font-family: var(--clcm-font-heading, 'Lora', Georgia, serif);
    font-size: 12.5px; font-weight: 600; line-height: 1;
    color: var(--clcm-gold-ink);
    text-decoration: none;
  }
  /* Core ships a:hover,a:active{color:#135e96} at (0,1,1), so a new anchor class that states
     its colour once turns admin blue under a thumb. A client WITH a photo carries
     color:transparent inline, which beats all of these — so this is the no-photo initial's
     defence. */
  .clcm-portal-appbar-me:hover,
  .clcm-portal-appbar-me:focus,
  .clcm-portal-appbar-me:active {
    color: var(--clcm-gold-ink); text-decoration: none;
    background: rgba(var(--clcm-gold-text-rgb, var(--clcm-gold-rgb)), .28);
  }

  /* EN · ES and Log out at the bar's right (v2.380.0) — the rail's foot, which a phone never
     shows. Quiet: 12.5px in the portal's body face. The ink is set inline on the group (the
     tenant-measured $clcm_plight) and EVERY state inherits it here at (0,2,1), above core's
     a:hover / a:active blue at (0,1,1). Each link is a 44px target held to the bar's 33px of
     content (50 less 8+8 padding and the 1px hairline) by a -6px margin, so the bar stays 50px. The logo yields width before these do. */
  .clcm-portal-appbar-tools {
    flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 2px;
    font-family: var(--clcm-font-body, 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif);
    font-size: 12.5px; line-height: 1; white-space: nowrap;
  }
  .clcm-portal-appbar-lang { display: inline-flex; align-items: center; }
  .clcm-portal-appbar-lang > span { padding: 0 1px; }   /* the · : its ink is measured inline, never an opacity */
  .clcm-portal-appbar-tools a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; margin: -6px 0; padding: 0 7px; border-radius: 8px;
    font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .clcm-portal-appbar-tools a,
  .clcm-portal-appbar-tools a:link,
  .clcm-portal-appbar-tools a:visited,
  .clcm-portal-appbar-tools a:hover,
  .clcm-portal-appbar-tools a:focus,
  .clcm-portal-appbar-tools a:active { color: inherit; text-decoration: none; }
  .clcm-portal-appbar-lang a { opacity: .7; }
  /* The language in use: full ink, bold, and a short underline under it — never colour alone. */
  .clcm-portal-appbar-lang a[aria-current] {
    opacity: 1; font-weight: 800;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
    text-decoration-color: var(--clcm-gold-ink);
  }
  .clcm-portal-appbar-tools a:hover { background: rgba(var(--clcm-navy-rgb), .06); }
  .clcm-portal-appbar-tools a:active { background: rgba(var(--clcm-navy-rgb), .1); }
  .clcm-portal-appbar-tools a:focus { outline: none; }
  .clcm-portal-appbar-tools a:focus-visible { outline: 2px solid var(--clcm-gold-ink); outline-offset: -2px; }
  .clcm-portal-appbar-tools .clcm-portal-appbar-out { gap: 5px; margin-left: 4px; }
  .clcm-portal-appbar-out .ph { font-size: 17px; }

  /* The fixed bar's own height, so no screen opens underneath it. Scoped to
     .clcm-portal-shell, NOT .clcm-portal: the paused-workspace notice and the coach's own view
     of /portal/ are also .clcm-portal, are built as strings, and carry no bar — on .clcm-portal
     both of them opened with 50px of empty cream. Two tests pin those fragments as literally
     <div class="clcm-portal">, which is the other reason the new class goes only on the main
     render. */
  .clcm-portal-shell { padding-top: calc(50px + env(safe-area-inset-top, 0px)); }

  /* THE MASTHEAD COLLAPSES on every screen but Home and My Profile — the allowlist is in
     class-clcm-public.php beside the header. Row 1 (logo · EN · ES · Log out) stays on every
     phone tab, so nothing becomes unreachable; it is row 2 — the 72px avatar, the script
     greeting, the name, the org's welcome line and the coach chip — that the mockup's phone
     shows on Home alone, where the greeting lives inside the Home branch rather than the shell.
     Three classes so this holds wherever it is merged relative to
     `.clcm-portal .clcm-portal-header`, which sets the 18px margin at (0,2,0). */
  .clcm-portal .clcm-portal-header.clcm-portal-header-slim { margin-bottom: 8px; }
  .clcm-portal .clcm-portal-header-slim .clcm-portal-idrow { display: none; }
}

/* ── THE INBOX: the two places the shared renderer's shape differs from the component ──
 * ORDER MATTERS IN BOTH OF THESE. Each must stay AFTER the rule it corrects, above.
 *
 * white-space: CLCM_Messaging::render_thread() emits "a<br />\n b" — the newline SURVIVES the
 * <br>, so the component's white-space:pre-wrap would render every line break TWICE. A test pins
 * that nl2br, so the renderer is not the thing to change.
 *
 * The stamp's air flips sides, because the renderer puts the time BELOW the bubble while the
 * component's own -who line sits above it. */
.clcm-ib-thread .clcm-msg .clcm-msg-bubble { white-space:normal; }
.clcm-ib-thread .clcm-msg-time { margin:3px 4px 0; }

/* ── a hairline under each Inbox pane's header ─────────────────────────────────────
 * The mockup draws one under both; the screen had none, so each header ran straight into
 * its first row. */
.clcm-ib-list > .clcm-rd-bar, .clcm-ib-pane > .clcm-rd-bar {
  border-bottom:1px solid rgba(var(--clcm-navy-rgb), .08); }

/* ── TRAP 1 ON TWO CLASSES THAT PREDATE THE REDESIGN ──────────────────────────────
 * Measured, not guessed: .clcm-ib-row sets its colour at (0,1,0) and .clcm-ib-filter likewise,
 * and NEITHER restates :active, and neither is scoped. Core ships
 * `a:hover, a:active { color:#135e96 }` at (0,1,1) from load-styles.php, so core wins on :active
 * — which is precisely the KEYBOARD path: pressing Enter on a focused row sets :active with no
 * :hover to out-rank it, so a keyboard user gets an admin-blue flash on every conversation they
 * open. A mouse user never sees it, which is why it survived this long.
 *
 * INTERNAL ORDER IS LOAD-BEARING: the .is-on grounds come LAST on purpose. The newly-scoped
 * hover ground is (0,2,1), which would otherwise out-rank the selected row's cream and make the
 * open conversation lose its highlight the moment the pointer crossed it. */
.clcm-wrap .clcm-ib-filter, .clcm-wrap .clcm-ib-filter:link,
.clcm-wrap .clcm-ib-filter:visited { color:var(--clcm-text-muted, #5A6478); text-decoration:none; }
.clcm-wrap .clcm-ib-filter:hover, .clcm-wrap .clcm-ib-filter:focus,
.clcm-wrap .clcm-ib-filter:active { color:var(--clcm-navy); text-decoration:none; }
.clcm-wrap .clcm-ib-filter.is-on, .clcm-wrap .clcm-ib-filter.is-on:hover,
.clcm-wrap .clcm-ib-filter.is-on:focus,
.clcm-wrap .clcm-ib-filter.is-on:active { color:var(--clcm-navy); }
.clcm-wrap a.clcm-ib-row, .clcm-wrap a.clcm-ib-row:link, .clcm-wrap a.clcm-ib-row:visited,
.clcm-wrap a.clcm-ib-row:hover, .clcm-wrap a.clcm-ib-row:focus,
.clcm-wrap a.clcm-ib-row:active { color:var(--clcm-navy); text-decoration:none; }
.clcm-wrap a.clcm-ib-row:hover, .clcm-wrap a.clcm-ib-row:focus,
.clcm-wrap a.clcm-ib-row:active { background:#FBFAF7; }
.clcm-wrap a.clcm-ib-row.is-on, .clcm-wrap a.clcm-ib-row.is-on:hover,
.clcm-wrap a.clcm-ib-row.is-on:focus,
.clcm-wrap a.clcm-ib-row.is-on:active { background:var(--clcm-cream); }

/* ── a receipt link needs a cue under the cursor ───────────────────────────────────
 * .clcm-rd-meta a above is text-decoration:none in every state and deliberately never
 * changes ink — right for the Library's "N responses" line, which sits inside a row whose
 * title is already the link. But the Membership billing table's Receipt link is somebody's
 * proof of a payment, in its own cell, and it had no hover affordance at all.
 *
 * Scoped to a TABLE CELL so only that case gains one; the meta line under a row title keeps
 * its current behaviour. The colour needs no restating — .clcm-wrap .clcm-rd-meta a:hover/
 * :focus/:active already pins --clcm-gold-ink against core's a:hover,a:active — so this adds
 * the underline and nothing else, and (0,4,1) settles it wherever it lands in the file. */
.clcm-wrap .clcm-rd-table td.clcm-rd-meta a:hover,
.clcm-wrap .clcm-rd-table td.clcm-rd-meta a:focus { text-decoration: underline; }

/* ── A MUTED CELL HAS NEVER BEEN MUTED ─────────────────────────────────────────────
 * `.clcm-rd-table tbody td` (l.149) declares colour at (0,1,2). `.clcm-rd-muted` (l.154) is
 * (0,1,0). Classes tie at one apiece, so the element count decides and the CELL-level
 * .clcm-rd-muted loses — it does nothing at all. It works on a child <span>, where it beats
 * an inherited value, which is why this went unnoticed: both spellings are in the codebase
 * and only one of them works.
 *
 * MEASURED, not estimated: 38 cells across 19 partials wear it on the <td> itself — the
 * dashboard, both client screens, organization, invoices, platform, appointments, both group
 * screens, courses, business centre, packages, security, certification, whiteboards,
 * membership, reports, the library and help. Every one of them was written to be quiet and
 * has been rendering in full body ink.
 *
 * This is a visible change on nineteen screens, and it is the one that makes the markup mean
 * what it says. Found by the Appointment Config pass, which used the <span> form throughout
 * and so needed none of it. */
.clcm-rd-table tbody td.clcm-rd-muted { color:var(--clcm-text-muted, #5A6478); }

/* ── a notice's ACTION when it is a LINK rather than a button ──────────────────────
 * clcm_rd_notice() emits <a class="clcm-rd-notice-act"> when given an href and <button> when
 * not, and .clcm-rd-notice-act was written for the button only: height and the vertical half
 * of its padding do not apply to a non-replaced INLINE element, so an anchor arrives with
 * none of the box — a bordered strip of text where a control should be. Nothing had shipped
 * one until the Calendar Sync tab needed it.
 *
 * GEOMETRY ONLY, AND DELIBERATELY NO INK. The three tone rules
 * (.clcm-rd-notice--info/--warn/--alert .clcm-rd-notice-act) are (0,2,0) and already beat
 * core's a:hover,a:active at (0,1,1) in every state — so restating colour here would instead
 * out-rank THEM and repaint the warn and alert buttons' white text navy. text-decoration is
 * the one property no tone rule declares, which is why it is the one restated across states.
 * The same rule serves the ctxbar and nrow variants the day either is given an href. */
.clcm-wrap a.clcm-rd-notice-act, .clcm-wrap a.clcm-rd-notice-act:link,
.clcm-wrap a.clcm-rd-notice-act:visited, .clcm-wrap a.clcm-rd-notice-act:hover,
.clcm-wrap a.clcm-rd-notice-act:focus, .clcm-wrap a.clcm-rd-notice-act:active {
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.clcm-wrap a.clcm-rd-notice-act:focus-visible {
  outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:2px; }

/* ═══ COURSE EDITOR ════════════════════════════════════════════════════════════════
   Three rules, all pure geometry — not one token is read, so neither host can lose a
   declaration. Everything else this screen needed was already here. */

/* The schedule's day row takes the card's own gutter. The partial carried
   style="padding:16px 24px" on every day, because the panel body is padding:0 (rows run
   edge to edge, the way a table in a card does) while .clcm-schedule-day's own rule in
   clcm-admin.css is `padding:16px 0`. 18px is the gutter .clcm-rd-panel-body uses, so the
   days line up with every other reskinned card instead of sitting 6px further in. */
.clcm-wrap .clcm-rd-panel-body > .clcm-schedule-day { padding:14px 18px; }

/* A meta line stacked UNDER a cell's pill or rail. .clcm-rd-meta carries typography and no
   margin, because its usual home is inside .clcm-rd-idt, which spaces it with gap:2px. The
   two uses here — who signed a course off, under the status pill, and how many items a
   client has read, under the progress rail — are direct children of a <td> with nothing to
   space them. A MODIFIER rather than `.clcm-rd-table td > .clcm-rd-meta`: no other partial
   drops .clcm-rd-meta straight into a cell today, and a modifier cannot start affecting one
   that later does. */
.clcm-rd-meta--stack { margin-top:4px; }

/* The participants table's progress cell keeps room for rail, figure and line. 140px is the
   inline min-width the cell already carried; the 64px rail, the percentage beside it and the
   item-progress line underneath share the column. Screen-scoped for the same reason
   .clcm-cert-progress is: a narrow progress column elsewhere should not inherit a floor it
   does not want. */
.clcm-course-progress { min-width:140px; }

/* ══ /book/ — the public booking wizard ════════════════════════════════════════════════
 *
 * A SCOPE, NOT A SECOND VOCABULARY. The partial keeps every class it had; .clcm-rd-book is
 * added to its wrapper and every rule below is `.clcm-rd-book <that class>`. Nothing in
 * clcm-public.css is redefined, so the page still renders whole without this block, and the
 * coach-side screens that share .clcm-slot / .clcm-cardbtn / .clcm-btn-book are untouched.
 *
 * WHY SO MANY STATES ARE RESTATED. This sheet loads AFTER clcm-public.css, and
 * `.clcm-rd-book .clcm-slot` (0,2,0) TIES with `.clcm-slot.selected` (0,2,0) — so a base rule
 * here would silently win on order alone and the selected slot would lose its navy fill. Every
 * state this block ties with is restated at higher specificity rather than left to the cascade.
 * The same applies to the existing `@media (max-width:480px) .clcm-btn-book` rule: a media
 * query adds no specificity.
 *
 * TOKENS. Only names BOTH hosts define WITH THE SAME VALUE are read bare. --clcm-navy-light,
 * --clcm-gold-light, --clcm-sage-light and --clcm-shadow are deliberately absent: both hosts
 * define each of them with DIFFERENT values, which the portability test forbids in this sheet
 * whether or not a fallback is given. --clcm-cream-dark, --clcm-text-muted and --clcm-font-serif
 * are coach-only, so each carries its value as a fallback. */

.clcm-booking-wrap.clcm-rd-book {
  border: 1px solid rgba(var(--clcm-navy-rgb), .10);
  border-radius: var(--clcm-radius-2xl);
  box-shadow: 0 18px 40px rgba(var(--clcm-navy-rgb), .08);
}

/* THE HEADER KEEPS ITS DARK GROUND. clcm_on_navy_css() prints
   `html .clcm-booking-header p{opacity:1;color:<ink measured against THIS tenant's navy>}` into
   the page's own <head>. A light header would make that ink invisible for every branded tenant,
   and overriding it from here would throw away a per-tenant contrast measurement on an
   unauthenticated page that takes bookings. So nothing here touches a colour, a background or an
   opacity in the header — only the title's size, which is the one thing the redesign changes
   about it. Flipping the band to the mockup's cream is a product decision, not a CSS one. */
.clcm-rd-book .clcm-booking-header h1 { font-size: 30px; line-height: 1.15; text-wrap: balance; }

.clcm-rd-book .clcm-booking-body { padding: 28px; }
.clcm-rd-book .clcm-bk-stack { display: flex; flex-direction: column; gap: 22px; }

/* The progress rail. Each segment's fill is toggled by x-show, which writes display:none inline
   when hidden and removes it when shown — so display:block here is what paints it. Decorative;
   the markup marks the rail aria-hidden. */
.clcm-rd-book .clcm-bk-rail { display: flex; gap: 6px; }
.clcm-rd-book .clcm-bk-rail-seg { flex: 1 1 0; height: 4px; border-radius: 4px;
  background: var(--clcm-cream-dark, #EDE7D9); overflow: hidden; }
.clcm-rd-book .clcm-bk-rail-seg > span { display: block; height: 100%; background: var(--clcm-gold); }

/* THE STEP AND SUCCESS HEADINGS ARE h2 — they were h3 directly under the page's h1, announcing a
   level of structure that did not exist. clcm-public.css styles them by ELEMENT
   (`.clcm-booking-step h3`, `.clcm-booking-success h3`) and is byte-pinned, so both of its rules
   are restated here for h2 with the same values; without them the headings fall back to the
   browser's own h2 size and face. --clcm-font-heading is a portal token, hence the fallback. */
.clcm-rd-book .clcm-booking-step h2 { font-family: var(--clcm-font-heading, 'Lora', Georgia, serif);
  font-size: 18px; line-height: 1.25; color: var(--clcm-navy); margin: 0; }
.clcm-rd-book .clcm-booking-success h2 { font-family: var(--clcm-font-heading, 'Lora', Georgia, serif);
  font-size: 23px; color: var(--clcm-navy); margin: 0 0 8px; }

/* THE COURSE CARD TITLE IS AN h3 — it was an h4 directly under the card's h2 ('Your Courses').
   clcm-public.css styles it by ELEMENT (`.clcm-course-content h4`) and is byte-pinned, so its rule
   is restated here for h3 with the same values and the same specificity; this sheet loads after
   it. --clcm-font-heading is a portal token, hence the fallback. */
.clcm-course-content h3 { font-family: var(--clcm-font-heading, 'Lora', Georgia, serif);
  font-size: 18px; font-weight: 600; color: var(--clcm-navy); margin: 0 0 12px; }

/* The two card grids: a hairline and a 14px radius instead of a 2px border and 12px, so these
   read as the portal's cards. Transitions move to the duration and ease tokens, which the
   reduced-motion block stands down with everything else. */
.clcm-rd-book .clcm-coach-card,
.clcm-rd-book .clcm-type-card {
  border: 1px solid rgba(var(--clcm-navy-rgb), .10);
  border-radius: var(--clcm-radius-xl);
  background: var(--clcm-white);
  transition: border-color var(--clcm-dur-hover) var(--clcm-ease),
              box-shadow var(--clcm-dur-hover) var(--clcm-ease),
              transform var(--clcm-dur-press) var(--clcm-ease);
}
.clcm-rd-book .clcm-coach-card:hover { border-color: var(--clcm-gold-text, var(--clcm-gold));
  box-shadow: 0 8px 20px rgba(var(--clcm-navy-rgb), .10); transform: translateY(-2px); }
.clcm-rd-book .clcm-type-card:hover { border-color: var(--clcm-gold-text, var(--clcm-gold)); }
.clcm-rd-book .clcm-type-card.selected { border-color: var(--clcm-navy);
  box-shadow: 0 0 0 3px rgba(var(--clcm-navy-rgb), .12); }

/* NO `display` here: .clcm-cardbtn sets display:block on these spans at the same specificity,
   and that rule is what makes them stack inside a <button>. The avatar keeps its WHITE initial —
   for a tenant, --clcm-gold is the raw saved accent with no contrast guarantee against its own
   navy, while white on navy reads unconditionally. */
.clcm-rd-book .clcm-coach-name,
.clcm-rd-book .clcm-type-name { font-family: var(--clcm-font-serif, 'Lora', Georgia, serif);
  font-weight: 600; font-size: 18px; line-height: 1.25; }
.clcm-rd-book .clcm-coach-spec { color: var(--clcm-sage-ink); font-weight: 700; }

.clcm-rd-book .clcm-prepay-price { display: block;
  font-family: var(--clcm-font-serif, 'Lora', Georgia, serif); font-weight: 600; font-size: 18px; }
.clcm-rd-book .clcm-prepay-tag { display: inline-block; margin: 8px 0 0; padding: 2px 8px;
  border-radius: var(--clcm-radius-sm); background: rgba(var(--clcm-gold-rgb), .18);
  color: var(--clcm-gold-ink); font-size: 12px; font-weight: 700; }
/* An inset note on the tint. No tone is claimed and nothing is recoloured to imply one — it is
   information, and the amount in its own <strong> is the emphasis. */
.clcm-rd-book .clcm-prepay-note { background: var(--clcm-surface-tint);
  border: 1px solid rgba(var(--clcm-navy-rgb), .10); border-radius: var(--clcm-radius-xl);
  padding: 14px 16px; }

/* font-size is NOT touched on the inputs: clcm-public.css sets 16px and anything under it makes
   mobile Safari zoom the page on focus and leaves it scrolled sideways. */
.clcm-rd-book .clcm-bk-fields { display: grid; gap: 12px; }
.clcm-rd-book .clcm-booking-input { border-width: 1px; border-radius: var(--clcm-radius-xl);
  padding: 12px 14px; background: var(--clcm-white); }
.clcm-rd-book .clcm-booking-input:focus { border-color: var(--clcm-navy); }
/* 15px, not 16: the hint is painted over the field, whose text now starts at 1px border + 14px
   padding. A 1px disagreement here shows as the words moving when a date is picked. */
.clcm-rd-book .clcm-date-hint { left: 15px; }

/* A 3-column grid of pills instead of a wrapping flex row of 92px-minimum boxes. min-width MUST
   go to 0: in a grid the 92px floor from clcm-public.css overflows three columns on a phone and
   takes the page sideways. */
.clcm-rd-book .clcm-slot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.clcm-rd-book .clcm-slot { width: auto; min-width: 0; padding: 11px 10px; border-width: 1px;
  border-radius: 999px; background: var(--clcm-white);
  transition: border-color var(--clcm-dur-hover) var(--clcm-ease),
              background var(--clcm-dur-hover) var(--clcm-ease); }
/* The hover ground moves to cream because the resting ground is now white — the old pair was the
   other way round. */
.clcm-rd-book .clcm-slot:hover { border-color: var(--clcm-gold-text, var(--clcm-gold));
  background: var(--clcm-cream); }
.clcm-rd-book .clcm-slot.selected { background: var(--clcm-navy); border-color: var(--clcm-navy);
  color: var(--clcm-white); }

/* inline-flex for the gap: the markup replaced a bare &larr;, which Urbanist has no glyph for,
   with ph-arrow-left from the subset font. */
.clcm-rd-book .clcm-booking-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.clcm-rd-book .clcm-booking-back > i { font-size: 14px; line-height: 1; }
.clcm-rd-book .clcm-booking-back:hover { color: var(--clcm-navy); text-decoration: underline; }

/* The summary: hairline rows on the tint. The 16px row text is left alone — this is the last
   screen a stranger reads before handing over their name. */
.clcm-rd-book .clcm-booking-confirm { background: var(--clcm-surface-tint);
  border: 1px solid rgba(var(--clcm-navy-rgb), .08); border-radius: var(--clcm-radius-xl);
  padding: 4px 16px; gap: 0; }
.clcm-rd-book .clcm-confirm-row { padding: 11px 0; }
.clcm-rd-book .clcm-confirm-row + .clcm-confirm-row { border-top: 1px solid rgba(var(--clcm-navy-rgb), .06); }

/* The shield carries the tone as a SHAPE beside the words; no colour signals anything. */
.clcm-rd-book .clcm-bk-privacy { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0;
  font-size: 13px; line-height: 1.55; color: var(--clcm-text-muted, #5A6478); }
.clcm-rd-book .clcm-bk-privacy > i { flex: 0 0 auto; font-size: 16px; line-height: 1.4;
  color: var(--clcm-sage-ink); }
/* Core ships a:hover,a:active{color:#135e96} at (0,1,1), so a new anchor that states only its
   resting colour turns admin blue under the cursor. All states stated, :focus with them. */
.clcm-rd-book .clcm-bk-privacy a,
.clcm-rd-book .clcm-bk-privacy a:link,
.clcm-rd-book .clcm-bk-privacy a:visited { color: var(--clcm-gold-ink); font-weight: 700;
  text-decoration: underline; }
.clcm-rd-book .clcm-bk-privacy a:hover,
.clcm-rd-book .clcm-bk-privacy a:focus,
.clcm-rd-book .clcm-bk-privacy a:active { color: var(--clcm-navy); }

/* Shape and typography only. The gold fill and its hover are NOT restated: the hover reads
   --clcm-gold-light, whose two host values differ, so it stays in clcm-public.css where one host
   defines it. */
.clcm-rd-book .clcm-btn-book { border-radius: var(--clcm-radius-xl); padding: 14px 24px;
  font-weight: 800; font-size: 16px; letter-spacing: 0; text-transform: none; }

/* The success disc's fill was a baked sage literal in the markup and is now currentColor, taken
   from here. --clcm-sage is the one sage both hosts agree on, and its value is the literal that
   was there, so the disc is unchanged and now inside the palette rather than beside it. */
.clcm-rd-book .clcm-booking-success svg { color: var(--clcm-sage); }

/* One ring for every control on the page; only .clcm-cardbtn had one before. The chain ends in a
   literal because a var() chain whose last name is undefined is VOID, and a voided outline is no
   focus cue at all. */
.clcm-rd-book .clcm-coach-card:focus-visible,
.clcm-rd-book .clcm-type-card:focus-visible,
.clcm-rd-book .clcm-slot:focus-visible,
.clcm-rd-book .clcm-booking-back:focus-visible,
.clcm-rd-book .clcm-btn-book:focus-visible,
.clcm-rd-book .clcm-booking-input:focus-visible {
  outline: 2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset: 2px; }

@media (max-width: 600px) {
  .clcm-rd-book .clcm-booking-header { padding: 22px 16px; }
  .clcm-rd-book .clcm-booking-header h1 { font-size: 23px; }
  .clcm-rd-book .clcm-booking-body { padding: 20px 16px; }
  .clcm-rd-book .clcm-booking-success { padding: 36px 16px; }
  .clcm-rd-book .clcm-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* padding and letter-spacing restated: the existing @media rule is (0,2,0) and ties with the
     base rule above, and a media query adds no specificity. */
  .clcm-rd-book .clcm-btn-book { width: 100%; align-self: stretch; padding: 15px 16px;
    font-size: 16px; letter-spacing: 0; }
}

/* ── .clcm-rd-rowlink: the one state the restatement above missed ──────────────────
 * Completing, not redefining. The rule at l.1703-1705 restates :hover and :focus — both
 * (0,1,1), which ties with core's `a:hover, a:active { color:#135e96 }` from load-styles.php
 * and wins on source order. But NOTHING restates :active, and the base class is (0,1,0), so
 * core wins outright while the mouse is down: every one of these links flashes wp-admin blue
 * on click. Scoped under .clcm-wrap so it beats core on specificity rather than load order.
 *
 * Three screens use the class — Billing History's Receipt / In Stripe links, the Appointments
 * row link, and the pairing modal's client name — so all three stop flashing. */
.clcm-wrap a.clcm-rd-rowlink:active { color:var(--clcm-navy); text-decoration:underline; }

/* ── a notice that is ALL title reads as prose, not as a shout ─────────────────────
 * clcm_rd_notice()'s single text slot is $title, at 14px/800. That is right for a sentence
 * of warning. It is wrong for reference prose: Billing History passes three explanations of
 * why a list may be short, the longest ~490 characters, which lands as four or five lines of
 * extra-bold over a money table. Reports has two title-only notices in the same shape.
 *
 * :only-child is the discriminator — a notice WITH a body keeps its bold title, because there
 * the title is a heading and the body carries the prose. Giving each box a short title instead
 * would have meant three new strings for a typographic problem. */
.clcm-rd-notice-bd > .clcm-rd-notice-t:only-child { font-weight:700; line-height:1.5; }

/* ── THE SEARCH BOX'S ICON HAS NEVER BEEN POSITIONED ──────────────────────────────
 * clcm-admin.css positions it with `.clcm-search-wrap svg`, and every one of the NINE
 * search boxes in the admin emits `<i class="ph ph-magnifying-glass">` instead — clients,
 * business centre, courses, groups, certification (x2), whiteboards and packages (x2).
 * They were already <i> before the redesign, so this is not a reskin regression: the icon
 * has simply never been positioned on any of them.
 *
 * The consequences were both visible and nobody had looked: the icon fell into normal flow
 * ABOVE the field, inflating the bar from 46px to 58px, while .clcm-search-input's
 * `padding-left:40px !important` held a 40px gutter open for an icon that was not there.
 * Measured on the Certification screen: icon at y=519 static, input at y=535.
 *
 * Positioned on the ELEMENT, not the class, so it covers the icon whatever ph- name it
 * carries, and matches the geometry clcm-admin.css already declares for the svg form. */
.clcm-search-wrap > i {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 16px; line-height: 1; pointer-events: none;
  color: var(--clcm-text-muted, #5A6478);
}

/* ── and in a bar, the filter belongs at the far end ───────────────────────────────
 * .clcm-search-wrap is `flex:1; max-width:340px`, which in a .clcm-rd-bar put it directly
 * against the count with 637px of dead space to its right (measured). The house pattern is
 * count left, filter right. */
.clcm-rd-bar > .clcm-search-wrap { margin-left: auto; flex: 0 1 340px; }

/* ══ THE COMMAND PALETTE, BROUGHT TO THE MOCKUP ═══════════════════════════════════════
 * Measured against the mockup's own declarations rather than eyeballed. Every number below
 * is the mockup's; what it leaves alone is already right.
 *
 * THE BLUE BOX. .clcm-cmd-q clears `border` and `outline` but NOT `box-shadow`, and wp-admin
 * paints its focus ring as `box-shadow: 0 0 0 1px #2271b1` on top of a blue border — so the
 * field sat in a bright blue rounded box the moment it took focus, which it does on open.
 * That is the single most visible difference from the design. .clcm-cmd too: the palette sits
 * outside .clcm-wrap, so without focus core's input[type="text"] drew its border in the panel. */
.clcm-cmd .clcm-cmd-q, .clcm-wrap .clcm-cmd-q, .clcm-cmd-q:focus {
  box-shadow: none !important; border: 0 !important; outline: 0 !important;
  font-size: 15px; height: 100%; padding: 0; background: transparent; min-height: 0;
}

/* The scrim: the mockup dims to .45 and blurs what is behind it. Ours was .28 and flat, which
   left the page competing with the dialog. navy-rgb so a tenant's own navy dims their screen. */
.clcm-cmd-scrim { background: rgba(var(--clcm-navy-rgb), .45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* 600 not 560, and the mockup's deeper lift. */
.clcm-cmd { padding: 13vh 16px 16px; }
.clcm-cmd-box { width: min(600px, 92vw); box-shadow: 0 30px 80px rgba(var(--clcm-navy-rgb), .35); }

/* 52px tall with a 16px gutter, and the search glyph in GOLD INK at 19px — the one piece of
   colour in the dialog, and the mockup's own choice. Ours was a 17px muted grey. */
.clcm-cmd-top { height: 52px; padding: 0 16px; }
.clcm-cmd-top > .ph { font-size: 19px; color: var(--clcm-gold-ink); }

/* The esc chip: the mockup's is a small bordered label, not a 22px button. */
.clcm-cmd-esc { height: auto; padding: 1px 6px; border-radius: 4px; font-size: 11px;
  font-weight: 700; line-height: 1.45; }

/* The list scrolls at 400px rather than letting the box run to 70vh. */
.clcm-cmd-list { max-height: 400px; }

/* Rows: 36px, a 10px gutter, 7px radius, and the icon in NAVY — the mockup gives every row
   icon the full ink, where ours were muted and read as disabled. The press answer is the
   system's own scale, which the reduced-motion layer already stands down. */
.clcm-cmd-row { min-height: 36px; padding: 0 10px; border-radius: 7px; }
.clcm-cmd-row .ph { color: var(--clcm-navy); }
.clcm-cmd-row:active { transform: scale(.97); }

/* The second group needs air above it; the first must not gain any. */
.clcm-cmd-head--2 { margin-top: 10px; }

/* ── Library: the create row ──────────────────────────────────────────────────────────────
   Its own row under the subtitle, left-aligned, the way the mockup draws it — not pinned to
   the right of the heading. The negative top margin pulls it up against the subtitle so the
   two read as one block rather than as a stranded button bar; the margin-bottom is the gap
   to the tabs below. Wrapping is kept on for a phone, where three buttons will not fit in a
   line and admin.css gives each of them width:100% under 782px anyway. */
.clcm-wrap .clcm-lib-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 18px;
}

/* ── Settings: the filter above the section list ──────────────────────────────────────────
   The mockup's box at the top of that column. Full width of the column, and the gap below it
   is the one the first group heading would otherwise sit flush against. */
.clcm-wrap .clcm-settings-filter {
  display: block;
  margin: 0 0 14px;
}
.clcm-wrap .clcm-settings-filter > input {
  /* IT IS A FIELD, AND IT WAS NEVER TOLD SO. Jose, 2026-10-18: "square filter settings box",
     on Coach Profile and again on Escalation Contact — it is one control on every Settings
     section, so he met it twice. This input carries NO class, so .clcm-input never reached it
     and the block below only ever set the icon gutter; with no border and no radius declared
     by anything of ours, the winning rule was WordPress core's own `input[type="text"]`
     (0,1,1) and the field rendered as wp-admin grey inside a 14px rounded panel.
     `.clcm-wrap .clcm-settings-filter > input` is (0,2,1), so it out-ranks core without
     !important. The values are .clcm-input's own (clcm-admin.css:940) so the box matches every
     other field in the product; each var() carries a fallback because this sheet loads over
     two hosts that define different token sets and a bare unresolved var() voids the whole
     declaration. */
  border: 1.5px solid var(--clcm-border, #DDD8CE);
  /* 7px, not --clcm-radius. When this was written (v2.280.0) every field in the workspace
     rendered at 10px, so the token was the right read. The field block below now wins its 7px
     back from the pinned sheet, and a token read here would leave this one box at 10px — the
     only field on the screen that did not move. Measured: it was. */
  border-radius: 7px;
  background: var(--clcm-white, #FFFFFF);
  font-family: var(--clcm-font-sans, 'Urbanist', system-ui, sans-serif);
  font-size: 13px;
  color: var(--clcm-text, #1A1A2E);
  /* THE GUTTER THE ICON SITS IN. .clcm-search-wrap > i is absolutely positioned at left:13px,
     and the only rule that holds room open for it is scoped to inputs inside a .clcm-rd-bar —
     this one is in the Settings column, so it got none and the magnifier landed on top of the
     placeholder's first letter. Padding here rather than borrowing .clcm-search-input, whose
     class also binds the generic row filter in clcm-admin.js; this field has its own script. */
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  padding: 0 10px 0 34px;
}
.clcm-wrap .clcm-settings-filter > input:focus {
  border-color: var(--clcm-gold-text, var(--clcm-gold, #C8A45D));
  box-shadow: 0 0 0 3px rgba(var(--clcm-gold-text-rgb, var(--clcm-gold-rgb, 200,164,93)),.15);
  outline: none;
}
.clcm-wrap .clcm-settings-filter-none {
  margin: 10px 2px;
  font-size: 13px;
  color: var(--clcm-text-muted, #5A6478);
}

/* ── A list bar's tools stay on ONE line ──────────────────────────────────────────────────
   .clcm-rd-bar-tools holds the search box and, on Clients, the Sort-by select. The search
   carries flex:1 1 0%, so the group's max-content width was just the select's — 341px of a
   available 700 — and `flex:0 1 auto` sized the group to that. The two controls then wrapped
   into a column, the bar grew from 46px to 83px, and it closed the gap to the tab underline
   above it and the table header below. Measured on Clients, 2026-10-16.

   Desktop only: below 782px clcm-redesign.css deliberately gives `.clcm-rd-bar select` full
   width so the controls DO stack on a phone, and .clcm-rd-sel-auto is written to lose to it.
   Overriding that here would undo the phone layout on purpose-built narrow screens. */
@media (min-width: 783px) {
  .clcm-wrap .clcm-rd-bar-tools { flex-wrap: nowrap; margin-left: auto; }
  .clcm-wrap .clcm-rd-bar-tools > .clcm-search-wrap { flex: 0 1 300px; }
  .clcm-wrap .clcm-rd-bar-tools > select { flex: 0 0 auto; width: auto; }
}

/* ── A figure with no sparkline beside it is CENTRED (Jose, 2026-10-16) ───────────────────
   This replaces the opt-in .clcm-rd-stat--nospark rule as the governing one. That rule centred
   only the two Home cells where the mockup draws a sparkline and we cannot, which left a strip
   of five reading: centred, centred, left, left, left. The rule is now about what is actually in
   the cell, so every strip on every screen is consistent without each one opting in.

   :has(svg) is the sparkline itself — clcm_rd_sparkline() emits an inline <svg>. A browser too
   old for :has() simply centres everything, which is this rule's own default and not a defect.
   .clcm-rd-stat-row still holds the number left and the line right INSIDE a cell that has one. */
.clcm-wrap .clcm-rd-stat { text-align: center; }
.clcm-wrap .clcm-rd-stat:has(svg) { text-align: left; }

/* ── Phone: the figures sit two-up, not one per row ───────────────────────────────────────
   The mobile design lays the KPI cells out as a grid of cards rather than a single column;
   stacked one per row, five of them pushed everything else below the fold on a phone. Our
   strip carries five where the design draws four, so the last one spans the row rather than
   sitting half-width beside nothing. */
@media (max-width: 782px) {
  .clcm-wrap .clcm-rd-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
  }
  .clcm-wrap .clcm-rd-stats > .clcm-rd-stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ── Home: "Needs your attention" ─────────────────────────────────────────────────────────
   One row per waiting booking request: kind tile, who and when, and the answer on the right.
   The row is NOT a stretched link — .clcm-rd-title::after would span it and swallow clicks on
   the Accept button sitting in it, which is the trap that cost the Membership screen its
   Receipt link. Nothing here is a link, so nothing needs lifting above an overlay. */
.clcm-wrap .clcm-attn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--clcm-border);
}
.clcm-wrap .clcm-attn-main { flex: 1; min-width: 0; }
.clcm-wrap .clcm-attn-acts { display: flex; gap: 6px; flex: none; flex-wrap: wrap; align-items: center; }
/* The CARD's width decides when the answers drop under the text, not the viewport: on a computer the side column
   sits at its 360px floor while the coach rail is open, as narrow as a phone's card, and two buttons beside the text
   left a Spanish request 121px to wrap into. The panel is the container rather than .clcm-homeinbox, because the
   unnamed 894px query below measures .clcm-rd-home for .clcm-homeinbox-panel itself — a container on the panel
   is not that element's own ancestor, so that query still resolves against .clcm-rd-home. */
.clcm-wrap .clcm-homeinbox-panel { container-type: inline-size; }
@container (max-width: 420px) {
  .clcm-wrap .clcm-attn-row { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 8px; align-items: start; }
  .clcm-wrap .clcm-attn-row > .clcm-rd-ico { grid-column: 1; grid-row: 1 / span 2; }
  .clcm-wrap .clcm-attn-main { grid-column: 2; grid-row: 1; }
  .clcm-wrap .clcm-attn-row > .clcm-attn-acts { grid-column: 2; grid-row: 2; justify-self: start; }
}
.clcm-wrap .clcm-attn-t {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--clcm-text);
}
.clcm-wrap .clcm-attn-m {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--clcm-text-muted, #5A6478);
}
/* On a phone the answer drops UNDER the text, with the kind tile beside both — the shape the
   mobile design draws. A grid rather than a wrapping flex row: wrapping put the tile on a line
   of its own above the name and made the row 143px tall, because a flex item that takes the full
   width pushes everything before it onto its own line. Measured in a 390px frame. */
@media (max-width: 600px) {
  .clcm-wrap .clcm-attn-row {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
  }
  .clcm-wrap .clcm-attn-row > .clcm-rd-ico { grid-column: 1; grid-row: 1 / span 2; }
  .clcm-wrap .clcm-attn-main { grid-column: 2; grid-row: 1; }
  /* The answers sit in one wrapper (Accept + Decline, or "View only" in platform view) so this
     cell places whatever is there; two bare buttons would have landed on top of each other. */
  .clcm-wrap .clcm-attn-row > .clcm-attn-acts { grid-column: 2; grid-row: 2; justify-self: start; }
  /* This bar holds a heading and a short count, not a filter — the phone rule at line 331 turns
     every .clcm-rd-bar into a column so a search box can go full width, which here stranded
     "2 open" on a second line and made the header 72px tall. */
  .clcm-wrap .clcm-attn > .clcm-rd-bar { flex-direction: row; align-items: center; }
}

/* ── Home: the Clients card ───────────────────────────────────────────────────────────────
   The mockup's last block on Home. The package cell is a bar and a figure side by side; the
   bar is decoration and the figure carries the meaning, so the bar is aria-hidden and the
   "6/8" beside it is what a screen reader reads. */
.clcm-wrap .clcm-rd-tabs--homeclients { display: flex; gap: 2px; margin-left: 18px; }
.clcm-wrap .clcm-homeclients-pkg { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.clcm-wrap .clcm-homeclients-bar {
  display: inline-block;
  width: 62px;
  height: 5px;
  border-radius: 999px;
  background: var(--clcm-border);
  overflow: hidden;
}
.clcm-wrap .clcm-homeclients-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--clcm-navy);
}
.clcm-wrap .clcm-homeclients-num { font-size: 12.5px; font-weight: 700; color: var(--clcm-text); }
.clcm-wrap .clcm-homeclients-none { margin: 0; padding: 18px 16px; font-size: 13px; color: var(--clcm-text-muted, #5A6478); }
/* On a phone the tab row drops under the heading rather than squeezing it. */
@media (max-width: 782px) {
  .clcm-wrap .clcm-rd-tabs--homeclients { margin-left: 0; }
}

/* ── Home: the Inbox / Activity card ──────────────────────────────────────────────────────
   The tab row sits in the card's own bar, so it takes the bar's height rather than adding to
   it. The panels are plain hidden/shown blocks; only one is ever in the flow. */
.clcm-wrap .clcm-rd-tabs--homeinbox { display: flex; gap: 2px; }
/* The horizontal padding is restated because .clcm-rd-tab is written for an <a>: as a <button>
   it came out at `13px 0 11px` and the two tabs sat 2px apart. Measured on Home. */
.clcm-wrap .clcm-rd-tabs--homeinbox .clcm-rd-tab,
.clcm-wrap .clcm-rd-tabs--homeclients .clcm-rd-tab {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 13px 10px 11px;
}
.clcm-wrap .clcm-homeinbox-panel[hidden] { display: none; }
.clcm-wrap .clcm-homeinbox-more { margin: 0; padding: 10px 16px 14px; font-size: 12.5px; }
.clcm-wrap .clcm-homeinbox-more a { font-weight: 700; }

/* ── the pairing sheet: per-row level chips, and the locked pill ───────────────────
 *
 * Four chips on every changeable row, the current one lit — the mockup's own control
 * (Jose, 2026-10-16). The lit state is written inline because the ground and ink are
 * per-level DATA, and two of the four inks are asked of the viewing organization's
 * palette; what lives here is only the resting state and the mechanics.
 *
 * THE RADIO INSIDE EACH CHIP IS HIDDEN, NOT REMOVED. Opacity and a 1px box keep it
 * focusable, so the arrow keys still move through the four, the group still announces
 * itself, and each one keeps the aria-label naming its level and its client. A chip
 * built out of a bare <span> would have taken all of that away from the screen that
 * decides who may see whose records.
 *
 * The hairline is neutral black-alpha rather than the navy one used elsewhere: this
 * sheet is drawn in whatever colour the viewing organization wears, and a navy rule
 * under a green chip is Waymark's ink on somebody else's screen.
 *
 * UNSCOPED, and it was `.clcm-wrap .clcm-pair-chip` until 2026-10-17. Its host,
 * clcm-organization.php, includes this sheet AFTER its wrapper's closing </div> — as the
 * standalone Team screen did too, until that unreachable screen was deleted in v2.311.0 —
 * so the wrapper-scoped version matched nothing and had never matched anything. The
 * radio inside each chip was therefore never hidden, and WordPress painted all four of
 * them blue on the one sheet that decides who may read whose records. Jose reported it as "wordpress blue in the
 * pairing modal"; what he was looking at was this rule missing entirely.
 *
 * The note at the create-group chips below describes this exact trap and was written
 * the day before, asserting that the pairing sheet lives inside .clcm-wrap. It does
 * not. A claim about where markup renders is worth no more than the grep that checks
 * it — see the test that now pins where the include sits (test-reports-tabs-v2274.php).
 */
.clcm-pair-chip {
  border: 1px solid rgba(0,0,0,.12);
  background: none;
  color: var(--clcm-text-muted, #5A6478);
  cursor: pointer;
  margin-left: 6px;
  position: relative;
}
.clcm-pair-chip input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0;
}
.clcm-pair-chip:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }
.clcm-pair-chip.is-on { border-width: 1px; border-style: solid; }

/* The lock replaces .clcm-rd-pill's dot, so a locked row still reads as a shape plus a word. */
.clcm-pair-lock::before { display: none; }
.clcm-pair-lock i { font-size: 13px; line-height: 1; }

/* The close button on a WHITE dialog header. .clcm-modal-close is white-on-colour, which is
   right on the bar every other dialog wears and invisible here. */
.clcm-pair-x {
  border: 0; cursor: pointer; padding: 8px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.05); color: var(--clcm-text, #333);
}
.clcm-pair-x:hover { background: rgba(0,0,0,.09); }

/* A disabled button that still looks pressable is a dead control. Nothing in this admin had a
   disabled style, because nothing had a disabled button until the pairing sheet's Save waited
   for a change (2026-10-16). not-allowed rather than default: the cursor says so before the
   click does. */
.clcm-btn:disabled,
.clcm-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ── the Home Clients card's per-row message action ────────────────────────────────
 *
 * ABOVE THE ROW OVERLAY, which is the whole point of the z-index. a.clcm-rd-title::after
 * is absolutely positioned across the entire row to make the row clickable, and it paints
 * over anything later in the row — an action placed there without this is drawn, hoverable
 * and completely dead to a click. That has happened on this codebase before.
 */
.clcm-wrap .clcm-homeclients-msg {
  position: relative; z-index: 1;
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; color: var(--clcm-text-muted, #5A6478); text-decoration: none;
}
.clcm-wrap .clcm-homeclients-msg:hover { background: rgba(0,0,0,.06); color: var(--clcm-text, #333); }
.clcm-wrap .clcm-homeclients-msg i { font-size: 17px; line-height: 1; }

/* ── a page tab strip that sits INSIDE a card ──────────────────────────────────────
 *
 * .clcm-rd-tabs--page zeroes the margin because it was written for a strip drawn
 * OUTSIDE a card, where the card then starts at the bar. The Library puts the same
 * strip inside one, and the result was measured on 2026-10-16: the first tab's text
 * sat 1px below the card's top border while its left gutter was 17px. Jose saw it as
 * words pressed against the edge, which is what it was.
 *
 * 4px here plus the tab's own 13px top padding puts the text 17px down — the same
 * gutter it already has on the left, so the corner reads as one measurement rather
 * than two. Scoped to the direct-child case so every strip drawn outside a card,
 * which is most of them, is untouched.
 */
.clcm-wrap .clcm-rd-card > .clcm-rd-tabs--page { padding-top: 4px; }
/* (A strip inside a card that does NOT also carry .clcm-tab-bar; the one that does is handled
   at the more specific rule above, which otherwise overrules this.) */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CREATE-GROUP SHEET'S CHIPS (Jose's mockup, 2026-10-16)
 *
 * UNSCOPED, like .clcm-pair-chip above, and for the same reason: this modal is
 * rendered after .clcm-wrap closes, which is the "shared sheet, two hosts" trap. A
 * rule written as `.clcm-wrap .clcm-gchip` would match nothing here and the chips
 * would render as bare checkboxes with no indication anything was wrong.
 *
 * (This note originally said the pairing sheet differed because it sat inside the
 * wrapper. It never did — corrected 2026-10-17 after Jose found the blue radios.)
 *
 * The checkbox/radio is kept in the DOM and hidden with opacity, never display:none —
 * a display:none input is removed from the tab order, so the whole picker would become
 * unreachable by keyboard. :has(:focus-visible) puts the ring on the chip instead, and
 * the selected state is a BORDER and a BACKGROUND, not colour alone, so it survives a
 * tenant palette and forced-colours mode.
 * ───────────────────────────────────────────────────────────────────────────── */
.clcm-gchip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.clcm-gchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 7px;
  border: 1px solid rgba(0,0,0,.14); border-radius: 999px;
  background: none; cursor: pointer; position: relative;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  color: #5A6478;
}
.clcm-gchip--text { padding: 7px 14px; }
.clcm-gchip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; }
.clcm-gchip:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }
.clcm-gchip:hover { border-color: rgba(0,0,0,.28); }
.clcm-gchip.is-on {
  border-color: var(--clcm-navy, #1C2B4A);
  background: rgba(28,43,74,.06);
  color: var(--clcm-navy, #1C2B4A);
}
.clcm-gchip .clcm-rd-disc { width: 22px; height: 22px; font-size: 9.5px; letter-spacing: 0; }
.clcm-gsheet-note {
  font-size: 12.5px; color: #5A6478; margin: 0;
  flex: 1 1 auto; padding-right: 12px;
}

/* The Billing History caveat, collapsed (mockup, 2026-10-16).
 * The summary carries .clcm-rd-notice, which is a flex row, and a <summary> is display:list-item
 * by default — that wins over the class and puts a disclosure triangle in front of the icon while
 * breaking the row's alignment. Both the standard marker and the WebKit pseudo-element are
 * cleared, because Safari honours only the second. */
.clcm-bh-caveat > summary { display: flex; }
.clcm-bh-caveat > summary::marker,
.clcm-bh-caveat > summary::-webkit-details-marker { display: none; content: ''; }
.clcm-bh-caveat > summary:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
/* The chevron is the only thing saying this opens, so it is a SHAPE and not a colour, and it
 * turns when the element is open. */
.clcm-bh-caveat > summary .clcm-rd-notice-bd::after {
  content: '⌄'; float: right; margin-left: 10px; font-size: 15px; line-height: 1;
  transition: transform .15s ease; display: inline-block;
}
.clcm-bh-caveat[open] > summary .clcm-rd-notice-bd::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .clcm-bh-caveat > summary .clcm-rd-notice-bd::after { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * HOME — the next-session detail card (Jose's mockup, 2026-10-16)
 *
 * UNSCOPED: this card renders in wp-admin, inside .clcm-wrap but NOT inside the
 * portal, so a .clcm-wrap-only rule would be fine here while a portal-only one
 * would not — the rules are written plainly so neither host can lose them.
 * Colours are literals with token fallbacks for the same reason the sheet does
 * elsewhere: a bare var() for a token one host lacks DELETES the declaration.
 * ───────────────────────────────────────────────────────────────────────────── */
.clcm-homenext .clcm-nextsess-kicker {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 12px; font-size: 12.5px; font-weight: 600;
  color: var(--clcm-text-muted, #5A6478);
}
/* The dot is a SHAPE carrying the "now" state, not colour alone — the words beside
 * it say the same thing, so a viewer who cannot see the hue loses nothing. */
.clcm-nextsess-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--clcm-gold, #C8A45D); flex: 0 0 auto;
}
.clcm-nextsess-who { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.clcm-nextsess-who .clcm-rd-title { display: block; font-weight: 600; }

.clcm-nextsess-facts {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
  margin: 0 0 14px; font-size: 13px;
}
.clcm-nextsess-facts dt { color: var(--clcm-text-muted, #5A6478); white-space: nowrap; }
.clcm-nextsess-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.clcm-nextsess-bar {
  display: block; height: 4px; border-radius: 999px; margin-top: 5px;
  background: rgba(0,0,0,.10); overflow: hidden;
}
.clcm-nextsess-bar > span { display: block; height: 100%; background: var(--clcm-gold, #C8A45D); }

.clcm-nextsess-note {
  border: 1px solid rgba(0,0,0,.10); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 14px;
  background: rgba(0,0,0,.02);
}
/* A note is prose the coach wrote and can be any length; it scrolls rather than
 * pushing the two actions below the fold on a laptop. */
.clcm-nextsess-note-bd {
  font-size: 13px; line-height: 1.5; max-height: 108px; overflow-y: auto;
  color: var(--clcm-text, #1C2B4A);
}
.clcm-nextsess-note-bd p:first-child { margin-top: 0; }
.clcm-nextsess-note-bd p:last-child  { margin-bottom: 0; }

.clcm-nextsess-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ─────────────────────────────────────────────────────────────────────────────
 * A FILTER SITTING IN A CARD HEADER (mockup, 2026-10-16: Security, All Organizations)
 *
 * .clcm-search-input is declared width:100% in clcm-admin.css, which is right for the
 * places it has always lived — its own row, above a table. Dropped into a flex header
 * beside a heading, that 100% makes it claim the whole row and squeezes the title into
 * a column narrow enough to wrap: "Protections active 5" rendered as two lines with the
 * count stranded under it. Caught by looking at the screen, not by any test.
 *
 * So the width is relaxed ONLY in these two containers, and the heading is told not to
 * shrink. Everywhere else the input keeps the full width it was designed with.
 * ───────────────────────────────────────────────────────────────────────────── */
.clcm-rd-panel-head > .clcm-search-input,
.clcm-rd-bar > .clcm-search-input {
  width: auto;
  flex: 0 1 280px;
  min-width: 150px;
}
.clcm-rd-panel-head > h2,
.clcm-rd-panel-head > h3,
.clcm-rd-bar > .clcm-rd-count {
  flex: 0 0 auto;
  min-width: 0;
}
/* The header stacks on a narrow admin (see the max-width rule above), and a stacked
 * filter should use the width it is given rather than keep a row-shaped basis. */
@media (max-width: 782px) {
  .clcm-rd-panel-head > .clcm-search-input,
  .clcm-rd-bar > .clcm-search-input { flex: 1 1 auto; width: 100%; }
}

/* THE NOTE PREVIEW CLAMPS ITS OWN TYPOGRAPHY.
 *
 * A session note is rich text the coach wrote, and clcm_kses_rich() deliberately preserves
 * their formatting — headings, sizes, colours. Rendered unclamped in a 3-line preview, a note
 * that opens with a heading took over the card: on the clone a note beginning "Search for
 * Significance 8" drew at display size and pushed everything else out. Found by looking at the
 * screen; no test would have seen it.
 *
 * Sizes and leading are forced because the editor writes them INLINE and nothing else beats an
 * inline style. Weight and colour are left alone, so bold, emphasis and the coach's own accents
 * still read — the preview stays their note, just at the card's scale.
 */
.clcm-nextsess-note-bd,
.clcm-nextsess-note-bd * { font-size: 13px !important; line-height: 1.5 !important; }
.clcm-nextsess-note-bd h1,
.clcm-nextsess-note-bd h2,
.clcm-nextsess-note-bd h3,
.clcm-nextsess-note-bd h4,
.clcm-nextsess-note-bd h5,
.clcm-nextsess-note-bd h6 { margin: 0 0 4px; font-family: inherit; }
.clcm-nextsess-note-bd img { max-width: 100%; height: auto; }
/* AND IT WRAPS WHATEVER IS IN IT. Measured on the clone: a note holding a long URL had a
 * scrollWidth of 1427px inside a 245px box, so the preview grew a horizontal scrollbar and the
 * prose ran off the side. Coaches paste links into notes — overflow-wrap:anywhere is what makes
 * an unbroken token break rather than widen its container. max-width on the table covers the
 * other thing people paste. */
.clcm-nextsess-note-bd { overflow-wrap: anywhere; word-break: break-word; overflow-x: hidden; }
.clcm-nextsess-note-bd table { max-width: 100%; display: block; overflow-x: auto; }
.clcm-nextsess-note-bd pre { white-space: pre-wrap; }
/* AND IT READS AS A PREVIEW, NOT AS THE NOTE ITSELF. The editor writes alignment and weight
 * inline, so a note that opens with a centred bold line rendered here as a heading — which is
 * what the card already has above it. The mockup draws this box as plain prose, so block
 * alignment and weight are neutralised while <strong>/<b> keep their bold: real emphasis
 * survives, the coach's page furniture does not. A judgement call, reversible in one rule. */
.clcm-nextsess-note-bd * { font-weight: 400 !important; text-align: left !important; }
.clcm-nextsess-note-bd strong,
.clcm-nextsess-note-bd b { font-weight: 700 !important; }

/* A SEGMENTED SWITCH HUGS ITS BUTTONS.
 *
 * .clcm-form-group is a COLUMN flex container, so its default align-items:stretch pulls every
 * child to the full width of the form — including a control that asks for inline-flex. The
 * Bill-to switch on New Invoice therefore drew a rounded border running the whole width of the
 * card with its two buttons huddled at the left end. The inline display:inline-flex could not
 * save it: stretch acts on the cross axis and wins either way.
 *
 * align-self:start is the one property that opts a single flex item out of that stretch.
 * Scoped to the control, so no other field's width changes.
 */
.clcm-form-group > .clcm-segmented { align-self: start; }

/* A STAT CELL HOLDING WORDS, NOT A FIGURE.
 *
 * .clcm-rd-stat-n is 28px Lora with tabular figures, which is right for a number and wrong for
 * a sentence: on Membership the plan name "Waymark Coach Portal Subscription" filled its cell
 * at display size and wrapped to three lines, dwarfing the price and seat count beside it. The
 * strip is meant to be scanned, and one cell was shouting.
 *
 * Same slot, same colour, text-shaped: the sans face, a readable size, and normal wrapping.
 * Found by looking at the screen — no test asserts on type size.
 */
.clcm-rd-stat-n--text {
  font-family: var(--clcm-font-sans, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  font-variant-numeric: normal;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * INBOX — ARCHIVE A CONVERSATION (swipe on a phone, a button everywhere)
 *
 * The row is an <a> and the control is a <button>, as siblings inside a wrapper,
 * because a button nested in a link is invalid HTML. The link is stretched over
 * the wrapper and the button lifted above it — the same arrangement this product
 * already uses for table rows, and the same hazard: without the z-index the
 * link's overlay swallows every click on the button.
 * ───────────────────────────────────────────────────────────────────────────── */
.clcm-ib-rowwrap { position: relative; overflow: hidden; }
.clcm-ib-rowwrap > .clcm-ib-row { position: relative; z-index: 0; }

.clcm-ib-arch {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  z-index: 1;                       /* above the row's own stretched surface */
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--clcm-text-muted, #5A6478);
  opacity: 0; transition: opacity .12s ease, background-color .12s ease;
}
.clcm-ib-arch .ph { font-size: 17px; line-height: 1; }
/* Revealed on hover for a mouse, and ALWAYS for a keyboard — an opacity:0 control
 * is still focusable, so without this a coach tabbing through the list focuses a
 * button they cannot see. */
.clcm-ib-rowwrap:hover .clcm-ib-arch,
.clcm-ib-arch:focus-visible { opacity: 1; }
.clcm-ib-arch:hover { background: rgba(0,0,0,.06); }
.clcm-ib-arch:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* An archived row, seen in its own tab, says so without relying on colour. */
.clcm-ib-rowwrap.is-archived > .clcm-ib-row { opacity: .72; }

@media (max-width: 820px) {
  /* On a touch screen there is no hover to reveal anything, so the button stays
     visible. The swipe is a shortcut to the same action, never the only route. */
  .clcm-ib-arch { opacity: 1; }
  /* AND THE ROW MUST MAKE ROOM FOR IT. Measured on a 430px viewport: the timestamp's
     right edge sat 28px INSIDE the button, so "Oct 6" rendered underneath the tray
     icon. On a desktop the button only appears on hover, which is exactly why this
     never showed until the layout was opened at phone width — a defect that is
     invisible at the size it was built at. 34px of button plus its 8px offset and a
     little air. */
  .clcm-ib-rowwrap > .clcm-ib-row { padding-right: 48px; }
  .clcm-ib-rowwrap > .clcm-ib-row { will-change: transform; }
  /* The ground revealed behind a swiped row. Tray-shaped, not a red "delete"
     ground: archiving is reversible and must not read as destruction. */
  .clcm-ib-rowwrap::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: rgba(var(--clcm-navy-rgb, 16,42,67), .06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .clcm-ib-rowwrap > .clcm-ib-row { transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * WORDPRESS'S OWN CHECKBOXES AND RADIOS  (Jose's walkthrough, 2026-10-17)
 *
 * wp-admin/css/forms.css takes every checkbox and radio away from the browser
 * (-webkit-appearance:none) and then paints the checked state itself:
 *
 *     input[type="checkbox"]:checked,
 *     input[type="radio"]:checked { background: var(--wp-admin-theme-color);
 *                                   border-color: var(--wp-admin-theme-color); }
 *
 * --wp-admin-theme-color is #2271b1. So every native control on a coach screen came
 * up WordPress blue, in a product whose palette contains no blue at all. Jose counted
 * eight screens in a single pass: the pairing sheet, Add a file, the group notify
 * boxes, the scheduling sheet, the session-type sheet, the client profile, the client
 * selector and his own profile.
 *
 * accent-color CANNOT fix this on its own, and the four inline accent-color styles
 * already scattered through the partials are why this looked handled. appearance:none
 * has already removed the control from the browser, so accent-color is ignored
 * outright. It is still set here for the controls that keep a native appearance —
 * range inputs, and the same markup rendered on the portal.
 *
 * SCOPED ON THE BODY, NOT ON .clcm-wrap, and that is the entire point. Half of these
 * controls live in modals rendered AFTER .clcm-wrap closes — see the note at
 * .clcm-pair-chip below, which is this same trap caught a day later. A wrapper-scoped
 * rule reaches a sheet on one screen and silently misses the identical sheet on the
 * next. body.clcm-admin-page is added by CLCM_Admin::add_body_class() to every screen
 * whose id contains "clcm", which is exactly the set this stylesheet is enqueued on,
 * so nothing can be rendered on one of our screens and fall outside it.
 *
 * NAVY, NOT GOLD. The checked box is a FILL carrying WordPress's white tick glyph, and
 * the tenant gold is a pale accent — a white tick on Waymark's own gold measures 1.9:1
 * and is unreadable. A tenant's navy is the one token guaranteed to carry solid white
 * (class-clcm-whitelabel.php: "a tenant's navy only has to carry SOLID white"), so the
 * tick survives every palette. Navy is also what "selected" already means on these
 * screens: the open nav item and the primary button.
 * ───────────────────────────────────────────────────────────────────────────── */
body.clcm-admin-page input[type="checkbox"],
body.clcm-admin-page input[type="radio"] {
  accent-color: var(--clcm-navy, #102A43);
  border-color: rgba(var(--clcm-navy-rgb, 16,42,67), .38);
}
body.clcm-admin-page input[type="checkbox"]:checked,
body.clcm-admin-page input[type="radio"]:checked {
  background: var(--clcm-navy, #102A43);
  border-color: var(--clcm-navy, #102A43);
}
/* WP draws the radio's inner dot as a background-color on ::before. It is #fff there
   already; restated so the dot cannot pick up a tenant ground later and vanish. */
body.clcm-admin-page input[type="radio"]:checked::before { background-color: #fff; }
/* WP's focus state is `box-shadow: 0 0 0 1px #2271b1` — the same blue by another
   property, so clearing the fill alone leaves the blue on keyboard focus. The ring
   that replaces it is the one every other control on these screens wears, including
   .clcm-toggle, which Jose approved on 2026-10-14. :focus-visible, so a mouse click
   never draws it. */
body.clcm-admin-page input[type="checkbox"]:focus,
body.clcm-admin-page input[type="radio"]:focus { box-shadow: none; }
body.clcm-admin-page input[type="checkbox"]:focus-visible,
body.clcm-admin-page input[type="radio"]:focus-visible {
  outline: 2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D));
  outline-offset: 2px;
}


/* ── a two-way segmented switch ──────────────────────────────────────────────────
 * The New Invoice form's "Bill to" picker was a hand-rolled control: a bordered box
 * holding two buttons that each carried a static `style` AND an Alpine `:style`, with
 * the ground, the ink, the padding and the weight all written twice in the markup.
 * It showed — the two halves met at a hard seam, the resting half had no hover state
 * and neither half had a focus ring, so the whole thing read as two mismatched boxes
 * pushed together. Jose, 2026-10-17: "the switcher doesn't look polished."
 *
 * One class, nothing inline, and the lit half uses the same navy-on-tint pairing as
 * .clcm-rd-pill--ink. The 3px inset ground is what gives the lit half an edge on all
 * four sides instead of a butt join with its neighbour. --clcm-on-navy-strong, not a
 * bare #fff, so a tenant whose navy is light gets ink it can actually carry.
 * ─────────────────────────────────────────────────────────────────────────────── */
.clcm-rd-seg {
  display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px;
  background: rgba(var(--clcm-navy-rgb, 16,42,67), .06);
  border: 1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .12);
}
.clcm-rd-seg > button {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  cursor: pointer; padding: 7px 16px; border-radius: 7px;
  font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.2;
  color: var(--clcm-text-muted, #5A6478);
  transition: background var(--clcm-dur-hover) var(--clcm-ease),
              color var(--clcm-dur-hover) var(--clcm-ease);
}
.clcm-rd-seg > button:hover { color: var(--clcm-navy, #102A43); }
.clcm-rd-seg > button.is-on {
  background: var(--clcm-navy, #102A43);
  color: var(--clcm-on-navy-strong, #fff);
}
.clcm-rd-seg > button:focus-visible {
  outline: 2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset: 2px;
}

/* ── a page head that follows the back-link bar ──────────────────────────────────
 * .clcm-rd-editbar ends in a hairline and .clcm-rd-head opens with margin:0, so on
 * the invoice editor the Send Invoice button sat directly on that rule with nothing
 * between them. Jose, 2026-10-17: "the send button is too close to the line above
 * it." Adjacent-sibling, so only the screens that carry both are touched. */
.clcm-rd-editbar + .clcm-rd-head { margin-top: 18px; }

/* ── a row title that is a button, not a link ────────────────────────────────────
 * Availability slots have no page of their own to link to — editing one opens a panel
 * on the screen you are already on — so the control has to be a <button>. It still has
 * to READ as the row's title, which .clcm-rd-title already handles; all this does is
 * take away the chrome a browser puts on a button.
 *
 * font-family only, never the `font` shorthand: the shorthand resets size and weight to
 * the button defaults and would quietly undo the 13.5px/700 .clcm-rd-title just set.
 * ─────────────────────────────────────────────────────────────────────────────── */
.clcm-rd-linkbtn {
  appearance: none; -webkit-appearance: none;
  border: 0; background: none; padding: 0; margin: 0;
  font-family: inherit; cursor: pointer; text-align: left;
}
.clcm-rd-linkbtn:focus-visible {
  outline: 2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D));
  outline-offset: 2px; border-radius: 3px;
}
/* The whole row answers a click (clcmAvailRowClick), so it has to say so before the
   click — a pointer cursor and a ground that lifts on hover, which is what every other
   clickable row on these screens does. */
.clcm-avail-row { cursor: pointer; }
.clcm-avail-row:hover { background: rgba(var(--clcm-navy-rgb, 16,42,67), .03); }

/* ── the switch track, when the switch is off ────────────────────────────────────
 * clcm-admin.css gives .clcm-toggle-slider `background: var(--clcm-border)` — the warm
 * hairline grey written for a 1px rule, used here as a 44×24 FILL. On the
 * cream Settings rows it was just about readable. On the white card the Create Course
 * page draws it on, the track disappeared and all that was left was the white knob
 * floating on white. Jose, 2026-10-17: "switcher on create course page is white and
 * isn't visible on the white background."
 *
 * THE OVERRIDE LIVES HERE, not in clcm-admin.css, and that is deliberate: that file is
 * pinned byte for byte against its v2.239.0 text by tests/test-tenant-colours-v2240-css.php,
 * which exists to prove the white-label work changed nothing about how Waymark renders.
 * Editing it to make a visual change would have to be reverted inside the guard to stay
 * green — which is the guard arguing with itself. This sheet loads after clcm-admin.css
 * and wins every property the two declare, which is what it was written for.
 *
 * A tint of the organization's own navy, not a fixed grey, so the unlit track belongs to
 * whatever palette the viewer's org wears; the inset hairline is what keeps it legible on
 * cream, where a 16% tint alone is faint.
 * ─────────────────────────────────────────────────────────────────────────────── */
.clcm-toggle-slider {
  background: rgba(var(--clcm-navy-rgb, 16,42,67), .16);
  box-shadow: inset 0 0 0 1px rgba(var(--clcm-navy-rgb, 16,42,67), .24);
}
/* The lit state still comes from clcm-admin.css (gold-text); only the resting one moves. */

/* ═════════════════════════════════════════════════════════════════════════════
 * CRISPNESS  (Jose, 2026-10-17: "I want the platform to look HD clear and crisp
 * and for some reason I think it looks a bit on the hazy side.")
 *
 * He was right, and none of it was the typefaces — those were checked first and
 * are genuine variable fonts with a working 100–900 weight axis. Three measured
 * causes, in the order they matter:
 *
 * 1. THE CARD EDGE WAS HALF THE MOCKUP'S. .clcm-rd-card and .clcm-rd-panel drew
 *    rgba(navy,.10), which composites to #E7EAEC — 1.21:1 on white. The mockup's
 *    own card border is #DDD8CE, 1.42:1, and it uses it 56 times against 26 of the
 *    faint cool one. The VISIBLE part of an edge is how far it sits above the
 *    ground: .21 against .42, so the mockup's edge is exactly twice as strong.
 *    That matters more here than it sounds, because a coach screen measures 71%
 *    pure white with white cards on it — the hairline is the ONLY thing separating
 *    a card from the page, and at 1.21:1 it is at the threshold of visibility.
 *    Both rules now read the --clcm-border token, which IS #DDD8CE and which the
 *    mockup was using all along. (Fixed at the rules themselves, above.)
 *
 * 2. SECONDARY TEXT WAS DOING ALMOST ALL THE TALKING, at 5.95:1. The sheet reads
 *    --clcm-text-muted in 78 places against 14 reads of the primary ink, so most
 *    words on any screen were the soft grey and only a few were the crisp one.
 *    The token moves here rather than in clcm-admin.css or clcm-public.css: those
 *    two are byte-pinned against v2.239.0 and this sheet loads after both, which
 *    is what it is for. It is not a tenant-emitted token, so nothing white-labelled
 *    changes underneath it.
 *
 *    #4C5566 is 7.50:1 on white and 6.84:1 on cream, up from 5.95 and 5.42. Same
 *    cool slate hue, so nothing shifts in temperature — it is the same colour with
 *    the haze taken out. Deliberately NOT taken to the primary ink's 17:1: these
 *    words are secondary and must still read as secondary, or the hierarchy the
 *    mockup draws collapses into one flat weight.
 *
 * 3. TEXT DRAWN AT PARTIAL OPACITY. The hero's eyebrow and subtitle were dimmed to
 *    85% of whatever was behind them. opacity dims the WHOLE element, guarantees no
 *    contrast floor, and is invisible to every contrast tool we have. The hero's
 *    ground is always navy, so both now read --clcm-on-navy-muted, which
 *    clcm_muted_ink() measures against that exact ground per tenant. The session
 *    chips KEEP opacity and simply use much less of it (.85→.92, .75→.86): their
 *    ground changes with the session's state, so there is no single ink to measure
 *    against, and that is the one case where opacity is the honest mechanism.
 * ═════════════════════════════════════════════════════════════════════════════ */
:root { --clcm-text-muted: #4C5566; }

/* ── the day and the next session, one card, side by side ────────────────────────
 * The mockup draws Home's top block as ONE bordered card holding the day timeline on
 * the left and the next session's detail on the right, with the Inbox/Activity card
 * beside it and the Clients table full width underneath (Jose, 2026-10-17).
 *
 * It was built as three cards in two columns, with Next session stacked under the
 * Inbox in the right-hand aside. So the left column ended where the timeline ended
 * while the right column ran on for two cards, and the full-width Clients table could
 * only begin below the TALLER of the two. The difference was a tall band of empty
 * page — the area Jose drew a box around and called "a space just left blank".
 *
 * Fixing it is three things, and all three are needed: the panel moves into the card
 * (markup, above), the two top cards are made the same height (align-items:stretch,
 * below), and the schedule card gives back some width so the right-hand card is not
 * a sliver. Doing only the first would still leave the columns ragged.
 * ───────────────────────────────────────────────────────────────────────────────── */
.clcm-rd-schedsplit { display: flex; align-items: stretch; }
.clcm-rd-schedsplit > .clcm-rd-sched { flex: 1 1 auto; min-width: 0; }
.clcm-homenext {
  flex: 0 0 340px; min-width: 0;
  border-left: 1px solid var(--clcm-border, #DDD8CE);
}
/* Below this the two halves cannot both have room; the detail goes under the day and
   keeps its separation with a rule on the other edge. */
@media (max-width: 1100px) {
  .clcm-rd-schedsplit { display: block; }
  .clcm-homenext { border-left: 0; border-top: 1px solid var(--clcm-border, #DDD8CE); }
}

/* ── the top row: two cards, equal height ────────────────────────────────────────
 * align-items was flex-start, which is what let one column outrun the other. stretch
 * makes the shorter card fill the row, so the Clients table starts immediately under
 * both — which is where the mockup puts it.
 *
 * The widths move with it. main was `flex:999 1 560px`, which gives the leftover space
 * almost entirely to the schedule and leaves the aside at its 300px floor — about 80/20.
 * The mockup measures 1055px against 485px, near enough 68/32, so the schedule narrows
 * and the aside gains. 2.1 against 1 lands there and still collapses to one column at
 * the existing breakpoints.
 * ───────────────────────────────────────────────────────────────────────────────── */
.clcm-wrap .clcm-rd-home { align-items: stretch; }
/* A RATIO, NOT A RATIO PLUS A BASIS. Written as `2.1 1 520px` the split measured 63/37 at
   1600px rather than the 68/32 the mockup draws, because the two bases (520 and 360) are
   shared out first and only the REMAINDER is divided in the ratio — so the real proportion
   drifts with the window. Basis 0 divides the whole row, which holds at every width; the
   min-widths keep the wrap behaviour the bases used to provide. Measured, not reasoned. */
.clcm-wrap .clcm-rd-home > .clcm-rd-home-main { flex: 2.13 1 0; min-width: 520px; }
.clcm-wrap .clcm-rd-home > .clcm-rd-home-side { flex: 1 1 0; min-width: 360px; }
/* …AND THOSE MIN-WIDTHS MUST GO AWAY ON A PHONE. The two rules above carry no upper
   bound — the @media (max-width:1100px) block above them closes before they start — so a
   375px screen was handing the main column a 520px floor. .clcm-rd-home wraps, so the
   side column dropped below correctly and then the main column sat 145px wider than the
   screen, clipped by the card's own overflow:hidden. Measured on the rendered dashboard
   at 375px: .clcm-rd-home-main computed 520px inside a 375px viewport.
   This is NOT new to the phone work — it is in the served v2.275.0 stylesheet and has
   been on every coach's phone since the ratio was measured. One column, no floor. */
@media (max-width: 820px) {
  .clcm-wrap .clcm-rd-home > .clcm-rd-home-main,
  .clcm-wrap .clcm-rd-home > .clcm-rd-home-side { flex: 1 1 100%; min-width: 0; }
}
/* A card that is told to stretch must pass the height on, or it stretches and its
   contents do not — which looks like a card with a long empty tail. */
.clcm-wrap .clcm-rd-home > .clcm-rd-home-main > .clcm-rd-card:only-child { height: 100%; }
.clcm-wrap .clcm-rd-home-side > .clcm-rd-card:last-child { margin-bottom: 0; }

/* ── the clients card needs a gap above it ──────────────────────────────────────
 * Reported 2026-10-19: "no space between cards". MEASURED on the rendered dashboard at
 * 1440, 1200, 1000, 950, 900, 880, 860, 830, 800, 700 and 375px — the distance from the
 * card above to the top of the clients card was 0px at EVERY ONE of them, and its
 * computed margin-top was 0px at every one. This is not a side effect of the aside's
 * layout: it is zero at the widths where that aside is in normal flow too.
 *
 * The card is a sibling of .clcm-rd-home inside .clcm-content, and nothing in either the
 * desktop or the phone branch ever gave it a top margin, so the two cards' borders met.
 * Matched to the 14px the main column already puts between stacked cards. Addressed by
 * class rather than with `+`, because a <script> sits between the two in the markup and
 * adjacency would skip straight past it. */
.clcm-wrap .clcm-content > .clcm-homeclients { margin-top: 14px; }

/* ── a flex-basis written for a row, inherited into a column ─────────────────────
 * THE 340px VOID. `.clcm-rd-bar > .clcm-search-wrap { flex: 0 1 340px }` is a WIDTH
 * while the bar is a row. At 560px the bar becomes `flex-direction: column` — and in
 * a column, flex-basis is the HEIGHT. So on every phone, on every screen whose bar
 * carries a Filter box, that box became 340px tall and left a blank band between the
 * heading and the first row. Measured on the Library at 375px: bar 389px tall, search
 * wrapper 340px of it, holding a 30px input.
 *
 * This is what Jose was pointing at on the Library and part of what "the pwa is all
 * wrong" meant. It is not a styling preference — the declaration means something
 * different from what it was written to mean, in a container that changes axis.
 *
 * Scoped to the breakpoint that flips the axis, not to the phone band generally:
 * between 560 and 820 the bar is still a row and 340px is still the right width.
 * ─────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .clcm-rd-bar > .clcm-search-wrap { flex: 0 0 auto; max-width: none; margin-left: 0; }
}

/* ── every link surface keeps its own ink when touched ───────────────────────────
 * THE THIRD INSTANCE OF ONE BUG. wp-admin sets `a:hover`, `a:focus` and `a:active`
 * to its own blue at specificity (0,1,1). Any link of ours that states a colour on
 * its base class alone — (0,1,0) — loses to that the moment a finger lands on it.
 * It was found on the row titles, then on the Needs-invoice chip, and now Jose has
 * found it a third time: "if you click on any of the tab buttons we get the
 * wordpress blue."
 *
 * So this is an audit rather than a third patch. Every link class in these sheets
 * that sets a colour was checked for a coloured :hover and :active; the ones below
 * had neither. The rule for each simply restates the colour its base rule already
 * chose — nothing here is a new design decision, it is the existing one made to
 * survive a touch.
 *
 * :focus is included with :hover. A keyboard user tabbing through the phone bar was
 * getting the same blue, with no pointer involved at all.
 * ─────────────────────────────────────────────────────────────────────────────── */
.clcm-rd-tab:hover, .clcm-rd-tab:focus, .clcm-rd-tab:active { color: var(--clcm-text-muted, #4C5566); }
.clcm-rd-tab.is-on:hover, .clcm-rd-tab.is-on:focus, .clcm-rd-tab.is-on:active { color: var(--clcm-navy, #102A43); }

.clcm-portal-tab:hover, .clcm-portal-tab:focus, .clcm-portal-tab:active { color: var(--clcm-text-muted, #4C5566); }
.clcm-portal-tab.active:hover, .clcm-portal-tab.active:focus, .clcm-portal-tab.active:active { color: var(--clcm-navy, #102A43); }
.clcm-portal-nav-link:active { color: var(--clcm-navy, #102A43); }
.clcm-portal-sheet-item:hover, .clcm-portal-sheet-item:focus, .clcm-portal-sheet-item:active { color: var(--clcm-navy, #102A43); }

@media (max-width: 820px) {
  .clcm-m-back:active { color: var(--clcm-navy, #102A43); }
  .clcm-m-pill:hover, .clcm-m-pill:focus, .clcm-m-pill:active { color: var(--clcm-navy, #102A43); }
  .clcm-m-pill.is-on:hover, .clcm-m-pill.is-on:focus, .clcm-m-pill.is-on:active { color: var(--clcm-on-navy-strong, #fff); }
  /* A row's own parts carry the colour, so the row restates both rather than one. */
  .clcm-m-row:hover .clcm-m-t, .clcm-m-row:focus .clcm-m-t, .clcm-m-row:active .clcm-m-t { color: var(--clcm-navy, #102A43); }
  .clcm-m-row:hover .clcm-m-sub, .clcm-m-row:focus .clcm-m-sub, .clcm-m-row:active .clcm-m-sub { color: var(--clcm-text-muted, #4C5566); }
}


/* ── two controls on one line, same height ───────────────────────────────────────
 * A narrow control beside a wide one, which several forms need (a date and a note, a
 * date and a reason). Two things it fixes that an inline grid-template did not:
 *
 * minmax(0, 220px) RATHER THAN 220px. A grid item's min-width is auto, so a track
 * given a flat px value still grows to the item's intrinsic minimum — and a native
 * date control's is wider than it looks. The New Invoice row asked for 200px and
 * rendered at 303px, which is the mismatched width Jose reported on 2026-10-17.
 *
 * EQUAL HEIGHTS. A one-row textarea matches the input it sits beside, so the pair
 * reads as one row rather than two controls that happen to be adjacent — and the
 * placeholder sits on the control's only line instead of at the top of a taller box,
 * which is the other half of what he saw. resize:vertical is kept: the note grows
 * when there is something to say, it just does not start tall and empty.
 * ─────────────────────────────────────────────────────────────────────────────── */
.clcm-rd-formpair {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 18px; margin-top: 20px; align-items: start; }
.clcm-rd-formpair > .clcm-form-group { min-width: 0; }
.clcm-rd-formpair .clcm-input { width: 100%; box-sizing: border-box; }
textarea.clcm-input--line {
  min-height: 0; height: auto; resize: vertical;
  overflow-x: hidden; white-space: pre-wrap; }
/* Below this the two stack, because 220px plus a usable note does not fit. */
@media (max-width: 640px) { .clcm-rd-formpair { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* ── a form control does not inherit the page's typeface ─────────────────────────
 * Jose, 2026-10-17: "multiple places where the text isn't centred in box on multiple
 * tabs." It is not a centring bug. Every <input>, <select> and <textarea> on the
 * portal was rendering in the BROWSER'S default form font — measured as Arial, while
 * document.fonts.check('16px Urbanist') returned true and every word around them was
 * Urbanist.
 *
 * Form controls are the one place where font-family is not inherited: a browser gives
 * them its own UA default unless a stylesheet says otherwise, and these controls carry
 * an inline font-size with no family beside it. Five of them do. The result is a
 * different typeface inside the box than outside it, with different ascent and descent,
 * so the text sits at a different height in its padding than the eye expects from the
 * label above it. That reads as "not centred", and it is on every tab with a form.
 *
 * inherit, not a named stack: these controls sit inside the portal, whose own font is
 * already the tenant's --clcm-font-body, and naming a face here would be a second place
 * to change when that one does.
 *
 * IN THIS SHEET, not clcm-public.css, for the same reason as the switch track above:
 * that file is pinned byte for byte against its v2.239.0 text, and this one loads after
 * it. Buttons are deliberately NOT included — they were not reported, they are styled
 * per-component, and changing every portal button's face on an inference is the kind of
 * blast radius a one-line fix should not have.
 * ─────────────────────────────────────────────────────────────────────────────── */
.clcm-portal input,
.clcm-portal select,
.clcm-portal textarea,
.clcm-portal-section input,
.clcm-portal-section select,
.clcm-portal-section textarea,
.clcm-portal-modal input,
.clcm-portal-modal select,
.clcm-portal-modal textarea { font-family: inherit; }

/* ── a course offer's description, clamped ───────────────────────────────────────
 * The portal's Your Plan card shows buyable courses when a client has no active plan,
 * and a coach writes each description as a paragraph. Three stacked made that card the
 * tallest thing on the dashboard — measured at ~700px against the other column's ~130px
 * for a client with nothing due, which is the band of empty page Jose reported on
 * 2026-10-17.
 *
 * Two lines, then an ellipsis. Nothing is lost: the full text is on the course itself,
 * and the element carries it as a title for hover and for assistive technology. The
 * -webkit- prefixed properties are the clamp's only interoperable spelling and are
 * supported in every engine this product runs on, Safari included.
 * ─────────────────────────────────────────────────────────────────────────────── */
.clcm-rd-offer-desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * THE PHONE VOCABULARY  (Jose's mobile mockups, 2026-10-17)
 *
 * Jose: "the pwa is all wrong in the restyle." Measured rather than taken on
 * faith — the Library at 375px rendered a five-column table (Name / Type / Last
 * Updated / Rename / Delete) scrolling sideways inside a 345px box, with rows
 * 234px tall because every cell wrapped, under three stacked full-width buttons
 * the mockup does not draw and a tall empty void. The mockup for that same screen
 * is a back pill, a Lora title, three filter pills and an edge-to-edge list of
 * ~64px rows reading "icon tile · title · Onboarding, 10 clients".
 *
 * WHY THIS IS A VOCABULARY AND NOT A SET OF SCREEN STYLESHEETS. Every secondary
 * screen in both mockups — coach and client — is the same five pieces in the same
 * order: back pill, head, an optional pair of stat cards, a row of filter pills,
 * then a full-bleed list whose every row is identity + title + sub-line + a
 * trailing value or status pill. Writing that once and naming it is the only way
 * twenty-four screens stay consistent with each other as they are built, and the
 * only way a later change reaches all of them.
 *
 * WHY CSS CANNOT DO IT ALONE, which is the question Jose asked directly. These
 * rules compose parts; they cannot invent them. A desktop table cell holding
 * "Folder" and another holding "—" cannot become "Onboarding · 10 clients" by
 * styling, because that sub-line is a different FACT. So each screen's rows are
 * changed to emit their parts with names — .clcm-m-ident, .clcm-m-t, .clcm-m-sub,
 * .clcm-m-end — and the desktop keeps its table from the same markup. One copy
 * per screen, not two: clcm-team.php records what happened the last time this
 * admin kept two copies of one list.
 *
 * 820px is the coach shell's own phone breakpoint — the width at which it swaps
 * the sidebar for the bottom tab bar and arms pull-to-refresh. A second, nearby
 * breakpoint would put the chrome and its contents on different sides of a line.
 * ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* THE GROUND. The mockup's phone pages are cream with white cards and white
     lists sitting on them; the built screens are white on white, which is the
     same figure/ground problem measured on the desktop. Sampled from Jose's own
     mockup, whose phone ground is --clcm-cream to within one rounding step — the
     exact sampled value is deliberately NOT written here: a near-miss hex in a
     COMMENT is still a near-miss to the brand-palette check, which refused this
     very file on 2026-10-17 and was right to. */
  .clcm-coach-admin #wpcontent,
  .clcm-coach-admin .clcm-wrap { background: var(--clcm-cream, #F7F4EE); }

  /* ── the way back ───────────────────────────────────────────────────────────
     Every screen reached from More opens with a white pill carrying a chevron and
     the word More. It is a LINK, not history.back(): a coach who lands on Reports
     from a notification has no history to go back to, and a dead control is worse
     than none. */
  .clcm-m-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px 9px 11px; margin: 0 0 18px;
    border-radius: 999px; background: var(--clcm-white, #FFFFFF);
    border: 1px solid var(--clcm-border, #DDD8CE);
    font-size: 14.5px; font-weight: 700; line-height: 1;
    color: var(--clcm-navy, #102A43); text-decoration: none;
    box-shadow: 0 1px 2px rgba(var(--clcm-navy-rgb, 16,42,67), .06);
  }
  .clcm-m-back i { font-size: 15px; line-height: 1; }
  .clcm-m-back:hover, .clcm-m-back:focus { color: var(--clcm-navy, #102A43); }
  .clcm-m-back:focus-visible {
    outline: 2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset: 2px; }

  /* ── the head ───────────────────────────────────────────────────────────────
     Lora title, one muted line under it. Larger than the desktop's 24px because a
     phone has one column and the title is the only thing orienting the reader. */
  .clcm-m-head { margin: 0 0 16px; }
  .clcm-m-head h1 {
    font-family: var(--clcm-font-serif, 'Lora', Georgia, serif);
    font-weight: 600; font-size: 30px; line-height: 1.12; margin: 0 0 6px;
    color: var(--clcm-navy, #102A43); text-wrap: balance; }
  .clcm-m-head p { margin: 0; font-size: 14.5px; line-height: 1.4;
    color: var(--clcm-text-muted, #4C5566); }

  /* ── the pair of figures ────────────────────────────────────────────────────
     Two cards, side by side, always two: the mockup shows exactly two on every
     screen that has them, and a third would wrap to a lonely full-width row. */
  .clcm-m-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 16px; }
  .clcm-m-stat {
    background: var(--clcm-white, #FFFFFF);
    border: 1px solid var(--clcm-border, #DDD8CE);
    border-radius: 14px; padding: 14px 16px; min-width: 0; }
  .clcm-m-stat b {
    display: block; font-family: var(--clcm-font-serif, 'Lora', Georgia, serif);
    font-weight: 600; font-size: 29px; line-height: 1.05; letter-spacing: -.01em;
    color: var(--clcm-navy, #102A43); font-variant-numeric: tabular-nums; }
  .clcm-m-stat span {
    display: block; margin-top: 4px; font-size: 13px; line-height: 1.3;
    color: var(--clcm-text-muted, #4C5566); }

  /* ── the filter pills ───────────────────────────────────────────────────────
     The phone's tab strip. Rounded, scrollable, the open one filled navy — the
     same "navy means selected" the nav and the primary button already use, so a
     tenant's palette carries it. Scrolls rather than wraps: a second line of pills
     pushes the list below the fold on the screens that have four of them. */
  .clcm-m-pills {
    display: flex; gap: 8px; margin: 0 0 14px; padding: 0 0 2px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .clcm-m-pills::-webkit-scrollbar { display: none; }
  .clcm-m-pill {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 17px; border-radius: 999px; white-space: nowrap;
    background: var(--clcm-white, #FFFFFF);
    border: 1px solid var(--clcm-border, #DDD8CE);
    font-size: 14px; font-weight: 700; line-height: 1;
    color: var(--clcm-navy, #102A43); text-decoration: none; cursor: pointer; }
  .clcm-m-pill.is-on {
    background: var(--clcm-navy, #102A43); border-color: var(--clcm-navy, #102A43);
    color: var(--clcm-on-navy-strong, #fff); }
  .clcm-m-pill:focus-visible {
    outline: 2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset: 2px; }

  /* ── the list ───────────────────────────────────────────────────────────────
     FULL BLEED, which is what makes it read as the mockup's list rather than as a
     card with rows in it: the white runs to both edges of the screen while the
     head above it keeps the page gutter. The negative margin is the page padding
     (20px, set by the coach shell) given back. */
  .clcm-m-list {
    background: var(--clcm-white, #FFFFFF);
    /* FULL BLEED WITHOUT KNOWING THE GUTTER. -20px assumed the coach shell's 20px page
       padding and was measured wrong by 6px in a harness that had a different one — and
       a screen with its own padding would be wrong in the real app too. 50% - 50vw is
       the same bleed computed from the viewport, so it is right whatever the parent
       pads by. */
    margin-left: 0; margin-right: 0; border-radius: 14px; overflow: hidden;
    border: 1px solid var(--clcm-border, #DDD8CE); }
  .clcm-m-row {
    display: grid; grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center; gap: 13px;
    padding: 13px 14px; min-height: 64px;
    border-top: 1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .07);
    text-decoration: none; color: inherit; }
  .clcm-m-row:first-child { border-top: 0; }
  .clcm-m-row:active { background: rgba(var(--clcm-navy-rgb, 16,42,67), .04); }
  .clcm-m-row:focus-visible {
    outline: 2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset: -2px; }

  /* The leading square: an icon tile for a thing, an initials disc for a person.
     Both 40px so a list that mixes them keeps one text column. */
  .clcm-m-ident { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
    display: grid; place-items: center;
    background: var(--clcm-cream, #F7F4EE); color: var(--clcm-gold-ink, #83662D); }
  .clcm-m-ident i { font-size: 19px; line-height: 1; }
  .clcm-m-ident--disc { border-radius: 50%; font-size: 13.5px; font-weight: 700; }
  .clcm-m-ident img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

  .clcm-m-t { display: block; font-size: 15px; font-weight: 700; line-height: 1.25;
    color: var(--clcm-navy, #102A43); }
  .clcm-m-sub { display: block; margin-top: 2px; font-size: 13px; line-height: 1.3;
    color: var(--clcm-text-muted, #4C5566);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The trailing slot: a figure, a status pill, or a chevron. */
  .clcm-m-end { flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: var(--clcm-navy, #102A43);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
  .clcm-m-end .ph { font-size: 16px; color: var(--clcm-text-muted, #4C5566); }

  /* ── the floating add ───────────────────────────────────────────────────────
     Clients and the client list are the two screens the mockup gives one. It
     clears the tab bar and the home indicator rather than sitting on them. */
  .clcm-m-fab {
    position: fixed; right: 18px; z-index: 39;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px; border-radius: 50%; border: 0;
    display: grid; place-items: center; cursor: pointer;
    background: var(--clcm-navy, #102A43); color: var(--clcm-on-navy-strong, #fff);
    box-shadow: 0 6px 18px rgba(var(--clcm-navy-rgb, 16,42,67), .30); }
  .clcm-m-fab i { font-size: 25px; line-height: 1; }
  .clcm-m-fab:focus-visible {
    outline: 2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset: 3px; }

  /* Desktop-only furniture the phone mockups do not draw. Each screen opts in by
     carrying the class, so nothing disappears from a screen that was not reviewed. */
  .clcm-m-hide { display: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════════════
 * THE SHARED COMPONENTS, AS THE PHONE DRAWS THEM
 *
 * The vocabulary above is for parts a screen has to emit. This block is the other
 * half, and it is the larger one: every secondary screen in the coach mockup is
 * built from components these partials ALREADY render — a .clcm-rd-head, a
 * .clcm-rd-tabs--page strip, a .clcm-rd-card holding a .clcm-rd-table. Restyling
 * those four at phone width moves every screen at once, with no markup touched and
 * nothing for the desktop and the phone to drift apart on.
 *
 * What it cannot do is invent facts, which is the limit Jose asked about: where the
 * mockup's sub-line is a DIFFERENT field rather than a rearrangement of the ones
 * already in the row, that screen gets .clcm-m-sub emitted for it. This block is
 * what makes those the exception instead of the rule.
 * ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* THE HEAD. Lora, larger than the desktop's 24px: one column, and the title is the
     only thing orienting the reader once the sidebar is a tab bar. */
  .clcm-wrap .clcm-rd-head { display: block; margin-bottom: 16px; }
  .clcm-wrap .clcm-rd-head h1 { font-size: 30px; line-height: 1.12; margin-bottom: 6px; }
  .clcm-wrap .clcm-rd-sub { font-size: 14.5px; line-height: 1.4; max-width: none; }

  /* THE TAB STRIP BECOMES THE MOCKUP'S PILL ROW. Same markup, same links, same
     .is-on — a rounded row that scrolls instead of an underlined strip. The open
     one fills navy, which is what "selected" means everywhere else in this design,
     so a tenant's palette carries it without a second decision. */
  /* EVERY tab strip, not just the page-level one. The strips INSIDE a card — Home's
     Clients card ("All / Needs attention / Quiet") and its Inbox card — kept the flat
     underlined tabs, so the same control was drawn two different ways on one screen while
     the mockup draws every filter row as a rounded pill. Jose, 2026-10-17: "Make sure the
     pills are rounded like in the mock up."
     The STATUS pills were already right: the mockup measures them at 6px and
     --clcm-radius-sm is 6px, so those are unchanged. */
  .clcm-wrap .clcm-rd-tabs,
  .clcm-wrap .clcm-rd-tabs--page,
  .clcm-wrap .clcm-rd-card > .clcm-tab-bar.clcm-rd-tabs--page {
    gap: 8px; margin: 0 0 16px; border-bottom: 0 !important;
    background: transparent !important;
    /* THE ROW SCROLLS, SO IT NEEDS ITS OWN GUTTERS. With zero side padding the first pill sat
       flush against the screen edge and the last one was sliced by it — Jose, 2026-10-17:
       "Multiple pills still cut off", on Clients (Active…Deleted) and Appointments
       (Upcoming…Refunds). The padding is the page's own 20px gutter, so the row lines up with
       the heading above it, and scroll-padding carries the same inset to a pill scrolled into
       view rather than leaving it jammed against the edge.
       overflow-x is declared HERE rather than relied on: these rows are wider than the screen
       on every list that has four filters. */
    padding: 4px 0 !important;
    overflow-x: auto; scroll-padding-inline: 0;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .clcm-wrap .clcm-rd-tabs::-webkit-scrollbar,
  .clcm-wrap .clcm-rd-tabs--page::-webkit-scrollbar { width: 0; height: 0; display: none; }
  /* THE MOCKUP'S OWN PILL, measured off the coach app frames: 34px tall, 0/14px padding and
     a 13px label. Ours were 37 x 9/17px x 14px — three pixels taller, six wider and a point
     larger, which at a 999px radius is what makes the capsule read fatter than the design.
     Jose, 2026-10-17: "The corners aren't right … on the pills." min-height rather than a
     fixed height so a wrapped label still fits. */
  .clcm-wrap .clcm-rd-tabs .clcm-rd-tab,
  .clcm-wrap .clcm-rd-tabs--page .clcm-rd-tab {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 0 16px; border-radius: 999px; border-bottom: 0;
    background: var(--clcm-white, #FFFFFF);
    border: 1px solid var(--clcm-border, #DDD8CE);
    font-size: 14px; color: var(--clcm-navy, #102A43); }
  .clcm-wrap .clcm-rd-tabs .clcm-rd-tab.is-on,
  .clcm-wrap .clcm-rd-tabs--page .clcm-rd-tab.is-on {
    background: var(--clcm-navy, #102A43); border-color: var(--clcm-navy, #102A43);
    color: var(--clcm-on-navy-strong, #fff); }
  .clcm-wrap .clcm-rd-tabs .clcm-rd-tab.is-on .clcm-rd-tab-n,
  .clcm-wrap .clcm-rd-tabs--page .clcm-rd-tab.is-on .clcm-rd-tab-n {
    background: rgba(255,255,255,.22); color: var(--clcm-on-navy-strong, #fff); }

  /* THE CARD GOES FULL BLEED. A bordered, rounded card inside a 20px gutter wastes
     40px of a 375px screen on a list that the mockup runs edge to edge. The card
     keeps its hairlines top and bottom so it still reads as one object. */
  .clcm-wrap .clcm-rd-card {
    margin-left: 0; margin-right: 0;
    border: 1px solid var(--clcm-border, #DDD8CE); border-radius: 14px; }
  .clcm-wrap .clcm-rd-card > .clcm-rd-bar { padding: 12px 14px; }

  /* ── A TABLE BECOMES A LIST ────────────────────────────────────────────────────
   * The measured state before this: five columns in a 345px box scrolling sideways,
   * rows 234px tall because every cell wrapped. A horizontal scroll inside a
   * vertical scroll is the worst of both, and it is what every list screen did.
   *
   * The shape below is the mockup's row — a title line with the trailing cell beside
   * it, and the middle cells running together underneath as the sub-line. It falls
   * out of the column ORDER these tables already use: first cell is the name, last
   * is the actions or the status, and what is in between is detail. No screen had to
   * be rewritten for it, and a screen whose order differs can opt out by class.
   * ─────────────────────────────────────────────────────────────────────────────── */
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep),
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody { display: block; width: 100%; min-width: 0; overflow: visible; }
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) thead { display: none; }
  /* A FLEX LINE, NOT A GRID. The first version of this put every middle cell in one
     explicit grid area (column 1, row 2). Two cells in one area do not flow — they
     STACK IN PLACE, and the Clients list drew the name, the phone, the course count,
     "3 weeks ago" and the status pill on top of one another at the same point. Grid
     placement is absolute; only flex wrapping gives the mockup's shape, which is a
     line of identity and then a quiet line of details that reads left to right.
     Measured at 375px on the Clients fixture, where five cells overlapped. */
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody tr {
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: 10px; row-gap: 2px;
    padding: 13px 14px; min-height: 64px;
    border-top: 1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .07); }
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody tr:first-child { border-top: 0; }
  /* The details: last in order, so they wrap together onto the second line. */
  /* width:auto is load-bearing. clcm-admin.css carries a phone rule of its own,
     .clcm-lib-table td { width:100% }, and that sheet is byte-pinned so it cannot be
     changed here. Under flex a width IS the basis, so every Library cell claimed a
     whole line and its rows went from 80px to 150px. Measured on the Library fixture
     at 375px: cells computed 335px wide, one per line, five lines a row. */
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody td {
    display: block; padding: 0; border: 0; order: 3; flex: 0 1 auto; width: auto;
    font-size: 13px; color: var(--clcm-text-muted, #4C5566); }
  /* A LEADING CHECKBOX IS A LEAD, NOT THE ROW'S NAME. Clients, Appointments and the
     Library all open their row with a select box; styling cell one as the title gave
     the checkbox the 15px navy weight and left the actual name among the details. */
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody td.col-check { order: 0; flex: 0 0 auto; }
  /* THE NAME: the first cell, or the cell after a leading checkbox. It grows, which is
     what pushes the details onto their own line whatever the table's column count. */
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody tr > td:first-child:not(.col-check),
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody tr > td.col-check + td {
    order: 1; flex: 1 1 auto; width: auto; min-width: 0;
    font-size: 15px; font-weight: 700; color: var(--clcm-navy, #102A43); }
  /* The trailing cell keeps the first line's right edge, as the mockup draws it. */
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody td:last-child {
    order: 2; flex: 0 1 auto; max-width: 100%; margin-left: auto; text-align: right; }
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody td:not(:first-child):not(:last-child):empty { display: none; }
  /* TWO ACTION CELLS, NOT ONE. The Library gives Rename and Delete a <td> each, so the
     generic rules above sent the LAST one to the trailing slot and left the other among
     the details: the row read "Title [Delete]" and then "• Folder — [Rename]" on the
     line below, which looks like damage rather than a control. Seen at 375px once the
     rows were rendered at real phone width rather than measured.
     Both ride the first line now, as one group at the right — where the mockup puts a
     row's trailing control. The first of them takes the free space; the rest just sit
     next to it. These come AFTER the :last-child rule on purpose: both selectors carry
     the same specificity, so source order is what decides. */
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody td.clcm-row-actions {
    order: 9; flex: 0 1 auto; max-width: 100%; margin-left: 6px; text-align: right; }
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody td:not(.clcm-row-actions) + td.clcm-row-actions {
    margin-left: auto; }

  /* ── THE ROW'S TRAILING VALUE, AND WHERE ITS BUTTONS GO ────────────────────────────
   * The mockup composes a row as identity, a sub-line, and ONE value on the right:
   * "INV-1047 · Ana Ruiz" / "Due Aug 31" / "$180". What the generic transform gave
   * instead was the invoice number as the title and then the status, the client, two
   * dates and the amount all running on, because it had no way to know which column
   * carried the value.
   *
   * A MONEY CELL IS THAT VALUE. .clcm-rd-money is already on every amount column in
   * the product — invoices, payments, packages — so the composition is read off
   * markup that is already there rather than added per screen.
   *
   * AND THE ACTION CELL STOPS CLAIMING THE SLOT. It is usually the last cell, so the
   * :last-child rule above handed it the trailing position and the amount fell to the
   * sub-line. Actions go to the END now, right-aligned on their own line, which is also
   * how the mockup draws them — Home's "Accept" sits under the request it belongs to,
   * not beside it. These come after :last-child deliberately: same specificity, so
   * source order decides, which is the same reason the Library rule below is written
   * against .clcm-rd-table.clcm-lib-table rather than the bare class.
   * ──────────────────────────────────────────────────────────────────────── */
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody td.clcm-rd-money {
    order: 2; flex: 0 0 auto; margin-left: auto; text-align: right;
    font-weight: 700; color: var(--clcm-navy, #102A43); }
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody td.col-actions {
    order: 9; flex: 0 1 auto; max-width: 100%; margin-left: auto; text-align: right; }
  /* …EXCEPT WHERE THERE ARE TWO OF THEM. Sending both to the first line only works while
     they fit beside the title. The Library's titles are worksheet names — "Client Intake /
     Formulario de Admisión de Cliente" wraps to two lines on a phone — so the pair split
     across lines, and WHICH of them fell depended on the title's length, so no two rows
     broke the same way. Rendered at 375px, every row in the list looked different.
     Its two cells go to the END instead, right-aligned on the last line, which is the one
     arrangement that cannot depend on the title. The single-action rows everywhere else
     (Metrics' "Reach out") keep the first line, which is where the mockup draws them.
     Written against .clcm-rd-table.clcm-lib-table rather than .clcm-lib-table alone: the
     generic rule above carries four classes and a bare .clcm-lib-table only three, so the
     first attempt lost the cascade and changed nothing. */
  .clcm-wrap .clcm-rd-table.clcm-lib-table:not(.clcm-m-keep) tbody td.clcm-row-actions { order: 9; }
  /* The title takes the whole first line, less the checkbox beside it. Without this a SHORT
     name ("Other Files") left room for the folder pill to ride up next to it while a long one
     did not, so the list still broke two different ways. Flex has no break-after, and a basis
     that fills the line is the way to say it. 46px is the select box and the row's column gap. */
  .clcm-wrap .clcm-rd-table.clcm-lib-table:not(.clcm-m-keep) tbody tr > td:first-child:not(.col-check),
  .clcm-wrap .clcm-rd-table.clcm-lib-table:not(.clcm-m-keep) tbody tr > td.col-check + td {
    flex: 1 1 calc(100% - 46px); }
  .clcm-wrap .clcm-rd-table.clcm-lib-table:not(.clcm-m-keep) tbody td:not(.clcm-row-actions) + td.clcm-row-actions {
    margin-left: auto; }

  /* A row whose last cell is a pile of buttons would otherwise take half the width.
     They stay reachable, stacked tight, and never push the name into two lines. */
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody td.col-actions,
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody td:last-child .row-actions {
    display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

  /* The page's own action buttons stack to full width on a phone in several partials.
     The mockup puts none of them on a list screen — they live behind "+" or inside
     the screen they belong to — so a screen opts out of its own header actions by
     marking them, rather than this guessing which buttons matter. */
  .clcm-wrap .clcm-m-actions-hide { display: none; }
}

/* ── a screen's own actions, on a phone ──────────────────────────────────────────
 * clcm-admin.css stacks .clcm-page-header-actions into a COLUMN of full-width
 * buttons below 640px. On the Library that is three bars the width of the screen —
 * New Folder, New Worksheet, New Form — filling the top of the page before the list
 * it is meant to introduce. The coach mockup draws no action buttons on a list
 * screen at all.
 *
 * NOT HIDDEN, though the mockup omits them. The mockup's coach creates from the "+"
 * on Home and on Clients; this product has no such control on Library, so hiding
 * these would take creating a worksheet away from a phone entirely. A design that
 * omits a control is not the same as a product that must not have one, and the
 * second reading is the one that strands a coach.
 *
 * A wrapping ROW of ordinary-sized buttons instead: they stop being the loudest
 * thing on the screen, the list starts near the top where the mockup has it, and
 * every action still works. In this sheet because clcm-admin.css is pinned.
 * ─────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .clcm-wrap .clcm-page-header-actions {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 8px; width: auto; margin-top: 4px; }
  .clcm-wrap .clcm-page-header-actions > * { width: auto; }
  /* THE PHONE MOCKUP'S OWN BUTTON. Measured off the coach app frames: 44px tall, a
     12px radius and a 15px label, against the 32px these were rendering at. 44 is
     also the smallest comfortable thumb target, which is why the mockup chose it.
     The breakpoint is 820px, the width at which the rail becomes the tab bar, so a
     screen changes shape once rather than twice. */
  .clcm-wrap .clcm-page-header-actions .clcm-btn {
    width: auto; display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; }
}

/* ── form controls keep the product's typeface ─────────────────────────────
 * A browser does NOT inherit font-family into input, select, textarea or button: each
 * gets a UA default instead. Measured on the coach screens at 375px, six of nine were
 * rendering controls in Arial, and one button in a monospace face, inside a page set
 * in Urbanist. Jose reported the same thing on the client portal, where it was fixed
 * for one modal in v2.275.0; this is the rest of it, and it is a defect at every width,
 * not a phone one.
 *
 * The mockups carry the same line in their own reset (input,textarea,button{font-family:
 * inherit}), so this is the design's intent, not an addition.
 *
 * The full stack rather than a bare token read: --clcm-font-sans is defined in
 * clcm-admin.css and NOT in clcm-public.css, and this sheet loads over both — an
 * unresolved var() voids the whole declaration, which would leave the portal's controls
 * in Arial while fixing the coach's. Scoped to .clcm-wrap and the portal root so it can
 * never reach wp-admin's own chrome. The modal root is listed separately because a
 * dialog is appended to the body, OUTSIDE .clcm-wrap — which is where the Arial
 * controls that survived the first pass were: the Add Client form and every modal's
 * close button.
 * ──────────────────────────────────────────────────────────────────────────── */
.clcm-wrap input, .clcm-wrap select, .clcm-wrap textarea, .clcm-wrap button,
.clcm-portal input, .clcm-portal select, .clcm-portal textarea, .clcm-portal button,
.clcm-modal-backdrop input, .clcm-modal-backdrop select,
.clcm-modal-backdrop textarea, .clcm-modal-backdrop button {
  font-family: var(--clcm-font-sans, 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif); }

/* ── a row's own actions, on a phone ─────────────────────────────────────────────
 * The mockup's list row is identity, title, sub-line, and on the right a value or a
 * status pill — never a pair of text buttons. The Library's rows carry Rename and
 * Delete, which at full size are the widest thing in the row and pull the eye away
 * from the name.
 *
 * Shrunk rather than hidden, for the same reason the header actions above were kept:
 * a phone is where a coach is most likely to be tidying up between sessions, and a
 * design that does not draw a control is not a product that may remove it. Quiet
 * enough that the title leads; still a real target — 32px, above the 24px minimum and
 * comfortably tappable at the row's own height.
 * ─────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody td:last-child .clcm-btn,
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody td.col-actions .clcm-btn {
    padding: 6px 10px; font-size: 12px; min-height: 36px; }
  /* Two stacked buttons make a row twice as tall as the mockup's; they sit side by side
     and the row keeps its 64px. */
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody td:last-child { display: flex; gap: 6px;
    align-items: center; justify-content: flex-end; flex-wrap: wrap; }
}

/* ── the KPI strip, on a phone ───────────────────────────────────────────
 * The DESKTOP mockup draws these as one bordered panel divided by hairlines, which is
 * what the base rule builds and what Jose approved. The PHONE mockup draws them as
 * separate white cards: measured off the coach app frames, 85px tall, a 14px radius, a
 * 12px/14px pad and a 24px Lora number against the desktop's 28px.
 *
 * So this is not a correction of the desktop — it is the second thing the same design
 * says at phone width, and the two disagree on purpose. The container gives up its own
 * border, radius and clipping so the cards inside can carry their own.
 *
 * At 820px, the width where the rail becomes the tab bar, so the screen changes shape
 * once. It follows the 782px rule in the file, so at that width and below this wins.
 * ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .clcm-wrap .clcm-rd-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .clcm-wrap .clcm-rd-stats > .clcm-rd-stat {
    padding: 12px 14px; border-right: 0; border-bottom: 0; border-radius: 14px;
    background: var(--clcm-white, #fff);
    border: 1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .10); }
  .clcm-wrap .clcm-rd-stats > .clcm-rd-stat .clcm-rd-stat-n { font-size: 24px; line-height: 1.1; }
  /* LEFT, not centred. The desktop rule centres a cell that has no sparkline, because
     there a lone number sitting left of empty space reads as a mistake. On a phone the
     card IS the cell, there is no empty space beside it, and the mockup measures every
     one of them text-align:left — number, label and hint stacked against the left edge
     (screenshots/coach-mobile/01-home.png, and 04-business-center.png). */
  .clcm-wrap .clcm-rd-stats > .clcm-rd-stat,
  .clcm-wrap .clcm-rd-stats > .clcm-rd-stat--nospark { text-align: left; }
}

/* ── a bar's own button, on a phone ─────────────────────────────────────────────
 * .clcm-rd-bar stacks into a column below its breakpoint with align-items:stretch, which is
 * right for the heading and a search box but wrong for a lone control: the Business Center's
 * "View All" measured 335px, a full-width bar under "Recent invoices" that read as the most
 * important thing on the screen.
 *
 * This is the same component whose fixed flex-basis became a 340px VOID when the bar turned
 * vertical — a basis is a width in a row and a height in a column. Stretch has the matching
 * trap: it is a no-op across a row and takes the whole width down a column.
 * ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .clcm-wrap .clcm-rd-bar > .clcm-btn { align-self: flex-start; width: auto; }
}

/* ── A COMPOSED ROW ────────────────────────────────────────────────────────
 * The mockup's row is an identity, ONE line of context under it, and a single value on the
 * right sitting centred against both lines: "INV-1047 · Ana Ruiz" / "Due Aug 31" / "$180".
 *
 * The generic flex transform above cannot do the centred value, because the cells of a <tr>
 * are siblings and a flex line has no way to span two of them. Grid can — a cell placed in
 * row 1/span 2 centres against the pair — but only while row 2 holds ONE item: two grid
 * items in one area do not flow, they stack in place, which is the bug that had the Clients
 * list drawing five cells on top of each other.
 *
 * So the two halves depend on each other. A table opts in with .clcm-m-row, and then says
 * which cell is the sub-line (.clcm-m-sub) and which is the trailing value (.clcm-m-trail);
 * every other middle cell is hidden at this width. One item in row 2, so the trailing value
 * can span both rows, and the composition is the mockup's rather than whatever happened to
 * fit. A table that has NOT opted in keeps the flex behaviour above unchanged.
 *
 * Hiding a column is a product decision, not a styling one, and the set hidden per list was
 * put to Jose rather than chosen here (2026-10-17).
 * ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .clcm-wrap .clcm-rd-table.clcm-m-row:not(.clcm-m-keep) tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center; column-gap: 10px; row-gap: 2px;
    padding: 12px 14px; min-height: 64px; }

  /* A leading select box spans both lines so it centres against the pair. */
  .clcm-wrap .clcm-rd-table.clcm-m-row:not(.clcm-m-keep) tbody td.col-check {
    grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; }

  /* THE NAME. Marked .clcm-m-id rather than inferred from position: the hide rule below
     carries eight compound classes, and a positional restore for it lost the cascade — the
     first version of this hid the client's NAME and left a row of just a checkbox and a
     status pill. An explicit marker is read by both rules at the same strength. */
  .clcm-wrap .clcm-rd-table.clcm-m-row:not(.clcm-m-keep) tbody td.clcm-m-id,
  .clcm-wrap .clcm-rd-table.clcm-m-row:not(.clcm-m-keep) tbody tr > td:first-child:not(.col-check) {
    display: block; grid-column: 2; grid-row: 1; min-width: 0;
    font-size: 15px; font-weight: 700; color: var(--clcm-navy, #102A43); }

  .clcm-wrap .clcm-rd-table.clcm-m-row:not(.clcm-m-keep) tbody td.clcm-m-sub {
    grid-column: 2; grid-row: 2; min-width: 0;
    font-size: 13px; font-weight: 400; color: var(--clcm-text-muted, #4C5566);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* THE VALUE, centred against both lines — the thing the flex version could not do. */
  .clcm-wrap .clcm-rd-table.clcm-m-row:not(.clcm-m-keep) tbody td.clcm-m-trail {
    grid-column: 3; grid-row: 1 / span 2; align-self: center;
    justify-self: end; text-align: right; white-space: nowrap; }

  /* …AND WHERE A LIST HAS TWO OF THEM. An invoice row needs both the amount and the state:
     dropping either is a real loss — a coach chasing money scans for "Overdue", and a list of
     invoices without sums is not an invoice list. Two cells cannot share one area without
     stacking in place, so a list that names two opts in here and they take a row each,
     right-aligned, which reads as one block against the identity beside it.
     An opt-in rather than :has(), so the behaviour is stated by the list rather than inferred. */
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-m-trail2:not(.clcm-m-keep) tbody td.clcm-m-trail {
    grid-row: auto; align-self: center; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-m-trail2:not(.clcm-m-keep) tbody td.clcm-m-trail:first-of-type {
    align-self: end; }

  /* Everything the list did not name is not drawn at this width. Every role a cell can
     hold is excluded by its own marker, so nothing is restored by a weaker later rule. */
  .clcm-wrap .clcm-rd-table.clcm-m-row:not(.clcm-m-keep) tbody td:not(.col-check):not(.clcm-m-id):not(.clcm-m-sub):not(.clcm-m-trail):not(.clcm-m-act):not(:first-child) {
    display: none; }

  /* Row actions, when a list keeps them, sit under the sub-line rather than beside the name. */
  /* Right-aligned, under the trailing value rather than under the email. Left-aligned they
     read as debris left over from the table; the mockup draws no row actions at all, so the
     quietest place that still keeps them reachable is the corner the eye already goes to. */
  /* grid-row:auto, not 3 — Appointments names TWO action cells (the Meeting cell carries
     Join, the last one carries the rest), and two items pinned to row 3 would stack in
     place, which is the overlap bug this whole block exists to avoid. Auto-placement gives
     them a row each, in source order, under the sub-line. */
  .clcm-wrap .clcm-rd-table.clcm-m-row:not(.clcm-m-keep) tbody td.clcm-m-act {
    display: flex !important; gap: 6px; justify-content: flex-end; flex-wrap: wrap;
    grid-column: 2 / span 2; grid-row: auto; margin-top: 2px; }
  .clcm-wrap .clcm-rd-table.clcm-m-row:not(.clcm-m-keep) tbody tr:has(td.clcm-m-act) {
    grid-template-rows: auto auto; grid-auto-rows: auto; }
}

/* ── HOME, ON A PHONE: the mockup's order ─────────────────────────────────────────
 * screenshots/coach-mobile/01-home.png reads: greeting, then the NEXT SESSION as a navy
 * hero, then the four KPI cards, then "Needs your attention". The built screen read:
 * greeting, five KPI cards, a 480px day grid, the next session below it, then the inbox.
 * Jose, 2026-10-17: "I just saw the Home Screen and it doesn't look the same as the mock up".
 *
 * THE DAY GRID IS THE WHOLE PROBLEM. Measured at 480px on a 812px screen — a column of
 * hour rules from 8am to 9pm that a coach cannot act on with a thumb, pushing the one thing
 * they opened the app for below the fold. The mockup draws no day grid on a phone at all;
 * the week strip and day list it DOES draw are the Schedule tab's job, which has its own
 * place in the tab bar. So the grid is not drawn here, and the card becomes the hero.
 *
 * The order is done on .clcm-content, where the stats and the home block are siblings —
 * the next-session panel is nested two levels down and `order` only moves siblings, so
 * lifting the whole block is the move that works without touching the partial.
 * ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .clcm-wrap.clcm-dashboard .clcm-content,
  .clcm-wrap .clcm-content:has(> .clcm-rd-home) { display: flex; flex-direction: column; }
  /* display:contents so the hero and the inbox can be ordered INDEPENDENTLY. They are
     main/side children of .clcm-rd-home, so ordering that block alone put the inbox
     between the hero and the KPIs — the first version of this pushed the four cards
     below a 768px inbox card, i.e. off the screen entirely. */
  .clcm-wrap .clcm-content > .clcm-rd-home        { display: contents; }
  .clcm-wrap .clcm-content .clcm-rd-home-main     { order: 1; }
  .clcm-wrap.clcm-dashboard .clcm-content > .clcm-rd-stats,
  .clcm-wrap .clcm-content:has(> .clcm-rd-home) > .clcm-rd-stats { order: 2; margin: 16px 0 0; }
  .clcm-wrap .clcm-content .clcm-rd-home-side     { order: 3; margin-top: 16px; }
  .clcm-wrap .clcm-content > .clcm-rd-card        { order: 4; }

  /* THE SESSION NOTE IS NOT IN THE HERO. The mockup's card is the appointment and two
     buttons; ours carried the whole last note in a 160px scrolling box. On navy its body
     text stayed dark — measured unreadable — and it is the one thing on the card a thumb
     cannot do anything with. It is on the client's profile, one tap away via Open profile. */
  .clcm-wrap .clcm-homenext .clcm-nextsess-note { display: none; }

  /* The hero keeps WHEN and nothing else. The mockup's card is the appointment — who, when,
     and two buttons — while ours stacks When, Last session, Action items and package
     progress as a definition list, which is four rows of reference a thumb cannot act on.
     The first dt/dd pair is When and is printed unconditionally, so the rest are hidden by
     position; all of them are on the client's profile behind Open profile. */
  .clcm-wrap .clcm-homenext .clcm-nextsess-facts dt:nth-of-type(n+2),
  .clcm-wrap .clcm-homenext .clcm-nextsess-facts dd:nth-of-type(n+2) { display: none; }
  .clcm-wrap .clcm-homenext .clcm-nextsess-bar { display: none; }

  /* THE HERO IS NOT A FULL-BLEED LIST. .clcm-rd-card runs edge to edge at this width, which
     is right for a list — Business Center's rows confirm it — and wrong for this one, which
     the mockup draws as an inset card with rounded corners like the KPI cards under it. It
     measured 375px wide with -23px side margins, so its 16px radius was off-screen and the
     navy read as a square band across the phone.
     EVERY card on Home, not just the hero: the mockup's "Needs your attention" panel is inset
     too — measured 351 wide in a 402 frame, an 18px gutter and a 14px radius. Full bleed is
     for LIST screens, where Business Center's rows confirm it. */
  .clcm-wrap .clcm-rd-home .clcm-rd-card {
    margin-left: 0; margin-right: 0; width: auto;
    border-width: 1px; border-radius: 16px; }

  /* The grid goes; the next-session panel is what the card now is. */
  .clcm-wrap .clcm-rd-schedsplit > .clcm-rd-sched { display: none; }
  .clcm-wrap .clcm-rd-home-main > .clcm-rd-card > .clcm-rd-bar { display: none; }

  /* THE HERO. Navy, as the mockup draws it, reading the org's own primary so a tenant's
     phone opens on their colour and not ours. */
  .clcm-wrap .clcm-rd-home-main > .clcm-rd-card {
    background: var(--clcm-navy, #102A43); border-color: var(--clcm-navy, #102A43);
    border-radius: 16px; overflow: hidden; }
  .clcm-wrap .clcm-homenext { border: 0; background: transparent; }
  .clcm-wrap .clcm-homenext,
  .clcm-wrap .clcm-homenext .clcm-rd-title,
  .clcm-wrap .clcm-homenext h6,
  .clcm-wrap .clcm-homenext a:not(.clcm-btn) {
    color: var(--clcm-on-navy-strong, #fff); }
  /* EVERY quiet text on the card, not just the two classes the first pass thought of.
     .clcm-rd-meta ("Coaching Session · Google Meet") and the facts list's own <dt> labels
     kept --clcm-text-muted and measured 1.95 on the navy — dark grey on dark blue. Found by
     measuring the card after re-inking it, which is the only reason they are not shipping. */
  .clcm-wrap .clcm-homenext .clcm-rd-muted,
  .clcm-wrap .clcm-homenext .clcm-rd-meta,
  .clcm-wrap .clcm-homenext .clcm-nextsess-facts dt,
  .clcm-wrap .clcm-homenext .clcm-nextsess-kicker,
  .clcm-wrap .clcm-homenext .clcm-nextsess-k {
    color: var(--clcm-on-navy-muted, rgba(255,255,255,.82)); }
  .clcm-wrap .clcm-homenext .clcm-nextsess-facts dd {
    color: var(--clcm-on-navy-strong, #fff); }
  .clcm-wrap .clcm-homenext .clcm-btn-primary {
    background: var(--clcm-gold, #C8A45D); border-color: var(--clcm-gold, #C8A45D);
    color: var(--clcm-navy, #102A43); }
  .clcm-wrap .clcm-homenext .clcm-btn-secondary {
    background: transparent; color: var(--clcm-on-navy-strong, #fff);
    border-color: var(--clcm-on-navy-muted, rgba(255,255,255,.82)); }
}

/* ── phone-only / phone-off, and the mockup's Home header ───────────────────────────────
 * Jose, 2026-10-17, against the coach Home mockup: no Add Client button, the mockup's four
 * KPI cards rather than our five, the mockup's date line rather than "Your practice at a
 * glance", and no sparklines. All four are the PHONE's reading of the design; the desktop
 * screen he approved is untouched, which is why every rule here is inside the media block.
 * ──────────────────────────────────────────────────────────────────────────── */
/* !important on BOTH halves, and it is load-bearing. .clcm-m-only is (0,1,0) and the thing it
   usually marks is a.clcm-rd-stat at (0,1,1) — so the bare rule LOST and the phone-only Inbox
   card rendered on the desktop too, six KPI cards where Jose approved five. Caught by the
   pre-deploy audit at 1440px, not by the phone work that introduced it.
   A visibility utility that can be out-specified by the element it is put on is not a utility,
   so both directions are forced. Block-level elements only — the two users today are a stat
   card and a paragraph; anything needing flex or grid wants its own rule. */
.clcm-m-only { display: none !important; }

@media (max-width: 820px) {
  .clcm-wrap .clcm-m-only { display: block !important; }
  .clcm-wrap .clcm-m-off  { display: none !important; }

  /* The date line, above the greeting. Gold, small-caps weight, as the mockup sets it. */
  .clcm-wrap .clcm-rd-eyebrow {
    margin: 0 0 2px; font-size: 13px; font-weight: 700; line-height: 1.3;
    color: var(--clcm-gold-ink, #83662D); }
  /* …and the line it replaces is not drawn underneath it. */
  .clcm-wrap .clcm-rd-head .clcm-rd-sub { display: none; }

  /* NO SPARKLINES. The desktop mockup pairs a number with a line; the phone mockup draws a
     bare figure, and at this width the line crowds the number it is meant to annotate. */
  .clcm-wrap .clcm-rd-stat-row svg { display: none; }
  .clcm-wrap .clcm-rd-stat-row { display: block; }
}

/* ── two muted greys that do not clear AA ─────────────────────────────────────────
 * Found by measuring every text node on the eleven portal screens at 375px.
 *
 * --clcm-muted is #6b7280 and measures 4.40 on white — under the 4.5 a 12–13px label needs,
 * and it is the colour of the AI companion's two standing disclaimers, which are the one
 * paragraph on that screen a client most needs to be able to read. It is defined in
 * clcm-public.css, which is byte-pinned, so it is re-declared here rather than edited there.
 * All 33 of its uses across that sheet and the portal partial are `color:` — checked, not
 * assumed — so darkening it to the value --clcm-text-muted already carries (7.50 on white,
 * 6.84 on cream) can only make text more legible, never a ground darker.
 *
 * .clcm-msg-empty is #8a96a3 at 3.01 on white: the SAME faint tier clcm-admin.css line 61
 * records a decision against, and the same one the schedule's hour labels had. Also pinned,
 * so also overridden here.
 * ──────────────────────────────────────────────────────────────────────────── */
:root { --clcm-muted: #4C5566; }
.clcm-msg-empty { color: var(--clcm-text-muted, #4C5566); }

/* ── a sheet, on a phone ──────────────────────────────────────────────────────────
 * The mockup draws New session note and Schedule a session as sheets that rise from the
 * bottom edge; the product draws them as centred modals. The geometry was already sound at
 * 375px — measured 355 wide with a scrolling body and the footer on screen — so this is the
 * presentation only: full width, anchored to the bottom, rounded at the top where a sheet is
 * grabbed and square where it meets the edge.
 *
 * AND THE FOOTER'S BUTTONS ARE 44px. They measured 32: the same thumb target the page
 * actions had, missed because that rule names .clcm-page-header-actions and a sheet's footer
 * is a different container. Save and Cancel are the two controls a sheet exists for.
 * ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .clcm-modal-backdrop { padding: 0; align-items: flex-end; }
  .clcm-modal-backdrop > .clcm-modal {
    width: 100%; max-width: none;
    border-radius: 18px 18px 0 0;
    max-height: calc(100dvh - 56px); }
  .clcm-modal-backdrop > .clcm-modal > .clcm-modal-footer {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .clcm-modal-backdrop > .clcm-modal > .clcm-modal-footer .clcm-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; }
}

/* ── one writing width (v2.380.0) ─────────────────────────────────────────────────
 * Jose, 2026-11-11: the places coaches WRITE share one width, about 900px — the Add Session Note
 * dialog, the session-note template editor and its read-only viewer, and the worksheet builder
 * page (its panel and its read-only banner). One token, so the four cannot drift apart. Read WITH its
 * fallback: this sheet also loads over the portal's clcm-public.css, and test-redesign-css-portable-v2268
 * allows a bare var() only for tokens both host sheets define.
 *
 * .clcm-modal--write is a MODIFIER: the base .clcm-modal (clcm-admin.css, 560px) is shared by
 * ~40 other dialogs and stays as it is. Same specificity as .clcm-modal, later in the cascade,
 * so it wins on a desktop; the phone sheet above (.clcm-modal-backdrop > .clcm-modal, two
 * classes, max-width: none) still wins on a phone. 94vw keeps a margin on a narrow laptop.
 *
 * EXPAND (the session note only): a class flip on the dialog to the window less 24px a side, the
 * writing box filling the height. Desktop only — on a phone the sheet is already full width, so
 * the button is hidden there and the expanded rules do not apply even if the class is set.
 * ──────────────────────────────────────────────────────────────────────────── */
:root { --clcm-write-width: 900px; }
.clcm-modal--write { max-width: min(var(--clcm-write-width, 900px), 94vw); }
.clcm-modal--write .clcm-editor-area { min-height: min(46vh, 460px); }
.clcm-write-width { max-width: var(--clcm-write-width, 900px); }
.clcm-modal-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.clcm-modal-expand {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.15); border: none; color: var(--clcm-white, #fff); cursor: pointer;
  padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 18px; }
.clcm-modal-expand:hover { background: rgba(255,255,255,.25); }
.clcm-modal-expand:focus-visible { outline: 2px solid var(--clcm-white, #fff); outline-offset: 2px; }
@media (min-width: 821px) {
  .clcm-modal--write.is-expanded { width: calc(100vw - 48px); max-width: none; height: calc(100vh - 48px); height: calc(100dvh - 48px); max-height: none; }
  .clcm-modal--write.is-expanded > .clcm-modal-body { flex: 1 1 auto; display: flex; flex-direction: column; }
  .clcm-modal--write.is-expanded .clcm-editor-area { flex: 1 1 0; min-height: 240px; overflow-y: auto; }
}
/* ‹ › on an overflowing tab row (v2.380.0) — public/js/clcm-tab-arrows.js adds them inside .clcm-rd-tabs rows on the coach
   admin and shows each only while the row has more that way. Sticky, so they stay at the row's ends while it scrolls; the
   script cancels their width with negative margins. The edge fade stands down while an arrow is showing: the mask would
   fade the arrow itself. Never on a phone — the script does not show them there, and this says so too. */
.clcm-tabs-arrow { position: sticky; z-index: 2; flex: 0 0 28px; width: 28px; height: 28px; align-self: center; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; cursor: pointer;
  background: var(--clcm-white); color: var(--clcm-navy); border: 1px solid rgba(var(--clcm-navy-rgb),.18);
  box-shadow: 0 1px 4px rgba(var(--clcm-navy-rgb),.18); }
.clcm-tabs-arrow--prev { left: 0; }
.clcm-tabs-arrow--next { right: 0; }
.clcm-tabs-arrow[hidden] { display: none; }
.clcm-tabs-arrow:hover { background: var(--clcm-cream); }
.clcm-tabs-arrow:focus-visible { outline: 2px solid var(--clcm-navy); outline-offset: 1px; }
.clcm-rd-tabs.clcm-tabs-arrowed { -webkit-mask-image: none !important; mask-image: none !important; }
@media (max-width: 820px) {
  .clcm-tabs-arrow { display: none !important; }
  .clcm-modal-expand { display: none; }
  /* the phone keeps the 220px box it had (it was inline until v2.380.0); the sheet's body scrolls */
  .clcm-modal--write .clcm-editor-area { min-height: 220px; }
}

/* ── small boxes read as pills on the phone ──────────────────────────────────
 * Jose, 2026-10-17: "Many boxes still square instead of round pill."
 *
 * AN APPROVED DEVIATION FROM THE MOCKUP, not a conformance fix — do not "correct" it back.
 * I measured the mockup's own inline styles before changing anything, and every box the
 * sweep flagged was already an exact match: the status pill is border-radius:6px there, the
 * 26px row icon tile 6px, the 26/28px icon buttons 6px, the course cover badge 5px, the tab
 * count badge 5px. Across the whole desktop mockup 7px appears 62 times, 6px 38, 5px 31 and
 * 999px only 10 — filter chips, the back pill, the bottom tabs and the toggles. So the
 * capsules below are a departure, chosen deliberately: on a 375px screen a 999px filter row
 * sitting directly above a 6px status pill reads as two different generations of component,
 * and internal consistency won. Jose called it on 2026-10-17 after seeing the measurements.
 *
 * PHONE ONLY. Desktop keeps the mockup's radii untouched — the complaint was the PWA, and the
 * mockup is still authoritative there.
 *
 * Two specificity traps are load-bearing here; both have bitten this sheet before.
 *   1. `#clcm-coach-portal .clcm-btn-sm` (line ~810) pins 6px with an ID, so no number of
 *      classes can beat it. The button rules below carry the same ID rather than !important.
 *   2. Groups' row buttons are `clcm-btn clcm-btn-ghost clcm-btn-sm clcm-btn-icon` — one
 *      element in both families. Without :not(.clcm-btn-icon) a 26x32 icon button becomes a
 *      capsule, which is the one thing Jose's decision explicitly excluded (too small for it).
 *
 * Icon buttons and icon tiles (.clcm-rd-iact, .clcm-rd-ico, .clcm-btn-icon) stay at the
 * mockup's 6px on purpose. They are square boxes holding a glyph, not labels.
 * ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {

  /* Status pills. Unprefixed on purpose: this sheet loads over both clcm-admin.css and
     clcm-public.css, so one rule covers the coach PWA and the client portal, which is what
     keeps the two apps matching. The course cover badge needs its own line because
     `.clcm-wrap .clcm-rd-course-tags .clcm-rd-pill` pins 5px at three classes. */
  .clcm-rd-pill,
  .clcm-wrap .clcm-rd-course-tags .clcm-rd-pill { border-radius: 999px; }

  /* Certification requirement chips. */
  .clcm-wrap .clcm-rd-req { border-radius: 999px; padding: 3px 11px; }

  /* Small and row-level buttons — label buttons only, never the icon ones. */
  .clcm-wrap .clcm-btn-sm:not(.clcm-btn-icon),
  #clcm-coach-portal .clcm-btn-sm:not(.clcm-btn-icon),
  .clcm-wrap .clcm-rd-table tbody .clcm-btn:not(.clcm-btn-icon),
  .clcm-wrap .clcm-row-actions .clcm-btn:not(.clcm-btn-icon),
  .clcm-wrap .col-actions .clcm-btn:not(.clcm-btn-icon),
  .clcm-wrap .clcm-metric-act { border-radius: 999px; }
}


/* ── HOME: THE ACTIVITY CARD MUST NOT SET THE ROW'S HEIGHT ───────────────────────────
 * Jose, 2026-10-18, pointing at the blank lower half of the day-schedule card: "this empty
 * space at the bottom. if you make the inbox card to the right of it shorter and scrollable
 * and that way you can eliminate this odd blank space."
 *
 * MEASURED CAUSE. `.clcm-rd-home` sets align-items:flex-start at (0,1,0), but
 * `.clcm-wrap .clcm-rd-home` sets align-items:stretch at (0,2,0) and wins. The row's height
 * is therefore max(schedule, feed) — and the feed is the long one, so the schedule card was
 * stretched to match it and painted ~185px of nothing beneath its last hour. Measured at
 * 1440px before this rule: row 731px, schedule content 546px.
 *
 * WHY NOT JUST REVERT TO flex-start. That stretch is a RECORDED DECISION (the comment at the
 * rule says so): it is what makes the Clients table start immediately under BOTH columns,
 * which is where the mockup puts it. Reverting would trade Jose's blank space for a ragged
 * bottom edge and move the table back up under one column only.
 *
 * SO THE FEED LEAVES THE FLOW INSTEAD. An absolutely positioned card has no hypothetical
 * cross size, so the flex line is sized by the schedule column alone; the aside then stretches
 * to that height and the card fills it exactly. The feed scrolls inside itself. Equal heights
 * and the flush table are both kept, and the blank space is gone. Measured after: row 546px,
 * panel 483px visible of 667px, scrolling, no horizontal overflow.
 *
 * SAFE BECAUSE THE ASIDE HOLDS EXACTLY ONE CARD — verified in clcm-dashboard.php: every
 * conditional in that aside is INSIDE .clcm-homeinbox, so nothing can appear beside it and be
 * overlapped. A second card there would need this rule revisited.
 *
 * DESKTOP ONLY. On the phone .clcm-rd-home is display:contents and the side column is an
 * ordered sibling of the stats strip, so taking it out of flow there would strand it.
 * min-height keeps the card usable on a day with no sessions, when the schedule is short. */
@media (min-width: 821px) {
  /* A FLEX COLUMN, NOT AN ABSOLUTE BOX. The first version of this took the card out of
     flow with position:absolute/inset:0, which fills the stretched column correctly while
     the two columns really are side by side — and is wrong the moment they are not.
     .clcm-rd-home wraps, and MEASURED on the rendered dashboard the wrap happens between
     950px and 1000px of viewport, well above this block's own 821px floor. Through that
     whole band the aside was full width with the card out of flow at its 360px floor:
     the list was clipped mid-row and scrolled inside a full-width card, which is what the
     screenshot of 2026-10-19 shows. Flex gets the same filled column when the aside is
     stretched beside the schedule, and simply reports its content height when it is not. */
  .clcm-wrap .clcm-rd-home > .clcm-rd-home-side {
    display: flex; flex-direction: column; min-height: 360px;
  }
  .clcm-wrap .clcm-rd-home-side > .clcm-homeinbox {
    flex: 1 1 auto; min-height: 0; margin: 0;
    display: flex; flex-direction: column;
  }
  .clcm-wrap .clcm-homeinbox > .clcm-rd-bar { flex: 0 0 auto; }
  .clcm-wrap .clcm-homeinbox-more { flex: 0 0 auto; }

  /* The row's available width, measured on the element the columns actually divide. A
     media query cannot answer this: the viewport includes the coach rail, so the same
     1440px window gives a different row width here than it does on a screen without it,
     and the wrap point moves with it. The container is .clcm-rd-home rather than
     .clcm-content because containment makes an element the containing block for fixed
     descendants — the home block has none (checked, markup and stylesheet), the content
     column has dialogs. Below 821px .clcm-rd-home is display:contents, generates no box
     and is no container, which is the right answer there anyway. */
  .clcm-wrap .clcm-rd-home { container-type: inline-size; }
}

/* ── fill-and-scroll ONLY while the two columns really are side by side ─────────
 * 894px = the 520px main floor + the 360px aside floor + the 14px gap, i.e. exactly the
 * width below which .clcm-rd-home wraps. Written from those three numbers so it moves
 * with them rather than drifting into a lie.
 *
 * flex-basis:0 is what stops the card from setting the row's height. With basis auto the
 * aside reports its content height, and MEASURED at 1440px that made the row 592px against
 * the schedule's 546 — the schedule card then stretched and carried 46px of empty tail,
 * which is the blank space this whole arrangement exists to remove. Basis 0 means the
 * aside contributes only its 360px floor, so the schedule sets the height, the card grows
 * into it and the list scrolls inside. Stacked, the query does not match, basis stays auto
 * and the card is simply as tall as its contents. */
@container (min-width: 894px) {
  .clcm-wrap .clcm-rd-home-side > .clcm-homeinbox { flex-basis: 0; }
  .clcm-wrap .clcm-homeinbox-panel:not([hidden]) {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
  }
}


/* ── HOME: THE GETTING-STARTED BAR WAS NEVER GIVEN ITS CSS ───────────────────────────
 * Jose, 2026-10-18, on a freshly created test organization: "buttons too close to the edge."
 *
 * The cause is not a padding value that is too small — there is no rule at all. The markup in
 * clcm-dashboard.php references .clcm-gs, .clcm-gs-strip, .clcm-gs-ring, .clcm-gs-text and
 * .clcm-gs-next, and `git log -S'clcm-gs-strip' -- public/css admin/css` returns NOTHING: not
 * one of those five has ever had a declaration in any stylesheet. So the strip is an unstyled
 * <div> sitting directly inside .clcm-rd-panel, whose own padding belongs to
 * .clcm-rd-panel-body — which this strip is not inside.
 *
 * With no rule, an inline <svg> followed by a block <p> followed by two buttons stacks on three
 * lines, every one of them flush against the panel edge and the 3px gold border-left. That is
 * the whole of what Jose is looking at: the ring on one line, the sentence on the next, the
 * buttons on a third, all touching the rail. It only became obvious on a NEW org because that
 * is where the bar actually shows — an established org has finished the steps and the bar is
 * gone, which is why this survived to a test organization to be found.
 *
 * The Implementation Map describes this bar as the mockup's, "collapses to one line", so that
 * is what it is given: one flex row, the ring and the buttons fixed, the sentence taking the
 * slack and wrapping before the buttons do.
 *
 * NO EMITTED TOKEN IS READ HERE. --clcm-text-muted is not one of the fifteen tokens_for()
 * emits, so this block adds nothing to the varfb count that
 * tests/test-tenant-colours-v2240-sweep.php pins. */
.clcm-wrap .clcm-gs-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 14px 18px;
}
.clcm-wrap .clcm-gs-ring { flex: 0 0 auto; display: block; }
.clcm-wrap .clcm-gs-text {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
}
.clcm-wrap .clcm-gs-next { color: var(--clcm-text-muted, #5A6478); }
.clcm-wrap .clcm-gs-strip > .clcm-btn { flex: 0 0 auto; }
/* The expanded step list shares the bar's gutter, or opening "All steps" drops a flush-left
   column under an indented sentence. The inline style on that element sets `padding:6px 0 10px`,
   which is (0,0,0) in the cascade but an inline declaration, so this has to be !important to
   reach it — the alternative is editing a byte-pinned partial for a horizontal value. */
.clcm-wrap #clcm-gs-all { padding-left: 18px !important; padding-right: 18px !important; }


/* ── THE FIELD RADIUS THE REDESIGN DECLARED AND NEVER GOT ────────────────────────────
 * Reported to Jose 2026-10-18, fixed on his "fix the rest of the reported things".
 *
 * This sheet has declared a 7px field radius since the reskin — `.clcm-wrap .clcm-input,
 * .clcm-wrap .clcm-select { border-radius: 7px }` — and it has NEVER APPLIED ANYWHERE. The
 * byte-pinned clcm-admin.css carries `.clcm-wrap input.clcm-input, .clcm-wrap select.clcm-select,
 * .clcm-wrap textarea.clcm-textarea { border-radius: var(--clcm-radius) }` at (0,2,1), and a
 * class-only selector is (0,2,0), so 10px won every time. The same block's BUTTON radius did
 * apply, which is why the workspace has read as 10px fields beside 7px buttons.
 *
 * The cascade is per-property, so the 7px block was not wholly discarded — its box-sizing and
 * height are declared nowhere else and DO apply. Only padding, border-width and border-radius
 * were being lost. This restores the radius alone.
 *
 * SPECIFICITY IS THE WHOLE FIX. Each selector below MATCHES the pinned one it has to beat and
 * wins on source order, because this sheet loads after clcm-admin.css:
 *   input    pinned (0,2,1)  ->  .clcm-wrap input.clcm-input                        (0,2,1)
 *   textarea pinned (0,2,1)  ->  .clcm-wrap textarea.clcm-textarea                  (0,2,1)
 *   select   pinned (0,3,1)  ->  .clcm-wrap select:not([multiple]):not(.clcm-unstyled) (0,3,1)
 * The select arm has to be the blanket one, not `select.clcm-select` (0,2,1), because the pinned
 * blanket rule is the higher of the two and would otherwise still win for every select.
 *
 * Buttons move 7px -> 9px in the rule above, which is what the mockups measure for an h32-h34
 * button ({{ a.cta }} and "Join" are both 9px). .clcm-btn-sm stays at 6px: the mockup's own h26
 * buttons are 5-6px, so the small size is already right and only the medium one was off.
 *
 * NO EMITTED TOKEN IS READ HERE, so the varfb pin is untouched. */
.clcm-wrap input.clcm-input,
.clcm-wrap textarea.clcm-textarea,
.clcm-wrap select:not([multiple]):not(.clcm-unstyled),
#clcm-coach-portal input.clcm-input,
#clcm-coach-portal textarea.clcm-textarea,
#clcm-coach-portal select:not([multiple]):not(.clcm-unstyled) { border-radius: 7px; }


/* ── A TABLE THAT MUST STAY A TABLE SCROLLS, IT DOES NOT BREAK THE PAGE ──────────────
 * .clcm-m-keep is the opt-out from the phone row transform, and it has only ever existed as
 * `:not(.clcm-m-keep)` — an opt-out with no positive rules. A table that opts out therefore kept
 * its seven columns at 375px and pushed the whole document sideways. This is the missing half:
 * the wrapper scrolls, so the table keeps its headers and the PAGE keeps its width.
 * Used by the Metrics "By client" roster, where five of the columns are bare numbers whose only
 * meaning is the heading above them. */
.clcm-m-scroll { min-width: 0; }
@media (max-width: 820px) {
  .clcm-wrap .clcm-m-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .clcm-wrap .clcm-m-scroll > .clcm-rd-table.clcm-m-keep { min-width: 560px; }
}


/* ── THE PICKER: a searchable, folder-grouped replacement for a native <select> ──────
 * Jose, 2026-10-19: the worksheet assign dropdown "looks a bit disorganized and not finished".
 * It was a native <select> of ~40 flat alphabetical items in two languages with no folders and
 * no search, on a Library that has folders. A <select> cannot be grouped past <optgroup>, cannot
 * be searched and cannot be styled, so this replaces it rather than dressing it.
 * Used by Client Profile -> Worksheets (assign) and -> Files (Choose from Library).
 * Every colour reads a token with a literal floor, because this sheet loads over two hosts and
 * an unresolved var() voids the whole declaration. THREE of those reads are emitted tokens and so
 * are counted by the varfb pin: the two focus rings, in this sheet's established gold-text idiom
 * where the INNER gold read is the counted one, and the panel's shadow on navy-rgb. The rest —
 * border, white, text, text-muted, cream, font-sans — are not names tokens_for() emits and are
 * not tenant reads at all.
 * That idiom is deliberately NOT spelled out in this comment: the sweep is line-based over the
 * RAW file, so a literal written inside a comment is counted exactly like one in a declaration.
 * Writing it here once put the count at 119 instead of 118. */
.clcm-pick { position: relative; min-width: 0; }
.clcm-pick-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; box-sizing: border-box; height: 34px; padding: 0 10px;
  border: 1.5px solid var(--clcm-border, #DDD8CE); border-radius: 7px;
  background: var(--clcm-white, #FFFFFF); cursor: pointer; text-align: left;
  font-family: var(--clcm-font-sans, 'Urbanist', system-ui, sans-serif); font-size: 13px;
  color: var(--clcm-text-muted, #5A6478);
}
/* The label only becomes full-strength ink once something is actually chosen, so the resting
   state reads as a prompt rather than as a value. */
.clcm-pick.is-set .clcm-pick-toggle { color: var(--clcm-text, #1A1A2E); font-weight: 600; }
.clcm-pick-toggle:focus-visible {
  outline: 2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset: 1px;
}
.clcm-pick-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.clcm-pick-panel {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--clcm-white, #FFFFFF);
  border: 1px solid var(--clcm-border, #DDD8CE); border-radius: 10px;
  /* navy-rgb, not the literal: a tenant's panel should cast their own shadow, like every other
     one in this sheet. The Waymark triplet is the floor for a host that lacks the token. */
  box-shadow: 0 10px 28px rgba(var(--clcm-navy-rgb, 16,42,67),.16); padding: 8px;
}
.clcm-pick-panel[hidden] { display: none; }
.clcm-pick-filter { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.clcm-pick-list { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.clcm-pick-group[hidden] { display: none; }
.clcm-pick-group-h {
  margin: 8px 0 2px; padding: 0 8px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase; color: var(--clcm-text-muted, #5A6478);
}
.clcm-pick-group:first-child .clcm-pick-group-h { margin-top: 2px; }
.clcm-pick-opt {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font-family: var(--clcm-font-sans, 'Urbanist', system-ui, sans-serif); font-size: 13px;
  color: var(--clcm-text, #1A1A2E);
}
.clcm-pick-opt[hidden] { display: none; }
.clcm-pick-opt:hover { background: var(--clcm-cream, #F7F4EE); }
.clcm-pick-opt:focus-visible {
  outline: 2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset: -2px;
}
.clcm-pick-opt[aria-selected="true"] { background: var(--clcm-cream, #F7F4EE); font-weight: 700; }
.clcm-pick-none, .clcm-pick-empty {
  margin: 8px; font-size: 12.5px; color: var(--clcm-text-muted, #5A6478);
}
.clcm-pick-none[hidden] { display: none; }
/* On a phone the panel is free to use the width it has; the list cap keeps it off the keyboard. */
@media (max-width: 820px) {
  .clcm-pick-list { max-height: 44vh; }
}

/* ── portal textareas: no horizontal scroll track ───────────────────────────────
 * Reported 2026-10-19 with screenshots of three of them — the Messages composer,
 * the Journal entry box and the Dashboard quick-entry box — each drawing a grey
 * bar across its own bottom edge.
 *
 * What the evidence actually says, which is less than a tidy story would claim:
 *   - Measured in a Chromium build against these same two sheets, all three report
 *     scrollWidth === clientWidth with the box empty. There is no overflow here.
 *   - His Safari draws a horizontal track whose thumb fills ~85% of it, and draws
 *     NO vertical track. A thumb that short means WebKit really is computing a
 *     wider scroll width for these controls; the absence of the vertical track
 *     rules out "the Mac is set to show scroll bars always, so both are painted
 *     over an empty box" — that would have shown both.
 * So: a WebKit-only scroll width for a form control, made permanently visible by
 * that always-on scroll bar setting. The exact number is not reproducible here and
 * is not worth guessing at.
 *
 * Take the horizontal axis away rather than chase a width this engine does not
 * agree on. A textarea wraps its text (white-space is pre-wrap), so hiding the x
 * axis puts nothing out of reach that sideways scrolling would have recovered;
 * break-word is here because that is the one case it would — a pasted link with no
 * spaces in it now wraps instead of running under the hidden edge. The y axis stays
 * auto: a long entry must still scroll.
 *
 * Not in a media block on purpose — this is a function of the engine and the
 * viewer's system setting, not of the viewport.
 * ─────────────────────────────────────────────────────────────────────────────── */
.clcm-portal textarea,
.clcm-portal-section textarea,
.clcm-portal-modal textarea {
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: break-word;
}

/* ── portal cards: flat, with a hairline that belongs to the tenant ─────────────
 * The portal's cards carried `box-shadow: 0 10px 32px rgba(var(--clcm-navy-rgb),.07)`
 * (clcm-public.css:446) over a warm grey `rgba(229,224,216,.85)` border. Flat with a
 * hairline is the redesign's card, and .clcm-rd-card — the portal's other card family —
 * is already flat, so this is what stops the two families reading as two generations of
 * component on the same screen.
 *
 * THE HAIRLINE HAS TO BE NAVY, NOT A BORDER TOKEN, and that is not a preference.
 * CLCM_Whitelabel::tokens_for() emits fifteen keys and none of them is a border or neutral
 * — `--clcm-border` is hardcoded #DDD8CE in BOTH host sheets, identical for every tenant,
 * so it cannot carry a per-tenant colour however it is written. `--clcm-navy-rgb` is the
 * one per-tenant value that reaches here.
 *
 * A BARE var() IS THE SAFE FORM HERE, which is the opposite of the usual rule in this
 * sheet: a bare read voids the whole declaration on a host that lacks the token, but
 * --clcm-navy-rgb is defined by clcm-public.css AND clcm-admin.css, so there is no such
 * host. A fallback would be the dangerous half — it would silently paint Waymark navy on
 * a tenant whose token did not arrive, instead of failing visibly.
 *
 * Scoped under .clcm-portal / .clcm-portal-standalone on purpose. .clcm-rd-card is the
 * single most shared selector in this sheet and also dresses every coach-admin list; the
 * base rule at the top of this file is deliberately untouched.
 * ─────────────────────────────────────────────────────────────────────────────── */
.clcm-portal .clcm-portal-section,
.clcm-portal-standalone .clcm-portal-section,
.clcm-portal .clcm-course-card-portal {
  box-shadow: none;
  border-color: rgba(var(--clcm-navy-rgb), .14);
}
.clcm-portal .clcm-rd-card,
.clcm-portal-standalone .clcm-rd-card {
  border-color: rgba(var(--clcm-navy-rgb), .14);
}

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.313.0 — THE CLIENT'S APPOINTMENTS (4B rows) AND THE BOOK / RESCHEDULE WINDOWS (2D)
 *
 * Every name here is new and portal-only (.clcm-ap-*, .clcm-bkw*, .clcm-day*), so the coach host
 * that also loads this sheet never matches a rule. Every var() carries its fallback for the same
 * reason: a bare var() voids the declaration on a host that lacks the token.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */

/* The portal chip (Jose's answer on the chip look): the existing tones, no dot, 22px, 5px corners. */
.clcm-rd-pill--plain { height:22px; padding:0 8px; border-radius:5px; font-size:11.5px; gap:5px; box-sizing:border-box; }
.clcm-rd-pill--plain::before { display:none; }
.clcm-rd-pill--plain i { font-size:13px; }
/* Phone: the approved capsule (Jose 2026-10-18). Same specificity as the 820px pill rule earlier in this sheet, and
   later, so without this the 5px above won at every width (v2.322.0). Desktop keeps 5px. */
@media (max-width: 820px) { .clcm-rd-pill--plain { border-radius:999px; } }

/* ── one row per session: date tile · what and when · pill and buttons ── */
.clcm-ap-list { list-style:none; margin:0; padding:0; }
.clcm-ap-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 14px; align-items:start;
  padding:14px 2px; border-top:1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .08); }
.clcm-ap-row:first-child { border-top:0; }
.clcm-ap-date { width:50px; box-sizing:border-box; padding:7px 4px; border-radius:10px; background:var(--clcm-cream, #F7F4EE);
  display:flex; flex-direction:column; align-items:center; text-align:center; }
.clcm-ap-mon { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--clcm-gold-ink, #83662D); }
.clcm-ap-day { font-family:var(--clcm-font-heading, 'Lora', Georgia, serif); font-size:21px; font-weight:600; line-height:1.1;
  color:var(--clcm-navy, #102A43); font-variant-numeric:tabular-nums; }
.clcm-ap-yr { font-size:11px; font-weight:700; color:var(--clcm-muted, #6b7280); font-variant-numeric:tabular-nums; }
.clcm-ap-main { min-width:0; }
.clcm-ap-main p { margin:0; }
.clcm-ap-when { font-size:14.5px; font-weight:700; color:var(--clcm-navy, #102A43); font-variant-numeric:tabular-nums; }
.clcm-ap-main .clcm-ap-sub { margin-top:2px; font-size:13px; color:var(--clcm-muted, #6b7280); }
.clcm-ap-main .clcm-ap-note { margin-top:4px; font-size:13px; line-height:1.45; color:var(--clcm-text, #1A1A2E); }
.clcm-ap-side { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.clcm-ap-acts { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.clcm-ap-acts .clcm-portal-mini-btn { margin-left:0; }
.clcm-ap-acts a.clcm-portal-mini-btn { text-decoration:none; }   /* Message is a link, in the same pill as the buttons beside it */
/* FADED IS INK, NOT OPACITY: only the time and the day number drop to the muted ink — the live --clcm-muted is
   #4C5566 (this sheet's :root re-declares it), 7.5:1 on white and 6.8:1 on the cream tile; the month, pill and
   sentence keep full ink. A 70% row put the sub-line at 3.1:1 and the grey pill at 2.8:1. */
.clcm-ap-row.is-faded .clcm-ap-time,
.clcm-ap-row.is-faded .clcm-ap-day { color:var(--clcm-muted, #6b7280); }
/* Reschedule inside the notice window: reachable and readable (aria-disabled), visibly not live. */
.clcm-portal-mini-btn.is-locked,
.clcm-portal-mini-btn.is-locked:hover { background:var(--clcm-white, #fff); color:var(--clcm-muted, #6b7280);
  border-color:var(--clcm-border, #DDD8CE); border-style:dashed; cursor:not-allowed; }
.clcm-ap-strip { grid-column:1 / -1; margin-top:6px; }
.clcm-ap-strip-acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.clcm-ap-strip-acts .clcm-portal-mini-btn { margin-left:0; padding:6px 14px; font-size:13px; }
@media (max-width: 599px) {
  .clcm-ap-row { grid-template-columns:auto minmax(0,1fr); }
  .clcm-ap-side { grid-column:2; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; }
  .clcm-ap-acts { justify-content:flex-start; }
}

/* ── the two windows ── */
.clcm-bkw .clcm-rd-notice { margin-bottom:12px; }
.clcm-msg-card > .clcm-rd-notice { margin-bottom:12px; }
.clcm-bkw-gap { margin-top:14px; }
.clcm-bkw select.clcm-booking-input { font-size:14.5px; }
.clcm-bkw-cur { margin:0 0 12px; font-size:13.5px; color:var(--clcm-text, #1A1A2E); }
.clcm-bkw-cur span { margin-right:6px; font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--clcm-muted, #6b7280); }
.clcm-bkw-prepay { margin:16px 0 0; font-size:13px; color:var(--clcm-text, #1A1A2E); }
.clcm-daystrip { display:flex; gap:6px; overflow-x:auto; padding:2px 2px 4px; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
.clcm-daychip { flex:none; width:54px; padding:7px 0; border-radius:12px; border:1px solid var(--clcm-border, #DDD8CE);
  background:var(--clcm-white, #fff); color:var(--clcm-navy, #102A43); display:flex; flex-direction:column; align-items:center;
  gap:1px; cursor:pointer; font-family:inherit; scroll-snap-align:start; touch-action:manipulation; }
.clcm-daychip-w { font-size:11px; font-weight:800; color:var(--clcm-muted, #6b7280); }
.clcm-daychip-n { font-family:var(--clcm-font-heading, 'Lora', Georgia, serif); font-size:18px; font-weight:600; line-height:1.15; }
.clcm-daychip:hover { border-color:var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); }
.clcm-daychip.selected { background:var(--clcm-navy, #102A43); border-color:var(--clcm-navy, #102A43); color:var(--clcm-white, #fff); }
/* A day the coach never works (v2.353.1): greyed AND struck through, so it reads as unavailable by shape too, and cannot be
   pressed. Its spoken name says the same ("No times this day"). */
.clcm-daychip.is-off, .clcm-daychip:disabled { opacity: .45; cursor: not-allowed; background: transparent; }
.clcm-daychip.is-off .clcm-daychip-n { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.clcm-daychip.is-off:hover, .clcm-daychip:disabled:hover { border-color: var(--clcm-border, #DDD8CE); }
.clcm-daychip.selected .clcm-daychip-w { color:inherit; }
.clcm-linkbtn { display:inline-block; margin-top:6px; padding:6px 0; background:none; border:0; font:inherit; font-size:13px;
  font-weight:700; color:var(--clcm-gold-ink, #83662D); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.clcm-portal-modal-zone { margin:14px 0 6px; font-size:12.5px; color:var(--clcm-muted, #6b7280); }
.clcm-slot-grid--chips { gap:6px; }
.clcm-slot-grid--chips .clcm-slot { min-width:0; height:38px; padding:0 14px; border-width:1px; border-radius:999px;
  background:var(--clcm-white, #fff); font-size:13.5px; font-weight:700; }
.clcm-slot-grid--chips .clcm-slot.selected { background:var(--clcm-navy, #102A43); border-color:var(--clcm-navy, #102A43); color:var(--clcm-white, #fff); }
/* THE PHONE SHEET: below 600px the window rises from the bottom edge, full width. The labels stay
   in the markup for screen readers and leave the screen (the sheet's own rows say what they are);
   the zone line stays visible. Every field is 16px here, or iOS zooms the page on focus. */
@media (max-width: 599px) {
  .clcm-bkw-backdrop { align-items:flex-end; padding:0; }
  .clcm-bkw { max-width:none; border-radius:24px 24px 0 0; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); }
  .clcm-bkw .clcm-portal-modal-foot { padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
  .clcm-bkw .clcm-portal-modal-label { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
  .clcm-bkw select.clcm-booking-input,
  .clcm-bkw input.clcm-booking-input { font-size:16px; }
  .clcm-bkw .clcm-daystrip { margin-top:4px; }
}
/* The greyed Reschedule's reason, shown under the row when tapped (a phone has no hover). */
.clcm-ap-why { grid-column:1 / -1; margin:4px 0 0; padding:8px 12px; border-radius:8px; font-size:13px; line-height:1.45;
  background:var(--clcm-cream, #F7F4EE); color:var(--clcm-text, #1A1A2E); }

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.314.0 — THE CLIENT'S PROGRESS PAGE (the mock-up's cards and chart, Jose 2026-10-27) AND
 * THE CHECK-IN SLIDERS AS DRAWN (R2-3A-q1). Portal-only names; every var() keeps its fallback
 * because this sheet also loads on the coach host.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
.clcm-rd-head .clcm-pg-sub { margin-top:4px; font-size:14px; }
.clcm-pg-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; margin:0 0 14px; }
.clcm-pg-stat { background:var(--clcm-white, #fff); border:1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .10); border-radius:14px; padding:14px; }
.clcm-pg-stat p { margin:0; }
.clcm-pg-stat .clcm-pg-n { font-family:var(--clcm-font-heading, 'Lora', Georgia, serif); font-weight:600; font-size:26px; line-height:1;
  color:var(--clcm-navy, #102A43); font-variant-numeric:tabular-nums; }
.clcm-pg-stat .clcm-pg-l { margin-top:6px; font-size:13px; font-weight:700; color:var(--clcm-muted, #6b7280); }
/* The mock-up's green sub-line, in the portal's measured sage ink (5.3:1 on white). */
.clcm-pg-stat .clcm-pg-s { margin-top:2px; font-size:12px; font-weight:700; color:var(--clcm-sage-ink, #5C7158); }
.clcm-rd-card.clcm-pg-chart { margin:0 0 14px; padding:16px; border-radius:16px; }
.clcm-pg-chart .clcm-pg-chart-t { margin:0; font-family:var(--clcm-font-heading, 'Lora', Georgia, serif); font-weight:600; font-size:17px;
  color:var(--clcm-navy, #102A43); }
.clcm-pg-bars { display:flex; align-items:stretch; gap:10px; height:120px; margin-top:14px; }
.clcm-pg-col { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; }
.clcm-pg-track { flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; }
/* The tenant's own navy, softened — not --clcm-navy-light, which the two host sheets define with different values. */
.clcm-pg-bar { display:block; width:100%; max-width:30px; border-radius:6px 6px 2px 2px; background:rgba(var(--clcm-navy-rgb, 16,42,67), .88); }
.clcm-pg-col.is-now .clcm-pg-bar { background:var(--clcm-gold, #C8A45D); }
/* The week labels in the muted ink, not the mock-up's #8A93A3, which fails contrast on white (see the tokens note in clcm-public.css). */
.clcm-pg-w { font-size:11px; font-weight:700; color:var(--clcm-muted, #6b7280); }
@media (max-width: 599px) { .clcm-pg-bars { gap:6px; } }

/* ── the check-in sliders: a gold fill up to the knob for an answered slider, a white knob with a navy ring;
      unanswered, no fill and a muted knob with no ring — the ring, not a colour, says which ── */
.clcm-growth-row input[type=range] { -webkit-appearance:none; appearance:none; height:24px; margin:0; background:transparent; cursor:pointer; }
.clcm-growth-row input[type=range][data-touched="0"] { opacity:1; }
.clcm-growth-row input[type=range]::-webkit-slider-runnable-track { height:6px; border-radius:999px;
  background:linear-gradient(to right, var(--clcm-gold, #C8A45D) 0 var(--clcm-fill, 0%), var(--clcm-cream-dark, #EDE7D9) var(--clcm-fill, 0%) 100%); }
.clcm-growth-row input[type=range]::-moz-range-track { height:6px; border-radius:999px;
  background:linear-gradient(to right, var(--clcm-gold, #C8A45D) 0 var(--clcm-fill, 0%), var(--clcm-cream-dark, #EDE7D9) var(--clcm-fill, 0%) 100%); }
.clcm-growth-row input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; margin-top:-7px;
  border-radius:50%; box-sizing:border-box; background:var(--clcm-white, #fff); border:3px solid var(--clcm-navy, #102A43);
  box-shadow:0 1px 3px rgba(var(--clcm-navy-rgb, 16,42,67), .25); }
.clcm-growth-row input[type=range]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; box-sizing:border-box;
  background:var(--clcm-white, #fff); border:3px solid var(--clcm-navy, #102A43); box-shadow:0 1px 3px rgba(var(--clcm-navy-rgb, 16,42,67), .25); }
/* Unanswered: a grey knob with a thin muted edge — 4.8:1 on white, so the control still meets the 3:1 minimum for a
   component it is the default state of (review, v2.314.0). Answered is a WHITE knob with a THICK navy ring: told apart
   by fill and ring weight, not by colour. */
.clcm-growth-row input[type=range][data-touched="0"]::-webkit-slider-thumb { border:2px solid var(--clcm-muted, #6b7280); background:#E7E2D8; box-shadow:none; }
.clcm-growth-row input[type=range][data-touched="0"]::-moz-range-thumb { border:2px solid var(--clcm-muted, #6b7280); background:#E7E2D8; box-shadow:none; }
.clcm-growth-row input[type=range]:disabled { cursor:default; }
.clcm-growth-dash { margin:0 0 10px; font-size:12.5px; color:var(--clcm-muted, #6b7280); }

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.315.0 — WORKSHEETS (redesign 4D / 4E): the status chip and line on each card, the chosen
 * answer chip in navy, a scale's or Yes/No's question above it and a scale's worded ends.
 * clcm-public.css is byte-pinned, so the portal's overrides live here; every var() keeps its
 * fallback because this sheet also loads on the coach host (where the builder preview is).
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
.clcm-ws-card-head { flex-wrap:wrap; row-gap:4px; }
.clcm-ws-card-head > .clcm-ws-card-title { flex:1 1 auto; min-width:0; }
.clcm-ws-card-head > .clcm-ws-chip-status { flex:none; }
.clcm-ws-card-head > .clcm-ws-sub { flex:1 1 100%; order:3; font-size:12.5px; line-height:1.4; color:var(--clcm-muted, #6b7280); }
/* Chosen = navy with the mock-up's corners, on the scale and the Yes/No alike (Jose's R2-4E-q4), like the journal's mood chips. */
.clcm-ws-chip span { border-radius:10px; }
.clcm-ws-chip input:checked + span { background:var(--clcm-navy, #102A43); border-color:var(--clcm-navy, #102A43);
  color:var(--clcm-white, #fff); font-weight:700; }
/* The standalone questions (pick one, pick several, Yes/No, the old 1-10 row) are native radios and boxes, which the portal
   left in the browser's blue; navy when chosen, so one worksheet has one look. */
.clcm-ws-opt input, .clcm-ws-scaleopt input { accent-color:var(--clcm-navy, #102A43); }
.clcm-ws-fq { display:block; margin:0 0 8px; font-size:15px; font-weight:700; line-height:1.4; color:var(--clcm-navy, #102A43); }
.clcm-ws-ends { display:flex; justify-content:space-between; gap:12px; margin-top:6px; font-size:12.5px; color:var(--clcm-muted, #6b7280); }
.clcm-ws-ends > span { min-width:0; overflow-wrap:anywhere; }
.clcm-ws-ends > span:last-child { text-align:right; }
/* A phone lays the ten chips out four across (clcm-public.css). They grew to fill the row, so 9 and 10 came out twice as wide
   as the rest; equal chips, the last two at the left like every other row. */
@media (max-width:560px) { .clcm-ws-chips--scale .clcm-ws-chip { flex-grow:0; } }
/* The builder's picture of the same field (coach host). */
.clcm-fldw .clcm-fldw-q { display:block; flex:1 1 100%; margin:0 0 4px; font-weight:700; }
.clcm-fldw .clcm-fldw-ends { display:flex; flex:1 1 100%; justify-content:space-between; gap:8px; font-size:11px; color:var(--clcm-text-muted, #5A6478); }
/* The widget is one inline-flex row (clcm-admin.css), so without a wrap the question and the ends sat BESIDE the pills. A scale
   or Yes/No wraps: the question on its own line, the pills with the required mark, name tag and pencil, then the ends last. */
.clcm-fldw--scale, .clcm-fldw--yn { flex-wrap:wrap; row-gap:4px; }
/* v2.358.2: a text, paragraph, date or choose-one field with a question wraps the same way, question above the box. */
.clcm-fldw--hasq { flex-wrap:wrap; row-gap:4px; }
.clcm-fldw .clcm-fldw-ends { order:1; }

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.316.0 — ACTIONS AND FILES (layout item 1.8): each list is one card of hairline rows, as the
 * mock-up draws both — a tile, a bold title, a muted line under it, and on Actions a plain pill
 * (Open / Done) at the right. Scoped to the two TAB lists: .clcm-action-check and .clcm-action-text
 * are shared with the Dashboard's Action Items card (.clcm-rd-acts), which has its own geometry.
 * Every var() keeps its fallback because this sheet also loads on the coach host.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
.clcm-file-list { gap:0; }
.clcm-action-list .clcm-action-row-full,
.clcm-file-list .clcm-file-row { display:flex; align-items:center; gap:12px; margin:0; padding:13px 0;
  background:transparent; border:0; border-radius:0; box-shadow:none; }
.clcm-action-list .clcm-action-row-full + .clcm-action-row-full,
.clcm-file-list .clcm-file-row + .clcm-file-row { border-top:1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .06); }
/* A ticked item is not faded: the pill says Done, and a faded row would take the pill's ink below 4.5:1 with it. */
.clcm-action-list .clcm-action-row-full.is-done { opacity:1; }
.clcm-action-list .clcm-action-body, .clcm-file-list .clcm-file-info { flex:1 1 auto; min-width:0; }
/* A title that is one long token — a link, an email address — wraps instead of running under the pill on a phone. */
.clcm-action-list .clcm-action-text { overflow-wrap:anywhere; }
.clcm-action-list .clcm-action-text,
.clcm-file-list .clcm-file-title { font-size:14.5px; font-weight:700; line-height:1.35; color:var(--clcm-navy, #102A43); }
.clcm-action-list .clcm-action-due,
.clcm-file-list .clcm-file-meta { margin:1px 0 0; font-size:12.5px; line-height:1.4; color:var(--clcm-text-muted, #5A6478); }
.clcm-file-list .clcm-file-note { overflow-wrap:anywhere; }
.clcm-action-pill { flex:none; }
.clcm-file-list .clcm-file-row--link:hover { box-shadow:none; }
.clcm-file-list .clcm-file-row--link:hover .clcm-file-title { text-decoration:underline; text-underline-offset:2px; }
/* The tile. On Files it carries the type's icon in the gold ink; on Actions it IS the tick — a 36px target with the Dashboard's
   rounded square inside it, navy with a white tick when done, as the Dashboard draws a settled box. */
.clcm-file-list .clcm-file-ic { width:36px; height:36px; border-radius:10px; background:var(--clcm-cream, #F7F4EE);
  color:var(--clcm-gold-ink, #80693C); font-size:9.5px; font-weight:800; letter-spacing:.4px; }
.clcm-file-list .clcm-file-ic i { font-size:18px; }
.clcm-action-list .clcm-action-check { position:relative; width:36px; height:36px; margin:0; border:0; border-radius:10px;
  background:var(--clcm-cream, #F7F4EE); color:transparent; }
.clcm-action-list .clcm-action-check::before { content:''; position:absolute; inset:8px; border:1.5px solid var(--clcm-text-muted, #5A6478);
  border-radius:6px; background:var(--clcm-white, #fff); transition:background .2s, border-color .2s; }
.clcm-action-list .clcm-action-check svg { position:relative; }
.clcm-action-list .clcm-action-check:hover::before { border-color:var(--clcm-navy, #102A43); }
.clcm-action-list .clcm-action-check.completed { background:var(--clcm-cream, #F7F4EE); color:var(--clcm-white, #fff); }
.clcm-action-list .clcm-action-check.completed::before { background:var(--clcm-navy, #102A43); border-color:var(--clcm-navy, #102A43); }

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.317.0 — MY PROFILE (redesign 4C, Jose's R2-4C answers, layout item 1.10): every section
 * its own card on a two-column grid, the index of sections beside it, and the one Save bar at the
 * foot naming what is unsaved. CONTAINER queries, not media queries: the portal's rail takes a
 * width the viewport does not know about, so only the container can say "there is room for the
 * index beside the cards". Narrower, the index is a row of chips above one column of cards.
 * Every var() keeps its fallback because this sheet also loads on the coach host.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
.clcm-pf-wrap { container-type:inline-size; }
.clcm-pf { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.clcm-pf-index { display:flex; gap:6px; overflow-x:auto; padding:4px; margin:-4px; scrollbar-width:none; }   /* the 4px is the focus ring's room inside the scroll box */
.clcm-pf-index::-webkit-scrollbar { display:none; }
.clcm-pf-index .clcm-pf-index-a { flex:none; display:flex; align-items:center; gap:9px; height:34px; padding:0 12px; border-radius:8px;
  border:1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .1); background:var(--clcm-white, #fff); font-size:13.5px; font-weight:600;
  color:var(--clcm-text-muted, #5A6478); text-decoration:none; white-space:nowrap; }
.clcm-pf-index .clcm-pf-index-a[hidden] { display:none; }
.clcm-pf-index .clcm-pf-index-a i { font-size:16px; }
.clcm-pf-index .clcm-pf-index-a[aria-current] { color:var(--clcm-navy, #102A43); font-weight:800; }
.clcm-pf-index .clcm-pf-index-a[aria-current] i { color:var(--clcm-gold-ink, #80693C); }
.clcm-pf-index .clcm-pf-index-a:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:2px; }
.clcm-pf-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-items:start; }
@container (min-width: 640px) {
  .clcm-pf-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .clcm-pf-grid > .clcm-pf-wide { grid-column:1 / -1; }
}
@container (min-width: 820px) {
  .clcm-pf { grid-template-columns:200px minmax(0,1fr); gap:28px; align-items:start; }
  .clcm-pf-index { flex-direction:column; gap:2px; overflow:visible; position:sticky; top:16px; padding:0; margin:0; }
  .clcm-pf-index .clcm-pf-index-a { border-color:transparent; background:transparent; }
  .clcm-pf-index .clcm-pf-index-a[aria-current] { background:var(--clcm-white, #fff); box-shadow:0 1px 2px rgba(var(--clcm-navy-rgb, 16,42,67), .1); }
}
/* The cards: the mock-up's 17px title with no divider, and the gaps carried by the grid, not by each card's margin. */
.clcm-pf-grid > .clcm-pf-card { margin:0; padding:18px 20px; display:flex; flex-direction:column; gap:10px; scroll-margin-top:16px; min-width:0; }
/* Where the portal's app bar is fixed across the top (860px and under, by VIEWPORT, as the bar itself is), a jump must clear it
   or the card's title lands under the bar. */
@media (max-width: 860px) { .clcm-pf-grid > .clcm-pf-card { scroll-margin-top:calc(66px + env(safe-area-inset-top, 0px)); } }
/* With a mouse the chips wrap instead of scrolling: the row's scrollbar is hidden, and a vertical wheel cannot reach chips off
   to the side. A phone keeps the swipeable row. */
@media (hover: hover) and (pointer: fine) { .clcm-pf-index { flex-wrap:wrap; overflow:visible; } }
.clcm-pf-card .clcm-section-title { margin:0; padding:0; border:0; font-size:17px; }
.clcm-pf-lede { margin:0; font-size:13px; line-height:1.5; color:var(--clcm-text-muted, #5A6478); }
.clcm-pf-hint { margin:5px 0 0; font-size:12px; line-height:1.45; color:var(--clcm-text-muted, #5A6478); }
.clcm-pf-note { margin-top:2px; }
.clcm-pf-fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:12px; }
.clcm-pf-fields--3 { grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.clcm-pf-field { display:flex; flex-direction:column; min-width:0; }
.clcm-pf-card .clcm-portal-modal-label { margin:0 0 6px; font-size:12.5px; font-weight:800; letter-spacing:0; text-transform:none;
  color:var(--clcm-navy, #102A43); }
.clcm-pf-card .clcm-pf-input { box-sizing:border-box; width:100%; max-width:none; height:44px; padding:0 12px; border:1px solid var(--clcm-border, #DDD8CE);
  border-radius:10px; background:var(--clcm-white, #fff); font-size:16px; color:var(--clcm-text, #1A1A2E); }
.clcm-pf-card .clcm-pf-input:focus { outline:2px solid transparent; outline-offset:2px; border-color:var(--clcm-gold-text, var(--clcm-gold, #C8A45D));
  box-shadow:0 0 0 3px rgba(var(--clcm-gold-rgb, 200,164,93), .2); }
/* The text-message consent: the row at the foot of Your details, its disclosure word for word. */
.clcm-pf-consent { display:flex; gap:9px; align-items:flex-start; margin:14px 0 0; font-size:12px; line-height:1.55;
  color:var(--clcm-text-muted, #5A6478); cursor:pointer; }
.clcm-pf-consent input { flex:none; margin:3px 0 0; }
/* The eye inside a password box (5D). */
.clcm-pf-pw { position:relative; display:block; }
.clcm-pf-pw .clcm-pf-input { padding-right:46px; }
.clcm-pf-eye { position:absolute; top:5px; right:5px; display:grid; place-items:center; width:34px; height:34px; padding:0; border:0;
  border-radius:8px; background:transparent; color:var(--clcm-text-muted, #5A6478); cursor:pointer; }
.clcm-pf-eye:hover { background:var(--clcm-cream, #F7F4EE); }
.clcm-pf-eye:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:1px; }
.clcm-pf-eye i { font-size:16px; }
/* Language: two radios drawn as the mock-up's segmented switch. */
.clcm-pf-seg { display:inline-flex; align-self:flex-start; gap:3px; padding:3px; border-radius:10px; background:var(--clcm-cream, #F7F4EE); }
.clcm-pf-seg-opt { position:relative; display:block; }
.clcm-pf-seg-opt input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.clcm-pf-seg-opt span { display:flex; align-items:center; box-sizing:border-box; height:34px; padding:0 16px; border:1px solid transparent;
  border-radius:8px; font-size:13.5px; font-weight:700; color:var(--clcm-text-muted, #5A6478); }
/* The chosen language has an EDGE, not only a whiter ground (1.1:1 on the cream) and a darker ink: state by shape, never colour alone. */
.clcm-pf-seg-opt input:checked + span { background:var(--clcm-white, #fff); border-color:var(--clcm-navy, #102A43); color:var(--clcm-navy, #102A43);
  font-weight:800; box-shadow:0 1px 2px rgba(var(--clcm-navy-rgb, 16,42,67), .1); }
.clcm-pf-seg-opt input:focus-visible + span { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:1px; }
/* Email Preferences: the same checkboxes, drawn as switches. The off track is a mid grey, not the mock-up's pale one, so
   the control still shows against the white card (3:1). */
.clcm-pf-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; font-size:14px; cursor:pointer; }
.clcm-pf-toggle + .clcm-pf-toggle { border-top:1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .06); }
.clcm-pf-toggle input { -webkit-appearance:none; appearance:none; flex:none; position:relative; width:40px; height:24px; margin:0;
  border-radius:999px; background:#8A93A3; cursor:pointer; transition:background .15s; }
.clcm-pf-toggle input::before { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:var(--clcm-white, #fff); transition:transform .15s; }
.clcm-pf-toggle input:checked { background:var(--clcm-navy, #102A43); }
.clcm-pf-toggle input:checked::before { transform:translateX(16px); }
.clcm-pf-toggle input:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .clcm-pf-toggle input, .clcm-pf-toggle input::before { transition:none; } }
/* Forced colours paint every background as Canvas and drop shadows, which erased the switches and the chosen language. */
@media (forced-colors: active) {
  .clcm-pf-toggle input { border:1px solid CanvasText; }
  .clcm-pf-toggle input::before { background:CanvasText; }
  .clcm-pf-toggle input:checked { background:Highlight; }
  .clcm-pf-toggle input:checked::before { background:HighlightText; }
  .clcm-pf-seg-opt span { border-color:Canvas; }   /* the transparent edge would otherwise be forced to a visible line on BOTH */
  .clcm-pf-seg-opt input:checked + span { border:2px solid CanvasText; }
}
/* A state line with its icon: push on (a ringing bell, sage) or off (a struck bell), the calendar connected (gold). */
.clcm-pf-status { display:flex; align-items:center; gap:8px; margin:0; font-size:13.5px; font-weight:700; color:var(--clcm-text-muted, #5A6478); }
.clcm-pf-status i { font-size:16px; flex:none; }
.clcm-pf-status.is-on { color:var(--clcm-sage-ink, #4E6B4A); }
.clcm-pf-status.is-gold { color:var(--clcm-gold-ink, #80693C); }
.clcm-pf-card .clcm-btn-outline, .clcm-pf-card .clcm-btn-book { align-self:flex-start; }
/* The card badge: brand and last four only (R2-4C-q3). */
.clcm-pf-cardbadge { display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; background:var(--clcm-cream, #F7F4EE); }
.clcm-pf-cardbadge-ic { flex:none; display:grid; place-items:center; width:44px; height:30px; border-radius:6px;
  background:var(--clcm-navy, #102A43); color:var(--clcm-gold, #C8A45D); }
.clcm-pf-cardbadge-ic i { font-size:17px; }
.clcm-pf-cardbadge-t { font-size:14px; font-weight:800; color:var(--clcm-navy, #102A43); font-variant-numeric:tabular-nums; }
.clcm-pf-card .clcm-pf-danger { display:inline-flex; align-items:center; gap:6px; color:#9A3B2B; }
.clcm-pf-card .clcm-pf-danger:hover { background:#9A3B2B; border-color:#9A3B2B; color:var(--clcm-white, #fff); }
/* The one Save bar: what is unsaved on the left, the button on the right. A plain block, never sticky (see the template). */
.clcm-pf-savebar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-top:16px; padding:14px 18px;
  background:var(--clcm-white, #fff); border:1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .1); border-radius:14px; }
.clcm-pf-savebar #clcm-save-all { margin-left:auto; }
.clcm-pf-dirty { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.clcm-pf-dirty[hidden] { display:none; }
.clcm-pf-dirty-n { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--clcm-gold-ink, #80693C); }
.clcm-pf-dirty-n::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--clcm-gold, #C8A45D); }
.clcm-pf-dirty-s { font-size:12.5px; color:var(--clcm-text-muted, #5A6478); }
/* The buttons, as the mock-up draws them on this page: a 36px sentence-case button inside a card — outlined, or navy for the
   one card that asks for something (Connect) — and a navy Save Changes. Scoped to the page: the portal's gold CTA stays
   everywhere else. */
.clcm-pf-wrap .clcm-pf-card .clcm-btn-outline,
.clcm-pf-wrap .clcm-pf-card .clcm-btn-book { display:inline-flex; align-items:center; gap:6px; box-sizing:border-box; height:36px; padding:0 14px;
  border:1px solid var(--clcm-border, #DDD8CE); border-radius:9px; background:var(--clcm-white, #fff); color:var(--clcm-navy, #102A43);
  font-size:13px; font-weight:700; letter-spacing:0; text-transform:none; text-decoration:none; transform:none; }
.clcm-pf-wrap .clcm-pf-card .clcm-btn-book { border-color:var(--clcm-navy, #102A43); background:var(--clcm-navy, #102A43); color:var(--clcm-white, #fff); }
.clcm-pf-wrap .clcm-pf-card .clcm-btn-outline:hover { background:var(--clcm-cream, #F7F4EE); color:var(--clcm-navy, #102A43); }
.clcm-pf-wrap .clcm-pf-card .clcm-pf-danger { color:#9A3B2B; }
.clcm-pf-wrap .clcm-pf-card .clcm-pf-danger:hover { background:#9A3B2B; border-color:#9A3B2B; color:var(--clcm-white, #fff); }
.clcm-pf-wrap .clcm-pf-savebar #clcm-save-all { height:42px; padding:0 20px; border:0; border-radius:10px; background:var(--clcm-navy, #102A43);
  color:var(--clcm-white, #fff); font-size:14px; font-weight:800; letter-spacing:0; text-transform:none; transform:none; }
/* Navy buttons answer the pointer too: the base rule's gold hover and lift lose to the overrides above. */
.clcm-pf-wrap .clcm-pf-card .clcm-btn-book:hover, .clcm-pf-wrap .clcm-pf-savebar #clcm-save-all:hover:not(:disabled) {
  box-shadow:0 0 0 3px rgba(var(--clcm-navy-rgb, 16,42,67), .18); }
.clcm-pf-wrap .clcm-btn-outline:focus-visible, .clcm-pf-wrap .clcm-btn-book:focus-visible {
  outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:2px; }
/* An empty note takes no room in the card's column — but stays in the accessibility tree (a live region that is display:none
   while empty is often not read when it appears). */
.clcm-pf-card { position:relative; }
.clcm-pf-card #clcm-card-msg:empty { position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); }

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.318.0 — CERTIFICATION (redesign 2C, Jose's R2-2C answers): one panel per enrolment inside the tab's white card (R2-2C-q2
 * keeps the card), each with a status chip, a bar and its percentage, a checklist that says "Met" / "Not yet" on every row (5B)
 * and, on a certificate, the number, the date and the two buttons in a tinted box. The tint and the seal take the org's gold
 * through its tokens, so a tenant's palette reaches them; the sage of "met" is the status colour every org shares, as on the
 * pills. Every var() keeps its fallback because this sheet also loads on the coach host.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
.clcm-ct-meter { display:flex; align-items:center; gap:10px; margin:12px 0 0; }
.clcm-ct-bar { flex:1 1 auto; height:8px; border-radius:8px; background:#EDE7D9; overflow:hidden; }
.clcm-ct-bar > span { display:block; height:100%; transition:width .4s; }
.clcm-ct-pct { flex:none; font-size:12.5px; font-weight:800; color:var(--clcm-navy, #102A43); font-variant-numeric:tabular-nums; }
.clcm-ct-line { margin:10px 0 0; font-size:14px; line-height:1.5; color:var(--clcm-text, #1A1A2E); }
.clcm-ct-card .clcm-ct-renew { margin:12px 0 0; }
.clcm-ct-reqs { list-style:none; margin:12px 0 0; padding:0; border-top:1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .08); }
.clcm-ct-req { display:flex; align-items:center; gap:10px; margin:0; padding:9px 0; border-bottom:1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .06); }
.clcm-ct-req > i { flex:none; font-size:19px; color:var(--clcm-text-muted, #5A6478); }
.clcm-ct-req-l { flex:1 1 auto; min-width:0; font-size:14.5px; line-height:1.4; color:var(--clcm-text-muted, #5A6478); overflow-wrap:anywhere; }
.clcm-ct-req-s { flex:none; font-size:12px; font-weight:800; color:var(--clcm-text-muted, #5A6478); }
.clcm-ct-req.is-met > i, .clcm-ct-req.is-met .clcm-ct-req-s { color:#4E6B4A; }
.clcm-ct-req.is-met .clcm-ct-req-l { color:var(--clcm-text, #1A1A2E); }
/* "Show requirements" — only on a certificate, and only when the tab has more than one panel. The summary says which way it
   goes in words; the caret turns with it. */
.clcm-ct-fold { margin:10px 0 0; }
.clcm-ct-fold > summary { display:inline-flex; align-items:center; gap:6px; min-height:36px; cursor:pointer; list-style:none;
  font-size:13.5px; font-weight:800; color:var(--clcm-navy, #102A43); }
.clcm-ct-fold > summary::-webkit-details-marker { display:none; }
.clcm-ct-fold > summary i { transition:transform .2s; }
.clcm-ct-fold[open] > summary i { transform:rotate(180deg); }
.clcm-ct-fold:not([open]) .clcm-ct-fold-c, .clcm-ct-fold[open] .clcm-ct-fold-o { display:none; }
.clcm-ct-fold > summary:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:2px; border-radius:6px; }
.clcm-ct-fold > .clcm-ct-reqs { margin-top:2px; }
.clcm-ct-cert { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:14px 0 0; padding:14px 16px; border-radius:12px;
  background:rgba(var(--clcm-gold-rgb, 200,164,93), .08); border:1px solid rgba(var(--clcm-gold-rgb, 200,164,93), .3); }
.clcm-ct-cert-who { display:flex; align-items:center; gap:14px; flex:1 1 auto; min-width:min(200px, 100%); }
.clcm-ct-seal { flex:none; font-size:30px; color:var(--clcm-gold-ink, #80693C); }
.clcm-ct-cert-id { flex:1 1 auto; min-width:0; }
.clcm-ct-cert-k { margin:0; font-size:12px; font-weight:700; color:var(--clcm-text-muted, #5A6478); }
.clcm-ct-cert-n { margin:0; font:600 17px ui-monospace, Menlo, monospace; letter-spacing:.03em; color:var(--clcm-navy, #102A43); overflow-wrap:anywhere; }
.clcm-ct-cert-d { margin:2px 0 0; font-size:12.5px; color:var(--clcm-text-muted, #5A6478); }
.clcm-ct-cert-act { display:flex; flex-wrap:wrap; gap:8px; }
.clcm-ct-cert-act .clcm-pmetric-btn { display:inline-flex; align-items:center; gap:7px; }
/* THE BOX'S OWN WIDTH DECIDES, NOT THE VIEWPORT'S. Inside the portal's gutters a 320-390px phone gives this box only 164-234px, and
   the seal beside a whole WMK-2026-AB12CD needs about 240 in Chrome's monospace — more in some others, so the switch sits at 255.
   Narrower than that, the seal moves up beside "Certificate No." and the number takes a full line of its own, so it is never split.
   A media query cannot say this (the gutters sit between the two). */
.clcm-ct-card { container-type:inline-size; }
@container (max-width:255px) {
  .clcm-ct-cert { padding:12px 10px; }
  .clcm-ct-cert-who { display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:8px; row-gap:2px; align-items:center; }
  .clcm-ct-cert-id { display:contents; }
  .clcm-ct-seal { grid-row:1; grid-column:1; justify-self:start; font-size:20px; }
  .clcm-ct-cert-k { grid-row:1; grid-column:2; }
  .clcm-ct-cert-n, .clcm-ct-cert-d { grid-column:1 / -1; }
  .clcm-ct-cert-n { font-size:13px; letter-spacing:.02em; }
}
@media (forced-colors: active) {
  /* The bar's fill is a background, which the system palette removes; draw it in the text colour so it still shows. */
  .clcm-ct-bar { border:1px solid CanvasText; }
  .clcm-ct-bar > span { forced-color-adjust:none; background:CanvasText !important; }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.319.0 — THE TWO MONEY PAGES a client reaches by link: the invoice (?clcm_pay=, design 4A) and the package purchase
 * return (?clcm_buy=, design 2A). The organization's mark on top (Waymark's logo for Waymark's own organization, any other
 * organization's own logo or name on its navy panel), then white cards on cream: the invoice panel and one action card per
 * state, or 2A's single centred card. New class names throughout, because .clcm-sign-* is shared with the agreement page.
 * The sage, sand and stone discs are status colours every organization shares, as on the pills; navy, gold and the hairlines
 * read the organization's tokens. Every var() keeps its fallback (this sheet also loads on the coach host).
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
.clcm-sign-wrap.clcm-pay-wrap, .clcm-sign-wrap.clcm-buy-wrap { display:flex; flex-direction:column; gap:12px; }
.clcm-sign-wrap.clcm-pay-wrap { max-width:600px; }
/* 2A draws only a phone; on a desktop the card keeps a reading width rather than the agreement page's 760px. */
.clcm-sign-wrap.clcm-buy-wrap { max-width:480px; gap:20px; }
.clcm-pay-brand { display:flex; justify-content:center; align-items:center; }
.clcm-pay-brand img { display:block; height:30px; width:auto; max-width:220px; object-fit:contain; }
.clcm-pay-brand--panel { background:var(--clcm-navy, #102A43); color:var(--clcm-on-navy-strong, #fff); border-radius:16px; padding:18px 20px; }
.clcm-pay-brand--panel img { height:auto; max-height:48px; filter:drop-shadow(0 3px 10px rgba(0,0,0,.35)); }
.clcm-pay-brand-name { font-family:var(--clcm-font-accent, 'Parisienne', cursive); font-size:28px; line-height:1.1;
  color:var(--clcm-gold-on-navy, var(--clcm-gold, #C8A45D)); }

/* The invoice panel. Its own bottom padding closes it, so an invoice with no due date and no notes never ends flush. */
.clcm-pay-panel { background:var(--clcm-white, #fff); border:1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .1); border-radius:14px;
  overflow:hidden; padding-bottom:4px; }
.clcm-pay-head { padding:14px 16px; border-bottom:1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .06); }
.clcm-pay-title { margin:0; font-family:var(--clcm-font-serif, 'Lora', Georgia, serif); font-size:18px; font-weight:600; line-height:1.3;
  color:var(--clcm-navy, #102A43); }
.clcm-pay-sub { margin:2px 0 0; font-size:12.5px; line-height:1.4; color:var(--clcm-text-muted, #5A6478); }
.clcm-pay-lines { width:100%; border-collapse:collapse; font-size:13.5px; color:var(--clcm-text, #1A1A2E); }
.clcm-pay-lines th, .clcm-pay-lines td { padding:10px 16px; text-align:left; vertical-align:top; font-weight:400; }
.clcm-pay-lines .num { padding-left:8px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.clcm-pay-lines tbody td:last-child { font-weight:700; }
.clcm-pay-lines tbody td:first-child, .clcm-pay-title, .clcm-pay-sub, .clcm-pay-notes,
.clcm-sign-wrap .clcm-buy-card > p { overflow-wrap:anywhere; }
.clcm-pay-lines tfoot th, .clcm-pay-lines tfoot td { border-top:1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .06); font-size:14.5px;
  font-weight:800; color:var(--clcm-navy, #102A43); }
/* No header row is drawn; a screen reader still gets one. */
.clcm-pay-lines thead.clcm-pay-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; }
.clcm-pay-due, .clcm-pay-notes { margin:0; padding:0 16px 12px; font-size:12.5px; line-height:1.5; color:var(--clcm-text-muted, #5A6478); }
.clcm-pay-notes { font-size:13.5px; line-height:1.6; color:var(--clcm-text, #1A1A2E); }

/* The action card: what to do now, or what happened. */
.clcm-pay-act { display:flex; flex-direction:column; align-items:stretch; gap:12px; background:var(--clcm-white, #fff);
  border:1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .1); border-radius:14px; padding:16px; text-align:left; }
.clcm-pay-act--center { align-items:center; text-align:center; }
.clcm-pay-act .clcm-rd-notice { align-self:stretch; text-align:left; margin:0; }
.clcm-pay-disc { display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:50%; }
.clcm-pay-disc i { font-size:22px; }
.clcm-pay-disc--ok    { background:#8FA58B; color:#fff; }
/* --wait wears the warn pill's own pair (added to that rule above), so the tone has one definition. */
.clcm-pay-disc--plain { background:#F1EEE8; color:#5A6478; }
.clcm-pay-h { margin:0; font-family:var(--clcm-font-serif, 'Lora', Georgia, serif); font-size:19px; font-weight:600; line-height:1.25;
  color:var(--clcm-navy, #102A43); }
.clcm-pay-p { margin:0; font-size:13.5px; line-height:1.6; color:var(--clcm-text, #1A1A2E); }
.clcm-sign-wrap p.clcm-pay-refund { margin:0; font-size:13px; line-height:1.5; color:var(--clcm-text-muted, #5A6478); }
.clcm-pay-cta { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; height:42px; padding:0 16px;
  border:0; border-radius:11px; background:var(--clcm-navy, #102A43); color:var(--clcm-white, #fff); font:inherit; font-size:14px;
  font-weight:800; text-decoration:none; cursor:pointer; }
.clcm-pay-cta:hover { color:var(--clcm-white, #fff); box-shadow:0 0 0 3px rgba(var(--clcm-navy-rgb, 16,42,67), .18); }
.clcm-pay-cta--quiet, .clcm-pay-cta--quiet:hover { background:var(--clcm-white, #fff); color:var(--clcm-navy, #102A43);
  border:1px solid var(--clcm-border, #DDD8CE); }
.clcm-pay-act:not(.clcm-pay-act--center) > .clcm-pay-cta { align-self:flex-start; }
.clcm-pay-cta:focus-visible, .clcm-pay-btn:focus-visible, .clcm-pay-consent input:focus-visible {
  outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:2px; }

/* Paying: the consent box (the approved wording, unticked), the card already on file, the button, the secure line. */
.clcm-pay-consent { display:flex; gap:10px; align-items:flex-start; margin:0; cursor:pointer; font-size:13px; line-height:1.45;
  color:var(--clcm-text, #1A1A2E); }
.clcm-pay-consent input { flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--clcm-navy, #102A43); }
.clcm-pay-consent strong { display:block; margin-bottom:2px; }
.clcm-pay-consent-text { color:var(--clcm-text-muted, #5A6478); }
.clcm-pay-cardnote { margin:0; font-size:13px; line-height:1.45; color:var(--clcm-text-muted, #5A6478); }
.clcm-pay-cardnote strong { display:block; color:var(--clcm-text, #1A1A2E); }
.clcm-pay-btn { width:100%; height:50px; border:0; border-radius:12px; background:var(--clcm-navy, #102A43); color:var(--clcm-white, #fff);
  font:inherit; font-size:15.5px; font-weight:800; cursor:pointer; }
.clcm-pay-btn:hover:not(:disabled) { box-shadow:0 6px 16px rgba(var(--clcm-navy-rgb, 16,42,67), .22); }
.clcm-pay-btn:disabled { opacity:.6; cursor:default; }
.clcm-pay-secure { display:flex; align-items:center; justify-content:center; gap:6px; margin:0; font-size:12px;
  color:var(--clcm-text-muted, #5A6478); }
.clcm-pay-secure i { font-size:13px; }
.clcm-pay-error { margin:0; font-size:13px; font-weight:600; color:#a3402f; }

/* 2A: one centred card per state. Scoped under .clcm-sign-wrap so it outranks the page head's own h1 rule. */
.clcm-sign-wrap .clcm-buy-card { display:flex; flex-direction:column; align-items:center; gap:12px; padding:26px 22px; text-align:center;
  border:1px solid rgba(var(--clcm-navy-rgb, 16,42,67), .1); border-radius:16px; box-shadow:0 10px 30px rgba(var(--clcm-navy-rgb, 16,42,67), .06); }
.clcm-sign-wrap .clcm-buy-card .clcm-pay-disc { width:56px; height:56px; }
.clcm-sign-wrap .clcm-buy-card .clcm-pay-disc i { font-size:26px; }
.clcm-sign-wrap .clcm-buy-card h1 { margin:0; font-family:var(--clcm-font-serif, 'Lora', Georgia, serif); font-size:22px; font-weight:600;
  line-height:1.25; color:var(--clcm-navy, #102A43); }
.clcm-sign-wrap .clcm-buy-card > p { margin:0; font-size:14px; line-height:1.6; color:var(--clcm-text, #1A1A2E); }
.clcm-sign-wrap .clcm-buy-card > p.clcm-pay-refund { font-size:13px; color:var(--clcm-text-muted, #5A6478); }
.clcm-sign-wrap .clcm-buy-card .clcm-rd-notice { align-self:stretch; text-align:left; margin:0; }
.clcm-sign-wrap .clcm-buy-card > .clcm-pay-cta { height:46px; padding:0 20px; border-radius:12px; font-size:14.5px; }
.clcm-sign-wrap .clcm-buy-card > .clcm-pay-cta--quiet { height:40px; padding:0 16px; border-radius:11px; font-size:13.5px; font-weight:700; }

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.320.0 — THE INBOX OPENS AT THE NEWEST MESSAGE, with the reply box in reach (Jose, 2026-10-28). The card had no
 * height, so it grew with the conversation and the PAGE scrolled: the newest message and the reply box were at the
 * bottom of everything ever said. On a desktop the card is now bounded (the inbox script fits it to the space below its
 * top; this is the fallback) and the list and the thread scroll inside it. On a phone the two are one column and the
 * page scrolls, so the reply box is pinned to the bottom of the screen, above the coach tab bar where there is one.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
/* `not all and (max-width:860px)` rather than (min-width:861px): the exact complement of the phone block and of the
   script's own test, so a zoomed window at 860.5px cannot fall between the two and get neither. */
@media not all and (max-width:860px) {
  /* min-height:0 lifts the card's old 60vh floor, which otherwise outranks a fitted height on a short window. */
  .clcm-ib { height:max(320px, calc(100vh - 220px)); min-height:0; }
  .clcm-ib-list, .clcm-ib-pane, .clcm-ib-thread { min-height:0; }
  .clcm-ib-list { overflow-y:auto; }
  /* The list is a flex column: once it scrolls, its rows would SHRINK to fit instead (each preview line cut off). */
  .clcm-ib-list > * { flex:none; }
}
@media (max-width:860px) {
  /* The LIST view still scrolls with the page. */
  .clcm-ib { overflow:visible; }
  /* ONE SCREEN AT A TIME: a chosen conversation (data-clcm-chosen) shows alone; otherwise the list shows alone. */
  .clcm-ib[data-clcm-chosen="1"] .clcm-ib-list { display:none; }
  .clcm-ib:not([data-clcm-chosen="1"]) .clcm-ib-pane { display:none; }
  /* v2.357.0 — A CONVERSATION IS A FIXED CARD WITH ONLY THE MESSAGES SCROLLING (Jose, 2026-11-05: "make just the chat
     section scrollable and keep the rest static"). The inbox script fits the card between its own top and the tab bar
     (12px of air), as it already did on a desktop; the page itself no longer scrolls, so nothing slides under the iPhone
     status bar either. This height is the fallback for a page whose script has not run. overscroll-behavior keeps a
     flick at either end of the thread from dragging the page. */
  .clcm-ib[data-clcm-chosen="1"] { overflow:hidden; grid-template-rows:minmax(0, 1fr); height:max(320px, calc(100dvh - 300px)); min-height:0; }
  .clcm-ib[data-clcm-chosen="1"] .clcm-ib-pane, .clcm-ib[data-clcm-chosen="1"] .clcm-ib-thread { min-height:0; }
  .clcm-ib[data-clcm-chosen="1"] .clcm-ib-thread { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  /* Set by the inbox script while a conversation is fitted: the page cannot be scrolled by hand (the script still moves
     it, to bring the card up over the keyboard). */
  html.clcm-ib-fitted, html.clcm-ib-fitted body { overflow:hidden; }
  /* While the coach types (v2.357.1): the tab bar is put away — above the keyboard it only took room from the thread. */
  html.clcm-ib-typing .clcm-cp-tabbar { display:none; }
  html.clcm-ib-typing .clcm-ib[data-clcm-chosen="1"] { position:fixed; z-index:45; margin:0; }
  /* Air between the conversation and the tab bar (Jose, 2026-11-04). */
  .clcm-ib { margin-bottom:12px; }
  .clcm-ib-back { display:flex; align-items:center; gap:6px; min-height:44px; padding:0 16px;
    border-bottom:1px solid rgba(var(--clcm-navy-rgb, 16, 42, 67), .08); font-size:14px; font-weight:700; text-decoration:none; }
  .clcm-ib-back:link, .clcm-ib-back:visited, .clcm-ib-back:hover, .clcm-ib-back:focus, .clcm-ib-back:active { color:var(--clcm-navy, #102A43); box-shadow:none; text-decoration:none; }
  .clcm-ib-back:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:-2px; }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.321.0 — THE AI TAB: THREE STARTERS AND A STANDING LINE (S16-1.9, Portal App AI screen). Starters show only while the
 * conversation is empty; the 988/911 line is always there. The composer is the Messages one: a pill and a round send.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
.clcm-comp-chips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
.clcm-comp-chip { min-height:34px; padding:0 12px; border:1px solid var(--clcm-border); border-radius:999px;
  background:var(--clcm-white, #fff); color:var(--clcm-navy); font-family:inherit; font-size:13px; font-weight:700; line-height:1.2;
  cursor:pointer; transition:transform .14s cubic-bezier(.2,.8,.2,1); }
.clcm-comp-chip:active { transform:scale(.97); }
.clcm-comp-chip:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .clcm-comp-chip { transition:none; } .clcm-comp-chip:active { transform:none; } }
/* 12px like the line above the conversation, not the mock-up's 11.5px; --clcm-muted, not its #8A93A3 (about 3:1 on white). */
.clcm-comp-emerg { margin:10px 0 0; font-size:12px; line-height:1.45; color:var(--clcm-muted, #4C5566); }
.clcm-comp-emerg strong { color:var(--clcm-text); }
.clcm-comp-compose { align-items:center; }
.clcm-comp-compose .clcm-ws-input { border-radius:999px; padding:12px 18px; min-height:48px; line-height:1.35; }

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.321.0 — COURSES (S16-1.4, Portal App Course screen). A client with one course lands inside it, the course's name as
 * the page heading. The day's content and the list of days sit side by side, and the list wraps under the content once
 * the two no longer fit (no media query: the content column's 340px basis decides). Days stay days: unlock dates, the
 * locked chip and "Mark Day Complete & Continue" are unchanged; the list only gains a mark per day.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
.clcm-cv { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.clcm-cv-main { flex:3 1 340px; min-width:0; display:flex; flex-direction:column; gap:14px; }
.clcm-cv-main > .clcm-course-progress, .clcm-cv-main > .clcm-course-items { margin:0; }
/* v2.358.2 — the module tile shows what the module is (Phosphor, as everywhere else); it was an empty tinted square.
   Here with the course screen, not at the end of the sheet: the phone batch's parts below hold only their own rules. */
.clcm-item-type-icon { display:inline-grid; place-items:center; color:var(--clcm-navy, #102A43); font-size:20px; line-height:1; }
/* (0,2,0) to outrank .clcm-day-nav's flex row and bottom margin in clcm-public.css. position:relative makes the list the
   containing block of the hidden "Opens …" / "Completed" words, so its overflow:hidden (the rounded corners) holds them. */
.clcm-cv .clcm-cv-days { flex:1 1 220px; min-width:0; display:block; position:relative; margin:0; background:var(--clcm-white);
  border:1px solid rgba(var(--clcm-navy-rgb), .10); border-radius:14px; overflow:hidden; }
.clcm-cv .clcm-cv-days .clcm-day-btn { display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box; min-height:44px;
  padding:11px 14px; border:0; border-top:1px solid rgba(var(--clcm-navy-rgb), .06); border-radius:0; background:var(--clcm-white);
  color:var(--clcm-navy); font-size:13.5px; font-weight:600; letter-spacing:0; text-transform:none; text-align:left; line-height:1.3; }
.clcm-cv .clcm-cv-days .clcm-day-btn:first-child { border-top:0; }
.clcm-cv .clcm-cv-days .clcm-day-btn.active,
.clcm-cv .clcm-cv-days .clcm-day-btn:hover { background:var(--clcm-cream); color:var(--clcm-navy); }
.clcm-cv .clcm-cv-days .clcm-day-btn.active { font-weight:800; }
.clcm-cv .clcm-cv-days .clcm-day-btn:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:-2px; }
.clcm-cv .clcm-cv-days .clcm-day-btn > i { font-size:17px; flex:none; color:rgba(var(--clcm-navy-rgb), .30); }
.clcm-cv .clcm-cv-days .clcm-day-btn > i.ph-check-circle { color:var(--clcm-sage-ink); }
.clcm-cv .clcm-cv-days .clcm-day-btn.active > i.ph-circle { color:var(--clcm-gold-ink); }
/* A locked day keeps its own look (half opacity, the lock, the date); it only takes the row's shape, the date at its end. */
.clcm-cv .clcm-cv-days .clcm-day-btn--locked,
.clcm-cv .clcm-cv-days .clcm-day-btn--locked:hover { background:var(--clcm-white); color:var(--clcm-navy); }
.clcm-cv .clcm-cv-days .clcm-day-btn--locked > i { color:var(--clcm-navy); }
.clcm-cv .clcm-cv-days .clcm-day-btn--locked > small { margin-left:auto; }
/* The item's OWN title only (a direct child): the h2–h4 a module's body carries keep their own sizes from clcm-public.css. */
.clcm-cv .clcm-item-content > h2, .clcm-cv .clcm-item-content > h4 { font:600 21px/1.25 var(--clcm-font-heading, 'Lora', Georgia, serif);
  color:var(--clcm-navy); margin:0 0 8px; }
.clcm-cv .clcm-item-body { font-family:var(--clcm-font-heading, 'Lora', Georgia, serif); font-size:16px; line-height:1.7; color:var(--clcm-text); }
.clcm-cv .clcm-course-viewer-foot { justify-content:flex-start; border-top:0; margin:0; padding:0; }
/* One course: the viewer is the page, under the page's own heading, not a section under a list. */
.clcm-course-viewer:has(> .clcm-cv--solo) { margin-top:0; }

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.321.0 — THE FIRST SIGN-IN WELCOME (S16-3.3, design O3). Drawn after the portal's root: a full-screen sheet on a
 * phone, a centred card over a dimmed page on a wider screen. Below the crisis panel and ⌘K (100000) and above the tab
 * bar, which it covers on a phone. Steps are <section hidden>; the script shows one at a time.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
html.clcm-fr-open, html.clcm-fr-open body { overflow:hidden; }
.clcm-fr { position:fixed; inset:0; z-index:99998; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(var(--clcm-navy-rgb), .45); font-family:var(--clcm-font-body, 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif);
  color:var(--clcm-text); -webkit-font-smoothing:antialiased; }
.clcm-fr[hidden] { display:none; }
.clcm-fr-card { position:relative; box-sizing:border-box; width:100%; max-width:460px; max-height:calc(100vh - 48px); overflow-y:auto;
  padding:22px 26px 26px; border-radius:20px; background:var(--clcm-cream); box-shadow:0 24px 60px rgba(var(--clcm-navy-rgb), .28); }
.clcm-fr-top { display:flex; align-items:center; gap:12px; min-height:44px; }
.clcm-fr-bars { flex:1; display:flex; gap:6px; }
.clcm-fr-bars span { flex:1; height:4px; border-radius:4px; background:var(--clcm-border); }
.clcm-fr-bars span.on { background:var(--clcm-gold); }
.clcm-fr-x { flex:none; width:44px; height:44px; margin:0 -10px 0 auto; border:0; border-radius:50%; background:transparent;
  color:var(--clcm-navy); font-size:20px; display:inline-grid; place-items:center; cursor:pointer; }
.clcm-fr-x:hover { background:rgba(var(--clcm-navy-rgb), .06); }
.clcm-fr-step { display:flex; flex-direction:column; gap:18px; padding-top:14px;
  animation:clcm-rise var(--clcm-dur-enter, 320ms) cubic-bezier(.2,.8,.2,1) both; }
.clcm-fr-step[hidden] { display:none; }
.clcm-fr-mark { width:34px; height:auto; margin-top:6px; border-radius:8px; }
.clcm-fr-h { margin:0; font-family:var(--clcm-font-heading, 'Lora', Georgia, serif); font-weight:600; font-size:26px; line-height:1.2;
  color:var(--clcm-navy); text-wrap:balance; }
/* The heading takes focus only so a screen reader starts at the step (tabindex=-1, nothing to operate): no ring, which
   Chrome would otherwise draw on every step change, since focus moved there by script counts as keyboard focus. */
.clcm-fr-h:focus { outline:none; }
.clcm-fr-n { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.clcm-fr-hello .clcm-fr-welcome { display:block; font-family:'Parisienne', cursive; font-weight:400; font-size:30px; line-height:1; color:var(--clcm-gold-ink); }
.clcm-fr-hello .clcm-fr-name { display:block; margin-top:4px; font-size:30px; line-height:1.15; }
.clcm-fr-p { margin:0; font-size:15.5px; line-height:1.6; }
.clcm-fr-coach { display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px; background:var(--clcm-white);
  border:1px solid rgba(var(--clcm-navy-rgb), .10); }
.clcm-fr-coach-ph { position:relative; overflow:hidden; flex:none; width:48px; height:48px; border-radius:50%; display:inline-grid; place-items:center;
  background-color:var(--clcm-navy); color:var(--clcm-gold-on-navy, #C8A45D);
  font:600 16px/1 var(--clcm-font-heading, 'Lora', Georgia, serif); }
.clcm-fr-coach-t { display:flex; flex-direction:column; gap:2px; min-width:0; }
.clcm-fr-coach-t strong { font:600 16px/1.3 var(--clcm-font-heading, 'Lora', Georgia, serif); color:var(--clcm-navy); }
.clcm-fr-coach-t span { font-size:13px; font-weight:700; color:var(--clcm-sage-ink); }
.clcm-fr-doc { max-height:360px; overflow-y:auto; padding:14px; border-radius:14px; background:var(--clcm-white);
  border:1px solid rgba(var(--clcm-navy-rgb), .10); font-family:var(--clcm-font-heading, 'Lora', Georgia, serif); font-size:14.5px; line-height:1.65; }
.clcm-fr-doc { overflow-wrap:anywhere; overflow-x:hidden; }   /* v2.358.2: same as .clcm-sign-doc (l.300) */
@media (max-width:599px) { .clcm-fr-doc { max-height:none; overflow:visible; } }
@media (min-width:600px) { .clcm-fr-doc { max-height:max(360px, 60vh); } }
.clcm-fr-doc:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:2px; }
.clcm-fr-signform { display:flex; flex-direction:column; gap:10px; }
.clcm-fr-signform[hidden] { display:none; }
.clcm-fr-label { margin:0; font-size:13px; font-weight:800; }
.clcm-fr-input { box-sizing:border-box; width:100%; height:50px; padding:0 14px; border:1px solid var(--clcm-border); border-radius:12px;
  background:var(--clcm-white); color:var(--clcm-navy); font-family:'Parisienne', cursive; font-size:26px; }
.clcm-fr-input:focus { outline:none; border-color:var(--clcm-gold-text, var(--clcm-gold, #C8A45D));
  box-shadow:0 0 0 3px rgba(var(--clcm-gold-rgb), .22); }
.clcm-fr-agree { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.5; }
.clcm-fr-agree input { flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--clcm-navy); }
.clcm-fr-err, .clcm-fr-ok { margin:0; font-size:14px; line-height:1.5; }
/* Empty, the error takes no room. The two result lines are role=status and must stay in the accessibility tree while
   empty, or their first text is not announced (the same trap as #clcm-card-msg above): clipped, not display:none. */
.clcm-fr-err:empty { display:none; }
.clcm-fr-ok:empty { position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); }
.clcm-fr-err { color:var(--clcm-danger); font-weight:700; }
.clcm-fr-ok { color:var(--clcm-sage-ink); font-weight:700; }
.clcm-fr-app { width:64px; height:64px; border-radius:16px; box-shadow:0 8px 20px rgba(var(--clcm-navy-rgb), .2); }
.clcm-fr-rows { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.clcm-fr-rows[hidden], .clcm-fr-p[hidden], .clcm-fr-alt[hidden] { display:none; }
.clcm-fr-rows li { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:14px; background:var(--clcm-white);
  font-size:14.5px; line-height:1.5; }
.clcm-fr-rows li i { font-size:16px; color:var(--clcm-navy); vertical-align:-2px; }
.clcm-fr-num { flex:none; width:28px; height:28px; border-radius:50%; display:inline-grid; place-items:center; background:rgba(var(--clcm-gold-rgb), .18);
  color:var(--clcm-gold-ink); font-size:13px; font-weight:800; }
.clcm-fr-bell { width:64px; height:64px; border-radius:18px; display:inline-grid; place-items:center; background:var(--clcm-navy);
  color:var(--clcm-gold-on-navy, #C8A45D); font-size:30px; }
.clcm-fr-foot { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.clcm-fr-go, .clcm-fr-alt { box-sizing:border-box; width:100%; min-height:54px; padding:0 18px; border:0; border-radius:14px; cursor:pointer;
  font-family:inherit; font-size:16px; font-weight:800; transition:transform .14s cubic-bezier(.2,.8,.2,1); }
.clcm-fr-go { background:var(--clcm-navy); color:var(--clcm-white); }
.clcm-fr-go:disabled { opacity:.6; cursor:progress; }
.clcm-fr-alt { min-height:48px; background:var(--clcm-white); color:var(--clcm-navy); border:1px solid rgba(var(--clcm-navy-rgb), .18); }
.clcm-fr-skip { min-height:44px; border:0; background:transparent; color:var(--clcm-text-muted, #4C5566); font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer; }
.clcm-fr-go:active, .clcm-fr-alt:active, .clcm-fr-skip:active { transform:scale(.97); }
.clcm-fr-go:focus-visible, .clcm-fr-alt:focus-visible, .clcm-fr-skip:focus-visible, .clcm-fr-x:focus-visible {
  outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:2px; }
/* A phone: the sheet IS the screen, the buttons at its foot, clear of the home indicator. */
@media (max-width:640px) {
  .clcm-fr { padding:0; background:var(--clcm-cream); align-items:stretch; }
  .clcm-fr-card { max-width:none; max-height:none; height:100%; height:100dvh; border-radius:0; box-shadow:none; display:flex; flex-direction:column;
    padding:max(14px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom)); }
  .clcm-fr-step { flex:1 0 auto; }
  .clcm-fr-step .clcm-fr-foot { margin-top:auto; }
}
@media (prefers-reduced-motion: reduce) { .clcm-fr-step { animation:none; } .clcm-fr-go, .clcm-fr-alt, .clcm-fr-skip { transition:none; } }
@media (forced-colors: active) { .clcm-fr-bars span.on { background:CanvasText; } .clcm-fr-go { border:1px solid ButtonText; } }

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.321.0 — A COACH'S PHOTO OVER THEIR INITIALS (the client's Messages header and the first sign-in welcome). The photo
 * was the disc's own background, and an element's text always paints above its background: the initials sat across
 * the coach's face. It is now a positioned layer on top, which paints above the text; with no colour of its own, a
 * photo whose file is gone shows the initials beneath it.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
.clcm-msg-head-ini { position:relative; overflow:hidden; }
.clcm-coach-pic { position:absolute; inset:0; border-radius:inherit; background-size:cover; background-position:center; background-repeat:no-repeat; }

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.323.0 — THE CLIENT-PORTAL PREVIEW (design 2E; R2-2E-q1…q7, r1…r3, R2-4C-r3). The coach card a coach gets on
 * /portal/; the bands across the top (the gold preview bar with Exit preview, the navy "this is your own portal");
 * the one live line every refused save shows; the preview's switched-off controls. Tokens both hosts define are read
 * bare; single-host ones carry a fallback; no Waymark literal (the tenant colour sweep).
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
/* The coach card spans the portal's two-column grid, like the other fragments built as strings. */
.clcm-portal > .clcm-pvc-wrap { grid-column:1 / -1; }
.clcm-pvc-wrap { display:flex; justify-content:center; box-sizing:border-box; width:100%; padding:32px 16px; }
.clcm-pvc { box-sizing:border-box; width:100%; max-width:440px; display:flex; flex-direction:column; gap:14px; padding:28px;
  border-radius:18px; background:var(--clcm-white); border:1px solid rgba(var(--clcm-navy-rgb), .1);
  box-shadow:0 14px 34px rgba(var(--clcm-navy-rgb), .08); }
.clcm-pvc-ico { width:48px; height:48px; border-radius:14px; display:inline-grid; place-items:center;
  background:rgba(var(--clcm-navy-rgb), .1); color:var(--clcm-navy); font-size:24px; }
.clcm-pvc-h { margin:0; font:600 24px/1.2 var(--clcm-font-heading, 'Lora', Georgia, serif); color:var(--clcm-navy); text-wrap:balance; }
.clcm-pvc-p { margin:0; font-size:14.5px; line-height:1.6; color:var(--clcm-text); }
.clcm-pvc-who { margin:0; font-size:13px; color:var(--clcm-text-muted, #4C5566); }
.clcm-pvc-acts { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.clcm-pvc-btn { box-sizing:border-box; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:11px;
  background:var(--clcm-white); color:var(--clcm-navy); border:1px solid var(--clcm-border); font-size:14px; font-weight:700; text-decoration:none; }
.clcm-pvc-btn:hover, .clcm-pvc-btn:focus { color:var(--clcm-navy); }
.clcm-pvc-btn--pri { background:var(--clcm-navy); color:var(--clcm-on-navy-strong, #fff); border-color:var(--clcm-navy); font-weight:800; }
.clcm-pvc-btn--pri:hover, .clcm-pvc-btn--pri:focus { color:var(--clcm-on-navy-strong, #fff); }
.clcm-pvc-btn i { font-size:16px; }
.clcm-pvc-out { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 8px; font-size:13.5px; font-weight:700;
  color:var(--clcm-text-muted, #4C5566); text-decoration:none; }
.clcm-pvc-out:hover, .clcm-pvc-out:focus { color:var(--clcm-navy); text-decoration:underline; }
/* The bands. Their colours are printed inline (the preview bar) or are the portal's own navy (the own-portal bar). They,
   and the toast below, sit OUTSIDE .clcm-portal, which is where the portal's face is set: without their own they fall
   back to the browser's serif. */
.clcm-band { font-family:var(--clcm-font-body, 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif); box-sizing:border-box; display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 10px 6px 18px; margin:0; }
.clcm-pvbar > i { flex:none; font-size:17px; }
.clcm-band-t { flex:1; min-width:0; margin:0; font-size:13.5px; font-weight:700; line-height:1.35; }
.clcm-pvbar-exit { flex:none; display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:7px; color:#fff;
  font-size:12.5px; font-weight:800; white-space:nowrap; text-decoration:none; }
.clcm-pvbar-exit:hover, .clcm-pvbar-exit:focus { color:#fff; text-decoration:underline; }
.clcm-rd-ctxbar--band { border-radius:0; margin:0; padding:8px 16px; }
/* Pinned on a computer: at the top, with the rail and My Profile's index below it. On a phone the bar sits just under the
   fixed app bar (the page is pushed down by that bar's height, and the shell no longer needs its own clearance) and
   scrolls away with the page: at 375 and 390 it wraps to 48px in English and 85px in Spanish, and pinned under the 50px
   app bar the Spanish pair would hold 135px of an 812px screen. One rule for both languages. */
@media not all and (max-width:860px) {
  .clcm-has-band .clcm-band { position:sticky; top:0; z-index:31; }
  .clcm-has-band .clcm-portal-nav-wrap { top:var(--clcm-band-h, 44px); }
  .clcm-has-band .clcm-pf-index { top:calc(16px + var(--clcm-band-h, 44px)); }
  /* Jump targets land below the pinned bar, not under it: My Profile's cards, and the skip link's target. */
  .clcm-has-band .clcm-pf-grid > .clcm-pf-card { scroll-margin-top:calc(16px + var(--clcm-band-h, 44px)); }
  .clcm-has-band .clcm-portal-body { scroll-margin-top:var(--clcm-band-h, 44px); }
}
@media (max-width:860px) {
  body.clcm-portal-standalone.clcm-has-band { padding-top:calc(50px + env(safe-area-inset-top, 0px)); }
  body.clcm-portal-standalone.clcm-has-band .clcm-portal { padding-top:12px; }
}
/* Phone: the approved capsule for a small label button (Jose 2026-10-18), with room for a thumb. */
@media (max-width:820px) { .clcm-pvbar-exit { border-radius:999px; min-height:36px; } }
/* "Preview only. Nothing was sent." — one line for every refused save, above the tab bar on a phone. */
.clcm-pv-toast { font-family:var(--clcm-font-body, 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif); position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:99990; box-sizing:border-box;
  display:flex; align-items:center; gap:8px; max-width:min(92vw, 420px); padding:12px 16px; border-radius:12px;
  background:var(--clcm-navy); color:var(--clcm-on-navy-strong, #fff); font-size:14px; line-height:1.4;
  pointer-events:none; opacity:0; transition:opacity var(--clcm-dur-enter, 320ms) ease; }
.clcm-pv-toast.is-on { opacity:1; }
.clcm-pv-toast i { flex:none; font-size:17px; }
@media (max-width:860px) { .clcm-pv-toast { bottom:calc(78px + env(safe-area-inset-bottom, 0px)); } }
/* The preview's switched-off controls, and the lines that say why. */
.clcm-comp-pv, .clcm-pf-pv { display:flex; align-items:center; gap:6px; margin:10px 0 0; font-size:13px; color:var(--clcm-text-muted, #4C5566); }
.clcm-pf-pv { display:inline-flex; margin:0; }
.clcm-comp-chip:disabled, .clcm-comp-compose :disabled, #clcm-save-all:disabled { opacity:.55; cursor:not-allowed; }
.clcm-comp-chip:disabled:active { transform:none; }
@media (prefers-reduced-motion: reduce) { .clcm-pv-toast { transition:none; } }
@media (forced-colors: active) { .clcm-pv-toast, .clcm-band { border:1px solid CanvasText; } }

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.324.0 — THE PUBLIC BOOKING PAGE (design 2B; R2-2B-q1, q2, q5, q7, q8, q10, q12, r1). The page around the booking card
 * on /book/: a light top bar (the org's mark, EN · ES, sign in or "Your portal"), a column beside the card (the heading;
 * on a one-coach page the coach's card, bio, facts and rule), and a foot (Back to, Terms · Privacy). The card itself keeps
 * its own design (.clcm-rd-book). Names are clcm-book-* — the wizard's clcm-bk-* are inside the card. Tokens both hosts
 * define are read bare; single-host ones carry a fallback; the tenant's own navy and gold reach the badge and the disc.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
.clcm-book-page { position:relative; overflow:hidden; min-height:100vh; display:flex; flex-direction:column; }
.clcm-book-mark { position:absolute; right:-90px; top:120px; width:460px; opacity:.05; pointer-events:none; }
.clcm-book-top { position:relative; box-sizing:border-box; display:flex; align-items:center; gap:16px; min-height:68px; padding:0 40px;
  background:rgba(255,255,255,.6); border-bottom:1px solid rgba(var(--clcm-navy-rgb), .08); }
.clcm-book-logo { display:block; height:34px; width:auto; }
/* The badge is what gives way on a narrow screen (its name ellipsises), so EN · ES and Sign in always fit. */
.clcm-book-badge { display:inline-flex; align-items:center; flex:0 1 auto; min-width:0; max-width:min(260px, 55vw); padding:6px 12px; border-radius:10px;
  background:var(--clcm-navy); color:var(--clcm-on-navy-strong, #fff); }
.clcm-book-badge img { display:block; max-height:34px; max-width:100%; width:auto; object-fit:contain; }
.clcm-book-badge-name { font-family:var(--clcm-font-accent, 'Parisienne', cursive); font-size:24px; line-height:1.1;
  color:var(--clcm-gold-on-navy, var(--clcm-gold, #C8A45D)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clcm-book-top-r { margin-left:auto; flex:none; display:flex; align-items:center; gap:18px; font-size:13.5px; font-weight:700; color:var(--clcm-text-muted, #5A6478); }
.clcm-book-lang { display:inline-flex; align-items:center; gap:6px; }
.clcm-book-lang a, .clcm-book-lang a:link, .clcm-book-lang a:visited, .clcm-book-lang a:hover, .clcm-book-lang a:active { color:inherit; text-decoration:none; }
/* The active language is marked by more than colour: navy AND underlined. */
.clcm-book-lang a.is-active, .clcm-book-lang a.is-active:link, .clcm-book-lang a.is-active:visited, .clcm-book-lang a.is-active:hover { color:var(--clcm-navy); text-decoration:underline; text-underline-offset:3px; }
.clcm-book-signin, .clcm-book-signin:link, .clcm-book-signin:visited, .clcm-book-signin:hover, .clcm-book-signin:focus, .clcm-book-signin:active {
  box-sizing:border-box; display:inline-flex; align-items:center; gap:4px; min-height:36px; padding:0 14px; border:1px solid var(--clcm-border);
  border-radius:9px; background:var(--clcm-white); color:var(--clcm-navy); text-decoration:none; white-space:nowrap; }
.clcm-book-signin:hover { border-color:rgba(var(--clcm-navy-rgb), .35); }
/* The column beside the card: the heading and, on a one-coach page, the coach (desktop: left; phone: above the card). */
/* The main area and the foot are positioned so they paint OVER the watermark (positioned, and earlier in the page). */
.clcm-book-main { position:relative; box-sizing:border-box; width:100%; max-width:1200px; margin:0 auto; flex:1 0 auto; display:grid;
  grid-template-columns:420px minmax(0, 1fr); grid-template-rows:auto 1fr; grid-template-areas:"intro card" "about card";
  column-gap:40px; row-gap:18px; padding:44px 40px 36px; }
.clcm-book-intro { grid-area:intro; display:flex; flex-direction:column; gap:18px; min-width:0; }
.clcm-book-card { grid-area:card; min-width:0; container-type:inline-size; }
/* The CARD's width picks the time slots' columns, not the viewport's: from 901px the card column can be narrower than a
   phone's, and three columns of full date-and-time labels wrap to four lines. */
@container (max-width:520px) { .clcm-rd-book .clcm-slot-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.clcm-book-about { grid-area:about; align-self:start; display:flex; flex-direction:column; gap:18px; min-width:0; }
.clcm-book-h1 { margin:0; font-family:var(--clcm-font-heading, 'Lora', Georgia, serif); font-weight:600; font-size:36px; line-height:1.15; color:var(--clcm-navy); text-wrap:balance; }
.clcm-book-coach { display:flex; gap:14px; align-items:center; padding:14px; border-radius:16px; background:var(--clcm-white); border:1px solid rgba(var(--clcm-navy-rgb), .10); }
/* The photo is a LAYER over the initials (.clcm-coach-pic), so a missing file still shows the initials. */
.clcm-book-coach-ph { position:relative; flex:none; width:64px; height:64px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:var(--clcm-navy); color:var(--clcm-gold-on-navy, var(--clcm-gold, #C8A45D)); font:600 22px/1 var(--clcm-font-heading, 'Lora', Georgia, serif); }
.clcm-book-coach-t { display:flex; flex-direction:column; min-width:0; }
.clcm-book-coach-n { font:600 18px/1.25 var(--clcm-font-heading, 'Lora', Georgia, serif); color:var(--clcm-navy); overflow-wrap:anywhere; }
.clcm-book-coach-s { font-size:13.5px; font-weight:700; color:var(--clcm-sage-ink); }
.clcm-book-coach-o { margin-top:2px; font-size:13px; color:var(--clcm-text-muted, #5A6478); }
.clcm-book-bio { margin:0; font-size:15px; line-height:1.65; color:var(--clcm-text); overflow-wrap:anywhere; }
.clcm-book-facts { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.clcm-book-facts li { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.45; color:var(--clcm-text); overflow-wrap:anywhere; }
/* Without this, display:flex beats [hidden] and an empty time-zone row shows before the script names the zone. */
.clcm-book-facts li[hidden] { display:none; }
.clcm-book-facts i { flex:none; font-size:17px; line-height:1.2; color:var(--clcm-gold-ink); }
.clcm-book-foot { position:relative; box-sizing:border-box; width:100%; max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  padding:16px 40px; border-top:1px solid rgba(var(--clcm-navy-rgb), .08); font-size:12.5px; color:var(--clcm-text-muted, #5A6478); }
.clcm-book-legal { margin-left:auto; }
.clcm-book-home { display:inline-flex; align-items:center; gap:6px; }
.clcm-book-foot a, .clcm-book-foot a:link, .clcm-book-foot a:visited, .clcm-book-foot a:active { color:var(--clcm-navy); text-decoration:none; }
.clcm-book-foot a:hover { color:var(--clcm-navy); text-decoration:underline; }
/* Inside the card on /book/: the chosen coach's name, once there were several to choose from (R2-2B-q7). */
.clcm-rd-book .clcm-bk-with { margin:0; font-size:13px; color:var(--clcm-text-muted, #5A6478); }
.clcm-rd-book .clcm-bk-with strong { color:var(--clcm-navy); }
.clcm-book-signin:focus-visible, .clcm-book-lang a:focus-visible, .clcm-book-foot a:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:2px; }
@media (max-width:900px) {
  .clcm-book-main { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto; grid-template-areas:"intro" "card" "about"; padding:24px 16px 28px; row-gap:20px; }
  .clcm-book-top { padding:0 16px; min-height:60px; gap:12px; }
  .clcm-book-foot { padding:16px; }
  .clcm-book-legal { margin-left:0; }
  .clcm-book-mark { display:none; }
  .clcm-book-h1 { font-size:30px; }
}
/* Phone: the approved capsule for a small label button (Jose 2026-10-18), and 44px targets for EN · ES. */
@media (max-width:820px) {
  .clcm-book-signin, .clcm-book-signin:link, .clcm-book-signin:visited { border-radius:999px; min-height:44px; }
  .clcm-book-lang a { display:inline-flex; align-items:center; min-height:44px; padding:0 4px; }
}
@media (max-width:600px) {
  /* "Already have an account?" leaves the bar but stays the link's spoken name. */
  .clcm-book-signin-q { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .clcm-book-logo { height:28px; }
  .clcm-book-top, .clcm-book-top-r { gap:10px; }
  .clcm-book-signin, .clcm-book-signin:link, .clcm-book-signin:visited { padding:0 12px; }
  .clcm-book-badge { max-width:45vw; }
  .clcm-book-h1 { font-size:28px; }
}
@media (forced-colors: active) { .clcm-book-badge, .clcm-book-coach-ph { forced-color-adjust:none; } }

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.325.0 — THE AI SETTINGS CARD, RESTYLED (S16-2.18; restyle only). The two switches stay one pair in one form;
 * rows read as the mock-up's settings rows; the add-on state is a pill; the platform keys sit under a small group
 * label instead of a rule. --clcm-text-muted is admin-only, hence its fallback.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
.clcm-ai-set .clcm-toggle-label { font-size:13.5px; font-weight:700; color:var(--clcm-navy); }
.clcm-ai-set .clcm-toggle-desc { font-size:12.5px; line-height:1.45; color:var(--clcm-text-muted, #5A6478); }
.clcm-ai-addon { margin-top:14px; padding:14px 16px; border:1px solid var(--clcm-border); border-radius:var(--clcm-radius-xl);
  background:var(--clcm-surface-tint); }
.clcm-ai-addon .clcm-rd-pill { display:inline-flex; align-items:center; gap:5px; }
.clcm-ai-set .clcm-ai-tone { margin-top:6px; border-bottom:0; }   /* the platform group below draws its own rule */
.clcm-ai-set-g { margin-top:18px; padding-top:16px; border-top:1px solid rgba(var(--clcm-navy-rgb), .08); }
.clcm-ai-set-h { margin:0 0 6px; font-size:12px; font-weight:700; color:var(--clcm-text-muted, #5A6478); }
/* The Settings dot (see the sub-nav block): in forced colours it keeps a system colour rather than vanishing. */
@media (forced-colors: active) { .clcm-set-dot { forced-color-adjust:none; background:CanvasText; } }

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.326.0 — SCHEDULING CHIPS AND THE GROUP PAGE (S16-2.11, S16-2.7).
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
/* The Schedule / Edit modal: a long roster scrolls inside its own box, so Save never leaves the screen. */
.clcm-modal .clcm-appt-clients { max-height:220px; overflow:auto; padding:4px; }   /* 4px: room for the 2px+2px focus ring inside the scrollport */
/* The two chip labels are <p>s (a <label> would make linkLabels() wrap the radios in a second group): no paragraph margins. */
.clcm-modal .clcm-form-group > p.clcm-label { margin:0; }
/* The group page: Upcoming and Shared side by side when there is room. flex-basis 300px is a WIDTH only because the
   row stays a row — a column flip would turn it into a height (see flex-basis-follows-the-axis). */
.clcm-wrap .clcm-gm-pair { display:flex; flex-wrap:wrap; gap:24px; margin-top:24px; }
.clcm-wrap .clcm-gm-pair > .clcm-rd-panel { flex:1 1 300px; min-width:0; margin:0; }
.clcm-wrap .clcm-gm-who { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; }
.clcm-wrap .clcm-rd-lrow-r { margin-left:auto; flex:none; font-size:12.5px; color:var(--clcm-text-muted, #5A6478); }
.clcm-wrap .clcm-gm-more { margin:10px 0 0; font-size:12.5px; }
.clcm-wrap .clcm-gm-more a { font-weight:700; }
/* An address is one unbroken string: let it break, so Check in + Remove never push the table past its panel. */
.clcm-wrap .clcm-gm-members td.clcm-rd-muted { overflow-wrap:anywhere; }
/* The six-cell strip, sized by its own width (the rail moves the viewport): 6 across, else 3 + 3 with a rule between
   the rows; the phone rules above (2 columns at 820px and under) stay in charge there. */
.clcm-wrap .clcm-gm-strip { container-type:inline-size; }
@container (min-width: 1020px) { .clcm-wrap .clcm-gm-strip > .clcm-rd-stats { grid-template-columns:repeat(6, minmax(0, 1fr)); } }
@media (min-width: 821px) {
  @container (max-width: 1019.98px) {
    .clcm-wrap .clcm-gm-strip > .clcm-rd-stats { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    /* Stated in full: at 860px and under the shared strip turns every cell's right rule into a bottom one, which here
       doubled the rule between the rows and dropped the column dividers. */
    .clcm-wrap .clcm-gm-strip > .clcm-rd-stats > .clcm-rd-stat { border-bottom:0; border-right:1px solid rgba(var(--clcm-navy-rgb), .08); }
    .clcm-wrap .clcm-gm-strip > .clcm-rd-stats > .clcm-rd-stat:nth-child(3n) { border-right:0; }
    .clcm-wrap .clcm-gm-strip > .clcm-rd-stats > .clcm-rd-stat:nth-child(n+4) { border-top:1px solid rgba(var(--clcm-navy-rgb), .08); }
  }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.327.0 — THE COURSE EDITOR: REORDER WITHIN A DAY (S16-2.9). The grip is drawn here (no grip glyph in the icon
 * subset); Move up is the caret turned over.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
.clcm-ce-grip { flex:none; width:10px; height:16px; cursor:grab; opacity:.7;
  background:radial-gradient(circle, var(--clcm-text-muted, #5A6478) 1.2px, transparent 1.4px) 0 0 / 5px 5px; }
.clcm-rd-lrow.is-dragging { opacity:.5; }
.clcm-ce-up i { transform:rotate(180deg); }
.clcm-rd-iact.clcm-ce-up[aria-disabled="true"], .clcm-rd-iact.clcm-ce-down[aria-disabled="true"] { opacity:.35; cursor:default; }
@media (forced-colors: active) { .clcm-ce-grip { background:none; border-left:2px dotted CanvasText; } }
/* A phone: the grip and the two Move buttons made every item row about 90px wider, and the day's column (flex:1 beside
   the day's number tile) cannot shrink below its widest row, so the panel's clip cut Delete and "+ Item" off. A row
   now wraps: the actions drop under the title when it would get less than 100px, and a long word breaks. */
.clcm-wrap .clcm-day-items > .clcm-rd-lrow[data-clcm-item] { flex-wrap:wrap; row-gap:6px; }
.clcm-wrap .clcm-day-items > .clcm-rd-lrow[data-clcm-item] > .clcm-rd-lrow-main { flex:1 1 100px; }
.clcm-wrap .clcm-day-items > .clcm-rd-lrow[data-clcm-item] > .clcm-rd-lrow-acts { margin-left:auto; }
.clcm-wrap .clcm-day-items .clcm-rd-lrow-t { overflow-wrap:anywhere; }
/* A finger cannot drag the grip (it arms on a mouse press); Move up and Move down are the touch path. */
@media (hover:none) and (pointer:coarse) { .clcm-ce-grip { display:none; } }
/* v2.329.0 — "Preview as client": the one line that says every day is open here. */
.clcm-cv-preview { margin:0 0 12px; font-size:13.5px; line-height:1.5; font-style:italic; }   /* no colour: --clcm-text-muted is the admin host's only */

/* ═══════════════════════════════════════════════════════════════════════════════
 * v2.330.0 — THE INBOX HEADER'S SUB-LINE (COACH-LAYOUT C2): "program · Next: <when>" under the client's name
 * (mock-up :685-687: name 14/700, sub-line 12px muted, one line). The PROGRAM gives way: it ellipsizes, and the time,
 * which is what a coach opens this header for, is never cut off. Its 60px basis is what lets the line wrap only when
 * the time and a readable piece of the program cannot share it (a pane that narrow also occurs at 861-930px, the rail
 * and the list taking their share, so this cannot be a media query); max-width stops it growing past its own title
 * and pushing the time away. The dot is drawn in the gap, so a time that starts a line has none: the clip takes it.
 * ═══════════════════════════════════════════════════════════════════════════════ */
.clcm-ib-head-id { flex:1 1 auto; min-width:0; }
.clcm-ib-head-id .clcm-rd-count { overflow-wrap:anywhere; }   /* a CSV import can make an email the name */
.clcm-ib-head-sub { display:flex; flex-wrap:wrap; column-gap:.9em; margin-top:1px; overflow:hidden; font-size:12px; line-height:1.4;
  color:var(--clcm-text-muted, #5A6478); }
.clcm-ib-head-prog { flex:1 1 60px; max-width:max-content; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clcm-ib-head-prog + .clcm-ib-head-next { position:relative; }
.clcm-ib-head-prog + .clcm-ib-head-next::before { content:"\00B7"; position:absolute; left:-.6em; }
/* (0,4,0): .clcm-wrap .clcm-rd-bar > .clcm-btn pins the button to the top under 820px. */
.clcm-wrap .clcm-ib-pane > .clcm-rd-bar > .clcm-btn { align-self:center; }
/* Every .clcm-rd-bar turns into a column on a phone so a search box can go full width. This one holds a name and a
   button: it stays the drawn row, about 60px, not three lines at 130px above the conversation (Jose, 2026-10-30). */
@media (max-width:560px) {
  .clcm-wrap .clcm-ib-pane > .clcm-rd-bar { flex-direction:row; align-items:center; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * v2.331.0 — SETTINGS ROWS: Escalation's "Why it matters", and the colour field (COACH-LAYOUT C6, C7; the Branding tab
 * in label-left rows). The swatch IS the colour picker, so it stays a real input: 34px to match the hex box beside it,
 * and the admin's own focus rules are out-ranked at (0,3,1), hence box-shadow:none and the explicit outline. The hex box
 * restates 16px under the admin's phone width, where core's 16px floor (it stops iOS zooming) would otherwise lose
 * to the 13px here. [hidden] needs its own rule: display:flex beats the attribute.
 * ═══════════════════════════════════════════════════════════════════════════════ */
.clcm-rd-why { margin:0; font-size:13.5px; line-height:1.5; }
/* THE iOS FLOOR ON ADMIN FIELDS. clcm-admin.css sets 16px under 782px so a focused field does not zoom the page, but at
   (0,1,0): its own 13px rules for these fields out-rank it, and so did this sheet's for the search and filter boxes. It
   never reached a field. Each arm here matches the rule it has to beat, later in the cascade, because that sheet is byte-pinned. */
@media screen and (max-width:782px) {
  .clcm-wrap input.clcm-input, .clcm-wrap textarea.clcm-input, .clcm-wrap textarea.clcm-textarea,
  .clcm-wrap select:not([multiple]):not(.clcm-unstyled),
  .clcm-wrap input.clcm-search-input, .clcm-wrap .clcm-settings-filter > input,
  .clcm-modal-backdrop input.clcm-input, .clcm-modal-backdrop select, .clcm-modal-backdrop textarea,
  .clcm-modal input.clcm-input, .clcm-modal input.clcm-search-input, .clcm-modal select, .clcm-modal textarea { font-size:16px; }
}
.clcm-rd-colorfield { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.clcm-wrap .clcm-rd-colorfield input[type="color"] { -webkit-appearance:none; appearance:none; flex:none; box-sizing:border-box;
  width:34px; height:34px; min-height:0; padding:0; border:1px solid rgba(var(--clcm-navy-rgb,16,42,67),.15); border-radius:7px;
  background:none; box-shadow:none; cursor:pointer; }
.clcm-rd-colorfield input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.clcm-rd-colorfield input[type="color"]::-webkit-color-swatch { border:0; border-radius:6px; }
.clcm-rd-colorfield input[type="color"]::-moz-color-swatch { border:0; border-radius:6px; }
.clcm-wrap .clcm-rd-colorfield input[type="color"]:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:2px; }
.clcm-wrap .clcm-rd-colorfield input.clcm-rd-colorfield-hex { width:110px; height:34px; min-height:0; padding:0 10px; flex:none; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; }
@media screen and (max-width:782px) { .clcm-wrap .clcm-rd-colorfield input.clcm-rd-colorfield-hex { font-size:16px; } }
.clcm-rd-colorfield-err { display:flex; align-items:center; gap:6px; margin:4px 0 0; font-size:12.5px; font-weight:600; }
.clcm-rd-colorfield-err[hidden] { display:none; }

/* ── THE BUTTONS ON A LIBRARY ROW ────────────────────────────────────────────────────
 * Jose's report, 2026-10-31, with a screenshot: the Transfer… box ran under Edit, and the row's controls were not one thickness
 * (24, 26 and 27px, measured). The box was wearing the form-field rules. Their width:100% gives a table cell nothing to measure,
 * so the cell came out short and the box spilled up to 30px into the next one. A fixed width is the fix: it holds "Transfer…" and
 * "Transferir…", a colleague's long name still shows in full in the list that opens, and every row's box is the same. The rest makes
 * the controls in a row read as one set. A phone wraps them and keeps its approved pills, so this stops at the desktop.
 * The select's selector matches the pinned blanket rule's (0,3,1) and adds to it. box-shadow is kept out of that rule and away from
 * :focus, or it out-ranks the pinned focus ring. gap holds the Shared button's tick off its word, which inline-flex would close.
 * tests/browser/library-row-check.mjs measures all of this in a real browser; tests/test-library-row-v2333.php holds the gate. */
@media (min-width: 783px) {
  .clcm-wrap .clcm-lib-table td.clcm-row-actions .clcm-metric-act {
    display:inline-flex; align-items:center; gap:3px; justify-content:center; box-sizing:border-box; height:28px; vertical-align:middle; }
  .clcm-wrap .clcm-lib-table td.clcm-row-actions select.clcm-transfer-sel:not([multiple]):not(.clcm-unstyled) {
    width:100px; height:28px; vertical-align:middle; border-width:1px; border-radius:8px; font-weight:600; line-height:1;
    background-position:right 6px center, 0 0; }
  .clcm-wrap .clcm-lib-table td.clcm-row-actions select.clcm-transfer-sel:not([multiple]):not(.clcm-unstyled):not(:focus) { box-shadow:none; }
}
/* The row now asks for the width it really needs, and above 860px nothing scrolls: the card is overflow:hidden and the table's own
 * scroller stops at 860, so a table wider than its card puts Edit and the bin where no pointer can reach. So the table gives way
 * instead. A heading can wrap, a long unbroken title or a web address under it can break (anywhere is the value that also lowers the
 * column's minimum; break-word does not), and up to 1060px the controls can stack in their cells. The meta rule stays inside .clcm-rd-idt,
 * which leaves the actions cell's "Used when writing notes" whole. `not all and (max-width:860px)` rather than (min-width:861px): it is
 * the exact complement of the scroller, so a zoomed window at 860.5px cannot fall between the two and get neither. */
@media not all and (max-width:860px) {
  .clcm-wrap .clcm-lib-table thead th { white-space:normal; }
  .clcm-wrap .clcm-lib-table .clcm-rd-title { overflow-wrap:anywhere; }
  .clcm-wrap .clcm-lib-table .clcm-rd-idt .clcm-rd-meta { overflow-wrap:anywhere; }
  @media (max-width: 1060px) {
    .clcm-wrap .clcm-lib-table td.clcm-row-actions { white-space:normal; }
    .clcm-wrap .clcm-lib-table td.clcm-row-actions > * { margin-top:2px; margin-bottom:2px; }
  }
}

/* ═══ THE PLAN CHOICE AT SUBSCRIBE (v2.334.0) ═══
 * Two real radios drawn as cards on the Membership screen. auto-fit is what puts them side by side:
 * a media query cannot say that, and min() keeps a 240px track from overflowing a narrow panel.
 * The radio stays in the DOM at opacity 0 (.clcm-gchip's pattern) so the group keeps its keyboard
 * behaviour; the ring goes on the card by :has(), and the chosen state is a filled dot plus a
 * heavier border, a shape as well as a colour, so it survives a tenant palette and forced colours.
 * The disabled card keeps its reason at full strength: that is the thing somebody needs to read.
 * .is-on and :has() ARE SEPARATE RULES ON PURPOSE. A browser that cannot parse :has() throws away the
 * whole selector list it sits in, and the script's .is-on is the fallback for exactly that browser. */
.clcm-wrap .clcm-plan-choice { border:0; margin:14px 0 4px; padding:0; min-width:0; }
.clcm-wrap .clcm-plan-choice > legend { padding:0; margin:0 0 8px; font-size:13px; font-weight:600; color:var(--clcm-text); }
.clcm-wrap .clcm-plan-opts { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap:10px; }
.clcm-wrap .clcm-plan-opt { position:relative; display:grid; grid-template-columns:18px minmax(0, 1fr); align-content:start; column-gap:10px; row-gap:3px;
  padding:12px 14px; border:1px solid var(--clcm-border); border-radius:10px; cursor:pointer; }
.clcm-wrap .clcm-plan-opt input { position:absolute; opacity:0; width:1px; height:1px; margin:0; padding:0; }
.clcm-wrap .clcm-plan-opt:has(input:focus-visible) { outline:2px solid currentColor; outline-offset:2px; }
.clcm-wrap .clcm-plan-opt:not(.is-off):hover { border-color:rgba(var(--clcm-navy-rgb),.38); }
.clcm-wrap .clcm-plan-opt.is-on { border-color:var(--clcm-navy); box-shadow:inset 0 0 0 1px var(--clcm-navy); background:rgba(var(--clcm-navy-rgb),.04); }
.clcm-wrap .clcm-plan-opt:has(input:checked) { border-color:var(--clcm-navy); box-shadow:inset 0 0 0 1px var(--clcm-navy); background:rgba(var(--clcm-navy-rgb),.04); }
.clcm-wrap .clcm-plan-opt.is-off { cursor:not-allowed; }
.clcm-wrap .clcm-plan-opt.is-off .clcm-plan-name, .clcm-wrap .clcm-plan-opt.is-off .clcm-plan-price { color:var(--clcm-text-muted, #5A6478); }
.clcm-wrap .clcm-plan-dot { grid-row:1; box-sizing:border-box; width:16px; height:16px; margin-top:2px; border-radius:50%;
  border:1.5px solid rgba(var(--clcm-navy-rgb),.38); }
.clcm-wrap .clcm-plan-opt.is-on .clcm-plan-dot { border:5px solid var(--clcm-navy); }
.clcm-wrap .clcm-plan-opt:has(input:checked) .clcm-plan-dot { border:5px solid var(--clcm-navy); }
.clcm-wrap .clcm-plan-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 10px; min-width:0; }
.clcm-wrap .clcm-plan-name { font-size:14px; font-weight:600; color:var(--clcm-text); }
.clcm-wrap .clcm-plan-price { font-size:14px; font-weight:600; color:var(--clcm-text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.clcm-wrap .clcm-plan-what, .clcm-wrap .clcm-plan-why { grid-column:2; font-size:13px; line-height:1.45; color:var(--clcm-text); }
.clcm-wrap .clcm-plan-why { font-weight:600; }
.clcm-wrap .clcm-plan-why a { color:var(--clcm-navy); text-decoration:underline; font-weight:600; }

/* ═══ THE STANDING 988 LINE (v2.336.0) ═══
 * Always on Messages and Journal, for every client. Small on purpose, and in normal flow on purpose: it sits above the
 * box the client types in, so it is never under a keyboard and the box, which grows downwards, cannot reach it. The link
 * is a 24px target on a desktop and 44px on a phone, without the text growing. */
.clcm-crisis-line { margin-top:10px; margin-bottom:0; font-size:13px; line-height:1.45; }
.clcm-journal-form .clcm-crisis-line { margin-top:0; }
.clcm-crisis-line a { display:inline-flex; align-items:center; min-height:24px; color:var(--clcm-text, #1A1A2E); font-weight:600;
  text-decoration:underline; text-underline-offset:2px; }
.clcm-crisis-line a:focus-visible { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:2px; }
@media (max-width:860px) { .clcm-crisis-line a { min-height:44px; } }

/* v2.339.0: the photo control in My Profile. The header's row is Home-only on a phone. */
.clcm-pf-photo { display:flex; align-items:center; gap:14px; }
.clcm-pf-photo-text { display:inline-flex; align-items:center; min-height:44px; cursor:pointer; font-weight:600; text-decoration:underline; text-underline-offset:2px; color:var(--clcm-text, #1A1A2E); }
.clcm-pf-photo .clcm-portal-avatar:focus-within { outline:2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset:2px; }

/* v2.349.0: a button centres its content in a stretched grid row, so a short session card floated mid-card. */
.clcm-rd-book .clcm-type-card { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; }

/* ── VIDEO GUIDES (v2.353.0) ─────────────────────────────────────────────────────────────────────────
   The training videos on Help and in the client portal: a grid of thumbnail cards, each a link that opens YouTube in a new
   tab. Every colour carries its fallback: this sheet is served to the coach shell AND the portal, and a bare var() with no
   fallback deletes the whole declaration on a host that lacks the token. The thumbnail is YouTube's 4:3 frame with its own
   letterbox bars, so it is shown 16:9 and cropped to the picture. The play mark is drawn here (the icon subset has no play). */
.clcm-guides { display: flex; flex-direction: column; gap: 16px; }
.clcm-guides-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.clcm-guide { display: flex; flex-direction: column; min-width: 0; background: var(--clcm-white, #FFFFFF);
  border: 1px solid var(--clcm-border, #DDD8CE); border-radius: 14px; overflow: hidden; }
.clcm-guide-link { display: flex; flex-direction: column; flex: 1 1 auto; color: inherit; text-decoration: none; }
.clcm-guide-link:focus-visible { outline: 2px solid var(--clcm-navy, #102A43); outline-offset: -2px; border-radius: 14px; }
.clcm-guide-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--clcm-navy, #102A43); overflow: hidden; }
.clcm-guide-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.clcm-guide-link:hover .clcm-guide-thumb img { transform: scale(1.03); }
.clcm-guide-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: rgba(var(--clcm-navy-rgb, 16, 42, 67), .78); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.clcm-guide-play::after { content: ''; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #FFFFFF; }
.clcm-guide-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.clcm-guide-title { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--clcm-navy, #102A43); overflow-wrap: break-word; }
.clcm-guide-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--clcm-text-muted, #5A6478); }
.clcm-guide-admin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 12px;
  border-top: 1px solid var(--clcm-border, #DDD8CE); }
.clcm-guide-who { font-size: 12.5px; color: var(--clcm-text-muted, #5A6478); }
.clcm-guide-btns { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.clcm-guide-up { display: inline-block; transform: rotate(180deg); }
.clcm-guides-form { padding: 18px 20px; }   /* .clcm-rd-card--padded does not reach a <form> (v2.353.1) */
.clcm-guides-form > .clcm-rd-sub { margin: 0; }
.clcm-guides-form [hidden] { display: none !important; }   /* .clcm-btn's display:inline-flex beat the hidden Cancel */
.clcm-guides-form h2.clcm-guides-h { font-size: 17px; margin: 0 0 4px; }
.clcm-guides-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 12px 0; }
.clcm-guides-fields .clcm-rd-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0; border: 0; }   /* no settings-row hairline under each field (v2.353.1) */
.clcm-guides-auds { display: flex; flex-wrap: wrap; gap: 8px 18px; border: 0; margin: 0 0 12px; padding: 0; }
.clcm-guides-auds legend { margin-bottom: 6px; }
.clcm-guides-aud { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.clcm-guides-waymark { display: flex; align-items: flex-start; margin: 0 0 12px; }
.clcm-guides-waymark input { margin-top: 3px; flex: none; }
.clcm-guides-err { margin: 0 0 12px; color: var(--clcm-danger, #B42318); font-weight: 600; }
.clcm-guides-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* A CAPTION INSIDE A NAVY POP-UP HEADER (v2.354.1, Jose 2026-11-03). .clcm-rd-sub is the muted grey made for white grounds, and
   every .clcm-modal-header is navy: "Groups share sessions, courses and a whiteboard." under New Group could hardly be read. The
   on-navy muted ink both host sheets define, with a white-at-78% floor. */
.clcm-modal-header .clcm-rd-sub { color: var(--clcm-on-navy-muted, rgba(255, 255, 255, .78)); }
/* "Watch how" (v2.353.2): a small pill under a screen's title that opens the video for that screen. */
.clcm-watch-row { margin: 8px 0 0; }
.clcm-portal-body > .clcm-watch-row { margin: 0 0 12px; }
.clcm-watch { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--clcm-border, #DDD8CE); background: var(--clcm-white, #FFFFFF); color: var(--clcm-navy, #102A43);
  font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; }
/* Only under a real pointer (Jose, 2026-11-04): a phone keeps :hover after a tap, which left a dark outline on the pill. */
@media (hover: hover) and (pointer: fine) { .clcm-watch:hover { border-color: var(--clcm-navy, #102A43); } }
/* WordPress core paints a:focus and a:active at (0,1,1) — blue text and a #2271b1 ring — so a TAP on this pill flashed
   WordPress blue on every coach screen (Jose, 2026-11-04, on the phone). Every state restated; the keyboard ring below stays. */
.clcm-watch:link, .clcm-watch:visited, .clcm-watch:focus, .clcm-watch:active { color: var(--clcm-navy, #102A43); box-shadow: none; }
.clcm-watch:focus-visible { outline: 2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset: 2px; }
.clcm-watch-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: rgba(var(--clcm-navy-rgb, 16, 42, 67), .1); font-size: 11.5px; }
.clcm-guides-screen { display: flex; flex-direction: column; gap: 4px; max-width: 420px; margin: 0 0 12px; padding: 0; border: 0; }
/* The check-in after a session (v2.354.0): a centred window over a scrim, the Progress tab's rows inside it. */
.clcm-ci-pop { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.clcm-ci-pop[hidden] { display: none; }
.clcm-ci-pop-scrim { position: absolute; inset: 0; background: rgba(var(--clcm-navy-rgb, 16, 42, 67), .45); }
.clcm-ci-pop-box { position: relative; width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box;
  background: var(--clcm-white, #FFFFFF); border-radius: 16px; padding: 20px 20px 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.clcm-ci-pop-h { font-size: 20px; line-height: 1.3; margin: 0 0 6px; color: var(--clcm-navy, #102A43); }
.clcm-ci-pop-form.clcm-growth-card { border: 0; padding: 0; margin: 0; box-shadow: none; background: none; }
.clcm-ci-pop-later { display: block; margin: 6px auto 0; min-height: 44px; padding: 0 16px; background: none; border: 0; cursor: pointer;
  color: var(--clcm-text-muted, #5A6478); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; }
html.clcm-ci-open { overflow: hidden; }
.clcm-ci-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .clcm-guide-thumb img { transition: none; } .clcm-guide-link:hover .clcm-guide-thumb img { transform: none; } }

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * THE PHONE BATCH (v2.351.0) — one scale, one rhythm
 *
 * Jose's PWA list of 2026-11-02, after the 35 screenshots and the 1,654-record sweep. Everything here is
 * PHONE ONLY (inside the 820px block, the width at which the rail becomes the tab bar); the desktop is untouched.
 * It sits at the END of the file on purpose: the file's older phone blocks sit earlier than the rules they
 * modify, and a rule of equal specificity loses to whatever comes later.
 *
 * THE SCALE (Jose, 2026-11-02): a page button is 44px, a row button 36px, and nothing a thumb must press is
 * under 32px. A tab pill is 40px and a Settings link 44px. Pill and icon-tile radii are the approved ones.
 * THE RHYTHM: 16px under a heading, 16px under a strip of pills, 14px inside a card, 12px above and below a
 * strip that stands in a card.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* ── TAB STRIPS: three places one can stand ───────────────────────────────────────────────
     On the page, in a card's header, and in a card's bar (Home's Clients and Inbox). Each keeps the pills'
     4px of air above and below, so a focus ring is not clipped by the strip's own scroll box, and 16px under
     it. On the page the strip runs 14px past the content on each side, which is the wrapper's own padding, so
     the first pill lines up with the heading and the row scrolls under the edge instead of being cut at the
     text column. In a bar the strip stays ONE row that scrolls: wrapping pushed the second line of pills
     under the first and the list under both. */
  body.clcm-coach-admin .clcm-wrap .clcm-content > .clcm-rd-tabs,
  body.clcm-coach-admin .clcm-wrap .clcm-content > .clcm-tab-bar {
    margin: 0 -14px 12px; padding: 4px 14px !important; scroll-padding-inline: 14px; }
  /* No hairline under ANY strip: the shell draws one under every .clcm-tab-bar, and under pills it reads as a stray rule. */
  body.clcm-coach-admin .clcm-wrap .clcm-tab-bar.clcm-rd-tabs { border-bottom: 0 !important; }
  .clcm-wrap .clcm-rd-card > .clcm-rd-tabs,
  .clcm-wrap .clcm-rd-card > .clcm-rd-tabs--page,
  .clcm-wrap .clcm-rd-card > .clcm-tab-bar.clcm-rd-tabs--page,
  body.clcm-coach-admin .clcm-wrap .clcm-rd-card > .clcm-tab-bar.clcm-rd-tabs--page {
    margin: 0; padding: 12px 14px 4px !important; scroll-padding-inline: 14px; }
  .clcm-wrap .clcm-rd-bar .clcm-rd-tabs {
    flex-wrap: nowrap; margin: 0 -14px; padding: 4px 14px !important; scroll-padding-inline: 14px; }
  .clcm-wrap .clcm-rd-bar .clcm-rd-tabs .clcm-rd-tab { flex: 0 0 auto; white-space: nowrap; }

  /* ONE GAP UNDER A HEADING. The shell gives .clcm-content 22px of its own (room under a tab rule, which a phone no
     longer draws) on top of the heading's 16px, so what followed a heading stood 38px away: a date button, a block
     of stat cards and a strip of pills each had a different distance from the same title. */
  body.clcm-coach-admin .clcm-wrap .clcm-rd-head + .clcm-content { padding-top: 0 !important; }

  /* A NAME THAT CANNOT BREAK pushes its cell past its neighbour (a long hyphenated name ran under the status
     pill beside it at 320px). The cell may now break anywhere, so the flex line can shrink it. */
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody td { overflow-wrap: anywhere; }

  /* TEXT BESIDE FIXED ITEMS gets a floor, and the items drop to a line of their own below it. A client's action item
     (checkbox, task, status pill, two icon buttons) squeezed its task into a 32px column at 320px in Spanish, one
     word to a line, with the pill laid over it. The basis is a WIDTH here: these rows never turn into a column. */
  .clcm-rd-lrow, .clcm-rd-rec--mid { flex-wrap: wrap; }
  .clcm-rd-lrow-main { flex: 1 1 140px; }
  .clcm-rd-lrow-acts { margin-left: auto; }

  /* HELP'S DETAILS TAKE THEIR OWN LINE. A sentence in the trailing slot was pushed out past the card and clipped
     (up to 674px, in every role that has the page); it reads left to right under the way it belongs to. */
  .clcm-wrap .clcm-help-table:not(.clcm-m-keep) tbody td.clcm-rd-muted:last-child {
    flex: 1 1 100%; max-width: 100%; margin-left: 0; order: 3; text-align: left; }

  /* A PAGE'S ACTION BUTTONS ARE ONE SET. A secondary one is also .clcm-btn-sm, and the capsule rule for small
     label buttons gave it a 999px radius beside a primary at 12px: one row, two shapes. Here they are all the
     mockup's page button, 44px tall with a 12px radius and a 15px label. */
  .clcm-wrap .clcm-page-header-actions .clcm-btn:not(.clcm-btn-icon) {
    min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; }

  /* The same button inside a form panel (Save, Enable, Send a test event): the page button, not a third shape. */
  .clcm-wrap .clcm-rd-panel .clcm-btn:not(.clcm-btn-sm):not(.clcm-btn-icon) {
    min-height: 44px; padding: 10px 16px; border-radius: 12px; font-size: 15px;
    white-space: normal; max-width: 100%; justify-content: center; text-align: center; line-height: 1.25; }
  /* A panel's closing row wraps its buttons rather than pushing the first one off the card: a Spanish label
     ("Guardar contacto de escalamiento") is wider than a 320px card. */
  .clcm-wrap .clcm-rd-panel-foot { flex-wrap: wrap; }
  /* The Library's row controls wrap inside their cell instead of running past the card. */
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tbody td.clcm-row-actions {
    display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }

  /* A LONG EMAIL OR NAME is broken rather than cut by the card: the Roles card's address ran 20px past it, and a
     group's lead pill (a long name and "Lead") 33px past the panel. A pill may wrap on a phone. */
  .clcm-wrap .clcm-rd-panel a[href^="mailto:"] { overflow-wrap: anywhere; }
  .clcm-wrap .clcm-rd-chips .clcm-rd-pill { max-width: 100%; height: auto; min-height: 22px; padding: 3px 10px;
    white-space: normal; overflow-wrap: anywhere; }

  /* THE STATS THAT ARE NOT HOME'S. Home's own spacing is scoped above; every other screen gets the page's
     16px under a block of stat cards, and none above (the strip or heading already left 16). */
  .clcm-wrap .clcm-rd-stats { margin: 0 0 16px; }

  /* ── A FILTERED ROW IS GONE ───────────────────────────────────────────────────────────────
     The Home pills set `hidden` on each row. At this width a row is display:flex or grid, and an author
     display beats the browser's [hidden], so the highlight moved and every row stayed. The same fix as
     the desktop table's, at the strength of the rules that turn a row into a list. */
  .clcm-wrap .clcm-rd-table tbody tr[hidden] { display: none !important; }
  /* Settings' search hides links the same way, and they are display:flex. */
  .clcm-wrap .clcm-settings-nav-item[hidden] { display: none; }

  /* ── BUTTONS: 44 for a page, 36 for a row, nothing under 32 ───────────────────────────── */
  .clcm-wrap .clcm-btn { min-height: 44px; }
  .clcm-wrap .clcm-btn-sm,
  .clcm-wrap .clcm-rd-table tbody td .clcm-btn,
  .clcm-wrap .clcm-rd-notice-act { min-height: 36px; }
  .clcm-wrap .clcm-btn-icon,
  .clcm-wrap .clcm-rd-iact { min-width: 36px; min-height: 36px; }
  /* The Library's row controls are an older component (22px, and Edit and Open are underlined because they
     are links). The same height as their neighbours and the Transfer box, no underline, the approved capsule. */
  .clcm-wrap .clcm-metric-act {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; line-height: 1.2;
    text-decoration: none; white-space: nowrap; }
  .clcm-wrap .clcm-metric-act--danger { min-width: 36px; padding: 0 9px; }
  .clcm-wrap .clcm-lib-table td.clcm-row-actions select.clcm-transfer-sel:not([multiple]):not(.clcm-unstyled) {
    min-height: 36px; box-sizing: border-box; }
  .clcm-wrap .clcm-settings-nav-item { min-height: 44px; }
  /* The magic-tag chips (22px) and the editor's toolbar buttons (27 and 28) are thumb targets too: none is under 32.
     The chips are row buttons, so 36; the toolbar is a dense strip of up to 25, so the 32 floor. */
  .clcm-tagbar button { min-height: 36px; }
  .clcm-wrap .clcm-editor-toolbar button { min-height: 32px; min-width: 32px; box-sizing: border-box; }

  /* ── A LINK IN A BLOCK OF TEXT wears the organization's colour, not WordPress's blue ──────────
     Text blocks only (Jose, 2026-11-02): never a tab, a pill, a button or the navigation, which have their
     own inks. Every link state is written out, because core's a:hover and a:active are (0,1,1). */
  .clcm-wrap .clcm-rd-notice-bd a:not(.clcm-btn):link, .clcm-wrap .clcm-rd-notice-bd a:not(.clcm-btn):visited,
  .clcm-wrap .clcm-rd-notice-bd a:not(.clcm-btn):hover, .clcm-wrap .clcm-rd-notice-bd a:not(.clcm-btn):active,
  .clcm-wrap .clcm-rd-notice-bd a:not(.clcm-btn):focus,
  .clcm-wrap .clcm-hint a:link, .clcm-wrap .clcm-hint a:visited, .clcm-wrap .clcm-hint a:hover,
  .clcm-wrap .clcm-hint a:active, .clcm-wrap .clcm-hint a:focus,
  .clcm-wrap td.clcm-rd-muted a:link, .clcm-wrap td.clcm-rd-muted a:visited, .clcm-wrap td.clcm-rd-muted a:hover,
  .clcm-wrap td.clcm-rd-muted a:active, .clcm-wrap td.clcm-rd-muted a:focus {
    color: var(--clcm-navy, #102A43); text-decoration: underline; text-underline-offset: 2px; }

  /* ── THE CSV MENU opens under a button at the LEFT of the row, so it opens to the right of it. ── */
  .clcm-wrap .clcm-rd-menu { left: 0; right: auto; max-width: calc(100vw - 48px); }
  .clcm-wrap .clcm-rd-head:has(.clcm-rd-menu-wrap) { position: relative; z-index: 20; }

  /* ── LONG WORDS AND NARROW COLUMNS ────────────────────────────────────────────────────────── */
  .clcm-wrap .clcm-rd-head h1, .clcm-wrap .clcm-profile-info h1, .clcm-portal .clcm-portal-name {
    min-width: 0; overflow-wrap: anywhere; }
  .clcm-rd-range-btn { max-width: 100%; box-sizing: border-box; }
  .clcm-rd-range-btn > span { white-space: normal; }
  /* A notice's chip drops to its own line when the text column would be squeezed to a few letters. */
  .clcm-rd-notice { flex-wrap: wrap; }
  .clcm-rd-notice-bd { flex: 1 1 150px; }
  .clcm-wrap .clcm-rd-stats > .clcm-rd-stat .clcm-rd-stat-n { overflow-wrap: anywhere; }
  /* The money figure on Business, Metrics and Platform is 28px: at 320 it touched both edges of its card. It is
     28px from 390 up (7.2vw is 28.08 there) and shrinks below. */
  .clcm-wrap .clcm-rd-stat > .clcm-stat-value { font-size: clamp(20px, 7.2vw, 28px); overflow-wrap: anywhere; }
  /* The AI documents' two cells carried an inline min-width for the desktop table; here they wrap. */
  .clcm-wrap #clcm-kb-list td { min-width: 0 !important; }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * THE PHONE BATCH, PART TWO (v2.351.0) — the rows that each had a layout of their own
 *
 * Everything below is PHONE ONLY (inside the 820px block) except the two lines that keep the "…" machinery out of the
 * desktop's way: the wrapper and the menu are display:contents there and the button is hidden, so a row's controls stay
 * in the row exactly as they were. This part is the end of the file on purpose, for the same cascade reason as the block above.
 *
 * THE "…" MENU (public/js/clcm-more.js; markup from clcm_more_menu()). A row keeps its main action in sight and the rest behind
 * one button. Open, it is a sheet parked on <body> by the script, above the tab bar and the page, with a dimmed page behind it;
 * so none of these rules may depend on an ancestor (the sheet is no longer inside .clcm-wrap while it is open).
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
.clcm-more-wrap, .clcm-more { display: contents; }
.clcm-more-btn, .clcm-more-t, .clcm-more-del, .clcm-more-scrim, .clcm-more-lbl { display: none; }
/* The role pills' wrapper (Organization > Roles) exists for the phone, which stacks the name and the pills; above 820px it makes no box. */
.clcm-role-pills { display: contents; }
/* A figure that is not there yet: the dash is the desktop's and the words are the phone's (both are printed; part three shows one of them). */
.clcm-m-ph { display: none; }
/* The client page's own Pause/Resume metrics button is for the phone only: the roster still carries the button above 820px. */
.clcm-wrap .clcm-profile-actions .clcm-phone-only { display: none; }

@media (max-width: 820px) {
  .clcm-more-wrap { display: inline-flex; vertical-align: middle; }
  .clcm-more { display: none; }
  .clcm-more-btn {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    width: 36px; height: 36px; min-width: 36px; padding: 0; margin: 0; border-radius: 999px;
    border: 1px solid var(--clcm-border, #DDD8CE); background: var(--clcm-white, #FFFFFF);
    color: var(--clcm-navy, #102A43); font-size: 18px; line-height: 1; cursor: pointer; }
  .clcm-more-btn[aria-expanded="true"] { background: var(--clcm-navy, #102A43); border-color: var(--clcm-navy, #102A43); color: var(--clcm-on-navy-strong, #FFFFFF); }
  .clcm-more-btn:focus-visible { outline: 2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset: 2px; }

  html.clcm-more-on .clcm-more-scrim {
    display: block; position: fixed; inset: 0; z-index: 100010; background: rgba(var(--clcm-navy-rgb, 16, 42, 67), .42); }
  .clcm-more.is-open {
    display: flex; flex-direction: column; gap: 2px; box-sizing: border-box;
    position: fixed; z-index: 100011; left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-height: min(72vh, 520px); overflow-y: auto;
    padding: 6px 8px 8px; border-radius: 18px; background: var(--clcm-white, #FFFFFF);
    box-shadow: 0 14px 44px rgba(var(--clcm-navy-rgb, 16, 42, 67), .32);
    font-family: var(--clcm-font-sans, 'Urbanist', system-ui, sans-serif); font-size: 15px; color: var(--clcm-navy, #102A43); }
  .clcm-more.is-open .clcm-more-t {
    display: block; margin: 0; padding: 12px 12px 10px; font-size: 13px; font-weight: 700; line-height: 1.3;
    color: var(--clcm-text-muted, #4C5566); overflow-wrap: anywhere;
    border-bottom: 1px solid rgba(var(--clcm-navy-rgb, 16, 42, 67), .08); margin-bottom: 4px; }
  /* Every control in the sheet is one row: the same height, the same left edge, whatever it was in the table. */
  .clcm-more.is-open > button, .clcm-more.is-open > a {
    display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 48px; margin: 0;
    padding: 0 12px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; text-align: left;
    font: 600 15px/1.25 var(--clcm-font-sans, 'Urbanist', system-ui, sans-serif); text-decoration: none; cursor: pointer;
    color: var(--clcm-navy, #102A43); }
  .clcm-more.is-open > button:hover, .clcm-more.is-open > a:hover { background: rgba(var(--clcm-navy-rgb, 16, 42, 67), .06); }
  .clcm-more.is-open > button:focus-visible, .clcm-more.is-open > a:focus-visible, .clcm-more.is-open > select:focus-visible {
    outline: 2px solid var(--clcm-gold-text, var(--clcm-gold, #C8A45D)); outline-offset: -2px; }
  .clcm-more.is-open > button i, .clcm-more.is-open > a i { font-size: 18px; width: 20px; text-align: center; flex: none; }
  .clcm-more.is-open > .clcm-more-del { display: flex; color: #9A3B2B; }
  .clcm-more.is-open > .clcm-more-del:hover { background: #FBEFEC; }
  /* A select is one row too; the inline size it carries for the table is for the table. */
  .clcm-more.is-open > select {
    display: block; box-sizing: border-box; width: 100% !important; max-width: none !important; min-height: 48px; margin: 0;
    padding: 0 38px 0 12px !important; border: 1px solid var(--clcm-border, #DDD8CE); border-radius: 12px; background-color: var(--clcm-white, #FFFFFF);
    font: 600 15px/1.25 var(--clcm-font-sans, 'Urbanist', system-ui, sans-serif) !important; color: var(--clcm-navy, #102A43); }

  /* ── THE LIBRARY ROW: title, then what it is and when, and at the right the one main action and the "…" ── */
  .clcm-wrap .clcm-lib-table td.clcm-row-actions .clcm-metric-act--danger { display: none; }
  /* A grid, so every row has the same two lines whatever its title: the name with the main action and the "…" at its right, and under
     it what the item is and when it changed. (Flex wrapping put the "…" under Edit whenever the type and date were wide.) */
  .clcm-wrap .clcm-lib-table:not(.clcm-m-keep) tbody tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 0; row-gap: 8px; align-items: center; }
  .clcm-wrap .clcm-lib-table:not(.clcm-m-keep) tbody tr > td { order: 0; flex: none; margin: 0; max-width: none; min-width: 0; width: auto; text-align: left; }
  .clcm-wrap .clcm-lib-table:not(.clcm-m-keep) tbody tr > td:first-child { grid-column: 1 / 3; grid-row: 1; order: -1; }
  .clcm-wrap .clcm-lib-table:not(.clcm-m-keep) tbody tr > td.clcm-row-actions { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 10px; }
  .clcm-wrap .clcm-lib-table:not(.clcm-m-keep) tbody tr > td.clcm-row-actions.clcm-row-more { grid-column: 4; margin-left: 6px; }
  .clcm-wrap .clcm-lib-table:not(.clcm-m-keep) tbody tr > td:not(:first-child):not(.clcm-row-actions) { grid-row: 2; grid-column: auto; }
  .clcm-wrap .clcm-lib-table:not(.clcm-m-keep) tbody tr > td:not(:first-child):not(.clcm-row-actions) + td:not(.clcm-row-actions) { grid-column: 2 / -1; margin-left: 10px; }

  /* ── L3: WORDS BESIDE NUMBERS ─────────────────────────────────────────────────────────────
     A phone hides the table's headings, so "2 1 1 0" meant nothing. Each figure now carries its own heading's words
     (data-label, printed by the partial from the same string the heading uses, so Spanish comes with it): a small label
     over the figure, two to a line, the row's name over both. The table is marked .clcm-m-lbl. */
  .clcm-wrap .clcm-rd-table.clcm-m-lbl:not(.clcm-m-keep) tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 10px; align-items: start; }
  .clcm-wrap .clcm-rd-table.clcm-m-lbl:not(.clcm-m-keep) tbody tr > td {
    order: 0; flex: none; margin: 0; max-width: none; min-width: 0; text-align: left; justify-self: stretch; }
  .clcm-wrap .clcm-rd-table.clcm-m-lbl:not(.clcm-m-keep) tbody tr > td:first-child { grid-column: 1 / -1; order: -1; }
  .clcm-wrap .clcm-rd-table.clcm-m-lbl:not(.clcm-m-keep) tbody tr > td:not(.col-actions) { display: block; }
  .clcm-wrap .clcm-rd-table.clcm-m-lbl:not(.clcm-m-keep) tbody tr > td.col-actions { grid-column: 1 / -1; justify-self: end; width: auto; }
  .clcm-wrap .clcm-rd-table tbody td[data-label]:not(:first-child)::before {
    content: attr(data-label); display: block; margin: 0 0 2px; font-size: 12px; font-weight: 500; line-height: 1.3;
    color: var(--clcm-text-muted, #4C5566); overflow-wrap: anywhere; }
  .clcm-wrap .clcm-rd-table.clcm-m-lbl:not(.clcm-m-keep) tbody td[data-label]:not(:first-child) {
    font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--clcm-navy, #102A43); }
  .clcm-wrap .clcm-rd-table.clcm-m-lbl:not(.clcm-m-keep) tbody td.clcm-rd-muted[data-label]:not(:first-child) { font-weight: 600; }
  .clcm-wrap .clcm-rd-table.clcm-m-lbl:not(.clcm-m-keep) tbody td[data-label] .clcm-rd-meta { font-size: 12px; font-weight: 500; margin-top: 2px; overflow-wrap: anywhere; }

  /* ── L5: PLATFORM ORGANIZATIONS ─ one row, one shape whatever the content ──────────────────────
     Name and revenue; what state it is in; the counts and the plan, labelled; who owns it; then Manage and a "…" that holds the
     rest. The nine cells have a fixed order, so each is placed by number: a grid, because flex wrapping drew a different row for
     every name. */
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: 16px; row-gap: 12px; align-items: start; padding: 16px 14px; }
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody tr > td { order: 0; flex: none; margin: 0; max-width: none; min-width: 0; text-align: left; width: auto; justify-self: stretch; }
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody tr > td:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody tr > td:nth-child(8) { grid-area: 1 / 3 / 2 / 4; text-align: right; white-space: nowrap; }
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody tr > td:nth-child(5) { grid-area: 2 / 1 / 3 / 2; }
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody tr > td:nth-child(4) { grid-area: 2 / 2 / 3 / 4; }
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody tr > td:nth-child(6) { grid-area: 3 / 1 / 4 / 2; }
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody tr > td:nth-child(7) { grid-area: 3 / 2 / 4 / 3; }
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody tr > td:nth-child(3) { grid-area: 4 / 1 / 5 / 4; }
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody tr > td:nth-child(2) { grid-area: 5 / 1 / 6 / 4; }
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody tr > td:nth-child(9) { grid-area: 6 / 1 / 7 / 4; justify-self: start; }
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody td[data-label]:nth-child(4)::before,
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody td[data-label]:nth-child(8)::before { content: none; display: none; }
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody td:nth-child(2),
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody td:nth-child(3),
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody td:nth-child(6),
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody td:nth-child(7) { font-size: 15px; font-weight: 700; color: var(--clcm-navy, #102A43); line-height: 1.3; }
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody td:nth-child(3) { font-size: 14px; font-weight: 600; }
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody td:nth-child(2) .clcm-rd-meta { margin-top: 2px; font-weight: 500; overflow-wrap: anywhere; }
  .clcm-wrap .clcm-plat-orgs:not(.clcm-m-keep) tbody td:nth-child(8) { font-size: 16px; font-weight: 700; color: var(--clcm-navy, #102A43); }
  .clcm-wrap .clcm-plat-orgs tbody td:nth-child(1) .clcm-rd-idt { min-width: 0; }
  .clcm-wrap .clcm-plat-orgs tbody td:nth-child(1) .clcm-rd-title { overflow-wrap: anywhere; }
  .clcm-wrap .clcm-plat-orgs tbody td .row-actions { justify-content: flex-start; flex-wrap: nowrap; gap: 8px; align-items: center; }
  .clcm-wrap .clcm-plat-orgs tbody td .row-actions > .clcm-btn { padding: 0 16px; }
  .clcm-more.is-open .clcm-more-lbl { display: inline; }
  .clcm-more.is-open > .clcm-rd-del { color: #9A3B2B; }

  /* ── L4: APPOINTMENT TYPES ─ the dot and the name, then time, price and payment, then status and actions ──
     The dot was the first cell, so it took the name's place and the name fell among the details. The dot now stands in the left
     gutter and the whole row hangs off one left edge. The meeting service and the payment word show only when there is one.
     A flex line, with an empty full-width item (tr::after) standing between the details and the status so that line always breaks there,
     and the details wrap among themselves when a language needs more room. */
  .clcm-wrap .clcm-appt-types:not(.clcm-m-keep) tbody tr {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; row-gap: 6px; padding: 14px 14px 14px 38px; }
  .clcm-wrap .clcm-appt-types:not(.clcm-m-keep) tbody tr::after { content: ""; order: 3; flex: 0 0 100%; height: 0; }
  .clcm-wrap .clcm-appt-types:not(.clcm-m-keep) tbody tr > td { flex: 0 0 auto; margin: 0; max-width: 100%; min-width: 0; text-align: left; width: auto; }
  .clcm-wrap .clcm-appt-types:not(.clcm-m-keep) tbody tr > td:nth-child(1) { position: absolute; left: 14px; top: 17px; width: 16px; }
  .clcm-wrap .clcm-appt-types:not(.clcm-m-keep) tbody tr > td:nth-child(2) { order: 1; flex: 1 1 100%; margin-bottom: 2px; }
  .clcm-wrap .clcm-appt-types:not(.clcm-m-keep) tbody tr > td:nth-child(n+3):nth-child(-n+6) { order: 2; margin-right: 14px; font-size: 13px; line-height: 1.4; color: var(--clcm-text-muted, #4C5566); }
  .clcm-wrap .clcm-appt-types:not(.clcm-m-keep) tbody tr > td:nth-child(4) { font-weight: 700; color: var(--clcm-navy, #102A43); }
  .clcm-wrap .clcm-appt-types:not(.clcm-m-keep) tbody tr > td:nth-child(7) { order: 4; }
  .clcm-wrap .clcm-appt-types:not(.clcm-m-keep) tbody tr > td:nth-child(8) { order: 5; margin-left: auto; }
  .clcm-wrap .clcm-appt-types tbody td.clcm-m-none { display: none; }
  .clcm-wrap .clcm-appt-types tbody td:nth-child(2) .clcm-rd-subline { margin-top: 3px; font-size: 13px; overflow-wrap: anywhere; }
  .clcm-wrap .clcm-appt-types tbody td:nth-child(8) .row-actions { flex-wrap: nowrap; justify-content: flex-end; gap: 2px; }
  .clcm-wrap .clcm-appt-types tbody td:nth-child(8) .clcm-btn:not(.clcm-btn-icon) { padding: 0 10px; white-space: nowrap; }

  /* ── L7: DATA LAB ─ the worksheet first; who did it and when, beneath ─────────────────────────────
     Finished worksheets: three cells (client, worksheet, completed). The worksheet is what the row is about, so it leads; the client
     and the date share the quiet line under it. The name "Data Lab" stays. */
  .clcm-wrap .clcm-rd-table.clcm-datalab:not(.clcm-m-keep) tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; padding: 14px; }
  .clcm-wrap .clcm-rd-table.clcm-datalab:not(.clcm-m-keep) tbody tr > td { margin: 0; max-width: none; text-align: left; width: auto; }
  .clcm-wrap .clcm-rd-table.clcm-datalab:not(.clcm-m-keep) tbody tr > td:nth-child(2) {
    order: 1; flex: 1 1 100%; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--clcm-navy, #102A43); overflow-wrap: anywhere; }
  .clcm-wrap .clcm-rd-table.clcm-datalab:not(.clcm-m-keep) tbody tr > td:nth-child(1) {
    order: 2; flex: 0 1 auto; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--clcm-text-muted, #4C5566); overflow-wrap: anywhere; }
  .clcm-wrap .clcm-rd-table.clcm-datalab:not(.clcm-m-keep) tbody tr > td:nth-child(3) {
    order: 3; flex: 0 1 auto; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--clcm-text-muted, #4C5566); }

  /* ── R1: THE ROLES CARD ─ the name beside the picture, ONE line of pills, then the lines of detail ────────
     The card's layout is inline (it was written for the desktop), so the phone's overrides are !important by necessity. The text
     column and the name row make no box of their own here, so the picture, the name, the pills and each line of detail are all
     parts of one grid: the pills and the email get the card's whole width (an address broke in the middle of a word beside the picture). */
  .clcm-wrap .clcm-role-card { display: grid !important; grid-template-columns: 48px minmax(0, 1fr); gap: 10px 14px !important; align-items: center; }
  .clcm-wrap .clcm-role-card > .clcm-avatar { grid-column: 1; grid-row: 1; width: 48px !important; height: 48px !important; font-size: 18px !important; }
  .clcm-wrap .clcm-role-main, .clcm-wrap .clcm-role-head { display: contents !important; }
  .clcm-wrap .clcm-role-name { grid-column: 2; grid-row: 1; display: block; line-height: 1.25; overflow-wrap: anywhere; }
  .clcm-wrap .clcm-role-main > :not(.clcm-role-head) { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; }
  .clcm-wrap .clcm-role-pills { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
  .clcm-wrap .clcm-role-side {
    grid-column: 1 / -1; min-width: 0 !important; margin-left: 0 !important; text-align: left !important;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 12px; align-items: end;
    padding-top: 12px; border-top: 1px solid rgba(var(--clcm-navy-rgb, 16, 42, 67), .08); }
  .clcm-wrap .clcm-role-count { text-align: right; }
  .clcm-wrap .clcm-role-count > div:first-child { margin-top: 0 !important; }
  .clcm-wrap .clcm-role-side > div:not(.clcm-role-login):not(.clcm-role-count) { grid-column: 1 / -1; justify-content: flex-start !important; margin-top: 0 !important; }

  /* A record whose title and state pills sit beside icon buttons (a client's worksheets): the buttons drop below the text rather than
     running past the card (a long title with a dated pill pushed the second icon 14px out at 320px). */
  .clcm-rd-rec-head { flex-wrap: wrap; row-gap: 6px; }
  .clcm-rd-rec-head > .clcm-rd-rec-top { flex: 1 1 140px; min-width: 0; }
  .clcm-rd-rec-head > .clcm-rd-lrow-acts { margin-left: auto; }

  /* ── R2 AND R3: THE PAIRING SHEET ─ the sheet is outside .clcm-wrap, so nothing here is scoped by it ───────
     The search takes the whole line and the four markers run left to right under it, smaller than the choices below. Each client is
     the name on top and the four choices wrapped beneath it, two by two, so a name can never slide away from its choices. */
  .clcm-pair-findrow { flex-wrap: wrap !important; gap: 10px !important; }
  .clcm-pair-findrow > .clcm-search-wrap { flex: 1 1 100% !important; min-width: 0 !important; max-width: none !important; width: 100%; }
  #clcm-pair-legend { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px 3px; margin: 0 -6px !important; }
  #clcm-pair-legend .clcm-rd-pill { height: auto; min-height: 20px; padding: 2px 4px; font-size: 9.5px; white-space: nowrap; gap: 3px; letter-spacing: 0; }
  /* min-width:0 throughout: the older phone rule gives this table's tbody 560px and each cell 180px (a scroller), and the sheet is outside .clcm-wrap, which is what neutralises that elsewhere. */
  #clcm-pair-body .clcm-pair-table, #clcm-pair-body .clcm-pair-table tbody { display: block; width: 100%; min-width: 0; }
  #clcm-pair-body .clcm-pair-table tr.clcm-rd-row { display: block; padding: 14px 20px; border-top: 1px solid rgba(0, 0, 0, .07); }
  #clcm-pair-body .clcm-pair-table tr.clcm-rd-row:first-child { border-top: 0; }
  #clcm-pair-body .clcm-pair-table tr.clcm-rd-row > td { display: block; padding: 0; border: 0; width: auto; min-width: 0; }
  #clcm-pair-body .clcm-pair-table tr.clcm-rd-row > td.clcm-pair-levels {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px;
    text-align: left !important; white-space: normal !important; }
  #clcm-pair-body .clcm-pair-table td.clcm-pair-levels > .clcm-pair-lock { grid-column: 1 / -1; justify-self: start; }
  #clcm-pair-body .clcm-pair-table .clcm-rd-ident { min-width: 0; max-width: 100%; }
  #clcm-pair-body .clcm-pair-table .clcm-rd-ident > span:last-child { overflow-wrap: anywhere; }
  #clcm-pair-body .clcm-pair-table td.clcm-pair-levels .clcm-pair-chip {
    margin: 0; justify-content: center; box-sizing: border-box; min-height: 36px; height: auto; padding: 6px 10px; font-size: 13px; white-space: normal; text-align: center; }

  /* ── L9: CLIENT METRICS ───────────────────────────────────────────────────────────────────────────
     The roster stays a real table (its columns are the meaning) and scrolls inside its own box. The Pause column goes: it sat past the
     edge of that box with nothing to say it was there, and the client's own page now carries Pause and Resume (see the profile). */
  .clcm-wrap .clcm-metrics-roster .col-actions { display: none; }
  .clcm-wrap .clcm-metrics-roster td .clcm-rd-muted { white-space: nowrap; }
  .clcm-wrap .clcm-profile-actions .clcm-phone-only { display: inline-flex; }

  /* ── THE CLIENT'S RECORD ─ the header a coach opens a hundred times a day ──────────────────────────────
     Before: a 76px avatar beside a 30px name that broke in the middle of a word, the contact line and the status gone (a rule that
     hides a page's subtitle on a phone also caught this block, which wears the same class and holds the email, phone, status, plan and
     the Stop-plan button), and six buttons of four widths. Now: the avatar and the name on one line, what the coach needs to know under
     them as a quiet list, and the actions as one grid, the main one across the top. */
  .clcm-wrap .clcm-rd-head > div:has(> .clcm-profile-avatar) {
    display: grid !important; grid-template-columns: 56px minmax(0, 1fr); gap: 10px 14px !important; align-items: center; }
  .clcm-wrap .clcm-profile-avatar { width: 56px; height: 56px; border-width: 2px; font-size: 21px; }
  .clcm-wrap .clcm-profile-info { display: contents; }
  .clcm-wrap .clcm-profile-info h1 { grid-column: 2; font-size: 24px; line-height: 1.15; margin: 0; overflow-wrap: break-word; word-break: normal; hyphens: auto; }
  .clcm-wrap .clcm-profile-info .clcm-profile-meta {
    display: flex !important; grid-column: 1 / -1; flex-direction: column; flex-wrap: nowrap; gap: 8px !important; max-width: none !important; margin: 4px 0 0; }
  .clcm-wrap .clcm-profile-meta-item { align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
  .clcm-wrap .clcm-profile-meta-item > i { flex: none; margin-top: 2px; }
  .clcm-wrap .clcm-profile-meta > .clcm-btn { align-self: flex-start; }
  .clcm-wrap .clcm-profile-actions {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; justify-content: stretch !important; width: 100%; margin: 14px 0 0 !important; }
  .clcm-wrap .clcm-profile-actions .clcm-btn {
    width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.2; white-space: normal; justify-content: center; text-align: center; box-sizing: border-box; }
  .clcm-wrap .clcm-profile-actions .clcm-btn-primary { grid-column: 1 / -1; order: -1; }
  .clcm-wrap .clcm-profile-actions .clcm-phone-only { grid-column: 1 / -1; }

  /* ── A LIST ROW'S EMAIL ─ one line, cut with an ellipsis rather than broken in the middle of the address ──── */
  .clcm-wrap td.clcm-m-id .clcm-rd-idt { min-width: 0; }
  .clcm-wrap td.clcm-m-id .clcm-rd-idt-sub, .clcm-wrap td.clcm-m-id .clcm-rd-idt-sub a {
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }

  /* ── THE CLIENT'S OWN SCREENS: nothing a thumb must press under 32px ───────────────────────────────
     The portal's small buttons were 24px (Reschedule, Cancel), its read and tab buttons 29 to 31, its checkbox 22, and its save buttons 33.
     The same scale as the coach's side: 44 for a form's own button, 36 for a row's, 32 for a checkbox. */
  .clcm-portal .clcm-portal-mini-btn, .clcm-portal .clcm-item-read, .clcm-portal a.clcm-day-btn, .clcm-portal button.clcm-day-btn {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 36px; }
  .clcm-portal .clcm-rd-acts .clcm-action-check { min-width: 32px; min-height: 32px; }
  .clcm-portal .clcm-pmetric-btn, .clcm-portal button.clcm-btn-book, .clcm-portal .clcm-ws-draft-btn {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; }
}
  /* ── THE HEADER BAR ON A SMALL PHONE (320 to 360px) ───────────────────────────────────────────────
   Five controls and the screen's name share one row, and the name was what was left over ("Repo…"). The language that is already in
   use is the one to drop: the other one is the link, and it still says which language it switches to. */
@media (max-width: 360px) {
  .clcm-cp-lang > span[aria-hidden="true"], .clcm-cp-lang a.is-on { display: none; }
}

/* ── A LIST ROW ON A SMALL PHONE (360px and under) ─────────────────────────────────────────────────────
   The status pill sat beside the name and left it about 100px, so a long name broke in the middle of a word ("Maximilian / a"). On a
   small phone the pill goes under the name, where the actions are, and the name takes the line. Only lists that keep row actions and name
   one trailing value; a list with two (invoices: an amount and a state) keeps its own arrangement. */
@media (max-width: 360px) {
  .clcm-wrap .clcm-rd-table.clcm-m-row:not(.clcm-m-keep):not(.clcm-m-trail2) tbody tr:has(td.clcm-m-act):not(:has(td.clcm-m-sub)) > td.clcm-m-id,
  .clcm-wrap .clcm-rd-table.clcm-m-row:not(.clcm-m-keep):not(.clcm-m-trail2) tbody tr:has(td.clcm-m-act):not(:has(td.clcm-m-sub)) > td:first-child:not(.col-check) { grid-column: 2 / -1; }
  .clcm-wrap .clcm-rd-table.clcm-m-row:not(.clcm-m-keep):not(.clcm-m-trail2) tbody tr:has(td.clcm-m-act):not(:has(td.clcm-m-sub)) > td.clcm-m-trail {
    grid-column: 2; grid-row: 2; justify-self: start; align-self: center; text-align: left; }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * THE PHONE BATCH, PART THREE (v2.351.0) — what the first look at the finished screens found
 *
 * Everything here is PHONE ONLY (inside the 820px and 360px blocks) except the one line that keeps the phone's words out of the desktop
 * (.clcm-m-ph is display:none above 820px). It is the end of the file on purpose, for the same cascade reason as the two blocks above.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* ── THE CLIENT'S ACTIONS: the status control has a row of its own ─────────────────────────
     "Portal Active · Resend invite" is a dot, a status and a link in one control, and in half of the grid it measured 140px inside
     a 131px button. It spans the row, last, and so does Promote to Coach (a rare, wide label). Pause and Resume are an ordinary half now. */
  .clcm-wrap .clcm-profile-actions .clcm-profile-portal,
  .clcm-wrap .clcm-profile-actions .clcm-profile-promote { grid-column: 1 / -1; order: 5; }
  .clcm-wrap .clcm-profile-actions .clcm-phone-only { grid-column: auto; }
  .clcm-wrap .clcm-profile-actions .clcm-btn:only-child { grid-column: 1 / -1; }

  /* ── A TEXT VALUE IS NOT A FIGURE ──────────────────────────────────────────────────────────
     The plan's name ("Waymark Coaching Organization") and "quedan 14 días" sat in the 24px serif the figures use and broke in the middle
     of a word. They are text-shaped here, as they are above 820px: the sans face, 16px, and a word breaks only when it cannot fit. */
  .clcm-wrap .clcm-rd-stats > .clcm-rd-stat .clcm-rd-stat-n.clcm-rd-stat-n--text {
    font-family: var(--clcm-font-sans, 'Urbanist', system-ui, sans-serif); font-size: 16px; line-height: 1.3; font-weight: 600;
    overflow-wrap: break-word; word-break: normal; hyphens: auto; }

  /* ── A FIGURE THAT IS NOT THERE YET says so, in words ──────────────────────────────────────── */
  .clcm-m-dsk { display: none; }
  .clcm-m-ph { display: inline; color: var(--clcm-text-muted, #4C5566); font-family: var(--clcm-font-sans, 'Urbanist', system-ui, sans-serif); font-weight: 600; white-space: nowrap; }
  .clcm-wrap .clcm-rd-stat-n .clcm-m-ph, .clcm-wrap .clcm-stat-value .clcm-m-ph { font-size: 18px; line-height: 1.2; }
  .clcm-wrap .clcm-hint .clcm-m-ph, .clcm-wrap .clcm-stat-hint .clcm-m-ph { font-weight: 400; font-size: inherit; white-space: normal; }
  .clcm-wrap td .clcm-m-ph { font-size: 13px; font-weight: 400; }
  /* A cell that holds nothing but a dash is not drawn at all: it had no words to say. */
  .clcm-wrap .clcm-rd-table tbody td.clcm-m-dash,
  .clcm-wrap .clcm-rd-table tbody td:has(> .clcm-m-dash:only-child),
  .clcm-wrap .clcm-rd-table.clcm-m-row:not(.clcm-m-keep) tbody td.clcm-m-act:has(> .clcm-m-dash:only-child) { display: none !important; }

  /* ── ONE GAP UNDER A STRIP OF PILLS: 16px from the pill to what follows ─────────────────────
     The strips that are children of the wrapper itself (Appointment Config, the client's tabs, Help, Organization, Business) were not
     reached by the rule for a strip on the page: their pills stood flush against the top of the strip, and the shell's 22px above the
     content stacked on the strip's own 16px, so what followed stood 38px away. The pill's 4px of air plus 12px of margin is 16. */
  body.clcm-coach-admin .clcm-wrap > .clcm-rd-tabs,
  body.clcm-coach-admin .clcm-wrap > .clcm-tab-bar.clcm-rd-tabs {
    margin: 0 -14px 12px; padding: 4px 14px !important; scroll-padding-inline: 14px; }
  body.clcm-coach-admin .clcm-wrap > .clcm-rd-tabs + .clcm-content,
  body.clcm-coach-admin .clcm-wrap > .clcm-tab-bar + .clcm-content { padding-top: 0 !important; }
  /* A second strip under the first (Organization's Active / Inactive / Deleted) is 12px from it, pill to pill, not 16 or 24:
     4px of air under the first, 12px of margin, 4px of air over the second, less the 8px taken back here. */
  body.clcm-coach-admin .clcm-wrap > .clcm-rd-tabs + .clcm-rd-tabs,
  body.clcm-coach-admin .clcm-wrap > .clcm-tab-bar + .clcm-tab-bar,
  body.clcm-coach-admin .clcm-wrap > .clcm-tab-bar + .clcm-rd-tabs,
  body.clcm-coach-admin .clcm-wrap > .clcm-tab-bar + .clcm-content > .clcm-rd-tabs:first-child,
  body.clcm-coach-admin .clcm-wrap > .clcm-rd-tabs + .clcm-content > .clcm-rd-tabs:first-child,
  body.clcm-coach-admin .clcm-wrap > .clcm-tab-bar + .clcm-content > .clcm-tab-bar:first-child { margin-top: -8px; }
  /* …and a strip in a panel's body (the client's Outstanding / History) is inset like the card's, not flush on its border. */
  .clcm-wrap .clcm-rd-panel-body > .clcm-rd-tabs,
  .clcm-wrap .clcm-rd-panel-body > .clcm-tab-bar { margin: 0; padding: 12px 14px 4px !important; scroll-padding-inline: 14px; }

  /* ── A TABLE'S OWN CLASS IS NOT THE ROW'S ─────────────────────────────────────────────────
     .clcm-m-row was written for a row link, and it also matched the TABLES that opt in to the list layout: each table carried 13px 14px
     of its own on top of its rows', so a row's content started 39px from the card's edge while every other list's started at 15. */
  .clcm-wrap table.clcm-rd-table.clcm-m-row { padding: 0; min-height: 0; border-top: 0; }

  /* ── APPOINTMENTS: who and what state, when and what kind, then what can be done ─────────────
     Line 1 the client with the state at the right; line 2 the date, the time, the kind and the length, running on; line 3 the
     meeting and the controls (Accept and Decline, or the "…" that holds the rest). A flex line with an empty full-width item between
     the lines, as Appointment Types is: the gaps are margins, so every row has the same ones. */
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-appt-list:not(.clcm-m-keep) tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 0; padding: 14px; min-height: 0; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-appt-list:not(.clcm-m-keep) tbody tr::after { content: ""; order: 3; flex: 0 0 100%; height: 0; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-appt-list:not(.clcm-m-keep) tbody tr::before { content: ""; order: 5; flex: 0 0 100%; height: 0; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-appt-list:not(.clcm-m-keep) tbody tr > td { margin: 0; min-width: 0; max-width: 100%; text-align: left; width: auto; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-appt-list:not(.clcm-m-keep) tbody tr > td:nth-child(2) {
    order: 1; flex: 1 1 0; display: block; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--clcm-navy, #102A43);
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
  .clcm-wrap .clcm-appt-list tbody td:nth-child(2) .clcm-rd-rowlink { font-size: 15px; font-weight: 700; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-appt-list:not(.clcm-m-keep) tbody tr > td:nth-child(5) {
    order: 2; flex: 0 1 auto; align-self: flex-start; white-space: normal; text-align: right; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-appt-list:not(.clcm-m-keep) tbody tr > td:nth-child(1) {
    order: 4; flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; margin-top: 4px; font-size: 13px; line-height: 1.4; }
  .clcm-wrap .clcm-appt-list tbody td:nth-child(1) > .clcm-rd-title { font-size: 13px; font-weight: 600; color: var(--clcm-navy, #102A43); }
  .clcm-wrap .clcm-appt-list tbody td:nth-child(1) > .clcm-rd-muted { font-size: 13px !important; }
  .clcm-wrap .clcm-appt-list tbody td:nth-child(1) > .clcm-rd-muted::before { content: "·"; margin-right: 6px; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-appt-list:not(.clcm-m-keep) tbody tr > td:nth-child(3),
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-appt-list:not(.clcm-m-keep) tbody tr > td:nth-child(4) {
    order: 4; flex: 0 0 auto; display: block; margin-top: 4px; font-size: 13px; font-weight: 400; line-height: 1.4; white-space: nowrap;
    overflow: visible; color: var(--clcm-text-muted, #4C5566); }
  .clcm-wrap .clcm-appt-list tbody td:nth-child(3) > div { display: inline-flex !important; vertical-align: baseline; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-appt-list:not(.clcm-m-keep) tbody tr > td:nth-child(6) {
    order: 6; flex: 0 1 auto; justify-content: flex-start; margin-top: 10px; font-size: 13px; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-appt-list:not(.clcm-m-keep) tbody tr > td:nth-child(7) {
    order: 7; flex: 0 1 auto; margin-top: 10px; margin-left: auto; }
  /* A row whose only control is the "…" carries it up beside the state, so a confirmed session is not a line taller for one button. */
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-appt-list:not(.clcm-m-keep) tbody tr > td:nth-child(7):not(:has(.row-actions > .clcm-btn)) {
    order: 2; margin: 0; align-self: flex-start; }

  /* ── A ROW'S TEXT BUTTON IS ONE SHAPE ──────────────────────────────────────────────────────────
     The ghost buttons in a row's actions (View, Join) were bare text beside capsules and a round "…": three shapes in one row. They are
     the row button now: 36px, the approved capsule, bordered. Icon buttons and tiles keep their own 6px. */
  .clcm-wrap .clcm-rd-table tbody td.col-actions .clcm-btn-ghost:not(.clcm-btn-icon),
  .clcm-wrap .clcm-rd-table tbody td.clcm-m-act .clcm-btn-ghost:not(.clcm-btn-icon) {
    box-sizing: border-box; min-height: 36px; padding: 0 14px; border: 1px solid var(--clcm-border, #DDD8CE); border-radius: 999px;
    background: var(--clcm-white, #FFFFFF); color: var(--clcm-navy, #102A43); }
  .clcm-wrap .clcm-rd-table tbody td.col-actions a.clcm-btn-ghost:not(.clcm-btn-icon):link, .clcm-wrap .clcm-rd-table tbody td.col-actions a.clcm-btn-ghost:not(.clcm-btn-icon):visited,
  .clcm-wrap .clcm-rd-table tbody td.col-actions a.clcm-btn-ghost:not(.clcm-btn-icon):hover, .clcm-wrap .clcm-rd-table tbody td.col-actions a.clcm-btn-ghost:not(.clcm-btn-icon):active,
  .clcm-wrap .clcm-rd-table tbody td.clcm-m-act a.clcm-btn-ghost:not(.clcm-btn-icon):link, .clcm-wrap .clcm-rd-table tbody td.clcm-m-act a.clcm-btn-ghost:not(.clcm-btn-icon):visited,
  .clcm-wrap .clcm-rd-table tbody td.clcm-m-act a.clcm-btn-ghost:not(.clcm-btn-icon):hover, .clcm-wrap .clcm-rd-table tbody td.clcm-m-act a.clcm-btn-ghost:not(.clcm-btn-icon):active { color: var(--clcm-navy, #102A43); }

  /* Appointment Types' row keeps its tighter 10px: its three controls and the status must share one line at 320px. */
  .clcm-wrap .clcm-appt-types tbody td:nth-child(8) .clcm-btn-ghost:not(.clcm-btn-icon) { padding: 0 10px; }

  /* ── INVOICE ROWS: the number gives way to the amount ───────────────────────────────────────
     A long invoice number broke into three lines beside the amount. It is cut with an ellipsis instead, so the amount stays on the first line. */
  .clcm-wrap .clcm-inv-row > td:first-child { min-width: 0; }
  .clcm-wrap .clcm-inv-row > td:first-child .clcm-rd-ident { min-width: 0; max-width: 100%; }
  .clcm-wrap .clcm-inv-row > td:first-child .clcm-rd-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ── HOME: View All is in the card's header, the same in both cards ───────────────────────────
     Each card's bar is a grid: a header line (the card's name or its unread count at the left, View All at the right) and under it the
     strip of pills, which scrolls rather than wraps. The Inbox's View All was a plain link and the Clients' a bordered capsule; both are the capsule. */
  .clcm-wrap .clcm-homeclients > .clcm-rd-bar,
  .clcm-wrap .clcm-homeinbox > .clcm-rd-bar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; }
  .clcm-wrap .clcm-homeclients > .clcm-rd-bar > .clcm-rd-count { grid-column: 1; grid-row: 1; margin: 0; }
  .clcm-wrap .clcm-homeclients > .clcm-rd-bar > a.clcm-btn { grid-column: 2; grid-row: 1; justify-self: end; margin: 0 !important; }
  .clcm-wrap .clcm-homeclients > .clcm-rd-bar > .clcm-rd-tabs,
  .clcm-wrap .clcm-homeinbox > .clcm-rd-bar > .clcm-rd-tabs { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .clcm-wrap .clcm-homeinbox > .clcm-rd-bar > div:not(.clcm-rd-tabs) {
    grid-column: 1 / -1; grid-row: 1; display: flex !important; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
  .clcm-wrap .clcm-homeinbox > .clcm-rd-bar > div:not(.clcm-rd-tabs) > a.clcm-btn { margin-left: auto; }
  .clcm-wrap .clcm-homeclients > .clcm-rd-bar > a.clcm-btn:not(.clcm-btn-icon),
  .clcm-wrap .clcm-homeinbox > .clcm-rd-bar > div:not(.clcm-rd-tabs) > a.clcm-btn:not(.clcm-btn-icon) {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 36px; padding: 0 14px;
    border: 1px solid var(--clcm-border, #DDD8CE); border-radius: 999px; background: var(--clcm-white, #FFFFFF);
    font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; }
  .clcm-wrap .clcm-homeclients > .clcm-rd-bar > a.clcm-btn:link, .clcm-wrap .clcm-homeclients > .clcm-rd-bar > a.clcm-btn:visited,
  .clcm-wrap .clcm-homeclients > .clcm-rd-bar > a.clcm-btn:hover, .clcm-wrap .clcm-homeclients > .clcm-rd-bar > a.clcm-btn:active,
  .clcm-wrap .clcm-homeclients > .clcm-rd-bar > a.clcm-btn:focus,
  .clcm-wrap .clcm-homeinbox > .clcm-rd-bar > div:not(.clcm-rd-tabs) > a.clcm-btn:link, .clcm-wrap .clcm-homeinbox > .clcm-rd-bar > div:not(.clcm-rd-tabs) > a.clcm-btn:visited,
  .clcm-wrap .clcm-homeinbox > .clcm-rd-bar > div:not(.clcm-rd-tabs) > a.clcm-btn:hover, .clcm-wrap .clcm-homeinbox > .clcm-rd-bar > div:not(.clcm-rd-tabs) > a.clcm-btn:active,
  .clcm-wrap .clcm-homeinbox > .clcm-rd-bar > div:not(.clcm-rd-tabs) > a.clcm-btn:focus { color: var(--clcm-navy, #102A43); }
  /* The Clients rows: the client at the left, then the state, then the message icon, all on the first line. */
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-homeclients-table:not(.clcm-m-keep) tbody tr {
    grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto; column-gap: 10px; row-gap: 4px; padding: 12px 14px; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-homeclients-table:not(.clcm-m-keep) tbody td.clcm-m-id,
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-homeclients-table:not(.clcm-m-keep) tbody tr > td:first-child:not(.col-check) { grid-column: 1; grid-row: 1; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-homeclients-table:not(.clcm-m-keep) tbody td.clcm-m-sub { grid-column: 1; grid-row: 2; padding-left: 38px; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-homeclients-table:not(.clcm-m-keep) tbody td.clcm-m-trail { grid-column: 2; grid-row: 1; align-self: center; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-homeclients-table:not(.clcm-m-keep) tbody td.clcm-m-act {
    grid-column: 3; grid-row: 1; margin: 0; align-self: center; justify-content: center; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-homeclients-table:not(.clcm-m-keep) tbody tr:has(td.clcm-m-act) { grid-template-rows: auto; grid-auto-rows: auto; }

  /* ── REPORTS: the total is a row like the rows above it ─────────────────────────────────────
     The tinted total stayed a table row while the body rows became lists, so its tint stopped 85px short of the card's edge and the figure
     floated mid-card. It is a flex row now: the words at the left, the figure at the right, the tint across the card. */
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tfoot { display: block; width: 100%; }
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tfoot tr.clcm-rd-foot {
    display: flex; align-items: baseline; gap: 12px; box-sizing: border-box; width: 100%; padding: 12px 14px; background: var(--clcm-surface-tint, #F7F4EE); }
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tfoot tr.clcm-rd-foot > td { display: block; padding: 0; background: transparent; border: 0; width: auto; font-size: 14px; }
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tfoot tr.clcm-rd-foot > td:first-child { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--clcm-navy, #102A43); }
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tfoot tr.clcm-rd-foot > td.clcm-rd-total { flex: 0 1 auto; margin-left: auto; text-align: right; font-weight: 700; }
  .clcm-wrap .clcm-rd-table:not(.clcm-m-keep) tfoot tr.clcm-rd-foot > td:empty { display: none; }

  /* ── A PAGE'S ACTION BUTTONS ARE A GRID WHEN THERE ARE TWO OR MORE ─────────────────────────────
     They were a wrapping row of buttons each as wide as its label, so a page with three (the Library's New Folder, New Worksheet, New
     Form) drew three different widths one under another. Two to a line, equal widths; an odd last one (the page's main action) takes the
     whole line. One button on its own stays as wide as its label. The CSV menu's button is a child of its wrapper and is stretched the same. */
  .clcm-wrap .clcm-page-header-actions:has(> :nth-child(2)) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; box-sizing: border-box; }
  .clcm-wrap .clcm-page-header-actions:has(> :nth-child(2)) > * { width: 100%; min-width: 0; box-sizing: border-box; }
  .clcm-wrap .clcm-page-header-actions:has(> :nth-child(2)) > .clcm-btn,
  .clcm-wrap .clcm-page-header-actions:has(> :nth-child(2)) > .clcm-rd-menu-wrap > .clcm-btn {
    width: 100%; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; padding-top: 8px; padding-bottom: 8px; }
  .clcm-wrap .clcm-page-header-actions:has(> :nth-child(2)) > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* ── NAMES AND ADDRESSES: break at a hyphen or a word, never in the middle of one that fits ─────
     overflow-wrap:anywhere broke "Featherstonehau / gh". break-word moves a long word to its own line first and only cuts one that is
     wider than the line. An address in a line of contact details or a card is one line with an ellipsis (the full address is its title). */
  .clcm-wrap .clcm-role-name, .clcm-wrap .clcm-role-main > :not(.clcm-role-head) { overflow-wrap: break-word; hyphens: auto; }
  .clcm-wrap .clcm-profile-meta-item { min-width: 0; }
  .clcm-wrap .clcm-profile-meta-item > .clcm-m-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .clcm-wrap .clcm-rd-panel a[href^="mailto:"] { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
}

/* The record's name takes the whole line on a small phone: beside a 56px picture it was left about 200px and broke inside a word. */
@media (max-width: 360px) {
  .clcm-wrap .clcm-rd-head > div:has(> .clcm-profile-avatar) { grid-template-columns: minmax(0, 1fr); }
  .clcm-wrap .clcm-profile-info h1 { grid-column: 1; font-size: 22px; }
}

/* A small phone gives the client's name the whole line; the state and the "…" go under it. Beside the state the name was left about 140px. */
@media (max-width: 360px) {
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-appt-list:not(.clcm-m-keep) tbody tr > td:nth-child(2) { flex-basis: 100%; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-appt-list:not(.clcm-m-keep) tbody tr > td:nth-child(5) { align-self: center; margin-top: 6px; }
  .clcm-wrap .clcm-rd-table.clcm-m-row.clcm-appt-list:not(.clcm-m-keep) tbody tr > td:nth-child(7):not(:has(.row-actions > .clcm-btn)) { align-self: center; margin-top: 6px; margin-left: auto; }
}

/* The pairing sheet's four choices on a small phone: a 12px label, so "Coach principal" is one line like "Coaching" beside it. */
@media (max-width: 360px) {
  #clcm-pair-body .clcm-pair-table td.clcm-pair-levels .clcm-pair-chip { font-size: 12px; padding: 6px 6px; }
}

/* A conversation's header on a small phone: the name is given room for a long word (170px), and "Open profile" drops to a line of its own, at the
   right, when the picture, the name and the button cannot share one. Beside the button the name was left about 130px and broke in the
   middle of "Featherstonehaugh". The bar stays a row; only a line that cannot fit wraps. */
@media (max-width: 360px) {
  .clcm-ib-pane > .clcm-rd-bar { flex-wrap: wrap; row-gap: 8px; }
  .clcm-ib-pane > .clcm-rd-bar > .clcm-ib-head-id { flex: 1 1 170px; min-width: 0; }
  .clcm-ib-pane > .clcm-rd-bar > .clcm-ib-head-id .clcm-rd-count { overflow-wrap: break-word; hyphens: auto; }
}

/* v2.351.1: iPhone zooms the whole page in when a field under 16px takes focus, and the page stays zoomed after: the
   fixed tab bar then seemed to move up and down and the page slid sideways. On a phone no field is under 16px. */
@media (max-width: 820px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  select, textarea { font-size: 16px !important; }
}

/* v2.351.3: the top bar carries the "+" menu, and a page heading lifted to 20 (for the CSV menu) drew over it. The bar sits
   above page content (30), still under the More sheet (39) and the tab bar (40). Shortcut letters mean nothing on a phone. */
@media (max-width: 820px) {
  body .clcm-cp-bar { z-index: 30; }
  .clcm-cp-newmenu .clcm-cp-newkey { display: none; }
}

/* ── ONE LINE FOR A FIGURE AND FOR A HEADER BUTTON (v2.352.0) ─────────────────────────────────────
   Jose, 2026-11-03: "The numbers go down to second row when they don't fit". overflow-wrap:anywhere let
   "$1,603.00" break after its comma, and the two-up header grid's white-space:normal put "Send Agreement"
   on two lines. Both hold one line now; clcm-admin.js steps the type down to fit (floor 14px / 12px), and
   a label still too long AT the floor (a long Spanish button, "At least $…") is let wrap again rather than
   spill past its box. Words, not figures: a --text cell (the Membership plan's name) wraps as before. The
   buttons give up 6px of side padding each, which is what a two-word label needed at 390px. */
@media (max-width: 820px) {
  .clcm-wrap .clcm-rd-stat > .clcm-stat-value,
  .clcm-wrap .clcm-rd-stats > .clcm-rd-stat .clcm-rd-stat-n:not(.clcm-rd-stat-n--text) { white-space: nowrap; overflow-wrap: normal; }
  .clcm-wrap .clcm-page-header-actions:has(> :nth-child(2)) > .clcm-btn,
  .clcm-wrap .clcm-page-header-actions:has(> :nth-child(2)) > .clcm-rd-menu-wrap > .clcm-btn {
    white-space: nowrap; padding-left: 10px; padding-right: 10px; gap: 6px; }
}

/* ── THE REPORTS RANGE BUTTON ON A PHONE (v2.352.3) ──────────────────────────────────────────────
   Jose, 2026-11-03: the full range broke into three lines and spilled out of its half-width button over
   the page title. The phone shows the short form on one line ("Oct 4 – Nov 3, 2026"), fitted like the
   other header buttons; the desktop keeps the full label. aria-hidden is on the short span, so a screen
   reader hears the full label it already did; display:none here only takes the full one off the screen. */
/* The exact complement of the phone query: min-width:821px left 820-821px (zoom, display scaling) showing both labels. */
@media not all and (max-width: 820px) { .clcm-rd-range-short { display: none; } }
@media (max-width: 820px) {
  .clcm-wrap .clcm-rd-range-btn > .clcm-rd-range-full {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .clcm-wrap .clcm-rd-range-btn > .clcm-rd-range-short { display: inline; white-space: inherit; }   /* the button's: one line, or two if the fit script gives up */
  .clcm-wrap .clcm-rd-range-btn { white-space: nowrap; height: auto; padding-left: 10px; padding-right: 10px; gap: 6px; }
}

/* ── VIDEO GUIDES ON A PHONE (v2.353.0): one card a row, and the super admin's form in one column. ── */
@media (max-width: 820px) {
  .clcm-guides-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .clcm-guides-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════
 * v2.358.2 — A PHONE GIVES THE PORTAL'S CONTENT ITS WIDTH. Five nested paddings (portal 24, body 14, the card's 16 margin,
 * the worksheet card's 22 and its border, the instructions block's 16 and its 3px rule) left a worksheet box 199px wide
 * and module text a 230px column on a 390px phone. Trimmed on narrow screens only; desktop is untouched.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width:560px) {
  .clcm-portal { padding-left:10px; padding-right:10px; }
  .clcm-portal-body { padding-left:8px; padding-right:8px; }
  /* The worksheet card sits inside the tab's card: on a phone it drops its own frame and keeps a hairline between sheets. */
  .clcm-rd-card--padded > .clcm-ws-card { margin-left:0; margin-right:0; border:0; border-bottom:1px solid #e8e1d4; border-radius:0; padding:16px 12px; }
  /* v2.380.0 (Jose): the hairline is BETWEEN sheets. Under the last one it drew a stray line with the card's 16px end margin
     as an empty strip below it. Not :last-child / :last-of-type — the tab's <script> (and on other tabs, other <div>s) follow
     the cards, so neither names the last card; "no later sibling card" does. */
  .clcm-rd-card--padded > .clcm-ws-card:not(:has(~ .clcm-ws-card)) { border-bottom:0; margin-bottom:0; }
  .clcm-rd-card--padded > :not(.clcm-rd-bar):not(.clcm-ws-card) { margin-left:12px; margin-right:12px; }
  .clcm-ws-card .clcm-ws-content { padding:12px 10px; }
}