/* ============================================================================
   CALLAN EGGEN COACHING HQ — DESIGN SYSTEM  v3
   Shared by the coach console (hq/) and the client app (app/).
   No screen file defines a colour, a size, or a radius.

   The test every screen passes before it ships (Callan, 10 Sep 2026):
   "If the gradients, icons and rounded cards were removed, would the
   hierarchy still be excellent?" So the system gives you almost none of
   those. Hierarchy comes from type scale, weight, spacing, alignment and
   position. A box is the last resort, not the first.

   Rules, in the order they are applied
     1. The page is the surface. Sections sit on it. Rows are separated by
        hairlines only where the eye needs them.
     2. Type does the work. Bebas Neue for section titles and large figures.
        Inter for everything operational. The serif italic only for Callan's
        own words.
     3. Gold appears in: selected navigation, the one primary action, the
        occasional figure. Green and red are state. Everything else is ink.
     4. Radius is small and varied: 0 on sections, lists, tables, rules;
        3 px on controls; 6 px on overlays. Nothing is a tile.
     5. Icons only where recognition needs them. None in navigation.
     6. Motion only when a surface arrives or leaves.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  --ground:          #0b0a09;
  --surface-1:       #12110f;   /* hover on rows, inputs */
  --panel:           #100f0e;   /* the two home panels: current window, next up */
  --panel-line:      rgba(243,237,226,0.06);
  --surface-2:       #191715;   /* pressed, selected, the rare lift */
  --surface-3:       #211e1b;
  --surface-raised:  #24211d;   /* drawers, modals, menus */

  --line:            rgba(243,237,226,0.07);
  --line-strong:     rgba(243,237,226,0.14);
  --line-focus:      rgba(201,169,110,0.55);

  --ink-1: #f3ede2; --ink-2: #e2dbcf; --ink-3: #b9b1a4; --ink-4: #857d71; --ink-5: #5e5850;

  --gold: #c9a96e; --gold-champagne: #dcc79c; --gold-deep: #9c8455; --gold-olive: #8f7440; --gold-pale: #e4d3ae;
  --gold-wash: rgba(201,169,110,0.08); --gold-line: rgba(201,169,110,0.32);

  --ok: #7da97c; --ok-wash: rgba(125,169,124,0.10); --ok-line: rgba(125,169,124,0.36);
  --attn: #c0564b; --attn-wash: rgba(192,86,75,0.10); --attn-line: rgba(192,86,75,0.40);

  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 4px 14px rgba(0,0,0,0.28);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.45), 0 18px 48px rgba(0,0,0,0.50);

  --r-0: 0;      /* sections, lists, tables, rules, panels */
  --r-1: 6px;    /* buttons, inputs, chips, kbd */
  --r-2: 8px;    /* drawers, modals, menus, panels */
  --r-3: 8px;    /* alias kept for older markup */

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px;

  --f-display: 'Bebas Neue', Impact, 'Arial Narrow Bold', sans-serif;
  --f-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-voice:   'DM Serif Display', Georgia, 'Times New Roman', serif;
  --f-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-11: 0.6875rem; --lh-11: 1.45; --tr-11: 0.02em;
  --t-12: 0.75rem;   --lh-12: 1.5;  --tr-12: 0.01em;
  --t-13: 0.8125rem; --lh-13: 1.5;  --tr-13: 0;
  --t-14: 0.875rem;  --lh-14: 1.55; --tr-14: 0;
  --t-15: 0.9375rem; --lh-15: 1.55; --tr-15: 0;
  --t-16: 1rem;      --lh-16: 1.45; --tr-16: -0.005em;
  --t-22: 1.375rem;  --lh-22: 1.25; --tr-22: -0.012em;
  --t-17: 1.0625rem; --lh-17: 1.35; --tr-17: -0.005em;
  --t-20: 1.25rem;   --lh-20: 1.3;  --tr-20: -0.005em;
  --t-26: 1.625rem;  --lh-26: 1.0;  --tr-26: 0.04em;
  --t-34: 2.125rem;  --lh-34: 0.98; --tr-34: 0.03em;
  --t-48: 3rem;      --lh-48: 0.96; --tr-48: 0.025em;
  --t-72: 4.5rem;    --lh-72: 0.94; --tr-72: 0.02em;

  --sidebar-w: 196px; --sidebar-w-min: 150px; --content-max: 1240px; --reading-max: 68ch; --app-max: 520px;
  --z-sticky: 10; --z-drawer: 40; --z-modal: 50; --z-cmdk: 60; --z-toast: 70;
  --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-1: 120ms; --dur-2: 200ms;
}

/* ------------------------------------------------------------------ 2. BASE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink-2); font-family: var(--f-ui); font-size: var(--t-14); line-height: var(--lh-14); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01"; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--gold); color: #000; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ------------------------------------------------------------ 3. TYPE ROLES */
.display { font-family: var(--f-display); color: var(--ink-1); text-wrap: balance; font-feature-settings: "tnum"; }
.display-xl { font-size: var(--t-72); line-height: var(--lh-72); letter-spacing: var(--tr-72); }
.display-lg { font-size: var(--t-48); line-height: var(--lh-48); letter-spacing: var(--tr-48); }
.display-md { font-size: var(--t-34); line-height: var(--lh-34); letter-spacing: var(--tr-34); }
.display-sm { font-size: var(--t-26); line-height: var(--lh-26); letter-spacing: var(--tr-26); }
.display .accent { color: var(--gold); }
/* section title — Bebas at 20. This is where the brand lives on a working screen. */
.h-section { font-family: var(--f-display); font-size: var(--t-20); letter-spacing: 0.06em; color: var(--ink-1); line-height: 1; display: flex; align-items: baseline; gap: 10px; }
.h-section .n { color: var(--ink-4); font-size: 0.85em; }
.h-section .more { margin-left: auto; font-family: var(--f-ui); font-size: var(--t-13); letter-spacing: 0; color: var(--ink-4); }
.h-section .more:hover { color: var(--gold); }
.context  { font-size: var(--t-13); color: var(--ink-4); }
.title    { font-size: var(--t-17); line-height: var(--lh-17); letter-spacing: var(--tr-17); font-weight: 600; color: var(--ink-1); }
.heading  { font-size: var(--t-20); line-height: var(--lh-20); letter-spacing: var(--tr-20); font-weight: 600; color: var(--ink-1); }
.lead     { font-size: var(--t-15); line-height: var(--lh-15); color: var(--ink-2); }
.subtitle { font-size: var(--t-13); line-height: var(--lh-13); color: var(--ink-3); }
.caption  { font-size: var(--t-13); line-height: var(--lh-13); color: var(--ink-4); }
.muted { color: var(--ink-4); } .faint { color: var(--ink-5); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-size: 0.92em; }
.reading { max-width: var(--reading-max); }
/* uppercase tracked label — rare. Table heads and a few form labels. Never a section title. */
.eyebrow { font-size: var(--t-11); line-height: var(--lh-11); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); }
.voice { font-family: var(--f-voice); font-style: italic; font-size: var(--t-17); line-height: 1.45; color: var(--ink-2); }
.voice.lg { font-size: var(--t-20); } .voice.sm { font-size: var(--t-15); }
.rule { display: flex; align-items: center; gap: var(--s-4); color: var(--ink-5); }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ----------------------------------------------------------------- 4. SHELL */
.hq { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.hq-side { border-right: 1px solid var(--line); padding: var(--s-7) var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: 1px; position: sticky; top: 0; height: 100vh; }
.hq-brand { padding: 0 var(--s-2) var(--s-7); }
.hq-brand b { display: block; font-family: var(--f-display); font-size: var(--t-20); letter-spacing: 0.06em; color: var(--ink-1); font-weight: 400; line-height: 1; }
.hq-brand span { display: block; font-size: var(--t-12); color: var(--ink-4); margin-top: 5px; }
.hq-brand .demo-flag { display: inline-block; font-style: normal; font-size: var(--t-12); color: var(--gold); margin-top: 8px; }
.hq-main { min-width: 0; }
.hq-content { max-width: var(--content-max); padding: var(--s-7) var(--s-8) var(--s-10); }
.nav-item { display: flex; align-items: baseline; gap: var(--s-3); padding: 7px var(--s-2); color: var(--ink-3); font-size: var(--t-14); font-weight: 500; border: 0; background: none; width: 100%; text-align: left; cursor: pointer; border-radius: var(--r-1); transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.nav-item:hover { color: var(--ink-1); background: var(--surface-1); }
.nav-item[aria-current="page"] { color: var(--gold); }
.nav-item .count { margin-left: auto; font-size: var(--t-12); color: var(--ink-5); font-variant-numeric: tabular-nums; }
.nav-item[aria-current="page"] .count { color: var(--gold-deep); }
.nav-item .count.attn { color: var(--attn); }
.nav-item.quiet { color: var(--ink-5); font-weight: 400; }
.nav-spacer { flex: 1; }
.side-foot { padding: var(--s-4) var(--s-2) 0; border-top: 1px solid var(--line); margin-top: var(--s-3); }
.side-foot .name { font-size: var(--t-13); font-weight: 500; color: var(--ink-2); }
.side-foot .sub { font-size: var(--t-12); color: var(--ink-4); margin-top: 2px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-7); }
.page-head .display { margin-top: 4px; }
.page-head .actions { display: flex; gap: var(--s-2); align-items: center; }
.section { margin-top: var(--s-8); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-3); }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.stack { display: flex; flex-direction: column; gap: var(--s-4); } .stack-s { display: flex; flex-direction: column; gap: var(--s-2); }
.row { display: flex; align-items: center; gap: var(--s-3); } .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s-5); }
/* Home — five blocks placed by area; the main column is wider because it matters more */
.home { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: var(--s-10); row-gap: var(--s-8); align-items: start; grid-template-areas: "attn today" "coach today" "biz upcoming"; }
.home > [data-area="attn"] { grid-area: attn; } .home > [data-area="today"] { grid-area: today; } .home > [data-area="coach"] { grid-area: coach; } .home > [data-area="biz"] { grid-area: biz; } .home > [data-area="upcoming"] { grid-area: upcoming; }

/* -------------------------------------------------------------- 5. SURFACES */
.panel { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-0); padding: var(--s-5); }
.panel.tight { padding: var(--s-4); }
.card { background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-2); padding: var(--s-5); box-shadow: var(--shadow-1); }
.list > * + * { border-top: 1px solid var(--line); }
.list-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) 0; }
.list-row.clickable { cursor: pointer; transition: background var(--dur-1) var(--ease); }
.list-row.clickable:hover { background: var(--surface-1); }
.group { display: grid; grid-template-columns: 140px 1fr; gap: var(--s-2) var(--s-5); align-items: baseline; }
.group dt { font-size: var(--t-13); color: var(--ink-4); } .group dd { margin: 0; color: var(--ink-2); }

/* --------------------------------------------------------------- 6. BUTTONS */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 34px; padding: 0 var(--s-4); border-radius: var(--r-1); border: 1px solid transparent; font-size: var(--t-13); font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline-offset: 2px; }
.btn .ico { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: var(--gold); color: #171410; } .btn-primary:hover { background: var(--gold-champagne); }
.btn-secondary { background: transparent; border-color: var(--line-strong); color: var(--ink-1); } .btn-secondary:hover { border-color: var(--gold-line); }
.btn-ghost { background: transparent; color: var(--ink-3); padding: 0 var(--s-2); } .btn-ghost:hover { color: var(--ink-1); }
.btn-danger { background: transparent; border-color: var(--attn-line); color: var(--attn); } .btn-danger:hover { background: var(--attn-wash); }
.btn-sm { height: 28px; padding: 0 var(--s-3); font-size: var(--t-12); } .btn-lg { height: 42px; padding: 0 var(--s-6); font-size: var(--t-14); }
.btn-block { width: 100%; } .btn-icon { width: 34px; padding: 0; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; border-top-color: transparent; color: var(--ink-3); animation: spin 0.8s linear infinite; }
.btn-primary.is-loading::after { color: #171410; }
/* a text action inside a row — the word turns gold on hover, nothing else */
.act { font-size: var(--t-13); font-weight: 500; color: var(--ink-4); white-space: nowrap; transition: color var(--dur-1) var(--ease); }
a:hover > .act, button:hover > .act, .act:hover { color: var(--gold); }

/* ---------------------------------------------------------------- 7. INPUTS */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: var(--t-13); font-weight: 500; color: var(--ink-3); }
.field .help { font-size: var(--t-13); color: var(--ink-4); } .field .error { font-size: var(--t-13); color: var(--attn); }
.input, .select, .textarea { width: 100%; background: var(--surface-1); border: 1px solid var(--line-strong); border-radius: var(--r-1); color: var(--ink-1); padding: 8px var(--s-3); font-size: var(--t-14); line-height: 1.4; outline: none; transition: border-color var(--dur-1) var(--ease); }
.input::placeholder, .textarea::placeholder { color: var(--ink-5); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--gold-line); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--line-focus); }
.input:disabled, .select:disabled, .textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.field.is-error .input, .field.is-error .select, .field.is-error .textarea { border-color: var(--attn-line); }
.input.sm { padding: 5px var(--s-3); font-size: var(--t-13); } .input.num { font-variant-numeric: tabular-nums; text-align: right; }
.textarea { min-height: 96px; resize: vertical; }
.select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23857d71' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
.input-group { display: grid; grid-template-columns: 1fr auto; }
.input-group .input { border-radius: var(--r-1) 0 0 var(--r-1); } .input-group .btn { border-radius: 0 var(--r-1) var(--r-1) 0; height: auto; }
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-1); padding: 2px; gap: 2px; }
.segmented button { border: 0; background: transparent; color: var(--ink-3); padding: 5px var(--s-4); border-radius: 2px; font-size: var(--t-13); font-weight: 500; cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.segmented button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink-1); }
.toggle { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--line-strong); cursor: pointer; transition: background var(--dur-1) var(--ease); padding: 0; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-3); transition: transform var(--dur-2) var(--ease), background var(--dur-1) var(--ease); }
.toggle[aria-checked="true"] { border-color: var(--gold-line); } .toggle[aria-checked="true"]::after { transform: translateX(16px); background: var(--gold); }
.check { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; font-size: var(--t-13); color: var(--ink-2); }
.check input { appearance: none; width: 15px; height: 15px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--surface-1); display: grid; place-items: center; margin: 0; cursor: pointer; }
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { border-color: var(--gold); background: var(--gold); }
.check input:checked::after { content: ""; width: 7px; height: 7px; background: #171410; }
.check input[type="radio"]:checked::after { border-radius: 50%; width: 5px; height: 5px; }

/* ------------------------------------------------------------------ 8. TABS */
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: 0; background: none; cursor: pointer; padding: 9px var(--s-3) 11px; margin-bottom: -1px; font-size: var(--t-13); font-weight: 500; color: var(--ink-4); border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.tab:hover { color: var(--ink-2); } .tab[aria-selected="true"] { color: var(--ink-1); border-bottom-color: var(--gold); }
.tab .count { margin-left: 6px; font-size: var(--t-12); color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 9. STATUS */
.risk { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--ok); }
.risk.watch { background: var(--gold); } .risk.attn { background: var(--attn); }
/* a state as a word, coloured — the default treatment for status in tables and rows */
.state { font-size: var(--t-13); color: var(--ink-4); }
.state.ok { color: var(--ok); } .state.attn { color: var(--attn); } .state.watch { color: var(--gold); }
/* a pill — for the few states that must read at a glance in a dense table. Never more than one per row. */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: var(--r-1); border: 1px solid var(--line-strong); font-size: var(--t-12); font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill-ok { color: var(--ok); border-color: var(--ok-line); } .pill-attn { color: var(--attn); border-color: var(--attn-line); } .pill-watch { color: var(--gold); border-color: var(--gold-line); } .pill-quiet { color: var(--ink-4); } .pill-plain::before { display: none; }
/* service type — a word in ink, never a chip */
.type { font-size: var(--t-13); color: var(--ink-4); }
.type-online, .type-in_person, .type-hybrid { color: var(--ink-4); }
.stage { display: flex; gap: var(--s-2); align-items: center; font-size: var(--t-13); color: var(--ink-5); }
.stage span { display: flex; align-items: center; gap: 6px; }
.stage span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-5); }
.stage span.done { color: var(--ink-3); } .stage span.done::before { background: var(--ok); }
.stage span.now { color: var(--gold); } .stage span.now::before { background: var(--gold); }
.stage i { width: 12px; height: 1px; background: var(--line-strong); }

/* --------------------------------------------------------------- 10. FIGURES */
/* an editorial figure: big number, then what it is, then the qualifier */
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat .v { font-family: var(--f-display); font-size: var(--t-48); line-height: 0.96; color: var(--ink-1); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.stat .v .unit { font-size: 0.45em; color: var(--ink-4); margin-left: 4px; letter-spacing: 0.04em; }
.stat .l { font-size: var(--t-14); color: var(--ink-2); margin-top: 6px; }
.stat .d { font-size: var(--t-13); color: var(--ink-4); }
/* a run of secondary figures beside the big one: "2 check-ins waiting · oldest 2 days" */
.figs { display: flex; flex-direction: column; gap: 10px; font-size: var(--t-14); color: var(--ink-3); }
.figs b { font-family: var(--f-display); font-size: var(--t-20); letter-spacing: 0.03em; color: var(--ink-1); font-weight: 400; margin-right: 4px; font-variant-numeric: tabular-nums; }
.figs b.attn { color: var(--attn); }
.stat-row { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4) var(--s-9); align-items: start; padding-top: var(--s-2); }
/* the compact metric, for drawers and detail views */
.metric { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.metric .label { font-size: var(--t-13); color: var(--ink-3); }
.metric .value { font-family: var(--f-display); font-size: var(--t-34); line-height: 1; color: var(--ink-1); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.metric .value .unit { font-size: 0.5em; color: var(--ink-4); margin-left: 4px; }
.metric .delta { font-size: var(--t-13); color: var(--ink-4); } .metric .delta.up { color: var(--ok); } .metric .delta.down { color: var(--attn); }
.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-5) var(--s-7); }
.today-line { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: baseline; font-size: var(--t-14); color: var(--ink-3); }
.today-line .n { font-family: var(--f-display); font-size: var(--t-26); color: var(--ink-1); line-height: 1; font-variant-numeric: tabular-nums; margin-right: 3px; }

/* ------------------------------------------------------------------ 11. ROWS */
/* needs-attention row: dot · what and who · why · action word */
.todo { display: grid; grid-template-columns: 6px minmax(0,1fr) auto; align-items: baseline; gap: var(--s-4); width: 100%; text-align: left; cursor: pointer; color: inherit; background: none; border: 0; border-top: 1px solid var(--line); padding: 12px var(--s-2); border-radius: 0; transition: background var(--dur-1) var(--ease); }
.todo:first-child { border-top: 0; }
.todo:hover { background: var(--surface-1); }
.todo .risk { position: relative; top: -1px; }
.todo .t { font-size: var(--t-14); font-weight: 500; color: var(--ink-1); }
.todo .d { font-size: var(--t-13); color: var(--ink-3); margin-top: 2px; line-height: 1.45; }
.todo .tag, .todo .chev { display: none; }
/* a line of the day: time · who and what · state */
.day-row { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: baseline; gap: var(--s-3); padding: 9px var(--s-2); color: inherit; border-radius: 0; transition: background var(--dur-1) var(--ease); }
.day-row:hover { background: var(--surface-1); }
.day-row .time { font-size: var(--t-13); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.day-row .who { font-size: var(--t-14); font-weight: 500; color: var(--ink-1); min-width: 0; }
.day-row .who .type { font-weight: 400; margin-left: 4px; }
.day-row .who .sub { display: block; font-size: var(--t-13); color: var(--ink-3); font-weight: 400; margin-top: 1px; }
.day-row .state { font-size: var(--t-13); color: var(--ink-5); } .day-row .state.done { color: var(--ok); } .day-row .state.now { color: var(--gold); }
.attn-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); padding: var(--s-3) 0; }
.attn-item .who { font-weight: 500; color: var(--ink-1); } .attn-item .what { font-size: var(--t-13); color: var(--ink-3); }
.attn-item .facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-13); color: var(--ink-4); margin-top: 2px; }

/* ---------------------------------------------------------------- 12. TABLES */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { font-size: var(--t-12); font-weight: 500; color: var(--ink-4); text-align: left; padding: 8px var(--s-3); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.table th[aria-sort] { cursor: pointer; color: var(--ink-3); } .table th[aria-sort]::after { content: " ↓"; color: var(--gold); font-size: 10px; } .table th[aria-sort="ascending"]::after { content: " ↑"; }
.table td { padding: 11px var(--s-3); border-bottom: 1px solid var(--line); font-size: var(--t-13); color: var(--ink-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--dur-1) var(--ease); } .table tbody tr:hover td { background: var(--surface-1); } .table tbody tr.clickable { cursor: pointer; }
.table tbody tr[aria-selected="true"] td { background: var(--gold-wash); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.primary { color: var(--ink-1); font-weight: 500; } .table td.faint { color: var(--ink-4); }
.table .cell-stack { display: flex; flex-direction: column; gap: 2px; } .table .cell-stack .sub { font-size: var(--t-12); color: var(--ink-4); }
.table.dense td, .table.dense th { padding: 7px var(--s-3); }
.table-empty { padding: var(--s-7); text-align: center; }

/* ---------------------------------------------------------------- 13. CHARTS */
.chart { width: 100%; height: auto; }
.chart .grid { stroke: var(--line); stroke-width: 1; } .chart .axis { fill: var(--ink-4); font-size: 10px; font-family: var(--f-ui); }
.chart .line { stroke: var(--gold); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .chart .line.avg { stroke: var(--gold-champagne); } .chart .line.faint { stroke: var(--ink-5); stroke-width: 1; }
.chart .area { fill: var(--gold); opacity: 0.07; } .chart .dot { fill: var(--gold); } .chart .dot.end { fill: var(--gold-champagne); }
.chart .bar { fill: var(--gold-deep); } .chart .bar.now { fill: var(--gold); }
.chart .ok { stroke: var(--ok); fill: var(--ok); } .chart .attn { stroke: var(--attn); fill: var(--attn); }
.chart .label { fill: var(--ink-2); font-size: 11px; font-family: var(--f-ui); font-weight: 500; }
.spark { width: 72px; height: 22px; }
.ring { position: relative; width: 96px; height: 96px; } .ring svg { transform: rotate(-90deg); }
.ring .track { stroke: var(--surface-3); fill: none; } .ring .arc { stroke: var(--gold); fill: none; stroke-linecap: round; } .ring .arc.ok { stroke: var(--ok); } .ring .arc.attn { stroke: var(--attn); }
.ring .n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: var(--t-26); color: var(--ink-1); font-variant-numeric: tabular-nums; }
.ring.lg { width: 140px; height: 140px; } .ring.lg .n { font-size: var(--t-48); }

/* -------------------------------------------------------------- 14. TIMELINE */
.timeline { display: flex; flex-direction: column; }
.tl-day { display: grid; grid-template-columns: 84px 1fr; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--line); } .tl-day:first-child { border-top: 0; }
.tl-date { font-size: var(--t-13); color: var(--ink-4); padding-top: 2px; font-variant-numeric: tabular-nums; }
.tl-events { display: flex; flex-direction: column; gap: var(--s-2); }
.tl-event { display: flex; gap: var(--s-3); align-items: baseline; font-size: var(--t-13); }
.tl-event::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-5); flex-shrink: 0; position: relative; top: -1px; }
.tl-event.attn::before { background: var(--attn); } .tl-event.ok::before { background: var(--ok); }
.tl-event .ico { display: none; } .tl-event .body { color: var(--ink-2); } .tl-event .body .sub { color: var(--ink-4); }

/* -------------------------------------------------------- 15. PROFILE HEADER */
.profile-head { display: flex; align-items: flex-end; gap: var(--s-5); flex-wrap: wrap; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-family: var(--f-display); font-size: var(--t-17); color: var(--ink-3); letter-spacing: 0.04em; flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 64px; height: 64px; font-size: var(--t-26); } .avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.profile-head .name { font-family: var(--f-display); font-size: var(--t-34); line-height: 1; color: var(--ink-1); letter-spacing: 0.02em; }
.profile-head .meta { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: var(--t-13); color: var(--ink-3); }
.profile-head .meta .sep { color: var(--ink-5); } .profile-head .actions { margin-left: auto; display: flex; gap: var(--s-2); }

/* -------------------------------------------------------------- 16. OVERLAYS */
.scrim { position: fixed; inset: 0; z-index: var(--z-drawer); background: rgba(8,7,6,0.6); animation: fade var(--dur-2) var(--ease); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: calc(var(--z-drawer) + 1); width: min(520px, 100vw); background: var(--surface-raised); border-left: 1px solid var(--line-strong); box-shadow: var(--shadow-2); display: flex; flex-direction: column; animation: slide-in var(--dur-2) var(--ease); }
.drawer.wide { width: min(680px, 100vw); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--line); }
.drawer-body { padding: var(--s-6); overflow-y: auto; flex: 1; }
.drawer-foot { padding: var(--s-4) var(--s-6); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: var(--s-2); align-items: center; }
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--s-6); }
.modal-box { width: min(560px, 100%); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-2); animation: rise var(--dur-2) var(--ease); }
.modal-box.sm { width: min(420px, 100%); } .modal-box.lg { width: min(760px, 100%); }
.menu { position: absolute; z-index: var(--z-drawer); min-width: 200px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-2); padding: var(--s-1); animation: rise var(--dur-1) var(--ease); }
.menu-item { display: flex; align-items: center; gap: var(--s-3); width: 100%; border: 0; background: none; cursor: pointer; padding: 8px var(--s-3); border-radius: var(--r-1); font-size: var(--t-13); color: var(--ink-2); text-align: left; }
.menu-item:hover { background: var(--surface-3); color: var(--ink-1); } .menu-item.danger { color: var(--attn); } .menu-sep { border-top: 1px solid var(--line); margin: var(--s-1) 0; }
.cmdk { position: fixed; inset: 0; z-index: var(--z-cmdk); display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; }
.cmdk-box { width: min(620px, calc(100vw - 32px)); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-2); overflow: hidden; animation: rise var(--dur-2) var(--ease); }
.cmdk-input { width: 100%; border: 0; background: transparent; outline: none; padding: var(--s-5) var(--s-6); font-size: var(--t-17); color: var(--ink-1); border-bottom: 1px solid var(--line); }
.cmdk-input::placeholder { color: var(--ink-5); }
.cmdk-list { max-height: 52vh; overflow-y: auto; padding: var(--s-2); }
.cmdk-group { padding: var(--s-3) var(--s-3) var(--s-1); font-size: var(--t-12); color: var(--ink-5); }
.cmdk-item { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: var(--s-3); padding: 9px var(--s-3); border-radius: var(--r-1); font-size: var(--t-13); color: var(--ink-2); cursor: pointer; }
.cmdk-item[aria-selected="true"], .cmdk-item:hover { background: var(--surface-3); color: var(--ink-1); }
.cmdk-item .kind { font-size: var(--t-12); color: var(--ink-4); }
.kbd { font-family: var(--f-ui); font-size: var(--t-11); color: var(--ink-4); border: 1px solid var(--line-strong); border-radius: 2px; padding: 1px 5px; }

/* ---------------------------------------------------------------- 17. STATES */
.empty { padding: var(--s-7) 0; } .empty .voice { color: var(--ink-3); } .empty .sub { margin-top: var(--s-2); font-size: var(--t-13); color: var(--ink-4); }
.notice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border-left: 2px solid var(--line-strong); font-size: var(--t-13); }
.notice .risk { display: none; } .notice .t { font-weight: 600; color: var(--ink-1); } .notice .d { color: var(--ink-3); margin-top: 2px; }
.notice.attn { border-left-color: var(--attn); } .notice.attn .t { color: var(--attn); } .notice.ok { border-left-color: var(--ok); } .notice.ok .t { color: var(--ok); }
.skeleton { background: linear-gradient(90deg, var(--surface-1) 25%, var(--surface-2) 50%, var(--surface-1) 75%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: 2px; min-height: 1em; }
.toast { position: fixed; bottom: var(--s-6); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-1); box-shadow: var(--shadow-2); padding: var(--s-3) var(--s-5); font-size: var(--t-13); color: var(--ink-1); display: flex; align-items: center; gap: var(--s-3); animation: rise var(--dur-2) var(--ease); }
.toast .risk { width: 6px; height: 6px; }

