/* ════════════════════════════════════════════════════════════════════════════════
   getniru.com — the shared base for the console-faithful fragments (landing/parts/cN.html + cN.css).
   Charter: info/design/charter-landing-v6.md §4. Every value below is the shipped console's own, copied from
   client/src/theme/modes.css (the dark set), client/src/theme/spine.css (dimensions, type, radii) and
   client/src/coachdesk/shell.css (the dress: glass, inset, glow). A fragment uses these tokens for
   every colour and invents none — the console's law, kept here.

   Fragments are plain HTML + CSS, no scripts, no images: avatars are initials, charts are inline
   SVG. Design width 840 CSS px, fluid down to 600; narrower than that the frame zooms as one piece
   so a phone still reads it whole.
   ════════════════════════════════════════════════════════════════════════════════ */
.con{
  /* ── colour: modes.css, :root[data-theme='dark'][data-console] ── */
  --con-bg:#0B0C0F; --con-surface:#15171C; --con-surface2:#1E2127; --con-surface3:#282C34;
  --con-hairline:rgba(255,255,255,.08); --con-scrim:rgba(0,0,0,.55);
  --con-text:#F4F5F7; --con-text2:#9BA3AF; --con-text3:#7A8391;
  --con-success:#4ADE80; --con-warning:#FBBF24; --con-warning-tint:rgba(251,191,36,.14);
  --con-danger:#F87171; --con-danger-tint:rgba(248,113,113,.14);
  --con-info:#60A5FA; --con-info-tint:rgba(96,165,250,.14); --con-on-fill:#0B0C0F;
  --con-protein:#E4589B; --con-carbs:#D3C55A; --con-fat:#5CC4E8;
  --con-trust-official-fill:#F4F5F7; --con-trust-official-text:#0B0C0F;
  --con-trust-verified-fill:rgba(96,165,250,.14); --con-trust-verified-border:#60A5FA; --con-trust-verified-text:#60A5FA;
  --con-trust-estimated-fill:#1E2127; --con-trust-estimated-text:#9BA3AF;
  --con-accent:#38D9A9; --con-console:#2DD4BF; --con-console-tint:rgba(45,212,191,.14);
  --con-phase-cut:#FF9A80; --con-phase-maintain:#38D9A9; --con-phase-bulk:#93A7FF;
  --con-phase-cut-tint:rgba(255,154,128,.14); --con-phase-maintain-tint:rgba(56,217,169,.14); --con-phase-bulk-tint:rgba(147,167,255,.14);
  --con-control-border:rgba(155,163,175,.75);
  /* ── the dress: shell.css, derived exactly as the console derives them (color-mix over the tokens) ── */
  --con-glass:color-mix(in srgb,var(--con-surface) 72%,transparent);
  --con-glass-edge:color-mix(in srgb,var(--con-text) 16%,transparent);
  --con-inset:color-mix(in srgb,var(--con-text) 3%,transparent);
  --con-inset-hover:color-mix(in srgb,var(--con-text) 6%,transparent);
  --con-glow:color-mix(in srgb,var(--con-console) 9%,transparent);
  --con-glow-corner:color-mix(in srgb,var(--con-console) 5%,transparent);
  /* ── dimensions: spine.css ── */
  --con-space-hair:2px; --con-space-xxs:4px; --con-space-xs:8px; --con-space-sm:12px; --con-space-md:16px;
  --con-space-gutter:20px; --con-space-lg:24px; --con-space-xl:32px; --con-space-xxl:40px; --con-space-xxxl:48px;
  --con-radius-card:12px; --con-radius-control:10px; --con-radius-data:8px; --con-radius-tag:4px; --con-radius-capsule:999px;
  --con-size-control:32px; --con-size-control-sm:28px; --con-size-control-lg:36px; --con-size-row:34px; --con-size-row-double:48px;
  --con-size-icon:18px; --con-size-icon-sm:14px; --con-size-avatar:36px;
  /* ── type: spine.css tiers; the display face is Radio Canada, body is the system face (index.css) ── */
  --con-heading:'Radio Canada',system-ui,'Segoe UI',Roboto,sans-serif;
  --con-sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --con-type-display:700 34px/40px var(--con-heading); --con-type-title:700 28px/36px var(--con-heading);
  --con-type-heading:600 22px/28px var(--con-heading); --con-type-body:400 17px/24px var(--con-sans);
  --con-type-body-med:500 17px/24px var(--con-sans); --con-type-secondary:400 15px/20px var(--con-sans);
  --con-type-caption:400 13px/18px var(--con-sans); --con-type-kicker:600 11px/14px var(--con-heading);

  /* ── the frame: one card, cropped tight, over the page's ink ── */
  box-sizing:border-box; position:relative; margin:0; width:100%; max-width:840px; min-width:0;
  background:var(--con-bg); color:var(--con-text);
  font:var(--con-type-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  border:1px solid rgba(255,255,255,.16); border-radius:16px; overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  /* the console's glow from the top edge (shell.css ::before), so the crop still reads as the console */
  background-image:linear-gradient(180deg,var(--con-glow),transparent 38%),
                   radial-gradient(60% 40% at 100% 0%,var(--con-glow-corner),transparent 70%);
}
.con *,.con *::before,.con *::after{box-sizing:border-box;min-width:0}
.con svg{display:block}
.con .tnum,.con [data-num]{font-variant-numeric:tabular-nums}
.con .con-num{font-family:var(--con-heading);font-variant-numeric:tabular-nums}

/* ── the console's small vocabulary, shared so every fragment spells it the same way ── */
/* an initials avatar with the status dot (ClientAvatar) */
.con .con-avatar{position:relative;flex:0 0 auto;width:var(--con-size-avatar);height:var(--con-size-avatar);border-radius:50%;
  background:var(--con-surface2);border:1px solid var(--con-hairline);display:inline-flex;align-items:center;justify-content:center;
  font:600 13px/1 var(--con-heading);letter-spacing:.02em;color:var(--con-text2)}
.con .con-avatar i{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;border:2px solid var(--con-bg);background:var(--con-warning)}
.con .con-avatar i.ok{background:var(--con-success)} .con .con-avatar i.risk{background:var(--con-danger)}
/* the chip: state tint + ink, capsule, caption size (chips.css) */
.con .con-chip{display:inline-flex;align-items:center;gap:var(--con-space-xxs);height:20px;padding:0 var(--con-space-xs);flex:none;
  border-radius:var(--con-radius-capsule);font:600 11px/1 var(--con-sans);letter-spacing:.01em;white-space:nowrap;
  background:var(--con-surface2);color:var(--con-text2);border:1px solid transparent}
.con .con-chip.console{background:var(--con-console-tint);color:var(--con-console)}
.con .con-chip.warn{background:var(--con-warning-tint);color:var(--con-warning)}
.con .con-chip.danger{background:var(--con-danger-tint);color:var(--con-danger)}
.con .con-chip.info{background:var(--con-info-tint);color:var(--con-info)}
.con .con-chip.success{background:color-mix(in srgb,var(--con-success) 14%,transparent);color:var(--con-success)}
.con .con-chip.cut{background:var(--con-phase-cut-tint);color:var(--con-phase-cut)}
.con .con-chip.maintain{background:var(--con-phase-maintain-tint);color:var(--con-phase-maintain)}
.con .con-chip.bulk{background:var(--con-phase-bulk-tint);color:var(--con-phase-bulk)}
.con .con-chip.outline{background:transparent;border-color:currentColor}
/* the pill act (buttons.css): filled console tint for the primary act, quiet for the rest */
.con .con-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--con-space-xs);height:var(--con-size-control);flex:none;
  padding:0 var(--con-space-md);border-radius:var(--con-radius-capsule);border:1px solid transparent;
  font:600 13px/1 var(--con-sans);white-space:nowrap;color:var(--con-text)}
.con .con-btn.primary{background:var(--con-console);color:var(--con-on-fill)}
.con .con-btn.tint{background:var(--con-console-tint);color:var(--con-console)}
.con .con-btn.quiet{background:transparent;border-color:var(--con-control-border);color:var(--con-text)}
.con .con-btn.link{background:transparent;color:var(--con-console);padding:0 var(--con-space-xs)}
.con .con-btn.sm{height:var(--con-size-control-sm);font-size:13px;padding:0 var(--con-space-sm)}
/* the kicker (a caps label over a group) and the hairline rule */
.con .con-kicker{font:var(--con-type-kicker);letter-spacing:.6px;text-transform:uppercase;color:var(--con-text3)}
.con .con-rule{border:0;border-top:1px solid var(--con-hairline);margin:0}
/* a glass sheet (the dress): a card inside the frame */
.con .con-sheet{background:var(--con-glass);border:1px solid var(--con-hairline);border-radius:var(--con-radius-card)}
/* an inset row (the dress): a queue row, a table row */
.con .con-row{background:var(--con-inset);border-radius:var(--con-radius-data)}

/* ── the small-screen zoom: a fragment is laid out at its design width and, where its column is
      narrower, the whole frame scales as one piece (no reflow, no overflow). The column declares
      itself a container (.part on the pages, or any wrapper with .con-host); where container queries
      are unknown the viewport stands in. ── */
.part,.con-host{container-type:inline-size}
@container (max-width:720px){.con{zoom:.82}}
@container (max-width:600px){.con{zoom:.7}}
@container (max-width:460px){.con{zoom:.56}}
@supports not (container-type:inline-size){
  @media (max-width:600px){.con{zoom:.72}}
  @media (max-width:440px){.con{zoom:.56}}
}
@supports not (zoom:1){
  .con{overflow-x:auto}
}

/* ═══ THE PARTS — generated by landing/parts/inline.mjs from landing/parts/cN.css; edit those, not this ═══ */

/* ── c1.css ── */
/* ════════════════════════════════════════════════════════════════════════════════════════════
   C1 — the morning queue: Today's "Needs you today" card, tight-cropped (no rail, no KPI strip).
   Structure: client/src/coachdesk/TodayPage.tsx (the queue section and QueueRow).
   Values:    client/src/coachdesk/today.css, clientAvatar.css, components/buttons.css,
              theme/spine.css tiers, index.css (the bare-h2 tracking the card title inherits).
   Every colour is a --con-* token (landing/console.css). Class names mirror the console's so a
   reader can diff this sheet against today.css line for line.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* The crop: the page's own shoulder around the card (.cd-page, region inset lg). */
.con-c1{box-sizing:border-box;padding:var(--con-space-lg)}

/* The card — a glass sheet on the shell's glow (today.css .cd-today-queue). */
.con-c1 .cd-today-queue{display:flex;flex-direction:column;gap:var(--con-space-sm);min-width:0;
  padding:var(--con-space-md);background:var(--con-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--con-glass-edge);border-radius:var(--con-radius-card)}
.con-c1 .cd-today-cardhead{display:flex;align-items:center;gap:var(--con-space-sm);padding-bottom:var(--con-space-sm);
  border-bottom:1px solid var(--con-hairline)}
/* data-M tier in the heading face; the -0.2px is the bare h2 rule in index.css, which the console's h2 inherits. */
.con-c1 .cd-today-cardtitle{margin:0;font:600 17px/24px var(--con-heading);letter-spacing:-.2px;color:var(--con-text)}
.con-c1 .cd-today-count{margin-left:auto;min-width:var(--con-space-lg);padding:var(--con-space-hair) var(--con-space-xs);text-align:center;
  font:700 13px/16px var(--con-heading);font-variant-numeric:tabular-nums;color:var(--con-console);
  background:var(--con-console-tint);border-radius:var(--con-radius-capsule)}

/* Lanes as kickers (micro size, kicker weight and tracking). */
.con-c1 .cd-today-lanes,.con-c1 .cd-today-lane{display:flex;flex-direction:column;gap:var(--con-space-xs);min-width:0}
.con-c1 .cd-today-lanes{gap:var(--con-space-md)}
.con-c1 .cd-today-lanehead{display:flex;align-items:center;gap:var(--con-space-xs);padding:var(--con-space-xxs) var(--con-space-xxs) 0}
.con-c1 .cd-today-lanename{font:600 11px/14px var(--con-heading);letter-spacing:.6px;text-transform:uppercase;color:var(--con-text2)}
.con-c1 .cd-today-lanecount{font:600 11px/14px var(--con-heading);font-variant-numeric:tabular-nums;color:var(--con-text3)}

/* A row: a soft inset on the sheet, never a card in a card. */
.con-c1 .cd-today-row{position:relative;display:flex;align-items:center;gap:var(--con-space-sm);min-height:var(--con-size-row-double);
  min-width:0;padding:var(--con-space-sm);border:1px solid var(--con-hairline);border-radius:var(--con-radius-card);background:var(--con-inset)}

/* ClientAvatar, size md (clientAvatar.css): initials in the reading face, the state dot on a surface ring. */
.con-c1 .cd-av{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;
  border-radius:var(--con-radius-capsule);background:var(--con-surface2);border:1px solid var(--con-hairline)}
.con-c1 .cd-av-initials{font-size:13px;line-height:1;font-weight:700;letter-spacing:.02em;color:var(--con-text2)}
.con-c1 .cd-av-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:var(--con-radius-capsule);border:2px solid var(--con-surface)}
.con-c1 .cd-av-dot[data-state="attention"]{background:var(--con-warning)}
.con-c1 .cd-av-dot[data-state="at-risk"]{background:var(--con-danger)}

