/* ============================================================
 * Gains Geek CLIENT mobile PWA - shared design kit (v4)
 * Deep + Mono. Dark default. Built ONLY on the locked tokens.
 *
 * STRUCTURE
 *   PART 1  Token block, copied VERBATIM from the skill tokens.css
 *           (:root light peer + .dark dark default). Values unchanged.
 *   PART 2  Mobile client-app component layer. Built on those tokens
 *           and the skill's .ds-* component contract. Components that
 *           already exist in the skill (button, field, select,
 *           checkbox, textarea, card, banner, empty, modal, sheet,
 *           spinner, pill, tab underline, mono numerals) are NOT
 *           reinvented here, they are pulled in by also linking the
 *           skill's components.css OR by reusing the same .ds-* names.
 *           This kit adds ONLY the mobile-app SHELL chrome the skill
 *           does not ship: phone/screen frame, app top/status bar,
 *           bottom tab bar (touch, blurred), and a small set of
 *           mobile list-row + section-header conveniences. It also
 *           re-declares the core .ds-* component contract inline so
 *           this kit is self-sufficient when components.css is not
 *           also linked (mockups open offline).
 *
 * Source of truth: .claude/skills/gains-geek-design/{SYSTEM,tokens,components}.css
 * No em dashes, no en dashes anywhere. Cobalt for action/emphasis only.
 * ============================================================ */

/* ============================================================
 * PART 1 - LOCKED TOKENS (verbatim from skill tokens.css)
 * ============================================================ */

/* Self-hosted variable fonts. latin + latin-ext (latin-ext carries the Polish
 * glyphs: ą ć ę ł ń ó ś ź ż). unicode-range so the browser only pulls the
 * subset it needs. Keep the token fallback stacks as the swap face. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latinext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latinext.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
 * LIGHT PALETTE  (:root: the daylight peer on public surfaces)
 * Cool off-white, never warm, never pure #fff. The cobalt is
 * darkened to #1F52D6 so it stays stable and AA-legible on white
 * rather than flipping to a brighter tone.
 * ============================================================ */
:root {
  /* Surfaces */
  --background:           #F4F7FB;   /* cool off-white, ~3% blue cast */
  --foreground:           #2C3645;   /* slate body text */
  --foreground-strong:    #0C1420;   /* near-ink, cool, numbers + headings */
  --card:                 #FFFFFF;   /* clean card on the cool page */
  --card-foreground:      #0C1420;
  --card-low:             #EBF0F7;   /* nested chip / input / hover surface */
  --popover:              #FFFFFF;
  --popover-foreground:   #0C1420;
  --primary:              #1F52D6;   /* solid primary fill = cobalt (light-stable) */
  --primary-foreground:   #FFFFFF;
  --secondary:            #EBF0F7;
  --secondary-foreground: #2C3645;
  --muted:                #E2E8F1;   /* badge bg, track */
  --muted-foreground:     #5C6A7E;   /* blue-gray caption, AA on --card */

  /* Accent, ACTION/EMPHASIS ONLY. The single cobalt signal. */
  --accent:               #1F52D6;            /* light-mode cobalt, stable */
  --accent-foreground:    #FFFFFF;
  --accent-dim:           rgb(31 82 214 / 0.08);
  --accent-emphasis:      #1F52D6;            /* strongest-emphasis cobalt */

  /* Destructive (form-level danger) */
  --destructive:            #C9333A;          /* darker ruby for AA on white */
  --destructive-foreground: #FFFFFF;

  /* Lines */
  --border:        rgb(12 20 32 / 0.11);      /* cool hairline, structural */
  --border-strong: rgb(12 20 32 / 0.20);      /* inputs, focus container */
  --input:         #FFFFFF;
  --ring:          #1F52D6;                   /* = accent */

  /* Charts, light mode. Darkened-by-one-step from the dark ramp so
   * each hue keeps AA legibility against a white plot. Same 8 hues,
   * same order, never adjacent red/green. */
  --chart-1: #1F52D6;   /* cobalt   */
  --chart-2: #B97E12;   /* gold     */
  --chart-3: #8A4FD4;   /* violet   */
  --chart-4: #1F9E83;   /* teal-aqua*/
  --chart-5: #C73E58;   /* ruby     */
  --chart-6: #1E72D6;   /* sky      */
  --chart-7: #5C9B22;   /* lime     */
  --chart-8: #5A6678;   /* slate    */

  /* Semantic, STATE MEANING ONLY (light). Darkened for AA on white. */
  --green:  #1E9E5E;    /* on-track  */
  --yellow: #B97E12;    /* attention */
  --red:    #C9333A;    /* behind    */
  --green-dim:  rgb(30 158 94 / 0.10);
  --yellow-dim: rgb(185 126 18 / 0.10);
  --red-dim:    rgb(201 51 58 / 0.10);

  /* Texture hooks (light): no top glow on daylight surfaces. */
  --glow-top:    none;
  --hover-wash:  rgb(12 20 32 / 0.04);
  --active-wash: rgb(12 20 32 / 0.08);    /* pressed/active */

  /* ----------------------------------------------------------
   * STRUCTURE, mode-independent. Bones.
   * Gains Geek runs a slightly tighter radius than the 8px default:
   * 6px reads as machined/precise rather than soft-app friendly,
   * without going full hard-corner cold. This is an identity choice.
   * ---------------------------------------------------------- */
  --radius:      6px;
  --radius-sm:   3px;                        /* calc(var(--radius) / 2) */
  --radius-pill: 9999px;

  /* Spacing rhythm, 4px scale. KEEP. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;

  /* Page padding presets, KEEP */
  --page-pad-dashboard: 24px;
  --page-pad-website-mobile: 32px;
  --page-pad-website-desktop: 48px;

  /* Container max-widths, KEEP */
  --content-max: 48rem;   /* 768px, article / KB / lesson body */
  --landing-max: 64rem;   /* 1024px, landing / sales / marketing */

  /* Card grid, KEEP */
  --card-min: 420px;
  --card-gap: 20px;

  /* Elevation, Gains Geek depth language. Shadows are cool-tinted
   * (blue-black, not neutral-black) and tight, so lifted surfaces
   * still read like instrument panels rather than fluffy SaaS cards.
   * Cards stay border-only; shadow is reserved for true overlays. */
  --shadow-none:    none;
  --shadow-popover: 0 8px 24px rgb(4 6 10 / 0.16);
  --shadow-modal:   0 24px 80px rgb(4 6 10 / 0.26);
  --shadow-page:    0 -16px 36px rgb(4 6 10 / 0.12);

  /* Motion, KEEP. Earned, not decorative. */
  --transition-fast: 0.10s;
  --transition-base: 0.15s;
  --transition-slow: 0.60s;
  --ease-default: cubic-bezier(0.2, 0, 0, 1);   /* precise, no overshoot */

  /* TYPE, faces. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Roboto Mono", monospace;
  --font-display: var(--font-sans);   /* display = the sans */
  --font-num:     var(--font-mono);   /* big readout numbers = the MONO stack */
  --display-tracking: -0.02em;

  /* TYPE, size ramp. KEEP names. */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;   /* dashboard body baseline */
  --text-md: 14px;
  --text-lg: 16px;     /* website/reading body baseline */
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 32px;
  --text-5xl: 40px;
  --text-hero: clamp(2.5rem, 4vw + 1rem, 4rem); /* 40-64px fluid */

  /* Numeric features. Inter ships tnum; cv05/cv08 give an open-4 and
   * a disambiguated single-storey shape that read cleaner at data size. */
  --feature-numeric: "tnum" 1, "cv05" 1, "cv08" 1;
}

/* ============================================================
 * DARK PALETTE  (.dark on <html>: the default brand mode)
 * The "Deep" variant: a blacker blue-tinted near-black graphite.
 * The signature surface. Cobalt is brighter here (#5482F2) so the
 * one signal lifts off the deeper cool dark without going neon.
 * ============================================================ */
.dark {
  --background:           #06090F;   /* deep blue-tinted near-black */
  --foreground:           #B4BFD0;   /* cool body text */
  --foreground-strong:    #EEF2F9;   /* cool-white, the most-read color */
  --card:                 #111A27;   /* instrument-panel surface, lifted */
  --card-foreground:      #EEF2F9;
  --card-low:             #17212E;   /* nested chip / input / hover surface */
  --popover:              #17212E;
  --popover-foreground:   #EEF2F9;
  --primary:              #5482F2;   /* cobalt fill */
  --primary-foreground:   #FFFFFF;
  --secondary:            #131A25;
  --secondary-foreground: #B4BFD0;
  --muted:                #172029;   /* badge bg, track */
  --muted-foreground:     #8693A9;   /* blue-gray, never flat #999 */

  --accent:               #5482F2;   /* dark-mode cobalt, the signal */
  --accent-foreground:    #FFFFFF;
  --accent-dim:           rgb(84 130 242 / 0.16);
  --accent-emphasis:      #7AA0FF;   /* strongest-emphasis cobalt */

  --destructive:            #E5484D;
  --destructive-foreground: #FFFFFF;

  --border:        rgb(125 145 175 / 0.16);   /* cool hairline (dim-screen nudge) */
  --border-strong: rgb(125 145 175 / 0.26);   /* inputs, focus container */
  --input:         #0A0F16;                   /* slightly below card */
  --ring:          #5482F2;

  /* Charts, dark-tuned 8-hue categorical ramp. Never adjacent red/green. */
  --chart-1: #5482F2;   /* cobalt    */
  --chart-2: #E0A23A;   /* gold      */
  --chart-3: #B07CF0;   /* violet    */
  --chart-4: #5BC8AF;   /* teal-aqua */
  --chart-5: #E5677D;   /* ruby      */
  --chart-6: #4DA3FF;   /* sky       */
  --chart-7: #8FCF52;   /* lime      */
  --chart-8: #7E8AA0;   /* slate     */

  /* Semantic, STATE MEANING ONLY (dark). Distinct from the cobalt accent. */
  --green:  #34C77B;    /* on-track  */
  --yellow: #E0A23A;    /* attention */
  --red:    #E5484D;    /* behind    */
  --green-dim:  rgb(52 199 123 / 0.16);
  --yellow-dim: rgb(224 162 58 / 0.16);
  --red-dim:    rgb(229 72 77 / 0.16);

  /* Gains Geek texture hooks. Both are barely-there. The top glow is
   * a single faint cobalt wash framing the topbar, the instrument
   * "powering on". The hover wash is a cool lift, not a white smear. */
  --glow-top:    radial-gradient(120% 120% at 50% -20%, rgb(84 130 242 / 0.12) 0%, transparent 60%);
  --hover-wash:  rgb(125 145 175 / 0.06);
  --active-wash: rgb(125 145 175 / 0.12);  /* pressed/active */

  color-scheme: dark;
}

/* App overlay aliases derive from the locked palette above. */
:root {
  --overlay-scrim: color-mix(in srgb, var(--foreground-strong) 66%, transparent);
  --overlay-scrim-soft: color-mix(in srgb, var(--foreground-strong) 62%, transparent);
  --caption-scrim: color-mix(in srgb, var(--foreground-strong) 55%, transparent);
}

.dark {
  --overlay-scrim: color-mix(in srgb, var(--background) 66%, transparent);
  --overlay-scrim-soft: color-mix(in srgb, var(--background) 62%, transparent);
  --caption-scrim: color-mix(in srgb, var(--background) 55%, transparent);
}

/* ============================================================
 * Semantic typographic classes. Apply these, not raw sizes.
 * (copied from skill tokens.css)
 * ============================================================ */