/* ---------------------------------------------------------------- 18. MOTION */
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes slide-in { from { transform: translateX(20px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
@keyframes spin { to { transform: rotate(360deg) } }
.enter { animation: none; }

/* ------------------------------------------------------------ 19. CLIENT APP */
.app-shell { max-width: var(--app-max); margin: 0 auto; padding: 0 var(--s-4) calc(var(--s-10) + env(safe-area-inset-bottom)); }
.app-head { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--s-4) + env(safe-area-inset-top)) 0 var(--s-4); }
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(12,11,10,0.94); backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: var(--s-2) 0 calc(var(--s-2) + env(safe-area-inset-bottom)); }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--t-12); font-weight: 500; color: var(--ink-4); padding: 6px 0; min-height: 44px; justify-content: center; }
.tabbar a .ico { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { color: var(--gold); }
.tabbar a[data-tab="train"][aria-current="page"] { color: var(--gold-deep); } .tabbar a[data-tab="fuel"][aria-current="page"] { color: var(--gold-olive); } .tabbar a[data-tab="progress"][aria-current="page"] { color: var(--gold-pale); }
.stepper { display: inline-grid; grid-template-columns: 44px 1fr 44px; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--r-1); overflow: hidden; }
.stepper button { border: 0; background: transparent; color: var(--ink-3); font-size: var(--t-17); cursor: pointer; min-height: 44px; } .stepper button:active { background: var(--surface-2); color: var(--ink-1); }
.stepper .v { display: grid; place-items: center; font-family: var(--f-display); font-size: var(--t-20); color: var(--ink-1); font-variant-numeric: tabular-nums; min-width: 56px; } .stepper .v .u { font-size: 0.55em; color: var(--ink-4); margin-left: 3px; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-drawer) + 1); background: var(--surface-raised); border-top: 1px solid var(--line-strong); border-radius: var(--r-2) var(--r-2) 0 0; box-shadow: var(--shadow-2); max-height: 88vh; display: flex; flex-direction: column; animation: sheet-in var(--dur-2) var(--ease); padding-bottom: env(safe-area-inset-bottom); }
.sheet::before { content: ""; width: 32px; height: 3px; border-radius: 2px; background: var(--ink-5); margin: 10px auto 0; }
@keyframes sheet-in { from { transform: translateY(20px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ------------------------------------------------------------ 20. RESPONSIVE */
@media (max-width: 1279px) { .hq-content { padding: var(--s-7) var(--s-7) var(--s-9); } .home { column-gap: var(--s-8); } }
@media (max-width: 1099px) {
  .hq { grid-template-columns: var(--sidebar-w-min) 1fr; }
  .hq-side { padding: var(--s-6) var(--s-3) var(--s-4); }
  .nav-item { font-size: var(--t-13); }
  .hq-content { padding: var(--s-6) var(--s-5) var(--s-9); }
  .home { grid-template-columns: 1fr; grid-template-areas: "attn" "today" "coach" "biz" "upcoming"; row-gap: var(--s-7); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 899px) {
  .hq { grid-template-columns: 1fr; }
  .hq-side { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center; overflow-x: auto; scrollbar-width: none; border-right: 0; border-bottom: 1px solid var(--line); padding: var(--s-2) var(--s-3); gap: 2px; z-index: var(--z-sticky); background: var(--ground); }
  .hq-side::-webkit-scrollbar { display: none; }
  .hq-side nav { flex-direction: row; gap: 2px; }
  .hq-brand { padding: 0 var(--s-3) 0 0; }
  .hq-brand span, .hq-brand .demo-flag, .side-foot, .nav-spacer { display: none; }
  .nav-item { width: auto; padding: 8px 10px; white-space: nowrap; }
  .hq-content { padding: var(--s-5) var(--s-4) var(--s-9); }
  .page-head { flex-direction: column; align-items: flex-start; } .page-head .actions { width: 100%; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .metric-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat-row { grid-template-columns: 1fr; }
  .drawer, .drawer.wide { width: 100vw; }
  .attn-item { grid-template-columns: auto 1fr; }
  .profile-head .actions { margin-left: 0; width: 100%; }
  .group { grid-template-columns: 1fr; gap: 2px var(--s-5); }
  .tl-day { grid-template-columns: 64px 1fr; }
  .display-xl { font-size: var(--t-48); line-height: var(--lh-48); } .display-lg { font-size: var(--t-34); line-height: var(--lh-34); }
}
@media (pointer: coarse) {
  .btn { min-height: 44px; } .btn-sm { min-height: 40px; }
  .tab { padding-top: 12px; padding-bottom: 14px; }
  .list-row, .todo, .day-row { padding-top: var(--s-4); padding-bottom: var(--s-4); }
  .nav-item { min-height: 44px; }
  .input, .select { padding-top: 11px; padding-bottom: 11px; }
}
@media (min-width: 521px) {
  .app-shell { border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 100vh; }
  .tabbar { left: 50%; transform: translateX(-50%); width: var(--app-max); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ============================================================================
   21. APPLICATION SHELL  (v4 — the rail)
   A 200px rail on the left carries the brand, search and nine destinations.
   The workspace is everything else. Bebas belongs to the wordmark only.
   ========================================================================== */
#hq { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 100vh; overflow-x: clip; }
/* #hq has exactly TWO grid children: the rail and the main column (.hq-col). The maintenance bar and
   the workspace live inside .hq-col, so a visible bar can never take a grid cell of its own and push the
   workspace into the rail column; min-width: 0 lets the column shrink below its content. */
.hq-col { min-width: 0; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 12px 18px; background: var(--panel); border-right: 1px solid var(--line); }
.rail .brand { display: flex; flex-direction: column; gap: 3px; padding: 0 10px 18px; }
.rail .wordmark { font-family: var(--f-display); font-size: 17px; letter-spacing: 0.12em; color: var(--ink-1); line-height: 1; white-space: nowrap; }
.rail .product { font-size: var(--t-12); color: var(--ink-4); letter-spacing: 0.01em; }
.rail .search { display: flex; align-items: center; gap: var(--s-2); height: 30px; margin: 0 2px 18px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--surface-1); color: var(--ink-4); font-size: var(--t-13); cursor: text; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.rail .search:hover { border-color: var(--line-strong); color: var(--ink-3); }
.rail .search .kbd { margin-left: auto; }
.railnav { display: flex; flex-direction: column; gap: 1px; }
.railnav .nav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 0 10px; border-radius: var(--r-1); font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-3); text-decoration: none; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.railnav .nav-item:hover { color: var(--ink-1); background: var(--surface-1); }
.railnav .nav-item[aria-current="page"] { color: var(--gold-champagne); background: var(--gold-wash); }
.railnav .nav-item .count { font-size: var(--t-12); font-weight: 500; color: var(--ink-5); font-variant-numeric: tabular-nums; }
.railnav .nav-item .count.attn { color: var(--attn); }
.railnav .gap { height: 14px; }
.rail .foot { margin-top: auto; padding: 0 10px; display: flex; flex-direction: column; gap: 6px; }
.rail .demo-flag { font-size: var(--t-12); color: var(--gold-deep); }
.workspace { max-width: 1400px; padding: 24px 40px 48px; }

/* buttons: primary gold (rare), secondary quiet surface, tertiary text */
.btn { border-radius: var(--r-1); height: 32px; font-weight: 500; letter-spacing: -0.005em; }
.btn-secondary { background: var(--surface-1); border-color: var(--line-strong); color: var(--ink-1); } .btn-secondary:hover { background: var(--surface-2); border-color: var(--line-strong); }
.btn-ghost { color: var(--ink-3); } .btn-ghost:hover { color: var(--gold-champagne); }
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--t-12); }

@media (max-width: 1023px) { #hq { grid-template-columns: 176px minmax(0, 1fr); } .rail { padding: 18px 10px 16px; } .workspace { padding: 22px 22px 40px; } }
@media (max-width: 639px) {
  #hq { grid-template-columns: 1fr; }
  .rail { position: sticky; height: auto; min-width: 0; max-width: 100vw; flex-direction: row; align-items: center; gap: 12px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); z-index: var(--z-sticky); }
  .rail .brand, .rail .search, .rail .foot { flex-shrink: 0; } .rail .demo-flag { white-space: nowrap; }
  .rail .brand { padding: 0 4px; gap: 0; } .rail .product { display: none; }
  .rail .search { margin: 0; width: 34px; padding: 0; justify-content: center; } .rail .search > span:first-child, .rail .search .kbd { display: none; } .rail .search::before { content: "⌘K"; font-size: 11px; }
  .railnav { flex-direction: row; gap: 0; overflow-x: auto; scrollbar-width: none; min-width: 0; } .railnav::-webkit-scrollbar { display: none; }
  .railnav .nav-item { height: 30px; padding: 0 9px; white-space: nowrap; } .railnav .gap { width: 8px; height: auto; }
  .rail .foot { margin-top: 0; padding: 0; }
  .workspace { padding: 20px 20px 40px; }
}

/* ============================================================================
   22. HOME  (v4 — the day sheet, finished)
   Left: my day. Right: what I need to know. Two quiet panels — the current
   window and the next-up briefing — sit on the workspace; everything else is
   typeset directly on it. Labels are sentence case. No display numerals.
   ========================================================================== */
.daygrid { display: grid; grid-template-columns: minmax(0, 66fr) minmax(320px, 34fr); align-items: stretch; }
.daygrid > section { padding-right: 48px; min-width: 0; }
.daygrid > .column { padding-left: 40px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 28px; }
.lbl { font-size: var(--t-12); font-weight: 500; letter-spacing: 0.01em; color: var(--ink-4); }
.lbl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lbl-row .r { font-size: var(--t-12); color: var(--ink-5); font-variant-numeric: tabular-nums; }
.lbl-row a.r:hover { color: var(--gold-champagne); }

/* the date */
.dayhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.dayhead h1 { font-size: var(--t-22); line-height: var(--lh-22); letter-spacing: var(--tr-22); font-weight: 600; color: var(--ink-1); }
.dayhead p { font-size: var(--t-14); color: var(--ink-3); margin-top: 3px; }
.dayhead .r { font-size: var(--t-13); color: var(--ink-4); white-space: nowrap; }

/* earlier — one compressed line */
.earlier { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; font-size: var(--t-13); color: var(--ink-4); margin-bottom: 18px; }
.earlier .lbl { margin-right: 4px; }
.earlier button { border: 0; background: none; padding: 0; color: var(--ink-4); font: inherit; cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; }
.earlier button:hover { color: var(--ink-2); }
.earlier .t { font-variant-numeric: tabular-nums; color: var(--ink-5); margin-right: -1px; }
.earlier .ok { color: var(--ok); } .earlier .attn { color: var(--attn); }

/* the current window — the one panel on the sheet */
.cw { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 14px 20px 16px; }
.cw .lbl-row .lbl { color: var(--gold-champagne); }
.cw .range { margin-top: 7px; font-size: var(--t-14); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cw .lead { margin-top: 2px; font-size: var(--t-22); line-height: var(--lh-22); letter-spacing: var(--tr-22); font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.cw .lead b { font-weight: 600; }
.cw .lead span { color: var(--ink-3); font-weight: 500; }
.cw .best { margin-top: 13px; }
/* the command strip: compact rows, one hover state, the action as text */
.strip { margin-top: 4px; margin-left: -10px; margin-right: -10px; }
.strip button { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 16px; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--r-1); background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; transition: background var(--dur-1) var(--ease); }
.strip button + button { position: relative; }
.strip button + button::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 1px; background: rgba(243,237,226,0.045); }
.strip button:hover + button::before, .strip button:hover::before { opacity: 0; }
.strip button:hover { background: var(--surface-1); }
.strip .who { font-size: var(--t-14); font-weight: 500; color: var(--ink-1); }
.strip .do { font-size: var(--t-13); color: var(--ink-3); margin-left: 8px; }
.strip .act { font-size: var(--t-13); color: var(--ink-4); }
.strip button:hover .act { color: var(--gold-champagne); }
.cw .quiet { margin-top: 9px; font-size: var(--t-13); color: var(--ink-4); }
.cw .quiet a { color: var(--ink-3); } .cw .quiet a:hover { color: var(--gold-champagne); }

/* next — the one prominent event on the sheet */
.next-ev { display: grid; grid-template-columns: 72px minmax(0,1fr); column-gap: 12px; margin-top: 28px; padding: 0 20px; cursor: pointer; }
.next-ev .lbl { grid-column: 1 / -1; margin-bottom: 9px; }
.next-ev .t { font-size: var(--t-14); color: var(--ink-1); font-weight: 600; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; padding-top: 3px; }
.next-ev .who { font-size: 18px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink-1); line-height: 1.25; }
.next-ev .what { font-size: var(--t-14); color: var(--ink-2); margin-top: 3px; }
.next-ev .ctx { font-size: var(--t-13); color: var(--ink-4); margin-top: 4px; }
.next-ev:hover .who { color: var(--gold-champagne); }
/* later — quiet rows, no rules */
.later { margin-top: 26px; padding: 0 20px; display: flex; flex-direction: column; gap: 10px; }
.later .lbl { margin-bottom: 1px; }
.later-ev { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; column-gap: 12px; align-items: baseline; cursor: pointer; }
.later-ev .t { font-size: var(--t-13); color: var(--ink-4); font-variant-numeric: tabular-nums; padding-top: 1px; }
.later-ev .who { font-size: var(--t-14); font-weight: 500; color: var(--ink-2); letter-spacing: -0.005em; }
.later-ev .what { font-size: var(--t-13); color: var(--ink-4); margin-left: 8px; }
.later-ev .who + .what { margin-left: 8px; }
.later-ev:hover .who { color: var(--ink-1); }
.later-ev.call .who { font-weight: 400; color: var(--ink-3); font-style: italic; }
.later-ev.cancelled .who { color: var(--ink-5); text-decoration: line-through; text-decoration-color: var(--ink-5); font-weight: 400; }
.later-ev .end { font-size: var(--t-12); color: var(--ink-5); }
.later .note { font-size: var(--t-13); color: var(--ink-4); padding-left: 84px; margin-top: 4px; }
.sheet-empty { margin-top: 30px; padding: 0 22px; font-size: var(--t-14); color: var(--ink-4); }

/* priority — a ranked queue of three */
.prio { display: flex; flex-direction: column; gap: 2px; margin: 6px -10px 0; }
.prio button { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; column-gap: 10px; align-items: baseline; padding: 9px 10px; border: 0; border-radius: var(--r-1); background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; transition: background var(--dur-1) var(--ease); }
.prio button:hover { background: var(--surface-1); }
.prio .n { font-size: var(--t-12); color: var(--ink-5); font-variant-numeric: tabular-nums; }
.prio .who { font-size: var(--t-14); font-weight: 500; color: var(--ink-1); }
.prio .p1 .who { font-size: var(--t-15); font-weight: 600; letter-spacing: -0.005em; }
.prio .why { display: block; font-size: var(--t-13); color: var(--ink-3); margin-top: 1px; }
.prio .p3 .why { color: var(--ink-4); }
.prio .why .hot { color: var(--attn); }
.prio .act { font-size: var(--t-13); color: var(--ink-4); }
.prio button:hover .act { color: var(--gold-champagne); }
.prio-empty { margin-top: 8px; font-size: var(--t-13); color: var(--ink-4); }

/* next up — the briefing panel */
.nu { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 14px 18px 14px; }
.nu .who { display: block; margin-top: 8px; font-size: var(--t-17); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-1); line-height: 1.3; }
.nu .who:hover { color: var(--gold-champagne); }
.nu .line { font-size: var(--t-13); color: var(--ink-3); margin-top: 2px; }
.nu .facts { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.nu .facts div { display: grid; grid-template-columns: 92px 1fr; column-gap: 12px; font-size: var(--t-13); }
.nu .facts .k { color: var(--ink-4); }
.nu .facts .v { color: var(--ink-2); }
.nu .facts .v.attn { color: var(--attn); }
.nu .note { font-family: var(--f-voice); font-style: italic; font-size: var(--t-15); color: var(--ink-2); line-height: 1.45; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.nu .noteby { font-size: var(--t-12); color: var(--ink-5); margin-top: 5px; }
.nu .foot { margin-top: 11px; display: flex; gap: 8px; }
.nu .empty { margin-top: 8px; font-size: var(--t-13); color: var(--ink-4); }

/* the business line — one quiet sentence at the foot of the column */
.bizline { margin-top: 4px; font-size: var(--t-13); color: var(--ink-4); display: flex; flex-wrap: wrap; gap: 4px 0; }
.bizline a { color: var(--ink-4); } .bizline a:hover { color: var(--ink-1); }
.bizline a b { font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bizline .sep { padding: 0 8px; color: var(--ink-5); }

@media (max-width: 1199px) { .daygrid { grid-template-columns: minmax(0, 62fr) minmax(280px, 38fr); } .daygrid > section { padding-right: 30px; } .daygrid > .column { padding-left: 26px; } }
@media (max-width: 1023px) { .daygrid { grid-template-columns: minmax(0, 58fr) minmax(224px, 42fr); } .daygrid > section { padding-right: 20px; } .daygrid > .column { padding-left: 18px; } .next-ev, .later { padding: 0 10px; } .cw, .nu { padding-left: 16px; padding-right: 16px; } .nu .facts div { grid-template-columns: 84px 1fr; } .next-ev, .later-ev { grid-template-columns: 60px minmax(0,1fr) auto; } .later .note { padding-left: 72px; } }
@media (max-width: 719px) {
  .daygrid { grid-template-columns: 1fr; row-gap: 28px; }
  .daygrid > section { padding-right: 0; }
  .daygrid > .column { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
  .bizline { margin-top: 8px; }
}

/* ============================================================================
   23. CLIENTS + DOSSIER  (Step 11A)
   The roster is a list, not a spreadsheet. The dossier is one record with
   five jobs. Same grammar as Home: sentence-case labels, two panels at most,
   hairlines only where a control needs them, red only for real problems.
   ========================================================================== */
.tlink { border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-13); color: var(--ink-3); cursor: pointer; transition: color var(--dur-1) var(--ease); }
.tlink:hover { color: var(--gold-champagne); }
.hot { color: var(--attn); } .ok { color: var(--ok); } .faint { color: var(--ink-5); }

/* the roster */
.roster { max-width: 1180px; }
.roster-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.roster-head h1 { font-size: var(--t-22); line-height: var(--lh-22); letter-spacing: var(--tr-22); font-weight: 600; color: var(--ink-1); }
.roster-head .sub { font-size: var(--t-13); color: var(--ink-4); margin-top: 4px; }
.roster-search { width: 320px; height: 32px; padding: 0 12px; font-size: var(--t-13); }
.roster-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-bottom: 14px; }
.fseg { display: inline-flex; gap: 2px; }
.fseg button { border: 0; background: none; padding: 5px 9px; border-radius: var(--r-1); font: inherit; font-size: var(--t-13); font-weight: 500; color: var(--ink-4); cursor: pointer; transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.fseg button:hover { color: var(--ink-2); }
.fseg button[aria-pressed="true"] { color: var(--ink-1); background: var(--surface-1); }
.ftoggle { border: 1px solid var(--line); background: none; padding: 5px 10px; border-radius: var(--r-1); font: inherit; font-size: var(--t-13); font-weight: 500; color: var(--ink-4); cursor: pointer; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.ftoggle span { color: var(--ink-5); margin-left: 4px; font-variant-numeric: tabular-nums; }
.ftoggle:hover { color: var(--ink-2); border-color: var(--line-strong); }
.ftoggle[aria-pressed="true"] { color: var(--gold-champagne); border-color: var(--gold-line); background: var(--gold-wash); }
.ftoggle[aria-pressed="true"] span { color: var(--gold-deep); }
.fsort { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--ink-5); }
.rlist { display: flex; flex-direction: column; }
.rlist-sub { margin-top: 22px; }
.rgroup { font-size: var(--t-12); font-weight: 500; color: var(--ink-4); padding: 0 12px 8px; }
.rhead, .rrow { display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(150px, 1.4fr) minmax(130px, 1fr) minmax(150px, 1.2fr) minmax(120px, 0.9fr); column-gap: 16px; align-items: baseline; padding: 0 12px; }
.rhead { font-size: var(--t-12); color: var(--ink-4); padding-bottom: 8px; }
.rrow { padding-top: 10px; padding-bottom: 10px; margin: 0 -12px; border-radius: var(--r-1); text-decoration: none; color: inherit; position: relative; transition: background var(--dur-1) var(--ease); }
.rrow + .rrow::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: rgba(243,237,226,0.05); }
.rrow:hover { background: var(--surface-1); } .rrow:hover + .rrow::before, .rrow:hover::before { opacity: 0; }
.rrow .rname { display: flex; flex-direction: column; gap: 1px; }
.rrow .nm { font-size: var(--t-14); font-weight: 500; color: var(--ink-1); letter-spacing: -0.005em; }
.rrow .sv { font-size: var(--t-12); color: var(--ink-4); }
.rrow .rctx, .rrow .rnext, .rrow .rout, .rrow .rlast { font-size: var(--t-13); color: var(--ink-3); }
.rrow .rnext .sub { display: block; font-size: var(--t-12); color: var(--ink-4); }
.rrow .rlast { color: var(--ink-4); }
.rrow .rout .more { margin-left: 6px; font-size: var(--t-12); color: var(--ink-5); }
.rrow.quiet .nm { color: var(--ink-3); font-weight: 400; } .rrow.quiet .rctx { color: var(--ink-4); }
.rrow:hover .nm { color: var(--gold-champagne); }
.rempty { font-size: var(--t-14); color: var(--ink-4); padding: 24px 0; }

/* the dossier */
.dossier { max-width: 1180px; }
.d-back { font-size: var(--t-13); color: var(--ink-4); margin-bottom: 10px; } .d-back a { color: var(--ink-4); } .d-back a:hover { color: var(--gold-champagne); }
.d-id { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 48px; align-items: end; }
.d-id h1 { font-size: var(--t-22); line-height: var(--lh-22); letter-spacing: var(--tr-22); font-weight: 600; color: var(--ink-1); }
.d-line { font-size: var(--t-14); color: var(--ink-3); margin-top: 4px; }
.d-facts { display: flex; gap: 32px; margin: 0; }
.d-facts div { display: flex; flex-direction: column; gap: 3px; max-width: 26ch; }
.d-facts dt { font-size: var(--t-12); color: var(--ink-4); } .d-facts dd { margin: 0; font-size: var(--t-13); color: var(--ink-2); }
.d-tabs { display: flex; gap: 4px; margin-top: 22px; border-bottom: 1px solid var(--line); }
.d-tabs a { padding: 8px 10px 10px; margin-bottom: -1px; font-size: 13.5px; font-weight: 500; color: var(--ink-4); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-1) var(--ease); }
.d-tabs a:hover { color: var(--ink-2); }
.d-tabs a[aria-current="page"] { color: var(--gold-champagne); border-bottom-color: var(--gold-champagne); }
.d-state { margin-top: 14px; font-size: var(--t-13); color: var(--ink-3); }
.d-body { margin-top: 24px; }
.d-quiet { font-size: var(--t-13); color: var(--ink-4); line-height: 1.5; } .d-quiet a { color: var(--ink-3); } .d-quiet a:hover { color: var(--gold-champagne); }
.d-empty { font-size: var(--t-14); color: var(--ink-4); }

/* overview: the coaching picture, then the command side */
.d-grid { display: grid; grid-template-columns: minmax(0, 62fr) minmax(300px, 38fr); }
.d-main { padding-right: 44px; min-width: 0; }
.d-side { padding-left: 36px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 26px; }
.mods { display: flex; flex-direction: column; margin-top: 6px; }
.mod { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 11px 10px; margin: 0 -10px; border-radius: var(--r-1); text-decoration: none; color: inherit; position: relative; transition: background var(--dur-1) var(--ease); }
.mod + .mod::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 1px; background: rgba(243,237,226,0.05); }
a.mod:hover { background: var(--surface-1); } a.mod:hover + .mod::before, a.mod:hover::before { opacity: 0; }
.mod .mt { font-size: var(--t-13); color: var(--ink-4); }
.mod .mb { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mod .ttl { font-size: var(--t-14); font-weight: 500; color: var(--ink-1); }
.mod .ln { font-size: var(--t-13); color: var(--ink-3); }
.mod .ms { font-size: var(--t-12); color: var(--ink-4); white-space: nowrap; }
.mod .ms.draft { color: var(--gold-champagne); } .mod .ms.none { color: var(--ink-5); }
.mods.big .mod { grid-template-columns: 112px minmax(0, 1fr) auto auto; padding: 14px 10px; }
.mods.big .ma { margin-left: 8px; }
.ciline { margin-top: 22px; display: flex; gap: 14px; align-items: baseline; font-size: var(--t-13); color: var(--ink-3); }
.studio { margin-top: 24px; }
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; margin-top: 10px; }
.st-grid div { display: flex; flex-direction: column; gap: 3px; }
.st-grid .k { font-size: var(--t-12); color: var(--ink-4); } .st-grid .v { font-size: var(--t-13); color: var(--ink-2); }
.studio .note, .d-side .note { font-family: var(--f-voice); font-style: italic; font-size: var(--t-15); color: var(--ink-2); line-height: 1.45; margin-top: 12px; max-width: 40ch; }
.studio .noteby, .d-side .noteby { font-size: var(--t-12); color: var(--ink-5); margin-top: 5px; }
.studio .quiet { margin-top: 14px; font-size: var(--t-13); color: var(--ink-4); }
.needs { display: flex; flex-direction: column; margin: 4px -10px 0; }
.need { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 8px 10px; border-radius: var(--r-1); text-decoration: none; color: inherit; transition: background var(--dur-1) var(--ease); }
.need:hover { background: var(--surface-1); }
.need .t { display: block; font-size: var(--t-14); font-weight: 500; color: var(--ink-1); } .need .t.hot { color: var(--attn); }
.need .s { display: block; font-size: var(--t-13); color: var(--ink-4); margin-top: 1px; }
.need .act { font-size: var(--t-13); color: var(--ink-4); } .need:hover .act { color: var(--gold-champagne); }
.nxt { margin-top: 6px; font-size: var(--t-14); color: var(--ink-2); } .nxt b { font-weight: 600; color: var(--ink-1); }
.nxt + .tlink { display: inline-block; margin-top: 6px; }
.mem { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.mem li { font-size: var(--t-13); color: var(--ink-2); line-height: 1.45; padding-left: 12px; position: relative; }
.mem li::before { content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-5); }
.mem li .tlink { margin-left: 6px; font-size: var(--t-12); }
.recent { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.rc { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 10px; font-size: var(--t-13); }
.rc .w { color: var(--ink-5); font-variant-numeric: tabular-nums; } .rc .b { color: var(--ink-2); } .rc .b.attn { color: var(--attn); } .rc .b .s { color: var(--ink-4); }

/* coaching, progress, history, admin */
.coach, .prog, .hist, .admin { max-width: 860px; }
.psum { margin-top: 10px; font-size: var(--t-14); color: var(--ink-3); } .psum b { font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.prog .chart { margin-top: 10px; }
.table.trend td.lo { color: var(--attn); } .table.trend td.hi { color: var(--ok); }
.tl { display: flex; flex-direction: column; margin-top: 12px; }
.tl-g { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; padding: 10px 0; }
.tl-g + .tl-g { border-top: 1px solid rgba(243,237,226,0.05); }
.tl-d { font-size: var(--t-13); color: var(--ink-4); font-variant-numeric: tabular-nums; padding-top: 1px; }
.tl-ev { display: flex; flex-direction: column; gap: 6px; }
.tl-e { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; font-size: var(--t-13); }
.tl-e .t { color: var(--ink-2); font-weight: 500; } .tl-e.attn .t { color: var(--attn); } .tl-e.ok .t { color: var(--ink-2); }
.tl-e .s { color: var(--ink-4); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-e .c { color: var(--ink-5); font-size: var(--t-12); }
.admin { display: flex; flex-direction: column; gap: 30px; }
.agrid { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 8px 0 0; }
.agrid div { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 16px; font-size: var(--t-13); align-items: baseline; }
.agrid dt { color: var(--ink-4); } .agrid dd { margin: 0; color: var(--ink-2); line-height: 1.5; } .agrid dd a { color: var(--ink-2); } .agrid dd a:hover { color: var(--gold-champagne); }
.agrid.ent dd { display: flex; gap: 12px; align-items: baseline; }
.agrid.ent .src { font-size: var(--t-12); color: var(--ink-5); }
.agrid.ent .tlink { font-size: var(--t-12); opacity: 0; } .agrid.ent div:hover .tlink { opacity: 1; }
.admin .d-quiet { margin-top: 10px; }
.steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.steps li { font-size: var(--t-13); color: var(--ink-4); display: inline-flex; gap: 6px; align-items: baseline; }
.steps li.done { color: var(--ink-2); } .steps li .mk { color: var(--ink-5); font-variant-numeric: tabular-nums; } .steps li.done .mk { color: var(--ok); }

@media (max-width: 1199px) { .d-grid { grid-template-columns: minmax(0, 58fr) minmax(280px, 42fr); } .d-main { padding-right: 28px; } .d-side { padding-left: 24px; } .rhead, .rrow { grid-template-columns: minmax(160px, 1.3fr) minmax(130px, 1.3fr) minmax(110px, 1fr) minmax(130px, 1.2fr) minmax(100px, 0.8fr); } }
@media (max-width: 1023px) { .rhead span:last-child, .rrow .rlast { display: none; } .rhead, .rrow { grid-template-columns: minmax(150px, 1.3fr) minmax(120px, 1.2fr) minmax(100px, 1fr) minmax(120px, 1.2fr); } .roster-search { width: 240px; } .d-id { grid-template-columns: 1fr; align-items: start; } .d-facts { gap: 24px; } }
@media (max-width: 799px) { .d-grid { grid-template-columns: 1fr; row-gap: 28px; } .d-main { padding-right: 0; } .d-side { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 22px; } .rhead, .rrow { grid-template-columns: minmax(140px, 1.4fr) minmax(110px, 1.2fr) minmax(120px, 1.2fr); } .rhead span:nth-child(3), .rrow .rnext { display: none; } .st-grid { grid-template-columns: 1fr 1fr; } .roster-head { flex-direction: column; align-items: stretch; } .roster-search { width: 100%; } .mod { grid-template-columns: 96px minmax(0,1fr) auto; } .mods.big .mod { grid-template-columns: 96px minmax(0,1fr); } .mods.big .ms, .mods.big .ma { grid-column: 2; margin-left: 0; } }

/* ============================================================================
   24. CLIENTS + DOSSIER — READABLE AT SIX FEET  (Step 11A.2)
   Larger operational type, ivory for anything the coach acts on, muted only
   for true metadata. Three surfaces: the workspace, one dominant surface for
   current coaching, one contextual surface for what needs the coach. Champagne
   is the colour of interaction and orientation.
   ========================================================================== */
.roster, .dossier { --panel-2: #151412; --line-soft: rgba(243,237,226,0.06); }
.roster .lbl, .dossier .lbl { font-size: var(--t-13); font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.roster .lbl-row .r, .dossier .lbl-row .r { font-size: var(--t-13); color: var(--ink-4); }
.roster .tlink, .dossier .tlink { font-size: var(--t-13); color: var(--gold-champagne); font-weight: 500; } .roster .tlink:hover, .dossier .tlink:hover { color: var(--gold-pale); }
.golink { display: inline-block; border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-13); font-weight: 500; color: var(--gold-champagne); cursor: pointer; text-decoration: none; transition: color var(--dur-1) var(--ease); }
.golink:hover { color: var(--gold-pale); }
.roster .d-quiet, .dossier .d-quiet { font-size: var(--t-14); color: var(--ink-4); }

/* roster */
.roster { max-width: 1200px; }
.roster-head { margin-bottom: 20px; }
.roster-head h1 { font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; }
.roster-head .sub { font-size: var(--t-14); color: var(--ink-3); margin-top: 5px; }
.roster-search { width: 360px; height: 38px; padding: 0 14px; font-size: var(--t-15); background: var(--panel); border-color: var(--line-strong); }
.roster-search:focus { border-color: var(--gold-line); background: var(--surface-1); }
.roster-filters { gap: 8px 14px; margin-bottom: 16px; }
.fseg button { font-size: var(--t-14); padding: 6px 11px; color: var(--ink-3); }
.fseg button[aria-pressed="true"] { color: var(--ink-1); background: var(--surface-2); }
.fsep { width: 1px; height: 18px; background: var(--line-strong); }
.ftoggle { font-size: var(--t-14); padding: 6px 12px; color: var(--ink-3); border-color: var(--line-strong); }
.fsort { font-size: var(--t-13); color: var(--ink-4); gap: 4px; } .fsort > span { margin-right: 4px; }
.rlist { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 6px 8px 8px; }
.rlist-sub { margin-top: 18px; padding-top: 12px; }
.rgroup { font-size: var(--t-13); color: var(--ink-3); font-weight: 600; padding: 2px 14px 8px; }
.rhead, .rrow { grid-template-columns: minmax(240px, 2fr) minmax(150px, 1.1fr) minmax(190px, 1.5fr) minmax(120px, 0.8fr); column-gap: 20px; padding: 0 14px; }
.rhead { font-size: var(--t-13); color: var(--ink-4); padding: 8px 14px 10px; }
.rrow { padding: 13px 14px; margin: 0; border-radius: var(--r-1); align-items: center; }
.rrow + .rrow::before { left: 14px; right: 14px; background: var(--line-soft); }
.rrow:hover { background: var(--surface-2); }
.rrow:focus-visible { outline: 1px solid var(--gold-line); outline-offset: -1px; }
.rrow.was { background: var(--gold-wash); } .rrow.was::before, .rrow.was + .rrow::before { opacity: 0; }
.rrow .rname { gap: 3px; }
.rrow .nm { font-size: 17px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; line-height: 1.25; }
.rrow .ds { font-size: var(--t-14); color: var(--ink-3); }
.rrow .rnext, .rrow .rout { display: flex; flex-direction: column; gap: 2px; }
.rrow .rnext .t, .rrow .rout .t { font-size: var(--t-15); font-weight: 500; color: var(--ink-1); line-height: 1.3; }
.rrow .rnext .sub, .rrow .rout .sub { font-size: var(--t-13); color: var(--ink-4); }
.rrow .rout .t.hot { color: var(--attn); } .rrow .rout .t.warm { color: var(--gold-champagne); }
.rrow .rlast { font-size: var(--t-13); color: var(--ink-4); }
.rrow .faint { font-size: var(--t-14); }
.rrow.quiet .nm { color: var(--ink-2); font-weight: 500; }
.rempty { font-size: var(--t-15); color: var(--ink-3); }

/* dossier header: one identity region */
.dossier { max-width: 1200px; }
.d-back { font-size: var(--t-13); }
.d-id { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 32px; margin-top: 2px; }
.d-id h1 { font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; }
.d-line { font-size: var(--t-15); color: var(--ink-2); margin-top: 6px; } .d-line .sep { color: var(--ink-5); padding: 0 8px; }
.d-facts { gap: 0; background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 12px 4px; }
.d-facts div { padding: 0 20px; gap: 4px; max-width: 30ch; }
.d-facts div + div { border-left: 1px solid var(--line-soft); }
.d-facts dt { font-size: var(--t-12); color: var(--ink-4); } .d-facts dd { font-size: var(--t-14); color: var(--ink-1); line-height: 1.35; }
.d-facts dd.strong { font-size: var(--t-15); font-weight: 600; } .d-facts dd .sub { display: block; font-size: var(--t-13); font-weight: 400; color: var(--ink-3); margin-top: 1px; }
.d-facts dd.faint { color: var(--ink-4); font-weight: 400; }
.d-tabs { margin-top: 22px; gap: 6px; }
.d-tabs a { font-size: var(--t-14); padding: 9px 12px 11px; color: var(--ink-3); border-bottom-width: 2px; }
.d-tabs a:hover { color: var(--ink-1); }
.d-tabs a[aria-current="page"] { color: var(--gold-champagne); border-bottom-color: var(--gold-champagne); }
.d-state { font-size: var(--t-14); }
.d-body { margin-top: 26px; }

/* overview: the dominant surface and the action surface */
.d-grid { grid-template-columns: minmax(0, 62fr) minmax(320px, 38fr); column-gap: 28px; }
.d-main { padding-right: 0; }
.d-side { padding-left: 0; border-left: 0; gap: 28px; }
.cc { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 18px 22px 20px; }
.cc .lbl { color: var(--gold-champagne); }
.cc .lbl-row { margin-bottom: 4px; }
.mods { margin: 0 -12px; }
.mod { grid-template-columns: 104px minmax(0, 1fr) auto; column-gap: 18px; padding: 14px 12px; margin: 0; align-items: start; }
.mod + .mod::before { left: 12px; right: 12px; background: var(--line-soft); }
a.mod:hover { background: var(--surface-2); }
.mod .mt { font-size: var(--t-13); font-weight: 600; color: var(--ink-3); padding-top: 3px; }
.mod .mb { gap: 3px; }
.mod .ttl { font-size: 17px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; line-height: 1.25; }
.mod .ln { font-size: var(--t-15); color: var(--ink-2); } .mod .ln .rest { color: var(--ink-3); }
.mod .tod { font-size: var(--t-14); color: var(--ink-3); margin-top: 2px; }
.mod .me { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 3px; }
.mod .ms { font-size: var(--t-13); color: var(--ink-4); } .mod .ms.draft { color: var(--gold-champagne); font-weight: 500; } .mod .ms.none { color: var(--ink-5); }
.mod .go { font-size: var(--t-13); font-weight: 500; color: var(--ink-4); transition: color var(--dur-1) var(--ease); white-space: nowrap; }
a.mod:hover .go, a.mod:hover .ttl { color: var(--gold-champagne); }
.ciline { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: var(--t-14); color: var(--ink-2); }
.ciline .k { font-size: var(--t-13); font-weight: 600; color: var(--ink-3); min-width: 88px; } .ciline b { font-weight: 600; color: var(--ink-1); }
.studio { margin-top: 0; }
.studio.compact { margin-top: 22px; padding: 0 22px; }
.studio .lbl { color: var(--gold-champagne); }
.studio .lbl-row .r { color: var(--ink-3); font-size: var(--t-14); }
.st-grid { gap: 16px 24px; margin-top: 12px; }
.st-grid .k { font-size: var(--t-13); color: var(--ink-4); } .st-grid .v { font-size: var(--t-15); color: var(--ink-1); } .st-grid .v.strong { font-size: 17px; font-weight: 600; }
.studio .note { font-size: 17px; color: var(--ink-1); line-height: 1.5; margin-top: 14px; max-width: 46ch; }
.studio .quiet { font-size: var(--t-13); }

.actzone { background: var(--panel-2); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 16px 18px 18px; }
.actzone > .lbl { display: block; color: var(--gold-champagne); }
.needs { margin: 6px -8px 0; }
.need { padding: 10px 8px; column-gap: 14px; }
.need + .need { border-top: 1px solid var(--line-soft); border-radius: 0; }
.need:hover { background: var(--surface-2); }
.need .t { font-size: var(--t-15); font-weight: 600; color: var(--ink-1); line-height: 1.3; } .need .t.hot { color: var(--attn); }
.need .s { font-size: var(--t-13); color: var(--ink-3); margin-top: 2px; }
.need .act { font-size: var(--t-13); font-weight: 500; color: var(--gold-champagne); white-space: nowrap; } .need:hover .act { color: var(--gold-pale); }
.actzone .calm { margin-top: 8px; font-size: var(--t-14); color: var(--ink-3); }
.nx { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.nx > .lbl { display: block; color: var(--ink-3); }
.nx .when { margin-top: 6px; font-size: 20px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.nx .what { font-size: var(--t-14); color: var(--ink-2); margin-top: 3px; }
.nx .golink { margin-top: 10px; }
.d-side section .lbl-row { margin-bottom: 0; }
.d-side .note { font-size: 17px; color: var(--ink-1); line-height: 1.5; margin-top: 10px; max-width: 36ch; }
.d-side .noteby { font-size: var(--t-13); margin-top: 6px; }
.mem { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.mi { display: flex; flex-direction: column; gap: 1px; }
.mi .h { font-size: var(--t-14); font-weight: 500; color: var(--ink-1); line-height: 1.35; }
.mi .t { font-size: var(--t-13); color: var(--ink-3); }
.recent { gap: 8px; margin-top: 10px; }
.rc { grid-template-columns: 52px minmax(0, 1fr); font-size: var(--t-14); }
.rc .w { font-size: var(--t-13); color: var(--ink-4); padding-top: 1px; } .rc .b { color: var(--ink-2); } .rc .b .s { color: var(--ink-4); }

@media (max-width: 1279px) { .rhead, .rrow { grid-template-columns: minmax(200px, 2fr) minmax(130px, 1.1fr) minmax(170px, 1.5fr) minmax(100px, 0.7fr); } .d-grid { grid-template-columns: minmax(0, 58fr) minmax(300px, 42fr); column-gap: 22px; } .mod { grid-template-columns: 92px minmax(0, 1fr) auto; } }
@media (max-width: 1023px) { .rhead, .rrow { grid-template-columns: minmax(180px, 2fr) minmax(120px, 1.1fr) minmax(150px, 1.4fr); } .d-id { grid-template-columns: 1fr; } .d-facts { justify-self: start; } .roster-search { width: 280px; } .cc { padding: 16px 18px 18px; } .mod { grid-template-columns: 84px minmax(0, 1fr) auto; column-gap: 14px; } }
@media (max-width: 799px) { .rhead, .rrow { grid-template-columns: minmax(150px, 1.6fr) minmax(140px, 1.3fr); } .rhead span:nth-child(2), .rrow .rnext { display: none; } .d-grid { grid-template-columns: 1fr; } .d-side { border-top: 0; padding-top: 0; } .d-facts { flex-wrap: wrap; } .d-facts div + div { border-left: 0; } }

/* ============================================================================
   25. HOME — THE EVOLVED SYSTEM  (Step 11A.3)
   Same architecture, same logic. Readable operational type, ivory for what
   the coach acts on, purposeful surfaces: the current window (the day's
   operational focus), the priority area (who needs me) and the next-up
   briefing (who I am seeing). Champagne is orientation and interaction.
   ========================================================================== */
.daygrid { --panel-2: #151412; --line-soft: rgba(243,237,226,0.06); }
.daygrid .lbl { font-size: var(--t-13); font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.daygrid .lbl-row .r { font-size: var(--t-13); color: var(--ink-4); } .daygrid .lbl-row a.r { color: var(--gold-champagne); font-weight: 500; } .daygrid .lbl-row a.r:hover { color: var(--gold-pale); }
.daygrid > section { padding-right: 0; }
.daygrid > .column { padding-left: 0; border-left: 0; gap: 24px; }
.daygrid { column-gap: 32px; grid-template-columns: minmax(0, 64fr) minmax(340px, 36fr); }

/* the date */
.dayhead { margin-bottom: 18px; }
.dayhead h1 { font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; }
.dayhead p { font-size: var(--t-15); color: var(--ink-3); margin-top: 5px; }

/* earlier recedes */
.earlier { font-size: var(--t-13); color: var(--ink-4); margin-bottom: 16px; }
.earlier .lbl { font-size: var(--t-13); color: var(--ink-4); }

/* the current window — the operational focus */
.cw { padding: 16px 22px 18px; }
.cw .lbl-row .lbl { color: var(--gold-champagne); }
.cw .lbl-row .r { font-size: var(--t-13); color: var(--ink-4); }
.cw .range { margin-top: 8px; font-size: var(--t-14); color: var(--ink-3); }
.cw .lead { margin-top: 2px; font-size: 24px; line-height: 1.2; }
.cw .lead span { color: var(--ink-2); }
.cw .best { margin-top: 14px; font-size: var(--t-13); font-weight: 600; color: var(--ink-3); }
.strip { margin-top: 4px; }
.strip button { padding: 8px 10px; }
.strip button + button::before { background: var(--line-soft); }
.strip button:hover { background: var(--surface-2); }
.strip .who { font-size: var(--t-15); font-weight: 600; color: var(--ink-1); }
.strip .do { font-size: var(--t-14); color: var(--ink-3); }
.strip .act { font-size: var(--t-13); font-weight: 500; color: var(--gold-champagne); } .strip button:hover .act { color: var(--gold-pale); }
.cw .quiet { font-size: var(--t-14); color: var(--ink-3); margin-top: 10px; }
.cw .quiet a { color: var(--gold-champagne); font-weight: 500; } .cw .quiet a:hover { color: var(--gold-pale); }

/* next — unmistakably the next thing */
.next-ev { margin: 24px 0 0; padding: 12px 20px 14px; border-radius: var(--r-1); grid-template-columns: 76px minmax(0, 1fr); transition: background var(--dur-1) var(--ease); }
.next-ev:hover { background: var(--surface-1); }
.next-ev .lbl { margin-bottom: 10px; }
.next-ev .t { font-size: var(--t-15); font-weight: 600; color: var(--ink-1); padding-top: 4px; }
.next-ev .who { font-size: 20px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; }
.next-ev .what { font-size: var(--t-15); color: var(--ink-2); margin-top: 3px; }
.next-ev .ctx { font-size: var(--t-14); color: var(--ink-3); margin-top: 5px; }

/* later — readable, secondary */
.later { margin-top: 22px; padding: 0 20px; gap: 11px; }
.later .lbl { color: var(--ink-4); }
.later-ev { grid-template-columns: 76px minmax(0, 1fr) auto; }
.later-ev .t { font-size: var(--t-14); color: var(--ink-4); }
.later-ev .who { font-size: var(--t-15); font-weight: 500; color: var(--ink-2); }
.later-ev .what { font-size: var(--t-14); color: var(--ink-4); }
.later-ev .end { font-size: var(--t-13); }
.later .note { font-size: var(--t-14); color: var(--ink-3); padding-left: 88px; }
.sheet-empty { font-size: var(--t-15); color: var(--ink-3); }

/* priority — one operational area */
.pz { background: var(--panel-2); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 16px 18px 12px; }
.pz .lbl { color: var(--gold-champagne); }
.prio { margin: 8px -8px 0; gap: 0; }
.prio button { grid-template-columns: 20px minmax(0, 1fr) auto; padding: 10px 8px; border-radius: var(--r-1); }
.prio button + button { border-top: 1px solid var(--line-soft); border-radius: 0; }
.prio button:hover { background: var(--surface-2); }
.prio .n { font-size: var(--t-13); color: var(--ink-5); }
.prio .who { font-size: var(--t-15); font-weight: 600; color: var(--ink-1); line-height: 1.3; }
.prio .p1 .who { font-size: 16px; }
.prio .why, .prio .p3 .why { font-size: var(--t-14); color: var(--ink-3); margin-top: 2px; }
.prio .why .hot { color: var(--attn); font-weight: 500; }
.prio .act { font-size: var(--t-13); font-weight: 500; color: var(--gold-champagne); white-space: nowrap; } .prio button:hover .act { color: var(--gold-pale); }
.prio-empty { margin-top: 8px; font-size: var(--t-14); color: var(--ink-3); }

/* next up — the home-level preview of the client system */
.nu { padding: 16px 18px 16px; }
.nu .lbl { color: var(--gold-champagne); }
.nu .lbl-row .r { font-size: var(--t-14); font-weight: 600; color: var(--ink-1); }
.nu .who { font-size: 18px; margin-top: 8px; }
.nu .line { font-size: var(--t-14); color: var(--ink-2); margin-top: 3px; }
.nu .facts { margin-top: 12px; gap: 6px; }
.nu .facts div { font-size: var(--t-14); grid-template-columns: 96px 1fr; }
.nu .facts .k { font-size: var(--t-13); color: var(--ink-4); } .nu .facts .v { color: var(--ink-1); }
.nu .note { font-size: 16px; color: var(--ink-1); line-height: 1.5; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.nu .noteby { font-size: var(--t-13); }
.nu .foot { margin-top: 12px; }
.nu .empty { font-size: var(--t-14); color: var(--ink-3); }

/* the business line */
.bizline { font-size: var(--t-14); color: var(--ink-3); }
.bizline a { color: var(--ink-3); } .bizline a b { color: var(--ink-1); font-weight: 600; }

@media (max-width: 1199px) { .daygrid { grid-template-columns: minmax(0, 60fr) minmax(300px, 40fr); column-gap: 24px; } }
@media (max-width: 1023px) { .daygrid { grid-template-columns: minmax(0, 56fr) minmax(280px, 44fr); column-gap: 20px; } .next-ev, .later { padding-left: 12px; padding-right: 12px; } .cw { padding: 14px 18px 16px; } .later .note { padding-left: 80px; } }
@media (max-width: 719px) { .daygrid { grid-template-columns: 1fr; } .daygrid > .column { border-top: 0; padding-top: 0; } }   /* the ≤1023px rule above is later in the cascade than the ≤719px single-column rule in section 22, so it must be restated here */

/* ---- TODAY fed by the Business Calendar (V1a, 18 Sep 2026). The same ledger, evolved: time anchors the left edge and
   carries the only identity (coaching emerald, consultation cobalt; content / online / admin / meeting neutral; an
   external event quiet). One action or one state word at the row's end. No cards, no rainbow. */
.dayhead .calstate { font-size: var(--t-13); color: var(--attn); white-space: nowrap; }
.allday { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: var(--t-13); color: var(--ink-3); margin: -6px 0 16px; }
.allday .lbl { margin-right: 2px; color: var(--ink-4); }
.allday button { border: 0; background: none; padding: 0; font: inherit; color: var(--ink-2); cursor: pointer; }
.allday button:hover { color: var(--ink-1); } .allday button.k-external { color: var(--ink-4); } .allday button.cancelled { text-decoration: line-through; color: var(--ink-5); }
.k-coaching .t { color: var(--sem-pos); } .k-consult .t { color: var(--sem-info); }
.earlier .k-coaching .t, .earlier .k-consult .t { opacity: 0.75; }
.later-ev.k-external .who { color: var(--ink-4); font-weight: 400; } .later-ev.k-external .what { color: var(--ink-5); } .later-ev.k-external .t { color: var(--ink-5); }
.next-ev, .later-ev { grid-template-columns: 88px minmax(0, 1fr) auto; } .next-ev { grid-template-columns: 88px minmax(0, 1fr); } .next-ev .t, .later-ev .t { white-space: nowrap; } .later .note { padding-left: 100px; }   /* a work block's range ('12–1:30 pm') stays on one line */
.later-ev .end .act, .next-ev .act, .cw .act { border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-13); font-weight: 500; color: var(--gold-champagne); white-space: nowrap; cursor: pointer; text-decoration: none; }
.later-ev .end .act:hover, .next-ev .act:hover, .cw .act:hover { color: var(--gold-pale); }
.later-ev .end .act.quiet { color: var(--ink-4); font-weight: 400; } .later-ev .end .act.quiet:hover { color: var(--ink-2); }
.later-ev .end .st { font-size: var(--t-13); color: var(--ink-4); } .later-ev .end .st.ok { color: var(--ok); } .later-ev .end .st.attn { color: var(--attn); }
.next-ev .nx-act { margin-top: 8px; } .next-ev .nx-act .act { font-size: var(--t-14); }
.next-ev .nx-act .st { font-size: var(--t-13); color: var(--ink-4); } .next-ev .nx-act .st.attn { color: var(--attn); }
.cw .cw-act { margin-top: 9px; } .cw .cw-act .act { font-size: var(--t-14); }
.cl-sheet .cl-types { flex-wrap: wrap; } .cl-sheet .cl-sug { color: var(--ink-2); } .cl-sheet [data-gnotes], .drawer [data-gnotes] { white-space: pre-line; color: var(--ink-3); }
.cl-sheet .attn, .drawer [data-ses-err] { color: var(--attn); }

/* ============================================================================
   26. TRAINING  (Step 11B)
   A dense editing workspace on the same system: one dominant surface for the
   session being edited, one contextual surface for performance, inline cells
   that look like text until touched, champagne for every action.
   ========================================================================== */
.tr { max-width: 1240px; --panel-2: #151412; --line-soft: rgba(243,237,226,0.06); }
.tr .lbl { font-size: var(--t-13); font-weight: 600; color: var(--ink-3); }
.tr .lbl-row .r, .tr .sec-head .r { font-size: var(--t-13); color: var(--ink-4); }
.tr .tlink { font-size: var(--t-13); color: var(--gold-champagne); font-weight: 500; } .tr .tlink:hover { color: var(--gold-pale); }
.tr .tlink.danger { color: var(--ink-4); } .tr .tlink.danger:hover { color: var(--attn); }
.tr .d-back .sep { color: var(--ink-5); padding: 0 6px; }
.tr-empty { max-width: 46ch; } .tr-empty h1 { font-size: 26px; font-weight: 600; color: var(--ink-1); } .tr-empty p { font-size: var(--t-15); color: var(--ink-3); margin: 8px 0 18px; }

/* cells: inline editing that reads as text until it is touched */
.cell { background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--ink-1); font: inherit; font-size: var(--t-15); padding: 4px 8px; margin: -4px -8px; width: calc(100% + 16px); min-width: 0; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.cell::placeholder { color: var(--ink-5); }
.cell:hover { background: var(--surface-1); }
.cell:focus { outline: 0; background: var(--surface-1); border-color: var(--gold-line); }
.cell.num { font-variant-numeric: tabular-nums; }
.cell.sel { appearance: none; padding-right: 22px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23857d71' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 6px center; }
.cell.ta { min-height: 64px; resize: vertical; line-height: 1.45; font-size: var(--t-14); }
.cell.title { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink-1); }
.cell.h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; }
.cell.short { width: 64px; }

/* header */
.tr-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: end; margin-top: 4px; }
.tr-head h1 { margin-top: 4px; }
.tr-line { font-size: var(--t-15); color: var(--ink-2); margin-top: 6px; } .tr-line b { font-weight: 600; color: var(--ink-1); } .tr-line .sep { color: var(--ink-5); padding: 0 8px; }
.tr-state { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.pubstate { font-size: var(--t-13); color: var(--ink-4); display: flex; gap: 12px; align-items: baseline; }
.pubstate .draft { color: var(--gold-champagne); font-weight: 600; } .pubstate .upto { color: var(--ok); }
.tr-actions { display: flex; gap: 8px; align-items: center; }

/* the week */
.wk { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; align-items: stretch; }
.ws { display: flex; flex-direction: column; gap: 2px; min-width: 128px; padding: 10px 12px; border: 1px solid var(--panel-line); border-radius: var(--r-1); background: var(--panel); text-align: left; cursor: pointer; color: inherit; font: inherit; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.ws:hover { background: var(--surface-2); }
.ws[aria-selected="true"] { border-color: var(--gold-line); background: var(--gold-wash); }
.ws .wd { font-size: var(--t-12); font-weight: 600; color: var(--ink-4); } .ws[aria-selected="true"] .wd { color: var(--gold-champagne); }
.ws .wn { font-size: var(--t-15); font-weight: 600; color: var(--ink-1); } .ws.rest .wn { color: var(--ink-4); font-weight: 500; }
.ws .wm { font-size: var(--t-12); color: var(--ink-4); }
.ws.rest { background: transparent; border-style: dashed; }
.wadd { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 8px; }

/* editor + performance */
.tr-grid { display: grid; grid-template-columns: minmax(0, 66fr) minmax(300px, 34fr); column-gap: 28px; margin-top: 18px; align-items: start; }
.sed { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 18px 22px 20px; }
.sed-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sed-head h2 { margin-top: 4px; }
.sed-sub { font-size: var(--t-14); color: var(--ink-3); margin-top: 6px; } .sed-sub .cell { width: auto; font-size: var(--t-14); color: var(--ink-3); }
.sed-tools { display: flex; gap: 14px; white-space: nowrap; padding-top: 4px; }
.sec { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.wline { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 3px 0; }
.wline .cell { font-size: var(--t-14); }
.wline .x { border: 0; background: none; color: var(--ink-5); font-size: 16px; cursor: pointer; padding: 0 6px; } .wline .x:hover { color: var(--attn); }
.wline.add .cell { color: var(--ink-3); }
.exhead, .exr { display: grid; grid-template-columns: 30px minmax(0, 1fr) 64px 100px 88px 96px; column-gap: 12px; align-items: center; }
.exhead { font-size: var(--t-12); color: var(--ink-4); padding: 0 0 6px; }
.ex { border-radius: var(--r-1); margin: 0 -10px; padding: 0 10px; transition: background var(--dur-1) var(--ease); }
.ex + .ex { border-top: 1px solid var(--line-soft); }
.ex.open { background: var(--surface-1); margin-top: 4px; margin-bottom: 4px; border-top: 0; padding-bottom: 12px; }
.ex.open + .ex { border-top: 0; }
.exr { padding: 8px 0; }
.grip .i { font-size: var(--t-12); color: var(--ink-5); font-variant-numeric: tabular-nums; }
.grip .g { font-size: var(--t-12); font-weight: 600; color: var(--gold-champagne); }
.exn { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.exn .cell.name { font-weight: 600; }
.exs { font-size: var(--t-12); color: var(--ink-4); padding: 0 0 0 0; }
.ext { text-align: right; }
.exlast { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: var(--t-13); color: var(--ink-4); padding: 0 0 8px 42px; }
.exlast b { font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.exlast .when { color: var(--ink-5); }
.ex.open .exlast { padding: 6px 0 4px 0; }
.exadv { padding: 2px 0 0 42px; }
.agrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin-top: 6px; }
.cf { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cf > span { font-size: var(--t-12); color: var(--ink-4); } .cf > span em { font-style: normal; color: var(--ink-5); }
.cf .cell { font-size: var(--t-14); }
.cf.wide { grid-column: span 2; }
.cf.addf .cell { color: var(--ink-4); }
.perset { margin-top: 14px; }
.ps-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ps-grid { display: grid; grid-template-columns: 64px 110px 80px 80px; gap: 6px 14px; align-items: center; font-size: var(--t-12); color: var(--ink-4); }
.ps-grid .psn { font-size: var(--t-13); color: var(--ink-3); }
.ps-grid .cell { font-size: var(--t-14); }
.exfoot { display: flex; gap: 14px; margin-top: 14px; }
.exadd { padding: 8px 0 0 42px; } .exadd .cell { font-size: var(--t-14); color: var(--ink-3); }
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
.ngrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.sec.notes summary { list-style: none; display: flex; justify-content: space-between; align-items: baseline; cursor: pointer; } .sec.notes summary::-webkit-details-marker { display: none; }

/* performance side */
.tperf { background: var(--panel-2); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 16px 18px 16px; }
.tperf .lbl.sub { display: block; margin-top: 18px; color: var(--ink-3); }
.pf-last { margin-top: 10px; }
.pf-t { font-size: var(--t-15); font-weight: 600; color: var(--ink-1); } .pf-t span { font-weight: 400; color: var(--ink-3); }
.pf-s { font-size: var(--t-13); color: var(--ink-3); margin-top: 3px; }
.pf-note { font-size: var(--t-14); color: var(--ink-2); margin-top: 8px; line-height: 1.45; }
.pf-ex { margin-top: 4px; }
.pfe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.pfe:first-of-type { border-top: 0; }
.pfe .nm { font-size: var(--t-14); font-weight: 500; color: var(--ink-1); }
.pfe .sets { font-size: var(--t-13); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pfe .vol { font-size: var(--t-12); color: var(--ink-4); }
.pf-pain { margin-top: 4px; }
.pp { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 10px; font-size: var(--t-13); color: var(--ink-2); padding: 6px 0; }
.pp .sev { font-weight: 600; text-transform: capitalize; } .pp .sev.warm { color: var(--gold-champagne); }
.pp .when { color: var(--ink-4); }
.pf-contract { margin-top: 18px; font-size: var(--t-12); color: var(--ink-5); line-height: 1.5; }

/* drawers: publish, preview, versions */
.pub { display: flex; flex-direction: column; gap: 14px; }
.pub-sn { font-size: var(--t-14); font-weight: 600; color: var(--ink-1); }
.pub-k { font-size: var(--t-12); font-weight: 600; color: var(--ink-4); margin-top: 6px; }
.pub ul { list-style: none; margin: 2px 0 0; padding: 0; }
.pub li { font-size: var(--t-14); color: var(--ink-2); padding: 2px 0 2px 12px; position: relative; } .pub li::before { content: ""; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-champagne); }
.pv .pv-note { font-size: var(--t-15); color: var(--ink-2); margin-bottom: 14px; }
.pv .pv-h { font-size: var(--t-13); font-weight: 600; color: var(--gold-champagne); margin: 14px 0 6px; }
.pv-wu { margin: 0; padding-left: 16px; font-size: var(--t-14); color: var(--ink-2); }
.pv-ex { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.pv-n { font-size: 17px; font-weight: 600; color: var(--ink-1); } .pv-n .g { color: var(--gold-champagne); margin-right: 8px; }
.pv-p { font-size: var(--t-14); color: var(--ink-2); margin-top: 2px; }
.pv-c { font-size: var(--t-13); color: var(--ink-3); margin-top: 3px; }
.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.pv-grid > div { display: flex; flex-direction: column; gap: 4px; }
.pv-k { font-size: var(--t-12); color: var(--ink-4); }
.pv-grid span { font-size: var(--t-14); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pv-in { display: grid; grid-template-columns: 44px 1fr 1fr; gap: 6px; align-items: center; } .pv-in i { font-style: normal; font-size: var(--t-12); color: var(--ink-4); } .pv-in b { display: block; height: 28px; border: 1px solid var(--line-strong); border-radius: 4px; font-weight: 400; font-size: var(--t-12); color: var(--ink-5); padding: 5px 8px; }
.vlist { display: flex; flex-direction: column; }
.vrow { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-soft); } .vrow:first-child { border-top: 0; }
.vt { font-size: var(--t-15); font-weight: 600; color: var(--ink-1); } .vcur { font-size: var(--t-12); font-weight: 500; color: var(--gold-champagne); margin-left: 8px; }
.vs { font-size: var(--t-13); color: var(--ink-3); margin-top: 2px; }
.vch { margin: 6px 0 0; padding-left: 14px; font-size: var(--t-13); color: var(--ink-3); }

@media (max-width: 1279px) { .tr-grid { grid-template-columns: minmax(0, 62fr) minmax(280px, 38fr); column-gap: 20px; } .exhead, .exr { grid-template-columns: 26px minmax(0, 1fr) 56px 90px 80px 84px; column-gap: 10px; } .agrid, .cgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1023px) { .tr-head { grid-template-columns: 1fr; } .tr-state { align-items: flex-start; } .tr-grid { grid-template-columns: 1fr; row-gap: 20px; } .sed { padding: 16px 18px 18px; } .exhead, .exr { grid-template-columns: 24px minmax(0, 1fr) 52px 84px 72px 76px; } .ngrid { grid-template-columns: 1fr; } }

/* ============================================================================
   27. TRAINING — THE USABILITY PASS  (Step 11B.1)
   Each exercise is a programming object: name, then what matters about the
   prescription, then last time; sets × reps and rest stay aligned and editable
   in place. Context on the side is quieter than the editor.
   ========================================================================== */
.exhead, .exr { grid-template-columns: 28px minmax(0, 1fr) 168px 92px 28px; column-gap: 14px; align-items: start; }
.exhead { padding-left: 0; }
.exr { padding: 10px 0; }
.ex + .ex { border-top: 1px solid var(--line-soft); }
.exn { gap: 4px; padding-top: 1px; }
.exn .cell.name { font-size: 16px; font-weight: 600; }
.exs { display: flex; flex-wrap: wrap; gap: 4px 12px; border: 0; background: none; padding: 0; margin: 0; text-align: left; cursor: pointer; font: inherit; }
.exs span { font-size: var(--t-13); color: var(--ink-3); font-weight: 500; } .exs:hover span { color: var(--gold-champagne); }
.exlast { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: var(--t-13); padding: 0; }
.exlast .k { font-size: var(--t-12); font-weight: 600; color: var(--ink-4); letter-spacing: 0.02em; }
.exlast b { font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.exlast .when { color: var(--ink-5); }
.exlast.big { padding: 4px 0 8px; } .exlast.big b { font-size: var(--t-14); color: var(--ink-1); }
.expain { font-size: var(--t-13); color: var(--ink-3); } .expain .sev { font-weight: 600; text-transform: capitalize; } .expain .sev.hot { color: var(--attn); } .expain .sev.warm { color: var(--gold-champagne); }
.rx { display: grid; grid-template-columns: 44px 14px minmax(0, 1fr); align-items: center; column-gap: 4px; }
.rx .x { color: var(--ink-5); font-size: var(--t-13); text-align: center; }
.rx .cell, .cell.rest { font-size: var(--t-15); font-weight: 500; font-variant-numeric: tabular-nums; }
.rx .cell.num { text-align: center; }
.exp { border: 0; background: none; color: var(--ink-4); font-size: 15px; cursor: pointer; padding: 6px 4px; border-radius: 4px; transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.exp:hover, .exp[aria-expanded="true"] { color: var(--gold-champagne); background: var(--surface-2); }
.ex.open { padding-bottom: 14px; }
.exadv { padding-left: 42px; }
.exadv .agrid { margin-top: 6px; }
.cell.f { background: var(--surface-1); border-color: var(--line); margin: 0; width: 100%; padding: 6px 9px; font-size: var(--t-14); }
.cell.f:hover { border-color: var(--line-strong); } .cell.f:focus { border-color: var(--gold-line); background: var(--surface-2); }
.exfoot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.exops { display: flex; gap: 14px; } .exops .tlink { color: var(--ink-4); } .exops .tlink:hover { color: var(--gold-champagne); } .exops .tlink.danger:hover { color: var(--attn); }
.addd { position: relative; }
.addmenu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 300px; padding: 6px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-2); }
.addmenu button { border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: var(--r-1); font: inherit; font-size: var(--t-13); color: var(--ink-2); cursor: pointer; } .addmenu button:hover, .addmenu button:focus-visible { background: var(--surface-2); color: var(--ink-1); outline: 0; }
.exadd { padding: 10px 0 0 42px; position: relative; }
.exsearch { position: relative; }
.exsearch .cell.f { font-size: var(--t-15); padding: 8px 12px; }
.exmenu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; max-height: 320px; overflow: auto; padding: 6px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-2); }
.exm-g { font-size: var(--t-12); font-weight: 600; color: var(--ink-4); padding: 8px 10px 4px; }
.exm-i { display: flex; justify-content: space-between; gap: 12px; width: 100%; border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: var(--r-1); font: inherit; font-size: var(--t-14); color: var(--ink-1); cursor: pointer; }
.exm-i:hover, .exm-i.sel { background: var(--gold-wash); color: var(--gold-champagne); }
.exm-s { font-size: var(--t-12); color: var(--ink-4); }
.wline { grid-template-columns: minmax(0, 1fr) auto; }
.wops { display: flex; gap: 2px; align-items: center; opacity: 0; transition: opacity var(--dur-1) var(--ease); } .wline:hover .wops, .wline:focus-within .wops { opacity: 1; }
.wops .tlink { color: var(--ink-4); padding: 0 4px; } .wops .tlink:hover { color: var(--gold-champagne); }
.cgrid .cell { background: var(--surface-1); border-color: var(--line); margin: 0; width: 100%; padding: 6px 9px; font-size: var(--t-14); }
.cgrid .cell:hover { border-color: var(--line-strong); } .cgrid .cell:focus { border-color: var(--gold-line); background: var(--surface-2); }
.ngrid .cf > span b { font-weight: 600; } .note-client > span b { color: var(--gold-champagne); } .note-coach > span b { color: var(--ink-2); }
.note-client .cell.ta { border-color: var(--gold-line); background: var(--surface-1); margin: 0; width: 100%; }
.note-coach .cell.ta { border-color: var(--line); background: var(--surface-1); margin: 0; width: 100%; }
/* the context panel steps back */
.tperf { background: transparent; border: 0; padding: 4px 0 0 6px; }
.tperf .lbl { color: var(--ink-3); }
.pf-t { font-size: var(--t-14); }
.pf-note { font-size: var(--t-14); color: var(--ink-2); }
.pp .pnote { display: block; color: var(--ink-3); }
.pfe { padding: 6px 0; } .pfe .vol { font-size: var(--t-13); color: var(--ink-3); } .pfe .vol.up { color: var(--ok); } .pfe .vol.down { color: var(--ink-3); }
.pf-contract { color: var(--ink-5); }
@media (max-width: 1279px) { .exhead, .exr { grid-template-columns: 24px minmax(0, 1fr) 150px 80px 24px; column-gap: 10px; } .rx { grid-template-columns: 40px 12px minmax(0, 1fr); } }
@media (max-width: 1023px) { .exhead, .exr { grid-template-columns: 22px minmax(0, 1fr) 140px 72px 22px; } }

/* ============================================================================
   28. NUTRITION  (Step 11C)
   Targets on one quiet surface, the meal plan on the dominant surface with
   meals as groups (not cards), food rows that read like a good ledger, and
   the client-visibility switches on the contextual side.
   ========================================================================== */
.nu-ws { max-width: 1240px; --panel-2: #151412; --line-soft: rgba(243,237,226,0.06); }
.nu-ws .lbl { font-size: var(--t-13); font-weight: 600; color: var(--ink-3); }
.nu-ws .lbl-row .r { font-size: var(--t-13); color: var(--ink-4); }
.nu-ws .tlink { font-size: var(--t-13); color: var(--gold-champagne); font-weight: 500; } .nu-ws .tlink:hover { color: var(--gold-pale); } .nu-ws .tlink.danger { color: var(--ink-4); } .nu-ws .tlink.danger:hover { color: var(--attn); }
.nu-ws .d-back .sep { color: var(--ink-5); padding: 0 6px; }
.nu-empty { max-width: 52ch; } .nu-empty h1 { font-size: 26px; font-weight: 600; color: var(--ink-1); margin-top: 8px; } .nu-empty p { font-size: var(--t-15); color: var(--ink-3); margin: 8px 0 18px; line-height: 1.5; } .nu-empty a { color: var(--gold-champagne); }
.cell.sel.phase { width: auto; font-size: var(--t-15); color: var(--ink-2); padding-right: 22px; }
.nu-grid { display: grid; grid-template-columns: minmax(0, 68fr) minmax(280px, 32fr); column-gap: 28px; margin-top: 20px; align-items: start; }
.targets { background: var(--panel-2); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 14px 20px 16px; }
.targets .lbl { color: var(--gold-champagne); }
.tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin-top: 8px; }
.tg { display: flex; flex-direction: column; gap: 2px; }
.tg .k { font-size: var(--t-13); color: var(--ink-4); }
.tg .v { display: flex; align-items: baseline; gap: 6px; }
.tg .v .cell { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; width: 96px; margin: 0; padding: 2px 6px; }
.tg .v .u { font-size: var(--t-13); color: var(--ink-4); }
.tg .d { font-size: var(--t-13); color: var(--ink-3); font-variant-numeric: tabular-nums; } .tg .d.off { color: var(--gold-champagne); }
.nsed { margin-top: 20px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 16px 22px 18px; }
.nsed .lbl-row .r { font-variant-numeric: tabular-nums; }
.nsed.tracking .nt { font-size: var(--t-15); color: var(--ink-2); margin-top: 8px; line-height: 1.5; }
.meal { padding: 16px 0 6px; border-top: 1px solid var(--line-soft); margin-top: 12px; }
.meal:first-of-type { border-top: 0; margin-top: 4px; }
.mhead { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 16px; align-items: baseline; }
.mname { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.mname .cell.h2 { width: auto; min-width: 120px; max-width: 320px; font-size: 18px; }
.mname .cell.time { width: 120px; font-size: var(--t-13); color: var(--ink-4); }
.mtot { font-size: var(--t-14); font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mtools { display: flex; gap: 12px; align-items: baseline; white-space: nowrap; opacity: 0.55; transition: opacity var(--dur-1) var(--ease); } .meal:hover .mtools, .meal:focus-within .mtools { opacity: 1; }
.mtools .cell.sel.mini { width: auto; font-size: var(--t-12); color: var(--ink-4); padding: 2px 20px 2px 6px; margin: 0; }
.fhead, .frow { display: grid; grid-template-columns: minmax(0, 1fr) 150px 58px 46px 46px 46px 28px; column-gap: 12px; align-items: center; }
.fhead { font-size: var(--t-12); color: var(--ink-4); padding: 10px 0 4px; }
.fhead span:nth-child(n+3) { text-align: right; }
.frow { padding: 6px 0; border-top: 1px solid var(--line-soft); position: relative; }
.frow:hover { background: var(--surface-1); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: var(--r-1); border-top-color: transparent; }
.frow:hover + .frow { border-top-color: transparent; }
.fn { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fn .cell.name { font-size: var(--t-15); font-weight: 500; }
.fs { font-size: var(--t-12); color: var(--ink-4); padding-left: 0; } .fs .sw { color: var(--gold-champagne); } .fs .lock { color: var(--ink-3); }
.fa { display: flex; align-items: baseline; gap: 4px; }
.fa .cell.num { width: 68px; font-size: var(--t-15); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; margin: 0; padding: 4px 6px; }
.fa .cell.sel.unit { width: auto; font-size: var(--t-13); color: var(--ink-4); padding: 4px 20px 4px 4px; margin: 0; }
.fk, .fm { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--t-14); }
.fk { color: var(--ink-1); font-weight: 500; } .fm { color: var(--ink-3); }
.fops { position: relative; text-align: right; }
.fmenu-ops { left: auto; right: 0; grid-template-columns: 1fr; min-width: 190px; } .fmenu-ops .danger:hover { color: var(--attn); }
.fadd { padding: 8px 0 2px; position: relative; }
.fsearch { position: relative; } .fsearch .cell.f { font-size: var(--t-15); padding: 8px 12px; }
.fmenu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; max-height: 340px; overflow: auto; padding: 6px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-2); }
.fmenu.inline { position: static; margin-top: 6px; box-shadow: none; background: var(--surface-1); border-color: var(--line); max-height: 260px; } .fmenu.inline:empty { display: none; }
.fmenu .exm-i { flex-direction: column; align-items: flex-start; gap: 1px; }
.mnotes { margin-top: 12px; }
.madd { padding-top: 14px; }
.nu-side { background: var(--panel-2); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 14px 18px 16px; }
.nu-side .lbl { color: var(--gold-champagne); }
.cfg-g { margin-top: 14px; } .cfg-gn { display: block; font-size: var(--t-12); font-weight: 600; color: var(--ink-4); margin-bottom: 4px; }
.cfg { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; font-size: var(--t-14); color: var(--ink-2); }
.nu-side .d-quiet { margin-top: 16px; font-size: var(--t-13); }
.swaps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.swopt { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface-1); color: inherit; font: inherit; cursor: pointer; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.swopt:hover { border-color: var(--gold-line); background: var(--surface-2); } .swopt.off { cursor: default; opacity: 0.6; }
.swopt .sm { font-size: var(--t-12); font-weight: 600; color: var(--gold-champagne); } .swopt .sg { font-size: 17px; font-weight: 600; color: var(--ink-1); } .swopt .sn { font-size: var(--t-13); color: var(--ink-2); font-variant-numeric: tabular-nums; } .swopt .sd { font-size: var(--t-12); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.aprow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-14); } .aprow:first-child { border-top: 0; }
.aprow .an { color: var(--ink-1); font-weight: 500; } .aprow .aa { display: flex; align-items: baseline; gap: 4px; } .aprow .aa .input { width: 72px; text-align: right; padding: 4px 8px; } .aprow .aa .u { font-size: var(--t-13); color: var(--ink-4); } .aprow .ad { font-size: var(--t-12); color: var(--ink-4); font-variant-numeric: tabular-nums; }
@media (max-width: 1279px) { .nu-grid { grid-template-columns: minmax(0, 64fr) minmax(260px, 36fr); column-gap: 20px; } .fhead, .frow { grid-template-columns: minmax(0, 1fr) 140px 52px 42px 42px 42px 26px; column-gap: 10px; } }
@media (max-width: 1023px) { .nu-grid { grid-template-columns: 1fr; row-gap: 20px; } .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .swaps { grid-template-columns: 1fr; } .mhead { grid-template-columns: minmax(0, 1fr) auto; } .mtools { grid-column: span 2; } }

/* ============================================================================
   29. STANDARDS + DAILY LOG + ADHERENCE  (Step 11D)
   Standards as a short ledger with the truth's source under each one; the
   Daily Log setup as two columns (asked / already known); adherence as a
   quiet week grid on the contextual side. Red only for real gaps.
   ========================================================================== */
.st-ws { max-width: 1240px; --panel-2: #151412; --line-soft: rgba(243,237,226,0.06); }
.st-ws .lbl { font-size: var(--t-13); font-weight: 600; color: var(--ink-3); }
.st-ws .lbl-row .r { font-size: var(--t-13); color: var(--ink-4); }
.st-ws .tlink { font-size: var(--t-13); color: var(--gold-champagne); font-weight: 500; } .st-ws .tlink:hover { color: var(--gold-pale); } .st-ws .tlink.danger { color: var(--ink-4); } .st-ws .tlink.danger:hover { color: var(--attn); } .st-ws .tlink:disabled { color: var(--ink-5); cursor: default; }
.st-ws .d-back .sep { color: var(--ink-5); padding: 0 6px; }
.sd-grid { display: grid; grid-template-columns: minmax(0, 60fr) minmax(320px, 40fr); column-gap: 28px; margin-top: 20px; align-items: start; }
.ssed { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 16px 22px 18px; }
.ssed .lbl-row .lbl { color: var(--gold-champagne); }
.stds { margin-top: 4px; }
.std { display: grid; grid-template-columns: minmax(0, 1fr) 190px 28px; column-gap: 14px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line-soft); position: relative; }
.std:first-child { border-top: 0; }
.std.off { opacity: 0.5; }
.sn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sn .cell.name { font-size: var(--t-15); font-weight: 600; }
.ss { font-size: var(--t-12); color: var(--ink-4); } .ss.auto, .ss.health { color: var(--ok); } .ss.client { color: var(--ink-4); }
.snote { font-family: var(--f-voice); font-style: italic; font-size: var(--t-14); color: var(--ink-2); margin-top: 2px; }
.stg { display: flex; align-items: baseline; gap: 6px; padding-top: 2px; }
.stg .cell.num { width: 84px; font-size: 17px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; margin: 0; padding: 3px 6px; }
.stg .u { font-size: var(--t-13); color: var(--ink-4); } .stg .tick { font-size: var(--t-14); color: var(--ink-3); }
.sops { position: relative; text-align: right; padding-top: 2px; }
.qs { display: flex; flex-direction: column; margin-top: 4px; }
.q { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto; column-gap: 14px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.q:first-child { border-top: 0; } .q.off { opacity: 0.5; }
.q .cell.name { font-size: var(--t-15); font-weight: 500; }
.q .cell.sel.mini { width: auto; font-size: var(--t-13); color: var(--ink-3); padding: 3px 20px 3px 6px; margin: 0; }
.qops { display: flex; gap: 12px; opacity: 0.55; } .q:hover .qops { opacity: 1; }
.qmenu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 280px; padding: 6px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-2); }
.qmenu button { border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: var(--r-1); font: inherit; font-size: var(--t-13); color: var(--ink-2); cursor: pointer; } .qmenu button:hover { background: var(--surface-2); color: var(--ink-1); }
.st-ws .fadd { padding: 10px 0 0; position: relative; }
.dlog { margin-top: 20px; background: var(--panel-2); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 14px 20px 16px; }
.dlog .lbl { color: var(--gold-champagne); }
.dl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin-top: 10px; }
.dl-h { display: block; font-size: var(--t-12); font-weight: 600; color: var(--ink-4); margin-bottom: 6px; }
.dl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.dl-list li { font-size: var(--t-14); color: var(--ink-1); padding-left: 14px; position: relative; }
.dl-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-champagne); }
.dl-list.known li::before { background: var(--ok); }
.dl-set { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
.dl-set .cfg { padding: 5px 0; } .dl-set .cell.f.short { width: 80px; text-align: center; } .dl-set .cell.f.sel { width: auto; padding-right: 26px; }
.dl-set .d-quiet { grid-column: span 2; font-size: var(--t-13); margin-top: 6px; }
.st-side { background: var(--panel-2); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 14px 18px 16px; }
.st-side .lbl { color: var(--gold-champagne); }
.wknav { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-13); color: var(--ink-3); } .wknav .tlink { font-size: 16px; line-height: 1; padding: 0 2px; }
.ad-sum { margin-top: 8px; font-size: var(--t-14); color: var(--ink-3); } .ad-sum b { font-size: 24px; font-weight: 600; color: var(--ink-1); margin-right: 8px; letter-spacing: -0.01em; }
.adgrid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--cols), 30px); gap: 6px 4px; align-items: center; margin-top: 12px; }
.adh { display: flex; flex-direction: column; align-items: center; gap: 0; border: 0; background: none; color: var(--ink-4); font: inherit; cursor: pointer; padding: 2px 0; border-radius: var(--r-1); }
.adh span { font-size: 11px; color: var(--ink-5); letter-spacing: 0; } .adh b { font-size: var(--t-13); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.adh.today b { color: var(--gold-champagne); } .adh.future { opacity: 0.45; cursor: default; } .adh:not(:disabled):hover b { color: var(--ink-1); }
.adr { font-size: var(--t-13); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adr.day { color: var(--ink-4); padding-top: 4px; }
.adc { width: 30px; height: 22px; border: 0; border-radius: 4px; background: var(--surface-2); cursor: pointer; padding: 0; font: inherit; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: transform var(--dur-1) var(--ease); }
.adc:not(:disabled):hover { transform: translateY(-1px); outline: 1px solid var(--gold-line); }
.adc.ok { background: rgba(125,169,124,0.42); } .adc.miss { background: rgba(192,86,75,0.42); } .adc.na { background: var(--surface-2); } .adc.none { background: transparent; border: 1px dashed var(--line-strong); } .adc.f { background: transparent; cursor: default; }
.adc.pct { background: transparent; border: 0; color: var(--ink-2); font-weight: 600; margin-top: 4px; } .adc.pct.none { color: var(--attn); font-weight: 500; }
.adwk, .adq { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; }
.adw { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; font-size: var(--t-13); color: var(--ink-2); align-items: baseline; }
.adw b { font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; } .adw b.ok { color: var(--ok); } .adw b.hot { color: var(--attn); } .adw b.warm { color: var(--gold-champagne); }
.sigs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; }
.sig { font-size: var(--t-14); color: var(--ink-2); padding-left: 12px; position: relative; } .sig::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4); }
.sig.hot { color: var(--attn); } .sig.hot::before { background: var(--attn); } .sig.warm::before { background: var(--gold-champagne); } .sig.ok::before { background: var(--ok); }
.dd .lbl { display: block; margin-bottom: 6px; }
.dd-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-14); } .dd-row:first-of-type { border-top: 0; }
.dd-n { color: var(--ink-2); } .dd-v { color: var(--ink-1); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .dd-v.ok { color: var(--ok); } .dd-v.hot { color: var(--attn); } .dd-v.warm { color: var(--gold-champagne); } .dd-v.faint { color: var(--ink-4); font-weight: 400; }
.dd-note { font-family: var(--f-voice); font-style: italic; font-size: 16px; color: var(--ink-1); line-height: 1.5; }
.pv-known { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pv-k2 { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 8px; font-size: var(--t-14); color: var(--ink-2); align-items: baseline; } .pv-k2 .ok { color: var(--ok); }
.pv-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-15); color: var(--ink-1); }
.pv-ask em { display: block; font-style: normal; font-size: var(--t-13); color: var(--ink-4); margin-top: 2px; }
.pv-box { display: inline-flex; flex-direction: column; align-items: flex-end; min-width: 92px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 4px; font-weight: 400; font-size: var(--t-13); color: var(--ink-4); } .pv-box i { font-style: normal; font-size: 11px; color: var(--ink-5); }
.pv-tick { display: inline-block; width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 0; } .pv-scale { font-weight: 500; font-size: var(--t-13); color: var(--ink-3); letter-spacing: 0.12em; }
@media (max-width: 1279px) { .sd-grid { grid-template-columns: minmax(0, 56fr) minmax(300px, 44fr); column-gap: 20px; } .std { grid-template-columns: minmax(0, 1fr) 160px 26px; } }
@media (max-width: 1023px) { .sd-grid { grid-template-columns: 1fr; row-gap: 20px; } .dl-cols, .dl-set { grid-template-columns: 1fr; } .dl-set .d-quiet { grid-column: auto; } }

/* ============================================================================
   30. ADD-ON PLANS  (Step 11E)
   One document surface for any protocol: sections as groups, items as quiet
   rows that read collapsed (name · the facts · the cue) and open in place.
   The type gives a small monochrome mark and vocabulary, never a colour.
   ========================================================================== */
.ap-ws { max-width: 1240px; --panel-2: #151412; --line-soft: rgba(243,237,226,0.06); }
.ap-ws .lbl { font-size: var(--t-13); font-weight: 600; color: var(--ink-3); }
.ap-ws .lbl-row .r { font-size: var(--t-13); color: var(--ink-4); }
.ap-ws .tlink { font-size: var(--t-13); color: var(--gold-champagne); font-weight: 500; } .ap-ws .tlink:hover { color: var(--gold-pale); } .ap-ws .tlink.danger { color: var(--ink-4); } .ap-ws .tlink.danger:hover { color: var(--attn); }
.ap-ws .d-back .sep { color: var(--ink-5); padding: 0 6px; }
.ti { width: 15px; height: 15px; flex: none; }
.ap-type { display: inline-flex; align-items: center; gap: 7px; } .ap-type .ti { color: var(--ink-4); }
.ap-guid { margin-top: 12px; max-width: 84ch; }
.ap-notice { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: var(--t-14); color: var(--ink-2); } .ap-notice .risk { margin-top: 5px; } .ap-notice a { color: var(--gold-champagne); }
.ap-grid { display: grid; grid-template-columns: minmax(0, 66fr) minmax(300px, 34fr); column-gap: 28px; margin-top: 20px; align-items: start; }
.apdoc { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 18px 22px 20px; }
.apintro { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.cf-l { font-size: var(--t-12); color: var(--ink-4); } .cf-l b { font-weight: 600; color: var(--gold-champagne); } .cf-l em { font-style: normal; color: var(--ink-5); }
.apintro .cell.ta { margin: 0; width: 100%; border-color: var(--gold-line); background: var(--surface-1); min-height: 50px; font-size: var(--t-15); }
.apsec { padding: 18px 0 6px; border-top: 1px solid var(--line-soft); } .apintro + .apsec { border-top: 0; }
.apsh { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
.apsn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apsn .cell.h2 { font-size: 18px; } .apsn .cell.sub { font-size: var(--t-14); color: var(--ink-3); }
.apso { position: relative; }
.apis { margin-top: 6px; }
.api { border-radius: var(--r-1); margin: 0 -10px; padding: 0 10px; transition: background var(--dur-1) var(--ease); }
.api + .api { border-top: 1px solid var(--line-soft); }
.api.open { background: var(--surface-1); margin-top: 4px; margin-bottom: 4px; padding-bottom: 14px; }
.api.open + .api { border-top: 0; }
.apir { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 60px; column-gap: 10px; align-items: start; padding: 9px 0; }
.apim { padding-top: 8px; } .apim .box { display: block; width: 12px; height: 12px; border: 1px solid var(--line-strong); border-radius: 3px; } .apim .val { display: block; width: 12px; height: 12px; border: 1px solid var(--line-strong); border-radius: 50%; }
.apin { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.apin .cell.name { font-size: 16px; font-weight: 600; }
.apisum { border: 0; background: none; padding: 0; margin: 0; text-align: left; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.apisum > span { font-size: var(--t-14); color: var(--ink-3); font-weight: 500; line-height: 1.4; } .apisum:hover > span { color: var(--gold-champagne); }
.apisum .cue { font-family: var(--f-voice); font-style: italic; font-weight: 400; font-size: var(--t-15); color: var(--ink-2); } .apisum:hover .cue { color: var(--ink-1); }
.apisum.faint > span { color: var(--ink-5); font-weight: 400; }
.apinote { font-size: var(--t-12); color: var(--ink-4); }
.apik { font-size: var(--t-12); color: var(--ink-5); padding-top: 9px; white-space: nowrap; }
.apio { position: relative; display: flex; justify-content: flex-end; }
.apix { padding: 2px 0 0 26px; } .apix .agrid { margin-top: 4px; }
.aptrack { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-12); color: var(--ink-4); } .aptrack .cell.sel.mini { width: auto; font-size: var(--t-13); color: var(--ink-3); padding: 3px 22px 3px 6px; margin: 0; }
.apix .exfoot { margin-top: 12px; } .apix .exops { align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.apiadd { padding: 8px 0 4px 26px; position: relative; }
.ap-kinds { grid-template-columns: 1fr 1fr; min-width: 300px; } .apk-more { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px; }
.apempty { padding: 6px 0 2px; }
.apsadd { padding: 16px 0 4px; position: relative; border-top: 1px solid var(--line-soft); margin-top: 8px; }
.ap-secmenu { grid-template-columns: 1fr; min-width: 240px; }
.ap-more { left: auto; right: 0; min-width: 170px; }
.ap-side { background: var(--panel-2); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 14px 18px 16px; }
.ap-side .lbl { color: var(--gold-champagne); display: block; } .ap-side .lbl.sub { margin-top: 18px; }
.apf { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 4px 0; font-size: var(--t-13); color: var(--ink-4); }
.apf .cell.f { padding: 5px 8px; font-size: var(--t-14); color-scheme: dark; } .apf .faint { font-size: var(--t-12); }
.ap-s { font-size: var(--t-14); color: var(--ink-2); margin-top: 8px; line-height: 1.5; } .ap-s b { font-weight: 600; color: var(--ink-1); } .ap-s .warm { color: var(--gold-champagne); } .ap-s.faint { color: var(--ink-4); } .ap-s a { color: var(--gold-champagne); }
.ap-ex { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.apx { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-14); color: var(--ink-2); } .apx b { font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; } .apx b.ok { color: var(--ok); }
/* the block inside Coaching */
.ap-block .mt { display: inline-flex; align-items: center; gap: 7px; } .ap-block .mt .ti { color: var(--ink-4); }
.ap-block .mod { cursor: pointer; } .ap-block .mod:hover { background: var(--surface-2); } .ap-block .mod:hover .ttl { color: var(--gold-champagne); } .ap-block .mod.quiet { opacity: 0.6; }
.ap-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 7; width: 340px; padding: 6px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 1px; text-align: left; }
.ap-menu button { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; text-align: left; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: var(--r-1); font: inherit; color: var(--ink-1); cursor: pointer; }
.ap-menu button:hover, .ap-menu button:focus-visible { background: var(--gold-wash); outline: 0; } .ap-menu button:hover b { color: var(--gold-champagne); }
.ap-menu button .ti { color: var(--ink-4); margin-top: 3px; } .ap-menu button > span { display: flex; flex-direction: column; gap: 1px; } .ap-menu b { font-size: var(--t-14); font-weight: 600; } .ap-menu i { font-style: normal; font-size: var(--t-12); color: var(--ink-4); }
.ap-menu button.off { opacity: 0.5; }
.apmv { display: flex; justify-content: space-between; align-items: baseline; width: 100%; border: 0; background: none; text-align: left; padding: 10px 8px; border-top: 1px solid var(--line-soft); font: inherit; color: var(--ink-1); cursor: pointer; border-radius: var(--r-1); } .apmv:first-child { border-top: 0; } .apmv:hover { background: var(--surface-2); } .apmv b { font-weight: 600; } .apmv span { font-size: var(--t-13); color: var(--ink-4); }
/* client preview */
.apv .pv-type { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-12); font-weight: 600; color: var(--ink-4); } .apv .pv-type .ti { width: 14px; height: 14px; }
.apv .pv-title { font-size: 22px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink-1); margin-top: 4px; line-height: 1.2; }
.apv .pv-meta { font-size: var(--t-13); color: var(--ink-4); margin-top: 4px; }
.apv .pv-note { margin-top: 12px; }
.apv .pv-sub { font-size: var(--t-13); color: var(--ink-4); margin: -4px 0 6px; }
.apv-it { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 12px; } .apv-it.tk { grid-template-columns: auto minmax(0, 1fr); }
.apv .pv-tick { width: 22px; height: 22px; margin-top: 2px; } .apv .pv-box { min-width: 0; padding: 4px 8px; margin-top: 2px; }
.apv .pv-cue { font-family: var(--f-voice); font-style: italic; font-size: var(--t-15); color: var(--ink-2); margin-top: 4px; }
.pv-link { color: var(--gold-champagne); font-weight: 500; }
/* entitlement picks */
.ap-picks { display: flex; flex-direction: column; gap: 6px; } .ap-picks .chk { display: flex; align-items: center; gap: 8px; font-size: var(--t-14); color: var(--ink-1); font-weight: 400; }
@media (max-width: 1279px) { .ap-grid { grid-template-columns: minmax(0, 62fr) minmax(280px, 38fr); column-gap: 20px; } }
@media (max-width: 1023px) { .ap-grid { grid-template-columns: 1fr; row-gap: 20px; } .apix, .apiadd { padding-left: 0; } .ap-menu { width: min(340px, 90vw); } }
/* services (Admin): the service relationship as rows, not cards */
.svcs { display: flex; flex-direction: column; margin-top: 4px; }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; column-gap: 16px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-14); } .svc:first-child { border-top: 0; }
.svc .sn { color: var(--ink-1); font-weight: 500; } .svc .sk { font-size: var(--t-12); color: var(--ink-4); margin-left: 8px; font-weight: 400; }
.svc .sl { color: var(--ink-3); } .svc .so .tlink { color: var(--ink-4); } .svc .so .tlink:hover { color: var(--attn); }

/* ============================================================================
   31. PLAN LIBRARY  (Step 11F)
   The roster's grammar for templates: rows, not tiles. The editor is the
   module editor in library mode: same surface, client context removed, the
   library panel where the client context used to sit.
   ========================================================================== */
.lib { max-width: 1240px; }
.lib .lbl { font-size: var(--t-13); font-weight: 600; color: var(--ink-3); } .lib .lbl-row .r { font-size: var(--t-13); color: var(--ink-4); }
.lib .fsort .cell.sel.mini { width: auto; font-size: var(--t-13); color: var(--ink-2); padding: 4px 22px 4px 8px; margin: 0; background-color: var(--surface-1); border-color: var(--line); border-radius: var(--r-1); }
.lib-newmenu { left: auto; right: 0; grid-template-columns: 1fr; min-width: 240px; } .lib-newmenu .apk-more { grid-template-columns: 1fr 1fr; }
.lib-recent, .lib-group { margin-top: 22px; }
.lib-rows { display: flex; flex-direction: column; margin-top: 4px; }
.lib-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px 32px; column-gap: 16px; align-items: center; padding: 11px 12px; margin: 0 -12px; border-top: 1px solid var(--line-soft); border-radius: var(--r-1); transition: background var(--dur-1) var(--ease); }
.lib-row:first-child { border-top: 0; } .lib-row:hover { background: var(--surface-1); } .lib-row.quiet { opacity: 0.6; }
.lib-row .ln { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lib-row .nm { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--ink-1); text-decoration: none; letter-spacing: -0.005em; } .lib-row .nm:hover { color: var(--gold-champagne); } .lib-row .nm .ti { color: var(--ink-4); }
.lib-row .ds { font-size: var(--t-13); color: var(--ink-3); } .lib-row .tags { margin-left: 8px; } .lib-row .tags i { font-style: normal; color: var(--ink-4); } .lib-row .tags i + i::before { content: " · "; color: var(--ink-5); }
.lib-row .lu { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-13); color: var(--ink-3); text-align: right; } .lib-row .lu i { font-style: normal; font-size: var(--t-12); color: var(--ink-5); }
.lib-row .lo { position: relative; text-align: right; }
.lib .rempty { font-size: var(--t-15); color: var(--ink-3); margin-top: 28px; max-width: 52ch; line-height: 1.5; }
/* editor in library mode */
.lib-mode [data-use-template], .lib-mode [data-save-library], .lib-mode .note-coach:not(.lf), .lib-mode .sec.notes, .lib-mode [data-item-note], .lib-mode .apinote, .lib-mode .ap-guid, .lib-mode .ap-notice, .lib-mode .ciline { display: none !important; }
.lib-mode .ngrid { grid-template-columns: 1fr; }
.lib-side { background: var(--panel-2); border: 1px solid var(--panel-line); border-radius: var(--r-2); padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.lib-side .lbl { color: var(--gold-champagne); }
.lib-side .lf { display: flex; flex-direction: column; gap: 4px; } .lib-side .lf > span { font-size: var(--t-12); color: var(--ink-4); } .lib-side .lf > span b { font-weight: 600; color: var(--ink-2); } .lib-side .lf > span em { font-style: normal; color: var(--ink-5); }
.lib-side .cell.f { margin: 0; width: 100%; } .lib-side .cell.ta { margin: 0; width: 100%; min-height: 56px; background: var(--surface-1); border-color: var(--line); }
.lib-side .d-quiet { margin-top: 4px; }
.nu-side .lib-side { margin: -14px -18px 16px; border-radius: var(--r-2) var(--r-2) 0 0; border-width: 0 0 1px; }
/* drawers: assign, use a template */
.lib-clients { display: flex; flex-direction: column; max-height: 420px; overflow: auto; }
.lib-client { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; border: 0; background: none; text-align: left; padding: 9px 8px; border-top: 1px solid var(--line-soft); font: inherit; color: var(--ink-1); cursor: pointer; border-radius: var(--r-1); } .lib-client:first-child { border-top: 0; } .lib-client:hover { background: var(--surface-2); }
.lib-client b { font-weight: 600; } .lib-client span { font-size: var(--t-13); color: var(--ink-4); } .lib-client.off { opacity: 0.6; }
.lib-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-soft); } .lib-pick:first-of-type { border-top: 0; } .lib-pick.off { opacity: 0.65; }
.lib-pick .pn { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lib-pick .pn b { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-15); font-weight: 600; color: var(--ink-1); } .lib-pick .pn b .ti { color: var(--ink-4); } .lib-pick .pn span { font-size: var(--t-13); color: var(--ink-3); } .lib-pick .hot { color: var(--attn); }
.lib-pick .pa { display: flex; gap: 12px; align-items: center; white-space: nowrap; } .lib-pick .tlink { font-size: var(--t-13); color: var(--gold-champagne); }
@media (max-width: 1023px) { .lib-row { grid-template-columns: minmax(0, 1fr) 32px; } .lib-row .lu { display: none; } }