.con-c1 .cd-today-rowmain{display:flex;flex-direction:column;gap:var(--con-space-xxs);min-width:0;flex:1 1 auto}
.con-c1 .cd-today-rowname{font-size:15px;line-height:20px;font-weight:600;color:var(--con-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.con-c1 .cd-today-rowline{display:flex;align-items:center;gap:var(--con-space-xs);font-size:13px;line-height:16px;color:var(--con-text2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The flag chip: words only, a capsule on its tint (today.css .cd-today-chip). */
.con-c1 .cd-today-chip{display:inline-flex;align-items:center;flex:none;height:20px;padding:0 var(--con-space-xs);border-radius:var(--con-radius-capsule);
  font-size:11px;line-height:14px;font-weight:600;white-space:nowrap;border:1px solid transparent;color:var(--con-text2);background:var(--con-surface2)}
.con-c1 .cd-today-chip[data-tone="accent"]{color:var(--con-console);background:var(--con-console-tint)}
.con-c1 .cd-today-chip[data-tone="warning"]{color:var(--con-warning);background:var(--con-warning-tint)}

/* The row's acts. The Button primitive (buttons.css .btn, caption tier at 500) re-cut as a capsule by
   today.css `.cd-today-row .btn`; the link-shaped acts are `.cd-today-act` (600). */
.con-c1 .btn{flex:none;display:inline-grid;place-items:center;align-content:center;min-height:var(--con-size-control);padding:0 var(--con-space-sm);
  border:1px solid transparent;border-radius:var(--con-radius-capsule);font-size:13px;line-height:16px;font-weight:500;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.con-c1 .btn-primary{color:var(--con-on-fill);background:var(--con-console)}
.con-c1 .btn-ghost{color:var(--con-console);background:var(--con-console-tint)}
.con-c1 .cd-today-act{flex:none;display:inline-flex;align-items:center;height:var(--con-size-control);padding:0 var(--con-space-sm);
  border-radius:var(--con-radius-capsule);border:1px solid transparent;background:var(--con-surface2);color:var(--con-text);
  font-size:13px;line-height:16px;font-weight:600;white-space:nowrap}
.con-c1 .cd-today-act.is-primary{background:var(--con-console-tint);color:var(--con-console)}
.con-c1 .cd-today-clear{background:transparent;color:var(--con-text3)}

/* ── c2.css ── */
/* ════════════════════════════════════════════════════════════════════════════════════════════
   C2 — the target proposal: the Target approvals page, title to keyboard hint.
   Structure: client/src/coachdesk/SuggestionsPage.tsx (Row + the page return), components/DataRow.tsx.
   Values:    coachdesk/suggestions.css (since 2026-09-28 the table is one set of tracks: .cd-ap-grid
              :111-192, its head and rows as subgrids :204-211, the head :306-327), coachdesk.css
              (.cd-body/.cd-lede/.cd-row-openlink/.cd-phase-chip, `.cd-tp .sweep-title`), sweep/sweep.css
              (.sweep-header/.sweep-title), components/rows.css
              (.data-row), components/buttons.css, theme/spine.css tiers. The console's root is 17px, so
              its rem values are converted at 17px here (55rem = 935px).
   Every colour is a --con-* token. Desktop layout (the console at ≥1080px, RAISED shown).
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* `.cd-tp` paints an opaque ink ground on this route (no `cd-page-lit`), so the shell's glow does
   not show through here — the frame's glow is switched off to match. */
.con-c2{box-sizing:border-box;background-image:none}

/* The page head: `.sweep-header` (8 / 16 inset, 48 tall) carrying `.cd-tp .sweep-title` (title tier). */
.con-c2 .sweep-header{display:flex;align-items:center;justify-content:space-between;gap:var(--con-space-xs);
  padding:var(--con-space-xs) var(--con-space-md);min-height:var(--con-size-row-double)}
.con-c2 .sweep-title{margin:0;font:600 28px/36px var(--con-heading);letter-spacing:-.02em;color:var(--con-text)}

/* `.cd-body`: 20 / 24 inset, blocks 24 apart (the page's 64px runway is cropped to 24). */
.con-c2 .cd-body{display:flex;flex-direction:column;gap:var(--con-space-lg);min-width:0;
  padding:var(--con-space-gutter) var(--con-space-lg) var(--con-space-lg)}
.con-c2 .cd-lede{margin:0;max-width:62ch;font-size:13px;line-height:18px;color:var(--con-text2)}

/* The table: a lifted card that IS the grid and owns one set of tracks; the head and every row lay
   their cells on those tracks as subgrids (the first template line is the no-subgrid fallback), so
   each head sits exactly over its figures. The move column is fit-content(11rem) — 187px at the
   console's 17px root — so its head wraps onto two lines and the name keeps the room. */
.con-c2 .cd-ap-grid{--c2-cols:minmax(140px,1.4fr) fit-content(187px) minmax(90px,auto) auto auto auto;
  display:grid;grid-template-columns:var(--c2-cols);column-gap:var(--con-space-sm);max-width:935px;background:var(--con-surface);
  border:1px solid var(--con-hairline);border-radius:var(--con-radius-card)}
.con-c2 .cd-ap-grid > *{grid-column:1 / -1}
.con-c2 .cd-ap-head{display:grid;grid-template-columns:var(--c2-cols);grid-template-columns:subgrid;align-items:center;gap:var(--con-space-sm);
  padding:var(--con-space-xxs) var(--con-space-xs) var(--con-space-xs);font:600 13px/16px var(--con-heading);letter-spacing:.6px;
  text-transform:uppercase;color:var(--con-text3);border-bottom:1px solid var(--con-hairline);background:var(--con-surface);
  border-radius:var(--con-radius-card) var(--con-radius-card) 0 0}
.con-c2 .cd-ap-head-num{text-align:right}

/* DataRow (rows.css): the active row wears surface2 and the console-teal keyline. */
.con-c2 .data-row{display:grid;grid-template-columns:var(--c2-cols);grid-template-columns:subgrid;align-items:center;gap:var(--con-space-sm);
  min-height:var(--con-size-row);padding:var(--con-space-xxs) var(--con-space-xs);background:var(--con-surface);
  border-radius:0 0 var(--con-radius-card) var(--con-radius-card)}
.con-c2 .data-row[data-selected]{background:var(--con-surface2);box-shadow:inset 2px 0 0 var(--con-console)}
.con-c2 .data-row-primary{display:flex;flex-direction:column;min-width:0}
.con-c2 .data-row-who{display:flex;align-items:center;gap:var(--con-space-xs);min-width:0}
.con-c2 .data-row-name{font:600 15px/20px var(--con-heading);font-variant-numeric:tabular-nums;color:var(--con-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* PhaseChip — the one phase hue on the row, a capsule on its tint. */
.con-c2 .cd-phase-chip{display:inline-flex;align-items:center;padding:0 var(--con-space-xs);border-radius:var(--con-radius-capsule);
  font-size:11px;line-height:20px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.con-c2 .cd-phase-chip[data-phase="cut"]{color:var(--con-phase-cut);background:var(--con-phase-cut-tint)}

/* The evidence: from → to (the TO in info, 600), the measured burn and the age in neutral ink. */
.con-c2 .cd-ap-move{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--con-space-xxs);font-size:13px;line-height:16px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.con-c2 .cd-ap-from{color:var(--con-text2)}
.con-c2 .cd-ap-arrow{color:var(--con-text3)}
.con-c2 .cd-ap-to{color:var(--con-info);font-weight:600}
.con-c2 .cd-ap-burn,.con-c2 .cd-ap-age{font-size:13px;line-height:16px;color:var(--con-text2);font-variant-numeric:tabular-nums;
  white-space:nowrap;text-align:right}
.con-c2 .cd-ap-age{min-width:68px}

/* The two verdicts — the Button primitive at md: Approve the console's base teal, Dismiss a quiet outline. */
.con-c2 .data-row-actions{display:flex;align-items:center;gap:var(--con-space-xxs);justify-content:flex-end}
.con-c2 .btn{flex:none;display:inline-grid;place-items:center;align-content:center;min-height:var(--con-size-control);
  padding:0 var(--con-space-sm);border:1px solid transparent;border-radius:var(--con-radius-control);font-size:13px;line-height:16px;
  font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.con-c2 .btn-primary{color:var(--con-on-fill);background:var(--con-console);border-color:var(--con-console)}
.con-c2 .btn-ghost{color:var(--con-text2);background:var(--con-surface);border-color:var(--con-control-border)}
.con-c2 .cd-row-openlink{font-size:13px;line-height:16px;font-weight:600;color:var(--con-console);padding:var(--con-space-xxs) var(--con-space-xs);
  border-radius:var(--con-radius-tag);white-space:nowrap}

.con-c2 .cd-ap-hint{margin:var(--con-space-sm) 0 0;font-size:13px;line-height:16px;color:var(--con-text3)}

/* ── Narrower than the console ever draws this grid ────────────────────────────────────────────
   The six tracks need a 789px card — 837px of page with the body's 24px sides — to sit on one row
   (the console only designs ≥1080px windows, where they always have it; its narrowest six-track
   card is 808). At 840 the name column is 141 and nothing moves. Below that the page is not
   reflowed and no column is dropped: the page root scales as one piece — the base's own no-reflow
   answer, applied from where this table stops fitting rather than from the viewport. The first
   step starts at the exact fit; every step keeps the page's own width ≥ 850, a margin for text
   measured under the page's zoom. */
.con-c2{container-type:inline-size}
@container (max-width:837.08px){.con-c2 .cd-tp{zoom:.98}}
@container (max-width:833px){.con-c2 .cd-tp{zoom:.94}}
@container (max-width:799px){.con-c2 .cd-tp{zoom:.88}}
@container (max-width:748px){.con-c2 .cd-tp{zoom:.82}}
@container (max-width:697px){.con-c2 .cd-tp{zoom:.76}}
@container (max-width:646px){.con-c2 .cd-tp{zoom:.7}}
@container (max-width:595px){.con-c2 .cd-tp{zoom:.64}}
@container (max-width:544px){.con-c2 .cd-tp{zoom:.58}}
@container (max-width:493px){.con-c2 .cd-tp{zoom:.52}}

/* ── c3.css ── */
/* ════════════════════════════════════════════════════════════════════════════════════════════
   C3 — bulk assign: the workout template library with one template open and its assign panel
   unfolded under the row (the compact TemplateAssignPanel, the console's live arm since 2026-09-21).
   Structure: client/src/coachdesk/TemplatesPage.tsx (library pane, Row, the aspanel row) and
              TemplateAssignPage.tsx (TemplateAssignPanel, compact).
   Values:    coachdesk/templates.css, dayTemplates.css (.cd-dt-list), coachdesk.css (.cd-glass .btn-primary,
              .cd-phase-chip), components/filterbar.css, clientFinder.css, fields.css, chips.css, buttons.css,
              controls.css (.checkbox), theme/spine.css. The console's root is 17px: its rem values are
              converted at 17px (12rem = 204px, 26rem = 442px, 4.5rem = 76.5px).
   Every colour is a --con-* token.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* The crop: the page's shoulder around the library sheet. */
.con-c3{box-sizing:border-box;padding:var(--con-space-lg)}

/* The library sheet: `.cd-dt-list` on the shell's glass. */
.con-c3 .cd-dt-list{padding:var(--con-space-md) 0 0;min-width:0;background:var(--con-glass);-webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);border:1px solid var(--con-glass-edge);border-radius:var(--con-radius-card)}

/* The tools row: the finder capsule and the Active / Archived track on one line (FilterBar). */
.con-c3 .cd-tp-tools{display:flex;align-items:center;min-width:0;padding:0 var(--con-space-md) var(--con-space-xs)}
.con-c3 .fb{display:flex;align-items:center;gap:var(--con-space-md);flex-wrap:nowrap;min-width:0}
.con-c3 .fb-finder{position:relative;display:flex;align-items:center;min-width:0;flex:1 1 204px;max-width:442px}
.con-c3 .f-search-glyph{position:absolute;left:var(--con-space-sm);top:50%;transform:translateY(-50%);color:var(--con-text3);pointer-events:none}
/* A search field at rest, placeholder showing: surface2 capsule, 36 tall (fields.css + filterbar.css). */
.con-c3 .field{display:flex;align-items:center;flex:1 1 auto;min-width:0;width:100%;min-height:var(--con-size-control-lg);
  padding:0 var(--con-space-xs) 0 38px;border:1px solid transparent;border-radius:var(--con-radius-capsule);background:var(--con-surface2);
  font-size:15px;line-height:20px;color:var(--con-text3);white-space:nowrap;overflow:hidden}
/* A real <input> sizes itself to its default 20 characters (167px of content at 15px, measured against the
   console's own sheets): the span takes that width, and shrinks like the input when the row is narrow. */
.con-c3 .fb-finder .field{padding-right:76.5px;width:283.5px}
.con-c3 .chip-track{display:inline-flex;align-items:stretch;flex:none;flex-wrap:wrap;gap:var(--con-space-hair);padding:var(--con-space-hair);
  border-radius:var(--con-radius-capsule);background:var(--con-surface2)}
.con-c3 .chip{display:inline-flex;flex:none;align-items:center;gap:var(--con-space-xxs);min-height:var(--con-size-control);padding:0 var(--con-space-sm);
  border:1px solid transparent;border-radius:var(--con-radius-capsule);font-size:13px;line-height:16px;font-weight:500;white-space:nowrap;
  color:var(--con-text2);background:transparent}
.con-c3 .chip[data-pressed]{background:var(--con-console-tint);color:var(--con-console)}

/* The grid, stripped to the sheet (the workbench dress): head and rows share one template. */
.con-c3 .cd-tp-grid{display:flex;flex-direction:column}
.con-c3 .cd-tp-head,.con-c3 .cd-tp-row{display:grid;grid-template-columns:minmax(120px,1fr) 88px 56px 108px 36px;align-items:center;
  gap:var(--con-space-sm);padding:0 var(--con-space-md)}
.con-c3 .cd-tp-head{height:var(--con-size-control);font:600 11px/14px var(--con-heading);letter-spacing:.6px;text-transform:uppercase;
  color:var(--con-text3);border-bottom:1px solid var(--con-hairline)}
.con-c3 .cd-tp-row{position:relative;min-height:var(--con-size-row-double);font-size:15px;line-height:20px;border-bottom:1px solid var(--con-hairline)}
/* The open row: console tint, and the teal rail that runs on down the panel it unfolded. */
.con-c3 .cd-tp-row[data-editing]{background:var(--con-console-tint)}
.con-c3 .cd-tp-row[data-editing]::before{content:'';position:absolute;left:0;top:14%;bottom:0;width:2px;border-radius:var(--con-radius-capsule);
  background:var(--con-console)}
.con-c3 .cd-tp-name{display:flex;align-items:center;gap:var(--con-space-xs);min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.con-c3 .cd-tp-name-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.con-c3 .cd-tp-num{font:600 13px/16px var(--con-heading);font-variant-numeric:tabular-nums;color:var(--con-text2);white-space:nowrap}
.con-c3 .cd-tp-actions{display:flex;align-items:center;gap:var(--con-space-xxs);justify-self:end}
/* The row's one visible act: ⋯, an IconButton quiet sm (a 28 circle). */
.con-c3 .btn-icon{display:inline-grid;font-weight:500;place-items:center;width:var(--con-size-control-sm);min-height:var(--con-size-control-sm);padding:0;
  border:1px solid transparent;border-radius:var(--con-radius-capsule);color:var(--con-text2);background:transparent}
.con-c3 .btn-glyph{grid-area:1/1;display:grid;place-items:center;font-size:14px;line-height:1}

/* The unfolded assign panel: an inset band under its row, its height fixed at five picker rows. */
.con-c3 .cd-tp-aspanel{position:relative;display:flex;flex-direction:column;min-width:0;min-height:368px;padding:var(--con-space-sm) var(--con-space-md);
  background:var(--con-inset);border-bottom:1px solid var(--con-hairline)}
.con-c3 .cd-tp-aspanel::before{content:'';position:absolute;left:0;top:0;bottom:var(--con-space-sm);width:2px;border-radius:var(--con-radius-capsule);
  background:var(--con-console)}
.con-c3 .cd-as-body{display:flex;flex-direction:column;flex:1 0 auto;min-width:0}
.con-c3 .cd-client-finder{position:relative;margin:0 0 var(--con-space-xs)}
.con-c3 .cd-client-finder .field{padding-right:var(--con-space-xs)}
.con-c3 .cd-as-picker{max-height:calc(5 * var(--con-size-row-double));overflow:hidden}
.con-c3 .cd-as-row{display:grid;grid-template-columns:24px minmax(140px,1fr) auto;align-items:center;gap:var(--con-space-sm);
  min-height:var(--con-size-row-double);padding:0 var(--con-space-xs);font-size:15px;line-height:20px;border-radius:var(--con-radius-control)}
.con-c3 .cd-as-row[data-selected]{background:var(--con-console-tint)}
.con-c3 .cd-as-mark{font-size:13px;line-height:16px;color:var(--con-console);text-align:center}
.con-c3 .cd-as-who{display:flex;align-items:center;gap:var(--con-space-xs);min-width:0}
.con-c3 .cd-as-ident{display:flex;flex-direction:column;min-width:0}
.con-c3 .cd-as-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.con-c3 .cd-as-mail{font-size:13px;line-height:16px;color:var(--con-text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.con-c3 .cd-phase-chip{display:inline-flex;align-items:center;flex:none;padding:0 var(--con-space-xs);border-radius:var(--con-radius-capsule);
  font-size:11px;line-height:20px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.con-c3 .cd-phase-chip[data-phase="cut"]{color:var(--con-phase-cut);background:var(--con-phase-cut-tint)}
.con-c3 .cd-phase-chip[data-phase="bulk"]{color:var(--con-phase-bulk);background:var(--con-phase-bulk-tint)}
.con-c3 .cd-phase-chip[data-phase="maintain"]{color:var(--con-phase-maintain);background:var(--con-phase-maintain-tint)}

/* The foot: the counted act (the region's one filled capsule) and the activate switch, one line. */
.con-c3 .cd-as-foot{display:flex;align-items:center;gap:var(--con-space-sm);flex-wrap:nowrap;margin-top:auto;padding-top:var(--con-space-xs);
  min-height:var(--con-size-control-lg)}
.con-c3 .btn{flex:none;display:inline-grid;place-items:center;align-content:center;min-height:var(--con-size-control);padding:0 var(--con-space-sm);
  border:1px solid var(--con-console);border-radius:var(--con-radius-capsule);background:var(--con-console);color:var(--con-on-fill);
  font-size:13px;line-height:16px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.con-c3 .cd-as-activate{display:flex;align-items:center;gap:var(--con-space-xs);min-width:0}
.con-c3 .checkbox{flex:none;width:var(--con-space-md);height:var(--con-space-md);border:1px solid var(--con-control-border);
  border-radius:var(--con-radius-tag);background:var(--con-surface)}
.con-c3 .cd-as-activate-label{font-size:13px;line-height:16px;color:var(--con-text)}
.con-c3 .cd-as-contract{margin:0;font-size:13px;line-height:18px;color:var(--con-text2)}

.con-c3 .cd-tp-hint{margin:0;padding:var(--con-space-xs) var(--con-space-md) var(--con-space-md);font-size:13px;line-height:16px;color:var(--con-text3)}

/* ── Narrower than the library's own columns ───────────────────────────────────────────────────
   The row's fixed tracks (88 / 56 / 108 / 36 + a 120px name floor) need 490px of sheet. Only the
   smallest phones get below that (the base's zoom already covers the rest): there the sheet scales
   as one piece rather than dropping a column. Each step keeps its narrowest width at ≥ 490. */
.con-c3{container-type:inline-size}
@container (max-width:489.98px){.con-c3 .cd-dt-list{zoom:.9}}
@container (max-width:440.98px){.con-c3 .cd-dt-list{zoom:.81}}
@container (max-width:396.98px){.con-c3 .cd-dt-list{zoom:.73}}

/* ── c4.css ── */
/* ════════════════════════════════════════════════════════════════════════════════════════════
   C4 — a sequence on its trigger, held for the coach: the sequence builder's sheet, writing the
   starter library's "Habit Rescue" (server/src/lib/sequenceLibrary.ts), whole — name to foot line.
   Structure: client/src/coachdesk/SequenceBuilderPage.tsx (StepCard + the create-state sheet).
   Values:    coachdesk/sequences.css, forms.css (.cd-fm-q family, .cd-fm-hint, .cd-fm-add), templates.css
              (.cd-tb-*, .cd-tp-hint), coachdesk.css (.cd-kicker, `.cd-glass .field`), components/chips.css,
              buttons.css, fields.css, rows.css (.form-row), select.css, theme/spine.css. The console's
              root is 17px: 6rem = 102px.
   Every colour is a --con-* token. The "Drafts wait in Today" link wears the console's .cd-textlink
   dress (console tint, no underline at rest) since the 2026-09-28 fix; before that the console left it
   the browser's blue.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* The crop: the page's shoulder around the builder's glass sheet (`.cd-page-lit`, the glow shows). */
.con-c4{box-sizing:border-box;padding:var(--con-space-lg)}

/* The sheet: `.cd-tb-form.cd-glass.cd-sq-form` — one glass pane, sections 16 apart. */
.con-c4 .cd-sq-form{display:flex;flex-direction:column;gap:var(--con-space-md);min-width:0;padding:var(--con-space-md);
  background:var(--con-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--con-glass-edge);border-radius:var(--con-radius-card)}

/* FormRow, stacked: the caption label over its control, 4 apart. */
.con-c4 .form-row{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--con-space-xxs);min-width:0}
.con-c4 .form-row-label{font-size:13px;line-height:16px;font-weight:500;color:var(--con-text2)}
/* A field on glass (`.cd-glass .field`): surface2, no edge, the control radius. */
.con-c4 .field{display:block;min-width:0;min-height:var(--con-size-control);padding:0 var(--con-space-xs);border:1px solid transparent;
  border-radius:var(--con-radius-control);background:var(--con-surface2);font-size:15px;line-height:20px;color:var(--con-text)}
/* The name: an <input> at its own default width (20 characters at 15px = 167px of content), inside a
   320px column — the console does not stretch it. Its text sits on the input's centre line. */
.con-c4 .cd-sq-namefield{width:320px;max-width:100%}
.con-c4 .cd-sq-namefield .field{justify-self:start;width:100%;max-width:100%;line-height:30px;white-space:nowrap;overflow:hidden}  /* fills its column since the 2026-09-28 fix (sequences.css .is-stacked input.field) */

/* A section: its kicker (the fieldset legend) and, under it, the body 8 apart. */
.con-c4 .cd-kicker{margin:0;font:600 11px/14px var(--con-heading);letter-spacing:.6px;text-transform:uppercase;color:var(--con-text3)}
/* The two section kickers are fieldset legends in the console and carry the browser's 2px inline padding. */
.con-c4 .cd-sq-group > .cd-kicker{padding:0 2px}
.con-c4 .cd-sq-groupbody{display:flex;flex-direction:column;gap:var(--con-space-xs);min-width:0}
.con-c4 .cd-sq-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--con-space-xs);min-width:0}
.con-c4 .cd-fm-hint{margin:0;font-size:13px;line-height:18px;color:var(--con-text3)}

/* Chips (chips.css): a closed choice is a track; the engine triggers carry a dot, not a hue. */
.con-c4 .chip{display:inline-flex;flex:none;align-items:center;gap:var(--con-space-xxs);padding:0 var(--con-space-sm);border:1px solid transparent;
  border-radius:var(--con-radius-capsule);font-size:13px;line-height:16px;font-weight:500;white-space:nowrap;color:var(--con-text2)}
.con-c4 .chip-track{display:inline-flex;align-items:stretch;gap:var(--con-space-hair);padding:var(--con-space-hair);
  border-radius:var(--con-radius-capsule);background:var(--con-surface2);min-width:0}
.con-c4 .chip-track .chip{min-height:var(--con-size-control-sm);background:transparent}
.con-c4 .chip.is-capsule{min-height:var(--con-size-control);background:var(--con-surface);border-color:var(--con-control-border)}
.con-c4 .chip[data-pressed]{background:var(--con-console-tint);color:var(--con-console);border-color:transparent}
.con-c4 .cd-sq-dot{display:inline-block;width:var(--con-space-xxs);height:var(--con-space-xxs);margin-right:var(--con-space-xxs);
  border-radius:var(--con-radius-capsule);background:currentColor;vertical-align:middle}

/* The steps: insets on the sheet (recipe 11), each `.cd-fm-q.cd-sq-step`. */
.con-c4 .cd-sq-steps{display:flex;flex-direction:column;gap:var(--con-space-xs);min-width:0}
.con-c4 .cd-fm-q{display:flex;flex-direction:column;gap:var(--con-space-sm);min-width:0;margin:0 var(--con-space-sm) var(--con-space-sm);
  padding:var(--con-space-sm);border:1px solid var(--con-hairline);border-radius:var(--con-radius-card);background:var(--con-inset)}
.con-c4 .cd-fm-q-head{display:flex;align-items:center;justify-content:space-between;gap:var(--con-space-xs);min-width:0}
.con-c4 .cd-fm-q-kicker{flex:none;font:600 11px/14px var(--con-heading);letter-spacing:.6px;text-transform:uppercase;color:var(--con-text3)}
.con-c4 .cd-fm-q-tools{display:flex;align-items:center;gap:var(--con-space-xxs);flex:none}

/* The Button primitive at sm: the icon buttons are `ghost` (outlined, surface), Remove / Add step `quiet`. */
.con-c4 .btn{flex:none;display:inline-grid;place-items:center;align-content:center;min-height:var(--con-size-control-sm);
  padding:0 var(--con-space-xs);border:1px solid transparent;border-radius:var(--con-radius-control);font-size:13px;line-height:16px;
  font-weight:500;white-space:nowrap;color:var(--con-text2);background:transparent}
.con-c4 .btn-icon{width:var(--con-size-control-sm);padding:0;border-color:var(--con-control-border);background:var(--con-surface);
  font-size:14px;line-height:1}
.con-c4 .btn[data-disabled]{opacity:.5}

/* The day offset, counted from the trigger: − Same day + on a surface2 capsule. */
.con-c4 .cd-sq-offset{display:inline-flex;align-items:center;align-self:flex-start;gap:var(--con-space-xxs);padding:0 var(--con-space-xxs);
  border-radius:var(--con-radius-capsule);background:var(--con-surface2)}
.con-c4 .cd-sq-offset-text{min-width:102px;text-align:center;font-size:13px;line-height:16px;font-weight:600;color:var(--con-text);
  font-variant-numeric:tabular-nums}

/* The message: a textarea at rows=3 (15/22, 4 / 8 inset), wider text scrolls under its edge. */
.con-c4 .field.is-area{position:relative;height:76px;padding:var(--con-space-xxs) var(--con-space-xs);line-height:22px;overflow:hidden}
/* The browser's resize grip on a vertically resizable textarea. */
.con-c4 .field.is-area::after{content:'';position:absolute;right:2px;bottom:2px;width:9px;height:9px;
  background:linear-gradient(135deg,transparent 0 46%,var(--con-text3) 46% 54%,transparent 54% 71%,var(--con-text3) 71% 79%,transparent 79%)}

/* The add row: a labelled Select (FormRow, side by side) and a quiet act with a leading plus. */
.con-c4 .cd-fm-add{display:flex;align-items:center;gap:var(--con-space-xs);flex-wrap:wrap;min-width:0}
.con-c4 .cd-fm-addrow{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--con-space-xxs) var(--con-space-xs);
  min-height:var(--con-size-control);min-width:0}
.con-c4 .dd-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--con-space-xs);min-width:0}
.con-c4 .dd-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.con-c4 .dd-chev{position:relative;flex:none;width:10px;height:10px}
.con-c4 .dd-chev::before,.con-c4 .dd-chev::after{content:'';position:absolute;top:3.5px;width:6.4px;height:1.8px;border-radius:1px;background:var(--con-text3)}
.con-c4 .dd-chev::before{left:0;transform:rotate(45deg)}
.con-c4 .dd-chev::after{right:0;transform:rotate(-45deg)}
.con-c4 .cd-tb-addglyph{margin-inline-end:var(--con-space-xxs);color:var(--con-text3)}
.con-c4 .cd-fm-add .btn{display:inline-flex;align-items:center}

.con-c4 .cd-sq-link{color:var(--con-console);text-decoration:none}  /* the console's .cd-textlink dress since the 2026-09-28 fix: console tint, underline only on hover */
.con-c4 .cd-tp-hint{margin:var(--con-space-xs) 0 0;font-size:13px;line-height:16px;color:var(--con-text3)}

/* ── Narrower than the trigger track ───────────────────────────────────────────────────────────
   The five triggers are ONE capsule track (676px) that the console never wraps. Below the width it
   needs, the sheet scales as one piece — no reflow, no broken track. Each step keeps ≥ 710px. */
.con-c4{container-type:inline-size}
@container (max-width:709.98px){.con-c4 .cd-sq-form{zoom:.93}}
@container (max-width:659.98px){.con-c4 .cd-sq-form{zoom:.86}}
@container (max-width:609.98px){.con-c4 .cd-sq-form{zoom:.8}}
@container (max-width:567.98px){.con-c4 .cd-sq-form{zoom:.74}}
@container (max-width:524.98px){.con-c4 .cd-sq-form{zoom:.68}}
@container (max-width:482.98px){.con-c4 .cd-sq-form{zoom:.62}}
@container (max-width:439.98px){.con-c4 .cd-sq-form{zoom:.56}}

/* ── c5.css ── */
/* ════════════════════════════════════════════════════════════════════════════════════════════
   C5 — bill your clients and track payments: Studio › Revenue, title to the last subscription row.
   Structure: client/src/coachdesk/RevenuePage.tsx:94-266 (the page head, the one figures sheet, the
              subscriptions table). Chosen over PaymentsPage.tsx because it is the console's only
              table that carries the PACKAGE a client is billed on (RevenuePage.tsx:195-201); the
              Payments ledger is Client · Amount · Status · Date (PaymentsPage.tsx:224-231).
   Values:    coachdesk/pageHead.css (.cd-pagehead*, the title tier), components/surfaces.css
              (.crumbs-item), coachdesk/coachdesk.css:198 (.cd-lede, 13/18 — measured on the live
              Today capture), coachdesk/shell.css:163 (.cd-glass), coachdesk/studio.css (.cd-table,
              .cd-figure*, .cd-count*, .cd-chip-warning, and the .cd-money dress at 917-978),
              theme/spine.css tiers. Every colour is a --con-* token.
   Lit page: `cd-page cd-page-lit` paints no ground, so the frame's console glow stays on.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

.con-c5{box-sizing:border-box}

/* `.cd-page`: one flex column, the parent owns every gap (24). The page's own 40/24/64 insets are
   cropped to an even 24 — the runway below the last sheet is page scroll, not content. */
.con-c5 .cd-page{display:flex;flex-direction:column;gap:var(--con-space-lg);min-width:0;padding:var(--con-space-lg)}

/* The page-head contract: crumb, title, lede as one lead block, 8 apart. */
.con-c5 .cd-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--con-space-md);min-width:0}
.con-c5 .cd-pagehead-lead{display:flex;flex-direction:column;gap:var(--con-space-xs);min-width:0}
.con-c5 .crumbs-item{display:flex;align-items:baseline;gap:var(--con-space-xxs);
  font:600 11px/14px var(--con-heading);letter-spacing:.6px;text-transform:uppercase}
.con-c5 .crumbs-link{color:var(--con-text2)}
.con-c5 .cd-title{margin:0;font:600 28px/36px var(--con-heading);letter-spacing:-.02em;color:var(--con-text)}
.con-c5 .cd-lede{margin:0;max-width:62ch;font:400 13px/18px var(--con-sans);color:var(--con-text2)}

/* Recipe 1, the glass sheet — 72% surface over the ground, a 16% ink edge, the card radius. */
.con-c5 .cd-glass{background:var(--con-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--con-glass-edge);border-radius:var(--con-radius-card)}

/* The figures sheet: the MRR (dataL, the numeral face — studio.css:351) and the two counts. The
   MRR is `revenue.mrrCents`, and it is NOT the sum of the rows below: monthlyCents(39900,'month',3)
   = 13300, so $149 + $199 + $149 + $199 + $133 = $829; the past-due row is outside MRR_STATUSES. */
.con-c5 .cd-money-figures{display:flex;flex-direction:column;gap:var(--con-space-sm);padding:var(--con-space-md);min-width:0}
.con-c5 .cd-figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--con-space-xs)}
.con-c5 .cd-figure-value{font:700 22px/28px var(--con-heading);letter-spacing:-.2px;font-variant-numeric:tabular-nums;color:var(--con-text)}
.con-c5 .cd-figure-unit{font:400 15px/20px var(--con-sans);color:var(--con-text2)}
.con-c5 .cd-counts{display:flex;flex-wrap:wrap;gap:var(--con-space-lg)}
.con-c5 .cd-count-label{display:block;font:400 13px/16px var(--con-sans);color:var(--con-text3)}
.con-c5 .cd-count-value{font:600 17px/24px var(--con-sans);font-variant-numeric:tabular-nums;color:var(--con-text)}

/* The table sheet. Revenue's section carries no title, so the wrap's own 16 of lead stays. */
.con-c5 .cd-sec{padding:var(--con-space-md);min-width:0}
.con-c5 .cd-table-wrap{margin-top:var(--con-space-md);overflow-x:auto}
.con-c5 .cd-table{width:100%;border-collapse:collapse;font:400 13px/16px var(--con-sans)}
/* Column heads in the kicker tier (13/16 · 600 · 0.6px, the display face). */
.con-c5 .cd-table th{text-align:left;padding:0 var(--con-space-sm) var(--con-space-xs) 0;
  font:600 13px/16px var(--con-heading);letter-spacing:.6px;text-transform:uppercase;color:var(--con-text3);
  border-bottom:1px solid var(--con-hairline);white-space:nowrap}
.con-c5 .cd-table td{padding:var(--con-space-xs) var(--con-space-sm) var(--con-space-xs) 0;color:var(--con-text);
  border-bottom:1px solid var(--con-hairline);vertical-align:middle}
.con-c5 .cd-table tr:last-child td{border-bottom:none}
/* `.cd-table-lift` gives the first cell a 12px lane for the hover spine (at rest: only the lane). */
.con-c5 .cd-table th:first-child,.con-c5 .cd-table td:first-child{padding-left:var(--con-space-sm)}
/* Recipe 9 — the money row is 48 tall. */
.con-c5 .cd-table tbody tr{height:var(--con-size-row-double)}
.con-c5 .cd-num{font-variant-numeric:tabular-nums;white-space:nowrap}
/* The secondary ink — Package, Renews, the price's cadence, the status word (studio.css:325-326).
   Written for the table as `.cd-table .cd-td-2` too, as the console now writes it: the cell rule
   above sets `color` and outranks a bare class, which is what left Package and Renews in full
   text ink until 2026-09-28. */
.con-c5 .cd-td-2,.con-c5 .cd-table .cd-td-2{color:var(--con-text2)}
/* The past-due mark (studio.css:393): amber tint, full-strength amber edge, TEXT ink — never red. */
.con-c5 .cd-chip-warning{display:inline-block;padding:var(--con-space-hair) var(--con-space-xs);border-radius:var(--con-radius-capsule);
  background:var(--con-warning-tint);color:var(--con-text);border:1px solid var(--con-warning);
  font:600 13px/16px var(--con-sans);white-space:nowrap}

/* ── c6.css ── */
/* ════════════════════════════════════════════════════════════════════════════════════════════
   C6 — all their progress, one place: Marcus Bell's profile, open on the Body tab.
   Structure: client/src/profile/ProfilePage.tsx:1156-1276 (IdentityHeader, HeroStats, the segment
              rail, the segment body) and :1053-1075 (the Body segment: Body | Measurements,
              Check-ins | Progress photos); the cards are ContextColumn.tsx's BodyCard (:972),
              MeasurementsCard (:745), CheckInsCard (:1892) and ProgressPhotosCard (:920); the chart
              is components/WeightChart.tsx (console variant, no phase — BodyCard passes none) and
              the check-in graph components/AccentTrend.tsx.
   Values:    profile/profile.css — the dress at 3036-3370 (.prof, .panel, the header, the stats, the
              rail) over the base rules it re-dresses; profile/bodyTab.css (the whole Body sheet);
              components/weightChart.css, accentTrend.css, chips.css (.chip-track), controls.css
              (.segmented.is-track), surfaces.css (.panel, .crumbs-item); coachdesk/clientAvatar.css,
              coachdesk.css (.cd-phase-chip), sweep/sweep.css (.sweep-basis, .sweep-action);
              theme/spine.css tiers. Every colour is a --con-* token.
   Ground: `.prof` paints --sweep-bg (profile.css:459) and is not a lit page, so the console glow
   does not reach it — measured on the production capture: the empty ground reads (10,12,16) and a
   glass sheet over it (18,20,24), i.e. 72% surface over plain ink. The frame's glow is switched off.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.con-c6{box-sizing:border-box;background-image:none;container:c6 / inline-size}

/* `.prof` (the dress): one column, every band 12 apart. Its 8/24/64 insets are cropped to 20/24/24. */
.con-c6 .prof{display:flex;flex-direction:column;gap:var(--con-space-sm);min-width:0;
  padding:var(--con-space-gutter) var(--con-space-lg) var(--con-space-lg);font:400 15px/20px var(--con-sans);color:var(--con-text)}

/* ── The identity header (IdentityHeader.tsx; profile.css §1.1 at 3175-3265) ── */
.con-c6 .prof-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--con-space-md);
  padding:var(--con-space-xs) var(--con-space-xxs) 0;min-width:0}
.con-c6 .prof-id{display:flex;align-items:center;gap:var(--con-space-sm);min-width:0}
.con-c6 .prof-id-text{min-width:0}
/* ClientAvatar at `lg` (48), no status dot on the client's own page (state={null}). */
.con-c6 .cd-av{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:var(--con-radius-capsule);background:var(--con-surface2);border:1px solid var(--con-hairline)}
.con-c6 .cd-av-initials{font:700 15px/1 var(--con-sans);letter-spacing:.02em;color:var(--con-text2)}
/* The declared trail as the band's kicker: `Clients`, the micro tier in the display face. */
.con-c6 .crumbs-item{display:flex;align-items:baseline;gap:var(--con-space-xxs);
  font:600 11px/14px var(--con-heading);letter-spacing:.6px;text-transform:uppercase}
.con-c6 .crumbs-link{color:var(--con-text2)}
.con-c6 .prof-name{margin:var(--con-space-xxs) 0 0;font:600 28px/36px var(--con-heading);letter-spacing:-.02em;color:var(--con-text)}
.con-c6 .prof-header-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--con-space-xs);margin-top:var(--con-space-xxs);min-width:0}
/* PhaseChip: a capsule on its phase tint, micro type on a 20px line. */
.con-c6 .cd-phase-chip{display:inline-flex;align-items:center;padding:0 var(--con-space-xs);border-radius:var(--con-radius-capsule);
  font:600 11px/20px var(--con-sans);white-space:nowrap;color:var(--con-phase-cut);background:var(--con-phase-cut-tint);border:1px solid transparent}
