/* 5f.css — the looks layer (approved 2026-10-10; design-reference/approved-5f).

   js/looks.js writes every value a look sets as custom properties on <html>
   (colors per mode, corners, faces) and stamps data-look / data-face. The
   inline properties already outrank the combo, font-preset and mode layers in
   global.css and 5e.css, so this sheet only does what a property alone
   cannot: point elements at the look's faces and corners. Every rule is
   scoped to html[data-look], so an account with no look renders exactly as
   5e did.

   Loaded by both shells after 5e.css and before wide.css. Colors come from
   tokens only. */

/* The look's UI face for everything; its display face for greetings and
   titles, at that face's own weight, tracking and case. */
html[data-look] body { font-family: var(--font-family); }
html[data-look] .page-title,
html[data-look] .today-greeting {
  font-family: var(--font-brand);
  font-weight: var(--face-weight, 800);
  letter-spacing: var(--face-track, 0);
  text-transform: var(--face-case, none);
}
/* Page titles take the LOOK's case (capitals on five looks, not Energy);
   the greeting keeps its face's. */
html[data-look] .page-title { text-transform: var(--title-case, none); }

/* Buttons take the look's button radius, which can differ from its cards
   (Wellness: cards 16, buttons 22). */
html[data-look] .rc-btn { border-radius: var(--radius-btn, var(--radius-md)); }

/* ── The Appearance page (js/look-studio.js) ────────────────────────────
   The studio's root carries the chosen look's custom properties, so every
   rule here reads tokens and the page previews itself. */
html[data-look] .look-studio { display:flex; flex-direction:column; gap:12px; background:var(--bg); color:var(--text);
  font-family:var(--font-family); padding:4px 0 8px; }
html[data-look] .look-studio .section-label { margin:8px 0 0; font-family:var(--label-font, var(--font-family)); font-weight:var(--label-weight, 700);
  letter-spacing:var(--label-track, .08em); font-style:var(--label-style, normal); text-transform:var(--label-case, uppercase);
  font-size:.75rem; color:var(--text-muted); border:0; padding:0; }
html[data-look] .look-studio .section-label::before, html[data-look] .look-studio .section-label::after { content:none; display:none; }
/* In a sub-page the studio carries its own Back and title (approved), so the
   page header stands down while that studio is the one on screen. */
html[data-look] #page-settings:has(.tset-sec.active .look-studio:not([data-ls-view="main"])) > .page-header,
html[data-look] #page-org:has(.org-sec:not([hidden]) .look-studio:not([data-ls-view="main"])) > .page-header { display:none; }
html[data-look] .ls-looks { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
html[data-look] .ls-tile { position:relative; display:flex; flex-direction:column; gap:6px; padding:6px 6px 10px; min-height:44px;
  background:var(--surface-1); border:1px solid var(--n-border-strong); border-radius:var(--radius-sm);
  color:var(--text); text-align:left; cursor:pointer; font:inherit; }
html[data-look] .ls-tile.active { border:2px solid var(--accent-line, var(--accent)); padding:5px 5px 9px; }
html[data-look] .ls-tile-art { display:block; width:100%; height:auto; aspect-ratio:100/56; border-radius:calc(var(--radius-sm) - 1px); }
html[data-look] .ls-tile-name { font-weight:700; font-size:.82rem; line-height:1.25; padding-right:18px; }
html[data-look] .ls-tile-tick { position:absolute; right:8px; bottom:10px; width:16px; height:16px; color:var(--text); }
html[data-look] .ls-tile-tick svg { width:16px; height:16px; }
html[data-look] .ls-rows { background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); overflow:hidden; }
html[data-look] .ls-row, html[data-look] .ls-prev-row { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:10px 14px;
  background:transparent; border:0; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
html[data-look] .ls-row-ic { flex:0 0 32px; width:32px; height:32px; display:grid; place-items:center; color:var(--text-muted);
  border-radius:var(--radius-sm); overflow:hidden; }
html[data-look] .ls-row-ic svg { width:20px; height:20px; }
html[data-look] .ls-row-ic img { width:100%; height:100%; object-fit:cover; }
html[data-look] .ls-swatch { display:block; width:32px; height:32px; border-radius:var(--radius-sm); }
html[data-look] .ls-row-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
html[data-look] .ls-row-main b { font-weight:700; }
html[data-look] .ls-row-main em { font-style:normal; color:var(--text-muted); font-size:.88rem; }
html[data-look] .ls-allow { margin-top:4px; }
html[data-look] .ls-back { align-self:flex-start; min-height:44px; padding:0 14px; background:var(--surface-1); color:var(--text);
  border:1px solid var(--n-border-strong); border-radius:var(--radius-pill); font:inherit; font-weight:700; cursor:pointer; }
html[data-look] .ls-h { margin:4px 0 0; font-family:var(--font-brand); font-weight:var(--face-weight, 800); letter-spacing:var(--face-track, 0);
  text-transform:var(--face-case, none); font-size:2rem; line-height:1; text-wrap:balance; }
html[data-look] .ls-prev { display:flex; flex-direction:column; gap:12px; padding:14px; background:var(--surface-1);
  border:1px solid var(--n-border); border-radius:var(--radius-md); }
html[data-look] .ls-prev-tag { align-self:flex-start; padding:3px 9px; background:var(--accent-soft); color:var(--text);
  border-radius:var(--radius-sm); font-weight:700; font-size:.82rem; }
html[data-look] .ls-prev-tabs { display:flex; justify-content:space-between; border-bottom:1px solid var(--n-border-strong); }
html[data-look] .ls-prev-tabs span { padding:6px 2px; color:var(--text-quiet, var(--text-dim)); font-weight:700; font-size:.88rem; border-bottom:3px solid transparent; margin-bottom:-1px; }
html[data-look] .ls-prev-tabs span.on { color:var(--text); border-bottom-color:var(--accent-line, var(--accent)); }
html[data-look] .ls-sws { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; }
html[data-look] .ls-sw { width:100%; aspect-ratio:1; min-height:40px; border-radius:50%; border:1px solid var(--n-border-strong); cursor:pointer; padding:0; }
html[data-look] .ls-sw.active { box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
/* Choose your own: a well showing the color, holding the native picker at
   zero opacity over itself (the one control the app cannot style), beside
   the hex box. The well is the input's positioned wrapper, or the picker
   would stretch over the whole page and swallow every tap (2026-09-08). */
html[data-look] .ls-own { display:flex; gap:12px; align-items:stretch; }
html[data-look] .ls-pick { position:relative; flex:0 0 52px; min-height:48px; border-radius:var(--radius-md); border:1px solid var(--n-border-strong); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; overflow:hidden; }
html[data-look] .ls-pick svg { filter:drop-shadow(0 0 2px rgba(0,0,0,.6)); pointer-events:none; }
html[data-look] .ls-pick-in { position:absolute; inset:0; opacity:0; width:100%; height:100%; border:0; padding:0; cursor:pointer; }
html[data-look] .ls-own .ls-hex { flex:1; min-width:0; }
html[data-look] .ls-hex { position:relative; }
html[data-look] .ls-hex .form-input { width:100%; padding-right:56px; text-transform:uppercase; font-family:var(--font-data, var(--font-family)); }
html[data-look] .ls-hex span { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-quiet, var(--text-dim)); font-size:.88rem; }
html[data-look] .ls-read { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; background:var(--surface-1);
  border:1px solid var(--n-border); border-radius:var(--radius-md); }
html[data-look] .ls-read > span:last-child { display:flex; flex-direction:column; }
html[data-look] .ls-read em { font-style:normal; color:var(--text-muted); font-size:.88rem; }
html[data-look] .ls-read-ic { flex:0 0 32px; height:32px; display:grid; place-items:center; border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--text); }
html[data-look] .ls-read.ok .ls-read-ic { background:var(--accent-soft); color:var(--accent-line, var(--accent)); }
html[data-look] .ls-read-ic svg { width:18px; height:18px; }
html[data-look] .ls-faces { display:flex; flex-direction:column; gap:10px; }
html[data-look] .ls-face { display:flex; flex-direction:column; gap:6px; padding:12px 14px; background:var(--surface-1); color:var(--text);
  border:1px solid var(--n-border); border-radius:var(--radius-md); font:inherit; text-align:left; cursor:pointer; }
html[data-look] .ls-face.active { border:2px solid var(--accent-line, var(--accent)); padding:11px 13px; }
html[data-look] .ls-face-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
html[data-look] .ls-face-name { font-family:var(--label-font, var(--font-family)); font-weight:var(--label-weight, 700); letter-spacing:var(--label-track, .08em);
  font-style:var(--label-style, normal); text-transform:var(--label-case, uppercase); color:var(--text-muted); font-size:.75rem; }
html[data-look] .ls-inuse { padding:2px 8px; background:var(--accent-soft); color:var(--text); border-radius:var(--radius-sm); font-size:.75rem; font-weight:700; }
html[data-look] .ls-face-hello { font-size:1.75rem; line-height:1.05; overflow-wrap:anywhere; }
html[data-look] .ls-face-num { color:var(--text-muted); font-size:1.15rem; }
html[data-look] .ls-minis { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
html[data-look] .ls-mini { display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px; min-height:44px; background:transparent; color:var(--text);
  border:1px solid transparent; border-radius:var(--radius-md); font:inherit; font-weight:700; cursor:pointer; }
html[data-look] .ls-mini.active { border-color:var(--accent-line, var(--accent)); }
html[data-look] .ls-mini svg { width:100%; height:auto; }
html[data-look] .ls-mini-btn { fill:var(--accent); }
html[data-look] .ls-prev-row { background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); cursor:default; }
html[data-look] .ls-prev-av { flex:0 0 40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--surface-2);
  border:1px solid var(--n-border-strong); font-weight:800; font-size:.82rem; }
html[data-look] .ls-logo-row { display:flex; align-items:center; gap:14px; }
html[data-look] .ls-logo { flex:0 0 72px; height:72px; display:grid; place-items:center; overflow:hidden; background:var(--surface-2);
  border:1px solid var(--n-border-strong); border-radius:var(--radius-md); font-weight:800; }
html[data-look] .ls-logo img { width:100%; height:100%; object-fit:cover; }
html[data-look] .ls-logo-acts { display:flex; flex-wrap:wrap; gap:8px; }
html[data-look] .ls-save { margin-top:8px; }

/* The line over the look tiles says how to read them. */
html[data-look] .look-studio .ls-key { margin-top:-6px; font-size:.82rem; color:var(--text-muted); }
/* A segmented slider takes the LOOK's button shape, track and chosen segment
   alike (Drew, 2026-10-10: a pill track around a rectangle "looks very
   awkward"). The segment sits 3px inside the track, so its radius is the
   track's less 3px, and the two read as one shape. */