html { font-family: var(--font-sans); }
body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: var(--feature-numeric);
}

/* Dashboard scale ----------------------------------------------------- */
.ds-h1       { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--foreground-strong); }
.ds-h2       { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); }
.ds-hero-num { font-family: var(--font-num); font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--foreground-strong); }
.ds-stat     { font-family: var(--font-num); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--foreground-strong); }
.ds-body     { font-size: 13px; font-weight: 400; line-height: 1.5; }
.ds-label    { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.ds-caption  { font-size: 12px; font-weight: 400; color: var(--muted-foreground); }
.ds-th       { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.ds-td       { font-size: 13px; font-weight: 400; }
.ds-mono     { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ds-meta     { font-family: var(--font-mono); font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* Website scale ------------------------------------------------------- */
.web-h1      { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 800; letter-spacing: var(--display-tracking); line-height: 1.05; color: var(--foreground-strong); }
.web-h2      { font-family: var(--font-display); font-size: clamp(2rem, 2.5vw + 0.5rem, 2.5rem); font-weight: 700; letter-spacing: var(--display-tracking); line-height: 1.2; color: var(--foreground-strong); }
.web-h3      { font-family: var(--font-display); font-size: clamp(1.25rem, 1vw + 0.75rem, 1.5rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--foreground-strong); }
.web-body    { font-size: var(--text-lg); font-weight: 400; line-height: 1.65; }
.web-lead    { font-size: var(--text-xl); font-weight: 400; color: var(--muted-foreground); line-height: 1.6; }
.web-overline{ font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.web-caption { font-size: 13px; font-weight: 400; color: var(--muted-foreground); }

/* ============================================================
 * Focus ring, REQUIRED on every focusable element. KEEP.
 * Uses --accent, flips per mode.
 * ============================================================ */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
 * PART 2 - MOBILE CLIENT-APP COMPONENT LAYER
 * Built on the tokens above. Mobile-app conventions on top of the
 * .ds-* contract: touch targets >= 44px, inputs >= 16px (no iOS
 * zoom), thumb-reach bottom nav, safe-area insets.
 * ============================================================ */

/* ----- reset only what the shell needs (no global resets that fight
 * the skill). Box-sizing + zero default margin keeps the frame exact. */
*, *::before, *::after { box-sizing: border-box; }
.gg-reset { margin: 0; padding: 0; }

/* App-wide tap polish + scroll. Scoped to the app root so this kit
 * stays drop-in and does not leak onto non-app pages. */
.gg-app {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ------------------------------------------------------------
 * 1. Page / screen frame (the phone shell)
 * On a phone this is 100% width. The .gg-phone wrapper gives a
 * centered 390px device frame for desktop preview only; it
 * collapses to full-bleed at <=420px so production renders edge
 * to edge. The deep ground behind the frame is the brand near-black.
 * ------------------------------------------------------------ */
.gg-phone {
  position: relative;
  width: 100%;
  max-width: 420px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--background);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
/* the instrument powering on: a single faint cobalt wash framing the
 * top. dark only (the token is `none` in light). */
.gg-phone::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  background: var(--glow-top);
  pointer-events: none;
  z-index: 0;
}

/* The screen content slot. Sits between the status bar and the tab
 * bar. Scrolls; reserves room for the fixed bottom nav + safe area. */
.gg-screen {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  padding: var(--space-4) var(--space-4)
           calc(var(--space-4) + 64px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.gg-screen > * { min-width: 0; max-width: 100%; }
.gg-screen-flush { padding-left: 0; padding-right: 0; }

/* ------------------------------------------------------------
 * 2. App top / status bar
 * Sticky brand chrome. Title + optional context chip on the left,
 * avatar / action on the right. The faux iOS status row (time +
 * indicators) is optional and reads in mono, the instrument tell.
 * ------------------------------------------------------------ */
.gg-statusbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  background: linear-gradient(180deg, var(--background) 78%, transparent);
  padding: calc(env(safe-area-inset-top) + var(--space-3)) var(--space-4) var(--space-3);
}
.gg-statusbar .eyebrow { margin: 0 0 2px; }
.gg-statusbar h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--foreground-strong);
}

.gg-offline-indicator {
  position: relative;
  z-index: 29;
  margin: 0 var(--space-4) var(--space-3);
}
.gg-offline-indicator[hidden] { display: none; }

/* faux device status row (preview only; production uses the OS bar) */
.gg-statusbar-os {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4) 0;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--foreground-strong);
  letter-spacing: -0.01em;
}
.gg-statusbar-os-right { display: inline-flex; align-items: center; gap: var(--space-1); }
.gg-statusbar-os-right svg { display: block; color: var(--foreground-strong); }

.gg-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-3);
}
.gg-topbar-lead { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.gg-topbar-eyebrow {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  letter-spacing: 0.01em;
}
.gg-topbar-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--foreground-strong);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
/* context chip beside the title (e.g. DAY 3, mono) */
.gg-topbar-chip {
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 3px 7px;
  transform: translateY(-3px);
  white-space: nowrap;
}
.gg-topbar-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* round icon-button for the top bar (back, settings, etc.) >= 44px tap */
.gg-iconbtn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--foreground-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--transition-base) var(--ease-default), background var(--transition-base) var(--ease-default);
}
.gg-iconbtn:hover { border-color: var(--accent); }
.gg-iconbtn:active { background: var(--active-wash); }
.gg-iconbtn svg { width: 20px; height: 20px; display: block; }

/* avatar (initials or photo) */
.gg-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  flex: none;
  background: var(--card);
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--foreground-strong);
  overflow: hidden;
}
.gg-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------
 * 3. Bottom tab nav (mobile, thumb reach, blurred)
 * Distinct from the skill's cockpit .ds-tabnav (top, dense). This is
 * the app's primary navigation: fixed, glass, icon + label, >= 44px.
 * ------------------------------------------------------------ */
.gg-tabbar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  z-index: 40;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--card) 86%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(20px);
  backdrop-filter: saturate(150%) blur(20px);
  border-top: 1px solid var(--border);
  padding: var(--space-2) var(--space-2)
           calc(var(--space-2) + env(safe-area-inset-bottom));
}

/* ============================================================
   Icon system — Lucide sprite (ICON-SYSTEM-SPEC.md, Deep + Mono)
   One set, no mixing. 24 viewBox geometry lives in the inlined
   #gg-icon-sprite; stroke + caps are set here so every glyph reads
   at 1.75. currentColor flows through <use>, so an icon inherits its
   row/nav text color and turns cobalt only when its control is active.
   Shared by the client app and the admin (both link /styles.css).
   ============================================================ */
.ic {
  display: inline-block;
  vertical-align: middle;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-16 { width: 16px; height: 16px; }
.ic-20 { width: 20px; height: 20px; }
.ic-24 { width: 24px; height: 24px; }

.gg-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  padding: var(--space-1) 0;
  color: var(--muted-foreground);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--transition-base) var(--ease-default);
}
.gg-tab svg { width: 22px; height: 22px; display: block; }
.gg-tab-label { font-size: 10px; font-weight: 500; letter-spacing: 0.02em; }
.gg-tab:hover { color: var(--foreground); }
.gg-tab:active { background: var(--active-wash); }
.gg-tab.is-active { color: var(--accent); }
.gg-tab[aria-current="page"] { color: var(--accent); }
.gg-tab.is-active .gg-tab-label { color: var(--foreground-strong); }
/* hidden wins over the grid display during login / onboarding / intake */
.gg-tabbar[hidden] { display: none; }

/* ----- Nav row (the "More" hub list: tap targets to secondary screens) ----- */
.gg-navrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--foreground-strong);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-base) var(--ease-default),
              background var(--transition-base) var(--ease-default);
}
.gg-navrow:hover { border-color: var(--accent); }
.gg-navrow:active { background: var(--active-wash); }
.gg-navrow-sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted-foreground);
}
.gg-navrow > span:first-child { min-width: 0; }
.gg-navrow-chev { color: var(--muted-foreground); font-size: 20px; line-height: 1; flex: none; }

/* Coach-only switch to the admin (GG-237). Set apart with the one cobalt
   accent: a hairline left bar and a cobalt chevron mark it as the role
   switch, not a normal account link. Subtle, not a loud button. */
.gg-navrow-coach {
  margin-top: var(--space-3);
  border-left: 2px solid var(--accent);
}
.gg-navrow-coach .gg-navrow-chev { color: var(--accent); }

/* ----- Feedback quick capture ----- */
.feedback-form {
  gap: var(--space-4);
}
.feedback-field {
  width: 100%;
}
.feedback-actions {
  margin-top: var(--space-2);
}

/* ----- Progress photo gallery (grouped by view, chronological strips) ----- */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.photo-kind-title { margin: 0 0 var(--space-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.photo-strip { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.photo-strip .photo-cell { flex: 0 0 116px; }
.photo-cell { margin: 0; }
.photo-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-low);
}
.photo-cap { margin-top: 4px; font-size: 11px; text-transform: capitalize; color: var(--muted-foreground); }
.photo-rm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 2px;
  padding: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.photo-rm:hover { color: var(--foreground-strong); background: var(--red-dim); border-color: var(--red); }
.photo-rm:disabled { opacity: .5; cursor: default; }

/* ------------------------------------------------------------
 * 4. Section header (within the screen)
 * The eyebrow + optional trailing meta. The cobalt dot is the one
 * accent allowed per section header. Reuses .ds-label sizing.
 * ------------------------------------------------------------ */
.gg-section { display: flex; flex-direction: column; gap: var(--space-3); }
.gg-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-1);
}
.gg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.gg-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  flex: none;
}
.gg-section-meta { font-size: 12px; color: var(--muted-foreground); }
.gg-section-meta b { color: var(--foreground); font-weight: 600; }

/* ------------------------------------------------------------
 * 5. Card (mobile) - thin wrapper over the skill .ds-card so app
 * screens get a one-class card with the right mobile padding. The
 * .ds-card contract below (PART 2b) is the canonical card; .gg-card
 * just sets app-friendly defaults (comfortable padding, overflow
 * clip for inset rows).
 * ------------------------------------------------------------ */
.gg-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.gg-card-pad { padding: var(--space-4); }
.gg-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
}
.gg-card-head-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--foreground-strong); }
.gg-card-head-meta { font-size: 12px; color: var(--muted-foreground); }
.gg-card-head-meta b { color: var(--foreground); font-weight: 600; }

/* ------------------------------------------------------------
 * 6. List row (mobile) - tappable rows inside a card. Leading slot
 * (icon / ordinal / avatar), body (title + subtitle), trailing slot
 * (value / chevron / control). Hairline separators, hover-wash,
 * >= 44px. The trailing numeric value reads in mono.
 * ------------------------------------------------------------ */
.gg-list { display: flex; flex-direction: column; }
.gg-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  background: transparent;
  border-left: 0; border-right: 0; border-bottom: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  text-decoration: none;
  transition: background var(--transition-base) var(--ease-default);
}
.gg-row:first-child { border-top: 0; }
.gg-row:hover { background: var(--hover-wash); }
.gg-row:active { background: var(--active-wash); }
.gg-row-lead {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
}
.gg-row-lead-ord {
  font: 700 11px/1 var(--font-num);
  width: 20px;
  text-align: center;
  color: var(--muted-foreground);
}
.gg-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gg-row-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground-strong); }
.gg-row-sub { font-size: 12px; color: var(--muted-foreground); line-height: 1.4; }
.gg-row-trail {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-align: right;
}
.gg-row-value {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--foreground-strong);
}
.gg-row-chevron { color: var(--muted-foreground); font-size: 18px; line-height: 1; }