/* saving state in the rail; history-load notice in editor headers */
.save-state { display: block; font-size: 12px; color: var(--ink-4); margin-bottom: 6px; } .save-state.err { color: var(--attn); cursor: pointer; }
.hist-blocked { font-size: var(--t-13); color: var(--attn); max-width: 34ch; text-align: right; }

/* ── 32 · Release control: the running-release chip and the maintenance bar ─── */
/* Quiet by default: the chip shows the running release; it turns to an attention
   state only when writes are stopped (maintenance) or this tab is stale. */
.release-chip { display: block; font-size: 11px; letter-spacing: .02em; color: var(--ink-5); margin-top: 4px; font-variant-numeric: tabular-nums; }
.release-chip.attn { color: var(--attn); font-weight: 600; }
/* A restrained bar above the workspace, not a modal: editing is paused, not broken. */
.maint-bar { position: sticky; top: 0; z-index: 40; background: var(--attn-wash); border-bottom: 1px solid var(--attn-line); }
.maint-bar .mb-in { display: flex; align-items: flex-start; gap: var(--s-3); max-width: 1100px; margin: 0 auto; padding: var(--s-3) var(--s-5); }
.maint-bar .mb-t { font-weight: 600; color: var(--ink-1); font-size: var(--t-14, 14px); }
.maint-bar .mb-d { color: var(--ink-3); font-size: var(--t-13, 13px); margin-top: 2px; max-width: 72ch; }
.maint-bar .btn { margin-left: auto; white-space: nowrap; }