html[data-look] .mode-picker { border-radius:var(--radius-btn, var(--radius-md)); }
html[data-look] .mode-picker .opt-chip { border-radius:max(2px, calc(var(--radius-btn, var(--radius-md)) - 3px)); }
/* A hairline between the rows of a navigation list (Drew, 2026-10-10:
   "missing the hairline"). .group-list draws one with border-top, but the
   row's own border:0 outranks it, so the list draws its own, across the
   card as the approved screen has it. */
html[data-look] .look-studio .ls-rows > .ls-row + .ls-row { box-shadow:inset 0 1px 0 var(--n-border-strong, var(--border)); }

/* ── The header photo (5f; UI.syncBand places it) ─────────────────────────
   Behind the greeting on both Todays and the gym console: the look's photo
   under its shade, fading into the page at the bottom so the cards below sit
   on the canvas. Never behind Workout complete. */
html[data-look] .look-band { position:absolute; top:0; left:0; right:0; bottom:-44px; z-index:0; pointer-events:none;
  background-image:var(--band-scrim), var(--look-photo, none); background-size:auto, cover; background-position:0 0, center 55%;
  background-repeat:no-repeat; background-color:var(--bg); }
html[data-look] .today-head:has(> .look-band), html[data-look] #page-org > .page-header:has(> .look-band) { position:relative; isolation:isolate; }
html[data-look] .today-head:has(> .look-band) > :not(.look-band), html[data-look] #page-org > .page-header:has(> .look-band) > :not(.look-band) { position:relative; z-index:1; }
/* What follows the head sits above the band's faded lower edge. */
html[data-look] .today-head:has(> .look-band) ~ *, html[data-look] #page-org > .page-header:has(> .look-band) ~ * { position:relative; z-index:1; }
html[data-look] .today-head:has(> .look-band) .today-greeting, html[data-look] .today-head:has(> .look-band) .today-date,
html[data-look] .today-head:has(> .look-band) .th-next, html[data-look] .today-head:has(> .look-band) .th-next *,
html[data-look] #page-org:not(:has(.org-home[hidden])) > .page-header:has(> .look-band) .page-title, html[data-look] #page-org:not(:has(.org-home[hidden])) > .page-header:has(> .look-band) .back-btn {
  color:var(--band-ink, var(--text)); text-shadow:var(--band-shadow); }
/* The gym console wears the photo on its menu only, as approved. */
/* ...and so does its ink: inside a section the photo is gone, and white
   ink stayed on Heritage's cream page (found rendering 2026-10-11). The ink
   rules above therefore name #page-org:not(:has(.org-home[hidden])). */
html[data-look] #page-org:has(.org-home[hidden]) > .page-header > .look-band { display:none; }
/* The app's own bar sits on the photo while the photo is under it. */
html[data-look].rc-band-top .nav, html[data-look].rc-band-top .client-nav { background:transparent; border-bottom-color:transparent; }
html[data-look].rc-band-top .nav .nav-name, html[data-look].rc-band-top .nav .nav-sub, html[data-look].rc-band-top .nav button,
html[data-look].rc-band-top .client-nav .nav-name, html[data-look].rc-band-top .client-nav .nav-sub, html[data-look].rc-band-top .client-nav button { color:var(--band-ink, var(--text)); text-shadow:var(--band-shadow); }

/* The Header photo page: the preview is the band itself in miniature, the
   look's shade over the chosen photo, with a dashed box where the greeting
   sits (approved). */
html[data-look] .look-studio .ls-hdr-prev { position:relative; aspect-ratio:1.85; border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--n-border); background-image:var(--band-scrim), var(--look-photo, none); background-size:auto, cover;
  background-position:0 0, center 55%; background-repeat:no-repeat; background-color:var(--surface-2); }
html[data-look] .look-studio .ls-hdr-safe { position:absolute; left:8%; top:14%; width:52%; height:42%; display:grid; place-items:center;
  border:2px dashed var(--band-ink, var(--text)); border-radius:var(--radius-sm); color:var(--band-ink, var(--text)); text-shadow:var(--band-shadow);
  font-weight:700; font-size:.88rem; }
html[data-look] .look-studio .ls-hdrs { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
html[data-look] .look-studio .ls-hdr { position:relative; padding:0; border:1px solid var(--n-border); border-radius:var(--radius-md);
  overflow:hidden; background:var(--surface-2); cursor:pointer; aspect-ratio:1.4; }
html[data-look] .look-studio .ls-hdr img { display:block; width:100%; height:100%; object-fit:cover; }
html[data-look] .look-studio .ls-hdr.active { border:3px solid var(--accent-line, var(--accent)); }
html[data-look] .look-studio .ls-hdr-tick { position:absolute; right:8px; top:8px; width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; background:var(--accent); color:var(--accent-contrast); }
html[data-look] .look-studio .ls-hdr-tick svg { width:16px; height:16px; }

/* The shades, by kind (Looks.bandOf writes data-band on <html>, and the
   studio on its own root so its preview matches). Left and top are shaded,
   where the greeting sits; the first layer fades the photo into the page so
   the cards below sit on the canvas. These are the approved legibility
   scrims (5f5-screens photoCss), not decoration. */
html[data-look][data-band], html[data-look] [data-band] {
  --band-fade:linear-gradient(180deg, transparent 62%, var(--bg) 100%); }
html[data-look][data-band="dark"], html[data-look] [data-band="dark"] { --band-shadow:0 1px 16px rgba(0,0,0,.55);
  --band-scrim:var(--band-fade), linear-gradient(90deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.25) 50%,rgba(0,0,0,.05) 80%), linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.1) 55%,rgba(0,0,0,.25)); }
html[data-look][data-band="deep"], html[data-look] [data-band="deep"] { --band-shadow:0 1px 16px rgba(0,0,0,.55);
  --band-scrim:var(--band-fade), linear-gradient(90deg,rgba(0,0,0,.8) 0,rgba(0,0,0,.5) 55%,rgba(0,0,0,.2) 85%), linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.2) 55%,rgba(0,0,0,.35)); }
html[data-look][data-band="light"], html[data-look] [data-band="light"] { --band-shadow:none;
  --band-scrim:var(--band-fade), linear-gradient(90deg,rgba(247,246,243,.86) 0,rgba(247,246,243,.6) 50%,rgba(247,246,243,.12) 85%), linear-gradient(180deg,rgba(247,246,243,.35),rgba(247,246,243,0) 50%); }

/* ── The look's type roles, app-wide (2026-10-10, Drew: "The current fonts
   differ from the layouts approved"). Each look names three faces beyond its
   UI face (js/looks.js TYPE and FACES): a LABEL voice for section headings,
   the date and the brand bar; a NUMBER face for the figures a screen is
   about; a DATA face for timetable times. Selectors are listed one per line
   (no comma inside :is), because the look test reads every selector. */
html[data-look] .section-label,
html[data-look] .today-date,
html[data-look] .th-next-eye,
html[data-look] .nav-name {
  font-family:var(--label-font, var(--font-family)); font-weight:var(--label-weight, 700);
  letter-spacing:var(--label-track, .08em); font-style:var(--label-style, normal);
  text-transform:var(--label-case, uppercase); }
html[data-look] .section-label { font-size:.78rem; color:var(--text-muted); }
html[data-look] .today-date { font-size:.82rem; }
html[data-look] .nav-name { font-size:.84rem; }
/* Figures. */
html[data-look] .num,
html[data-look] .sc-n,
html[data-look] .admin-metric-num,
html[data-look] .ag-time,
html[data-look] .wd-time,
html[data-look] .rc-cal-sdn,
html[data-look] .tm-v,
html[data-look] .tm-big {
  font-family:var(--font-num, var(--font-family)); font-weight:var(--face-num-weight, 800); letter-spacing:0; }
/* Times in a list read as a timetable. */
html[data-look] .today-sess-time {
  font-family:var(--font-data, var(--font-family)); letter-spacing:0; }
/* Training Mode's exercise name is a title, in the look's own face. */
html[data-look] .tm-demo .tm-info h2 {
  font-family:var(--font-brand, var(--font-family)); font-weight:var(--face-weight, 800);
  letter-spacing:var(--face-track, 0); text-transform:var(--face-case, none); }

/* ── 5f page chrome: no app bar (approved 2026-10-10) ─────────────────────
   Every approved screen opens on its own title, and the brand lives on
   Today, on the photo. The bar's buttons moved: Settings to Today and More,
   Gym admin to More. Hidden, not removed, because a dozen paths still call
   #trainerSettingsBtn / #trainerGymBtn by id to open those pages. The top
   of the page keeps clear of a phone's status bar. */
html[data-look] .nav { display:none; }
html[data-look] .client-nav { display:none; }
html[data-look] body { padding-top:env(safe-area-inset-top, 0px); }

/* ── Coach Today (approved trainer-k-<look>-today) ──────────────────────── */
html[data-look] .today-brand { display:flex; align-items:flex-start; gap:8px; color:var(--band-ink, var(--text)); margin-bottom:14px; }
html[data-look] .today-crest { flex:0 0 26px; width:26px; height:26px; display:grid; place-items:center; overflow:hidden;
  border:1px solid currentColor; border-radius:var(--radius-sm); font-size:.62rem; font-weight:800; margin-top:4px; }
html[data-look] .today-crest img { width:100%; height:100%; object-fit:cover; }
html[data-look] .today-brand-name { flex:1 1 auto; min-width:0; margin-top:8px; font-size:.78rem;
  font-family:var(--label-font, var(--font-family)); font-weight:var(--label-weight, 700); letter-spacing:var(--label-track, .08em);
  font-style:var(--label-style, normal); text-transform:var(--label-case, uppercase); text-shadow:var(--band-shadow, none);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Settings, top right of the screen's grid: level with the brand on a
   phone, at the far right on a laptop. Out of flow, so it takes no grid
   cell, and above the photo. */
html[data-look] .today-grid, html[data-look] .ctoday-grid { position:relative; }
html[data-look] .today-gear { position:absolute; top:-6px; right:-10px; z-index:2; width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:0; color:var(--band-ink, var(--text)); cursor:pointer; padding:0; filter:drop-shadow(var(--band-shadow, none)); }
html[data-look] .today-brand-name { padding-right:40px; }
/* The greeting at the look's own approved size and leading (FACES.hello). */
html[data-look] .today-head .today-greeting { margin-top:2px; font-size:var(--face-hello, 1.75rem); line-height:var(--face-lh, 1.05); }
html[data-look] .today-head .today-date { margin-top:8px; }
html[data-look] .th-cards { margin-top:14px; gap:8px; }
/* Tight, as Drew asked: "excessive interior padding". */
html[data-look] .th-card { border-radius:var(--radius-md); background:var(--surface-1); border-color:var(--n-border); min-height:0; padding:8px 11px 7px; gap:0; }
html[data-look] .th-card-n { font-family:var(--font-num, var(--font-family)); font-weight:var(--face-num-weight, 800); font-size:1.45rem; line-height:1; }
html[data-look] .th-card-l { font-size:.78rem; line-height:1.2; color:var(--text-muted); margin-top:3px; }
/* A section's heading row: the label left, a figure or a link right. */
html[data-look] .today-sec-h { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:20px 0 8px; }
html[data-look] .today-sec-h .section-label { margin:0; }
html[data-look] .today-sec-r { font-size:.82rem; color:var(--text-muted); white-space:nowrap; }
html[data-look] .today-in { font-family:var(--label-font, var(--font-family)); font-weight:var(--label-weight, 700);
  letter-spacing:var(--label-track, .08em); text-transform:var(--label-case, uppercase); color:var(--text); font-size:.78rem; }
html[data-look] .today-viewall { background:none; border:0; padding:0; min-height:44px; font:inherit; font-size:.82rem; font-weight:700; color:var(--text); cursor:pointer; }
/* Next session: the time, a rule, who and where, and a way in. */
html[data-look] .th-next-card { position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1px minmax(0,1fr) auto;
  column-gap:14px; align-items:center; width:100%; padding:13px 12px 13px 18px; text-align:left; cursor:pointer; font:inherit; color:var(--text);
  background:var(--surface-1); border:1px solid var(--n-border-strong); border-radius:var(--radius-md); }
html[data-look] .th-next-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); }
html[data-look] .tn-time b { display:block; font-size:1.7rem; line-height:.95; }
html[data-look] .tn-time span { display:block; font-size:.8rem; font-weight:700; margin-top:2px; }
html[data-look] .tn-vr { align-self:stretch; background:var(--n-border-strong); }
html[data-look] .tn-who { display:block; font-size:1rem; font-weight:700; }
html[data-look] .tn-sub { display:block; font-size:.78rem; color:var(--text-muted); margin-top:1px; }
html[data-look] .tn-go { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--n-border-strong); font-size:1.05rem; }
/* The day as a timeline: a rail with a dot per session, the next one in the
   main color, those already past quieter. */