.con-c6 .sweep-basis{margin-top:var(--con-space-xxs);font:400 13px/16px var(--con-sans);color:var(--con-text2)}
.con-c6 .prof-since{margin-top:var(--con-space-xxs);font:400 11px/14px var(--con-sans);color:var(--con-text3)}
/* The header's doors: the unit toggle's capsule track, then two capsule acts in the display face. */
.con-c6 .prof-header-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--con-space-xs);padding-bottom:var(--con-space-xxs);min-width:0}
.con-c6 .segmented{display:inline-flex;max-width:100%;gap:var(--con-space-hair);padding:var(--con-space-hair);
  background:var(--con-surface2);border:1px solid transparent;border-radius:var(--con-radius-capsule)}
.con-c6 .segmented-item{display:inline-flex;align-items:center;min-height:var(--con-size-control-sm);padding:0 var(--con-space-sm);
  border-radius:var(--con-radius-capsule);font:600 13px/16px var(--con-sans);color:var(--con-text2);white-space:nowrap}
.con-c6 .segmented-item.is-on{background:var(--con-console-tint);color:var(--con-console)}
.con-c6 .sweep-action{display:inline-flex;align-items:center;justify-content:center;min-height:var(--con-size-control-lg);
  padding:0 var(--con-space-md);border:1px solid transparent;border-radius:var(--con-radius-capsule);
  background:var(--con-surface2);color:var(--con-text);font:600 13px/16px var(--con-heading);white-space:nowrap}