/* ------------------------------------------------------------
 * 7. Mono numerals for stats (mobile stat block)
 * Big readout figure + label, the instrument readout. Binds to
 * --font-num like the skill's .ds-hero-num / .ds-stat. Use .ds-stat
 * / .ds-hero-num directly for single values; .gg-stat is the
 * labelled block convenience.
 * ------------------------------------------------------------ */
.gg-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.gg-stat-value {
  font-family: var(--font-num);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--foreground-strong);
}
.gg-stat-value .gg-unit { font-size: 13px; font-weight: 600; color: var(--muted-foreground); }
.gg-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.gg-stat-row { display: flex; gap: var(--space-2); }
.gg-stat-row > .gg-stat {
  flex: 1;
  background: var(--card-low);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

/* progress track (macro / phase) */
.gg-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--muted);
  overflow: hidden;
  margin-top: var(--space-2);
}
.gg-track > i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--accent); }

/* ------------------------------------------------------------
 * 8. Today home
 * Active client home. It composes due state, next training session,
 * and fast capture actions without adding new design primitives.
 * ------------------------------------------------------------ */
.today-summary {
  display: grid;
  gap: var(--space-3);
}
.today-summary-kicker {
  margin: 0;
  color: var(--foreground-strong);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.today-summary-copy {
  margin: 0;
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.5;
}
.today-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.today-summary-streak {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.4;
}
.today-streak-num {
  font-family: var(--font-num);
  font-feature-settings: var(--feature-numeric);
  font-weight: 600;
  color: var(--accent);
  margin-right: 0.25ch;
}
.today-quick-metrics {
  display: grid;
  gap: var(--space-3);
}
.today-quick-copy {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.4;
}
.today-quick-form {
  display: grid;
  gap: var(--space-3);
}
.today-quick-field {
  display: grid;
  gap: var(--space-1);
}
.today-quick-field > label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.today-quick-field input.intake-input {
  font-size: 16px;
  min-height: 48px;
}
.today-quick-actions {
  display: flex;
}
.today-quick-save {
  min-height: 44px;
}
.today-quick-status:empty {
  display: none;
}
@media (min-width: 560px) {
  .today-quick-form {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
  .today-quick-actions {
    grid-column: 1 / -1;
  }
  .today-quick-status {
    grid-column: 1 / -1;
  }
}
.today-training-body {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-4);
}
.today-session-wrap {
  display: grid;
  gap: var(--space-3);
}
.today-session-hero {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-low);
}
.today-session-label,
.today-picker-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.today-session-title {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--foreground-strong);
}
.today-session-sub,
.today-session-note {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.5;
}
.today-session-picker {
  display: grid;
  gap: var(--space-2);
}
.today-session-select {
  min-height: 48px;
}
.today-lift-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.today-lift {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-3);
  border-top: 1px solid var(--border);
}
.today-lift:first-child { border-top: 0; }
.today-lift-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.today-lift-sub {
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 11px;
  line-height: 1.35;
}
.today-lift-more {
  padding: var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 12px;
}
.today-actions {
  margin-top: 0;
}
.today-row .ds-pill {
  flex: none;
}
.today-empty {
  align-items: flex-start;
  text-align: left;
  padding: var(--space-4);
}
.today-checklist .gg-card > .today-empty + .gg-list {
  border-top: 1px solid var(--border);
}

.whats-due {
  display: grid;
  gap: var(--space-3);
  border-color: var(--border-strong);
  background: var(--card);
}
.whats-due-main {
  display: grid;
  gap: var(--space-2);
}
.whats-due-copy {
  margin: 0;
  color: var(--foreground-strong);
  font-size: 14px;
  line-height: 1.5;
}
.whats-due-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.whats-due-action,
.whats-due-dismiss {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
}
.whats-due-action.is-red {
  border-color: var(--red);
  background: var(--red-dim);
  color: var(--foreground-strong);
}
.whats-due-dismiss {
  color: var(--muted-foreground);
}

/* ============================================================
 * PART 2b - CORE .ds-* CONTRACT (inlined from skill components.css)
 * These mirror the skill verbatim so this kit is self-sufficient for
 * offline mockups when components.css is not separately linked. Do
 * NOT rename. In production, link the skill's components.css instead
 * and these inline copies become redundant (identical output).
 * ============================================================ */

/* ----- Button ----- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base);
  white-space: nowrap;
  user-select: none;
}
.ds-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ds-btn-sm { padding: var(--space-1) var(--space-3); font-size: 12px; min-height: 28px; border-radius: var(--radius-sm); }
.ds-btn-md { padding: var(--space-2) var(--space-4); font-size: 14px; min-height: 36px; }
.ds-btn-lg { padding: var(--space-3) var(--space-5); font-size: 15px; min-height: 44px; }
.ds-btn-primary { background: var(--accent); color: var(--accent-foreground); border-color: var(--accent); }
.ds-btn-primary:hover:not(.is-disabled):not(.is-loading) { opacity: 0.90; }
.ds-btn-primary:active:not(.is-disabled):not(.is-loading) { opacity: 0.82; }
.ds-btn-ghost   { background: transparent; color: var(--foreground); border-color: var(--border-strong); }
.ds-btn-ghost:hover:not(.is-disabled):not(.is-loading) { color: var(--foreground-strong); border-color: var(--accent); background: var(--card-low); }
.ds-btn-danger  { background: var(--red-dim); color: var(--foreground-strong); border-color: var(--red); }
.ds-btn-danger:hover:not(.is-disabled):not(.is-loading) { background: color-mix(in srgb, var(--red) 22%, transparent); }
.ds-btn-warn    { background: var(--yellow-dim); color: var(--yellow); border-color: var(--yellow); }
.ds-btn-warn:hover:not(.is-disabled):not(.is-loading) { background: color-mix(in srgb, var(--yellow) 22%, transparent); }
.ds-btn.is-disabled, .ds-btn[disabled] {
  cursor: not-allowed;
  background: var(--muted);
  color: var(--muted-foreground);
  border-color: transparent;
}
.ds-btn.is-loading { cursor: wait; }
.ds-btn-spinner {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  animation: ds-spin 0.7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* full-width app primary action (mobile convenience over .ds-btn-lg) */
.ds-btn-block { display: flex; width: 100%; }

/* ----- Input + Field ----- */
.ds-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ds-field-label  { font-size: 12px; font-weight: 600; color: var(--foreground-strong); letter-spacing: -0.01em; }
.ds-field-helper { font-size: 12px; color: var(--muted-foreground); margin: 0; line-height: 1.45; }
.ds-field-error  { font-size: 12px; color: var(--foreground-strong); margin: 0; line-height: 1.45; }
.ds-field-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--input);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.ds-field-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ds-field.has-error .ds-field-wrap { border-color: var(--red); }
.ds-field.has-error .ds-field-wrap:focus-within { box-shadow: 0 0 0 1px var(--red); }
.ds-input {
  flex: 1;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--foreground-strong);
  outline: none;
  font: inherit;
  padding: 0 var(--space-3);
}
.ds-input::placeholder { color: var(--muted-foreground); }
.ds-input:disabled { cursor: not-allowed; color: var(--muted-foreground); }
.ds-input:focus-visible,
.ds-textarea:focus-visible,
.ds-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* mobile app default is comfortable: >= 44px tap, >= 16px to stop iOS zoom */
.ds-field-comfortable .ds-input { min-height: 44px; font-size: 16px; }
.ds-field-dense       .ds-input { min-height: 28px; font-size: 13px; padding: 0 var(--space-2); }
.ds-field-affix {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  color: var(--muted-foreground);
  font-size: 13px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ds-field-affix-leading  { border-right: 1px solid var(--border); }
.ds-field-affix-trailing { border-left:  1px solid var(--border); }
.ds-field-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted-foreground);
}
.ds-field-icon-leading  { left:  var(--space-3); }
.ds-field-icon-trailing { right: var(--space-3); }
.ds-field-icon-leading  ~ .ds-input { padding-left: var(--space-7); }
.ds-input:has(~ .ds-field-icon-trailing) { padding-right: var(--space-7); }

/* ----- Textarea + counter ----- */
.ds-field-wrap-textarea { align-items: stretch; padding: 0; }
.ds-textarea {
  resize: vertical;
  padding: var(--space-3);
  line-height: 1.5;
  min-height: 88px;
  flex: 1;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--foreground-strong);
  outline: none;
  font: inherit;
}
.ds-textarea::placeholder { color: var(--muted-foreground); }
.ds-field-comfortable .ds-textarea { font-size: 16px; }
.ds-field-dense       .ds-textarea { font-size: 13px; padding: var(--space-2); min-height: 60px; }
.ds-field-counter {
  font-size: 11px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
  align-self: flex-end;
}

/* ----- Select ----- */
.ds-select {
  flex: 1;
  width: 100%;
  background-color: transparent;
  border: 0;
  color: var(--foreground-strong);
  outline: none;
  font: inherit;
  padding: 0 var(--space-3);
  appearance: none;
  -webkit-appearance: none;
  /* Lucide chevron-down, monoline (ICON-SYSTEM-SPEC.md). Muted-foreground hex
     baked in because a CSS background data-URI cannot read currentColor. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238693A9' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-7);
  cursor: pointer;
}
.ds-select option { background: var(--card); color: var(--foreground-strong); }

/* ----- Checkbox ----- */
.ds-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-1) 0;
  min-height: 44px;
}
.ds-checkbox-input {
  width: 18px; height: 18px;
  margin: 1px 0 0 0;
  font-size: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.ds-checkbox-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  color: var(--foreground-strong);
  line-height: 1.45;
}

/* ----- Radio + segmented ----- */
.ds-radiogroup .ds-radio-options-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ds-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-1) 0;
}
.ds-radio-input {
  width: 18px; height: 18px;
  margin: 1px 0 0 0;
  font-size: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.ds-radio-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  color: var(--foreground-strong);
  line-height: 1.45;
}
.ds-radio-options-segmented {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 3px;
  background: var(--card-low);
  gap: 2px;
  align-self: flex-start;
  width: max-content;
}
.ds-radio-segment {
  position: relative;
  padding: var(--space-2) var(--space-4);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ds-radio-segment input { position: absolute; opacity: 0; pointer-events: none; }
.ds-radio-segment:hover { color: var(--foreground-strong); }
.ds-radio-segment:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ds-radio-segment.is-active { background: var(--accent); color: var(--accent-foreground); }

/* ----- Pill + dirty dot ----- */
.ds-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.ds-pill-green  { background: var(--green-dim);  color: var(--green); }
.ds-pill-yellow { background: var(--yellow-dim); color: var(--yellow); }
.ds-pill-red    { background: var(--red-dim);    color: var(--foreground-strong); }
.ds-pill-muted  { background: var(--muted);      color: var(--muted-foreground); }
.ds-pill-accent { background: var(--accent-dim); color: var(--accent); }
.ds-pill-outline {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  padding: 1px var(--space-2);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.ds-dirty-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  vertical-align: middle;
}

/* ----- Type badge ----- */
.ds-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  background: var(--muted);
  color: var(--muted-foreground);
}
.ds-type-badge-coaching { background: var(--accent-dim); color: var(--foreground-strong); }
.ds-type-badge-consult  { background: var(--muted);      color: var(--muted-foreground); }

