/* ════════════════════════════════════════════════════════════════════════
   5e — looking the part (Drew, approved 2026-09-26).
   Reference: design-reference/approved-5e/. Loaded by BOTH shells after
   every app sheet (5c included) and before wide.css, so it wins the phone
   cascade and the desktop layout still wins at 900px+. Precached.

   PHASE 1, TYPE. Nothing here touches markup or a save path.
   ════════════════════════════════════════════════════════════════════════ */

/* ── The three text sizes, one step larger ────────────────────────────────
   Settings → Display has always offered Standard / Large / Extra Large
   (1 / 1.15 / 1.30 of 16px). Approved: 17 / 19 / 21px. global.css sizes the
   root as calc(16px * var(--font-scale, 1)) and nearly every size in the app
   is rem, so moving the three scales moves the whole app. */
:root { --font-scale: 1.0625; }
html[data-textsize="large"] { --font-scale: 1.1875; }
html[data-textsize="xl"]    { --font-scale: 1.3125; }

/* ── Line spacing ──────────────────────────────────────────────────────────
   "The leading between lines feels excessive" (Drew). 5c set 1.5 on body;
   text is 1.38, and the name/meta lines inside a list row sit closer still
   at 1.28, because two lines of one row are one thing. */
body { line-height: 1.38; }
.ag-item, .ag-item *, .hub-notif *, .client-row *, .tset-row *, .conv-row *,
.today-sess *, .routine-choose-card *, .th-card * { line-height: 1.28; }
.ag-item { padding-top: 10px; padding-bottom: 10px; }
.settings-desc, .page-subtitle { line-height: 1.42; }

/* ── One UI face; the brand's face on the page title only ─────────────────
   Every preset still defines its own display and body faces in global.css.
   5e keeps the preset's DISPLAY face for the page title and sets everything
   else in Inter (approved over DM Sans, Hanken Grotesk, Source Sans 3 and
   Mulish; already self-hosted as Headliner's body face).

   --font-brand is declared on :root, where --font-display still holds the
   preset's face, so its computed value is that face. body then points
   --font-display at Inter for every descendant, and only the two title
   classes reach back for --font-brand. :root[data-font] is (0,2,0), which
   outranks the (0,1,1) preset blocks without !important. */
:root { --font-brand: var(--font-display); }
:root[data-font] { --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body { --font-display: var(--font-family); }
.page-title, .today-greeting { font-family: var(--font-brand); }

/* ── Dark mode, lifted (5e phase 2) ────────────────────────────────────────
   "Increase the contrast in dark mode so cards read" (Drew). The 5b ramp put
   the page, a card and a well within a few steps of each other, so a card
   barely separated from the ground. The ground goes a touch darker, every
   surface a step lighter, hairlines stronger, and dim text lighter so it
   keeps its contrast on the lighter wells (tests/css-tokens.test.js checks
   4.5:1 on every surface here). Every combo shares these surfaces, Diesel
   included since 2026-09-26: a combo sets only its accent. */
html[data-mode="dark"] {
  --bg:#0B0D0F; --surface-1:#1A1F23; --surface-2:#1F252A; --surface-3:#272E34;
  --n-border:rgba(255,255,255,0.14); --n-border-strong:rgba(255,255,255,0.26);
  --text-dim:#AEB7BD;
}

/* ── Sentence-case actions (5e phase 4) ────────────────────────────────────
   "Sentence-case buttons" (approved). The 41 uppercase action rules in the
   app sheets are lowered where they are declared; 5c.css is pinned verbatim
   to its reference, so its two trackings, which were eased FOR capitals,
   are undone here instead. */
.rc-btn, .ic-skip { letter-spacing: 0; }

/* ── The i beside a title (5e phase 4b) ────────────────────────────────────
   UI.syncTitleInfo puts it there when the section has an explanation. A
   quiet ring in the text colour, sat on the title's middle; the visual is
   30px and the tap target 44 (the ::after rule for small inline controls). */
.info-btn { position:relative; display:inline-grid; place-items:center; width:30px; height:30px; margin-left:10px;
  vertical-align:middle; border-radius:50%; border:1px solid var(--n-border-strong); background:none;
  color:var(--text-dim); cursor:pointer; padding:0; font-size:1rem; }
.info-btn::after { content:''; position:absolute; inset:-7px; }
.info-btn:hover, .info-btn:focus-visible { color:var(--text); border-color:var(--text); }
.info-body { color:var(--text-muted); line-height:1.5; margin-top:.5rem; }
/* The explanation's own copy stays in the section, never on screen there. */
.explainer { display:none; }

/* ── Empty states with an icon (5e phase 4c) ───────────────────────────────
   An icon of what is missing, in a soft accent circle, over one line of
   text at reading size (the old .75rem was small print). --compact is for
   the empties that sit inside a card or a section rather than own a page;
   it keeps each one's original class, so every earlier rule on it still
   applies and only size and spacing move. */
.empty-state { display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center;
  font-size:.9rem; line-height:1.4; color:var(--text-muted); }
.empty-state .empty-msg { font-size:inherit; max-width:36ch; }
.empty-ic { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; opacity:1;
  background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); flex:none; }