.con-c6 .prof-act-fill{background:var(--con-console);color:var(--con-on-fill)}
.con-c6 .prof-act-icon{flex:none;width:var(--con-size-icon-sm);height:var(--con-size-icon-sm);margin-right:var(--con-space-xxs);
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── Four glass stats (HeroStats.tsx; profile.css §1.2) ── */
.con-c6 .prof-statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--con-space-sm);min-width:0}
.con-c6 .prof-stat{display:flex;flex-direction:column;gap:var(--con-space-xxs);min-width:0;padding:var(--con-space-sm) var(--con-space-md);
  background:var(--con-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--con-glass-edge);border-radius:var(--con-radius-card)}
.con-c6 .prof-stat-label{font:600 13px/16px var(--con-heading);letter-spacing:.6px;text-transform:uppercase;color:var(--con-text3)}
.con-c6 .prof-stat-value{font:700 22px/28px var(--con-heading);letter-spacing:-.2px;font-variant-numeric:tabular-nums;color:var(--con-text);white-space:nowrap}
.con-c6 .prof-stat-tail{margin-left:var(--con-space-hair);font-size:17px;font-weight:500;color:var(--con-text3)}
.con-c6 .prof-stat-basis{font:400 11px/14px var(--con-sans);color:var(--con-text2)}

/* ── The seven views as one capsule track (profile.css §1.3), the check-in fact at its quiet end ── */
.con-c6 .prof-view-row{display:flex;align-items:center;justify-content:space-between;gap:var(--con-space-md);min-width:0;padding:0 var(--con-space-xxs)}
.con-c6 .prof-view-tabs{display:flex;align-items:stretch;flex:0 1 auto;min-width:0;gap:var(--con-space-hair);padding:var(--con-space-hair);
  border-radius:var(--con-radius-capsule);background:var(--con-surface2);overflow:hidden}
.con-c6 .prof-view-tab{display:inline-flex;align-items:center;min-height:var(--con-size-control-sm);padding:0 var(--con-space-sm);
  border-radius:var(--con-radius-capsule);font:600 13px/16px var(--con-heading);color:var(--con-text2);white-space:nowrap}
.con-c6 .prof-view-tab.is-on{background:var(--con-console-tint);color:var(--con-console)}
.con-c6 .prof-view-aside{flex:none;font:400 13px/16px var(--con-sans);color:var(--con-text3);white-space:nowrap}
/* The console drops this caption below 900px (profile.css:3369); here, when the frame is too narrow
   to hold the seven tabs and the caption on one row. */
@container c6 (max-width:760px){.con-c6 .prof-view-aside{display:none}}

/* ── The Body segment: two tracks, the charts' wider (bodyTab.css §1), 12 apart (the dress) ── */
.con-c6 .prof-seg-body{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:var(--con-space-sm);align-items:start;min-width:0}
.con-c6 .prof-cell{min-width:0}
/* Measurements takes the first row's full height, so the right column sits flush (bodyTab.css §1). */
.con-c6 .prof-cell[data-cell="measurements"]{align-self:stretch;display:flex}
.con-c6 .prof-cell[data-cell="measurements"] > .panel{flex:1}
/* THE CROP (the landing's, not the console's): the Check-ins sheet runs on below the photos in the
   console; here it is clipped to the row the photos set, and fades — the page continues. */