/* ============================================================================
   34. PROGRESS  (Step 12A — the dossier's Progress tab; views/progress.js)
   One verdict in words, then the evidence: editorial numbers, one chart, dense
   tables, a thin adherence ledger and a timeline. No cards, no rings.
   ========================================================================== */
.pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pg-verdict { font-size: var(--t-22); line-height: var(--lh-22); letter-spacing: var(--tr-22); font-weight: 600; color: var(--ink-1); margin-top: 4px; }
.pg-verdict.attention { color: var(--attn); } .pg-verdict.insufficient { color: var(--ink-3); }
.pg-why { margin-top: 6px; font-size: var(--t-14); color: var(--ink-3); max-width: 78ch; }
.pg-grid { margin-top: 28px; }
.pg-sec + .pg-sec { margin-top: 32px; }
.pg-num { display: flex; align-items: baseline; gap: 18px; margin-top: 10px; flex-wrap: wrap; }
.pg-num .v { font-family: var(--f-display); font-size: var(--t-48); line-height: 0.96; color: var(--ink-1); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.pg-num .v .unit { font-size: 0.42em; color: var(--ink-4); margin-left: 6px; letter-spacing: 0.04em; font-family: var(--f-ui); font-weight: 500; }
.pg-num .d { display: flex; flex-direction: column; gap: 3px; font-size: var(--t-13); color: var(--ink-3); }
.pg-line { margin-top: 8px; font-size: var(--t-14); color: var(--ink-3); }
.pg-comps { margin-top: 14px; display: flex; flex-direction: column; }
.pg-comp { display: grid; grid-template-columns: 78px minmax(0, 1fr) 46px; column-gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(243,237,226,0.05); }
.pg-comp:first-child { border-top: 0; }
.pg-comp .k { font-size: var(--t-13); color: var(--ink-2); }
.pg-comp .bar { display: block; height: 3px; background: rgba(243,237,226,0.08); border-radius: 2px; overflow: hidden; }
.pg-comp .bar i { display: block; height: 100%; background: var(--gold); }
.pg-comp .v { font-size: var(--t-13); color: var(--ink-1); text-align: right; font-variant-numeric: tabular-nums; } .pg-comp .v.faint { color: var(--ink-5); font-size: var(--t-12); }
.pg-comp .why { grid-column: 1 / -1; font-size: var(--t-12); color: var(--ink-4); margin-top: 2px; }
.pg-comp.na .k { color: var(--ink-4); }
.pg-empty { margin-top: 24px; max-width: 64ch; display: flex; flex-direction: column; gap: 10px; }
.pg-load { margin-top: 16px; }
.tl .tl-e { display: flex; gap: 8px; align-items: baseline; font-size: var(--t-13); color: var(--ink-2); flex-wrap: wrap; } .tl .tl-e b { font-weight: 500; color: var(--ink-1); } .tl .tl-e .sub { color: var(--ink-4); }
.tl .tl-e.pr b, .tl .tl-e.milestone b { color: var(--gold-champagne); }
/* dossier tab strip on phones: five tabs do not fit 390px; the strip scrolls inside itself (page never scrolls sideways) */
@media (max-width: 639px) {
  .d-tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .d-tabs::-webkit-scrollbar { display: none; }
  .d-tabs a { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 799px) { .pg-grid { grid-template-columns: 1fr; } .pg-grid .d-side { padding-left: 0; border-left: 0; margin-top: 32px; } .pg-num .v { font-size: 36px; } }

/* ============================================================================
   35. HQ VISUAL LANGUAGE V2 — proving ground: the client dossier
   Black / charcoal is the foundation and the frame. Warm ivory and stone carry
   content. Gold is the signature: active navigation, the primary action, one
   emphasis. A restrained semantic palette carries STATE so gold no longer has
   to: cobalt = check-ins and informational data, emerald = positive progress,
   clay = attention / decline / a missed target, plum = recovery and wellness,
   muted neutral = unavailable or not applicable (never the same as negative).
   Two families only: Fraunces (editorial: names, status, large figures, the
   coach's voice) and Inter (interface: navigation, forms, tables, dense data).
   Bebas stays on the wordmark alone. Scoped to .v2 so no locked screen moves.
   ========================================================================== */
:root {
  --f-editorial: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-interface: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* semantic state */
  --sem-info: #7ea2ea;  --sem-info-deep: #4f77cf; --sem-info-wash: rgba(126,162,234,0.10); --sem-info-line: rgba(126,162,234,0.34);
  --sem-pos:  #62b38f;  --sem-pos-deep:  #3f8f6b; --sem-pos-wash:  rgba(98,179,143,0.10);  --sem-pos-line:  rgba(98,179,143,0.34);
  --sem-attn: #d98868;  --sem-attn-deep: #b8654a; --sem-attn-wash: rgba(217,136,104,0.11); --sem-attn-line: rgba(217,136,104,0.36);
  --sem-well: #ad95dc;  --sem-well-deep: #8a6fc0; --sem-well-wash: rgba(173,149,220,0.10); --sem-well-line: rgba(173,149,220,0.32);
  --sem-na:   #6e675d;  --sem-na-wash:   rgba(243,237,226,0.035);
  --sem-alarm: #d8574a; --sem-alarm-deep: #b3463b; --sem-alarm-wash: rgba(216,87,74,0.10); --sem-alarm-line: rgba(216,87,74,0.36);
  /* warm neutrals: stone = elevated section, ivory tint = subtle tinted section */
  --stone-1: #171512; --stone-2: #1d1a17; --stone-line: rgba(243,237,226,0.085);
  --ivory-tint: rgba(243,237,226,0.035); --ivory-tint-strong: rgba(243,237,226,0.06);
}
/* ---- type roles (V2) ---- */
.v2 { font-family: var(--f-interface); font-optical-sizing: auto; }
.v2 .e-name { font-family: var(--f-editorial); font-weight: 500; font-size: 34px; line-height: 1.05; letter-spacing: -0.015em; color: var(--ink-1); font-variation-settings: "SOFT" 0, "WONK" 0; }
.v2 .e-h { font-family: var(--f-editorial); font-weight: 500; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink-1); font-variation-settings: "SOFT" 0, "WONK" 0; }
.v2 .e-h.lg { font-size: 28px; }
.v2 .e-status { font-family: var(--f-editorial); font-weight: 500; font-size: 34px; line-height: 1.05; letter-spacing: -0.015em; color: var(--ink-1); font-variation-settings: "SOFT" 0, "WONK" 0; }
.v2 .e-status.progressing { color: var(--sem-pos); } .v2 .e-status.attention { color: var(--sem-attn); } .v2 .e-status.holding { color: var(--ink-1); } .v2 .e-status.insufficient { color: var(--ink-3); }
.v2 .e-voice { font-family: var(--f-editorial); font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.45; color: var(--ink-1); font-variation-settings: "SOFT" 20, "WONK" 0; }
.v2 .e-goal { font-family: var(--f-editorial); font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-1); font-variation-settings: "SOFT" 0, "WONK" 0; }
.v2 .micro { font-family: var(--f-interface); font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); }
.v2 .micro b { color: var(--ink-3); font-weight: 600; }
.v2 .micro.info { color: var(--sem-info); } .v2 .micro.gold { color: var(--gold-champagne); }
/* numerals: typographic hierarchy, never a card */
.v2 .n { font-family: var(--f-editorial); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.02em; color: var(--ink-1); line-height: 1; font-variation-settings: "SOFT" 0, "WONK" 0; }
.v2 .n-xl { font-size: 56px; } .v2 .n-lg { font-size: 40px; } .v2 .n-md { font-size: 28px; } .v2 .n-sm { font-size: 20px; }
.v2 .n .u { font-family: var(--f-interface); font-weight: 500; font-size: 13px; letter-spacing: 0; color: var(--ink-4); margin-left: 6px; }
.v2 .n.pos { color: var(--sem-pos); } .v2 .n.attn { color: var(--sem-attn); } .v2 .n.info { color: var(--sem-info); } .v2 .n.well { color: var(--sem-well); } .v2 .n.na { color: var(--sem-na); }
.v2 .sem-pos { color: var(--sem-pos); } .v2 .sem-attn { color: var(--sem-attn); } .v2 .sem-info { color: var(--sem-info); } .v2 .sem-well { color: var(--sem-well); } .v2 .sem-na { color: var(--sem-na); }
/* surfaces: PRIMARY PAGE (nothing), ELEVATED (stone), TINTED (ivory or semantic wash), DRILL-DOWN (row), SELECTED */
.v2 .sf-elevated { background: var(--stone-1); border: 1px solid var(--stone-line); border-radius: var(--r-2); }
.v2 .sf-tint { background: var(--ivory-tint); border-radius: var(--r-2); }
.v2 .sf-tint.info { background: var(--sem-info-wash); } .v2 .sf-tint.pos { background: var(--sem-pos-wash); } .v2 .sf-tint.attn { background: var(--sem-attn-wash); } .v2 .sf-tint.well { background: var(--sem-well-wash); }
.v2 .drill { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--f-interface); font-size: var(--t-14); font-weight: 500; color: var(--gold-champagne); text-decoration: none; border: 0; background: none; padding: 0; cursor: pointer; transition: color var(--dur-1) var(--ease); white-space: nowrap; }
.v2 .drill:hover { color: var(--gold-pale); } .v2 .drill .ar { transition: transform var(--dur-1) var(--ease); display: inline-block; } .v2 .drill:hover .ar { transform: translateX(2px); }
.v2 .drow { display: grid; align-items: baseline; column-gap: 16px; padding: 12px 12px; margin: 0 -12px; border-radius: var(--r-1); color: inherit; text-decoration: none; position: relative; transition: background var(--dur-1) var(--ease); }
.v2 .drow + .drow::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--line-soft); }
.v2 a.drow:hover, .v2 button.drow:hover { background: var(--surface-2); } .v2 a.drow:hover + .drow::before, .v2 a.drow:hover::before { opacity: 0; }
.v2 .is-selected { background: var(--gold-wash); box-shadow: inset 0 0 0 1px var(--gold-line); }
.v2 .rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }
.v2 .quiet { font-size: var(--t-14); color: var(--ink-4); line-height: 1.5; } .v2 .quiet a { color: var(--ink-3); } .v2 .quiet a:hover { color: var(--gold-champagne); }
.v2 .meta { font-size: var(--t-13); color: var(--ink-4); }
.v2 .fseg button { font-family: var(--f-interface); }