/* ----- Card + sub-components ----- */
.ds-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ds-card-comfortable { padding: var(--space-5); gap: var(--space-4); }
.ds-card-dense       { padding: var(--space-3); gap: var(--space-3); }
.ds-card-wide  { grid-column: 1 / -1; }
.ds-card-muted { background: var(--card-low); }
.ds-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.ds-card-header-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.ds-card-header-meta   { text-transform: none; letter-spacing: 0; }
.ds-card-header-action { display: flex; gap: var(--space-2); flex-shrink: 0; }
.ds-card-body { display: flex; flex-direction: column; gap: var(--space-3); }
.ds-card-footer {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.ds-card-footer-end     { justify-content: flex-end; }
.ds-card-footer-start   { justify-content: flex-start; }
.ds-card-footer-between { justify-content: space-between; }

/* ----- Banner / notice (success / error / info / warning) ----- */
.ds-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
}
.ds-banner-text  { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ds-banner-title { font-size: 13px; font-weight: 600; color: var(--foreground-strong); }
.ds-banner-msg   { font-size: 13px; color: var(--muted-foreground); line-height: 1.5; }
.ds-banner-action { flex-shrink: 0; }
.ds-banner-error   { border-color: var(--red);    background: var(--red-dim); color: var(--red); }
.ds-banner-error   .ds-banner-title, .ds-banner-error   .ds-banner-msg { color: var(--foreground-strong); }
.ds-banner-warning { border-color: var(--yellow); background: var(--yellow-dim); color: var(--yellow); }
.ds-banner-warning .ds-banner-title, .ds-banner-warning .ds-banner-msg { color: var(--foreground-strong); }
.ds-banner-info    { border-color: var(--accent); background: var(--accent-dim); }
.ds-banner-info    .ds-banner-title { color: var(--foreground-strong); }
.ds-banner-success { border-color: var(--green);  background: var(--green-dim); color: var(--green); }
.ds-banner-success .ds-banner-title, .ds-banner-success .ds-banner-msg { color: var(--foreground-strong); }
.ds-banner-blocking {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6);
  gap: var(--space-3);
}
.ds-banner-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; }

/* ----- Toast ----- */
.ds-toast {
  position: fixed;
  bottom: calc(var(--space-6) + 64px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-popover);
  font-size: 13px;
  color: var(--foreground-strong);
  z-index: 200;
  max-width: calc(100% - var(--space-8));
}
.ds-toast-msg { flex: 1; }
.ds-toast-success { border-color: var(--green); }
.ds-toast-success > [role="img"]:first-child { color: var(--green); }
.ds-toast-error   { border-color: var(--red); }
.ds-toast-error   > [role="img"]:first-child { color: var(--red); }
.ds-toast-warning { border-color: var(--yellow); }
.ds-toast-warning > [role="img"]:first-child { color: var(--yellow); }
.ds-toast-action button { font-size: 12px; }
.ds-toast-close {
  background: transparent;
  border: 0;
  color: var(--muted-foreground);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-toast-close:hover { color: var(--foreground-strong); }

/* ----- Empty state ----- */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  color: var(--muted-foreground);
}
.ds-empty-card {
  background: var(--card-low);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.ds-empty-inline { padding: var(--space-5); }
.ds-empty-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
}
.ds-empty-title { font-size: 15px; font-weight: 600; color: var(--foreground-strong); }
.ds-empty-desc  { font-size: 13px; max-width: 380px; line-height: 1.55; }
.ds-empty-action { margin-top: var(--space-2); }

/* ----- Spinner (standalone loading) ----- */
.ds-spinner {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: ds-spin 0.7s linear infinite;
  display: inline-block;
}
.ds-spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.ds-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  color: var(--muted-foreground);
  font-size: 13px;
}

/* ----- Skeleton (loading shimmer) ----- */
@keyframes ds-skel-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.ds-skel {
  background: linear-gradient(90deg, var(--muted) 0%, var(--card-low) 50%, var(--muted) 100%);
  background-size: 200% 100%;
  animation: ds-skel-shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}
.ds-skel-line  { height: 12px; }
.ds-skel-block { width: 100%; }
.ds-skel-card { display: flex; flex-direction: column; gap: var(--space-2); }

/* ----- Modal ----- */
.ds-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-5);
}
.ds-modal {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--space-7));
  overflow: hidden;
}
.ds-modal-sm { max-width: 420px; }
.ds-modal-md { max-width: 640px; }
.ds-modal-lg { max-width: 960px; }
.ds-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-3);
}
.ds-modal-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--foreground-strong); }
.ds-modal-sub   { font-size: 13px; color: var(--muted-foreground); margin-top: var(--space-1); line-height: 1.5; }
.ds-modal-close {
  background: transparent;
  border: 0;
  color: var(--muted-foreground);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-modal-close:hover { color: var(--foreground-strong); background: var(--card-low); }
.ds-modal-body {
  padding: 0 var(--space-5) var(--space-5);
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ds-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-5);
  border-top: 1px solid var(--border);
  margin-top: var(--space-2);
}

/* ----- Sheet (bottom slide-up, the mobile-primary overlay) ----- */
.ds-sheet-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim-soft);
  display: flex;
  align-items: flex-end;
  z-index: 100;
}
.ds-sheet {
  width: 100%;
  background: var(--card);
  border-top: 1px solid var(--border-strong);
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  box-shadow: var(--shadow-modal);
  padding-bottom: env(safe-area-inset-bottom);
}
.ds-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  margin: var(--space-2) auto var(--space-1);
}
.ds-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.ds-sheet-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--foreground-strong); }
.ds-sheet-body {
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ----- Client first run tutorial ----- */
.client-tutorial-overlay { z-index: 120; }
.client-tutorial-sheet { max-width: 420px; margin: 0 auto; }
.client-tutorial-header { align-items: center; }
.client-tutorial-close {
  width: auto;
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
}
.client-tutorial-step-label {
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.client-tutorial-body { gap: var(--space-3); }
.client-tutorial-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.client-tutorial-dot {
  width: 100%;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--muted);
}
.client-tutorial-dot.is-active { background: var(--accent); }
.client-tutorial-card {
  display: grid;
  gap: var(--space-3);
}
.client-tutorial-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  color: var(--foreground-strong);
}
.client-tutorial-card .copy { margin: 0; color: var(--foreground); }
.client-tutorial-kicker {
  margin: 0;
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.client-tutorial-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
}
.client-tutorial-actions .primary,
.client-tutorial-actions .ghost {
  width: 100%;
  min-width: 0;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

/* ----- Table (data surface, mono right-aligned numbers) ----- */
.ds-table { width: 100%; border-collapse: collapse; }
.ds-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.ds-table td {
  font-size: 13px;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  color: var(--foreground-strong);
}
.ds-table tr:last-child td { border-bottom: 0; }
.ds-table tbody tr { transition: background var(--transition-base); }
.ds-table tbody tr:hover { background: var(--hover-wash); }
.ds-table .ds-num,
.ds-table th.ds-num,
.ds-table td.ds-num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ----- Wordmark / shortmark ----- */
.ds-wordmark {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.03em;
  color: var(--foreground-strong);
  font-size: 32px;
  line-height: 1;
  display: inline-block;
}
.ds-wordmark-xl { font-size: 64px; letter-spacing: -0.035em; }
.ds-wordmark-lg { font-size: 48px; letter-spacing: -0.03em; }
.ds-wordmark-md { font-size: 32px; letter-spacing: -0.03em; }
.ds-wordmark-sm { font-size: 13px; letter-spacing: -0.01em; }
.ds-wordmark-xs { font-size: 11px; letter-spacing: 0; }
.ds-shortmark {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.05em;
  color: var(--foreground-strong);
  font-size: 20px;
  line-height: 1;
  display: inline-block;
}

/* ============================================================
 * Reduced motion: kill the shimmer + spin loops for users who
 * ask the OS to reduce motion. Brand motion is "earned, not
 * decorative", so this is a clean opt-out.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ds-skel, .ds-btn-spinner, .ds-spinner { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ============================================================
 * RESPONSIVE: real desktop + tablet layout (>= 768px)
 *
 * Below 768px nothing here applies, so the mobile phone view (single
 * column, fixed bottom tab bar) is byte-identical to before. This
 * block replaces the old "framed phone in a void" preview with the
 * production layout: the bottom tab bar becomes a left nav rail and
 * the content area uses the real screen width.
 *
 *   tablet  (768-1023px): 64px icon-only rail + one comfortable column
 *   desktop (>= 1024px):  240px labelled rail + wide content, per-screen
 *                         grids (two-column Today, Progress grid, etc.)
 *
 * Everything is token-bound (Deep + Mono). Cobalt stays action/active
 * only. No hex is hand-rolled.
 * ============================================================ */

/* ---- shared (tablet + desktop): rail shell + scroll model ---- */
@media (min-width: 768px) {
  body.gg-app-body {
    background: var(--background);
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* The phone wrapper becomes the full-width app shell: rail | content.
   * Drop the 420px cap and the centered-device framing. */
  .gg-phone {
    max-width: none;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: var(--gg-rail-w, 64px) minmax(0, 1fr);
    /* column 2 stacks: status bar, offline banner, then the scroll slot */
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }
  /* the top cobalt wash framed the phone; the rail owns chrome now */
  .gg-phone::before { display: none; }

  /* ---- LEFT NAV RAIL (was the bottom .gg-tabbar) ---- */
  .gg-tabbar {
    position: sticky;
    top: 0;
    left: auto;
    bottom: auto;
    transform: none;
    width: auto;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    z-index: 40;
    grid-row: 1 / -1;
    grid-column: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    padding: var(--space-3);
    /* solid panel, not the glass bottom bar */
    background: var(--card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 0;
    border-right: 1px solid var(--border);
    overflow-y: auto;
  }
  /* GG wordmark at the top of the rail, drawn in CSS so no markup
   * changes. The mono GG mark, brand-correct (mono is the mark face). */
  .gg-tabbar::before {
    content: "GG";
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: 44px;
    margin-bottom: var(--space-2);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-foreground);
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
  }

  /* tab buttons become vertical nav items */
  .gg-tab {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-3);
    min-height: 44px;
    padding: 0 var(--space-3);
    border-radius: var(--radius);
    color: var(--muted-foreground);
    transition: color var(--transition-base) var(--ease-default),
                background var(--transition-base) var(--ease-default);
  }
  .gg-tab svg { width: 20px; height: 20px; flex: none; }
  .gg-tab-label { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; }
  .gg-tab:hover { background: var(--hover-wash); color: var(--foreground); }
  .gg-tab:active { background: var(--active-wash); }
  /* cobalt active state, the one accent on the rail */
  .gg-tab.is-active,
  .gg-tab[aria-current="page"] {
    background: var(--accent-dim);
    color: var(--accent);
  }
  .gg-tab.is-active .gg-tab-label,
  .gg-tab[aria-current="page"] .gg-tab-label { color: var(--accent); }

  /* ---- CONTENT COLUMN (column 2 stack: status bar, banner, scroll slot) ---- */
  .gg-statusbar { grid-row: 1; grid-column: 2; position: static; }
  .gg-offline-indicator { grid-row: 2; grid-column: 2; }
  .gg-screen {
    grid-row: 3;
    grid-column: 2;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* bottom tab bar is gone here, so no reserved bottom inset */
    padding: var(--space-6) var(--space-6) var(--space-8);
  }

  /* The rendered screens (.shell) center inside a comfy column. They
   * inherit a width cap; per-screen desktop rules below widen the ones
   * that should use the full width (Today, Progress). */
  .gg-screen > .stack,
  .gg-screen > .shell {
    width: 100%;
    max-width: var(--gg-content-max, 720px);
    margin-inline: auto;
  }
}

/* ---- TABLET (768-1023px): icon-only 64px rail, one column ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .gg-phone { --gg-rail-w: 64px; --gg-content-max: 760px; }
  /* hide labels, center icons in the narrow strip */
  .gg-tabbar { align-items: center; padding: var(--space-2); }
  .gg-tabbar::before { width: 40px; align-self: center; }
  .gg-tab {
    justify-content: center;
    padding: 0;
    width: 44px;
    align-self: center;
  }
  .gg-tab-label { display: none; }
}