html[data-look] .today-tl { display:flex; flex-direction:column; gap:0; }
html[data-look] .today-tl .today-sess { position:relative; display:grid; grid-template-columns:16px 4.6rem 34px minmax(0,1fr) auto;
  column-gap:9px; align-items:center; min-height:48px; padding:4px 0; background:transparent; border:0; border-radius:0; }
html[data-look] .today-tl .today-sess::before { content:''; position:absolute; left:7px; top:0; bottom:0; width:1px; background:var(--n-border-strong); }
html[data-look] .today-tl .today-sess:first-child::before { top:50%; }
html[data-look] .today-tl .today-sess:last-child::before { bottom:50%; }
html[data-look] .today-tl .today-sess:only-child::before { display:none; }
html[data-look] .tl-dot { width:9px; height:9px; border-radius:50%; background:var(--text-quiet, var(--text-dim)); justify-self:center; position:relative; z-index:1; box-shadow:0 0 0 3px var(--bg); }
html[data-look] .today-sess.now .tl-dot { background:var(--accent); }
html[data-look] .today-tl .today-sess-time { min-width:0; font-size:.8rem; font-weight:600; }
html[data-look] .tl-av { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2);
  border:1px solid var(--n-border-strong); font-size:.64rem; font-weight:800; }
html[data-look] .today-tl .today-sess-who { font-size:.9rem; }
html[data-look] .today-sess.done .today-sess-time,
html[data-look] .today-sess.done .today-sess-who { color:var(--text-muted); font-weight:550; }
/* Needs attention (2026-10-11): one card per kind of need, the header-card
   treatment (the shared rule further down), in ONE ROW a thumb swipes. Each
   card is a little under half the row, so the next one shows at the edge
   and says there is more; it snaps to a card's start. A laptop lays the
   row out as a grid instead (wide.css), so nothing is hidden. */
html[data-look] .tn-swipe { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px, 42%); gap:8px;
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; }
html[data-look] .tn-swipe::-webkit-scrollbar { display:none; }
html[data-look] .tn-card { scroll-snap-align:start; font:inherit; color:var(--text); cursor:pointer;
  background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); }

/* Today's small hooks, each with a job: the panel is a block, the heading
   is the section label, the name keeps its own line, the middle column of
   the Next session card may shrink. */
html[data-look] .today-panel { display:block; }
html[data-look] .today-sched-h { margin:0; }
html[data-look] .today-name { display:inline; }
html[data-look] .tn-main { min-width:0; }
/* On a laptop the photo runs the full width, behind BOTH columns, so the
   right column must sit above it as the left column's contents do. */
html[data-look] .today-right { position:relative; z-index:1; }
/* The coach Today's header keeps the approved room between the brand and the
   greeting (~75px at 390), so the photo has height to show. It came from the
   initials-and-gear stack; with that gone (Drew, 2026-10-10) the room is set
   here, and only the cards' INSIDE was to get tighter. The client Today's
   approved header is tighter, so this is the coach's alone. */
html[data-look] #dashToday .today-brand { margin-bottom:4.4rem; }
/* Under the date now (2026-10-11), at the week card's 16px, and over the
   photo's faded edge like it. */
html[data-look] #dashToday .th-cards { margin-top:16px; position:relative; z-index:1; }

/* ── Client Today (approved client-n-<look>-today) ───────────────────────── */
/* This week: a card over the photo's faded edge. */
html[data-look] .wk-card { position:relative; z-index:1; margin-top:16px; padding:12px 13px; background:var(--surface-1);
  border:1px solid var(--n-border); border-radius:var(--radius-md); }
html[data-look] .wk-head { display:flex; align-items:baseline; gap:8px; }
html[data-look] .wk-head .section-label { flex:1 1 auto; margin:0; }
html[data-look] .wk-sum { font-size:.78rem; color:var(--text-muted); white-space:nowrap; }
html[data-look] .wk-sum b { font-size:1.15rem; color:var(--text); }
html[data-look] .wk-days { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); margin-top:10px; }
html[data-look] .wk-day { display:flex; flex-direction:column; align-items:center; gap:5px; }
html[data-look] .wk-dow { font-family:var(--label-font, var(--font-family)); font-size:.66rem; font-weight:var(--label-weight, 700);
  letter-spacing:var(--label-track, .08em); color:var(--text-muted); }
html[data-look] .wk-n { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:.84rem; font-weight:700;
  background:var(--surface-2); font-variant-numeric:tabular-nums; }
html[data-look] .wk-day.on .wk-n { background:var(--accent); color:var(--accent-contrast); }
html[data-look] .wk-day.today .wk-n { box-shadow:inset 0 0 0 1.5px var(--text); }
html[data-look] .wk-day.on.today .wk-n { box-shadow:inset 0 0 0 1.5px var(--text), inset 0 0 0 3px var(--accent); }
/* A day is a button (2026-10-11, js/week-glance.js): the chosen day is
   ringed in the main color; a dot under a day marks something still ahead;
   the chosen day's list opens under the strip, on a hairline. Same card on
   the client's Today and the coach's. */
html[data-look] button.wk-day { appearance:none; background:transparent; border:0; padding:4px 0 2px; margin:0; color:inherit; font:inherit; cursor:pointer; min-height:44px; border-radius:var(--radius-sm); }
html[data-look] button.wk-day:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
html[data-look] .wk-day.sel .wk-n { box-shadow:0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent); }
html[data-look] .wk-pip { width:5px; height:5px; border-radius:50%; background:transparent; }
html[data-look] .wk-pip.on { background:var(--accent); }
html[data-look] .wk-detail { margin-top:10px; padding-top:10px; border-top:1px solid var(--n-border); }
html[data-look] .wk-dh { font-family:var(--label-font, var(--font-family)); font-size:.72rem; font-weight:var(--label-weight, 700); letter-spacing:var(--label-track, .08em); text-transform:var(--label-case, uppercase); color:var(--text-muted); margin-bottom:4px; }
html[data-look] .wk-list { display:flex; flex-direction:column; }
html[data-look] .wk-it { display:grid; grid-template-columns:4.6rem minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--n-border); text-align:left; width:100%; background:transparent; color:inherit; font:inherit; }
html[data-look] .wk-list > .wk-it:first-child { border-top:0; }
html[data-look] button.wk-it { appearance:none; border-left:0; border-right:0; border-bottom:0; cursor:pointer; min-height:44px; grid-template-columns:4.6rem minmax(0,1fr) auto auto; }
html[data-look] .wk-it-t { font-family:var(--font-data, var(--font-family)); font-size:.82rem; color:var(--text-muted); white-space:nowrap; }
html[data-look] .wk-it-main { display:flex; flex-direction:column; min-width:0; }
html[data-look] .wk-it-main b { font-weight:600; font-size:.92rem; display:flex; align-items:center; gap:6px; min-width:0; }
html[data-look] .wk-it-main small { font-size:.8rem; color:var(--text-muted); overflow-wrap:anywhere; }
/* A row's one action (Mark done, 2026-10-11): a fourth column. */
html[data-look] .wk-it:has(.wk-it-act) { grid-template-columns:4.6rem minmax(0,1fr) auto auto; }
html[data-look] .wk-it-act { min-height:36px; padding:0 12px; border:1px solid var(--accent-line, var(--accent)); border-radius:var(--radius-sm);
  background:transparent; color:var(--text); font:inherit; font-size:.82rem; font-weight:700; white-space:nowrap; cursor:pointer; position:relative; }
html[data-look] .wk-it-act::after { content:''; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }
html[data-look] .wk-it-tag { font-size:.74rem; font-weight:700; padding:2px 8px; border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text-dim); white-space:nowrap; }
html[data-look] .wk-it--canceled .wk-it-main b { text-decoration:line-through; color:var(--text-muted); }
html[data-look] .wk-it-go { color:var(--text-muted); }
html[data-look] .wk-none { margin:4px 0 2px; font-size:.86rem; color:var(--text-muted); }
/* The day sits on the page, not in a box (the agenda card is approved away). */
html[data-look] .ag-block.cn-today { background:transparent; border:0; box-shadow:none; padding:0; margin-top:0; }
html[data-look] .tn-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
html[data-look] .tn-tag { padding:2px 8px; border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--text); font-size:.74rem; font-weight:700; }
/* Two actions side by side, as approved, each with its icon. */
html[data-look] .cn-today .ag-actions { display:grid; grid-template-columns:repeat(auto-fit, minmax(0,1fr)); gap:10px; margin-top:14px; }
html[data-look] .cn-today .ag-actions .rc-btn { gap:8px; }
html[data-look] .cn-today .ag-actions .rc-btn[style*="display:none"] { display:none; }
html[data-look] .cn-rest { display:block; margin:6px auto 0; min-height:44px; padding:0 12px; background:none; border:0;
  font:inherit; font-size:.86rem; font-weight:700; color:var(--text-muted); cursor:pointer; }
/* Habits, as approved: one card, a row per habit, the tick on the LEFT as a
   small box (24px to the eye, 44px to the finger). */