/* ---- dossier header (V2) ---- */
.dossier.v2 { max-width: 1200px; }
.dossier.v2 .d-back { font-size: var(--t-13); color: var(--ink-4); }
.dossier.v2 .d2-id { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 40px; margin-top: 4px; }
.dossier.v2 .d2-kind { margin-bottom: 8px; }
.dossier.v2 .d2-line { margin-top: 10px; font-size: var(--t-15); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 0; }
.dossier.v2 .d2-line .sep { color: var(--ink-5); padding: 0 9px; }
.dossier.v2 .d2-line .st { color: var(--ink-3); } .dossier.v2 .d2-line .st.paused, .dossier.v2 .d2-line .st.archived { color: var(--sem-attn); } .dossier.v2 .d2-line .st.onboarding { color: var(--gold-champagne); }
.dossier.v2 .d2-facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0; padding: 0 0 2px; }
.dossier.v2 .d2-facts div { display: flex; flex-direction: column; gap: 5px; max-width: 30ch; }
.dossier.v2 .d2-facts dd { margin: 0; font-size: var(--t-15); font-weight: 500; color: var(--ink-1); line-height: 1.3; }
.dossier.v2 .d2-facts dd .sub { display: block; font-size: var(--t-13); font-weight: 400; color: var(--ink-3); margin-top: 2px; }
.dossier.v2 .d2-facts dd.faint { color: var(--ink-4); font-weight: 400; }
.dossier.v2 .d-tabs { margin-top: 24px; gap: 4px; border-bottom: 1px solid var(--line); }
.dossier.v2 .d-tabs a { font-family: var(--f-interface); font-size: var(--t-14); font-weight: 500; padding: 9px 14px 11px; color: var(--ink-3); border-bottom: 2px solid transparent; }
.dossier.v2 .d-tabs a:hover { color: var(--ink-1); }
.dossier.v2 .d-tabs a[aria-current="page"] { color: var(--gold-champagne); border-bottom-color: var(--gold-champagne); }
.dossier.v2 .d-state { margin-top: 14px; font-size: var(--t-14); color: var(--ink-3); }
.dossier.v2 .d-body { margin-top: 28px; }
.dossier.v2 .d-quiet { font-size: var(--t-14); color: var(--ink-4); }
.dossier.v2 .lbl { font-size: var(--t-13); font-weight: 600; color: var(--ink-3); }
.dossier.v2 .lbl-row .r { font-size: var(--t-13); color: var(--ink-4); }
.dossier.v2 .tlink { font-size: var(--t-13); color: var(--gold-champagne); font-weight: 500; }

/* ---- Profile: the current-state command summary ---- */
.v2 .p2-grid { display: grid; grid-template-columns: minmax(0, 60fr) minmax(300px, 40fr); column-gap: 40px; }
.v2 .p2-main { min-width: 0; display: flex; flex-direction: column; gap: 34px; }
.v2 .p2-side { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.v2 .p2-now { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, max-content)); gap: 22px 44px; }
.v2 .p2-now > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v2 .p2-now .v { display: flex; align-items: baseline; gap: 6px; }
.v2 .p2-now .s { font-size: var(--t-13); color: var(--ink-3); line-height: 1.4; }
.v2 .p2-now .s.pos { color: var(--sem-pos); } .v2 .p2-now .s.attn { color: var(--sem-attn); }
.v2 .p2-now .n.faint { color: var(--ink-4); font-size: 22px; font-family: var(--f-interface); font-weight: 400; letter-spacing: 0; }
.v2 .p2-sec .head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.v2 .p2-list { display: flex; flex-direction: column; margin-top: 2px; }
.v2 .p2-list .drow { grid-template-columns: 124px minmax(0, 1fr) auto; }
.v2 .p2-list .area { font-size: var(--t-13); font-weight: 600; color: var(--ink-3); padding-top: 2px; }
.v2 .p2-list .ttl { display: block; font-size: 16px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.008em; line-height: 1.3; }
.v2 .p2-list .ln { display: block; font-size: var(--t-14); color: var(--ink-3); margin-top: 3px; }
.v2 .p2-list .ttl.faint { color: var(--ink-4); font-weight: 500; }
.v2 .p2-list .me { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.v2 .p2-list .ms { font-size: var(--t-13); color: var(--ink-4); white-space: nowrap; } .v2 .p2-list .ms.draft { color: var(--gold-champagne); } .v2 .p2-list .ms.pub { color: var(--ink-3); }
.v2 .p2-list .go { font-size: var(--t-13); font-weight: 500; color: var(--ink-4); white-space: nowrap; transition: color var(--dur-1) var(--ease); }
.v2 a.drow:hover .go, .v2 a.drow:hover .ttl { color: var(--gold-champagne); }
.v2 .p2-goal { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: flex-end; }
.v2 .p2-goal .e-goal { flex: 1 1 260px; max-width: 30ch; }
.v2 .p2-goal .facts { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.v2 .p2-goal .facts div { display: flex; flex-direction: column; gap: 4px; }
.v2 .p2-goal .facts .v { font-size: var(--t-15); font-weight: 500; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.v2 .p2-side section .head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.v2 .p2-side .note { margin-top: 6px; max-width: 38ch; }
.v2 .p2-side .noteby { font-size: var(--t-13); color: var(--ink-5); margin-top: 6px; }
.v2 .p2-svc { display: flex; flex-direction: column; }
.v2 .p2-svc div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-14); }
.v2 .p2-svc div:first-child { border-top: 0; padding-top: 2px; }
.v2 .p2-svc .nm { color: var(--ink-1); font-weight: 500; } .v2 .p2-svc .pr { color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2 .p2-svc .nm .k { font-size: var(--t-12); color: var(--ink-5); margin-left: 8px; font-weight: 400; }
.v2 .p2-contact { display: grid; grid-template-columns: 84px minmax(0, 1fr); row-gap: 6px; column-gap: 12px; font-size: var(--t-14); }
.v2 .p2-contact dt { color: var(--ink-4); } .v2 .p2-contact dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; } .v2 .p2-contact dd a { color: var(--ink-2); } .v2 .p2-contact dd a:hover { color: var(--gold-champagne); }

/* ---- Coaching: compartmentalised, service-aware ---- */
.v2 .c2 { max-width: 920px; display: flex; flex-direction: column; }
.v2 .c2-index { display: flex; flex-wrap: wrap; gap: 6px 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); font-size: var(--t-14); }
.v2 .c2-index a { color: var(--ink-2); font-weight: 500; text-decoration: none; } .v2 .c2-index a:hover { color: var(--gold-champagne); }
.v2 .c2-index span.off { color: var(--ink-5); } .v2 .c2-index span.off i { font-style: normal; font-size: var(--t-12); color: var(--ink-5); margin-left: 6px; }
.v2 .c2-sec { padding: 26px 0 28px; border-bottom: 1px solid var(--line-soft); }
.v2 .c2-sec:last-child { border-bottom: 0; }
.v2 .c2-sec .head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: baseline; }
.v2 .c2-sec .head .st { font-size: var(--t-13); color: var(--ink-4); white-space: nowrap; } .v2 .c2-sec .head .st.draft { color: var(--gold-champagne); font-weight: 500; }
.v2 .c2-sec .body { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: end; }
.v2 .c2-sec .ttl { font-size: 17px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; line-height: 1.3; }
.v2 .c2-sec .ttl.faint { color: var(--ink-4); font-weight: 500; }
.v2 .c2-sec .ln { font-size: var(--t-15); color: var(--ink-2); margin-top: 5px; } .v2 .c2-sec .ln .rest { color: var(--ink-3); }
.v2 .c2-sec .sub { font-size: var(--t-14); color: var(--ink-3); margin-top: 4px; }
.v2 .c2-sec .act { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.v2 .c2-sec .items { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: var(--t-14); color: var(--ink-2); }
.v2 .c2-sec .items span::before { content: "·"; color: var(--ink-5); margin-right: 8px; }
.v2 .c2-sec .items span:first-child::before { content: none; }
.v2 .c2-ses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; margin-top: 14px; }
.v2 .c2-ses > div { display: flex; flex-direction: column; gap: 6px; }
.v2 .c2-ses .v { font-size: 17px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; line-height: 1.3; } .v2 .c2-ses .v.faint { color: var(--ink-4); font-weight: 500; }
.v2 .c2-ses .s { font-size: var(--t-13); color: var(--ink-3); }
.v2 .c2 .ap-block .lbl-row { margin-top: 0 !important; align-items: baseline; }
.v2 .c2 .ap-block .lbl-row > .lbl { font-family: var(--f-editorial); font-weight: 500; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink-1); font-variation-settings: "SOFT" 0, "WONK" 0; }
.v2 .c2 .ap-block > .d-quiet { margin-top: 12px; }
.v2 .c2 .mods.big { margin: 0 -12px; }

/* ---- In-person sessions destination ---- */
.v2 .s2 { max-width: 880px; }
.v2 .s2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 6px; }
.v2 .s2-now { display: flex; flex-wrap: wrap; gap: 14px 0; margin-top: 26px; }
.v2 .s2-now > div { display: flex; flex-direction: column; gap: 8px; padding: 0 32px; min-width: 160px; }
.v2 .s2-now > div:first-child { padding-left: 0; } .v2 .s2-now > div + div { border-left: 1px solid var(--line-soft); }
.v2 .s2-now .s { font-size: var(--t-13); color: var(--ink-3); }
.v2 .s2-sec { margin-top: 34px; }
.v2 .s2-list { display: flex; flex-direction: column; margin-top: 4px; }
.v2 .s2-list .drow { grid-template-columns: 148px 92px minmax(0, 1fr); }
.v2 .s2-list .d { white-space: nowrap; }
.v2 .s2-list .d { font-size: var(--t-14); color: var(--ink-2); font-variant-numeric: tabular-nums; } .v2 .s2-list .st { font-size: var(--t-13); color: var(--ink-4); } .v2 .s2-list .st.ns { color: var(--sem-attn); } .v2 .s2-list .st.ok { color: var(--ink-3); }
.v2 .s2-list .nt { font-size: var(--t-14); color: var(--ink-2); } .v2 .s2-list .nt.faint { color: var(--ink-5); }
.v2 .s2-later { margin-top: 34px; padding: 18px 22px; }
.v2 .s2-later .quiet { max-width: 64ch; }