.empty-state--compact { padding:.75rem 0 1rem; }
.empty-state--compact .empty-ic { width:44px; height:44px; }

/* ── One ⋯ menu grammar (5e phase 4d) ──────────────────────────────────────
   Approved in round three: rows with an icon, a label and one line of what
   it does, hairlines between, destructive in red, and room under the sheet
   title (Drew: the first action sat too close to it). The row is not a
   button-shaped button: the classes it keeps for its handlers (.admin-act-btn,
   .unfreeze) carry the old box, so every box property is reset here. */
.menu-sheet { display:flex; flex-direction:column; margin:14px -6px 0; }
.menu-sheet .menu-item { display:flex; align-items:center; justify-content:flex-start; gap:14px; width:100%;
  min-height:56px; margin:0; padding:.5rem 8px; background:none; border:0; border-top:1px solid var(--border);
  border-radius:0; box-shadow:none; color:var(--text); text-align:left; text-transform:none; letter-spacing:0;
  font-family:var(--font-family); font-size:1rem; font-weight:600; line-height:1.3; cursor:pointer; }
.menu-sheet .menu-item:first-child { border-top:0; }
.menu-sheet .menu-item:hover { background:var(--surface-2); }
/* A sheet focuses its first row as it opens. The classes a row keeps for its
   handlers bring 5b's focus box (an accent border all round), which made a
   row look chosen before anyone touched it. Keyboard focus keeps a ring. */
.menu-sheet .menu-item:focus { outline:none; border-color:var(--border); border-width:1px 0 0; }
.menu-sheet .menu-item:first-child:focus { border-top-width:0; }
.menu-sheet .menu-item:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; background:var(--surface-2); }
.menu-sheet .menu-item > svg { flex:none; color:var(--text-dim); }
.menu-sheet .menu-item > span { flex:1; min-width:0; }
.menu-sheet .menu-item small { display:block; margin-top:2px; font-size:.8rem; font-weight:400; color:var(--text-dim); }
.menu-sheet .menu-item.danger, .menu-sheet .menu-item.danger > svg { color:var(--red); }

/* ── Client rows (5e phase 4e) ─────────────────────────────────────────────
   Approved: alerts right of the name as short labels ("Alerts", "Message"),
   no Active pill (active is the usual state, so it earns no label; Paused,
   New and the rest still show), and the streak on the last-seen line. That
   gives the name the row's width at every text size, which is what let
   Large and Extra Large stop truncating it. PHONE ONLY: the desktop Clients
   table has a Streak and a Status column, so wide.css hides the last-seen
   copy of the streak there and nothing else moves. */
@media (max-width: 899px) {
  .client-row .completion-pill, .client-row .badge.is-usual { display:none; }
}

/* ── Client Today, "Option A revised" (5e phase 5) ────────────────────────
   One agenda: a booked item shows its time, the next workout shows a 40px
   still of its first exercise in the same column, both centred on their row.
   The week line sits under the date: a ring for workouts against the
   client's own target, then the streak. */
.today-week { display:flex; align-items:center; gap:8px; margin:.4rem 0 0; font-size:.86rem; color:var(--text-dim); }
.today-week b { color:var(--text); font-weight:700; }
.wk-ring { --p:0; flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--p) * 1%), var(--border) 0); }
.wk-ring i { width:15px; height:15px; border-radius:50%; background:var(--bg); }
/* The week line belongs to the date above it, so the agenda card sits a
   step closer when it is there: Habits, Nutrition and Messages stay in the
   first screen at every text size (Drew's rule; measured at Extra Large). */
.today-week + .ag-block { margin-top:1rem; }
/* Extra Large makes every agenda row taller, and the next-workout row made
   the card 47px too tall for the hub to stay in the first screen there.
   Only at XL, the card and its rows sit a little tighter. */
html[data-textsize="xl"] .ag-block { padding-top:.85rem; padding-bottom:.85rem; }
html[data-textsize="xl"] .ag-item { padding-top:7px; padding-bottom:7px; }
/* The Book and Rest pair may shrink (client.css) but could not wrap, so at
   Extra Large "Book a session" ran past its own border. It wraps inside the
   box now; the 50px height already holds two lines. */