.con-c6 .prof-cell[data-cell="checkins"]{align-self:stretch;position:relative}
.con-c6 .prof-cell[data-cell="checkins"] > .panel{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,var(--con-bg) 84%,transparent);mask-image:linear-gradient(180deg,var(--con-bg) 84%,transparent)}

/* Every panel is a glass sheet; its head is a name in the display face over a hairline. */
.con-c6 .panel{min-width:0;padding:var(--con-space-md);background:var(--con-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--con-glass-edge);border-radius:var(--con-radius-card)}
.con-c6 .panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--con-space-xs);
  padding-bottom:var(--con-space-sm);margin-bottom:var(--con-space-sm);border-bottom:1px solid var(--con-hairline)}
.con-c6 .panel-title{font:600 17px/24px var(--con-heading);color:var(--con-text)}

/* ── Body: the three lead facts, then the weight chart ── */
.con-c6 .prof-body-act{font:600 13px/16px var(--con-sans);color:var(--con-console);white-space:nowrap}
.con-c6 .prof-body-lead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--con-space-xs) var(--con-space-gutter);
  margin-bottom:var(--con-space-xs);min-width:0}
.con-c6 .prof-body-fact{display:flex;flex-direction:column;align-items:flex-start;gap:var(--con-space-xxs);min-width:0}
.con-c6 .prof-body-fact.is-end{margin-left:auto;align-items:flex-end;text-align:right}
.con-c6 .prof-body-kicker{font:600 11px/14px var(--con-heading);letter-spacing:.6px;text-transform:uppercase;color:var(--con-text3)}
.con-c6 .prof-body-figure{font:700 22px/28px var(--con-heading);letter-spacing:-.2px;font-variant-numeric:tabular-nums;color:var(--con-text);white-space:nowrap}
.con-c6 .prof-body-unit{font-size:13px;font-weight:500;color:var(--con-text3)}
.con-c6 .prof-body-sub,.con-c6 .prof-body-move{font:600 17px/24px var(--con-heading);font-variant-numeric:tabular-nums;color:var(--con-text2);white-space:nowrap}
.con-c6 .prof-body-window{font:500 13px/16px var(--con-sans);color:var(--con-text2)}
/* WeightChart, console variant: the head's figure and delta are hidden on this sheet (bodyTab.css),
   so only the entries count remains, right-aligned. The plot is its 560×120 viewBox at a fixed 120px
   height, scaled to fit — as the console draws it. */
.con-c6 .wc-head{display:flex;align-items:baseline;gap:var(--con-space-xs);margin-bottom:var(--con-space-xxs)}
.con-c6 .wc-window{margin-left:auto;font:400 11px/14px var(--con-sans);color:var(--con-text3)}
.con-c6 .wc-svg{display:block;width:100%;height:120px}
.con-c6 .wc-axis{fill:var(--con-text3);font:400 11px/14px var(--con-sans)}
.con-c6 .wc-grid{stroke:var(--con-surface3);stroke-width:1}
.con-c6 .wc-trend{fill:none;stroke:var(--con-console);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.con-c6 .wc-dot{fill:var(--con-text3)}
.con-c6 .wc-dot.is-latest{fill:var(--con-console)}
.con-c6 .wc-readout{margin:0;min-height:var(--con-space-md)}

/* ── Measurements: the sites that moved, three across; each tile an inset ── */
.con-c6 .prof-meas-taken{font:500 13px/16px var(--con-sans);color:var(--con-text3);white-space:nowrap}
.con-c6 .prof-measures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--con-space-xs)}
.con-c6 .prof-measure-face{display:flex;flex-direction:column;align-items:flex-start;gap:var(--con-space-hair);min-width:0;min-height:var(--con-size-control);
  padding:var(--con-space-xs) var(--con-space-sm);background:var(--con-inset);border:1px solid var(--con-hairline);border-radius:var(--con-radius-card)}
.con-c6 .prof-measure-kicker{font:600 11px/14px var(--con-heading);letter-spacing:.6px;text-transform:uppercase;color:var(--con-text3)}
.con-c6 .prof-measure-now{font:700 17px/24px var(--con-heading);font-variant-numeric:tabular-nums;color:var(--con-text);white-space:nowrap}
.con-c6 .prof-measure-delta{font:400 11px/14px var(--con-heading);font-variant-numeric:tabular-nums;color:var(--con-text3)}

/* ── Check-ins: the four-way capsule track over one accent graph, then the weeks ── */
.con-c6 .prof-checkin-aside{font:500 13px/16px var(--con-sans);color:var(--con-text3);white-space:nowrap}
.con-c6 .prof-checkin-graph{margin:0 0 var(--con-space-sm)}
.con-c6 .prof-checkin-tabs{display:inline-flex;align-items:stretch;max-width:100%;gap:var(--con-space-hair);padding:var(--con-space-hair);
  border-radius:var(--con-radius-capsule);background:var(--con-surface2);overflow:hidden}
.con-c6 .prof-checkin-tab{display:inline-flex;align-items:center;min-height:var(--con-size-control-sm);padding:0 var(--con-space-sm);
  border-radius:var(--con-radius-capsule);font:600 13px/16px var(--con-heading);color:var(--con-text2);white-space:nowrap}
.con-c6 .prof-checkin-tab.is-on{background:var(--con-console-tint);color:var(--con-console)}
.con-c6 .prof-checkin-panel{margin-top:var(--con-space-sm)}
.con-c6 .act-svg{display:block;width:100%;height:auto}
.con-c6 .act-area{fill:var(--con-console-tint)}
.con-c6 .act-line{fill:none;stroke:var(--con-console);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.con-c6 .act-end{fill:var(--con-console)}
.con-c6 .prof-checkin{border-bottom:1px solid var(--con-hairline)}
.con-c6 .prof-checkin-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--con-space-xxs);min-height:var(--con-size-control);padding:var(--con-space-xxs) 0}
.con-c6 .prof-checkin-head > span:first-child{white-space:nowrap}
.con-c6 .prof-checkin-scales{display:flex;flex-wrap:wrap;gap:var(--con-space-xs) var(--con-space-md);margin-top:var(--con-space-xxs)}
.con-c6 .prof-checkin-scale{display:inline-flex;align-items:center;gap:var(--con-space-xs)}
.con-c6 .prof-checkin-scale-lab{font:400 13px/16px var(--con-sans);color:var(--con-text2)}
.con-c6 .prof-checkin-dots{display:inline-flex;gap:var(--con-space-hair)}
.con-c6 .prof-checkin-dots i{display:block;width:8px;height:8px;border-radius:50%;border:1px solid var(--con-text3)}
.con-c6 .prof-checkin-dots i.on{background:var(--con-console);border-color:var(--con-console)}
.con-c6 .prof-checkin-notes-list{margin-top:var(--con-space-lg);display:flex;flex-direction:column;gap:var(--con-space-xs)}
.con-c6 .prof-checkin-notes-kicker{margin:0;font:600 11px/14px var(--con-heading);letter-spacing:.6px;text-transform:uppercase;color:var(--con-text3)}
.con-c6 .prof-checkin-note{display:flex;align-items:baseline;gap:var(--con-space-xs);min-width:0}
.con-c6 .prof-checkin-note-week{flex:none;font:400 11px/16px var(--con-heading);font-variant-numeric:tabular-nums;color:var(--con-text3)}
.con-c6 .prof-checkin-notes{margin:0;min-width:0;font:400 13px/18px var(--con-sans);color:var(--con-text2)}

/* ── Progress photos: three 3:4 plates across, each captioned pose | date. The plates are DRAWN
   PLACEHOLDERS (a figure in --con-surface3 on --con-surface2): the showcase stages no photos
   (seed-showcase.ts:59-60), and the console renders the client's own private images here. ── */
.con-c6 .prof-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--con-space-xs)}
.con-c6 .prof-photo{display:flex;flex-direction:column;min-width:0}
.con-c6 .prof-photo-img{display:block;width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:var(--con-radius-card);background:var(--con-surface2)}
.con-c6 .prof-photo-img svg{width:100%;height:100%}
.con-c6 .prof-photo-img svg *{fill:var(--con-surface3)}
.con-c6 .prof-photo-cap{margin-top:auto;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 var(--con-space-xxs);
  padding-top:var(--con-space-xxs);min-width:0}
/* Fluid-width care (the landing's, not a console rule): below ~720px a plate is narrower than
   "FRONT" + "Sep 27", so the two words wrap as whole words instead of colliding; likewise a girth
   tile's "9 readings" never splits. Neither changes the 840px render. */
.con-c6 .prof-photo-pose,.con-c6 .prof-photo-date,.con-c6 .nb{white-space:nowrap}
.con-c6 .prof-photo-pose{font:600 11px/14px var(--con-heading);letter-spacing:.6px;text-transform:uppercase;color:var(--con-text2)}
.con-c6 .prof-photo-date{font:400 13px/16px var(--con-sans);font-variant-numeric:tabular-nums;color:var(--con-text3)}

/* ── c7.css ── */
/* ════════════════════════════════════════════════════════════════════════════════════════════
   C7 — the covenant: a generated program, still a DRAFT, with the promote act pinned below it.
   Structure: client/src/coachdesk/TemplateDraftPanel.tsx:657-927 (the pane: head + status chip :661-664,
              the §7.8 constraints report :679-692, the split and its rationale chips :703-708, the
              sessions :714-817, the pinned foot :891-925), MovementRow :129-217, RationaleChip
              :103-125; hosted in TemplatesPage.tsx:1041 as `.cd-dt-pane.cd-glass`.
   Content:   the ENGINE's own output — server/src/services/templateGenerator (pure, v1.6.0) run over
              the production verified-pool export (server/tests/helpers/prodPool.ts, 307 candidates)
              at the door's DEFAULT_SEED 1 for hypertrophy · intermediate · 4 days · 75 min · full gym
              · 5-week block; the name is the door's default (controllers/templateDrafts.ts:161-163).
              Upper A is cropped after its third movement; the program runs on under the foot.
   Values:    coachdesk/templateDrafts.css (the draft), templates.css:614-627 (the pinned glass foot)
              and :291-356 (.cd-tp-btn, .cd-tp-hint), dayTemplates.css (.cd-dt-pane, head, kicker),
              coachdesk.css:354 (a sheet's primary is a capsule), components/chips.css (tag · neutral),
              buttons.css (.btn-primary md, the ghost sm icon), SortableList.tsx:202 (the grip).
              The pane inherits the console root's 17/24 body tier (index.css). Every colour a --con-*.
   Lit page: `cd-tp cd-page-lit` paints no ground, so the frame's console glow stays on.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.con-c7{box-sizing:border-box;container:c7 / inline-size}

/* The bench sheet, as a window. In the console the page scrolls UNDER a glass foot pinned to the
   region's bottom edge (templates.css:585-627); a fixed-height pane with the foot at its floor is
   what a coach sees mid-scroll. The draft runs on below the window: its visible part is clipped at
   the foot's top edge and fades there, instead of showing through the glass — the nested backdrop
   blur does not render in every engine (headless Chromium drew the row's buttons crisp through it),
   and ghosted buttons behind "Add to library" read as a fault. */
.con-c7 .cd-dt-pane{position:relative;display:flex;flex-direction:column;margin:var(--con-space-gutter);height:820px;overflow:hidden;
  background:var(--con-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--con-glass-edge);border-radius:var(--con-radius-card);font:400 17px/24px var(--con-sans);color:var(--con-text)}
.con-c7 .td{flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:var(--con-space-md);
  padding:var(--con-space-md) var(--con-space-md) 0;
  -webkit-mask-image:linear-gradient(180deg,var(--con-bg) calc(100% - 40px),transparent);mask-image:linear-gradient(180deg,var(--con-bg) calc(100% - 40px),transparent)}
.con-c7 .td > *{flex:none}
/* Narrower frames wrap the draft's sentences onto more lines; the window grows by the difference so
   the first movement's acts (Swap · Adjust · reorder · Remove) stay in view at every width. */
@container c7 (max-width:720px){.con-c7 .cd-dt-pane{height:872px}}

/* The head band: the draft's name as the dress kicker, then its status as a neutral tag. */
.con-c7 .cd-dt-editor-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--con-space-xs) var(--con-space-sm);margin-bottom:var(--con-space-sm)}
.con-c7 .cd-tp-kicker{font:600 11px/14px var(--con-heading);letter-spacing:.6px;text-transform:uppercase;color:var(--con-text3)}
/* Chip shape="tag" tone="neutral": a quiet data label — surface2 inside a hairline, the tag radius. */
.con-c7 .chip{display:inline-flex;align-items:center;gap:var(--con-space-xxs);padding:0 var(--con-space-xxs);white-space:nowrap;
  border:1px solid var(--con-hairline);border-radius:var(--con-radius-tag);background:var(--con-surface2);color:var(--con-text2);
  font:600 13px/16px var(--con-heading);font-variant-numeric:tabular-nums}

/* §7.8 / R11 — the guard-holds register: one neutral keyline, the engine's own sentences. */
.con-c7 .td-constraints{display:flex;flex-direction:column;gap:var(--con-space-xs);border-left:2px solid var(--con-text3);
  padding-left:var(--con-space-sm);color:var(--con-text2)}
.con-c7 .td-constraints-frame{margin:0;color:var(--con-text)}
.con-c7 .td-constraint-line{margin:0}
.con-c7 .td-under{margin:0;padding-left:var(--con-space-md);color:var(--con-text3)}
.con-c7 .td-under li{font:600 13px/16px var(--con-heading);font-variant-numeric:tabular-nums}

.con-c7 .td-split{margin:0;color:var(--con-text2);font:600 13px/16px var(--con-heading);font-variant-numeric:tabular-nums}

/* THE rationale chip — on every decision, never behind a hover: the grade as a citation, the
   coach's sentence, the mechanism one step quieter, the source. */
.con-c7 .td-rationale{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--con-space-xs);margin:0;
  font:400 13px/16px var(--con-sans);color:var(--con-text2)}
.con-c7 .td-grade{flex:none;padding:0 var(--con-space-xxs);border:1px solid var(--con-hairline);border-radius:var(--con-radius-tag);
  font:600 13px/16px var(--con-heading);font-variant-numeric:tabular-nums;color:var(--con-text3)}