/* ---- Progress V2: summary first, detail on request ---- */
.v2 .pg2 { max-width: 1000px; }
.v2 .pg2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.v2 .pg2-head .why { margin-top: 8px; font-size: var(--t-14); color: var(--ink-3); max-width: 72ch; line-height: 1.5; }
.v2 .pg2-head .e-status { margin-top: 8px; }
.v2 .pg2-head .fseg { margin-bottom: 4px; }
.v2 .pg2-sec { padding: 28px 0 30px; border-top: 1px solid var(--line-soft); }
.v2 .pg2-sec:first-of-type { border-top: 0; }
.v2 .pg2-sec .head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.v2 .pg2-sec .head .meta { font-size: var(--t-13); color: var(--ink-4); }
.v2 .pg2-sec .foot { margin-top: 16px; }
/* latest check-in: cobalt-tinted section, the answers as numerals */
.v2 .pg2-ci { margin-top: 14px; padding: 18px 22px 20px; }
.v2 .pg2-ci .top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.v2 .pg2-ci .await { font-size: var(--t-13); font-weight: 500; color: var(--gold-champagne); }
.v2 .pg2-ans { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, max-content)); gap: 14px 36px; margin-top: 16px; }
.v2 .pg2-ans > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v2 .pg2-ans .k { font-size: var(--t-12); color: var(--ink-3); }
.v2 .pg2-ans .v { display: flex; align-items: baseline; gap: 6px; }
.v2 .pg2-ans .tr { font-family: var(--f-interface); font-size: 12px; font-weight: 600; letter-spacing: 0; } .v2 .pg2-ans .tr.better { color: var(--sem-pos); } .v2 .pg2-ans .tr.worse { color: var(--sem-attn); } .v2 .pg2-ans .tr.steady { color: var(--ink-5); }
.v2 .pg2-ci .said { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.v2 .pg2-ci .said .e-voice { font-size: 17px; max-width: 60ch; }
.v2 .pg2-ci .said .who { font-size: var(--t-13); color: var(--ink-4); }
.v2 .pg2-ci .wt { font-size: var(--t-14); color: var(--ink-2); } .v2 .pg2-ci .wt b { font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; }
/* body */
.v2 .pg2-body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 40px; align-items: end; margin-top: 12px; }
.v2 .pg2-body .fig { display: flex; flex-direction: column; gap: 10px; }
.v2 .pg2-body .lines { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-14); color: var(--ink-3); }
.v2 .pg2-body .lines b { color: var(--ink-1); font-weight: 500; font-variant-numeric: tabular-nums; }
.v2 .pg2-body .lines .pos { color: var(--sem-pos); } .v2 .pg2-body .lines .attn { color: var(--sem-attn); }
.v2 .pg2-chart { margin-top: 18px; }
.v2 .pg2-chart .chart .line { stroke: var(--sem-info); stroke-width: 1.8; } .v2 .pg2-chart .chart .dot { fill: var(--sem-info-deep); } .v2 .pg2-chart .chart .dot.end { fill: var(--ink-1); }
.v2 .pg2-chart.well .chart .line { stroke: var(--sem-well); } .v2 .pg2-chart.well .chart .dot { fill: var(--sem-well-deep); }
.v2 .pg2-chart .chart .goal { stroke: var(--gold-line); }
/* training */
.v2 .pg2-tr .sum { display: flex; flex-wrap: wrap; gap: 12px 0; margin-top: 14px; }
.v2 .pg2-tr .sum > div { display: flex; flex-direction: column; gap: 6px; padding: 0 28px; }
.v2 .pg2-tr .sum > div:first-child { padding-left: 0; } .v2 .pg2-tr .sum > div + div { border-left: 1px solid var(--line-soft); }
.v2 .pg2-tr .sum .s { font-size: var(--t-13); color: var(--ink-3); }
.v2 .pg2-mv { display: flex; flex-direction: column; margin-top: 16px; }
.v2 .pg2-mv .drow { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) 84px; padding: 10px 12px; }
.v2 .pg2-mv .nm { font-size: var(--t-15); font-weight: 500; color: var(--ink-1); }
.v2 .pg2-mv .ch { font-size: var(--t-14); color: var(--ink-3); font-variant-numeric: tabular-nums; } .v2 .pg2-mv .ch b { color: var(--ink-1); font-weight: 500; } .v2 .pg2-mv .ch .ar { color: var(--ink-5); padding: 0 6px; }
.v2 .pg2-mv .pc { text-align: right; font-family: var(--f-editorial); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* adherence */
.v2 .pg2-ad { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 44px; align-items: start; margin-top: 14px; }
.v2 .pg2-ad .fig { display: flex; flex-direction: column; gap: 8px; }
.v2 .pg2-ad .band { font-size: var(--t-15); color: var(--ink-2); font-weight: 500; }
.v2 .pg2-ad .band.strong { color: var(--sem-pos); }
.v2 .pg2-ad .fig .s { font-size: var(--t-13); color: var(--ink-4); }
.v2 .pg2-led { display: flex; flex-direction: column; max-width: 420px; }
.v2 .pg2-led > div { display: grid; grid-template-columns: 92px minmax(0, 1fr) 52px; column-gap: 14px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.v2 .pg2-led > div:first-child { border-top: 0; padding-top: 0; }
.v2 .pg2-led .k { font-size: var(--t-14); color: var(--ink-2); }
.v2 .pg2-led .bar { display: block; height: 3px; background: rgba(243,237,226,0.08); border-radius: 2px; overflow: hidden; }
.v2 .pg2-led .bar i { display: block; height: 100%; background: var(--gold); }
.v2 .pg2-led .v { font-size: var(--t-14); color: var(--ink-1); text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.v2 .pg2-led .na .k { color: var(--sem-na); } .v2 .pg2-led .na .v { color: var(--sem-na); font-weight: 400; font-size: var(--t-13); } .v2 .pg2-led .na .bar { background: var(--sem-na-wash); }
/* recent */
.v2 .pg2-rc { display: flex; flex-direction: column; margin-top: 10px; }
.v2 .pg2-rc > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; padding: 8px 0; font-size: var(--t-14); border-top: 1px solid var(--line-soft); align-items: baseline; }
.v2 .pg2-rc > div:first-child { border-top: 0; padding-top: 0; }
.v2 .pg2-rc .d { font-size: var(--t-13); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.v2 .pg2-rc .t { color: var(--ink-1); font-weight: 500; } .v2 .pg2-rc .t .s { color: var(--ink-4); font-weight: 400; }
.v2 .pg2-rc .t.pr, .v2 .pg2-rc .t.milestone { color: var(--sem-pos); } .v2 .pg2-rc .t.checkin, .v2 .pg2-rc .t.photos, .v2 .pg2-rc .t.checkin_monthly { color: var(--ink-1); }
/* empty progress */
.v2 .pg2-empty { margin-top: 26px; max-width: 64ch; display: flex; flex-direction: column; gap: 10px; }
/* detail pages */
.v2 .pg2-detail { max-width: 920px; }
.v2 .pg2-detail .dhead { margin-top: 6px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.v2 .pg2-detail .dhead .sub { margin-top: 8px; font-size: var(--t-14); color: var(--ink-3); max-width: 70ch; line-height: 1.5; }
.v2 .pg2-detail .dsec { margin-top: 32px; }
.v2 .pg2-detail .dsec .head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.v2 .pg2-detail .table th { font-family: var(--f-interface); }
.v2 .pg2-detail .table td.hi { color: var(--sem-pos); } .v2 .pg2-detail .table td.lo { color: var(--sem-attn); } .v2 .pg2-detail .table td.na { color: var(--sem-na); }
.v2 .pg2-detail .method { margin-top: 18px; padding: 16px 20px; }
.v2 .pg2-detail .method .quiet { max-width: 70ch; }
.v2 .pg2-detail .comp { display: grid; grid-template-columns: 110px 56px minmax(0, 1fr); column-gap: 18px; padding: 12px 0; border-top: 1px solid var(--line-soft); align-items: baseline; min-width: 0; width: 100%; }
.v2 .pg2-detail .comp:first-child { border-top: 0; }
.v2 .pg2-detail .comp .k { font-size: var(--t-15); font-weight: 500; color: var(--ink-1); } .v2 .pg2-detail .comp .v { font-family: var(--f-editorial); font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-1); }
.v2 .pg2-detail .comp .e { font-size: var(--t-14); color: var(--ink-3); line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.v2 .pg2-detail .comp.na .k, .v2 .pg2-detail .comp.na .v { color: var(--sem-na); font-family: var(--f-interface); font-size: var(--t-14); font-weight: 400; }
.v2 .pg2-detail .ci-full { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 24px; margin-top: 12px; }
.v2 .pg2-detail .ci-full > div { display: flex; flex-direction: column; gap: 4px; }
.v2 .pg2-detail .ci-full .k { font-size: var(--t-12); color: var(--ink-3); }
.v2 .pg2-detail .said { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.v2 .pg2-detail .said .who { font-size: var(--t-13); color: var(--ink-4); margin-top: 4px; }
.v2 .pg2-detail .reply { margin-top: 22px; padding: 16px 20px; }
.v2 .pg2-detail .photos { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--t-14); color: var(--ink-2); }
.v2 .pg2-detail .comps { display: flex; flex-direction: column; margin-top: 10px; }
.v2 .pg2-detail .tl-g { grid-template-columns: 104px minmax(0, 1fr); }
.v2 .pg2-detail .tl-e .t { color: var(--ink-1); } .v2 .pg2-detail .tl-e.attn .t { color: var(--sem-attn); } .v2 .pg2-detail .tl-e.pos .t { color: var(--sem-pos); }

/* ---- Admin (V2): the same content with the V2 headings ---- */
.v2 .admin section > .head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.v2 .a2-hist { display: flex; flex-direction: column; margin-top: 6px; }
.v2 .a2-hist > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; padding: 7px 0; font-size: var(--t-14); border-top: 1px solid var(--line-soft); }
.v2 .a2-hist > div:first-child { border-top: 0; }
.v2 .a2-hist .d { font-size: var(--t-13); color: var(--ink-4); font-variant-numeric: tabular-nums; } .v2 .a2-hist .t { color: var(--ink-2); } .v2 .a2-hist .t .s { color: var(--ink-4); } .v2 .a2-hist .t.attn { color: var(--sem-attn); }

/* ---- responsive (V2) ---- */
@media (max-width: 1279px) { .v2 .p2-grid { grid-template-columns: minmax(0, 58fr) minmax(280px, 42fr); column-gap: 30px; } .v2 .p2-now { gap: 20px 32px; } }
@media (max-width: 1099px) { .v2 .n-xl { font-size: 48px; } .dossier.v2 .e-name { font-size: 30px; } .v2 .pg2-ad { column-gap: 32px; } .v2 .pg2-body { column-gap: 30px; } }
@media (max-width: 1023px) { .dossier.v2 .d2-id { grid-template-columns: 1fr; align-items: start; gap: 14px; } .dossier.v2 .d2-facts { gap: 12px 32px; } .v2 .p2-list .drow { grid-template-columns: 104px minmax(0, 1fr) auto; } }
@media (max-width: 899px) {
  .v2 .p2-grid { grid-template-columns: 1fr; row-gap: 34px; }
  .v2 .pg2-ad { grid-template-columns: 1fr; row-gap: 18px; } .v2 .pg2-led { max-width: none; }
  .v2 .pg2-body { grid-template-columns: 1fr; row-gap: 14px; }
  .v2 .c2-ses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .v2 .n-xl { font-size: 42px; } .v2 .n-lg { font-size: 32px; } .v2 .n-md { font-size: 24px; }
  .dossier.v2 .e-name { font-size: 28px; } .v2 .e-status { font-size: 28px; } .v2 .e-h { font-size: 20px; }
  .dossier.v2 .d2-facts { gap: 12px 28px; }
  .v2 .p2-now { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px 24px; }
  .v2 .p2-list .drow { grid-template-columns: minmax(0, 1fr) auto; } .v2 .p2-list .area { grid-column: 1 / -1; padding-top: 0; }
  .v2 .c2-sec .body { grid-template-columns: 1fr; row-gap: 12px; } .v2 .c2-sec .act { align-items: flex-start; }
  .v2 .c2-ses { grid-template-columns: 1fr; }
  .v2 .pg2-ans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
  .v2 .pg2-tr .sum > div { padding: 0 18px; } .v2 .pg2-tr .sum > div:first-child { padding-left: 0; }
  .v2 .pg2-mv .drow { grid-template-columns: minmax(0, 1fr) 72px; } .v2 .pg2-mv .ch { grid-column: 1; }
  .v2 .s2-list .drow { grid-template-columns: 96px minmax(0, 1fr); } .v2 .s2-list .nt { grid-column: 1 / -1; }
  .v2 .pg2-detail .tl-g { grid-template-columns: 72px minmax(0, 1fr); }
  .v2 .pg2-detail .comp { grid-template-columns: 1fr; row-gap: 4px; }
  .v2 .admin .agrid div { grid-template-columns: 1fr; row-gap: 2px; } .v2 .admin .agrid.ent dd { flex-wrap: wrap; gap: 4px 12px; } .v2 .admin .agrid.ent .tlink { opacity: 1; }
}

/* ---- 35b · refinement pass: icons, section identity, attention hierarchy, coaching domains, status signals ---- */
.v2 .ic { width: 16px; height: 16px; flex: 0 0 auto; display: inline-block; vertical-align: -3px; }
.v2 .mic { width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; }
.v2 .sec-ic { width: 18px; height: 18px; margin-right: 10px; }
.v2 .ic-area { width: 15px; height: 15px; margin-right: 8px; vertical-align: -3px; }
.v2 .ic-dom { width: 20px; height: 20px; }
/* tones for icons and micro-labels */
.v2 .pos { color: var(--sem-pos); } .v2 .info { color: var(--sem-info); } .v2 .well { color: var(--sem-well); } .v2 .attn { color: var(--sem-attn); } .v2 .alarm { color: var(--sem-alarm); } .v2 .gold { color: var(--gold-champagne); } .v2 .neutral { color: var(--ink-4); }
.v2 .sem-alarm { color: var(--sem-alarm); }
.v2 .n.alarm { color: var(--sem-alarm); }
/* section title (functional, interface family): icon in the section's identity colour, title in ink */
.v2 .sec-h { display: flex; align-items: center; margin: 0; font-family: var(--f-interface); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink-1); line-height: 1.3; }
.v2 .sec-h .sec-ic { color: var(--ink-4); }
.v2 .pos .sec-h .sec-ic, .v2 .sec-h.pos .sec-ic { color: var(--sem-pos); } .v2 .info .sec-h .sec-ic, .v2 .sec-h.info .sec-ic { color: var(--sem-info); } .v2 .well .sec-h .sec-ic, .v2 .sec-h.well .sec-ic { color: var(--sem-well); } .v2 .gold .sec-h .sec-ic, .v2 .sec-h.gold .sec-ic { color: var(--gold); } .v2 .sec-h.attn .sec-ic { color: var(--sem-attn); } .v2 .sec-h.alarm .sec-ic { color: var(--sem-alarm); }
.v2 .pg2-sec.info { border-top-color: var(--sem-info-line); } .v2 .pg2-sec.well { border-top-color: var(--sem-well-line); } .v2 .pg2-sec.pos { border-top-color: var(--sem-pos-line); } .v2 .pg2-sec.gold { border-top-color: var(--gold-line); }
.v2 .pg2-sec:first-of-type { border-top: 0; }
/* status signals: figures, not a sentence */
.v2 .pg2-sig { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 14px; }
.v2 .pg2-sig > div { display: flex; align-items: baseline; gap: 8px; }
.v2 .pg2-sig .s { font-size: var(--t-13); color: var(--ink-3); }
.v2 .pg2-sig .n { font-size: 24px; }
/* the check-in identity: cobalt hairline + icon */
.v2 .pg2-ci { border-left: 2px solid var(--sem-info-line); border-radius: 0 var(--r-2) var(--r-2) 0; }
/* body: plum micro-label, plum figure accent line */
.v2 .well .pg2-body .fig .meta::before { content: ""; display: inline-block; width: 18px; height: 2px; background: var(--sem-well); margin-right: 8px; vertical-align: middle; }
/* training: emerald / clay / neutral only where a direction is read */
.v2 .pg2-tr .sum .n { font-size: 34px; }
/* adherence: gold identity */
.v2 .pg2-ad .band { color: var(--gold-champagne); } .v2 .pg2-ad .band.strong { color: var(--gold-champagne); }
/* PROFILE · needs you first, full width, semantic by urgency */
.v2 .p2 { display: flex; flex-direction: column; gap: 30px; }
.v2 .p2-attn { padding: 16px 20px 14px; border-radius: var(--r-2); background: var(--stone-1); border: 1px solid var(--stone-line); }
.v2 .p2-attn.hot { background: var(--sem-alarm-wash); border-color: var(--sem-alarm-line); }
.v2 .p2-attn.warm { background: var(--sem-attn-wash); border-color: var(--sem-attn-line); }
.v2 .p2-attn.calm { padding: 10px 0 0; background: none; border: 0; }
.v2 .p2-attn .head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.v2 .p2-attn .calm { font-size: var(--t-14); color: var(--ink-3); display: flex; align-items: center; }
.v2 .p2-needs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 28px; margin-top: 8px; }
.v2 .p2-needs .need { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line-soft); text-decoration: none; color: inherit; border-radius: 0; transition: background var(--dur-1) var(--ease); }
.v2 .p2-needs .need:hover { background: var(--ivory-tint-strong); }
.v2 .p2-needs .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-5); position: relative; top: -1px; }
.v2 .p2-needs .need.alarm .dot { background: var(--sem-alarm); } .v2 .p2-needs .need.attn .dot { background: var(--sem-attn); } .v2 .p2-needs .need.info .dot { background: var(--sem-info); } .v2 .p2-needs .need.gold .dot { background: var(--gold); }
.v2 .p2-needs .t { display: block; font-size: 16px; font-weight: 600; color: var(--ink-1); line-height: 1.3; letter-spacing: -0.008em; }
.v2 .p2-needs .need.alarm .t { color: var(--sem-alarm); } .v2 .p2-needs .need.attn .t { color: var(--sem-attn); }
.v2 .p2-needs .s { display: block; font-size: var(--t-13); color: var(--ink-3); margin-top: 2px; }
.v2 .p2-needs .act { font-size: var(--t-13); font-weight: 500; color: var(--gold-champagne); white-space: nowrap; } .v2 .p2-needs .act .ar { display: inline-block; transition: transform var(--dur-1) var(--ease); } .v2 .p2-needs .need:hover .act .ar { transform: translateX(2px); }
.v2 .p2-sec .head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.v2 .p2-list .area { display: flex; align-items: center; }
.v2 .p2-side section .head { align-items: center; }
.v2 .p2-side .lbl { display: inline-flex; align-items: center; }
.v2 .p2-side .p2-quiet .lbl { color: var(--ink-4); font-weight: 500; } .v2 .p2-side .p2-quiet .mic { color: var(--ink-5); }
.v2 .p2-side .p2-quiet .p2-svc .nm { color: var(--ink-2); font-weight: 400; } .v2 .p2-side .p2-quiet .p2-contact dd { color: var(--ink-3); }
.v2 .p2-goalsec .e-goal { font-size: 22px; }
/* COACHING · domains are destinations */
.v2 .c2-index { gap: 4px 22px; }
.v2 .c2-index button { border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-14); font-weight: 500; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; transition: color var(--dur-1) var(--ease); }
.v2 .c2-index button:hover { color: var(--gold-champagne); }
.v2 .c2-doms { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.v2 .c2-dom { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 16px; align-items: start; padding: 16px 18px 16px 16px; border-radius: var(--r-2); background: var(--ivory-tint); border: 1px solid transparent; text-decoration: none; color: inherit; position: relative; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.v2 .c2-dom::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 1px; background: var(--ink-5); }
.v2 .c2-dom.pos::before { background: var(--sem-pos); } .v2 .c2-dom.info::before { background: var(--sem-info); } .v2 .c2-dom.gold::before { background: var(--gold); } .v2 .c2-dom.well::before { background: var(--sem-well); }
.v2 .c2-dom:hover { background: var(--ivory-tint-strong); border-color: var(--stone-line); }
.v2 .c2-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); }
.v2 .c2-dom.pos .c2-ic { color: var(--sem-pos); background: var(--sem-pos-wash); } .v2 .c2-dom.info .c2-ic { color: var(--sem-info); background: var(--sem-info-wash); } .v2 .c2-dom.gold .c2-ic { color: var(--gold-champagne); background: var(--gold-wash); } .v2 .c2-dom.well .c2-ic { color: var(--sem-well); background: var(--sem-well-wash); }
.v2 .c2-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 2px; }
.v2 .c2-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.v2 .c2-name { font-size: 15px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.005em; }
.v2 .c2-top .st { font-size: var(--t-13); color: var(--ink-4); } .v2 .c2-top .st.draft { color: var(--gold-champagne); font-weight: 500; }
.v2 .c2-dom .ttl { font-family: var(--f-editorial); font-weight: 500; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink-1); font-variation-settings: "SOFT" 0, "WONK" 0; margin-top: 4px; }
.v2 .c2-dom .ttl.faint { color: var(--ink-4); font-family: var(--f-interface); font-size: 16px; font-weight: 500; }
.v2 .c2-dom .ln { font-size: var(--t-15); color: var(--ink-2); } .v2 .c2-dom .sub { font-size: var(--t-14); color: var(--ink-3); }
.v2 .c2-dom .items { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: var(--t-14); color: var(--ink-2); }
.v2 .c2-dom .items span::before { content: "·"; color: var(--ink-5); margin-right: 8px; } .v2 .c2-dom .items span:first-child::before { content: none; }
.v2 .c2-dom .c2-ses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; margin-top: 8px; }
.v2 .c2-dom .c2-ses > span { display: flex; flex-direction: column; gap: 5px; }
.v2 .c2-dom .c2-ses .v { font-size: 17px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; line-height: 1.3; } .v2 .c2-dom .c2-ses .v.faint { color: var(--ink-4); font-weight: 500; }
.v2 .c2-dom .c2-ses .s { font-size: var(--t-13); color: var(--ink-3); }
.v2 .c2-dom .c2-note { display: block; margin-top: 12px; max-width: 46ch; font-size: 17px; }
.v2 .c2-go { align-self: center; font-size: var(--t-14); font-weight: 500; color: var(--gold-champagne); white-space: nowrap; } .v2 .c2-go .ar { display: inline-block; transition: transform var(--dur-1) var(--ease); } .v2 .c2-dom:hover .c2-go .ar { transform: translateX(3px); }
.v2 .c2-addons { padding-top: 22px; border-bottom: 0; }
.v2 .c2 .ap-block .lbl-row > .lbl { font-family: var(--f-interface); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
/* sessions page */
.v2 .s2-head .micro { display: inline-flex; align-items: center; }
/* responsive for the refinement */
@media (max-width: 899px) { .v2 .c2-dom .c2-ses { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v2 .p2-needs { grid-template-columns: 1fr; } }
@media (max-width: 639px) {
  .v2 .c2-dom { grid-template-columns: 32px minmax(0, 1fr); row-gap: 10px; padding: 14px 14px 14px 12px; } .v2 .c2-ic { width: 32px; height: 32px; } .v2 .ic-dom { width: 17px; height: 17px; } .v2 .c2-go { grid-column: 2; }
  .v2 .c2-dom .c2-ses { grid-template-columns: 1fr; } .v2 .c2-dom .ttl { font-size: 20px; }
  .v2 .pg2-sig { gap: 8px 18px; } .v2 .pg2-sig .n { font-size: 22px; }
  .v2 .p2-needs .need { grid-template-columns: 10px minmax(0, 1fr); } .v2 .p2-needs .act { grid-column: 2; }
  .v2 .pg2-tr .sum .n { font-size: 30px; }
}
/* ---- 35c · Step 12B Body & photos: measurements, photo timeline, comparison, drawers ---- */
.v2 .bd .dhead.well .e-h { color: var(--ink-1); }
.v2 .bd-scg { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, max-content)); gap: 18px 40px; }
.v2 .bd-scg > div { display: flex; flex-direction: column; gap: 6px; }
.v2 .bd-scg .s { font-size: var(--t-13); color: var(--ink-3); }
.v2 .bd-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .v2 .bd-acts .btn .mic { margin-right: 6px; }
.v2 .bd-rule { margin-top: 10px; }
.v2 .bd-sec { padding-top: 26px; border-top: 1px solid var(--sem-well-line); }
.v2 .bd-sec .head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.v2 .bd-sec .sec-h .sec-ic { color: var(--sem-well); }
.v2 .bd-meas { display: flex; flex-direction: column; }
.v2 .bd-meas .row { display: grid; grid-template-columns: 92px 96px minmax(0, 1fr) auto; column-gap: 18px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.v2 .bd-meas .row:first-child { border-top: 0; padding-top: 0; }
.v2 .bd-meas .k { font-size: var(--t-15); font-weight: 500; color: var(--ink-1); }
.v2 .bd-meas .v { font-family: var(--f-editorial); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-1); letter-spacing: -0.01em; } .v2 .bd-meas .v .u { font-family: var(--f-interface); font-size: 12px; color: var(--ink-4); margin-left: 4px; }
.v2 .bd-meas .ch { font-size: var(--t-14); color: var(--ink-3); } .v2 .bd-meas .ch b { font-weight: 500; color: var(--ink-1); } .v2 .bd-meas .ch b.pos { color: var(--sem-pos); } .v2 .bd-meas .ch b.attn { color: var(--sem-attn); }
.v2 .bd-meas .d { font-size: var(--t-13); color: var(--ink-4); white-space: nowrap; }
.v2 .bd-toggle { margin-top: 14px; } .v2 .bd-hist { margin-top: 12px; }
.v2 .bd-sets { display: flex; flex-direction: column; gap: 18px; }
.v2 .set-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.v2 .set-h .d { font-family: var(--f-editorial); font-size: 20px; font-weight: 500; color: var(--ink-1); letter-spacing: -0.01em; }
.v2 .set-h .views { font-size: var(--t-14); color: var(--ink-3); } .v2 .set-h .views b { font-weight: 500; color: var(--ink-2); } .v2 .set-h .miss { color: var(--sem-attn); }
.v2 .set-h .vis { margin-left: auto; font-size: var(--t-12); color: var(--ink-4); } .v2 .set-h .vis.client { color: var(--sem-info); }
.v2 .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 140px)); gap: 10px; }
.v2 .th { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.v2 .th .img { aspect-ratio: 3 / 4; border-radius: var(--r-1); background: var(--stone-1) center / cover no-repeat; border: 1px solid var(--stone-line); position: relative; transition: border-color var(--dur-1) var(--ease); }
.v2 .th .img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(243,237,226,0.03) 8px 16px); opacity: 1; transition: opacity var(--dur-2) var(--ease); }
.v2 .th .img.ready::after { opacity: 0; } .v2 .th .img.failed { border-style: dashed; }
.v2 .th:hover .img { border-color: var(--sem-well-line); }
.v2 .th figcaption { font-size: var(--t-12); color: var(--ink-4); display: flex; justify-content: space-between; gap: 6px; } .v2 .th figcaption .tlink { font-size: var(--t-12); }
.v2 .th.lg .img { max-width: 100%; }
.v2 .th.none { display: grid; place-items: center; aspect-ratio: 3 / 4; border: 1px dashed var(--line-strong); border-radius: var(--r-1); color: var(--ink-5); font-size: var(--t-13); text-align: center; padding: 12px; }
.v2 .bd-cmp-ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--t-14); color: var(--ink-3); }
.v2 .bd-cmp-ctl label { display: inline-flex; align-items: center; gap: 8px; } .v2 .bd-cmp-ctl .select { height: 32px; padding: 0 10px; } .v2 .bd-cmp-ctl .ar { color: var(--ink-5); }
.v2 .bd-ctx { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 18px 0 6px; }
.v2 .bd-ctx > div { display: flex; align-items: baseline; gap: 8px; } .v2 .bd-ctx .s { font-size: var(--t-13); color: var(--ink-3); }
.v2 .bd-cmp { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; max-width: 720px; }
.v2 .bd-cmp .col-h, .v2 .bd-cmp .pair { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; align-items: start; }
.v2 .bd-cmp .col-h .micro { text-align: center; }
.v2 .bd-cmp .pair .lbl { font-size: var(--t-13); font-weight: 600; color: var(--ink-3); padding-top: 6px; }
.v2 .bd-cmp .pair .th.lg .img { border-color: var(--stone-line); } .v2 .bd-cmp .pair .th.lg:last-child .img { border-color: var(--sem-well-line); }
.v2 .bd-up { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.v2 .bd-up .up, .drawer .bd-up .up { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px; border: 1px dashed var(--line-strong); border-radius: var(--r-1); cursor: pointer; text-align: center; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.drawer .bd-up .up:hover { border-color: var(--gold-line); background: var(--surface-1); } .drawer .bd-up .up.has { border-style: solid; border-color: var(--sem-well-line); background: var(--sem-well-wash); }
.drawer .bd-up .prev { width: 100%; aspect-ratio: 3 / 4; border-radius: 4px; background: var(--stone-1) center / cover no-repeat; }
.drawer .bd-up .nm { font-size: var(--t-14); font-weight: 600; color: var(--ink-1); } .drawer .bd-up .hint { font-size: var(--t-12); color: var(--ink-4); }
@media (max-width: 899px) { .v2 .bd-cmp { max-width: none; } }
@media (max-width: 639px) {
  .v2 .bd-meas .row { grid-template-columns: 1fr auto; row-gap: 2px; } .v2 .bd-meas .ch { grid-column: 1 / -1; } .v2 .bd-meas .d { grid-column: 1 / -1; }
  .v2 .thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2 .bd-cmp .col-h, .v2 .bd-cmp .pair { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; }
  .v2 .set-h .vis { margin-left: 0; }
  .drawer .bd-up { grid-template-columns: 1fr; }
}
/* ---- 35d · Step 12C Training progress: the Training page, the exercise list, the exercise page ---- */
.v2 .tp .dhead.pos .e-h { color: var(--ink-1); }
.v2 .tp-fig { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, max-content)); gap: 18px 44px; }
.v2 .tp-fig > div { display: flex; flex-direction: column; gap: 6px; }
.v2 .tp-fig .s { font-size: var(--t-13); color: var(--ink-3); }
.v2 .tp-fig .n .u { font-size: 15px; margin-left: 4px; }
.v2 .tp-counts { display: flex; flex-wrap: wrap; gap: 12px 0; }
.v2 .tp-counts > div { display: flex; flex-direction: column; gap: 6px; padding: 0 28px; }
.v2 .tp-counts > div:first-child { padding-left: 0; } .v2 .tp-counts > div + div { border-left: 1px solid var(--line-soft); }
.v2 .tp-counts .s { font-size: var(--t-13); color: var(--ink-3); }
.v2 .tp-counts .n { font-size: 34px; }
.v2 .tp-sec { padding-top: 26px; border-top: 1px solid var(--sem-pos-line); }
.v2 .tp-sec .head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.v2 .tp-sec .sec-h .sec-ic { color: var(--sem-pos); }
.v2 .tp-mvs { display: flex; flex-direction: column; }
.v2 .tp-mv { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) 84px; padding: 10px 12px; }
.v2 .tp-mv:hover { background: var(--ivory-tint-strong); }
.v2 .tp-mv .nm { font-size: var(--t-15); font-weight: 500; color: var(--ink-1); }
.v2 .tp-mv .ch { font-size: var(--t-14); color: var(--ink-3); font-variant-numeric: tabular-nums; } .v2 .tp-mv .ch b { color: var(--ink-1); font-weight: 500; } .v2 .tp-mv .ch .ar { color: var(--ink-5); padding: 0 6px; }
.v2 .tp .pc { text-align: right; font-family: var(--f-editorial); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--ink-1); }
.v2 .tp-bests { display: flex; flex-direction: column; }
.v2 .tp-best { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; column-gap: 14px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-14); }
.v2 .tp-best:first-child { border-top: 0; padding-top: 0; }
.v2 .tp-best .d { font-size: var(--t-13); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.v2 .tp-best .t { color: var(--ink-1); font-weight: 500; text-decoration: none; } .v2 .tp-best .t:hover { color: var(--gold-champagne); }
.v2 .tp-best .v { font-family: var(--f-editorial); font-size: 18px; font-weight: 500; color: var(--sem-pos); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.v2 .tp-best .k { font-size: var(--t-13); color: var(--ink-4); }
.v2 .tp-var { display: block; font-size: var(--t-13); font-weight: 400; color: var(--ink-4); } .v2 .tp-best .t .tp-var, .v2 .sec-h .tp-var { display: inline; margin-left: 8px; }
.v2 .tp-vars { display: flex; flex-direction: column; } .v2 .tp-vrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) auto; column-gap: 14px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-14); }
.v2 .tp-vrow .nm { color: var(--ink-1); font-weight: 500; } .v2 .tp-vrow .nm .s { display: block; font-size: var(--t-13); font-weight: 400; } .v2 .tp-vrow .ch { color: var(--ink-3); font-variant-numeric: tabular-nums; } .v2 .tp-vrow .ch b { color: var(--ink-1); font-weight: 500; } .v2 .tp-vrow .ch .ar { color: var(--ink-5); padding: 0 6px; } .v2 .tp-vrow .ch .d { margin-left: 8px; font-size: var(--t-13); } .v2 .tp-vrow .st { font-size: var(--t-13); color: var(--ink-3); } .v2 .tp-vrow.active .nm::after { content: ' · shown'; font-weight: 400; color: var(--ink-4); }
.v2 .tp-list td .pc { font-size: 16px; }
.v2 .tp-list .tp-hist { font-weight: 400; font-size: var(--t-12); }
.v2 .tp-list td.sem-pos { color: var(--sem-pos); } .v2 .tp-list td.sem-attn { color: var(--sem-attn); } .v2 .tp-list td.sem-na { color: var(--sem-na); }
.v2 .tp-metric button { font-size: var(--t-13); }
.v2 .tp-chart .chart .line { stroke: var(--sem-pos); stroke-width: 1.8; } .v2 .tp-chart .chart .dot { fill: var(--sem-pos-deep); } .v2 .tp-chart .chart .dot.studio { fill: var(--sem-info); } .v2 .tp-chart .chart .dot.end { fill: var(--ink-1); }
.v2 .tp-sess { display: flex; flex-direction: column; }
.v2 .tp-ses { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-14); }
.v2 .tp-ses:first-child { border-top: 0; padding-top: 0; }
.v2 .tp-ses .d { font-size: var(--t-13); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.v2 .tp-ses .v { font-family: var(--f-editorial); font-size: 18px; font-weight: 500; color: var(--ink-1); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.v2 .tp-ses .v .faint { font-family: var(--f-interface); font-size: var(--t-13); font-weight: 400; }
.v2 .tp-nb { font-family: var(--f-interface); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; margin-left: 8px; }
.v2 .tp-ses .c { font-size: var(--t-13); color: var(--ink-3); }
.v2 .tp-ses .tlink { justify-self: end; white-space: nowrap; }
.v2 .tp-ses .sets { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 6px 0 4px 84px; font-size: var(--t-13); color: var(--ink-2); font-variant-numeric: tabular-nums; } .v2 .tp-ses .sets .faint { color: var(--ink-5); }
.v2 .tp-id { margin-top: 14px; }
/* polish: one summary band across the width; counts are drill-downs; the performed set is the hero */
.v2 .tp-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px 56px; flex-wrap: wrap; margin-top: 30px; }
.v2 .tp-top .tp-fig { gap: 18px 56px; }
.v2 .tp-top .tp-counts { gap: 12px 0; }
.v2 .tp-top .tp-counts > .tp-count { padding: 0 32px; }
.v2 .tp-top .tp-counts > .tp-count:first-child { padding-left: 0; } .v2 .tp-top .tp-counts > .tp-count:last-child { padding-right: 0; }
.v2 .tp-nosets { margin-top: 16px; }
.v2 .tp-count { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; border-left: 1px solid var(--line-soft); }
.v2 .tp-count:first-child { border-left: 0; }
.v2 .tp-count .s { font-size: var(--t-13); color: var(--ink-3); transition: color var(--dur-1) var(--ease); } .v2 .tp-count .s .ar { display: inline-block; color: var(--ink-5); transition: transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.v2 .tp-count:hover .s { color: var(--gold-champagne); } .v2 .tp-count:hover .s .ar { color: var(--gold-champagne); transform: translateX(2px); }
.v2 .tp .tp-sec { margin-top: 40px; }
.v2 .tp-list-ctl { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.v2 .tp-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 64px; row-gap: 20px; align-items: end; }
.v2 .tp-perf { display: flex; flex-direction: column; gap: 8px; }
.v2 .tp-perf .n-xl { font-size: 52px; }
.v2 .tp-perf .s { font-size: var(--t-13); color: var(--ink-3); }
.v2 .tp-ctx { align-self: end; padding-bottom: 6px; }
.v2 .tp-ctx .n-md { font-size: 24px; }
@media (max-width: 899px) { .v2 .tp-hero { grid-template-columns: 1fr; } .v2 .tp-top { gap: 22px 40px; } }
@media (max-width: 639px) { .v2 .tp-top .tp-counts { gap: 18px 0; } .v2 .tp-top .tp-counts > .tp-count { padding: 0 22px 0 0; border-left: 0; min-width: 45%; } .v2 .tp-perf .n-xl { font-size: 44px; } }
@media (max-width: 899px) { .v2 .tp-fig { gap: 16px 32px; } }
@media (max-width: 639px) {
  .v2 .tp-counts > div { padding: 0 18px; } .v2 .tp-counts .n { font-size: 30px; }
  .v2 .tp-mv { grid-template-columns: minmax(0, 1fr) 72px; row-gap: 2px; } .v2 .tp-mv .ch { grid-column: 1 / -1; }
  .v2 .tp-best { grid-template-columns: 76px minmax(0, 1fr); row-gap: 2px; } .v2 .tp-best .v, .v2 .tp-best .k { grid-column: 2; }
  .v2 .tp-ses { grid-template-columns: 84px minmax(0, 1fr) auto; } .v2 .tp-ses .c { grid-column: 2; } .v2 .tp-ses .sets { padding-left: 0; }
}
/* ---- 35e · Step 12D Adherence: the Adherence page, weekly trend, component pages ---- */
.v2 .ad .dhead.gold .e-h { color: var(--ink-1); }
.v2 .ad-fig { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.v2 .ad-state { font-size: var(--t-15); font-weight: 500; color: var(--gold-champagne); }
.v2 .ad-state.pos { color: var(--sem-pos); } .v2 .ad-state.attn { color: var(--sem-attn); } .v2 .ad-state.na { color: var(--sem-na); }
.v2 .ad-chart { margin-top: 22px; max-width: 760px; }
.v2 .ad-chart .chart .bar { fill: var(--gold-deep); } .v2 .ad-chart .chart .bar.now { fill: var(--gold); } .v2 .ad-chart .chart .bar.none { fill: var(--sem-na); } .v2 .ad-chart .chart .bar.partial { fill: var(--gold-deep); opacity: 0.45; }
.v2 .ad-chart .chart .mark { stroke: var(--ink-4); stroke-width: 1; } .v2 .ad-chart .chart .label { fill: var(--ink-3); font-size: 10px; }
.v2 .ad-comps { display: flex; flex-direction: column; max-width: 640px; }
.v2 .ad-comps .comp { grid-template-columns: 110px minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; text-decoration: none; color: inherit; border-radius: var(--r-1); transition: background var(--dur-1) var(--ease); }
.v2 .ad-comps a.comp:hover { background: var(--ivory-tint-strong); }
.v2 .ad-comps .comp .bar { display: block; height: 3px; background: rgba(243,237,226,0.08); border-radius: 2px; overflow: hidden; } .v2 .ad-comps .comp .bar i { display: block; height: 100%; background: var(--gold); }
.v2 .ad-comps .comp.pos .bar i { background: var(--sem-pos); } .v2 .ad-comps .comp.attn .bar i { background: var(--sem-attn); }
.v2 .ad-comps .comp .v { text-align: right; } .v2 .ad-comps .comp .v.n { font-size: 20px; }
.v2 .ad-comps .comp .e { font-size: var(--t-13); color: var(--ink-4); display: flex; justify-content: space-between; gap: 8px; } .v2 .ad-comps .comp .e .ar { color: var(--ink-5); transition: transform var(--dur-1) var(--ease); } .v2 .ad-comps a.comp:hover .e .ar { transform: translateX(2px); color: var(--gold-champagne); }
.v2 .ad-comps .comp.attn .e { color: var(--sem-attn); } .v2 .ad-comps .comp.pos .e { color: var(--sem-pos); }
.v2 .ad-comps .comp.na .k { color: var(--sem-na); font-weight: 400; font-family: var(--f-interface); font-size: var(--t-15); } .v2 .ad-comps .comp.na .v { color: var(--sem-na); font-family: var(--f-interface); font-size: var(--t-13); font-weight: 400; text-align: left; grid-column: 2 / span 2; }
.v2 .ad-comps .comp.na a.k { text-decoration: none; } .v2 .ad-comps .comp.na a.k:hover { color: var(--ink-2); }
.v2 .ad-changes { display: flex; flex-direction: column; }
.v2 .ad-changes > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-14); align-items: baseline; }
.v2 .ad-changes > div:first-child { border-top: 0; padding-top: 0; }
.v2 .ad-changes .d { font-size: var(--t-13); color: var(--ink-4); font-variant-numeric: tabular-nums; } .v2 .ad-changes .t { color: var(--ink-2); }
.v2 .ad-cur { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; } .v2 .ad-cur .t { font-size: var(--t-15); color: var(--ink-1); }
.v2 .ad-weeks { display: flex; flex-direction: column; max-width: 640px; }
.v2 .ad-weeks > div { display: grid; grid-template-columns: 150px minmax(0, 1fr) 84px 44px; column-gap: 16px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.v2 .ad-weeks > div:first-child { border-top: 0; padding-top: 0; }
.v2 .ad-weeks .d { font-size: var(--t-13); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.v2 .ad-weeks .bar { display: block; height: 3px; background: rgba(243,237,226,0.08); border-radius: 2px; overflow: hidden; } .v2 .ad-weeks .bar i { display: block; height: 100%; background: var(--gold); }
.v2 .ad-weeks .v { font-size: var(--t-14); color: var(--ink-1); text-align: right; font-variant-numeric: tabular-nums; } .v2 .ad-weeks .p { text-align: right; font-size: 18px; }
.v2 .ad-dues { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-13); color: var(--ink-3); } .v2 .ad-dues .miss { color: var(--sem-attn); }
@media (max-width: 639px) {
  .v2 .ad-comps .comp { grid-template-columns: 96px minmax(0, 1fr) 48px; min-height: 48px; } .v2 .ad-comps .comp .e { grid-column: 1 / -1; }
  .v2 .ad-weeks > div { grid-template-columns: minmax(0, 1fr) 70px 40px; } .v2 .ad-weeks .bar { display: none; }
}

/* ---- 36 · TONAL WORKSPACES (Visual Language V2, 16 Sep 2026). The dark shell (rail, header) is the stable foundation; a
   workspace may carry a restrained domain tone, felt before it is noticed. Adherence is the first approved implementation
   (warm graphite / bronze-black). The other tones are DOCUMENTED here and NOT applied until each domain's pass. ---- */
:root {
  --ws-adherence-bg: #141210;            /* warm graphite: a touch of bronze in the black */
  --ws-adherence-surface: rgba(214, 178, 108, 0.045);   /* the elevated diagnostic surface, gold-warmed, barely there */
  --ws-adherence-line: rgba(214, 178, 108, 0.16);
  --ws-checkin-bg: #0f1318;              /* cool graphite / blue-black — the SECOND tonal workspace (12E, Check-ins; one step cooler after the 16 Sep polish) */
  --ws-checkin-surface: rgba(126, 162, 234, 0.06);      /* the dark review sheet and the response surface: cobalt-cooled, elevated, still quiet */
  --ws-checkin-raise: rgba(126, 162, 234, 0.05);        /* one more step: the surface behind the client's own words */
  --ws-checkin-line: rgba(126, 162, 234, 0.2);
  --ws-checkin-rule: rgba(126, 162, 234, 0.14);         /* section rules inside the sheet */
  --ws-checkin-ink: #1a1c20; --ws-checkin-ink-2: #3a3d44; --ws-checkin-ink-3: #5b5f68; --ws-checkin-ink-4: #7a7e88;   /* ink for a future LIGHT printable / exported check-in summary (tokens only; not a page option) */
  --ws-body-bg: #131114;                 /* plum / aubergine — documented, not applied */
  --ws-training-bg: #101312;             /* forest / emerald — documented, not applied */
  --ws-admin-bg: #111111;                /* neutral charcoal — documented, not applied */
  --ws-profile-bg: #121110;              /* warm stone-charcoal — documented, not applied */
  --ws-light-ivory: #f3ede2;             /* light neutral surfaces are permitted where editorial contrast earns them (reports, comparisons, printable summaries) */
  --ws-light-stone: #e9e2d6;
}
.workspace[data-ws="adherence"] { background: var(--ws-adherence-bg); transition: background var(--dur-2) var(--ease); }
.workspace[data-ws="adherence"] .d-tabs a[aria-current="page"] { border-bottom-color: var(--gold); }
.workspace[data-ws="checkin"] { background: var(--ws-checkin-bg); transition: background var(--dur-2) var(--ease); }
.workspace[data-ws="checkin"] .d-tabs a[aria-current="page"] { border-bottom-color: var(--sem-info); }
/* the Adherence pages: gold identity, one elevated warm diagnostic surface behind the component rows (option B, kept: it
   groups the six rows as one section and takes the black void out of the middle of the page without becoming a card) */
.v2 .ad-diag { margin-top: 30px; padding: 18px 22px 10px; border-radius: var(--r-2); background: var(--ws-adherence-surface); border: 1px solid var(--ws-adherence-line); }
.v2 .ad-diag > .head { margin-bottom: 4px; }
.v2 .ad-comps { max-width: none; }
.v2 .ad-comps .comp { grid-template-columns: 110px minmax(0, 1fr) 56px minmax(0, 1fr); padding: 12px 10px; margin: 0 -10px; border-top: 1px solid var(--ws-adherence-line); }
.v2 .ad-comps .comp:first-child { border-top: 0; }
.v2 .ad-comps a.comp:hover { background: rgba(214, 178, 108, 0.06); }
.v2 .ad-comps a.comp:focus-visible, .v2 .tp-count:focus-visible, .v2 .drill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-1); }
.v2 .ad-comps .comp .k { font-size: var(--t-15); font-weight: 500; color: var(--ink-1); }
.v2 .ad-comps .comp.na .v { grid-column: 2 / span 2; }
.v2 .ad-comps a.comp.na .e { grid-column: 4; justify-content: flex-end; }
/* the weekly trend is a line, one family with the Body and Training charts */
.v2 .ad-chart .chart .line { stroke: var(--gold); stroke-width: 1.8; fill: none; } .v2 .ad-chart .chart .dot { fill: var(--gold-deep); } .v2 .ad-chart .chart .dot.now { fill: var(--ws-adherence-bg); stroke: var(--gold); stroke-width: 1.6; } .v2 .ad-chart .chart .dot.partial { fill: var(--ink-5); }
.v2 .ad-chart .chart .mark { stroke: var(--ink-4); stroke-width: 1; } .v2 .ad-chart .chart .label { fill: var(--ink-2); font-size: 11px; font-weight: 500; }
/* recent weeks: objective rows carry a completion bar; self-reported rows carry the words instead */
.v2 .ad-weeks.self > div { grid-template-columns: 150px minmax(0, 1fr) 84px; }
.v2 .ad-weeks .lbl { font-size: var(--t-13); color: var(--ink-4); }
.v2 .ad-src { margin-top: 10px; }
@media (max-width: 639px) { .v2 .ad-diag { padding: 12px 14px 6px; } .v2 .ad-weeks.self > div { grid-template-columns: minmax(0, 1fr) 70px; } .v2 .ad-weeks.self .lbl { grid-column: 1; } }

/* ---- 35f · Step 12E Check-ins: the Check-in page (deep review), the history list. Surfaces carry the hierarchy —
   WORKSPACE (cool graphite) → REVIEW SHEET (cobalt-cooled) → THE CLIENT'S WORDS (raised) → FOR YOU (cobalt rule) →
   supporting context on the workspace → YOUR RESPONSE (its own surface). DARK sheet locked 16 Sep 2026. ---- */