/* ---- DESKTOP (>= 1024px): 240px labelled rail + wide content ---- */
@media (min-width: 1024px) {
  .gg-phone { --gg-rail-w: 240px; --gg-content-max: 760px; }
  .gg-tabbar { padding: var(--space-4) var(--space-3); gap: var(--space-1); }
  .gg-tabbar::before {
    justify-content: flex-start;
    padding-left: var(--space-2);
    margin-bottom: var(--space-4);
    letter-spacing: 0.14em;
  }
  .gg-screen {
    padding: var(--space-6) var(--space-8) var(--space-9);
  }

  /* ===== Per-screen desktop treatments =====
   * Driven by #app[data-screen] (set in navigate()). Markup is
   * unchanged: these only re-flow the cards the render functions
   * already emit. Wide screens (Today, Progress) lift the column cap. */

  /* TODAY: two columns. Plan-side cards (training, nutrition) flow left,
   * the log/streak/metrics cards flow right. Summary + whats-due span
   * full width across the top, the checklist spans full width below. */
  #app[data-screen="today"].gg-screen > .stack {
    max-width: 1080px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: start;
  }
  #app[data-screen="today"] > .stack > .today-summary,
  #app[data-screen="today"] > .stack > .whats-due {
    grid-column: 1 / -1;
  }
  /* training card on the left, log/metrics on the right */
  #app[data-screen="today"] > .stack > .today-training { grid-column: 1; }
  #app[data-screen="today"] > .stack > .today-quick-metrics { grid-column: 2; }
  /* the checklist (log CTAs) sits under the metrics on the right */
  #app[data-screen="today"] > .stack > .today-checklist { grid-column: 2; }

  /* PROGRESS: charts grid. Stat row spans the top. Weight trend wide on
   * the left, with measurements/bloodwork/photos beside it, not stacked. */
  #app[data-screen="progress"].gg-screen > .stack {
    max-width: 1080px;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: start;
  }
  #app[data-screen="progress"] > .stack > h2,
  #app[data-screen="progress"] > .stack > p,
  #app[data-screen="progress"] > .stack > .progress-stat-grid {
    grid-column: 1 / -1;
  }
  /* 4-up stat row uses the full width */
  #app[data-screen="progress"] .progress-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* weight trend wide on the left, the rest stack down the right column */
  #app[data-screen="progress"] > .stack > .progress-trend-card:not(.progress-measurements-card):not(.progress-bloodwork-card) {
    grid-column: 1;
    grid-row: span 2;
  }
  #app[data-screen="progress"] > .stack > .progress-measurements-card { grid-column: 2; }
  #app[data-screen="progress"] > .stack > .progress-bloodwork-card { grid-column: 2; }
  #app[data-screen="progress"] > .stack > .progress-photo-card { grid-column: 2; }
  /* bloodwork + measurement markers read 2-up in the wide panel */
  #app[data-screen="progress"] .bw-client-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  /* progress photos use the width as a 3-up gallery, not a scroll strip */
  #app[data-screen="progress"] .progress-photo-card .photo-strip { overflow: visible; flex-wrap: wrap; }
  #app[data-screen="progress"] .progress-photo-card .photo-strip .photo-cell { flex: 0 1 calc(33.333% - var(--space-2)); }

  /* PLAN: read-only plan. Let it use a wider reading column so split
   * days and the nutrition panel breathe. The plan-reader lays its own
   * cards; widen the cap and the day grid uses the space. */
  #app[data-screen="plan"].gg-screen > .stack { max-width: 960px; }

  /* MORE hub: a clean centered list (~560px), not full-bleed. The
   * Photos screen also rides data-screen="more"; widen it back up via
   * :has(.photo-kind) so the gallery uses the screen. */
  #app[data-screen="more"].gg-screen > .stack { max-width: 560px; }
  #app[data-screen="more"].gg-screen > .stack:has(.photo-kind) { max-width: 960px; }

  /* CHECK-IN / forms: a form should not stretch. Center, capped. */
  #app[data-screen="weekly"].gg-screen > .stack,
  #app[data-screen="feedback"].gg-screen > .stack,
  #app[data-screen="microlog"].gg-screen > .stack,
  #app[data-screen="measurements"].gg-screen > .stack { max-width: 680px; }

  /* DAILY LOG: history table uses the width, editor stays a form column. */
  #app[data-screen="daily_log"].gg-screen > .stack { max-width: 1120px; }
  #app[data-screen="daily_log"] > .stack > h2,
  #app[data-screen="daily_log"] > .stack > p.copy,
  #app[data-screen="daily_log"] > .stack > .intake-saverow,
  #app[data-screen="daily_log"] > .stack > .daily-log-form {
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }

  /* PHOTOS (the full Photos screen): gallery uses the width, 4-up wrap */
  #app[data-screen="more"] .photo-strip { overflow: visible; flex-wrap: wrap; }
  #app[data-screen="more"] .photo-strip .photo-cell { flex: 0 1 calc(25% - var(--space-2)); }
}

@media (max-width: 419px) {
  .gg-phone { max-width: 100%; }
  .gg-tabbar { max-width: 100%; }
}

/* ============================================================
 * GG CLIENT APP, application layer (v4 reskin)
 * Built ON TOP of the vendored kit above (tokens + .ds-* + .gg-*).
 * This layer maps the legacy class names the app.js render*
 * functions emit onto the Deep + Mono kit, and adds the native
 * plan-reader styles. No tokens or components are redefined here.
 * No em dashes, no en dashes anywhere.
 * ============================================================ */

/* ----- App shell: the existing .shell / .topbar / .panel chrome the
 * index.html and app.js emit, mapped onto the phone-screen frame. The
 * app uses a single <main class="shell"> with a <section class="topbar">
 * and a <section class="panel" id="app">. We restyle these in place so
 * no markup changes are needed. ----- */
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--background);
}

.shell {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4)
           calc(var(--space-8) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
/* the instrument powering on: a single faint cobalt wash framing the top */
.shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 200px;
  background: var(--glow-top);
  pointer-events: none;
  z-index: 0;
}

.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-1) 0;
}

.eyebrow {
  margin: 0 0 var(--space-1);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}

h1, h2, h3, p { margin-top: 0; }

.topbar h1 {
  margin-bottom: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--foreground-strong);
}

h2 {
  margin-bottom: var(--space-3);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--foreground-strong);
}

h3 {
  margin-bottom: var(--space-2);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground-strong);
}

/* the main content panel: a card on the deep ground. The app puts the
 * loader and every rendered screen inside #app.panel. */
.panel {
  position: relative;
  z-index: 1;
  min-height: 360px;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

.copy {
  color: var(--foreground);
  line-height: 1.55;
}

.stack { display: grid; gap: var(--space-5); }

/* ----- Forms: legacy .form / .field map to the kit field contract ----- */
.form { display: grid; gap: var(--space-4); margin-top: var(--space-5); }

.field { display: grid; gap: var(--space-2); }
.field label { font-size: 12px; font-weight: 600; color: var(--foreground-strong); letter-spacing: -0.01em; }

.field input[type="email"],
.field input[type="text"],
.field input[type="number"] {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--input);
  color: var(--foreground-strong);
  font-size: 16px;
}
.field input::placeholder { color: var(--muted-foreground); }
.field input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

/* ----- Buttons: legacy .primary / .ghost map to .ds-btn variants ----- */
.primary, .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background var(--transition-base), color var(--transition-base),
              border-color var(--transition-base), opacity var(--transition-base);
}

.primary { background: var(--accent); color: var(--accent-foreground); border-color: var(--accent); }
.primary:hover:not(:disabled) { opacity: 0.90; }
.primary:active:not(:disabled) { opacity: 0.82; }
.primary:disabled {
  cursor: not-allowed;
  background: var(--muted);
  color: var(--muted-foreground);
  border-color: transparent;
}

.ghost { background: transparent; color: var(--foreground); border-color: var(--border-strong); }
.ghost:hover:not(:disabled) { color: var(--foreground-strong); border-color: var(--accent); background: var(--card-low); }
.ghost:disabled { cursor: not-allowed; color: var(--muted-foreground); opacity: 0.7; }

.hidden { display: none !important; }

/* ----- Notices: legacy .notice / .error / .success map to banners ----- */
.notice, .error, .success {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  line-height: 1.5;
  font-size: 13px;
}
.notice  { background: var(--accent-dim); border-color: var(--accent); color: var(--foreground-strong); }
.error   { background: var(--red-dim);    border-color: var(--red);    color: var(--foreground-strong); }
.success { background: var(--green-dim);  border-color: var(--green);  color: var(--foreground-strong); }

.access-lock {
  min-height: min(620px, calc(100dvh - 150px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--card);
  padding: var(--space-7) var(--space-5);
}

.access-lock h2 {
  margin: 0;
}

.access-lock .copy {
  margin: 0;
  max-width: 34rem;
}

.access-lock-actions {
  margin-top: var(--space-2);
}

.access-lock .self-telegram-link {
  text-decoration: none;
}

.access-lock-paused {
  border-color: var(--yellow);
  background: linear-gradient(180deg, var(--yellow-dim), var(--card));
}

.access-lock-ended {
  border-color: var(--red);
  background: linear-gradient(180deg, var(--red-dim), var(--card));
}

.access-lock-waiting {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-dim), var(--card));
}

/* ----- Consent blocks ----- */
.consent {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-low);
}
.consent p { margin-bottom: 0; color: var(--foreground); line-height: 1.55; }

/* ----- Checkbox rows ----- */
.check {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-1) 0;
  margin-top: var(--space-1);
  font-size: 14px;
  color: var(--foreground-strong);
  line-height: 1.45;
}
.check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  font-size: 16px;
  accent-color: var(--accent);
}

/* ----- Loader: legacy spinner mapped to the kit spin ----- */
.loader {
  width: 28px;
  height: 28px;
  margin: 120px auto;
  border: 3px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ds-spin 0.8s linear infinite;
}

/* ============================================================
 * Intake / daily-log / weekly / measurements forms
 * The app emits .intake-section / .intake-field / .intake-input /
 * .intake-textarea / .intake-helper for all four data-entry forms.
 * Map them onto the kit field language.
 * ============================================================ */
.intake-form { display: grid; gap: var(--space-5); margin-top: var(--space-4); min-width: 0; }

.intake-section {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-low);
}
.intake-section > h3 { margin: 0; font-size: 15px; color: var(--foreground-strong); }
.intake-section > p.copy { margin: 0; color: var(--muted-foreground); font-size: 13px; }

.intake-field { display: grid; gap: var(--space-1); min-width: 0; }
.intake-field > label { font-size: 12px; font-weight: 600; color: var(--foreground-strong); letter-spacing: -0.01em; }

.intake-helper {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.45;
}