.con-c7 .td-why{flex:1 1 240px;min-width:0}
.con-c7 .td-detail{flex:1 1 100%;min-width:0;font:600 13px/16px var(--con-heading);color:var(--con-text3)}
.con-c7 .td-source{font:600 13px/16px var(--con-heading);color:var(--con-text3)}

/* A session is an inset unit in the sheet; a movement is the one inset allowed inside it. */
.con-c7 .td-session{display:flex;flex-direction:column;gap:var(--con-space-sm);padding:var(--con-space-sm);
  background:var(--con-inset);border:1px solid var(--con-hairline);border-radius:var(--con-radius-card)}
.con-c7 .td-session-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--con-space-md)}
.con-c7 .td-session-name{font:500 17px/24px var(--con-sans);color:var(--con-text)}
/* `.td-session-head span` is text3 in the console; the name there is an h3, so it never matches. */
.con-c7 .td-session-head > .td-session-len,.con-c7 .td-session-head > .td-day-moves{color:var(--con-text3)}
.con-c7 .td-session-len{font:600 13px/16px var(--con-heading);font-variant-numeric:tabular-nums}
.con-c7 .td-day-moves{display:inline-flex;gap:var(--con-space-xxs);align-self:center}
.con-c7 .td-moves{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--con-space-sm)}
.con-c7 .td-move{position:relative;display:flex;flex-direction:column;gap:var(--con-space-xxs);padding:var(--con-space-sm);
  background:var(--con-inset);border-radius:var(--con-radius-data)}
.con-c7 .td-move-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--con-space-sm)}
.con-c7 .td-move-name{font-weight:600;color:var(--con-text)}
.con-c7 .td-move-presc{font:600 13px/16px var(--con-heading);font-variant-numeric:tabular-nums;color:var(--con-text)}
.con-c7 .td-move-rest{font:600 13px/16px var(--con-heading);font-variant-numeric:tabular-nums;color:var(--con-text2)}
.con-c7 .td-move-tags{display:flex;flex-wrap:wrap;gap:var(--con-space-xxs)}
.con-c7 .td-load{margin:0;font:600 13px/16px var(--con-heading);color:var(--con-text2)}
.con-c7 .td-move-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--con-space-xs)}
/* The row acts: `.cd-tp-btn` (the Button sm-ghost recipe) in the bench's capsule shoulder. */
.con-c7 .cd-tp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--con-size-control-sm);padding:0 var(--con-space-xs);
  font:500 13px/16px var(--con-sans);color:var(--con-text2);background:var(--con-surface);border:1px solid var(--con-control-border);
  border-radius:var(--con-radius-capsule);white-space:nowrap}
/* RowHandle: an IconButton (ghost, sm) holding the six-dot grip. */
.con-c7 .btn-icon{display:inline-grid;place-items:center;flex:none;width:var(--con-size-control-sm);height:var(--con-size-control-sm);padding:0;
  color:var(--con-text2);background:var(--con-surface);border:1px solid var(--con-control-border);border-radius:var(--con-radius-control)}
.con-c7 .btn-icon svg{fill:currentColor}

/* The pinned foot: glass across the sheet's full width, its bottom corners the sheet's own. The
   one filled act, and the covenant said at the moment it is easiest to forget. */
.con-c7 .td-foot{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--con-space-sm);
  padding:var(--con-space-sm) var(--con-space-md);background:var(--con-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-top:1px solid var(--con-glass-edge);border-radius:0 0 var(--con-radius-card) var(--con-radius-card)}
.con-c7 .btn-primary{display:inline-grid;place-items:center;min-height:var(--con-size-control);padding:0 var(--con-space-sm);
  font:500 13px/16px var(--con-sans);font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--con-on-fill);background:var(--con-console);border:1px solid var(--con-console);border-radius:var(--con-radius-capsule)}
.con-c7 .cd-tp-hint{margin:var(--con-space-xs) 0 0;min-width:0;font:400 13px/16px var(--con-sans);color:var(--con-text3)}

/* ── c8.css ── */
/* ════════════════════════════════════════════════════════════════════════════════════════════
   C8 — the recipe builder: "Chicken & quinoa power bowl" open in the builder (edit), the food
   database above it, the ribbon pinned to the sheet's floor.
   Structure: client/src/coachdesk/RecipeBuilderPage.tsx:470-846 (the grid :470, the search pane
              :472-548, the building pane :551-845: name :559-566, description :571-579, the
              ingredient rows :588-710, servings :717-742, instructions :748-758, the ribbon :778-844).
   Values:    coachdesk/recipes.css — grid :101-134 (ONE column below a 900px window, which is what
              the console draws at this width), pane :150-153, kicker :166-176, finder :183-214,
              result/row type :293-329, name field :358-375, meta :379-381 and its one-line field
              filling the row :383-393, instructions :396-398, rows :402-450, ribbon figures
              :535-639, servings :643-684, pinned foot :733-765;
              components/fields.css (`.cd-glass .field`), buttons.css (IconButton ghost sm, Button
              primary lg), coachdesk/shell.css (.cd-glass). Measured on the running console at an
              898px window (the grid 790 wide, as here). Every colour is a --con-* token.
   Content:   the showcase recipe (server/prisma/seed-showcase.ts:418-419) as the builder loads it —
              the five RecipeIngredient rows (USDA descriptions, grams, stored kcal and macros). The
              ribbon is the console's own math: summed stored kcal 1,074 / 2 servings = 537, and the
              split bar is protein 444 · carbs 368 · fat 270 of 1,082 macro kcal (recipes.ts:614-621).
   THE CROP: the console pins the ribbon (`position: sticky`) to the bottom of the scrolled region;
   here the sheet is a fixed window with the ribbon at its floor, and the empty Instructions field
   (the seed writes none) runs on under it — clipped at the ribbon's top edge and faded, C7's way,
   rather than drawn through the glass.
   Lit page: `cd-tp cd-page-lit` paints no ground, so the frame's console glow stays on.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.con-c8{box-sizing:border-box;padding:var(--con-space-lg)}

/* One column, the two panes 12 apart. */
.con-c8 .cd-rx-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--con-space-sm);min-width:0}

/* A pane is a sheet of glass; its kicker is the micro tier in the display face. */
.con-c8 .cd-rx-card{min-width:0;padding:var(--con-space-md);background:var(--con-glass);-webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);border:1px solid var(--con-glass-edge);border-radius:var(--con-radius-card)}
.con-c8 .cd-rx-kicker{display:block;margin-bottom:var(--con-space-sm);font:600 11px/14px var(--con-heading);letter-spacing:.6px;
  text-transform:uppercase;color:var(--con-text3)}

/* The finder: a surface2 capsule, 36 tall, the magnifier in its lead padding (12 + 18 + 8). */
.con-c8 .cd-rx-search{position:relative;margin-bottom:var(--con-space-sm);min-width:0}
.con-c8 .f-search-glyph{position:absolute;left:var(--con-space-sm);top:50%;transform:translateY(-50%);color:var(--con-text3)}
.con-c8 .cd-rx-search .field{display:flex;align-items:center;width:100%;min-height:var(--con-size-control-lg);padding:0 var(--con-space-xs) 0 38px;
  border:1px solid transparent;border-radius:var(--con-radius-capsule);background:var(--con-surface2);font:400 15px/20px var(--con-sans);
  color:var(--con-text3);white-space:nowrap;overflow:hidden}

/* The building pane, as a window: the recipe runs down to the ribbon and on under it. */
.con-c8 .cd-rx-build{display:flex;flex-direction:column;height:565px;padding:0;overflow:hidden}
.con-c8 .cd-rx-run{flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;padding:var(--con-space-md) var(--con-space-md) 0;
  -webkit-mask-image:linear-gradient(180deg,var(--con-bg) calc(100% - 36px),transparent);mask-image:linear-gradient(180deg,var(--con-bg) calc(100% - 36px),transparent)}

/* The name: the one heavier field on the console — body size at 700, a soft inset on the glass. */
.con-c8 .cd-rx-title{display:flex;align-items:center;width:100%;min-height:var(--con-size-control-lg);margin-bottom:var(--con-space-sm);
  padding:0 var(--con-space-sm);border:1px solid transparent;border-radius:var(--con-radius-control);background:var(--con-surface2);
  font:700 17px/24px var(--con-sans);color:var(--con-text);white-space:nowrap;overflow:hidden}

/* FormRow, stacked: the caption label over its control, 4 apart. */
.con-c8 .cd-rx-meta{margin-bottom:var(--con-space-sm)}
.con-c8 .form-row{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--con-space-xxs);min-width:0}
.con-c8 .form-row-label{font:500 13px/16px var(--con-sans);color:var(--con-text2)}
/* The description FILLS its row, as the name above it does (recipes.css:383-393, 2026-09-28 — it
   was an input at its default 20 characters, 185 wide, its text scrolling out of sight). */
.con-c8 .cd-rx-desc{display:block;width:100%;height:var(--con-size-control);padding:0 var(--con-space-xs);border:1px solid transparent;
  border-radius:var(--con-radius-control);background:var(--con-surface2);font:400 15px/30px var(--con-sans);color:var(--con-text)}
.con-c8 .cd-rx-val{display:block;overflow:hidden;white-space:nowrap}

/* The ingredient rows: insets 8 apart, each name · serving line, the macro trio, the remove act. */
.con-c8 .cd-rx-items{display:flex;flex-direction:column;gap:var(--con-space-xs);min-width:0}
.con-c8 .cd-rx-item{display:flex;align-items:center;gap:var(--con-space-sm);min-height:var(--con-size-row);min-width:0;
  padding:var(--con-space-xxs) var(--con-space-xs);border:1px solid var(--con-hairline);border-radius:var(--con-radius-data);background:var(--con-inset)}