.v2 .ck { max-width: 960px; }
.v2 .ck .dhead.info .e-h { color: var(--ink-1); }
/* header: the operational state first, then the date, then one line of facts */
.v2 .ck-status { margin: 10px 0 6px; font-size: var(--t-13); letter-spacing: 0.1em; color: var(--sem-info); }   /* the micro-label class, one size up: the operational state reads first */
.v2 .ck-status.attn { color: var(--sem-attn); } .v2 .ck-status.pos { color: var(--sem-pos); } .v2 .ck-status:not(.attn):not(.pos):not(.info) { color: var(--ink-3); }
.v2 .ck .dhead .sub { margin-top: 6px; } .v2 .ck .dhead .sub .sem-attn { color: var(--sem-attn); font-weight: 500; }
.v2 .ck-state { font-weight: 500; color: var(--sem-info); } .v2 .ck-state.attn { color: var(--sem-attn); } .v2 .ck-state.pos { color: var(--sem-pos); } .v2 .ck-state.info { color: var(--sem-info); }
.v2 .ck-nav { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; font-size: var(--t-14); }
.v2 .ck-nav a { display: inline-block; color: var(--ink-3); text-decoration: none; white-space: nowrap; padding: 9px 2px; margin: -9px -2px; }   /* a 36 px touch target without moving the text */ .v2 .ck-nav a:hover { color: var(--sem-info); } .v2 .ck-nav a.all { color: var(--gold-champagne); } .v2 .ck-nav .none { color: var(--ink-5); }
.v2 .ck-nav a:focus-visible, .v2 .ck-row:focus-visible, .v2 .ck .drill:focus-visible, .v2 .ck .btn:focus-visible { outline: 2px solid var(--sem-info); outline-offset: 2px; border-radius: var(--r-1); }
.v2 .ck-sec { padding: 26px 0 28px; border-top: 1px solid var(--line-soft); }
.v2 .ck-sec .head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.v2 .ck-sec .head .since { font-size: var(--t-13); color: var(--ink-4); }
.v2 .ck .drill { padding: 8px 2px; margin: -8px -2px; }   /* the same 36 px target for every drill on the page */
.v2 .ck-sec .sec-h .sec-ic { color: var(--sem-info); } .v2 .ck-sec.well .sec-h .sec-ic { color: var(--sem-well); } .v2 .ck-sec.gold .sec-h .sec-ic { color: var(--gold); } .v2 .ck-sec.pos .sec-h .sec-ic { color: var(--sem-pos); }
/* the review sheet: what the client sent, as one focused document on a cobalt-cooled surface; its section rules are cobalt */
.v2 .ck-sheet { margin-top: 26px; padding: 6px 26px 4px; border-radius: var(--r-2); background: var(--ws-checkin-surface); border: 1px solid var(--ws-checkin-line); }
.v2 .ck-sheet .ck-sec { border-top-color: var(--ws-checkin-rule); } .v2 .ck-sheet .ck-sec:first-child { border-top: 0; }
/* IN THEIR WORDS: first on the sheet, raised a step, verbatim, with room */
.v2 .ck-said { margin: 0 -12px; padding: 22px 12px 24px; border-radius: var(--r-2); background: var(--ws-checkin-raise); }
.v2 .ck-words { display: flex; flex-direction: column; gap: 20px; }
.v2 .ck-words .e-voice { font-size: 19px; line-height: 1.5; max-width: 64ch; white-space: pre-line; overflow-wrap: anywhere; }
.v2 .ck-words .who { font-size: var(--t-13); color: var(--ink-4); margin-top: 6px; }
/* FOR YOU: what they wrote to the coach, a cobalt rule and a little more weight — not an alarm */
.v2 .ck-ask { margin-top: 6px; padding: 14px 18px 16px; border-left: 2px solid var(--sem-info); background: var(--sem-info-wash); border-radius: 0 var(--r-1) var(--r-1) 0; }
.v2 .ck-ask .micro { margin-bottom: 8px; } .v2 .ck-ask .e-voice { font-size: 20px; }
/* HOW THEY'RE DOING: numerals as type; a neutral delta (glyph and size in ink); their own ratings read "/ 10" */
.v2 .ck-ans { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, max-content)); gap: 16px 40px; margin-top: 4px; }
.v2 .ck-ans > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.v2 .ck-ans .k { font-size: var(--t-12); color: var(--ink-3); } .v2 .ck-ans .v { display: flex; align-items: baseline; gap: 8px; }
.v2 .ck-ans .d { font-family: var(--f-interface); font-size: 12px; font-weight: 600; color: var(--ink-4); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.v2 .ck-ans.self .n .u { margin-left: 4px; font-size: 12px; }
.v2 .ck-grp { margin: 22px 0 10px; font-size: var(--t-13); font-weight: 500; color: var(--ink-3); }
/* WHAT CHANGED: label · from → to · delta, direction never coloured */
.v2 .ck-changed { display: flex; flex-direction: column; max-width: 560px; }
.v2 .ck-changed > div { display: grid; grid-template-columns: 110px minmax(0, 1fr) 92px; column-gap: 18px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--ws-checkin-rule); }
.v2 .ck-changed > div:first-child { border-top: 0; padding-top: 0; }
.v2 .ck-changed .k { font-size: var(--t-15); font-weight: 500; color: var(--ink-1); }
.v2 .ck-changed .c { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-editorial); font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-1); letter-spacing: -0.01em; } .v2 .ck-changed .c .ar { font-family: var(--f-interface); font-size: 13px; color: var(--ink-5); }
.v2 .ck-changed .d { font-size: var(--t-13); color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
/* CONTEXT: body · photos · adherence · training on the workspace, each with its identity colour and one drill */
.v2 .ck-ctx { margin-top: 8px; }
.v2 .ck .fig { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .v2 .ck .fig .s { font-size: var(--t-14); color: var(--ink-3); } .v2 .ck .fig .s b { font-weight: 600; color: var(--ink-1); }
.v2 .ck-figs { display: flex; align-items: flex-end; gap: 14px 36px; flex-wrap: wrap; } .v2 .ck-figs .fig { flex-direction: column; align-items: flex-start; gap: 6px; }
.v2 .ck-figs .fig .n-md .u { font-size: 12px; }
.v2 .ck-spark { display: block; overflow: visible; align-self: flex-end; margin-bottom: 4px; } .v2 .ck-spark polyline { fill: none; stroke: var(--sem-well); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } .v2 .ck-spark circle { fill: var(--sem-well); }
.v2 .ck-body .words { margin-top: 14px; font-size: var(--t-14); color: var(--ink-2); } .v2 .ck-body .words b { font-weight: 600; color: var(--ink-1); }
.v2 .ck-meas { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.v2 .ck-meas span { display: flex; flex-direction: column; gap: 3px; } .v2 .ck-meas i { font-style: normal; font-size: var(--t-12); color: var(--ink-4); } .v2 .ck-meas b { font-family: var(--f-editorial); font-size: 17px; font-weight: 500; color: var(--ink-1); font-variant-numeric: tabular-nums; } .v2 .ck-meas u { text-decoration: none; font-family: var(--f-interface); font-size: 11px; color: var(--ink-4); margin-left: 3px; }
.v2 .ck-photos { grid-template-columns: repeat(auto-fill, minmax(120px, 150px)); margin-top: 4px; }
.v2 .ck-noview { margin-top: 10px; font-size: var(--t-13); color: var(--ink-4); }
/* the scored components as one short column (label · figure · Self-reported / Slipping / No data where it applies), not chips */
.v2 .ck-comps { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.v2 .ck-comps span { display: flex; align-items: baseline; gap: 8px; font-size: var(--t-14); color: var(--ink-3); } .v2 .ck-comps i { font-style: normal; min-width: 76px; } .v2 .ck-comps b { font-family: var(--f-editorial); font-size: 18px; font-weight: 500; color: var(--ink-1); font-variant-numeric: tabular-nums; } .v2 .ck-comps em { font-style: normal; font-size: var(--t-12); color: var(--ink-4); } .v2 .ck-comps span.attn b, .v2 .ck-comps span.attn em:last-child { color: var(--sem-attn); } .v2 .ck-comps span.na b { color: var(--ink-5); font-family: var(--f-interface); }
.v2 .ck-tr .counts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; font-size: var(--t-14); color: var(--ink-3); } .v2 .ck-tr .counts b { font-family: var(--f-editorial); font-size: 18px; font-weight: 500; color: var(--ink-1); margin-right: 4px; } .v2 .ck-tr .counts .pos b { color: var(--sem-pos); } .v2 .ck-tr .counts .attn b { color: var(--sem-attn); }
.v2 .ck-tr .hl { margin-top: 12px; font-size: var(--t-14); color: var(--ink-2); } .v2 .ck-tr .hl b { font-weight: 600; color: var(--ink-1); } .v2 .ck-tr .hl .set { font-family: var(--f-editorial); font-size: 18px; font-weight: 500; color: var(--ink-1); margin-left: 6px; font-variant-numeric: tabular-nums; }
.v2 .ck .rep { margin-top: 12px; font-size: var(--t-14); color: var(--ink-3); } .v2 .ck .rep b { font-family: var(--f-editorial); font-size: 18px; font-weight: 500; color: var(--ink-1); margin-right: 2px; } .v2 .ck .rep em { font-style: normal; font-size: var(--t-12); color: var(--ink-4); margin-left: 10px; }
/* YOUR RESPONSE: the end of the page on its own surface — the last reply, the reply the client reads, or the form */
.v2 .ck-resp { margin-top: 10px; padding: 22px 26px 26px; border-radius: var(--r-2); background: var(--ws-checkin-surface); border: 1px solid var(--ws-checkin-line); }
.v2 .ck-resp .head .ck-state { font-size: var(--t-14); font-weight: 500; } .v2 .ck-resp .head .ck-tools { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.v2 .ck-last { margin: 4px 0 20px; max-width: 64ch; } .v2 .ck-last .micro { margin-bottom: 8px; } .v2 .ck-last .e-voice { font-size: 16px; color: var(--ink-2); } .v2 .ck-last .who { font-size: var(--t-13); color: var(--ink-4); margin-top: 6px; }
.v2 .ck-reply { max-width: 64ch; } .v2 .ck-reply .who { font-size: var(--t-13); color: var(--ink-4); margin-top: 8px; }
.v2 .ck-resp .acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .v2 .ck-resp .acts.top { margin: 0 0 14px; }
.v2 .ck-form { display: flex; flex-direction: column; gap: 8px; max-width: 64ch; } .v2 .ck-form .textarea { min-height: 112px; font-size: var(--t-15); line-height: 1.5; }
.v2 .ck-form .textarea:focus { border-color: var(--sem-info); box-shadow: 0 0 0 3px var(--sem-info-wash); outline: none; }
/* AFTER THIS CHECK-IN: a dated list, temporal not causal */
.v2 .ck-after { display: flex; flex-direction: column; } .v2 .ck-after > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-14); align-items: baseline; } .v2 .ck-after > div:first-child { border-top: 0; padding-top: 0; } .v2 .ck-after .d { font-size: var(--t-13); color: var(--ink-4); font-variant-numeric: tabular-nums; } .v2 .ck-after .t { color: var(--ink-2); }
/* ALL CHECK-INS: whole-row links, one line each — history is navigation */
.v2 .ck-list { margin-top: 22px; display: flex; flex-direction: column; max-width: 640px; }
.v2 .ck-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 110px 20px; column-gap: 14px; align-items: baseline; padding: 13px 10px; margin: 0 -10px; min-height: 46px; border-top: 1px solid var(--line-soft); border-radius: var(--r-1); color: inherit; text-decoration: none; transition: background var(--dur-1) var(--ease); }
.v2 .ck-row:first-child { border-top: 0; } .v2 .ck-row:hover { background: rgba(126, 162, 234, 0.07); }
.v2 .ck-row .d { font-family: var(--f-editorial); font-size: 19px; font-weight: 500; color: var(--ink-1); letter-spacing: -0.01em; }
.v2 .ck-row .k { font-size: var(--t-13); color: var(--ink-3); } .v2 .ck-row .k em { font-style: normal; color: var(--ink-4); }
.v2 .ck-row .st { font-size: var(--t-13); font-weight: 500; color: var(--sem-info); text-align: right; } .v2 .ck-row .st.replied { color: var(--ink-4); } .v2 .ck-row .st.reviewed { color: var(--ink-3); }
.v2 .ck-row .ar { color: var(--ink-5); text-align: right; transition: transform var(--dur-1) var(--ease); } .v2 .ck-row:hover .ar { color: var(--sem-info); transform: translateX(2px); }
@media (max-width: 719px) {
  .v2 .ck-sheet { padding: 2px 16px 0; } .v2 .ck-said { margin: 0 -8px; padding: 18px 8px 20px; }
  .v2 .ck-ans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
  .v2 .ck-ask { padding: 12px 14px 14px; } .v2 .ck-ask .e-voice { font-size: 19px; }
  .v2 .ck-changed > div { grid-template-columns: 90px minmax(0, 1fr) 70px; column-gap: 10px; } .v2 .ck-changed .c { font-size: 18px; }
  .v2 .ck-resp { padding: 18px 16px 20px; }
  .v2 .ck-row { grid-template-columns: 88px minmax(0, 1fr) 96px 20px; }
  .v2 .ck-nav { gap: 12px; }
}
@media (max-width: 479px) { .v2 .ck-row { grid-template-columns: 84px minmax(0, 1fr) 20px; } .v2 .ck-row .st { grid-column: 2; text-align: left; } .v2 .ck-row .k { display: none; } .v2 .ck-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ============================================================================
   37. COACHING WORKSPACE (Step 12F, 16 Sep 2026). SMALL COACHING CHANGE = SMALL
   INTERACTION. The Coaching tab keeps the service-aware domains and gains a
   QUICK EDIT depth: a plan reads as clean text at rest; a value shows it can be
   edited on hover / focus (and by a faint underline on touch); a tap turns it
   into an input in place. No Edit button beside every number, no per-row Save,
   no modal form. Publication stays one deliberate step: the quiet publish line
   ("3 unpublished changes · Review & publish →") and the review sheet, which
   names the real boundary (each plan publishes on its own).
   ========================================================================== */
/* the handoff context strip: where the coach came from and the way back */
.v2 .ws-ctx { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin: 14px 0 0; padding: 10px 14px; border-radius: var(--r-1); background: var(--sem-info-wash); border-left: 2px solid var(--sem-info); }
.v2 .ws-ctx .micro { display: inline-flex; align-items: center; gap: 8px; }
/* the publish line: quiet, sticky, one action */
.v2 .ws-pub { position: sticky; top: 0; z-index: 4; display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-top: 14px; padding: 12px 0 10px; background: var(--ground); border-bottom: 1px solid var(--line-soft); }
.v2 .ws-pub[hidden] { display: none; }
.v2 .ws-count { font-size: 15px; font-weight: 600; color: var(--ink-1); } .v2 .ws-count.quiet { font-weight: 500; color: var(--ink-4); }
.v2 .ws-plans { font-size: var(--t-13); color: var(--ink-4); }
.v2 .ws-save { margin-left: auto; font-size: var(--t-13); color: var(--ink-4); min-height: 1em; transition: color var(--dur-2) var(--ease); }
.v2 .ws-save.ok { color: var(--sem-pos); } .v2 .ws-save.err { color: var(--sem-alarm); font-weight: 500; }
/* a domain with a quick editor is a section, not a link; identity bar, icon disc, state and the way into the full editor stay */
.v2 .ws-dom { cursor: default; }
.v2 .ws-dom:hover { background: var(--ivory-tint); border-color: transparent; }
.v2 .ws-dom .c2-top .st.pub { color: var(--ink-4); }
.v2 .ws-dom .ws-open { margin-left: auto; font-size: var(--t-13); min-height: 32px; align-items: center; }
.v2 .ws-pub .drill, .v2 .ws-ctx .drill { min-height: 32px; align-items: center; }
.v2 .ws-why { margin: 8px 0 0; font-size: var(--t-13); color: var(--sem-attn); line-height: 1.45; }
.v2 .ws-body { margin-top: 12px; }
/* values at rest read as text; the affordance appears on hover / focus, and as a faint underline where there is no hover */
.v2 .qv { display: inline-block; max-width: 100%; min-width: 28px; border: 1px solid transparent; border-radius: 4px; background: none; padding: 4px 8px; margin: -4px -8px; font: inherit; font-size: var(--t-15); font-weight: 500; color: var(--ink-1); text-align: left; cursor: text; min-height: 32px; line-height: 1.5; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.v2 .qv:hover { background: var(--surface-1); } .v2 .qv:focus-visible { outline: 0; background: var(--surface-1); border-color: var(--gold-line); }
.v2 .qv.num { font-variant-numeric: tabular-nums; min-width: 36px; text-align: center; }
.v2 .qv.empty { color: var(--ink-5); font-weight: 400; }
.v2 .qv.name { font-weight: 600; } .v2 .qv.cue { font-size: var(--t-13); color: var(--ink-3); font-weight: 400; font-style: italic; } .v2 .qv.cue.empty { font-style: normal; color: var(--ink-5); }
.v2 .qv.note { font-size: var(--t-14); color: var(--ink-3); font-weight: 400; }
@media (pointer: coarse) { .v2 .qv { min-height: 40px; text-decoration: underline dotted rgba(243,237,226,0.28); text-underline-offset: 5px; } .v2 .qv.empty { text-decoration: none; } }
.v2 .qi { background: var(--surface-1); border: 1px solid var(--gold-line); border-radius: 4px; color: var(--ink-1); font: inherit; font-size: var(--t-15); font-weight: 500; padding: 4px 8px; margin: -4px -8px; min-width: 56px; max-width: 100%; outline: 0; }
.v2 .qi.num { font-variant-numeric: tabular-nums; }
.v2 .qsel { appearance: none; border: 1px solid transparent; border-radius: 4px; background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23857d71' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 6px center; color: var(--ink-1); font: inherit; font-size: var(--t-14); font-weight: 500; padding: 4px 22px 4px 8px; margin: -4px 0 -4px -8px; min-height: 32px; cursor: pointer; }
.v2 .qsel:hover { background-color: var(--surface-1); } .v2 .qsel:focus-visible { outline: 0; background-color: var(--surface-1); border-color: var(--gold-line); }
/* rows: separated by soft lines, never boxes; the grip and the ••• sit at the edges */
.v2 .ws-list { list-style: none; margin: 0; padding: 0; }
.v2 .ws-row { display: grid; align-items: center; column-gap: 14px; padding: 9px 0; min-height: 44px; border-top: 1px solid var(--line-soft); position: relative; }
.v2 .ws-row:first-child { border-top: 0; }
.v2 .ws-row .nm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2 .ws-row .facts { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--t-12); color: var(--ink-4); } .v2 .ws-row .facts .last { color: var(--ink-5); font-variant-numeric: tabular-nums; }
.v2 .ws-row.dragging { opacity: 0.45; } .v2 .ws-row.over { box-shadow: inset 0 2px 0 var(--gold); }
.v2 .ws-row.off .nm, .v2 .ws-row.off .tgt { color: var(--ink-4); } .v2 .ws-row.off .qv { color: var(--ink-4); }
.v2 .grip { font-size: var(--t-12); color: var(--ink-5); font-variant-numeric: tabular-nums; cursor: grab; user-select: none; } .v2 .grip b { color: var(--gold-champagne); font-weight: 600; }
.v2 .ws-ops { position: relative; display: inline-flex; align-items: center; }
.v2 .ws-more { width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--r-1); background: none; color: var(--ink-4); font: inherit; font-size: 11px; letter-spacing: 0.06em; cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.v2 .ws-more:hover, .v2 .ws-more:focus-visible { background: var(--surface-1); color: var(--ink-1); outline: 0; }
.v2 .tlink.ws-more { width: auto; height: auto; min-height: 32px; display: inline-flex; align-items: center; padding: 0; border: 0; background: none; letter-spacing: 0; font-size: var(--t-13); }
.v2 .ws-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 7; display: flex; flex-direction: column; min-width: 190px; padding: 6px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-2); }
.v2 .ws-menu[hidden] { display: none; }
.v2 .ws-menu button, .v2 .ws-menu a { display: flex; justify-content: space-between; gap: 12px; border: 0; background: none; text-align: left; padding: 9px 10px; min-height: 36px; border-radius: var(--r-1); font: inherit; font-size: var(--t-14); color: var(--ink-2); cursor: pointer; text-decoration: none; }
.v2 .ws-menu button:hover, .v2 .ws-menu button:focus-visible, .v2 .ws-menu a:hover { background: var(--gold-wash); color: var(--gold-champagne); outline: 0; }
.v2 .ws-menu button[disabled] { opacity: 0.4; cursor: default; } .v2 .ws-menu button.danger:hover { color: var(--attn); }
.v2 .ws-menu .sub { font-size: var(--t-12); color: var(--ink-4); } .v2 .ws-menu a.faint { color: var(--ink-4); font-size: var(--t-13); }
.v2 .ws-add { padding: 8px 0 0; position: relative; }
.v2 .ws-add .exsearch, .v2 .ws-add .fsearch { margin-top: 4px; }
/* training: session chips, the exercise rows, cardio as one line */
.v2 .ws-days { display: flex; flex-wrap: wrap; gap: 6px; }
.v2 .ws-day { display: flex; flex-direction: column; gap: 1px; min-width: 96px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--panel-line); border-radius: var(--r-1); background: transparent; text-align: left; color: inherit; font: inherit; cursor: pointer; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.v2 .ws-day:hover { background: var(--surface-2); } .v2 .ws-day[aria-selected="true"] { border-color: var(--gold-line); background: var(--gold-wash); } .v2 .ws-day:focus-visible { outline: 0; border-color: var(--gold-line); }
.v2 .ws-day .wd { font-size: var(--t-12); font-weight: 600; color: var(--ink-4); } .v2 .ws-day[aria-selected="true"] .wd { color: var(--gold-champagne); }
.v2 .ws-day .wn { font-size: var(--t-14); font-weight: 600; color: var(--ink-1); } .v2 .ws-day.rest .wn { color: var(--ink-4); font-weight: 500; } .v2 .ws-day.rest { border-style: dashed; }
.v2 .ws-sess { margin-top: 14px; }
.v2 .ws-sh { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; padding-bottom: 6px; }
.v2 .ws-sh .nm { font-size: 17px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.005em; } .v2 .ws-sh .day { font-size: var(--t-13); color: var(--ink-3); } .v2 .ws-sh .ws-ops { margin-left: auto; }
.v2 .ws-ex { grid-template-columns: 22px minmax(0, 1fr) auto 84px 34px; }
.v2 .ws-ex .rx { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; } .v2 .ws-ex .rx .x { color: var(--ink-5); padding: 0 6px; }
.v2 .ws-ex .rest .qv { color: var(--ink-2); font-weight: 500; }
.v2 .ws-ex .qv.cue { margin-top: 2px; }
/* an empty cue is not part of the resting plan: it appears with the row on hover / focus (and lives in the ••• menu for touch) */
.v2 .ws-ex .qv.cue.empty { opacity: 0; transition: opacity var(--dur-1) var(--ease); } .v2 .ws-ex:hover .qv.cue.empty, .v2 .ws-ex:focus-within .qv.cue.empty, .v2 .ws-ex .qv.cue.empty:focus-visible { opacity: 1; }
@media (pointer: coarse) { .v2 .ws-ex .qv.cue.empty { display: none; } }
.v2 .exsearch.inline { display: block; min-width: 240px; }
.v2 .ws-cardio { display: flex; align-items: center; gap: 2px 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: var(--t-15); }
.v2 .ws-cardio .k { font-weight: 600; color: var(--ink-3); font-size: var(--t-13); margin-right: 6px; } .v2 .ws-cardio .sep { color: var(--ink-5); } .v2 .ws-cardio .tlink.faint { color: var(--ink-5); margin-left: 8px; } .v2 .ws-cardio .tlink.faint:hover { color: var(--attn); }
/* nutrition: targets as figures, meals as rows */
.v2 .ws-targets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; padding: 4px 0 6px; }
.v2 .ws-tg { display: flex; flex-direction: column; gap: 4px; } .v2 .ws-tg .v { display: flex; align-items: baseline; gap: 4px; }
.v2 .ws-tg .qv.big { font-family: var(--f-editorial); font-weight: 500; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; font-variation-settings: "SOFT" 0, "WONK" 0; padding: 2px 8px; margin: -2px -8px; }
.v2 .ws-tg .u { font-size: var(--t-13); color: var(--ink-4); }
.v2 .ws-meal { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.v2 .ws-meal .mh { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; } .v2 .ws-meal .mh .nm { font-size: 15px; font-weight: 600; color: var(--ink-1); } .v2 .ws-meal .mh .tm { font-size: var(--t-13); color: var(--ink-4); } .v2 .ws-meal .mh .tot { margin-left: auto; font-size: var(--t-13); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.v2 .ws-food { grid-template-columns: minmax(0, 1fr) auto 84px 34px; }
.v2 .ws-food .fn { font-size: var(--t-15); font-weight: 500; color: var(--ink-1); }
.v2 .ws-food .amt { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .v2 .ws-food .amt .qsel { margin-left: 2px; }
.v2 .ws-food .kcal { font-size: var(--t-13); color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.v2 .ws-note { padding: 6px 0 0; }
.v2 .ws-swap { margin: 6px 0 4px 0; padding: 12px 14px; border-radius: var(--r-2); background: var(--surface-1); border: 1px solid var(--line-strong); }
.v2 .ws-swap .k { font-size: var(--t-13); color: var(--ink-3); margin-bottom: 8px; }
.v2 .ws-swap-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; align-items: start; } .v2 .ws-swap-opts .tlink.faint { grid-column: 1 / -1; justify-self: start; color: var(--ink-4); }
.v2 .ws-track { margin-top: 6px; }
/* standards: name · target · unit */
.v2 .ws-std { grid-template-columns: minmax(0, 1fr) auto 34px; }
.v2 .ws-std .tgt { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; } .v2 .ws-std .tgt .u { font-size: var(--t-13); color: var(--ink-4); } .v2 .ws-std .tick { font-size: var(--t-13); color: var(--ink-4); }
/* the review sheet lives in the drawer (outside the .v2 scope): its select and its way back carry the same treatment */
.ws-rg .qsel, .ws-rev-done .qsel { appearance: none; border: 1px solid transparent; border-radius: 4px; background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23857d71' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 6px center; color: var(--ink-1); font: inherit; font-size: var(--t-14); font-weight: 500; padding: 4px 22px 4px 8px; min-height: 32px; cursor: pointer; }
.ws-rg .qsel:hover { background-color: var(--surface-1); } .ws-rg .qsel:focus-visible { outline: 0; background-color: var(--surface-1); border-color: var(--gold-line); }
.ws-rev-done .drill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-family: var(--f-interface); font-size: var(--t-14); font-weight: 500; color: var(--gold-champagne); text-decoration: none; white-space: nowrap; transition: color var(--dur-1) var(--ease); }
.ws-rev-done .drill:hover { color: var(--gold-pale); } .ws-rev-done .drill .ar { display: inline-block; transition: transform var(--dur-1) var(--ease); } .ws-rev-done .drill:hover .ar { transform: translateX(2px); }
/* the review sheet: groups by plan, the boundary said once, changes as where · what */
.ws-boundary { margin-bottom: 14px; }
.ws-rev { display: flex; flex-direction: column; gap: 16px; }
.ws-rg { position: relative; padding: 4px 0 8px 16px; }
.ws-rg::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--ink-5); }
.ws-rg.pos::before { background: var(--sem-pos); } .ws-rg.gold::before { background: var(--gold); } .ws-rg.well::before { background: var(--sem-well); }
.ws-rg .head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.ws-rg .head .nm { font-size: 15px; font-weight: 600; color: var(--ink-1); } .ws-rg .head .cnt { font-size: var(--t-13); color: var(--ink-4); }
.ws-rg .head .eff { margin-left: auto; font-size: var(--t-13); color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; } .ws-rg .head .eff .qsel { color: var(--ink-1); }
.ws-rg .head .st { font-size: var(--t-13); font-weight: 500; color: var(--ink-4); min-width: 60px; text-align: right; }
.ws-rg .head .st.ready { color: var(--ink-3); } .ws-rg .head .st.busy { color: var(--gold-champagne); } .ws-rg .head .st.done { color: var(--sem-pos); } .ws-rg .head .st.failed { color: var(--sem-alarm); } .ws-rg .head .st.blocked { color: var(--sem-attn); }
.ws-rg .ws-why { margin: 6px 0 0; }
.ws-diff { list-style: none; margin: 8px 0 0; padding: 0; }
.ws-diff li { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); column-gap: 14px; padding: 5px 0; font-size: var(--t-14); color: var(--ink-2); border-top: 1px solid var(--line-soft); }
.ws-diff li:first-child { border-top: 0; }
.ws-diff .where { color: var(--ink-4); font-size: var(--t-13); } .ws-diff .what b { font-weight: 600; color: var(--ink-1); }
.ws-rev-done { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ws-rev-done .t { font-size: var(--t-15); font-weight: 600; color: var(--ink-1); }
/* responsive: iPad keeps the desktop rows; the phone stacks the value cluster under the name */
@media (max-width: 1023px) { .v2 .ws-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v2 .ws-swap-opts { grid-template-columns: 1fr; } }
@media (max-width: 639px) {
  .v2 .ws-dom { grid-template-columns: 32px minmax(0, 1fr); } .v2 .ws-dom .ws-open { grid-column: 2; }
  .v2 .ws-ex { grid-template-columns: 18px minmax(0, 1fr) 34px; row-gap: 4px; } .v2 .ws-ex .rx, .v2 .ws-ex .rest { grid-column: 2; }
  .v2 .ws-food { grid-template-columns: minmax(0, 1fr) 34px; } .v2 .ws-food .amt, .v2 .ws-food .kcal { grid-column: 1; text-align: left; }
  .v2 .ws-std { grid-template-columns: minmax(0, 1fr) 34px; } .v2 .ws-std .tgt { grid-column: 1; }
  .v2 .ws-ctx { flex-direction: column; align-items: flex-start; }
  .ws-diff li { grid-template-columns: 1fr; row-gap: 2px; }
  .v2 .ws-pub { top: 0; }
}

/* ============================================================================
   38. EDITOR CHROME — STEP 12F FINAL VISUAL / NOISE POLISH (16 Sep 2026)
   LOCKED: INFORMATION VISIBLE · OPERATIONS ON DEMAND. The full editors carry
   the same generation as the Coaching Workspace: the plan first, one ••• for
   the rare operations, one quiet state line (published · draft · saved), a
   context strip when the coach came from a check-in. No new visual system —
   the workspace's disclosure treatment on the editors' existing surfaces.
   ========================================================================== */
/* the workspace domain blocks: one restrained step quieter — a fainter surface and a hairline instead of a hover border;
   the 2 px identity rule, the icon disc, the state word and the way in stay exactly where they were */
.v2 .ws-dom, .v2 .ws-dom:hover { background: rgba(243,237,226,0.02); border-color: rgba(243,237,226,0.045); }
.v2 .ws-dom .c2-ic { background: transparent; box-shadow: inset 0 0 0 1px rgba(243,237,226,0.07); }
/* the handoff context strip inside a full editor (the editors sit outside the .v2 scope): where the coach came from, the way back */
.ed-ctx { display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap; margin: 2px 0 14px; padding: 9px 14px; border-radius: var(--r-1); background: var(--sem-info-wash); border-left: 2px solid var(--sem-info); }
.ed-ctx-t { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-13); font-weight: 600; color: var(--sem-info); }
.ed-ctx-t .mic { width: 14px; height: 14px; flex: none; }
.ed-ctx .drill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--t-14); font-weight: 500; color: var(--gold-champagne); text-decoration: none; white-space: nowrap; transition: color var(--dur-1) var(--ease); }
.ed-ctx .drill:hover { color: var(--gold-pale); } .ed-ctx .drill .ar { display: inline-block; transition: transform var(--dur-1) var(--ease); } .ed-ctx .drill:hover .ar { transform: translateX(2px); }
/* the state line: Published Aug 27 · Draft · 2 changes · Saved */
.pubstate { flex-wrap: wrap; row-gap: 4px; }
.pubstate .sw { color: var(--ink-4); min-height: 1em; transition: color var(--dur-2) var(--ease); } .pubstate .sw:empty { display: none; }
.pubstate .sw.ok { color: var(--ok); } .pubstate .sw.err { color: var(--attn); font-weight: 500; }
/* the page actions: primary when something is unpublished, one secondary, one ••• */
.tr-actions { flex-wrap: wrap; row-gap: 8px; }
.ed-ops { position: relative; display: inline-flex; align-items: center; }
.ed-more { width: 34px; height: 32px; border: 1px solid transparent; border-radius: var(--r-1); background: transparent; color: var(--ink-4); font: inherit; font-size: 11px; letter-spacing: 0.06em; cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.ed-more:hover, .ed-more:focus-visible, .ed-more[aria-expanded="true"] { background: var(--surface-2); color: var(--ink-1); outline: 0; }
.tr-actions .ed-more { background: var(--surface-1); border-color: var(--line-strong); color: var(--ink-2); }
.tr-actions .ed-more:hover, .tr-actions .ed-more:focus-visible, .tr-actions .ed-more[aria-expanded="true"] { background: var(--surface-2); color: var(--ink-1); }
.ed-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 7; display: flex; flex-direction: column; min-width: 200px; padding: 6px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-2); }
.ed-menu[hidden] { display: none; }
.ed-menu button, .ed-menu a { display: flex; justify-content: space-between; gap: 12px; border: 0; background: none; text-align: left; padding: 9px 10px; min-height: 36px; border-radius: var(--r-1); font: inherit; font-size: var(--t-14); color: var(--ink-2); cursor: pointer; text-decoration: none; }
.ed-menu button:hover, .ed-menu button:focus-visible, .ed-menu a:hover { background: var(--gold-wash); color: var(--gold-champagne); outline: 0; }
.ed-menu button[disabled] { opacity: 0.4; cursor: default; } .ed-menu button.danger:hover { color: var(--attn); }
.ed-menu .sub { font-size: var(--t-12); color: var(--ink-4); }
.ed-menu .mi-sel { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft); font-size: var(--t-13); color: var(--ink-3); }
.ed-menu .mi-sel .cell.sel.mini { width: auto; margin: 0; padding: 3px 22px 3px 8px; font-size: var(--t-13); color: var(--ink-1); background-color: var(--surface-1); border-color: var(--line); }
/* training: session actions beside the name; the prescription menu in four groups */
.sed-tools { padding-top: 2px; }
.addmenu.grouped { display: flex; flex-wrap: wrap; gap: 10px 18px; min-width: 0; width: max-content; max-width: min(680px, calc(100vw - 48px)); padding: 10px 12px 12px; }
.addmenu.grouped .mg { display: flex; flex-direction: column; min-width: 124px; }
.addmenu.grouped .mgl { font-size: var(--t-12); font-weight: 600; color: var(--ink-4); padding: 2px 10px 5px; }
.addmenu.grouped button { padding: 7px 10px; }
/* nutrition: the target discrepancy as one signal, detail on request; the client view one level down */
.tg-gap { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.tg-gap .tlink { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: var(--t-13); }
.tg-detail { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 20px; }
.tg-detail[hidden] { display: none; }
.tg-detail li { display: flex; flex-direction: column; gap: 1px; font-size: var(--t-13); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.tg-detail li b { font-weight: 500; color: var(--ink-2); } .tg-detail li .off { color: var(--gold-champagne); }
.tg-track { margin-top: 12px; font-size: var(--t-13); color: var(--ink-4); }
.mhead { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 14px; align-items: center; }
.cv-sum { margin-top: 8px; font-size: var(--t-14); color: var(--ink-2); line-height: 1.5; }
.cv-toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; min-height: 32px; }
.cv-cfg { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-soft); } .cv-cfg[hidden] { display: none; }
.cv-pkg { margin-top: 8px; font-size: var(--t-12); color: var(--ink-4); }
/* standards: question operations behind ⋯ like the standards' own */
.q { grid-template-columns: minmax(0, 1fr) 140px 28px; }
.q .qops.sops { opacity: 1; padding-top: 0; display: block; }
/* responsive: iPad keeps the desktop rows; the phone stacks the meal head and keeps every menu inside the viewport */
@media (max-width: 1023px) { .mhead { grid-template-columns: minmax(0, 1fr) auto auto; } .mhead .mtools { grid-column: auto; } .tg-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .mhead { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; } .mhead .mtot { grid-column: 1; } .mhead .ed-ops { grid-row: 1; grid-column: 2; }
  .ed-menu { min-width: 180px; max-width: calc(100vw - 40px); }
  .addmenu.grouped { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-width: none; max-height: 70vh; overflow: auto; z-index: 30; }   /* a phone gets the prescription menu as a sheet, never past the edge */
  .ed-ctx { flex-direction: column; align-items: flex-start; }
  .tr-state { align-items: flex-start; }
}
/* the row ⋯ on standards, questions and foods: a full 28 px touch width inside its existing column */
.sops .exp, .fops .exp, .apio .exp { min-width: 28px; }
/* nutrition on a phone: the ledger stacks — food · ⋯ / amount · 330 kcal · 62P · 0C · 7F — the same cells, labelled by their column */
@media (max-width: 639px) {
  .fhead { display: none; }
  .frow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 8px 0; }
  .frow:hover { margin: 0; padding-left: 0; padding-right: 0; }
  .frow .fn { flex: 1 1 calc(100% - 44px); order: 0; min-width: 0; }
  .frow .fops { order: 1; flex: 0 0 auto; }
  .frow .fa { order: 2; flex: 0 0 100%; }
  .frow .fk, .frow .fm { order: 3; text-align: left; font-size: var(--t-13); }
  .frow .fk::after { content: " kcal"; color: var(--ink-4); } .frow .fm::after { content: attr(data-m); color: var(--ink-4); }
  .frow .fm { color: var(--ink-3); }
  .mname { flex-wrap: wrap; } .mname .cell.h2 { min-width: 0; max-width: 100%; }
}
/* the meal menu: the client-swaps setting reads on one line */
.ed-menu .mi-sel span { white-space: nowrap; } .mhead .ed-menu { min-width: 236px; }
/* iPad landscape (1024): the plan is the hero — the editor takes the full width and the context / adherence panel follows below,
   so exercise and food names never truncate beside a 38 % aside */
@media (max-width: 1100px) {
  .tr-grid, .nu-grid, .sd-grid { grid-template-columns: 1fr; row-gap: 20px; }
  .exhead, .exr { grid-template-columns: 26px minmax(0, 1fr) 168px 92px 28px; column-gap: 14px; }
  .fhead, .frow { grid-template-columns: minmax(0, 1fr) 150px 58px 46px 46px 46px 28px; column-gap: 12px; }
  .std { grid-template-columns: minmax(0, 1fr) 190px 28px; }
}
/* training on a phone: the exercise row stacks — name · ▾ / sets × reps / rest — the same cells, nothing past the edge */
@media (max-width: 639px) {
  .exhead, .exr { grid-template-columns: 20px minmax(0, 1fr) 28px; column-gap: 10px; row-gap: 4px; }
  .exr .rx, .exr .cell.rest { grid-column: 2; } .exr .exp { grid-column: 3; grid-row: 1; }
  .exr .rx { grid-template-columns: 44px 14px minmax(0, 120px); }
  .exadv { padding-left: 0; } .exadd { padding-left: 0; }
  .agrid, .cgrid { grid-template-columns: 1fr; }
  .sed { padding: 14px 14px 16px; }
}

/* ============================================================================
   39. SESSION MODE — the iPad coaching instrument (17 Sep 2026)
   COACH FIRST, LOG SECOND. A dedicated live shell (the rail collapses while a
   session is live; client · session · save state · exit / finish always in
   view), one restrained forest tone (the Training identity, documented in
   §10.5 and applied here for the first time), large touch surfaces for the
   set grid, dense enough to coach four exercises at 1024 × 768 without
   scrolling. No cards per set, no pills, no POS terminal.
   ========================================================================== */