.intake-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--input);
  color: var(--foreground-strong);
  font-size: 16px;
}
.intake-input-mono {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
select.intake-input {
  /* a select otherwise sizes to its widest option, pushing the form past the
     phone frame; clip it so a long option can't cause horizontal scroll. */
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  /* Lucide chevron-down, monoline (ICON-SYSTEM-SPEC.md). Muted-foreground hex
     baked in because a CSS background data-URI cannot read currentColor. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238693A9' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-7);
  cursor: pointer;
}
select.intake-input option { background: var(--card); color: var(--foreground-strong); }

.intake-input:focus, .intake-textarea:focus {
  border-color: var(--accent);
}
.intake-input:focus-visible,
.intake-textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.intake-textarea {
  width: 100%;
  min-height: 96px;
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--input);
  color: var(--foreground-strong);
  resize: vertical;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}
.intake-textarea:disabled { color: var(--muted-foreground); cursor: not-allowed; }

.intake-yn-notes { display: grid; gap: var(--space-2); }
.intake-checkboxes { display: grid; gap: var(--space-2); }
.intake-checkbox-row { font-weight: 400; }
.intake-conditional.hidden { display: none !important; }
.intake-ack { align-items: start; }
.intake-ack input { margin-top: 4px; }

.intake-status:empty { display: none; }
.intake-status .notice, .intake-status .success, .intake-status .error { margin: 0; }

/* Autosave reassurance + live status pill (sits above the form). */
.intake-saverow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.intake-reassure {
  margin: 0;
  font-size: 13px;
  color: var(--muted-foreground);
  flex: 1 1 220px;
  min-width: 0;
}
.intake-savepill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Autosave status phrase ("All changes saved", "Saving…", "Couldn't save.
     Will retry."), so Inter. */
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
  white-space: nowrap;
}
.intake-savepill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.intake-savepill.is-idle  { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.intake-savepill.is-dirty,
.intake-savepill.is-saving { color: var(--muted-foreground); }
.intake-savepill.is-error  { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }

.intake-actions {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
}

/* daily-log phone-first sizing */
.daily-log-form .intake-input { font-size: 16px; }
.daily-log-form input[type="number"].intake-input { min-height: 48px; }
.daily-log-form .intake-section h3 { font-size: 15px; }

/* daily-log history sheet */
.daily-log-history {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.daily-log-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.daily-log-history-title {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.daily-log-history-copy {
  margin: 0;
  font-size: 13px;
  color: var(--muted-foreground);
}
.daily-log-history-count { flex: 0 0 auto; }
.daily-log-range {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.daily-log-range-chips {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.daily-log-range-chip {
  min-height: 44px;
  min-width: 44px;
}
.daily-log-custom-range {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  align-items: end;
  min-width: 0;
}
.daily-log-custom-range > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--foreground-strong);
}
.daily-log-date-input {
  min-height: 44px;
  font-size: 16px;
}
.daily-log-custom-apply {
  min-height: 44px;
  width: 100%;
}
.daily-log-range-status {
  min-height: 18px;
  font-size: 12px;
  color: var(--yellow);
}
.daily-log-range-status:empty { display: none; }
.daily-log-history-empty { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.daily-log-history-table-wrap {
  display: block;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}
.daily-log-history-table {
  min-width: 1120px;
}
.daily-log-history-table th,
.daily-log-history-table td {
  white-space: nowrap;
}
.daily-log-history-table tbody tr {
  cursor: pointer;
}
.daily-log-history-table tbody tr.is-selected {
  background: var(--accent-dim);
}
.daily-log-history-table tbody tr.is-missing {
  color: var(--muted-foreground);
}
.daily-log-history-table tbody tr:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.daily-log-history-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.daily-log-history-notes {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.daily-log-history-date {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.daily-log-history-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--accent);
  background: var(--accent-dim);
  font-size: 12px;
  font-weight: 600;
}
.daily-log-history-list {
  display: none;
  gap: var(--space-2);
}
.daily-log-history-item {
  width: 100%;
  min-height: 64px;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-low);
  color: var(--foreground);
  text-align: left;
}
.daily-log-history-item:hover { border-color: var(--accent); }
.daily-log-history-item:active { background: var(--active-wash); }
.daily-log-history-item.is-selected {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.daily-log-history-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.daily-log-history-item-date,
.daily-log-history-item-week,
.daily-log-history-item-line {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.daily-log-history-item-date {
  color: var(--foreground-strong);
  font-weight: 600;
}
.daily-log-history-item-week,
.daily-log-history-item-note {
  color: var(--muted-foreground);
  font-size: 12px;
}
.daily-log-history-item-line {
  color: var(--foreground);
  font-size: 12px;
}
.daily-log-history-item-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .daily-log-history-table-wrap {
    display: none;
  }

  .daily-log-history-list {
    display: grid;
  }
}

@media (min-width: 520px) {
  .daily-log-custom-range {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  }
  .daily-log-custom-apply { width: auto; }
}

/* micro-log quick entry */
.micro-log-form { gap: var(--space-4); }
.micro-log-section { gap: var(--space-3); }
.micro-log-date { margin-bottom: var(--space-1); }
.micro-log-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  min-width: 0;
}
.micro-log-form input[type="number"].intake-input,
.micro-log-form input[type="date"].intake-input {
  min-height: 48px;
}

@media (min-width: 360px) {
  .micro-log-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
 * Logbook in-gym set logging: one card per lift with prescribed
 * target, last-session actuals, fast per-set entry, a rest timer,
 * and a plate-math helper. Token-bound, mobile-first, 44px touch
 * targets, 16px inputs (no iOS zoom). No dashes below this point.
 * ============================================================ */
.logbook-lift { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }

.logbook-lift-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.logbook-lift-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--foreground-strong);
}
.logbook-lift-target {
  margin-top: 2px;
  /* Label phrase ("Target 8-12 reps", "No target set"), so Inter. */
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

/* last-session "what to beat" line */
.logbook-lastline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--accent-dim);
  border-radius: var(--radius);
}
.logbook-lastline-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.logbook-lastline-val {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.logbook-lastline-date { margin-left: auto; font-size: 11px; color: var(--muted-foreground); }

/* sets already logged today */
.logbook-logged { display: grid; gap: var(--space-1); }
.logbook-logged-empty { margin: 0; font-size: 12px; color: var(--muted-foreground); }
.logbook-logged-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border);
}
.logbook-logged-row:last-child { border-bottom: 0; }
.logbook-logged-set { font-size: 12px; color: var(--muted-foreground); }
.logbook-logged-val { display: flex; align-items: baseline; gap: var(--space-2); }
.logbook-logged-num {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground-strong);
  font-variant-numeric: tabular-nums;
}
.logbook-logged-rir { font-size: 11px; color: var(--muted-foreground); }

/* per-set entry */
.logbook-setform { display: grid; gap: var(--space-3); }
.logbook-setgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
}
/* On a phone, four columns crowd the card edge. Drop to a 2x2 grid so each
 * entry stays a comfortable tap target. */
@media (max-width: 480px) {
  .logbook-setgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.logbook-setgrid .logbook-entry-ex { grid-column: 1 / -1; }
.logbook-entry { display: grid; gap: 4px; }
.logbook-entry-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-foreground);
  letter-spacing: -0.01em;
}
.logbook-input {
  min-height: 44px;
  width: 100%;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--input);
  color: var(--foreground-strong);
  font-family: var(--font-num);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.logbook-input-ex {
  font-family: var(--font-display, inherit);
  text-align: left;
  padding: 0 var(--space-3);
}
.logbook-input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.logbook-savebtn { min-height: 48px; width: 100%; }
.logbook-setstatus:empty { display: none; }

/* rest timer */
.logbook-rest {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--input);
}
.logbook-rest-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.logbook-rest-clock {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 700;
  color: var(--foreground-strong);
  font-variant-numeric: tabular-nums;
  min-width: 64px;
}
.logbook-rest.is-running .logbook-rest-clock { color: var(--accent); }
.logbook-rest.is-done .logbook-rest-clock { color: var(--yellow); }
.logbook-rest-btn { min-height: 44px; margin-left: auto; }
.logbook-rest-btn + .logbook-rest-btn { margin-left: var(--space-2); }

/* plate helper */
.logbook-plates {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--input);
}
.logbook-plates-summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground-strong);
}
.logbook-plates-summary::-webkit-details-marker { display: none; }
.logbook-plates-summary::after { content: "+"; margin-left: auto; color: var(--muted-foreground); }
.logbook-plates[open] .logbook-plates-summary::after { content: "-"; }
.logbook-plates-body { padding: 0 var(--space-3) var(--space-3); display: grid; gap: var(--space-3); }
.logbook-plates-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.logbook-plates-out {
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--foreground);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .shell { padding: var(--space-3) var(--space-3) calc(var(--space-7) + env(safe-area-inset-bottom)); }
  .topbar { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .panel { padding: var(--space-4); }
  .primary, .ghost { width: 100%; }
  .intake-section { padding: var(--space-3); }
  .intake-actions { display: flex; flex-direction: column-reverse; }
}

@media (hover: none), (max-width: 767px) {
  body.gg-app-body :is(
    button,
    [role="button"],
    .ds-btn,
    .ds-btn-sm,
    .ds-btn-md,
    .compare-angle,
    .compare-mode,
    .progress-photo-compare-link
  ) {
    min-height: 44px;
  }

  body.gg-app-body :is(input, select, textarea) {
    font-size: 16px;
  }

  .daily-log-range-chip,
  .compare-angle,
  .compare-mode {
    min-width: 44px;
  }
}

/* ============================================================
 * Native PLAN reader (P2): the six real plan sections rendered
 * as purpose-built cards / lists / tables, replacing the raw JSONB
 * dump. The app emits these classes from renderPlanView in app.js.
 * Adapted verbatim in intent from design/v4/client/plan.html.
 * No tokens or components redefined. No dashes.
 * ============================================================ */
.plan-view { display: grid; gap: var(--space-6); }

.plan-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 12.5px;
  color: var(--muted-foreground);
  line-height: 1.5;
  padding: 0 var(--space-1);
}

/* section: eyebrow + meta header, then a card */
.plan-section { display: flex; flex-direction: column; gap: var(--space-3); }
.plan-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-1);
}
.plan-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.plan-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  flex: none;
}
.plan-section-meta { font-size: 12px; color: var(--muted-foreground); }
.plan-section-meta b { color: var(--foreground); font-weight: 600; }

.plan-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.plan-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
}
.plan-card-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--foreground-strong); }
.plan-card-meta { flex: none; max-width: 45%; overflow-wrap: anywhere; text-align: right; font-size: 12px; color: var(--muted-foreground); }
.plan-card-meta b { color: var(--foreground); font-weight: 600; }
.plan-card-pad { padding: var(--space-4); }

/* a lift row inside the training card: ordinal, name + target, scheme */
.lift { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.lift:first-of-type { border-top: 0; }
.lift-top { display: grid; grid-template-columns: 18px 1fr auto; align-items: baseline; gap: var(--space-3); }
.lift-ord { font: 700 11px/1 var(--font-num); color: var(--muted-foreground); }
.lift-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground-strong); }
.lift-target { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); margin-top: 3px; }
.lift-scheme { font: 700 15px/1 var(--font-num); color: var(--foreground-strong); white-space: nowrap; letter-spacing: -0.02em; }
.lift-scheme .x { color: var(--muted-foreground); font-weight: 500; }
.kv-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); padding-left: 30px; }
.kv {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--card-low); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px var(--space-2);
}
.kv-k { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 600; }
.kv-v { font: 700 12px/1 var(--font-num); color: var(--foreground); font-variant-numeric: tabular-nums; }
.kv-note {
  font-size: 12px; color: var(--muted-foreground); line-height: 1.5;
  margin-top: var(--space-2); padding-left: 30px;
}