html[data-look] .habit-list.group-list { background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); padding:0 13px; }
html[data-look] .habit-list .habit-row { padding:11px 0; }
html[data-look] .habit-row .habit-tick { order:-1; position:relative; flex:0 0 24px; width:24px; height:24px; min-width:24px; min-height:24px; padding:0;
  border:1.5px solid var(--n-border-strong); border-radius:var(--radius-sm); background:transparent; color:var(--accent-contrast);
  font-size:.8rem; font-weight:800; line-height:1; display:grid; place-items:center; }
html[data-look] .habit-row .habit-tick::after { content:''; position:absolute; inset:-10px; }
html[data-look] .habit-row .habit-tick.done { background:var(--accent); border-color:var(--accent); }
html[data-look] .habit-row.done .habit-title { color:var(--text); }
html[data-look] .habit-title { font-size:.95rem; }
html[data-look] .habit-list.group-list > .habit-row,
html[data-look] .habit-list.group-list > .habit-row.done { border-color:var(--n-border); }
/* Drew, 2026-10-10: AM/PM sits right-aligned under the time, on the Up next
   card and (the same card) the coach's Next session. */
html[data-look] .tn-time { display:flex; flex-direction:column; align-items:flex-end; }
html[data-look] .tn-time span { text-align:right; }
/* The week's count is the same size as the words beside it, on one baseline
   ("aligned with the other typeface on that line"). */
html[data-look] .wk-sum { display:inline-flex; align-items:baseline; gap:4px; }
html[data-look] .wk-sum b { font-size:inherit; line-height:inherit; }

/* ── Schedule: the week strip and the day (approved trainer-k-<look>-schedule) ── */
html[data-look] .rc-cal-month--strip { justify-content:space-between; gap:4px; }
html[data-look] .rc-cal-arrow { flex:0 0 44px; width:44px; height:44px; background:none; border:0; color:var(--text); font-size:1.6rem; line-height:1; cursor:pointer; }
html[data-look] .rc-cal-month--strip .rc-cal-pick { flex:1 1 auto; justify-content:center; text-align:center; font-weight:700; }
/* A full-page calendar adds from the bar under the day (approved on Strength
   Lab; the floating + of the other looks waits, see CLAUDE.md). */
html[data-look] .rc-cal-fab--float { display:none; }
html[data-look] .rc-cal-addbar { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; margin-top:16px;
  background:var(--accent); color:var(--accent-contrast); border:0; border-radius:var(--radius-btn, var(--radius-md)); font:inherit; font-weight:800; cursor:pointer; }
html[data-look] .rc-cal-strip { gap:2px; }
html[data-look] .rc-cal-sday { border:0; padding:4px 0; gap:6px; }
html[data-look] .rc-cal-sdow { font-family:var(--label-font, var(--font-family)); font-weight:var(--label-weight, 700); letter-spacing:var(--label-track, .08em); color:var(--text-muted); font-size:.68rem; }
html[data-look] .rc-cal-sday .rc-cal-sdn { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; font-size:1.02rem; padding:0; }
html[data-look][data-look="lab"] .rc-cal-sday .rc-cal-sdn { border-radius:var(--radius-sm); }
html[data-look] .rc-cal-sday.today .rc-cal-sdn { background:transparent; color:var(--text); box-shadow:inset 0 0 0 1.5px var(--n-border-strong); padding:0; }
html[data-look] .rc-cal-sday.sel .rc-cal-sdn { background:var(--accent); color:var(--accent-contrast); box-shadow:none; }
/* One color for the dots, as approved: what is there, not what kind. */
html[data-look] .rc-cal-sdots i { background:var(--accent); }
html[data-look] .rc-cal-detail-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; }
html[data-look] .rc-cal-detail-head .rc-cal-detail-h { margin:0; font-size:.98rem; font-weight:750; }
html[data-look] .rc-cal-detail-n { font-size:.8rem; color:var(--text-muted); }
/* The day as a timeline: the time, then a rail with a dot, then the card. */
html[data-look] .rc-cal-tl { display:grid; grid-template-columns:3rem minmax(0,1fr); column-gap:6px; }
html[data-look] .rc-cal-tl-t { font-family:var(--font-data, var(--font-family)); font-size:.72rem; font-weight:600; color:var(--text-muted); padding-top:14px; white-space:nowrap; }
html[data-look] .rc-cal-tl-rail { position:relative; border-left:1px solid var(--n-border-strong); padding:4px 0 6px 12px; }
html[data-look] .rc-cal-tl-rail::before { content:''; position:absolute; left:-4px; top:18px; width:7px; height:7px; border-radius:50%; background:var(--text-quiet, var(--text-dim)); }
html[data-look] .rc-cal-tl-rail.now::before { background:var(--accent); }
html[data-look] .rc-cal-tl .rc-cal-ditem { border:1px solid var(--n-border); border-radius:var(--radius-md); background:var(--surface-1); padding:10px 12px; align-items:center; }
html[data-look] .rc-cal-tl .rc-cal-dot { display:none; }
html[data-look] .rc-cal-tl .rc-cal-ditem-t { font-size:.92rem; font-weight:700; }
html[data-look] .rc-cal-tl .rc-cal-ditem-s { font-size:.76rem; color:var(--text-muted); }
html[data-look] .rc-cal-tl-rail.now .rc-cal-ditem { border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent); }
html[data-look] .rc-cal-tl-rail.done .rc-cal-ditem-t { color:var(--text-muted); }
/* The card's way in is the approved round arrow; the words stay for a
   screen reader. */
html[data-look] .rc-cal-tl .rc-cal-edit { position:relative; width:30px; height:30px; flex:0 0 30px; border-radius:50%; border:1px solid var(--n-border-strong);
  font-size:0; color:transparent; overflow:hidden; }
html[data-look] .rc-cal-tl .rc-cal-edit::after { content:'\203A'; position:absolute; inset:0; display:grid; place-items:center; font-size:1.05rem; color:var(--text); }
/* The page's add, a round + in the title row (approved Schedule, Calendar). */
html[data-look] .dash-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
/* .page-head-row is a COLUMN (Back over the title, 5d); a title row with an
   action is a row, title left, action right. */
html[data-look] .page-head-row.page-head-row--act { flex-direction:row; align-items:center; justify-content:space-between; gap:12px; width:100%; }
html[data-look] .page-act-add { flex:0 0 48px; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; border:0; cursor:pointer;
  background:var(--accent); color:var(--accent-contrast); }
html[data-look] .page-act-add svg { width:22px; height:22px; }
/* Open times this week: two by two. */
html[data-look] #calOpenTimes .section-label { margin-top:20px; }
html[data-look] .cal-open { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:8px; }
html[data-look] .cal-open-slot { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 13px; text-align:left; cursor:pointer;
  font:inherit; color:var(--text); background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); }
html[data-look] .cal-open-slot b { font-size:1.05rem; }
html[data-look] .cal-open-slot span { font-size:.78rem; color:var(--text-muted); }
html[data-look] #cBookBtn { margin-top:16px; }
html[data-look] .cal-open-none { margin-top:8px; font-size:.86rem; color:var(--text-muted); }

/* ── Inbox (approved trainer-k-<look>-inbox) ────────────────────────────── */
html[data-look] .page-act-icon { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; background:none; border:0; color:var(--text); cursor:pointer; }
/* The tab counts sit beside their names, as circles; the strip scrolls
   rather than wraps when four tabs and their counts outgrow a phone. */
html[data-look] #inboxSeg { flex-wrap:nowrap; justify-content:space-between; gap:4px; overflow-x:auto; scrollbar-width:none; }
html[data-look] #inboxSeg button { white-space:nowrap; display:inline-flex; align-items:center; gap:3px; flex:0 0 auto; padding-left:0; padding-right:0;
  font-size:.76rem; font-weight:700; }
html[data-look] #inboxSeg .inbox-seg-badge { position:static; transform:none; margin:0; min-width:17px; height:17px; line-height:17px; padding:0 4px;
  font-size:.62rem; background:var(--surface-2); color:var(--text); }
html[data-look] #inboxSeg button.on .inbox-seg-badge { background:var(--accent); color:var(--accent-contrast); }
html[data-look] .ki-search { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:8px; margin:12px 0 4px; }
html[data-look] .ki-field { position:relative; display:block; min-width:0; }
html[data-look] .ki-field > svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-muted); pointer-events:none; }
html[data-look] .ki-q { min-height:44px; height:44px; width:100%; padding-left:40px; background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); }
html[data-look] .ki-filter { width:44px; height:44px; display:grid; place-items:center; border-radius:var(--radius-md); border:1px solid var(--n-border-strong);
  background:transparent; color:var(--text); cursor:pointer; }
html[data-look] .ki-filter[aria-pressed="true"] { border-color:var(--accent-line, var(--accent)); color:var(--accent-line, var(--accent)); }
/* Rows on the page, not in a box: a round avatar, the name, two lines of the
   last message, and the time with a dot when something is unread. */
html[data-look] .conv-list.group-list { background:transparent; border:0; border-radius:0; }
html[data-look] .conv-list .conv-row { padding:12px 0; align-items:flex-start; background:transparent; }
html[data-look] .conv-list .conv-av, html[data-look] .nm-list .conv-av { width:44px; height:44px; flex:0 0 44px; border-radius:50%; }
html[data-look] .conv-list .conv-name { font-size:.95rem; }
html[data-look] .conv-list .conv-preview { font-size:.84rem; color:var(--text-muted); line-height:1.35; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html[data-look] .conv-list .conv-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
html[data-look] .conv-list .conv-time { font-family:var(--font-data, var(--font-family)); font-size:.72rem; color:var(--text-muted); }
html[data-look] .conv-list .conv-unread { width:9px; height:9px; min-width:9px; padding:0; border-radius:50%; font-size:0; background:var(--accent); }
html[data-look] .conv-list .conv-go { color:var(--text-muted); font-size:1.1rem; line-height:1; }
html[data-look] .conv-none { padding:16px 0; color:var(--text-muted); font-size:.88rem; }
html[data-look] .nm-list { margin-top:10px; }

/* ── Clients (approved trainer-n-<look>-clients) ─────────────────────────── */
/* The roster's + and Import live in the title row and the list head; the two
   buttons stay in the panel (they are what those click) and show only when
   there is nobody yet, beside the empty state that points at them. */
html[data-look] #clientList.cl-has ~ #addClientBtn { display:none; }
html[data-look] #clientList.cl-has ~ #importClientsBtn { display:none; }
html[data-look] #rosterSearch .ki-search { margin-top:4px; }
html[data-look] .cl-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:12px 0; }
html[data-look] .cl-tile { display:flex; flex-direction:column; justify-content:space-between; gap:6px; min-height:64px; padding:10px 12px; text-align:left;
  background:var(--surface-1); color:var(--text); border:1px solid var(--n-border); border-radius:var(--radius-md); cursor:pointer; font:inherit; }