.con-c8 .cd-rx-item-open{display:block;flex:1;min-width:0}
.con-c8 .cd-rx-res-name{display:block;font:600 15px/20px var(--con-sans);color:var(--con-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.con-c8 .cd-rx-res-sub{display:block;font:400 13px/16px var(--con-sans);color:var(--con-text3);white-space:nowrap}
/* The figures in the numeral face (the dataXS tier); the trio's hue only on its own figure. */
.con-c8 .cd-rx-macros{flex:none;font:600 13px/16px var(--con-heading);font-variant-numeric:tabular-nums;color:var(--con-text2);white-space:nowrap}
.con-c8 .cd-rx-mac-p{color:var(--con-protein)}
.con-c8 .cd-rx-mac-c{color:var(--con-carbs)}
.con-c8 .cd-rx-mac-f{color:var(--con-fat)}
/* IconButton ghost sm: a 28 square on the surface, the control edge, the control radius. */
.con-c8 .btn-icon{flex:none;display:inline-grid;place-items:center;width:var(--con-size-control-sm);height:var(--con-size-control-sm);
  border:1px solid var(--con-control-border);border-radius:var(--con-radius-control);background:var(--con-surface);color:var(--con-text2)}
.con-c8 .btn-glyph{font:500 14px/14px var(--con-sans)}

/* Servings: the question, then − · the numeral · + as one surface2 capsule. */
.con-c8 .cd-rx-servings{display:flex;align-items:center;gap:var(--con-space-sm);margin-top:var(--con-space-sm);min-width:0}
.con-c8 .cd-rx-servings-label{flex:1;min-width:0;font:500 13px/16px var(--con-sans);color:var(--con-text2)}
.con-c8 .cd-rx-stepper{display:inline-flex;align-items:center;flex:none;background:var(--con-surface2);border-radius:var(--con-radius-capsule);overflow:hidden}
.con-c8 .cd-rx-stepper .btn-icon{border-color:transparent;background:transparent}
.con-c8 .cd-rx-servings-count{min-width:var(--con-space-lg);text-align:center;font:600 15px/20px var(--con-heading);font-variant-numeric:tabular-nums;color:var(--con-text)}

/* The instructions: a textarea at rows=5 (15/22, 4 / 8 inset), its placeholder in tertiary ink. */
.con-c8 .cd-rx-instructions{margin-top:var(--con-space-sm)}
.con-c8 .field.is-area{display:block;height:120px;padding:var(--con-space-xxs) var(--con-space-xs);border:1px solid transparent;
  border-radius:var(--con-radius-control);background:var(--con-surface2);font:400 15px/22px var(--con-sans);color:var(--con-text3)}

/* The ribbon: the figure and the act as one pinned glass bar across the sheet's full width. */
.con-c8 .cd-rx-foot{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:var(--con-space-xs) var(--con-space-md);min-width:0;
  padding:var(--con-space-sm) var(--con-space-md);background:var(--con-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-top:1px solid var(--con-glass-edge);border-radius:0 0 var(--con-radius-card) var(--con-radius-card)}
.con-c8 .cd-rx-fig{flex:none}
.con-c8 .cd-rx-big{font:700 22px/28px var(--con-heading);letter-spacing:-.2px;font-variant-numeric:tabular-nums;color:var(--con-text);white-space:nowrap}
.con-c8 .cd-rx-big span{font-size:13px;line-height:16px;font-weight:600;color:var(--con-text3)}
.con-c8 .cd-rx-percap{font:400 11px/14px var(--con-sans);color:var(--con-text3);white-space:nowrap}
.con-c8 .cd-rx-splitwrap{flex:1;min-width:min-content}
/* Macro composition over the macro kcal — 444 · 368 · 270 of 1,082 — never the stored kcal. */
.con-c8 .cd-rx-split{display:flex;height:8px;margin:0 0 var(--con-space-xxs);overflow:hidden;border-radius:var(--con-radius-capsule);background:var(--con-surface2)}
.con-c8 .cd-rx-split i{display:block;height:100%}
.con-c8 .cd-rx-split .cd-rx-mac-p{width:41.035%;background:var(--con-protein)}
.con-c8 .cd-rx-split .cd-rx-mac-c{width:34.011%;background:var(--con-carbs)}
.con-c8 .cd-rx-split .cd-rx-mac-f{width:24.954%;background:var(--con-fat)}
.con-c8 .cd-rx-key{display:flex;gap:var(--con-space-sm);font:600 13px/16px var(--con-heading);font-variant-numeric:tabular-nums;color:var(--con-text2);white-space:nowrap}
.con-c8 .cd-rx-key span{display:inline-flex;align-items:center;gap:var(--con-space-xxs)}
.con-c8 .cd-rx-sw{display:inline-block;flex:none;width:9px;height:9px;border-radius:var(--con-radius-tag)}
.con-c8 .cd-rx-sw.cd-rx-mac-p{background:var(--con-protein)}
.con-c8 .cd-rx-sw.cd-rx-mac-c{background:var(--con-carbs)}
.con-c8 .cd-rx-sw.cd-rx-mac-f{background:var(--con-fat)}
/* The act at the ribbon's right: Button primary lg — a 36-tall console capsule. */
.con-c8 .cd-rx-foot-act{display:flex;align-items:center;gap:var(--con-space-sm);flex:none;margin-left:auto}
.con-c8 .btn{flex:none;display:inline-grid;place-items:center;min-height:var(--con-size-control-lg);padding:0 var(--con-space-md);
  border:1px solid var(--con-console);border-radius:var(--con-radius-capsule);background:var(--con-console);color:var(--con-on-fill);
  font:500 13px/16px var(--con-sans);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── c9.css ── */
/* ════════════════════════════════════════════════════════════════════════════════════════════
   C9 — the week planner: Maya Chen's week being planned, the day template "Steady weekday" placed on
   Monday to Friday and not yet saved, the week sheet's act live with its counted label.
   Structure: client/src/coachdesk/DayPlanPage.tsx:686-812 (the week sheet: the seven days :691-750,
              each day's card and its clear act :707-747; the foot :757-803 — figures :758-775, the
              sentence :778-781, the unsaved mark and the act :782-802).
   Values:    coachdesk/dayTemplates.css — the day card :497-549 (rest :517-528), figures :551-570, the
              unsaved mark :572-586, the sheet :1152-1162 (seven across above a 900px window), the foot
              :1168-1180, the day's wrap and clear act :1247-1276; coachdesk/shell.css (.cd-glass),
              buttons.css (Button primary md on a sheet: the console capsule, coachdesk.css). Measured on
              the running console at a 906px window (the sheet 798 wide, as here), after holding the
              template and clicking Monday to Friday — local state only, nothing saved.
   Labels:    client/src/theme/voice.ts — restDayOptionLabel :4371, daySlotCountLabel :4014,
              weekSummaryDaysLabel :4458, weekSummaryAvgLabel :4461, planPaintFootLine :4285,
              unsavedChangesLine :4430, saveCommonWeekLabel :4294 ("Save changes · 1 client").
   Content:   the showcase's one day template, "Steady weekday" (server/prisma/seed-showcase.ts:539-555),
              its figures as the server sends them (1652 kcal, 4 slots — printed without a separator,
              as the console prints them). Every colour is a --con-* token.
   Lit page: `cd-tp cd-page-lit cd-dt-page` paints no ground, so the frame's console glow stays on.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.con-c9{box-sizing:border-box;padding:var(--con-space-gutter);container-type:inline-size}

/* The week sheet: glass, 16 inset. */
.con-c9 .cd-pl-strip-wrap{min-width:0;padding:var(--con-space-md);background:var(--con-glass);-webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);border:1px solid var(--con-glass-edge);border-radius:var(--con-radius-card)}

/* Seven days, Monday first, 12 apart. */
.con-c9 .cd-pl-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--con-space-sm);min-width:0}
.con-c9 .cd-dt-daywrap{position:relative;display:block;min-width:0}
/* A day is an inset: its kicker, the template's name, its figures; at least two double rows tall. */
.con-c9 .cd-dt-day{display:flex;flex-direction:column;align-items:flex-start;gap:var(--con-space-xxs);width:100%;
  min-height:calc(var(--con-size-row-double) * 2);padding:var(--con-space-sm);border:1px solid var(--con-hairline);
  border-radius:var(--con-radius-card);background:var(--con-inset)}
/* An empty day is a dashed outline on no ground, its words in tertiary ink. */
.con-c9 .cd-dt-day[data-rest]{border-style:dashed;background:transparent}
.con-c9 .cd-dt-day-kicker{font:600 13px/16px var(--con-heading);letter-spacing:.6px;text-transform:uppercase;color:var(--con-text3)}
.con-c9 .cd-dt-day-name{font:600 15px/20px var(--con-sans);color:var(--con-text)}
.con-c9 .cd-dt-day[data-rest] .cd-dt-day-name{font-weight:500;color:var(--con-text3)}
.con-c9 .cd-dt-day-meta{font:400 13px/16px var(--con-sans);font-variant-numeric:tabular-nums;color:var(--con-text3)}
/* The filled day's own ✕: a 28 circle in the corner, 13px. (The console sets no face on it, so it
   takes the browser's button face; the ✕ glyph is the same fallback in that face and this one.) */
.con-c9 .cd-dt-day-clear{position:absolute;top:var(--con-space-xxs);right:var(--con-space-xxs);display:inline-flex;align-items:center;
  justify-content:center;width:var(--con-size-control-sm);height:var(--con-size-control-sm);border-radius:var(--con-radius-capsule);
  color:var(--con-text3);font:400 13px/16px var(--con-sans)}

/* The sheet's foot: the figures, the sentence that names who changes, the act. It wraps as the
   console's does — at this width the act takes a second line. */
.con-c9 .cd-pl-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--con-space-md);min-width:0;
  margin-top:var(--con-space-md);padding-top:var(--con-space-sm);border-top:1px solid var(--con-hairline)}
.con-c9 .cd-pl-figures{display:inline-flex;gap:var(--con-space-lg);flex:none}
.con-c9 .cd-dt-sum-kv{display:flex;flex-direction:column}
.con-c9 .cd-dt-sum-k{font:600 11px/14px var(--con-sans);letter-spacing:.4px;text-transform:uppercase;color:var(--con-text3);white-space:nowrap}
.con-c9 .cd-dt-sum-v{font:600 17px/24px var(--con-sans);font-variant-numeric:tabular-nums;color:var(--con-text);white-space:nowrap}
.con-c9 .cd-pl-sentence{flex:1;min-width:220px;margin:0;font:400 13px/18px var(--con-sans);color:var(--con-text2)}
.con-c9 .cd-pl-act{display:inline-flex;align-items:center;gap:var(--con-space-sm);flex:none}
/* Unsaved work: amber words after an amber dot — a state of work, never a warning about the person. */
.con-c9 .cd-dt-dirty{display:inline-flex;align-items:center;gap:var(--con-space-xxs);font:400 13px/16px var(--con-sans);color:var(--con-warning);white-space:nowrap}
.con-c9 .cd-dt-dirty::before{content:'';width:var(--con-space-xs);height:var(--con-space-xs);border-radius:var(--con-radius-capsule);background:var(--con-warning)}
/* The sheet's one primary act — the filled console capsule, md. */
.con-c9 .btn{display:inline-grid;place-items:center;flex:none;min-height:var(--con-size-control);padding:0 var(--con-space-sm);
  border:1px solid var(--con-console);border-radius:var(--con-radius-capsule);background:var(--con-console);color:var(--con-on-fill);
  font:500 13px/16px var(--con-sans);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── Narrower than the week's seven columns ────────────────────────────────────────────────────
   The seven days keep this shape — each name on two lines, "1652 kcal ·" on one — while a day card
   is at least ~93px, i.e. a sheet of 760. Narrower, the figures break onto a third line (sooner
   under the page's own zoom, where text is measured at a fraction of its size) and near 600 a day's
   ✕ meets its kicker. The console answers narrow windows with four columns and an empty eighth
   cell; here the sheet scales as one piece instead — no reflow, no hole. Each step keeps the
   sheet's own width ≥ 760. */
@container (max-width:759.98px){.con-c9 .cd-pl-strip-wrap{zoom:.94}}
@container (max-width:714.38px){.con-c9 .cd-pl-strip-wrap{zoom:.88}}
@container (max-width:668.78px){.con-c9 .cd-pl-strip-wrap{zoom:.82}}
@container (max-width:623.18px){.con-c9 .cd-pl-strip-wrap{zoom:.76}}
@container (max-width:577.58px){.con-c9 .cd-pl-strip-wrap{zoom:.7}}
@container (max-width:531.98px){.con-c9 .cd-pl-strip-wrap{zoom:.64}}
@container (max-width:486.38px){.con-c9 .cd-pl-strip-wrap{zoom:.58}}

/* ── c10.css ── */
/* ════════════════════════════════════════════════════════════════════════════════════════════
   C10 — the workout builder: "Upper / Lower — 4 day" open in the Templates workbench's editor pane,
   Day 1 (Upper A) whole with its six movements, Day 2 running on under the pinned Save foot.
   Structure: client/src/coachdesk/TemplateBuilderPage.tsx:251-556 (WorkoutTemplateEditor: the head
              :273-275, name + cycle :298-330, a day :354-512 — its head :356-411, the movement head
              :428-437, a movement row :464-493, Add exercise :501-508 — and the pinned foot :525-551);
              the row's fields are ExercisePrescriptionFields.tsx:59-86 (the name + the ▶ demo on every
              linked movement) and :123-131 (Sets · Reps for a reps measurement). Mounted by
              TemplatesPage.tsx:1066-1079 in the `.cd-dt-pane.cd-glass` bench :1041 (App.tsx:343 forwards
              the old /coach/studio/templates/:id/edit address to `?open=:id`).
   Values:    coachdesk/templates.css — .cd-tp-hint :352-357, the builder's meta :378-419, the
              number field :420-424, the day :445-498, the movements :512-565, the pinned foot
              :612-627, the add glyph :638-641, the name cell and the demo act :1714-1726;
              components/rows.css:302-340 (BuilderRow, bare, with the order track); buttons.css
              (IconButton ghost/quiet sm, Button quiet sm + primary md — its busy label keeps the
              width, :56-68); chips.css (Chip capsule, neutral); dayTemplates.css (.cd-dt-pane, head,
              kicker); SortableList.tsx (the six-dot grip). Measured on the running console with the
              pane at its widest (714px — the workbench caps at the content tool and splits 1:1).
   Labels:    client/src/theme/voice.ts — templateBuilderTitle :3296, templateNameLabel :3301,
              cycleLengthLabel :3313, restDayLabel :3318, exerciseLabel :3343, addExerciseLabel :3326,
              saveTemplateLabel :3402; "⌘↵ to save" is a literal in TemplateBuilderPage.tsx:550.
   Content:   the showcase template (server/prisma/seed-showcase.ts:303-326), movement names from the
              catalogue (server/prisma/exerciseCatalogue.ts:74, :97, :110, :95, :112, :136, :156), every
              one linked, so every one carries the ▶ demo act. Every colour is a --con-* token.
   THE CROP, and one width: the console never draws this pane wider than 714px; here it fills the
   840 frame as C7's does (798), and the extra width goes to the flexible name columns — every fixed
   dimension is the console's. The foot is pinned (`position: sticky` in the console); here the
   pane is a window with the foot at its floor, the week clipped at its top edge and faded (C7's way).
   Lit page: `cd-tp cd-page-lit` paints no ground, so the frame's console glow stays on.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.con-c10{box-sizing:border-box}

/* The bench sheet, as a window: the editor runs down to the foot and on under it. */
.con-c10 .cd-dt-pane{display:flex;flex-direction:column;height:688px;margin:var(--con-space-gutter);overflow:hidden;min-width:0;
  background:var(--con-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--con-glass-edge);
  border-radius:var(--con-radius-card);font:400 17px/24px var(--con-sans);color:var(--con-text)}
.con-c10 .cd-dt-editor{flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;padding:var(--con-space-md) var(--con-space-md) 0;
  -webkit-mask-image:linear-gradient(180deg,var(--con-bg) calc(100% - 40px),transparent);mask-image:linear-gradient(180deg,var(--con-bg) calc(100% - 40px),transparent)}

/* The pane's head: the work named as the dress kicker. */
.con-c10 .cd-dt-editor-head{display:flex;align-items:baseline;margin-bottom:var(--con-space-sm)}
.con-c10 .cd-tp-kicker{font:600 11px/14px var(--con-heading);letter-spacing:.6px;text-transform:uppercase;color:var(--con-text3)}

/* A field on glass: surface2, no edge, the control radius, 32 tall; the value on its centre line. */
.con-c10 .field{display:block;min-width:0;height:var(--con-size-control);padding:0 var(--con-space-xs);border:1px solid transparent;
  border-radius:var(--con-radius-control);background:var(--con-surface2);font:400 15px/30px var(--con-sans);color:var(--con-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A typed figure wears the numeral face, tabular. */
.con-c10 .field.is-numeral{font-family:var(--con-heading);font-variant-numeric:tabular-nums}

/* The name and the cycle, side by side, labels over controls. */
.con-c10 .cd-tb-meta{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--con-space-md);margin-bottom:var(--con-space-gutter);min-width:0}
.con-c10 .cd-tb-field{display:flex;flex-direction:column;gap:var(--con-space-xxs);min-width:0}
.con-c10 .cd-tb-label{font:500 13px/16px var(--con-sans);color:var(--con-text2)}
.con-c10 .cd-tb-input-name{width:320px;max-width:100%}
.con-c10 .cd-tb-input-cycle{width:80px}
.con-c10 .cd-tb-input-num{width:56px;text-align:right}

/* A day: an inset unit, 8 apart. Its head: grip · number · name · the Rest day switch · remove. */
.con-c10 .cd-tb-day{min-width:0;margin-bottom:var(--con-space-xs);border:1px solid var(--con-hairline);border-radius:var(--con-radius-card);background:var(--con-inset)}
.con-c10 .cd-tb-day-head{display:flex;align-items:center;gap:var(--con-space-xs);min-width:0;padding:var(--con-space-xs) var(--con-space-sm)}
.con-c10 .cd-tb-day-index{flex:none;min-width:20px;font:600 13px/16px var(--con-sans);font-variant-numeric:tabular-nums;color:var(--con-text3)}
.con-c10 .cd-tb-day-name{flex:1;min-width:120px}
/* Chip capsule, neutral, not pressed: the surface inside the control edge. */
.con-c10 .chip{display:inline-flex;align-items:center;flex:none;min-height:var(--con-size-control);padding:0 var(--con-space-sm);
  border:1px solid var(--con-control-border);border-radius:var(--con-radius-capsule);background:var(--con-surface);
  font:500 13px/16px var(--con-sans);color:var(--con-text2);white-space:nowrap}

/* IconButton sm — ghost (the grip: surface, control edge) and quiet (remove: bare) — 28 squares. */
.con-c10 .btn-icon{display:inline-grid;place-items:center;flex:none;width:var(--con-size-control-sm);height:var(--con-size-control-sm);
  border:1px solid transparent;border-radius:var(--con-radius-control);color:var(--con-text2);font:500 14px/14px var(--con-sans)}
.con-c10 .btn-icon.is-ghost{border-color:var(--con-control-border);background:var(--con-surface)}

/* The movements: one caption over the name column, then the rows, 4 apart. */
.con-c10 .cd-tb-exercises{min-width:0;padding:var(--con-space-xs) var(--con-space-sm) var(--con-space-sm)}
.con-c10 .cd-tb-ex-head{display:grid;grid-template-columns:var(--con-size-control-sm) minmax(140px,1fr) 56px 56px var(--con-size-control-sm);
  align-items:center;gap:var(--con-space-xs);margin-bottom:var(--con-space-xxs);font:600 11px/14px var(--con-heading);letter-spacing:.6px;
  text-transform:uppercase;color:var(--con-text3)}
.con-c10 .cd-tb-ex-list{display:flex;flex-direction:column;gap:var(--con-space-xxs);margin-bottom:var(--con-space-xs);min-width:0}
/* BuilderRow, bare, with the order track: grip · the fields · remove. */
.con-c10 .builder-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--con-space-xs);min-height:var(--con-size-row);
  padding:var(--con-space-xxs) 0;border:1px solid transparent;border-radius:var(--con-radius-data)}
.con-c10 .cd-tb-ex-cols{display:grid;grid-template-columns:minmax(140px,1fr) 56px 56px;align-items:center;gap:var(--con-space-xs);min-width:0}
.con-c10 .cd-tb-namecell{display:flex;align-items:center;gap:var(--con-space-xxs);min-width:0}
.con-c10 .cd-tb-namecell > .field{flex:1}
/* The demo act beside every linked movement: a bare ▶ in the console teal. The console sets its size,
   not its face, so it draws in the browser's button face (measured: 13px Arial). */
.con-c10 .cd-tb-demo{flex:none;padding:var(--con-space-xxs);border-radius:var(--con-radius-tag);color:var(--con-console);font:400 13px/16px Arial,sans-serif}

/* Add exercise: Button quiet sm — bare text after a quiet plus. */
.con-c10 .btn{display:inline-grid;place-items:center;flex:none;border:1px solid transparent;border-radius:var(--con-radius-capsule);
  font:500 13px/16px var(--con-sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.con-c10 .btn-quiet{min-height:var(--con-size-control-sm);padding:0 var(--con-space-xs);background:transparent;color:var(--con-text2);
  display:inline-flex;align-items:center}
.con-c10 .cd-tb-addglyph{margin-inline-end:var(--con-space-xxs);color:var(--con-text3)}

/* The pinned foot: glass across the pane's full width, the one filled act and its keyboard hint. */
.con-c10 .cd-tb-foot{flex:none;display:flex;align-items:center;gap:var(--con-space-sm);min-width:0;padding:var(--con-space-sm) var(--con-space-md);
  background:var(--con-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--con-glass-edge);
  border-radius:0 0 var(--con-radius-card) var(--con-radius-card)}
.con-c10 .btn-primary{min-height:var(--con-size-control);padding:0 var(--con-space-sm);border-color:var(--con-console);background:var(--con-console);color:var(--con-on-fill)}
/* The busy label shares the label's cell, so the act never changes width mid-save. */
.con-c10 .btn-label{grid-area:1/1}
.con-c10 .btn-label.is-off{visibility:hidden}
.con-c10 .cd-tp-hint{margin:var(--con-space-xs) 0 0;font:400 13px/16px var(--con-sans);color:var(--con-text3);white-space:nowrap}

/* ── c11.css ── */
/* ════════════════════════════════════════════════════════════════════════════════════════════
   C11 — the program generator BEFORE it runs: the Templates workbench's generate form, filled in
   for the program C7 shows drafted — hypertrophy · intermediate · 4 days × 75 min · 5 weeks · a
   full gym — with "Generate draft" live at the foot.
   Structure: client/src/coachdesk/TemplateGeneratePanel.tsx:199-357 (the head and lede :202-205, the
              name :225-229, The program :231-284, What they have :286-293, Focus :295-304, Leave out
              :313-323, the secondary-credit check :330-339, the foot :341-354; SectionHead :83-90,
              TagPicker :113-145); ExclusionPicker.tsx (the finder at rest). Mounted by
              TemplatesPage.tsx:1042-1051 in the `.cd-dt-pane.cd-glass` bench (`?generate=1`).
   Values:    coachdesk/templateDrafts.css:50-213 (.tg-form, .tg-sec, .tg-sec-head, .tg-row-2/-3 —
              `repeat(auto-fit, minmax(…, 1fr))` — .tg-hint, .tg-tags, .tg-ex-find, .tg-check,
              .tg-foot); templates.css:352-357 (.cd-tp-hint) and :612-627 (the pinned glass foot);
              components/rows.css:217-249 (FormRow: label left, control right; stacked); fields.css
              (`.cd-glass .field`, .is-num, .is-numeral), select.css (the Select trigger and its
              chevron), chips.css (Chip capsule: neutral / pressed), controls.css:74-120 (the checkbox
              and its tick), buttons.css (Button primary md), coachdesk.css (.cd-kicker, .cd-lede).
              Measured on the running console with the pane at its widest (714px), filled in by
              typing 75 and pressing ten capsules — local state only; Generate was never pressed.
   Labels:    client/src/theme/voice.ts — generateTemplateTitle :7012, generateTemplateLede :7015,
              generateFieldLabel :7041-7054, generateSectionLabel :7094-7103, generateFieldHint
              :7064-7079, generateNumbersHint :7112, leaveOutHint :7117, generateSubmitLabel :7019,
              trainingGenreLabel :7173, experienceTierLabel :7181, equipmentLabel :6986 (the raw key,
              underscores to spaces), targetMuscleLabel :6968; "⌘↵ to generate" is a literal in
              TemplateGeneratePanel.tsx:353; "Add an exclusion…" is addExclusionPlaceholder :7150.
   Content:   defaults from templateDrafts.ts newGenerateForm (hypertrophy, intermediate, 4 days,
              5 weeks, secondary credit on) with minutes set to 75 and equipment set to the shared
              "full gym" preset (shared/generatorPresets.ts:80 — every kind but sandbag, the list
              C7's run used). The name is left blank, so the door names the draft "Hypertrophy · 4
              days · 75 min" — C7's title. The capsule lists are shared/movementAttributes.ts:126
              (equipment) and :219 (muscles), in their own order. Every colour is a --con-* token.
   Width:     the console never draws this pane wider than 714px; here it fills the 840 frame as C7's
              does (798) — the rows' `auto-fit` tracks and the capsule rows take the extra width.
   Lit page: `cd-tp cd-page-lit` paints no ground, so the frame's console glow stays on.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.con-c11{box-sizing:border-box;container-type:inline-size}

/* The bench sheet: glass, 16 inset, the pane's 17/24 body underneath everything. */
.con-c11 .cd-dt-pane{display:block;min-width:0;margin:var(--con-space-gutter);padding:var(--con-space-md);background:var(--con-glass);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--con-glass-edge);border-radius:var(--con-radius-card);
  font:400 17px/24px var(--con-sans);color:var(--con-text)}

/* The head: the work as the dress kicker; the lede in the caption-prose tier, 62 characters wide. */
.con-c11 .cd-dt-editor-head{display:flex;align-items:baseline;margin-bottom:var(--con-space-sm)}
.con-c11 .cd-tp-kicker,.con-c11 .cd-kicker{font:600 11px/14px var(--con-heading);letter-spacing:.6px;text-transform:uppercase;color:var(--con-text3)}
.con-c11 .cd-lede{margin:0;max-width:62ch;font:400 13px/18px var(--con-sans);color:var(--con-text2)}

/* The form: a column, 16 apart; each section adds its own 16 above. */
.con-c11 .tg-form{display:flex;flex-direction:column;gap:var(--con-space-md);min-width:0}
.con-c11 .tg-sec{display:flex;flex-direction:column;gap:var(--con-space-xs);margin-top:var(--con-space-md);min-width:0}
.con-c11 .tg-sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--con-space-xs)}
/* One hint per section, in the numeral face's dataXS tier. */
.con-c11 .tg-hint{display:block;margin:0;font:600 13px/16px var(--con-heading);color:var(--con-text3)}