/* a labelled value list (nutrition day targets, activity rules, standing rules) */
.kvlist { display: flex; flex-direction: column; }
.kvlist-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border);
}
.kvlist-row:first-child { border-top: 0; }
.kvlist-label { font-size: 13px; color: var(--foreground); min-width: 0; }
.kvlist-label small { display: block; font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.kvlist-value {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600; color: var(--foreground-strong); white-space: nowrap; text-align: right;
}
.kvlist-value .unit { font-size: 11px; font-weight: 500; color: var(--muted-foreground); margin-left: 2px; }

/* macro split bar under a calorie target */
.macrobar { display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; margin-top: var(--space-1); }
.macrobar > i { display: block; height: 100%; }
.macrobar-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.macrobar-key { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted-foreground); }
.macrobar-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* nutrition day-type macro head (label + kcal stat) */
.plan-macro-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
}
.plan-macro-label { min-width: 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--foreground-strong); }
.plan-macro-kcal { flex: none; font-family: var(--font-num); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--foreground-strong); }
.plan-macro-kcal .unit { font-size: 13px; font-weight: 600; color: var(--muted-foreground); margin-left: 4px; }

/* meal list inside a nutrition day card */
.plan-meal { border-top: 1px solid var(--border); padding: var(--space-3) var(--space-4); }
.plan-meal:first-of-type { border-top: 0; }
.plan-meal-label { font-size: 13px; font-weight: 600; color: var(--foreground-strong); margin-bottom: var(--space-1); }
.plan-meal-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  font-size: 13px; color: var(--foreground); padding: 2px 0;
  min-width: 0;
}
.plan-meal-item .food { min-width: 0; overflow-wrap: anywhere; }
.plan-meal-item .portion { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--muted-foreground); white-space: nowrap; }

/* supplement / PED schedule chip line */
.timing { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--foreground); }
.compound { font-weight: 600; color: var(--foreground-strong); white-space: nowrap; }
.sec-count { font-family: var(--font-num); color: var(--foreground); font-weight: 600; }

/* PED weekly schedule mini grid (mon..sun) */
.ped-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: var(--space-2);
}
.ped-day {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--card-low); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 5px 2px;
}
.ped-day-name { font-size: 8px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.ped-day-dose { font: 600 11px/1.1 var(--font-num); color: var(--foreground-strong); text-align: center; font-variant-numeric: tabular-nums; }
.ped-day.is-off .ped-day-dose { color: var(--muted-foreground); }

/* phase / periodization week rows */
.phase-week {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border);
}
.phase-week:first-of-type { border-top: 0; }
.phase-week-num { font: 700 13px/1 var(--font-num); color: var(--muted-foreground); white-space: nowrap; }
.phase-week-body { flex: 1; min-width: 0; }
.phase-week-note { font-size: 12px; color: var(--muted-foreground); line-height: 1.45; }
.phase-flag {
  display: inline-flex; align-items: center; margin-right: 4px;
  padding: 1px var(--space-2); border-radius: var(--radius-sm);
  font-size: 10px; font-weight: 500; background: var(--accent-dim); color: var(--accent);
}

.plan-empty-section {
  padding: var(--space-5) var(--space-4);
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

/* surface-level coach prose (training focus, session notes, set legend) */
.plan-notes { display: grid; gap: var(--space-3); }
.plan-note-row { display: grid; gap: 2px; }
.plan-note-label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.plan-note-text { font-size: 13px; color: var(--foreground); line-height: 1.5; margin: 0; }

/* per-food-item macro chips + per-item note */
.plan-meal-item .item-macros { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted-foreground); white-space: nowrap; }
.plan-meal-item-note { font-size: 11px; color: var(--muted-foreground); line-height: 1.45; margin: 2px 0 0; padding-left: 0; }

/* supplement reason sub-line + purchase link */
.supp-reason { display: block; font-size: 11px; font-weight: 400; color: var(--muted-foreground); line-height: 1.4; margin-top: 2px; white-space: normal; }
.supp-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  margin-top: 2px;
  text-decoration: none;
}
.supp-link:hover { text-decoration: underline; }

/* phase planned-targets / actuals key-value blocks */
.phase-kv-block { margin-top: var(--space-2); }
.phase-kv-label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 2px; }

/* "Other details" safety-net block: spec-allowed keys with no bespoke slot */
.plan-card-other .plan-other-label,
.plan-other-label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: var(--space-2); }

/* ============================================================
 * Logbook view: a stack of per-lift cards.
 * ============================================================ */
.logbook-view { display: grid; gap: var(--space-4); }
.logbook-hint {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.45;
}

/* ============================================================
 * Progress view: read-only bodyweight trend, package week,
 * consistency, and side-by-side photo comparison.
 * ============================================================ */
.progress-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.progress-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 132px;
}

.progress-stat-value {
  font-family: var(--font-num);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--foreground-strong);
  overflow-wrap: anywhere;
}

.progress-stat-sub {
  margin-top: auto;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted-foreground);
}

.progress-week-track { margin-top: auto; }

.progress-trend-card,
.progress-photo-card {
  display: flex;
  flex-direction: column;
}

.progress-chart-wrap {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
}

.progress-sparkline {
  display: block;
  width: 100%;
  min-height: 92px;
  overflow: visible;
}

.progress-sparkline-grid {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
}

.progress-sparkline-line {
  fill: none;
  stroke: var(--chart-1);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.progress-chart-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-num);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}

.progress-weekly-list {
  display: grid;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
}

.progress-weekly-list h3 {
  margin: 0;
  font-size: 13px;
  color: var(--foreground-strong);
}

.progress-weekly-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}

.progress-weekly-date,
.progress-weekly-count {
  min-width: 0;
  color: var(--muted-foreground);
  font-size: 12px;
}

.progress-weekly-value {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--foreground-strong);
}

.progress-metric-list {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-4);
}

.progress-metric-row {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.progress-metric-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.progress-metric-label {
  min-width: 0;
  color: var(--foreground-strong);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.progress-metric-value {
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--foreground-strong);
}

.progress-metric-sparkline {
  min-height: 64px;
}

.progress-metric-dot {
  stroke: var(--background);
  stroke-width: 2;
}

/* Client bloodwork transparency: read-only marker rows. State pill always
 * carries a text label (In range / Low / High / No range) so the verdict is
 * never colour alone. */
.bw-client-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.bw-client-range {
  font-family: var(--font-num);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}

.bw-client-note {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--muted);
  color: var(--foreground);
  font-size: 13px;
  line-height: 1.45;
}

.progress-photo-list {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-4);
}

.progress-photo-group {
  display: grid;
  gap: var(--space-2);
}

.progress-photo-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: var(--space-2);
}

.progress-photo-figure {
  min-width: 0;
  margin: 0;
}

/* Compare link in the progress photo card head: a quiet cobalt text action. */
.progress-photo-compare-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.progress-photo-compare-link:hover { background: var(--card-low); }

/* ------------------------------------------------------------
 * Compare photos surface (two dates, one angle, side by side or overlay)
 * ---------------------------------------------------------- */
.compare-controls {
  display: grid;
  gap: var(--space-3);
}

/* Angle switcher + mode toggle: segmented controls on the nested surface. */
.compare-angles,
.compare-modes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  padding: 3px;
  background: var(--card-low);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.compare-angle,
.compare-mode {
  min-height: 40px;
  padding: 0 var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.compare-angle.is-active,
.compare-mode.is-active {
  background: var(--card);
  border-color: var(--border);
  color: var(--foreground-strong);
}
.compare-angle:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.compare-dates {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: var(--space-2);
}
.compare-date-field { min-width: 0; }
.compare-date-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--foreground-strong);
}
.compare-date-select { font-size: 16px; }
.compare-swap {
  min-height: 44px;
  padding: 0 var(--space-3);
}

.compare-stage {
  display: grid;
  gap: var(--space-3);
}

/* Side by side: two equal columns. */
.compare-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.compare-figure {
  min-width: 0;
  margin: 0;
}
.compare-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-low);
}
.compare-cap {
  margin-top: var(--space-1);
  /* Figure caption ("Front · wk 3"): a label word leads, so Inter;
     tabular-nums keeps the week/date figures aligned. */
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}

/* Overlay (ghost): the after photo sits on top of the before photo. */
.compare-overlay-stack {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}
.compare-overlay-stack .compare-figure {
  margin: 0;
}
.compare-overlay-stack .compare-figure-ghost {
  position: absolute;
  inset: 0;
}
.compare-overlay-stack .compare-figure-ghost .compare-cap,
.compare-overlay-stack .compare-figure-base .compare-cap {
  position: absolute;
  left: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--caption-scrim);
  color: var(--primary-foreground);
}
.compare-overlay-stack .compare-figure-base .compare-cap { bottom: var(--space-2); }
.compare-overlay-stack .compare-figure-ghost .compare-cap { top: var(--space-2); }

.compare-opacity-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
}
.compare-opacity {
  width: 100%;
  min-height: 44px;
  accent-color: var(--accent);
  cursor: pointer;
}
.compare-opacity-end {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
}

@media (max-width: 340px) {
  .progress-stat-grid { grid-template-columns: 1fr; }
  .progress-stat { min-height: 0; }
  .progress-weekly-row { grid-template-columns: minmax(0, 1fr) auto; }
  .progress-weekly-count { grid-column: 1 / -1; }
  .progress-metric-head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }
  .compare-dates { grid-template-columns: 1fr 1fr; }
  .compare-swap { grid-column: 1 / -1; }
}

/* ============================================================
 * Plan view + logbook tables, horizontal scroll + Deep+Mono table
 * skin. The client plan is rendered by a generic JSONB walker
 * (renderJsonbView in app.js) for any section that does not match a
 * native shape, emitting .plan-table, .plan-dl, .plan-list. The
 * logbook emits .logbook-table. Make wide tables scroll sideways
 * instead of clipping the phone viewport, and skin them to the kit.
 * No JS / DOM change needed. No dashes below this point.
 * ============================================================ */
.plan-dl { margin: 0; display: grid; gap: var(--space-3); }
.plan-dl > dt {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.plan-dl > dd { margin: 0; color: var(--foreground); line-height: 1.5; }

.plan-list { margin: 0; padding-left: 20px; line-height: 1.55; color: var(--foreground); }
.plan-list > li { margin-bottom: 4px; }
.plan-mixed { display: grid; gap: var(--space-3); }
.plan-empty { color: var(--muted-foreground); }

.plan-table,
.logbook-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 0.92rem;
}

.plan-table thead,
.plan-table tbody,
.plan-table tr,
.logbook-table thead,
.logbook-table tbody,
.logbook-table tr {
  display: table;
  width: 100%;
  table-layout: auto;
}

.plan-table th,
.plan-table td,
.logbook-table th,
.logbook-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
  color: var(--foreground-strong);
}

.plan-table th,
.logbook-table th {
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--card-low);
}

.plan-table tbody tr:last-child th,
.plan-table tbody tr:last-child td,
.logbook-table tbody tr:last-child th,
.logbook-table tbody tr:last-child td {
  border-bottom: none;
}

/* ----- Client self-service: package status, renewal and coach link ----- */
.self-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.self-card h3 {
  margin: 0;
  color: var(--foreground-strong);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}