html[data-look] .cl-tile b { font-size:1.45rem; line-height:1; }
html[data-look] .cl-tile span { font-size:.8rem; color:var(--text-muted); line-height:1.25; }
html[data-look] .th-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); flex:0 0 auto; }
/* A header card with something in it: an accent outline (2026-10-11, the
   dot that said so is gone). A chosen Clients filter is outlined too, with
   the inset ring on top, so the two still read apart. */
html[data-look] .th-card.has, html[data-look] .cl-tile.has { border-color:var(--accent-line, var(--accent)); }
html[data-look] .cl-tile.on { border-color:var(--accent-line, var(--accent)); box-shadow:inset 0 0 0 1px var(--accent-line, var(--accent)); }
html[data-look] .cl-head { margin-top:2px; }
html[data-look] .cl-none { padding:16px 0; color:var(--text-muted); font-size:.88rem; }
/* The phone row. From 900px the laptop TABLE takes over and wide.css puts
   its columns back (this sheet carries no media query: every rule here is
   scoped to a look, and a test holds that). */
html[data-look] #clientRows .client-row { padding:9px 14px; gap:12px; margin:0; }
html[data-look] #clientRows .client-avatar { width:44px; height:44px; border-radius:50%; }
html[data-look] #clientRows .client-name { font-size:.93rem; }
html[data-look] #clientRows .client-meta { display:none; }
html[data-look] #clientRows .client-flags { display:none; }
html[data-look] #clientRows .client-status { display:none; }
html[data-look] #clientRows .client-last-seen { font-size:.8rem; line-height:1.3; color:var(--text-muted); }
html[data-look] #clientRows .ls-n { white-space:nowrap; }
html[data-look] #clientRows .ls-trained { display:none; }
html[data-look] .cl-sum { display:flex; align-items:center; gap:4px; flex:0 0 auto; color:var(--text-muted); font-size:.82rem; }
html[data-look] .cl-sum b { color:var(--text); font-size:1rem; }
html[data-look] .cl-sum .cl-dot { margin-left:2px; }
html[data-look] .cl-sum .cl-chev { margin-left:4px; font-size:1.1rem; line-height:1; }

/* ── Client header photos (v166, approved 5f) ──────────────────────────────
   Trainer side only. An avatar with a photo shows the picture (its initials
   stay in the markup for a screen reader and as the fallback); a session
   card carries it on the right with the card's own ground fading over it on
   the left, so the words stay on a plain surface (5f7 cphoto.js).
   The avatar is cut from the RIGHT of the photo (Drew, 2026-10-11): a header
   photo puts its subject right of center so the name can sit on the left, so
   a centered circle halves the face. --cphoto-pos is the seam for a focus
   point saved by the crop tool. */
html[data-look] [data-cav].has-photo { background-image:var(--cphoto); background-size:cover; background-position:var(--cphoto-pos, right center); background-repeat:no-repeat; color:transparent; border-color:transparent; }
html[data-look] .th-next-card.has-photo { background-image:linear-gradient(90deg, var(--surface-1) 0, var(--surface-1) 38%, color-mix(in srgb, var(--surface-1) 72%, transparent) 62%, color-mix(in srgb, var(--surface-1) 18%, transparent) 100%), var(--cphoto);
  background-size:cover; background-position:right center; background-repeat:no-repeat; }
html[data-look] .th-next-card.has-photo .tn-go { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--surface-1); border:1px solid var(--n-border-strong); }
html[data-look] .hp-stock { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
html[data-look] .hp-stock-tile { padding:0; aspect-ratio:1.6; border:2px solid transparent; border-radius:var(--radius-md); overflow:hidden; background:var(--surface-2); cursor:pointer; }
html[data-look] .hp-stock-tile img { width:100%; height:100%; object-fit:cover; display:block; }
html[data-look] .hp-stock-tile.on { border-color:var(--accent-line, var(--accent)); }
html[data-look] .hc-stage { position:relative; aspect-ratio:1.15; overflow:hidden; background:var(--surface-2); border-radius:var(--radius-md); touch-action:none; cursor:grab; margin-top:6px; }
html[data-look] .hc-img { position:absolute; max-width:none; user-select:none; -webkit-user-select:none; pointer-events:none; }
html[data-look] .hc-box { position:absolute; left:5%; right:5%; top:50%; transform:translateY(-50%); aspect-ratio:1.6; border:2px solid #fff; box-shadow:0 0 0 999px rgba(0,0,0,.55); pointer-events:none; }
html[data-look] .hc-cap { text-align:center; font-size:.84rem; color:var(--text-muted); margin-top:8px; }
html[data-look] .hc-zoom { display:flex; align-items:center; gap:10px; margin-top:12px; color:var(--text-muted); }
html[data-look] .hc-zoom input { flex:1 1 auto; accent-color:var(--accent); min-height:44px; }
html[data-look] .hc-how { margin-top:12px; }
html[data-look] .hc-prev { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; margin-top:8px; }
html[data-look] .hc-card { display:flex; flex-direction:column; justify-content:center; min-height:64px; padding:10px 14px; border:1px solid var(--n-border-strong); border-radius:var(--radius-md);
  background-color:var(--surface-1); background-image:linear-gradient(90deg, var(--surface-1) 0, var(--surface-1) 38%, color-mix(in srgb, var(--surface-1) 72%, transparent) 62%, color-mix(in srgb, var(--surface-1) 18%, transparent) 100%), var(--cphoto);
  background-size:cover; background-position:right center; background-repeat:no-repeat; }
html[data-look] .hc-card small { color:var(--text-muted); font-size:.78rem; }
html[data-look] .hc-av-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--text-muted); font-size:.78rem; }
html[data-look] .hc-av { width:56px; height:56px; border-radius:50%; background-color:var(--surface-2); background-image:var(--cphoto); background-size:cover; background-position:var(--cphoto-pos, right center); }
html[data-look] .hc-btns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:16px; }

/* ── The client profile (approved trainer-k-<look>-client) ─────────────────
   The client's header photo, or the look's own when they have none, under the
   look's shade, behind their name; Log PT session; four tabs. */
html[data-look] #page-profile.active { padding-top:0; }
html[data-look] .cp-hero { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:300px;
  margin:0 calc(50% - 50vw) 16px; padding:calc(env(safe-area-inset-top, 0px) + 12px) 20px 18px; color:var(--band-ink, var(--text));
  background-image:var(--band-scrim), var(--cphoto, var(--look-photo, none)); background-size:auto, cover; background-position:0 0, center 55%; background-repeat:no-repeat; }
html[data-look] .cp-hero-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; }
html[data-look] .cp-hero-acts { display:flex; gap:8px; }
html[data-look] .cp-pill { position:relative; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 13px; border-radius:var(--radius-pill);
  font:inherit; font-size:.82rem; font-weight:650; cursor:pointer; color:var(--band-ink, var(--text));
  background:color-mix(in srgb, var(--band-ink, var(--text)) 14%, transparent); border:1px solid color-mix(in srgb, var(--band-ink, var(--text)) 32%, transparent); }
html[data-look] .cp-pill::after { content:''; position:absolute; left:50%; top:50%; width:100%; min-width:44px; height:44px; transform:translate(-50%,-50%); }
html[data-look] .cp-pill--ic { padding:0 10px; }
html[data-look] .cp-hero-id { margin-top:46px; text-shadow:var(--band-shadow, none); }
html[data-look] .cp-hero-name { font-family:var(--font-brand, var(--font-display)); font-weight:var(--face-weight, 800); letter-spacing:var(--face-track, 0);
  text-transform:var(--title-case, none); font-size:var(--face-hello, 2.4rem); line-height:var(--face-lh, .95); }
html[data-look] .cp-hero-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:12px; font-size:.86rem; }
html[data-look] .cp-hero-dot { width:7px; height:7px; border-radius:50%; background:#3fbf73; }
html[data-look] .cp-hero-dot.off { background:var(--text-muted); }
html[data-look] .cp-hero-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; text-shadow:none; }
html[data-look] .cp-hero-pills span { padding:5px 10px; font-size:.76rem; font-weight:650; border-radius:var(--radius-sm); color:var(--band-ink, var(--text));
  background:color-mix(in srgb, var(--band-ink, var(--text)) 12%, transparent); border:1px solid color-mix(in srgb, var(--band-ink, var(--text)) 30%, transparent); }
html[data-look] .cp-hub .cp-cta { gap:8px; }
html[data-look] .cp-tabs { display:flex; justify-content:space-between; gap:6px; margin:14px 0 4px; border-bottom:1px solid var(--n-border); }
html[data-look] .cp-tab { flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 2px; background:none; border:0; border-bottom:3px solid transparent;
  font:inherit; font-size:.86rem; font-weight:600; color:var(--text-muted); cursor:pointer; }
html[data-look] .cp-tab.on { color:var(--text); font-weight:700; border-bottom-color:var(--accent); }
html[data-look] .cp-tab .inbox-seg-badge { position:static; transform:none; margin:0; min-width:17px; height:17px; line-height:17px; padding:0 4px; font-size:.62rem; font-style:normal; }
html[data-look] .cp-tabsec .cp-sec-head { display:none; }
html[data-look] .cp-tabsec.active { padding-top:6px; }
html[data-look] .cp-next { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; width:100%; padding:12px 14px; text-align:left; font:inherit; color:var(--text);
  background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); cursor:pointer; }