/* FormRow: the label on the left, the control at the row's right edge; stacked for the name. */
.con-c11 .form-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--con-space-xxs) var(--con-space-xs);
  min-height:var(--con-size-control);min-width:0}
.con-c11 .form-row-label{font:500 13px/16px var(--con-sans);color:var(--con-text2);white-space:nowrap}
.con-c11 .form-row > .field{grid-column:2;justify-self:end}
.con-c11 .form-row.is-stacked{grid-template-columns:minmax(0,1fr)}
.con-c11 .form-row.is-stacked > .field{grid-column:1;justify-self:start}
.con-c11 .tg-row{display:grid;gap:var(--con-space-sm);align-items:start;min-width:0}
.con-c11 .tg-row-2{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.con-c11 .tg-row-3{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

/* A field on glass: surface2, no edge, the control radius, 32 tall. */
.con-c11 .field{display:flex;align-items:center;min-width:0;height:var(--con-size-control);padding:0 var(--con-space-xs);border:1px solid transparent;
  border-radius:var(--con-radius-control);background:var(--con-surface2);font:400 15px/20px var(--con-sans);color:var(--con-text);white-space:nowrap}
/* The name: an empty <input> at its default 20 characters. */
.con-c11 .tg-name{width:185px}
/* A number a coach types: the numeral face, right-aligned tabular, four characters wide. */
.con-c11 .field.is-num{justify-content:flex-end;width:54px;font-family:var(--con-heading);font-variant-numeric:tabular-nums}
/* The Select trigger: the value, then the chevron drawn as two bars in tertiary ink. */
.con-c11 .dd-trigger{justify-content:space-between;gap:var(--con-space-xs)}
.con-c11 .dd-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.con-c11 .dd-chev{position:relative;flex:none;width:10px;height:10px}
.con-c11 .dd-chev::before,.con-c11 .dd-chev::after{content:'';position:absolute;top:3.5px;width:6.4px;height:1.8px;border-radius:1px;background:var(--con-text3)}
.con-c11 .dd-chev::before{left:0;transform:rotate(45deg)}
.con-c11 .dd-chev::after{right:0;transform:rotate(-45deg)}

/* The capsule sets: a wrapping row, 8 apart. A chosen capsule wears the console tint; the rest sit
   on the surface inside the control edge. */
.con-c11 .tg-tags{display:flex;flex-wrap:wrap;gap:var(--con-space-xs);min-width:0}
.con-c11 .chip{display:inline-flex;align-items:center;flex:none;min-height:var(--con-size-control);padding:0 var(--con-space-sm);
  border:1px solid var(--con-control-border);border-radius:var(--con-radius-capsule);background:var(--con-surface);
  font:500 13px/16px var(--con-sans);color:var(--con-text2);white-space:nowrap}
.con-c11 .chip.is-on{border-color:transparent;background:var(--con-console-tint);color:var(--con-console)}

/* The exclusion finder at rest: a surface2 capsule, 36 tall, at most 26rem (442px). */
.con-c11 .tg-ex{display:flex;flex-direction:column;gap:var(--con-space-xs);min-width:0}
.con-c11 .tg-ex-find{position:relative;display:flex;align-items:center;min-width:0;max-width:442px}
.con-c11 .tg-ex-find .f-search-glyph{position:absolute;left:var(--con-space-sm);top:50%;transform:translateY(-50%);color:var(--con-text3)}
.con-c11 .tg-ex-find .field{flex:1 1 auto;height:var(--con-size-control-lg);padding-left:38px;border-radius:var(--con-radius-capsule);color:var(--con-text3)}

/* The one check: the box, then the label in the body tier with its reason under it. */
.con-c11 .tg-check{display:flex;align-items:flex-start;gap:var(--con-space-xs);min-width:0;color:var(--con-text)}
.con-c11 .tg-check-text{min-width:0}
.con-c11 .checkbox{display:inline-grid;place-items:center;flex:none;width:var(--con-space-md);height:var(--con-space-md);
  border:1px solid var(--con-console);border-radius:var(--con-radius-tag);background:var(--con-console)}
.con-c11 .checkbox::after{content:'';width:4px;height:8px;border:solid var(--con-on-fill);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}

/* The pinned foot: glass across the pane's full width, the one filled act and its keyboard hint. */
.con-c11 .tg-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--con-space-sm);min-width:0;
  margin:var(--con-space-md) calc(-1 * var(--con-space-md)) calc(-1 * var(--con-space-md));padding:var(--con-space-sm) var(--con-space-md);
  background:var(--con-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--con-glass-edge);
  border-radius:0 0 var(--con-radius-card) var(--con-radius-card)}
.con-c11 .btn{display:inline-grid;place-items:center;flex:none;min-height:var(--con-size-control);padding:0 var(--con-space-sm);
  border:1px solid var(--con-console);border-radius:var(--con-radius-capsule);background:var(--con-console);color:var(--con-on-fill);
  font:500 13px/16px var(--con-sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.con-c11 .cd-tp-hint{margin:var(--con-space-xs) 0 0;font:400 13px/16px var(--con-sans);color:var(--con-text3);white-space:nowrap}

/* ── Narrower than the three number fields ────────────────────────────────────────────────────
   "Weeks before the deload" and its field need 216px, three abreast 672px of pane. Narrower, the
   console clips that label under its field (seen at a 578px pane); here the pane scales as one
   piece instead. Each step keeps the pane's own content ≥ 700 — the margin covers text measured
   under the page's zoom — and its 20px shoulder scales with it. */
@container (max-width:773.98px){.con-c11 .cd-dt-pane{zoom:.94}}
@container (max-width:727.54px){.con-c11 .cd-dt-pane{zoom:.88}}
@container (max-width:681.1px){.con-c11 .cd-dt-pane{zoom:.82}}
@container (max-width:634.66px){.con-c11 .cd-dt-pane{zoom:.76}}
@container (max-width:588.22px){.con-c11 .cd-dt-pane{zoom:.7}}
@container (max-width:541.78px){.con-c11 .cd-dt-pane{zoom:.64}}
@container (max-width:495.34px){.con-c11 .cd-dt-pane{zoom:.58}}