.self-card .copy {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 13px;
}
.self-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.self-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.self-package.tone-active .self-status-pill {
  border-color: var(--green);
  background: var(--green-dim);
  color: var(--green);
}
.self-package.tone-renew-soon .self-status-pill,
.self-package.tone-not-started .self-status-pill {
  border-color: var(--yellow);
  background: var(--yellow-dim);
  color: var(--yellow);
}
.self-package.tone-ended .self-status-pill {
  border-color: var(--red);
  background: var(--red-dim);
  color: var(--red);
}
.self-readout {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-low);
}
.self-readout-main {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}
.self-readout-num {
  font-family: var(--font-num);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--foreground-strong);
  font-variant-numeric: tabular-nums;
}
.self-readout-unit {
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 600;
}
.self-readout-sub {
  /* Week label ("Week 5 of 12", "Week not set"), so Inter; tabular-nums
     keeps the figures aligned. The big number above is .self-readout-num. */
  font-family: var(--font-sans);
  color: var(--foreground);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.self-facts {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--border);
}
.self-fact {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.self-fact dt {
  color: var(--muted-foreground);
  font-size: 12px;
}
.self-fact dd {
  margin: 0;
  color: var(--foreground-strong);
  font-family: var(--font-num);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.self-actions {
  margin-top: 0;
}
.self-telegram-link {
  text-decoration: none;
}

/* ----- Cycle runway (client read-only view) ----- */
.runway-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius); background: var(--card); }
.runway-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.runway-compound { font-weight: 600; color: var(--foreground-strong); overflow-wrap: anywhere; }
.runway-sub { font-size: 12px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.runway-weeks { display: flex; flex: none; flex-direction: column; align-items: flex-end; }
.runway-num { font-family: var(--font-num); font-size: 22px; font-weight: 700; color: var(--foreground-strong); line-height: 1; }
.runway-wklabel { font-size: 11px; color: var(--muted-foreground); }
.runway-row.tone-ok { border-left-color: var(--green); }
.runway-row.tone-warn { border-left-color: var(--yellow); }
.runway-row.tone-crit { border-left-color: var(--red); }
.runway-row.tone-none { border-left-color: var(--border-strong); }

/* ============================================================
 * GG-233 food logger
 * Built from existing Deep+Mono tokens (no hand-rolled colors/type/spacing).
 * Mono (--font-num) for every number, Inter for every label. 6px radius,
 * hairline borders, dark default. Touch targets >= 44px, inputs >= 16px.
 * Layout mirrors docs/gg233-mock.html.
 * ============================================================ */
.food-surface { position: relative; min-height: 100%; }
.food-body { display: flex; flex-direction: column; padding-bottom: var(--space-4); }
.food-spacer-md { height: var(--space-6); }
.food-cta-spacer { height: 150px; }

/* in-view Dziś / Baza segmented toggle */
.food-segment { display: flex; gap: var(--space-1); padding: var(--space-1); margin: var(--space-2) 0 var(--space-3); background: var(--card-low, var(--secondary)); border: 1px solid var(--border); border-radius: var(--radius); }
.food-segment-btn { flex: 1; min-height: 44px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted-foreground); font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer; }
.food-segment-btn.is-active { background: var(--card); color: var(--foreground-strong); }

/* hero: calorie ring + macros */
.food-hero { display: flex; flex-direction: column; align-items: center; padding: var(--space-2) 0 var(--space-1); }
.food-ring-wrap { position: relative; width: 184px; height: 184px; }
.food-ring-wrap svg { transform: rotate(-90deg); }
.food-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.food-ring-big { font-family: var(--font-num); font-size: 42px; font-weight: 700; letter-spacing: -0.02em; color: var(--foreground-strong); line-height: 1; font-variant-numeric: tabular-nums; }
.food-ring-lbl { font-family: var(--font-sans); font-size: 13px; color: var(--muted-foreground); margin-top: 5px; }
.food-ring-frac { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted-foreground); margin-top: 6px; }

.food-macros { display: flex; width: 100%; gap: var(--space-2); margin-top: var(--space-4); }
.food-macro { flex: 1; text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-1); }
.food-m-lbl { font-family: var(--font-sans); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.food-m-val { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 600; color: var(--foreground-strong); margin-top: 6px; }
.food-m-goal { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.food-m-bar { height: 3px; border-radius: 2px; background: var(--muted); margin-top: 10px; overflow: hidden; }
.food-m-bar span { display: block; height: 100%; border-radius: 2px; }
.food-macro.protein .food-m-bar span { background: var(--green); }
.food-macro.carb .food-m-bar span { background: var(--yellow); }
.food-macro.fat .food-m-bar span { background: var(--accent-emphasis); }

.food-group-head { font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); padding: var(--space-5) 0 var(--space-2); display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.food-group-head.tight { padding-top: var(--space-3); }
.food-group-head .num { color: var(--muted-foreground); }

/* grouped instrument card */
.food-group { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.food-group-spaced { margin-top: var(--space-3); }

.food-cell { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 13px var(--space-4); min-height: 52px; position: relative; }
.food-cell + .food-cell::before { content: ""; position: absolute; top: 0; left: var(--space-4); right: 0; height: 1px; background: var(--border); }
.food-cell.tappable { cursor: pointer; }
.food-cell.tappable:active { background: var(--active-wash); }
.food-cell-lead { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.food-cell-name { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--foreground-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.food-cell-sub { font-family: var(--font-sans); font-size: 12px; color: var(--muted-foreground); }
.food-cell-sub .num { color: var(--muted-foreground); }
.food-cell-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.food-chev { color: var(--muted-foreground); font-size: 18px; opacity: 0.7; }
.food-accent-text { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--accent); }
.food-row-val { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--foreground-strong); }
.food-unit { color: var(--muted-foreground); font-family: var(--font-sans); font-size: 12px; }

.food-swap-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-low, var(--secondary)); color: var(--muted-foreground); cursor: pointer; }
.food-swap-btn:hover { color: var(--accent); border-color: var(--accent); }

/* grouped meal list (Dziś) */
.food-meal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-3); }
.food-meal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: var(--space-3) var(--space-4); min-height: 48px; }
.food-mh-left { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.food-mh-name { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--foreground-strong); }
.food-mh-total { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; color: var(--foreground-strong); white-space: nowrap; }
.food-mh-unit { color: var(--muted-foreground); font-family: var(--font-sans); font-size: 12px; margin-left: 3px; }
.food-meal-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 11px var(--space-4) 11px var(--space-5); position: relative; min-height: 50px; }
.food-meal-item::before { content: ""; position: absolute; top: 0; left: var(--space-4); right: 0; height: 1px; background: var(--border); }
.food-mi-lead { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.food-mi-name { font-family: var(--font-sans); font-size: 14px; color: var(--foreground-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.food-mi-sub { font-family: var(--font-sans); font-size: 12px; color: var(--muted-foreground); }
.food-mi-sub .num { color: var(--muted-foreground); }
.food-mi-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.food-mi-kcal { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--foreground-strong); white-space: nowrap; }
.food-mi-del { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; border-radius: var(--radius-sm); }
.food-mi-del:hover { color: var(--destructive); }
.food-meal-add { display: flex; align-items: center; gap: var(--space-2); padding: 10px var(--space-4) 10px var(--space-5); position: relative; cursor: pointer; min-height: 44px; }
.food-meal-add::before { content: ""; position: absolute; top: 0; left: var(--space-4); right: 0; height: 1px; background: var(--border); }
.food-meal-add .food-accent-text { font-size: 13px; }

.food-day-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--card-low, var(--secondary)); border: 1px solid var(--border); border-radius: var(--radius); }
.food-dt-lbl { font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.food-dt-val { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; color: var(--foreground-strong); }

/* search */
.food-search { display: flex; align-items: center; gap: 10px; margin: var(--space-2) 0 var(--space-1); background: var(--input); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0 14px; min-height: 46px; color: var(--muted-foreground); }
.food-search svg { flex-shrink: 0; }
.food-search-input { flex: 1; background: transparent; border: 0; outline: none; font-family: var(--font-sans); font-size: 16px; color: var(--foreground-strong); min-height: 44px; }
.food-search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.food-search-input::placeholder { color: var(--muted-foreground); }

/* sticky floating CTA (Dziś) */
.food-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; background: var(--accent); color: var(--accent-foreground); font-family: var(--font-sans); font-size: 16px; font-weight: 600; border: 1px solid var(--accent); border-radius: var(--radius); min-height: 52px; cursor: pointer; }
.food-cta-float { position: sticky; bottom: var(--space-4); margin: 0 0 var(--space-2); box-shadow: 0 8px 24px var(--accent-dim); }
.food-action-bar { padding-top: var(--space-4); }

/* inline sheet nav (Wstecz / title / save) */
.food-nav-inline { display: flex; align-items: center; justify-content: space-between; min-height: 52px; gap: var(--space-2); margin-bottom: var(--space-1); border-bottom: 1px solid var(--border); }
.food-nav-back, .food-nav-save { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--accent); min-height: 44px; min-width: 44px; padding: var(--space-2); background: none; border: 0; cursor: pointer; }
.food-nav-save { font-weight: 600; }
.food-nav-title { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--foreground-strong); }
.food-nav-spacer { min-width: 44px; }

/* meal picker (add step 1) */
.food-meal-picker { display: flex; gap: var(--space-1); margin: var(--space-2) 0; overflow-x: auto; }
.food-meal-pick-btn { flex: 1 0 auto; min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--card); color: var(--muted-foreground); font-family: var(--font-sans); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.food-meal-pick-btn.is-active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }

/* grams + value fields */
.food-field-wrap { display: flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--input); }
.food-field-wrap.focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.food-grams-input { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; outline: none; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; color: var(--foreground-strong); padding: 0 var(--space-4); min-height: 56px; letter-spacing: -0.01em; }
.food-grams-input:focus-visible,
.food-val-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.food-text-input { font-family: var(--font-sans); font-size: 16px; font-weight: 500; }
.food-field-affix { display: inline-flex; align-items: center; padding: 0 18px; min-height: 56px; flex-shrink: 0; white-space: nowrap; color: var(--muted-foreground); font-family: var(--font-sans); font-size: 14px; border-left: 1px solid var(--border); }
.food-val-row { display: flex; align-items: center; gap: 6px; }
.food-val-input { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 500; background: transparent; border: 0; color: var(--foreground-strong); text-align: right; width: 84px; outline: none; min-height: 44px; }

.food-hint { font-family: var(--font-sans); font-size: 12px; color: var(--muted-foreground); padding: var(--space-3) 0 0; line-height: 1.45; }
.food-status:empty { display: none; }
.food-status { padding-top: var(--space-3); }

/* empty states */
.food-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: var(--space-8) var(--space-6) 0; text-align: center; }
.food-empty-inline { padding-top: var(--space-7); }
.food-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--muted); display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground); }
.food-empty-title { font-family: var(--font-sans); font-size: 17px; font-weight: 600; color: var(--foreground-strong); }
.food-empty-sub { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--muted-foreground); max-width: 280px; }
.food-empty-action { margin-top: 6px; }
.food-btn-ghost { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--foreground-strong); background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 11px 18px; min-height: 44px; cursor: pointer; }
.food-btn-ghost svg { color: var(--accent); }
.food-list-empty { padding: var(--space-6) var(--space-2); text-align: center; display: flex; flex-direction: column; gap: var(--space-2); }

/* >=768px: keep the surface readable, cap width like other screens */
@media (min-width: 768px) {
  .food-surface { max-width: 560px; margin: 0 auto; }
}