html[data-look] .cp-next b { display:block; font-size:.95rem; }
html[data-look] .cp-next small { display:block; font-size:.8rem; color:var(--text-muted); margin-top:2px; }
html[data-look] .cp-next-tile { width:38px; height:38px; border-radius:var(--radius-sm); display:grid; place-items:center; color:var(--accent-line, var(--accent)); background:var(--accent-soft, var(--surface-2)); }
html[data-look] .cp-next-go { color:var(--text-muted); font-size:1.1rem; }
html[data-look] .cp-next--wait { opacity:.6; }
html[data-look] .cp-lift { padding:14px; background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); }
html[data-look] .cp-lift-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
html[data-look] .cp-lift-top b { display:block; font-size:.95rem; }
html[data-look] .cp-lift-v { display:block; font-size:1.25rem; margin-top:4px; text-transform:uppercase; }
html[data-look] .cp-chip { flex:0 0 auto; padding:4px 8px; border-radius:var(--radius-sm); font-size:.76rem; font-weight:700; color:#2f9e5f; background:color-mix(in srgb, #3fbf73 16%, transparent); }
html[data-look] .cp-chip.down { color:var(--red, #d64545); background:color-mix(in srgb, var(--red, #d64545) 14%, transparent); }
html[data-look] .cpl { display:block; width:100%; height:auto; margin-top:10px; color:var(--text); overflow:visible; }
html[data-look] .cpl-grid { stroke:var(--n-border-strong); stroke-width:1; stroke-dasharray:2 3; }
html[data-look] .cpl-y { fill:var(--text-muted); font-size:8px; text-anchor:end; font-family:var(--font-data, var(--font-family)); }
html[data-look] .cpl-x { fill:var(--text-muted); font-size:8px; text-anchor:middle; font-family:var(--font-data, var(--font-family)); }
html[data-look] .cpl-line { fill:none; stroke:currentColor; stroke-width:1.6; }
html[data-look] .cpl-dot { fill:currentColor; }
html[data-look] .cpl-end { fill:var(--accent); }
html[data-look] .cpl-endv { fill:var(--text); font-size:9px; font-weight:700; text-anchor:middle; font-family:var(--font-data, var(--font-family)); }
html[data-look] .cp-lift--none { display:flex; align-items:center; gap:12px; color:var(--text-muted); font-size:.86rem; }
html[data-look] .cp-mini { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
html[data-look] .cp-mini-c { display:flex; flex-direction:column; gap:6px; padding:11px 12px; background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); }
html[data-look] .cp-mini-c > span { font-size:.76rem; color:var(--text-muted); }
html[data-look] .cp-mini-c b { font-size:1.35rem; line-height:1; }
html[data-look] .cp-mini-c small { font-size:.7rem; color:var(--text-muted); }
html[data-look] .cp-bar { height:4px; border-radius:2px; background:var(--surface-2); overflow:hidden; }
html[data-look] .cp-bar i { display:block; height:100%; background:var(--accent); }
html[data-look] .cp-bars { display:flex; align-items:flex-end; gap:2px; height:18px; }
html[data-look] .cp-bars i { flex:1 1 0; background:var(--accent); border-radius:1px; }
html[data-look] .cp-lift-v { text-transform:none; }
html[data-look] .cp-rts { display:flex; flex-direction:column; gap:8px; }
html[data-look] .cp-rt { display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:12px; align-items:center; width:100%; padding:10px 12px; text-align:left; font:inherit; color:var(--text);
  background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); cursor:pointer; }
html[data-look] .cp-rt-still { width:52px; height:52px; border-radius:var(--radius-sm); overflow:hidden; }
html[data-look] .cp-rt-none { display:grid; place-items:center; background:var(--surface-2); color:var(--text-muted); }
html[data-look] .cp-rt-main b { display:block; font-size:.95rem; }
html[data-look] .cp-rt-main small { display:block; margin-top:2px; font-size:.8rem; line-height:1.3; color:var(--text-muted); }
html[data-look] .cp-rt-go { color:var(--text-muted); font-size:1.1rem; }
html[data-look] .cp-wk { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; padding:4px; background:var(--surface-2); border-radius:var(--radius-md); }
html[data-look] .cp-wk-d { display:flex; align-items:center; justify-content:center; gap:3px; min-height:38px; font-size:.82rem; font-weight:650; color:var(--text-muted); border-radius:var(--radius-sm); }
html[data-look] .cp-wk-d.done { color:var(--text); }
html[data-look] .cp-wk-d.today { color:var(--accent-contrast, #fff); background:var(--accent); }
html[data-look] .cp-wk-p { width:5px; height:5px; border-radius:50%; background:var(--accent); }
html[data-look] .cp-wk-d.today .cp-wk-p { background:currentColor; }
html[data-look] .cp-ci { padding:12px 14px; background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); }
html[data-look] .cp-ci-top { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; }
html[data-look] .cp-ci-top b { display:block; font-size:.95rem; }
html[data-look] .cp-ci-top small { display:block; margin-top:2px; font-size:.8rem; color:var(--text-muted); }
html[data-look] .cp-ci-vals { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:12px; }
html[data-look] .cp-ci-vals span { display:flex; flex-direction:column; gap:3px; padding:8px; background:var(--surface-2); border-radius:var(--radius-sm); min-width:0; }
html[data-look] .cp-ci-vals small { font-size:.72rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-look] .cp-ci-vals b { font-size:1.05rem; }
html[data-look] .cp-ci-vals i, html[data-look] .cp-pr i { font-style:normal; font-size:.7rem; color:var(--text-muted); }
html[data-look] .cp-ci-quote { margin:10px 0 0; font-size:.86rem; color:var(--text-muted); }
html[data-look] .cp-ci-config { margin-top:10px; }
html[data-look] .cp-prs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
html[data-look] .cp-pr { display:flex; flex-direction:column; gap:4px; padding:10px 12px; background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); min-width:0; }
html[data-look] .cp-pr small { font-size:.74rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-look] .cp-pr b { font-size:1.15rem; }
html[data-look] .cp-wos { display:flex; flex-direction:column; gap:8px; }
html[data-look] .cp-wo { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; width:100%; padding:10px 14px; text-align:left; font:inherit; color:var(--text);
  background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); cursor:pointer; }
html[data-look] .cp-wo b { display:block; font-size:.95rem; }
html[data-look] .cp-wo small { display:block; margin-top:2px; font-size:.8rem; color:var(--text-muted); }
html[data-look] .cp-ov { padding-top:2px; }

/* ── Session notes and the coach's workout session (approved 5f §4) ──────── */
html[data-look] .cs-client { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px; background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); }
html[data-look] .cs-av { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.82rem; color:var(--text); background-color:var(--surface-2); }
html[data-look] .cs-who b { display:block; font-size:.98rem; }
html[data-look] .cs-who small { display:block; margin-top:2px; font-size:.8rem; color:var(--text-muted); }
html[data-look] .cs-now { padding:4px 9px; border-radius:var(--radius-sm); font-size:.74rem; font-weight:700; color:var(--accent-line, var(--accent)); background:var(--accent-soft, var(--surface-2)); }
html[data-look] .cs-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
html[data-look] .cs-tile { display:flex; flex-direction:column; justify-content:space-between; gap:6px; min-height:64px; padding:10px 12px; background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); }
html[data-look] .cs-tile b { font-size:1.4rem; line-height:1; }
html[data-look] .cs-tile span { font-size:.76rem; color:var(--text-muted); line-height:1.25; }
html[data-look] .cs-wo { padding:12px 14px; background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); }
html[data-look] .cs-wo-top { display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; align-items:center; }
html[data-look] .cs-wo-top b { display:block; font-size:.95rem; }
html[data-look] .cs-wo-top small { display:block; margin-top:2px; font-size:.8rem; color:var(--text-muted); }
html[data-look] .cs-start { margin-top:12px; gap:8px; border-color:var(--accent-line, var(--accent)); color:var(--accent-line, var(--accent)); }
html[data-look] .cs-wo .bk-hint { margin-top:8px; }
html[data-look] .cs-wo--none { color:var(--text-muted); font-size:.88rem; }
html[data-look] .cs-att { padding:12px 14px; background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); }
html[data-look] .cs-att-top { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; }
html[data-look] .cs-att-top b { display:block; font-size:.95rem; }
html[data-look] .cs-att-top small { display:block; margin-top:2px; font-size:.8rem; line-height:1.35; color:var(--text-muted); }
html[data-look] .cs-att-tick { width:38px; height:38px; border-radius:var(--radius-sm); display:grid; place-items:center; color:var(--accent-contrast, #fff); background:var(--accent); }
html[data-look] .cs-view { min-height:36px; padding:0 12px; font:inherit; font-size:.8rem; font-weight:700; color:var(--text); background:var(--surface-2); border:1px solid var(--n-border); border-radius:var(--radius-sm); cursor:pointer; }
html[data-look] .cs-att-sets { margin-top:12px; border-top:1px solid var(--n-border); }
html[data-look] .cs-att-sets > div { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; padding:9px 0; border-bottom:1px solid var(--n-border); font-size:.86rem; }
html[data-look] .cs-att-sets > div:last-child { border-bottom:0; }
html[data-look] .cs-att-sets span { color:var(--text-muted); }
html[data-look] .cs-att-sets em { font-style:normal; padding:3px 7px; font-size:.7rem; font-weight:700; border-radius:var(--radius-sm); color:var(--accent-line, var(--accent)); background:var(--accent-soft, var(--surface-2)); }
html[data-look] .cs-bar { position:sticky; bottom:calc(var(--bottom-h, 76px) + 8px); z-index:2; margin-top:16px; padding-top:8px; background:linear-gradient(180deg, transparent, var(--bg) 40%); }
html[data-look] body:has(#page-coachwo.active) .bottom-nav { display:none; }
html[data-look] #page-coachwo.active { padding:0 !important; }
html[data-look] .cw-media { position:relative; height:280px; background:#fff; overflow:hidden; }
html[data-look] .cw-video { width:100%; height:100%; object-fit:cover; display:block; }
html[data-look] .cw-novideo { height:100%; display:grid; place-items:center; color:var(--text-muted); background:var(--surface-2); }
html[data-look] .cw-topbar { position:absolute; left:12px; right:12px; top:calc(env(safe-area-inset-top, 0px) + 12px); display:flex; justify-content:space-between; align-items:center; gap:8px; }
html[data-look] .cw-ctl { position:absolute; left:12px; bottom:12px; display:flex; gap:8px; }
html[data-look] .cw-pill { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; min-width:38px; padding:0 13px; border-radius:19px; border:0;
  font:inherit; font-size:.82rem; font-weight:700; color:#fff; background:rgba(14,17,22,.72); cursor:pointer; }
html[data-look] .cw-pill::after { content:''; position:absolute; left:50%; top:50%; width:100%; min-width:44px; height:44px; transform:translate(-50%,-50%); }
html[data-look] .cw-finish { background:var(--accent); color:var(--accent-contrast, #fff); }
html[data-look] .cw-clock { cursor:default; }
html[data-look] .cw-body { padding:14px 20px 0; }
html[data-look] .cw-with { font-family:var(--label-font, var(--font-family)); font-size:.7rem; letter-spacing:var(--label-track, .08em); text-transform:var(--label-case, uppercase); color:var(--text-muted); }
html[data-look] .cw-name { margin-top:6px; font-family:var(--font-brand, var(--font-display)); font-weight:var(--face-weight, 800); text-transform:var(--title-case, none); font-size:2rem; line-height:1; }
html[data-look] .cw-sub { margin-top:6px; font-size:.86rem; color:var(--text-muted); }
html[data-look] .cw-table { margin-top:14px; }
html[data-look] .cw-th, html[data-look] .cw-tr { display:grid; grid-template-columns:36px minmax(0,1fr) minmax(0,1fr) 44px; gap:8px; align-items:center; }
html[data-look] .cw-th { padding:0 0 6px; font-size:.76rem; color:var(--text-muted); text-align:center; }
html[data-look] .cw-tr { padding:4px 0; }
html[data-look] .cw-tr > span { text-align:center; font-weight:700; color:var(--text-muted); }
html[data-look] .cw-in { width:100%; min-height:44px; text-align:center; font:inherit; font-size:1.05rem; font-weight:700; color:var(--text); background:var(--surface-1); border:1px solid var(--n-border-strong); border-radius:var(--radius-sm); }
html[data-look] .cw-tr.cur .cw-in { border-color:var(--accent-line, var(--accent)); background:var(--accent-soft, var(--surface-2)); }
html[data-look] .cw-tr.done .cw-in { color:var(--text-muted); }
html[data-look] .cw-ck { width:30px; height:30px; justify-self:center; display:grid; place-items:center; border-radius:var(--radius-sm); border:1px solid var(--n-border-strong); background:transparent; color:var(--accent-contrast, #fff); cursor:pointer; position:relative; }
html[data-look] .cw-ck::after { content:''; position:absolute; inset:-7px; }
html[data-look] .cw-ck.on { background:var(--accent); border-color:var(--accent); }
html[data-look] .cw-add { margin-top:10px; gap:6px; }
html[data-look] .cw-bar { position:sticky; bottom:0; z-index:2; display:grid; grid-template-columns:58px minmax(0,1fr) 58px; gap:8px; margin-top:20px; padding:12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px); background:var(--bg); border-top:1px solid var(--n-border); }
html[data-look] .cw-nav { min-height:58px; font-size:1.2rem; padding:0; }
html[data-look] .cw-complete { min-height:58px; gap:8px; }
/* Back is a pill in every look, as on every approved drill-in. */
html[data-look] .rc-float-back { border-radius:20px; border-color:var(--n-border-strong); min-height:40px; padding:0 14px; }
html[data-look] .back-btn { display:inline-flex; align-items:center; gap:4px; min-height:40px; padding:0 14px; border:1px solid var(--n-border-strong); border-radius:20px; background:var(--surface-1); color:var(--text); font-weight:700; }
html[data-look] .cs-wait { padding:0 12px; background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); }
html[data-look] .cs-bar { background:var(--bg); padding-bottom:4px; box-shadow:0 -12px 12px -4px var(--bg); }
html[data-look] .cs-bar { bottom:var(--bottom-h); padding:10px 0 12px; box-shadow:none; }
html[data-look] .page-head-row > .back-btn { margin-bottom:10px; }

/* ── Client progress, for the coach (approved 5f trainer-k-<look>-progress) ─ */
html[data-look] #page-cprogress .page-header { display:none; }
html[data-look] .cpg-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; }
html[data-look] .cpg-back { min-height:44px; padding:0; border:0; background:none; color:var(--text); font:inherit; font-size:1.25rem; font-weight:800; cursor:pointer; text-align:left; }
html[data-look] .cpg-more { color:var(--text); }
html[data-look] .cpg-tabs { margin-top:6px; }
html[data-look] .cpg-ranges { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:14px 0 4px; }
html[data-look] .cpg-ranges .opt-chip { min-height:40px; justify-content:center; font-weight:700; }
html[data-look] .cpg-ranges .opt-chip.active { background:var(--accent); border-color:var(--accent); color:var(--accent-contrast, #fff); }
html[data-look] .cpg-card { padding:14px; background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); }
html[data-look] .cpg-none { display:flex; align-items:center; gap:12px; color:var(--text-muted); font-size:.88rem; line-height:1.4; }
html[data-look] .cpg-none-in { margin-top:12px; color:var(--text-muted); font-size:.88rem; line-height:1.4; }
html[data-look] .cpg-pick { display:grid; grid-template-columns:minmax(0,1fr) 5.2rem; gap:8px; }
html[data-look] .cpg-pick .form-input { min-height:40px; padding-top:0; padding-bottom:0; }
html[data-look] .cpg-val { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:12px; }
html[data-look] .cpg-val .num { font-size:1.35rem; text-transform:var(--face-case, none); }
html[data-look] .cpg-val--sm { margin-top:0; justify-content:space-between; }
html[data-look] .cpg-val--sm b { font-size:.95rem; }
html[data-look] .cpg-foot { margin-top:6px; font-size:.76rem; color:var(--text-muted); }
html[data-look] .cpg-note { font-size:.76rem; color:var(--text-muted); }
html[data-look] .cpg-list { padding-top:4px; padding-bottom:4px; }
html[data-look] .cpg-mrow { display:grid; grid-template-columns:minmax(0,1fr) auto 4.4rem; align-items:center; gap:10px; min-height:52px; border-bottom:1px solid var(--n-border); }
html[data-look] .cpg-mrow:last-child { border-bottom:0; }
html[data-look] .cpg-mrow b { font-size:.92rem; }
html[data-look] .cpg-mrow small { display:block; margin-top:2px; font-size:.76rem; color:var(--text-muted); }
html[data-look] .cpg-mrow .cp-chip { justify-self:end; }
html[data-look] .cpg-hrow { display:grid; grid-template-columns:5.4rem minmax(0,1fr); gap:10px; padding:10px 0; border-bottom:1px solid var(--n-border); }
html[data-look] .cpg-hrow:last-child { border-bottom:0; }
html[data-look] .cpg-hdate { font-size:.8rem; color:var(--text-muted); padding-top:4px; }
html[data-look] .cpg-hvals { display:flex; flex-wrap:wrap; gap:6px; }
html[data-look] .cpg-tiles { margin-top:14px; }
html[data-look] .pc-line, html[data-look] .pc-bars { display:block; width:100%; height:auto; margin-top:10px; color:var(--text); overflow:visible; }
html[data-look] .pc-grid { stroke:var(--n-border-strong); stroke-width:1; stroke-dasharray:2 3; }
html[data-look] .pc-y { fill:var(--text-muted); font-size:8px; text-anchor:end; font-family:var(--font-data, var(--font-family)); }
html[data-look] .pc-x { fill:var(--text-muted); font-size:8px; font-family:var(--font-data, var(--font-family)); }
html[data-look] .pc-path { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
html[data-look] .pc-dot { fill:currentColor; }
html[data-look] .pc-end { fill:var(--accent); }
html[data-look] .pc-endv { fill:var(--text); font-size:9px; font-weight:700; font-family:var(--font-data, var(--font-family)); }
html[data-look] .pc-bar { fill:color-mix(in srgb, var(--accent) 55%, transparent); }
html[data-look] .pc-bar.last { fill:var(--accent); }
html[data-look] .pc-base { stroke:var(--n-border); stroke-width:1; }
/* No app bar under a look, so a sticky tab strip pins to the top of the
   screen, not 60px down where the bar used to be (the profile's tabs too). */
html[data-look] .cp-tabs { top:env(safe-area-inset-top, 0px); }
/* The conversation header too (Drew, 2026-10-11: "the header floating over
   the top of the messaging section"). It sat 60px down, the old bar's height,
   with messages scrolling past ABOVE it. It pins under the status bar now, and
   its shadow (no blur: a copy of its own ground shifted up) covers the strip
   above it, so nothing shows through. The menu under it follows. */
html[data-look] .thread-head { top:env(safe-area-inset-top, 0px); box-shadow:0 calc(-1 * env(safe-area-inset-top, 0px)) 0 0 var(--bg); }
html[data-look] .thread-dd-menu { top:calc(env(safe-area-inset-top, 0px) + 54px); }
html[data-look] #page-thread.active, html[data-look] #cpage-messages.active, html[data-look] #page-review.active { min-height:100dvh; }
html[data-look] .cpg-mrow--2 { grid-template-columns:minmax(0,1fr) auto; }
html[data-look] .cp-chip.flat { color:var(--text); background:var(--surface-2); }

/* ── The client's Progress (approved 5f client-n-<look>-progress) ──────── */
html[data-look] .prog-share { width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; border:1px solid var(--n-border-strong); background:var(--surface-1); color:var(--text); cursor:pointer; }
html[data-look] .prog-tiles { margin:4px 0 0; }
html[data-look] .prog-tiles .cs-tile { font:inherit; color:var(--text); cursor:pointer; }

/* ONE HEADER CARD, EVERYWHERE (Drew, 2026-10-11: "all areas where there are
   header cards across the top should get the same treatment"). The number
   large and left, its words just to its right, both centred on the card's
   height: Today's Messages / Tasks / Inquiries and its Needs attention row,
   the Clients tiles, Progress (client and coach), Session notes, and the
   gym console, platform console and Automations tiles. A number too wide to
   leave the words their 3.5em puts the words on the next line rather than
   squeezing them to a letter a line. */
html[data-look] .th-card, html[data-look] .tn-card, html[data-look] .cl-tile, html[data-look] .cs-tile, html[data-look] .org-stat { display:flex; flex-direction:row; flex-wrap:wrap;
  align-items:center; justify-content:flex-start; column-gap:8px; row-gap:2px; min-height:60px; padding:10px 12px; text-align:left; }
html[data-look] .th-card-n, html[data-look] .cl-tile > b, html[data-look] .cs-tile > b, html[data-look] .org-stat > b { font-size:2rem; line-height:1; flex:0 0 auto; margin:0; }
html[data-look] .th-card-l, html[data-look] .cl-tile > span, html[data-look] .cs-tile > span, html[data-look] .org-stat > small { flex:1 1 0; min-width:max-content; margin:0; line-height:1.2; }
/* A ROW OF HEADER CARDS SIZES EACH CARD TO WHAT IT HOLDS (2026-10-11).
   Three equal thirds of a phone are 83px inside, and "Workouts," (62px)
   cannot sit beside "14" in that: it spilled out of its card. Each card is
   at least as wide as its number and words side by side when the row has
   the room (the space left over is shared out evenly), and when it has not
   (a larger text size) the words drop under the number rather than spill. */
html[data-look] .th-cards, html[data-look] .cl-tiles, html[data-look] .cs-tiles, html[data-look] .org-stats { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(min-content, auto); }
html[data-look] .org-stat > .org-stat-u { flex:0 0 auto; margin-left:-6px; }
html[data-look] .prog-big { margin-top:10px; font-size:1.55rem; text-transform:var(--face-case, none); }
html[data-look] .prog-mid { font-size:1.2rem; text-transform:var(--face-case, none); }
html[data-look] .cpg-none .rc-btn { margin-left:auto; flex:0 0 auto; }
html[data-look] #cpage-progress .progress-story-btn { display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; margin:18px 0 6px; }
html[data-look] .prog-ach { padding:12px; }
html[data-look] .ach-shelf--few { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* ── More (approved trainer-n- and client-n-<look>-more) ──────────────── */
html[data-look] .mo-card .mo-ic { background:var(--accent-soft, var(--surface-2)); color:var(--accent-line, var(--accent)); }
html[data-look] .mo-card, html[data-look] .mo-group, html[data-look] .mo-coach { border-color:var(--n-border); }
html[data-look] .mo-row { border-bottom-color:var(--n-border); }
html[data-look] .mo-group--tint .mo-ic { background:var(--accent-soft, var(--surface-2)); color:var(--accent-line, var(--accent)); }

/* ── Settings (approved trainer-n- and client-n-<look>-settings) ────────── */
html[data-look] .tset-acct { display:flex; align-items:center; gap:12px; width:100%; min-height:72px; margin:4px 0 6px; padding:12px 14px; text-align:left;
  font:inherit; color:var(--text); background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); cursor:pointer; }
html[data-look] .tset-acct .tset-row-main { flex:1; }
html[data-look] .tset-av { width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--surface-3); font-weight:700; font-size:.82rem; }
html[data-look] .tset-pill { flex:none; padding:4px 9px; border-radius:var(--radius-sm); font-size:.74rem; font-weight:700; color:var(--accent-line, var(--accent)); background:var(--accent-soft, var(--surface-2)); }
html[data-look] .tset-group { padding:0 12px; background:var(--surface-1); border:1px solid var(--n-border); border-radius:var(--radius-md); }
html[data-look] #tsetMenu .tset-row { justify-content:flex-start; border-bottom-color:var(--n-border); padding:9px 0; }
html[data-look] #tsetMenu .tset-row:last-child { border-bottom:0; }
html[data-look] #tsetMenu .tset-row .tset-row-main { flex:1; }
html[data-look] #tsetMenu .tset-row-main b { font-weight:700; }
html[data-look] .tset-ic { width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text-muted); }
/* A chosen chip carries a tick, as approved (pronouns and equipment). */
html[data-look] .eq-chips .opt-chip, html[data-look] .pro-chips .opt-chip { border-radius:var(--radius-pill); }
html[data-look] .eq-chips .opt-chip.active::before, html[data-look] .pro-chips .opt-chip.active::before { content:'\2713'; margin-right:6px; font-weight:700; }
html[data-look] .eq-chips .opt-chip.active, html[data-look] .pro-chips .opt-chip.active { background:var(--accent-soft, transparent); }
html[data-look] .tset-acct em { white-space:normal; }

/* ── Workout complete: each look's own ground behind the badge (approved
   client-n-<look>-finish; the atmosphere bands of the 5f proposal). Never
   the header photo. A look drafted light keeps a dark ground where its ink
   is light; Clinic and Wellness are light in light mode and take dark ink.
   The accent stripes follow the coach's main color. */
html[data-look][data-look="lab"] .rc-cel5-band { --cel-ink:#F4F4F2;
  background:linear-gradient(118deg, transparent 0 58%, var(--accent) 58% 64%, transparent 64% 70%, color-mix(in srgb, var(--accent) 35%, transparent) 70% 72%, transparent 72%), radial-gradient(120% 90% at 20% 0%, #2A2B2E, #0A0A0B 70%); }
html[data-look][data-look="heritage"] .rc-cel5-band { --cel-ink:#F2ECE0;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px), linear-gradient(180deg, rgba(184,151,90,0) 96%, rgba(184,151,90,.7) 96% 97%, transparent 97%), radial-gradient(130% 100% at 30% 0%, #24402F, #11231A 75%); }
html[data-look][data-look="heritage"][data-mode="dark"] .rc-cel5-band {
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px), radial-gradient(130% 100% at 30% 0%, #1A3324, #09130D 75%); }
html[data-look][data-look="energy"] .rc-cel5-band { --cel-ink:#F7F7F5;
  background:linear-gradient(160deg, transparent 0 30%, var(--accent) 30% 33%, transparent 33%), linear-gradient(152deg, transparent 0 44%, rgba(170,70,255,.9) 44% 52%, transparent 52%), linear-gradient(140deg, transparent 0 62%, rgba(255,60,170,.85) 62% 66%, transparent 66%), linear-gradient(180deg, #1A1A20, #0C0C0E); }
html[data-look][data-look="editorial"] .rc-cel5-band { --cel-ink:#F2EFE9;
  background:linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.10) 46%, transparent 52%), linear-gradient(115deg, transparent 0 58%, rgba(255,255,255,.07) 62%, transparent 68%), radial-gradient(110% 90% at 70% 10%, #4A4743, #141312 72%); }
html[data-look][data-look="clinic"] .rc-cel5-band { --cel-ink:#0D1726;
  background:linear-gradient(rgba(31,92,255,.07) 1px, transparent 1px) 0 0/22px 22px, linear-gradient(90deg, rgba(31,92,255,.07) 1px, transparent 1px) 0 0/22px 22px, radial-gradient(90% 80% at 85% 0%, #DCE6FF, #F4F6F9 70%); }
html[data-look][data-look="clinic"][data-mode="dark"] .rc-cel5-band { --cel-ink:#E9EEF7;
  background:linear-gradient(rgba(31,92,255,.10) 1px, transparent 1px) 0 0/22px 22px, linear-gradient(90deg, rgba(31,92,255,.10) 1px, transparent 1px) 0 0/22px 22px, radial-gradient(90% 80% at 85% 0%, #15295A, #050A15 70%); }
html[data-look][data-look="wellness"] .rc-cel5-band { --cel-ink:#22261D;
  background:radial-gradient(40% 30% at 82% 18%, rgba(86,105,63,.28), transparent 70%), radial-gradient(30% 22% at 70% 40%, rgba(86,105,63,.18), transparent 70%), radial-gradient(50% 40% at 15% 10%, rgba(214,176,128,.35), transparent 70%), linear-gradient(180deg, #EDE6D6, #F3EFE6); }
html[data-look][data-look="wellness"][data-mode="dark"] .rc-cel5-band { --cel-ink:#EEF0E8;
  background:radial-gradient(40% 30% at 82% 18%, rgba(120,150,90,.22), transparent 70%), radial-gradient(50% 40% at 15% 10%, rgba(214,176,128,.10), transparent 70%), linear-gradient(180deg, #142016, #0B140D); }

/* The exercise picker (approved trainer-n-<look>-picker): its title in the
   look's display face and case, the add as a round button in the main color. */
html[data-look] .picker-title {
  font-family: var(--font-brand); font-weight: var(--face-weight, 800);
  letter-spacing: var(--face-track, 0); text-transform: var(--title-case, none); font-size: 1.25rem;
  white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* A serif face in capitals is wide: the title and the custom button keep one
   line each (Heritage wrapped both at 390px). */
html[data-look] .picker-header { gap: .75rem; }
html[data-look] .picker-custom-pill { white-space: nowrap; }
html[data-look] .picker-add-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); font-size: 1.15rem; }
html[data-look] .picker-add-btn.picker-added-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); }

/* The gym console (approved gym-n-<look>-*): the eyebrow in the look's label
   voice, the head's lines on the photo, the "you have this" tints. */
html[data-look] .org-eyebrow { font-family:var(--label-font, inherit); font-weight:var(--label-weight, 700); letter-spacing:var(--label-track, .12em);
  text-transform:var(--label-case, uppercase); font-style:var(--label-style, normal); }
html[data-look] #page-org:not(:has(.org-home[hidden])) > .page-header:has(> .look-band) .org-eyebrow, html[data-look] #page-org:not(:has(.org-home[hidden])) > .page-header:has(> .look-band) .org-headsub {
  color:var(--band-ink, var(--text)); text-shadow:var(--band-shadow); }
html[data-look] .org-stat, html[data-look] .org-seat, html[data-look] .org-card, html[data-look] .org-note, html[data-look] .au-row { border-color:var(--n-border); }
html[data-look] .org-team .org-coach, html[data-look] .org-card--list > .pref-toggle, html[data-look] .org-card--list > .ci-topic-opt, html[data-look] .org-offer { border-bottom-color:var(--n-border); }
html[data-look] .org-tag--accent, html[data-look] .org-seat-btn, html[data-look] .org-adopt, html[data-look] .au-chip--when, html[data-look] .org-ic--tint {
  background:var(--accent-soft, var(--surface-3)); color:var(--accent-line, var(--accent)); }
html[data-look] .org-seat .mo-ic { background:var(--surface-2); }
/* Back on the console's photo is a glass pill in the band's own ink, as the
   client profile's pills are: a solid pill in the page color sat light on
   light in Heritage. */
html[data-look] #page-org:not(:has(.org-home[hidden])) > .page-header:has(> .look-band) .back-btn {
  background:color-mix(in srgb, var(--band-ink, var(--text)) 14%, transparent); border-color:color-mix(in srgb, var(--band-ink, var(--text)) 32%, transparent); }

/* Communities (approved board, boardedit, client board, invite): yours
   filled in the main color, the community's name in the look's face, its
   tile tinted, the pinned banner dashed as drawn. */
html[data-look] .bd-msg--mine .bd-bubble { background:var(--accent); color:var(--accent-contrast); border-color:transparent; }
html[data-look] .bd-head-name { font-family:var(--font-brand); font-weight:var(--face-weight, 800); letter-spacing:var(--face-track, 0); text-transform:var(--title-case, none); }
html[data-look] .bd-tile { background:var(--accent-soft, var(--surface-3)); color:var(--accent-line, var(--accent)); }
html[data-look] .bd-pinbar { border-style:dashed; }
html[data-look] .bd-bubble, html[data-look] .bd-head-btn, html[data-look] .bd-react, html[data-look] .bd-reply-btn, html[data-look] .bd-composer { border-color:var(--n-border); }
html[data-look] .bd-msg--mine .bd-bubble { border-color:transparent; }
html[data-look] .bd-composer { border-top-color:var(--n-border); }
/* A card inside your own filled bubble (a resource or a workout) keeps its
   own surface, or its dim line sat grey on the main color. */
html[data-look] .bd-msg--mine .bd-rescard { background:var(--surface-1); color:var(--text); border-color:transparent; }

/* The platform console (rebuilt 2026-10-11): the gym console's photo grammar
   on #page-admin, the photo on the home only. Separate rules rather than a
   widened #page-org selector, so neither console can move the other. */
html[data-look] #page-admin > .page-header:has(> .look-band) { position:relative; isolation:isolate; }
html[data-look] #page-admin > .page-header:has(> .look-band) > :not(.look-band) { position:relative; z-index:1; }
html[data-look] #page-admin > .page-header:has(> .look-band) ~ * { position:relative; z-index:1; }
html[data-look] #page-admin:has(.org-home[hidden]) > .page-header > .look-band { display:none; }
html[data-look] #page-admin:not(:has(.org-home[hidden])) > .page-header:has(> .look-band) .page-title,
html[data-look] #page-admin:not(:has(.org-home[hidden])) > .page-header:has(> .look-band) .org-eyebrow,
html[data-look] #page-admin:not(:has(.org-home[hidden])) > .page-header:has(> .look-band) .org-headsub { color:var(--band-ink, var(--text)); text-shadow:var(--band-shadow); }
html[data-look] #page-admin .adm-need .adm-dot:not(.adm-dot--bad):not(.adm-dot--warn) { background:var(--accent-line, var(--accent)); }
html[data-look] #page-admin .adm-chip.on { border-color:var(--accent-line, var(--accent)); box-shadow:inset 0 0 0 1px var(--accent-line, var(--accent)); }
html[data-look] #page-admin .mo-group, html[data-look] #page-admin .adm-quiet { border-color:var(--n-border); }
html[data-look] #page-admin .mo-row { border-bottom-color:var(--n-border); }
html[data-look] #page-admin .mo-row:last-child { border-bottom:0; }
html[data-look] #page-admin .adm-chip { border-radius:var(--radius-pill); }
html[data-look] #page-admin .org-head-act .cp-pill { color:var(--text); background:var(--surface-1); border:1px solid var(--n-border); text-shadow:none; }