.ag-actions > .rc-btn--ghost { white-space:normal; line-height:1.15; text-align:center; }

/* ── Progress: the stat cards' detail sheets (5e phase 5b). 5f replaced the
   swipeable cards with tiles (5f.css); the sheets they open stay here. */
/* The card's pop-over (_showStatDetail): the card's number on top, then
   sections of grouped rows. A meter under a row's name is that row against
   the largest in its list. */
.scd-top { margin-bottom:8px; }
.scd-lede { font-size:.85rem; color:var(--text-dim); line-height:1.4; margin-bottom:8px; }
.scd-h { font-size:.8rem; font-weight:600; color:var(--text-dim); margin:16px 0 8px; }
.scd-list .scd-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; min-height:44px; }
.scd-k { display:flex; flex-direction:column; min-width:0; flex:1; font-size:.85rem; }
.scd-k small { font-size:.75rem; color:var(--text-dim); }
.scd-v { font-weight:700; font-size:.85rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.scd-bar { display:block; height:4px; margin-top:4px; background:var(--surface-3); border-radius:var(--radius-pill); overflow:hidden; }
.scd-bar i { display:block; height:100%; background:var(--accent); border-radius:inherit; }
.scd-empty { font-size:.85rem; color:var(--text-dim); }
.scd-cal { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; text-align:center; margin-top:8px; }
.scd-dow { font-size:.75rem; font-weight:600; color:var(--text-dim); }
.scd-day { display:flex; align-items:center; justify-content:center; aspect-ratio:1; border-radius:50%; font-size:.75rem; color:var(--text-dim); background:var(--surface-3); }
.scd-day.on { background:var(--accent); color:var(--accent-contrast); font-weight:700; }
.scd-day.today { box-shadow:inset 0 0 0 2px var(--text); }
.sc-n { font-family:var(--font-display); font-size:2rem; font-weight:900; line-height:1.05; letter-spacing:-.02em; margin:.15rem 0 .1rem; font-variant-numeric:tabular-nums; }
.sc-s { font-size:.8rem; color:var(--text-dim); }
.sc-s .sc-up, .sc-s .sc-down { color:var(--text); font-weight:700; }
.sc-chart { display:block; width:100%; height:78px; margin-top:.5rem; color:var(--accent); }
/* A benchmark card's sparkline wears the accent like the stat-card charts (v156). */
.bm-spark { color:var(--accent); }
.progress-story-btn { margin-bottom:1.2rem; }

/* ── Exercise stills (5e phase 3) ─────────────────────────────────────────
   A frame of each exercise's own demo clip (UI.stillHTML / UI.wireStills).
   The tile is a surface well until its clip arrives, and stays one on Data
   Saver or a failed clip. The clips are shot on white, so a loaded still is
   a white tile in both themes, as in the approved concept. */
.ex-still { flex:none; display:block; overflow:hidden; background:var(--surface-3); border-radius:var(--radius-sm); }
/* A still keeps its frame on a canvas once it has one (2026-10-03), so the
   canvas takes the video's exact place. */
.ex-still video, .ex-still canvas { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.ex-still--none video, .ex-still--none canvas { display:none; }
.ex-still--row { width:44px; height:44px; border-radius:10px; border:1px solid var(--border); }
/* The Builder's picture is a button that plays the demo: a small play mark
   in the corner says so. */
.ex-still-play { position:relative; flex:none; display:block; padding:0; border:0; background:none; cursor:pointer; border-radius:10px; }
.ex-still-tri { position:absolute; right:-4px; bottom:-4px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); color:var(--text); }
.ex-still-tri svg { width:10px; height:10px; }
/* Train: three stills across the top of each routine card, the card turning
   from a row into a column so the strip can run edge to edge. */
.routine-choose-card.has-stills { flex-direction:column; align-items:stretch; position:relative; }
.routine-choose-card.has-stills .rcc-go { position:absolute; right:1rem; bottom:1.1rem; }
.routine-choose-card.has-stills .rcc-main { padding-right:2.5rem; }
.rcc-strip { display:grid; grid-template-columns:repeat(var(--n,3), minmax(0,1fr)); gap:3px; height:112px;
  margin:-1rem -1rem .75rem; border-radius:var(--radius-md) var(--radius-md) 0 0; overflow:hidden; }
.rcc-strip .ex-still { width:auto; height:100%; border-radius:0; }

/* ── Page titles at each face's REAL weight ────────────────────────────────
   Titles are set at 800 (.page-title) and 900 (.today-greeting). Six title
   faces ship ONE weight, 400, and nothing turned synthesis off, so the
   browser faked a bold by thickening the strokes until the letters ran
   together: Drew's "Headliner and Sculpt feel cramped", live in the shipped
   app. Each of the six is set at the weight it has. tests/design-5e.test.js
   derives the list from css/fonts.css, so a new single-weight preset fails a
   test instead of shipping fake bold. */
html[data-font="headliner"]  :is(.page-title, .today-greeting) { font-weight: 400; letter-spacing: .012em; }
html[data-font="sculpt"]     :is(.page-title, .today-greeting) { font-weight: 400; letter-spacing: 0; }
html[data-font="chalkboard"] :is(.page-title, .today-greeting) { font-weight: 400; }
html[data-font="varsity"]    :is(.page-title, .today-greeting) { font-weight: 400; }
html[data-font="atrium"]     :is(.page-title, .today-greeting) { font-weight: 400; }
html[data-font="ironclad"]   :is(.page-title, .today-greeting) { font-weight: 400; letter-spacing: .01em; }
/* Pirata One and Caveat have small lowercase letters and read small beside
   the other ten, so their titles are 1.2x and 1.32x (.page-title is 1.75rem
   in global.css, .today-greeting 1.9rem in 5c.css). Caveat ships 400-700. */
html[data-font="ironclad"] .page-title     { font-size: 2.1rem; }
html[data-font="ironclad"] .today-greeting { font-size: 2.28rem; }
html[data-font="journal"]  :is(.page-title, .today-greeting) { font-weight: 700; letter-spacing: 0; }
html[data-font="journal"]  .page-title     { font-size: 2.31rem; }
html[data-font="journal"]  .today-greeting { font-size: 2.508rem; }

/* ── The Today hub's tabs at larger text (2026-09-26) ────────────────────
   Three equal thirds hold "Habits 2/3", "Nutrition" and "Messages 2" at the
   standard size, and stop holding them as the text grows: measured at 390px,
   Messages ran 2px past its third at Large and 8px at Extra Large. At those
   sizes each tab takes the room its words need (the strip still spans the
   width) with tighter insides, and at Extra Large the tab label steps down a
   touch. A tab strip is navigation, not reading, and the body text still
   grows in full. */
html[data-textsize="large"] .hub-tab,
html[data-textsize="xl"] .hub-tab { flex: 1 1 auto; padding-inline: .25rem; gap: .25rem; }
html[data-textsize="xl"] .hub-tab { font-size: .85rem; }

/* ── ONE BUTTON VOICE (Drew, 2026-10-02: "still inconsistencies in type
   sizing", "+ New Template" against "New from a client's program", and
   "+ New automation" solid against "+ New Template" dashed) ────────────────
   MEASURED on every capture screen first: the dashed add buttons were
   12.75px (0.75rem), the older .btn-primary/.btn-outline family 13.94px
   (0.82rem, because 5c's .88rem was written for .rc-btn alone), .rc-btn
   14.96px. Every action button now speaks one size and weight.
   THE DASHED ADD IS ONE GRAMMAR, defined ONCE here because both shells load
   this sheet (it lived in trainer.css, which the client never loads):
   2px accent dash, full width, the same in every state. Its :hover used to
   turn the border SOLID, and a phone keeps the hover state after a tap, so a
   tapped "+ New automation" read as a solid button. Hover tints the ground
   instead, and only where hover exists. */
.btn-primary, .dash-cta, .complete-workout-btn, .begin-workout-btn, .note-composer-btn,
.btn-outline, .btn-danger, .rc-btn,
.add-ex-to-routine-btn, .wc-add-ex-btn, .add-routine-btn, .add-client-btn, .rc-cal-addday {
  font-size: .88rem; font-weight: 900; letter-spacing: 0; }
.add-ex-to-routine-btn, .wc-add-ex-btn, .add-routine-btn, .add-client-btn, .rc-cal-addday {
  width: 100%; min-height: 44px; margin-top: .5rem; padding: .5rem .75rem; background: transparent;
  border: 2px dashed var(--accent); border-radius: var(--radius-md); color: var(--text);
  font-family: inherit; text-transform: none; cursor: pointer; }
.add-ex-to-routine-btn:hover, .wc-add-ex-btn:hover, .add-routine-btn:hover, .add-client-btn:hover, .rc-cal-addday:hover {
  border-style: dashed; border-color: var(--accent); background: transparent; color: var(--text); }
@media (hover: hover) {
  .add-ex-to-routine-btn:hover, .wc-add-ex-btn:hover, .add-routine-btn:hover, .add-client-btn:hover, .rc-cal-addday:hover {
    background: var(--surface-3); }
}