:root { --ws-session-bg: #0e120f; --ws-session-surface: rgba(98,179,143,0.045); --ws-session-line: rgba(98,179,143,0.18); --ws-session-raise: rgba(243,237,226,0.035); }
.workspace[data-ws="session"] { background: var(--ws-session-bg); transition: background var(--dur-2) var(--ease); }
/* the live shell: the rail leaves, the workspace is the whole width */
#hq.sm-live { grid-template-columns: 1fr; }
#hq.sm-live .rail { display: none; }
#hq.sm-live .workspace { max-width: none; min-height: 100vh; padding: 0 0 56px; }
.v2.sm { max-width: 980px; }
.v2.sm .sm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 6px; }
.v2.sm .sm-line { margin-top: 8px; font-size: var(--t-14); color: var(--ink-3); }
.v2.sm .sm-notice { margin: 16px 0 0; }
.v2.sm .sm-sec { margin-top: 30px; } .v2.sm .sm-sec > .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.v2.sm .sm-list { display: flex; flex-direction: column; }
/* a session row: time · who · state · the one action */
.v2.sm .sm-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) 96px auto; column-gap: 16px; align-items: center; min-height: 58px; padding: 10px 12px; margin: 0 -12px; border-radius: var(--r-1); color: inherit; text-decoration: none; position: relative; transition: background var(--dur-1) var(--ease); }
.v2.sm .sm-row + .sm-row::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--line-soft); }
.v2.sm a.sm-row:hover { background: var(--surface-1); }
.v2.sm .sm-row .t { font-family: var(--f-editorial); font-size: 18px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2.sm .sm-row .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .v2.sm .sm-row .nm { font-size: var(--t-16); font-weight: 600; color: var(--ink-1); } .v2.sm .sm-row .ds { font-size: var(--t-13); color: var(--ink-4); }
.v2.sm .sm-row .st { font-size: var(--t-13); color: var(--ink-4); } .v2.sm .sm-row .st.ok { color: var(--ink-3); } .v2.sm .sm-row .st.ns { color: var(--sem-alarm); } .v2.sm .sm-row .st.attn { color: var(--sem-attn); } .v2.sm .sm-row .st.now { color: var(--sem-pos); font-weight: 600; }
.v2.sm .sm-row.live { background: var(--ws-session-surface); } .v2.sm .sm-row.live::before { display: none; }
.v2.sm .sm-row .act { justify-self: end; } .v2.sm .sm-row .act .drill { min-height: 36px; align-items: center; } .v2.sm .quiet-link { color: var(--ink-3); }
/* start chooser: the last session's own facts, then three whole-row options */
.v2.sm .sm-resume { margin-top: 22px; }
.v2.sm .sm-last { margin-top: 26px; padding: 14px 18px 14px; border-left: 2px solid var(--sem-pos); background: var(--ws-session-raise); border-radius: 0 var(--r-1) var(--r-1) 0; }
.v2.sm .sm-last > .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.v2.sm .sm-tops { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; font-size: var(--t-14); color: var(--ink-2); } .v2.sm .sm-tops b { font-weight: 500; color: var(--ink-1); margin-right: 6px; }
.v2.sm .sm-ctxline { margin-top: 8px; font-size: var(--t-13); color: var(--ink-3); }
.v2.sm .sm-note { margin-top: 10px; font-size: 17px; }
.v2.sm .sm-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.v2.sm .sm-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; width: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--ws-session-raise); color: inherit; text-align: left; font: inherit; cursor: default; }
.v2.sm button.sm-opt { cursor: pointer; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .v2.sm button.sm-opt:hover, .v2.sm button.sm-opt:focus-visible { background: var(--ws-session-surface); border-color: var(--ws-session-line); outline: 0; }
.v2.sm .sm-opth { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .v2.sm .sm-opth .nm { font-size: var(--t-17); font-weight: 600; color: var(--ink-1); } .v2.sm .sm-opth .ds { font-size: var(--t-13); color: var(--ink-4); overflow-wrap: anywhere; }
.v2.sm .sm-opt .go { font-size: var(--t-14); font-weight: 500; color: var(--gold-champagne); white-space: nowrap; } .v2.sm .sm-opt .go .ar { display: inline-block; }
.v2.sm .sm-psess { grid-column: 1 / -1; display: flex; flex-direction: column; margin-top: 8px; }
.v2.sm .sm-ps { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; width: 100%; min-height: 50px; padding: 8px 10px; margin: 0 -10px; width: calc(100% + 20px); border: 0; border-top: 1px solid var(--line-soft); background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; border-radius: var(--r-1); transition: background var(--dur-1) var(--ease); }
.v2.sm .sm-ps:hover, .v2.sm .sm-ps:focus-visible { background: var(--surface-1); outline: 0; }
.v2.sm .sm-ps .nm { font-size: var(--t-15); font-weight: 600; color: var(--ink-1); } .v2.sm .sm-ps .ds { font-size: var(--t-13); color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2.sm .sm-ps .go { font-size: var(--t-13); font-weight: 500; color: var(--gold-champagne); white-space: nowrap; }
.v2.sm .sm-ps.today .nm::after { content: "Today"; margin-left: 8px; font-size: var(--t-12); font-weight: 600; color: var(--sem-pos); }
/* ---- the live session (17 Sep 2026 final polish: an iPad instrument, not a logging form) ----
   The shell takes the whole width. Each exercise is ONE working band across it: identity on the left (movement · target ·
   machine + setup · previous performance), the set grid on the right (the heart of the page: weight and reps the strongest
   editable values, one row per set, no borders between rows), the ••• at the edge. Planned rows dashed; a performed row
   loses its boxes and keeps a small emerald check; a failed row carries its own red word. */
.sm-active { --sm-in: 48px; } .v2.sm.sm-active { max-width: none; }   /* the live shell is the one Session Mode page that takes the whole width */
.sm-bar { position: sticky; top: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 20px; align-items: center; min-height: 64px; padding: 8px 28px; background: var(--ws-session-bg); border-bottom: 1px solid var(--ws-session-line); }
.sm-bar .sm-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sm-bar .sm-id .nm { font-family: var(--f-editorial); font-weight: 500; font-size: 22px; line-height: 1.1; letter-spacing: -0.012em; color: var(--ink-1); font-variation-settings: "SOFT" 0, "WONK" 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-bar .sm-id .ds { display: flex; align-items: center; gap: 8px; font-size: var(--t-14); color: var(--ink-3); white-space: nowrap; } .sm-bar .sm-id .ses { font-weight: 500; color: var(--ink-2); } .sm-bar .sm-id .sep { color: var(--ink-5); }
.sm-bar .sm-loc { border: 0; background: none; padding: 0; min-height: 28px; font: inherit; font-size: var(--t-14); color: var(--ink-3); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: color var(--dur-1) var(--ease); }
.sm-bar .sm-loc:hover, .sm-bar .sm-loc:focus-visible { color: var(--gold-champagne); text-decoration-color: currentColor; outline: 0; }
.sm-bar .sm-loc.need { color: var(--sem-attn); font-weight: 600; text-decoration-color: var(--sem-attn); } .sm-bar .sm-loc .ar { display: inline-block; }
.sm-save { font-size: var(--t-13); color: var(--ink-4); white-space: nowrap; min-width: 48px; text-align: right; } .sm-save.ok { color: var(--sem-pos); } .sm-save.err { color: var(--sem-alarm); font-weight: 600; }
.sm-acts { display: flex; gap: 6px; align-items: center; } .sm-acts .btn { height: 44px; padding: 0 18px; font-size: var(--t-14); } .sm-acts .btn-ghost { padding: 0 12px; }
.sm-body { padding: 0 28px; max-width: 1180px; }
.sm-exs { display: flex; flex-direction: column; }
/* an exercise band: identity · the set grid · the ••• */
.sm-ex { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 480px) 44px; grid-template-areas: "id grid ops"; column-gap: 24px; align-items: start; padding: 16px 0 12px; border-bottom: 1px solid var(--line-soft); }
.sm-ex.skipped { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id grid"; padding: 10px 0; align-items: center; }
.sm-exn { grid-area: id; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 2px; }
.sm-exr { grid-area: grid; min-width: 0; }
.sm-ops { grid-area: ops; position: relative; display: inline-flex; align-items: center; justify-self: end; }
.sm-exn h2 { font-family: var(--f-editorial); font-weight: 500; font-size: 26px; line-height: 1.1; letter-spacing: -0.014em; color: var(--ink-1); font-variation-settings: "SOFT" 0, "WONK" 0; margin: 0; overflow-wrap: anywhere; }
.sm-ex.skipped .sm-exn { flex-direction: row; align-items: baseline; gap: 12px; } .sm-ex.skipped .sm-exn h2 { color: var(--ink-4); font-size: 20px; } .sm-ex.skipped .sm-undo { min-height: 40px; padding: 0 10px; font-size: var(--t-14); }
.sm-exm { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-size: var(--t-14); color: var(--ink-3); }
.sm-tgt { font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sm-repl { font-size: var(--t-13); color: var(--sem-attn); }
.sm-eq { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; color: var(--ink-3); } .sm-eq b { font-weight: 500; color: var(--ink-2); } .sm-eq .su { color: var(--ink-3); font-variant-numeric: tabular-nums; } .sm-eq .sep { color: var(--ink-5); }
.sm-eq .tlink { min-height: 32px; padding: 0 6px; margin-left: 2px; font-size: var(--t-13); color: var(--ink-4); border-radius: var(--r-1); } .sm-eq .tlink:hover, .sm-eq .tlink:focus-visible { color: var(--gold-champagne); background: var(--surface-1); outline: 0; }
/* the gate: where the set grid would be, because logging is blocked there — text + arrow + dashed edge, never colour alone */
.sm-eqgate { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; margin-top: 22px; border: 1px dashed var(--sem-attn-line, var(--sem-attn)); border-radius: var(--r-1); background: var(--sem-attn-wash, transparent); color: var(--sem-attn); font: inherit; font-size: var(--t-15); font-weight: 600; cursor: pointer; }
.sm-eqgate:hover, .sm-eqgate:focus-visible { border-style: solid; outline: 0; } .sm-eqgate .ar { display: inline-block; }
/* previous performance: the question is only "what did they do last time on this machine" — one lockup, More → for the sets */
.sm-prev { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
.sm-prev .k { font-size: var(--t-12); color: var(--ink-4); } .sm-prev.faint .k { color: var(--ink-5); font-size: var(--t-13); }
.sm-prev .v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.sm-prev .v > b { font-family: var(--f-editorial); font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.sm-prev .d { font-size: var(--t-13); color: var(--ink-4); }
.sm-prev .bst { font-size: var(--t-13); color: var(--ink-4); } .sm-prev .bst b { font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sm-prev .sm-morep { min-height: 32px; padding: 0 6px; margin-left: -6px; font-size: var(--t-13); color: var(--ink-3); border-radius: var(--r-1); } .sm-prev .sm-morep:hover, .sm-prev .sm-morep:focus-visible { color: var(--gold-champagne); background: var(--surface-1); outline: 0; } .sm-prev .sm-morep .ar { display: inline-block; }
.sm-prevd { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 2px; padding: 10px 12px; background: var(--ws-session-raise); border-radius: var(--r-1); }
.sm-prevd > div { display: grid; grid-template-columns: minmax(96px, 130px) minmax(0, 1fr); column-gap: 12px; font-size: var(--t-14); align-items: baseline; }
.sm-prevd .d { display: flex; flex-direction: column; color: var(--ink-3); } .sm-prevd .d .w { font-size: var(--t-12); color: var(--ink-5); }
.sm-prevd .s { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--ink-1); font-variant-numeric: tabular-nums; } .sm-prevd .faint { color: var(--ink-5); }
.sm-prevd > div.oth { display: block; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line-soft); } .sm-prevd .oth .lbl { font-size: var(--t-12); color: var(--ink-5); }
.sm-prevd > div.other .d { color: var(--ink-4); } .sm-prevd > div.other .s { color: var(--ink-2); }
.sm-pick { display: flex; flex-direction: column; gap: 8px; } .sm-pick .sm-opt { padding: 12px 14px; background: var(--surface-1, transparent); } .sm-pick .sm-opt.is-current { border-color: var(--gold-champagne); } .sm-pick .sm-opt .go { font-size: var(--t-13); color: var(--gold-champagne); }
.sm-newrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .sm-newrow:has(#sm-newvar-detail) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; }
.v2.sm .sm-cex .nm .sm-ceq { display: block; font-size: var(--t-13); font-weight: 400; color: var(--ink-3); }
.sm-more { width: 44px; height: 44px; border: 1px solid transparent; border-radius: var(--r-1); background: transparent; color: var(--ink-4); font: inherit; font-size: 11px; letter-spacing: 0.06em; cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.sm-more:hover, .sm-more:focus-visible, .sm-more[aria-expanded="true"] { background: var(--surface-2); color: var(--ink-1); outline: 0; }
.sm-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 7; display: flex; flex-direction: column; min-width: 220px; padding: 6px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-2); }
.sm-menu[hidden] { display: none; }
.sm-menu button { display: flex; justify-content: space-between; gap: 12px; border: 0; background: none; text-align: left; padding: 10px 12px; min-height: 44px; border-radius: var(--r-1); font: inherit; font-size: var(--t-14); color: var(--ink-2); cursor: pointer; }
.sm-menu button:hover, .sm-menu button:focus-visible { background: var(--gold-wash); color: var(--gold-champagne); outline: 0; } .sm-menu button.danger:hover { color: var(--attn); }
.sm-exnote { margin: 4px 0 0; font-size: 16px; }
/* the set grid: set · weight · reps · done · remove — every target ≥ 44 px on touch; rows tracked by their number, not by borders */
.sm-sets { display: flex; flex-direction: column; gap: 6px; }
.sm-sh, .sm-set { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) 48px 40px; column-gap: 8px; align-items: center; }
.sm-sh { font-size: var(--t-12); color: var(--ink-5); padding: 0 0 2px; }
.sm-sh span:nth-child(2), .sm-sh span:nth-child(3) { padding-left: 14px; }
.sm-set { min-height: var(--sm-in); }
.sm-set .n { font-family: var(--f-editorial); font-weight: 500; font-size: 18px; color: var(--ink-4); text-align: center; font-variant-numeric: tabular-nums; }
.sm-set.done .n { color: var(--sem-pos); }
.sm-in { height: var(--sm-in); padding: 0 14px; font-family: var(--f-interface); font-size: 20px; font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-1); outline: 0; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); min-width: 0; width: 100%; }
.sm-in::placeholder { color: var(--ink-5); font-weight: 400; }
.sm-in:hover { border-color: var(--line-strong); } .sm-in:focus { border-color: var(--sem-pos); background: var(--surface-2); }
/* the next value to enter: an open row's empty box carries the emerald edge, so the next input is obvious across the room */
.sm-set:not(.done):not(.ghost):not(.sync-failed):not(.sync-held) .sm-in:placeholder-shown { border-color: var(--sem-pos-line); }
.sm-set.done .sm-in { background: transparent; border-color: transparent; color: var(--ink-2); } .sm-set.done .sm-in:hover, .sm-set.done .sm-in:focus { border-color: var(--line-strong); background: var(--surface-1); color: var(--ink-1); }
/* done: a 48 px target drawn as a 30 px ring; performed = the ring fills emerald with a check (the check is text, never colour alone) */
.sm-done { position: relative; width: 48px; height: var(--sm-in); border: 0; border-radius: var(--r-1); background: transparent; color: transparent; font: inherit; font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; }
.sm-done::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.sm-done:hover::before, .sm-done:focus-visible::before { border-color: var(--sem-pos-line); background: var(--sem-pos-wash); } .sm-done:focus-visible { outline: 0; } .sm-done:focus-visible::before { box-shadow: 0 0 0 2px var(--ws-session-bg), 0 0 0 4px var(--sem-pos-line); }
.sm-done[aria-pressed="true"] { color: #0b0a09; } .sm-done[aria-pressed="true"]::before { background: var(--sem-pos); border-color: var(--sem-pos); }
.sm-done span, .sm-done { z-index: 0; } .sm-done::before { z-index: -1; }
.sm-setops { display: flex; justify-content: center; }
.sm-x { width: 40px; height: 40px; border: 0; background: none; color: var(--ink-5); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; border-radius: var(--r-1); opacity: 0.6; transition: opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.sm-set:hover .sm-x, .sm-x:focus-visible, .sm-set:focus-within .sm-x { opacity: 1; } .sm-x:hover, .sm-x:focus-visible { color: var(--attn); background: var(--surface-1); outline: 0; }
.sm-set.sync-saving .n { color: var(--ink-3); }
.sm-set.sync-failed, .sm-set.sync-held { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) 48px auto; }
.sm-set.sync-failed .sm-in, .sm-set.sync-held .sm-in { border-color: var(--sem-alarm-line); background: var(--surface-1); }
.sm-retry { height: 40px; padding: 0 12px; border: 1px solid var(--sem-alarm-line); border-radius: var(--r-1); background: var(--sem-alarm-wash); color: var(--sem-alarm); font: inherit; font-size: var(--t-12); font-weight: 600; cursor: pointer; white-space: nowrap; }
/* + Set lives under the rows it adds to, aligned with the weight column; Same again beside it */
.sm-add { display: flex; gap: 4px; margin: 2px 0 0 48px; } .sm-add .tlink { min-height: 44px; padding: 0 12px; font-size: var(--t-15); font-weight: 500; color: var(--ink-3); border-radius: var(--r-1); } .sm-add .tlink:hover, .sm-add .tlink:focus-visible { color: var(--gold-champagne); background: var(--surface-1); outline: 0; }
/* + Exercise and the search: between / after the movements, never a banner */
.sm-addex { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 0; } .sm-addex .btn { align-self: flex-start; height: 44px; padding: 0 18px; font-size: var(--t-15); }
.sm-addex.first { padding-top: 22px; } .sm-addex.first .btn { height: 48px; padding: 0 22px; font-size: var(--t-16); }
.sm-exsearch { position: relative; max-width: 520px; } .sm-exsearch[hidden] { display: none; } .sm-exsearch.inline { margin-top: 8px; }
.sm-exsearch .input { height: 48px; font-size: var(--t-16); }
.sm-exmenu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 8; max-height: 320px; overflow: auto; padding: 6px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-2); }
.sm-exmenu:empty { display: none; }
.sm-exg { padding: 8px 10px 4px; font-size: var(--t-12); font-weight: 600; color: var(--ink-4); }
.sm-exi { display: flex; justify-content: space-between; gap: 12px; width: 100%; border: 0; background: none; text-align: left; padding: 10px 10px; min-height: 44px; border-radius: var(--r-1); font: inherit; font-size: var(--t-15); color: var(--ink-1); cursor: pointer; }
.sm-exi.sel, .sm-exi:hover { background: var(--gold-wash); color: var(--gold-champagne); } .sm-exi .s { font-size: var(--t-12); color: var(--ink-4); white-space: nowrap; }
/* the coach's note: present, quiet — one line at rest, room when it has focus */
.sm-notesec { margin-top: 28px; max-width: 640px; } .sm-notesec .lbl { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; font-size: var(--t-13); color: var(--ink-3); } .sm-notesec .textarea { min-height: 52px; font-size: var(--t-15); transition: min-height var(--dur-1) var(--ease); } .sm-notesec .textarea:focus { min-height: 108px; }
.sm-notesec .meta, .sm-cnote .meta, .sm-finish .meta { font-size: var(--t-12); color: var(--ink-5); font-weight: 400; }
.sm-finish .sm-facts { font-size: var(--t-16); color: var(--ink-1); margin: 0 0 16px; } .sm-finish .sep { color: var(--ink-5); }
.sm-finish .sm-att { margin-top: 12px; }
/* the completed record */
.v2.sm.sm-record .sm-facts { margin-top: 18px; font-size: var(--t-15); color: var(--ink-2); } .v2.sm.sm-record .sm-facts .sep { color: var(--ink-5); }
.v2.sm .sm-cexs { display: flex; flex-direction: column; margin-top: 10px; }
.v2.sm .sm-cex { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); column-gap: 20px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.v2.sm .sm-cex .nm { font-size: var(--t-16); font-weight: 600; color: var(--ink-1); } .v2.sm .sm-cex .nm .sm-repl { display: block; font-weight: 400; }
.v2.sm .sm-cex .s { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-15); color: var(--ink-2); font-variant-numeric: tabular-nums; } .v2.sm .sm-cex .s .top { font-weight: 600; color: var(--ink-1); } .v2.sm .sm-cex .s .faint { color: var(--ink-5); }
.v2.sm .sm-cex.skipped .nm { color: var(--ink-4); font-weight: 500; }
.v2.sm .sm-cex .nt { grid-column: 1 / -1; font-size: 16px; margin-top: 2px; }
.v2.sm .sm-cnote { margin-top: 26px; padding: 14px 18px; border-left: 2px solid var(--sem-pos); background: var(--ws-session-raise); border-radius: 0 var(--r-1) var(--r-1) 0; } .v2.sm .sm-cnote .lbl { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; }
/* the In-person sessions block on the workspace: two ways in */
.v2 .c2-dom .c2-go2 { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
/* iPad portrait (768–1023): the band keeps its three columns, the grid narrower; the bar keeps every control */
@media (max-width: 1023px) {
  .sm-bar { padding: 8px 20px; column-gap: 14px; } .sm-body { padding: 0 20px; }
  .sm-ex { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px) 44px; column-gap: 16px; }
  .sm-exn h2 { font-size: 23px; } .sm-prev .v > b { font-size: 22px; }
  .v2.sm .sm-row { grid-template-columns: 64px minmax(0, 1fr) 84px auto; }
}
/* phone (≤ 639): the emergency view — one column, the bar wraps, the grid keeps its targets */
@media (max-width: 639px) {
  .sm-bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 8px 16px; } .sm-bar .sm-acts { grid-column: 1 / -1; justify-content: flex-end; } .sm-bar .sm-save { justify-self: end; }
  .sm-body { padding: 0 16px; }
  .sm-ex { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "id ops" "grid grid"; column-gap: 8px; row-gap: 10px; }
  .sm-ex.skipped { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id grid"; }
  .sm-exn h2 { font-size: 22px; } .sm-prevd > div { grid-template-columns: 1fr; }
  .sm-sh, .sm-set { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 48px 36px; column-gap: 6px; } .sm-add { margin-left: 0; }
  .sm-eqgate { margin-top: 0; }
  .v2.sm .sm-row { grid-template-columns: 58px minmax(0, 1fr) auto; row-gap: 4px; } .v2.sm .sm-row .st { display: none; } .v2.sm .sm-row .act { grid-column: 3; }
  .v2.sm .sm-ps { grid-template-columns: minmax(0, 1fr) auto; } .v2.sm .sm-ps .ds { display: none; }
  .v2.sm .sm-cex { grid-template-columns: 1fr; row-gap: 4px; }
  .sm-menu { min-width: 200px; max-width: calc(100vw - 40px); }
}
/* the In-person sessions page: the primary action beside the head; the open-session line; the note excerpt in a row */
.v2 .s2-head .s2-acts { display: flex; gap: 8px; align-items: center; } .v2 .s2-head .s2-acts .btn { height: 38px; padding: 0 16px; font-size: var(--t-14); }
.v2 .s2-open { margin-top: 14px; font-size: var(--t-14); color: var(--ink-2); }
.v2 .s2-list a.drow:hover { background: var(--surface-1); } .v2 .s2-list .nt .sm-nt { font-size: 15px; }
.v2 .c2-dom .st.draft { color: var(--sem-pos); }
/* planned rows: expected, not yet performed — dashed boxes, a dashed ring, the number one step fainter */
.sm-set.ghost .n { color: var(--ink-5); } .sm-set.ghost .sm-in { border-style: dashed; border-color: var(--line); background: transparent; } .sm-set.ghost .sm-done::before { border-style: dashed; opacity: 0.7; }

/* ---------------------------------------------------------------------------
   EXERCISE LIBRARY (17 Sep 2026) — a lightweight identity / configuration
   tool: search, clean rows, one primary action, quiet detail configuration.
   Not a spreadsheet, not an encyclopedia. Shares the Plan Library's list
   grammar (.lib / .lib-row) so the two libraries read as one family.
   --------------------------------------------------------------------------- */
.exl .roster-head { align-items: center; }
.exl .lib-rows { margin-top: 18px; }
.exl .lib-row { grid-template-columns: minmax(0, 1fr) 120px; text-decoration: none; color: inherit; }
.exl .lib-row .nm { font-family: var(--f-editorial, inherit); font-weight: 500; font-size: 18px; letter-spacing: 0; }
.exl .lib-row .lu { font-size: var(--t-13); color: var(--ink-4); }
.exl .roster-filters { margin-top: 4px; }
.exl-empty { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.exl .rempty { margin: 0; }
.exl-quiet { font-size: var(--t-14); color: var(--ink-4); margin-top: 8px; }
.exl-tog { display: flex; flex-direction: column; gap: 6px; }
.exl-togrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.exl-togl { font-size: var(--t-15); font-weight: 500; color: var(--ink-1); }
.exl-togd { font-size: var(--t-13); color: var(--ink-3); }
.toggle[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.exl-lock { margin-top: 8px; font-size: var(--t-13); color: var(--attn); }
.exl-err { margin-top: 6px; font-size: var(--t-13); color: var(--attn); }
.exl-confirm { font-size: var(--t-15); color: var(--ink-1); line-height: 1.45; }
.exl-detail { max-width: 720px; }
.exl-head { margin: 4px 0 18px; }
.exl-head h1 { font-family: var(--f-editorial, inherit); font-weight: 500; font-size: 30px; line-height: 1.1; letter-spacing: 0; color: var(--ink-1); }
.exl-state { margin-top: 6px; font-size: var(--t-13); color: var(--ink-3); }
.exl-sec { padding: 18px 0; border-top: 1px solid var(--line-soft); }
.exl-sec .lbl { font-size: var(--t-13); font-weight: 600; color: var(--ink-3); }
.exl-aliases { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; }
.exl-aliases li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: var(--t-15); color: var(--ink-1); border-top: 1px solid var(--line-soft); }
.exl-aliases li:first-child { border-top: 0; }
.exl-addrow { display: flex; gap: 8px; margin-top: 10px; max-width: 420px; } .exl-addrow .input { flex: 1; }
.exl-eq { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: var(--t-14); color: var(--ink-2); }
.exl-eq i { font-style: normal; color: var(--ink-4); } .exl-eq .quiet { color: var(--ink-4); }
.exl-foot { margin-top: 26px; }
@media (max-width: 719px) { .exl .lib-row { grid-template-columns: minmax(0, 1fr) 72px; } .exl .roster-head { flex-direction: column; align-items: stretch; gap: 12px; } .exl .roster-search { width: 100%; } }

/* ============================================================================
   37 · CONSULTATION + LEADS (19 Sep 2026)
   Two screens, two jobs. LEADS is an operational list — who needs attention
   next — and a durable lead workspace. CONSULTATION is fifteen minutes of live
   typing, often on a phone: one column, the notes field the visual centre, one
   outcome control. Cobalt is the consult IDENTITY carried over from the
   calendar (the icon tint and the hairline); it is deliberately NOT a `data-ws`
   tonal workspace — §10.5 already gives the cobalt environment to Check-ins,
   and two workspaces sharing a tone would read as an accident.
   No kanban, no score, no probability, no stage dropdown, no progress bar.
   ============================================================================ */
.ld { max-width: 860px; --line-soft: rgba(243,237,226,0.06); }
.ld-stat { margin-top: 8px; font-size: var(--t-13); color: var(--ink-3); }
.ld-sec { margin-top: 26px; }
.ld-sec .lbl-row { margin-bottom: 4px; }
.ld-sec .lbl-row .act { background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-13); color: var(--gold); cursor: pointer; }
.ld-rows { display: flex; flex-direction: column; }
.ld-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line-soft); text-decoration: none; color: inherit; transition: background var(--dur-1) var(--ease); }
.ld-row:first-child { border-top: 0; }
.ld-row:hover { background: var(--surface-1); }
.ld-row .ln { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ld-row .nm { font-family: var(--f-editorial, inherit); font-weight: 500; font-size: 17px; letter-spacing: 0; color: var(--ink-1); }
.ld-row:hover .nm { color: var(--gold-champagne); }
.ld-row .ds { font-size: var(--t-13); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-row .go { font-size: var(--t-13); color: var(--ink-4); white-space: nowrap; }
.ld-row:hover .go { color: var(--gold); }
.ld-row .t { font-size: var(--t-13); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.ld-row.attn { grid-template-columns: 8px minmax(0, 1fr) auto; }
.ld-sec .ld-row .t + .ln { min-width: 0; }
.ld-sec [data-ld-upcoming] .ld-row, .ld .ld-row:has(> .t) { grid-template-columns: 116px minmax(0, 1fr) auto; }
.ld-detail { max-width: 760px; }
.ld-head { margin: 4px 0 4px; }
.ld-head h1 { font-family: var(--f-editorial, inherit); font-weight: 500; font-size: 30px; line-height: 1.1; letter-spacing: 0; color: var(--ink-1); }
.ld-state { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-13); color: var(--ink-3); }
.ld-state .sep { color: var(--ink-5); }
.ld-state a { color: var(--gold-champagne); }
.ld-contact { margin-top: 6px; font-size: var(--t-13); color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; }
.ld-contact a { color: var(--ink-2); } .ld-contact a:hover { color: var(--gold); }
.ld-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; font-size: var(--t-15); color: var(--ink-1); }
.ld-line a { color: var(--gold-champagne); }
.ld-facts { display: flex; flex-direction: column; margin: 0; }
.ld-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.ld-facts > div:first-child { border-top: 0; }
.ld-facts dt { font-size: var(--t-13); color: var(--ink-4); }
.ld-facts dd { margin: 0; font-size: var(--t-15); color: var(--ink-1); line-height: 1.45; }
.ld-notes { display: flex; flex-direction: column; }
.ld-note { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.ld-note:first-child { border-top: 0; }
.ld-note .t { font-size: var(--t-13); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.ld-note p { font-size: var(--t-15); color: var(--ink-2); line-height: 1.5; white-space: pre-wrap; }
.ld-time { display: flex; flex-direction: column; }
.ld-tr { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 6px 0; font-size: var(--t-14); color: var(--ink-2); }
.ld-tr .t { font-size: var(--t-13); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.ld-tr .s { color: var(--ink-4); } .ld-tr .s::before { content: " · "; }
.ld-tr a { color: var(--ink-2); } .ld-tr a:hover { color: var(--gold); }
.ld-actions { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line-soft); display: flex; gap: 10px; flex-wrap: wrap; }
.ld-err { margin-top: 6px; font-size: var(--t-13); color: var(--attn); }
.ld .field label .meta, .cons .field label .meta { font-weight: 400; color: var(--ink-4); }
.ld .field label .meta::before, .cons .field label .meta::before { content: " · "; color: var(--ink-5); }
.ld-picks { display: flex; flex-direction: column; }
.ld-pick { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 0; background: none; border: 0; border-top: 1px solid var(--line-soft); font: inherit; font-size: var(--t-15); color: var(--ink-1); text-align: left; cursor: pointer; }
.ld-pick:hover { color: var(--gold-champagne); }
.ld-pick .s { font-size: var(--t-13); color: var(--ink-4); }

/* ---- the consultation workspace: one column at every width ---- */
.cons .d-back { display: flex; gap: 8px; align-items: baseline; }
.cons .d-back .sep { color: var(--ink-5); }
.cons { max-width: 680px; margin: 0 auto; padding-bottom: 96px; --line-soft: rgba(243,237,226,0.06); }
.cons-head { padding: 4px 0 18px; border-bottom: 1px solid var(--sem-info, var(--line)); border-bottom-color: color-mix(in srgb, var(--sem-info, #6f8fb5) 42%, transparent); }
.cons-head h1 { font-family: var(--f-editorial, inherit); font-weight: 500; font-size: 32px; line-height: 1.08; letter-spacing: 0; color: var(--ink-1); }
.cons-when { margin-top: 8px; font-size: var(--t-14); color: var(--ink-3); }
.cons-ref { margin-top: 4px; font-size: var(--t-14); color: var(--ink-3); }
.cons-ref a { color: var(--gold-champagne); }
.cons-facts { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.cons-facts .lbl { font-size: var(--t-12); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-4); }
.cons-facts dl { margin: 10px 0 0; display: flex; flex-direction: column; gap: 7px; }
.cons-facts dl > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; }
.cons-facts dt { font-size: var(--t-13); color: var(--ink-4); }
.cons-facts dd { margin: 0; font-size: var(--t-15); color: var(--ink-1); line-height: 1.45; }
.cons-facts dd a { color: var(--gold-champagne); }
.cons-prev { padding: 10px 0; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; }
.cons-prev a { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; font-size: var(--t-14); color: var(--ink-3); text-decoration: none; }
.cons-prev a:hover { color: var(--gold); }
.cons-prev .t { color: var(--ink-4); font-variant-numeric: tabular-nums; }
.cons-prompts { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.cons-disc { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 0; font: inherit; font-size: var(--t-13); color: var(--ink-4); cursor: pointer; }
.cons-disc:hover { color: var(--ink-2); }
.cons-disc .chev { width: 0; height: 0; border-left: 4px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--dur-1) var(--ease); }
.cons-disc[aria-expanded="true"] .chev { transform: rotate(90deg); }
.cons-prompts ul { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cons-prompts li { font-size: var(--t-14); color: var(--ink-3); line-height: 1.45; }
.cons-notes { padding: 20px 0 8px; }
.cons-notes .lbl-row { margin-bottom: 8px; }
.cons-notes .textarea { min-height: 300px; font-size: var(--t-16, 16px); line-height: 1.6; resize: vertical; }
.cons-save { font-size: var(--t-12); color: var(--ink-4); }
.cons-save.bad { color: var(--attn); }
.cons-err { margin-top: 8px; font-size: var(--t-13); color: var(--attn); line-height: 1.45; }
.cons-outcome { margin-top: 18px; }
.cons-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cons-ob { padding: 12px 8px; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-1); font: inherit; font-size: var(--t-14); color: var(--ink-1); cursor: pointer; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.cons-ob:hover { border-color: var(--gold-line); }
.cons-ob[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-wash); color: var(--ink-1); }
.cons-pane { margin-top: 14px; padding: 14px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-1); }
.cons-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cons-row .field { min-width: 160px; } .cons-row .field.grow { flex: 1; }
.cons-confirm { margin-top: 14px; display: flex; gap: 10px; justify-content: flex-end; }
.cons-sub { margin-top: 8px; font-size: var(--t-13); color: var(--ink-3); line-height: 1.45; }
.cons-done { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-1); }
.cons-done .w { font-family: var(--f-editorial, inherit); font-size: 20px; font-weight: 500; color: var(--ink-1); }
.cons-done .cons-sub { margin: 0; }
.cons-done .act { font-size: var(--t-13); color: var(--gold); text-decoration: none; }
.cons-done .btn { margin-left: auto; }

@media (max-width: 719px) {
  .ld .roster-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .ld .roster-search { width: 100%; }
  .ld-row, .ld-sec [data-ld-upcoming] .ld-row, .ld .ld-row:has(> .t) { grid-template-columns: minmax(0, 1fr) auto; }
  .ld-row.attn { grid-template-columns: 8px minmax(0, 1fr); }
  .ld-row.attn .go { grid-column: 2; }
  .ld-row .t { grid-column: 1 / -1; }
  .ld-facts > div, .ld-note, .ld-tr { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cons { padding-bottom: 120px; }
  .cons-facts dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cons-head h1 { font-size: 26px; }
  .cons-notes .textarea { min-height: 220px; }
  /* the outcome control is always reachable during a live call */
  .cons-outcome { position: sticky; bottom: 0; margin: 18px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--ground); border-top: 1px solid var(--line); }
  .cons-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}