/* ═══════════════════════════════════════════════════════════════
   STRENLA — Design System
   Single source of truth for all styles.
═══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg:        #0e0f11;
  --surface-1: #13151a;
  --surface-2: #1a1d23;
  --surface-3: #21252d;
  --surface-4: #282d37;

  /* Borders */
  --border:       rgba(255,255,255,.07);
  --border-mid:   rgba(255,255,255,.12);
  --border-focus: var(--brand);

  /* Text */
  --text-1: #f0f2f5;
  --text-2: #9098a8;
  --text-3: #545d6b;

  /* Brand (accent comes from [data-accent], see THEMES below) */
  --brand:      #22d172;
  --brand-dark: #18a558;
  --on-brand:   #0a0d0a;
  --brand-dim:  color-mix(in srgb, var(--brand) 12%, transparent);
  --brand-glow: 0 0 20px color-mix(in srgb, var(--brand) 20%, transparent);

  /* Semantic */
  --danger:    #e05050;
  --danger-dim: rgba(224,80,80,.12);
  --danger-text: #f87171;
  --warning:   #f59e0b;
  --info:      #60a5fa;

  /* Sidebar */
  --sidebar-w: 224px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.55);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.6);

  /* Chart aliases (read by the PHP graph code via getComputedStyle) */
  --dark1: var(--bg);
  --dark2: var(--surface-1);
  --dark3: var(--surface-3);
  --light1: var(--text-1);
  --light2: var(--text-2);
  --primary: var(--brand);
  --primary-dark: var(--brand-dark);
  --secondary: #e05050;
  --graph-grid: #1e2229;
  --graph-line: var(--brand-dark);

  /* Spacing scale */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
}

/* ── THEMES ──────────────────────────────────────────────────────
   <html data-mode="dark|light" data-accent="..."> set by ThemeService.
   Dark mode uses neon accents; light mode uses deeper shades of the
   same hue so text and buttons stay readable on white.             */
html[data-accent="cyan"]   { --brand: #22d3ee; --brand-dark: #0eb5cf; }
html[data-accent="yellow"] { --brand: #facc15; --brand-dark: #d4ad0c; }
html[data-accent="orange"] { --brand: #fb923c; --brand-dark: #ea7a22; }
html[data-accent="pink"]   { --brand: #f472b6; --brand-dark: #e0559c; }
html[data-accent="purple"] { --brand: #a78bfa; --brand-dark: #8b6cf0; }
html[data-accent="blue"]   { --brand: #60a5fa; --brand-dark: #3b8cf0; }
html[data-accent="teal"]   { --brand: #2dd4bf; --brand-dark: #14b8a6; }
html[data-accent="lime"]   { --brand: #a3e635; --brand-dark: #84cc16; }
html[data-accent="red"]    { --brand: #f87171; --brand-dark: #ef4444; }
html[data-accent="indigo"] { --brand: #818cf8; --brand-dark: #6366f1; }
html[data-accent="mono"]   { --brand: #e5e7eb; --brand-dark: #cbd5e1; }
html[data-accent="sky"]     { --brand: #38bdf8; --brand-dark: #0ea5e9; }
html[data-accent="emerald"] { --brand: #34d399; --brand-dark: #10b981; }
html[data-accent="amber"]   { --brand: #fbbf24; --brand-dark: #f59e0b; }
html[data-accent="coral"]   { --brand: #ff8a80; --brand-dark: #f9685c; }
html[data-accent="rose"]    { --brand: #fb7185; --brand-dark: #f43f5e; }
html[data-accent="violet"]  { --brand: #c084fc; --brand-dark: #a855f7; }

html[data-tone="light"] {
  color-scheme: light;
  --bg:        #f3f4f6;
  --surface-1: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eceef2;
  --surface-4: #dde1e7;
  --border:     rgba(15,23,42,.10);
  --border-mid: rgba(15,23,42,.18);
  --text-1: #111827;
  --text-2: #4b5563;
  --text-3: #6b7280;
  --on-brand: #ffffff;
  --brand: #15803d; --brand-dark: #166534;
  --danger: #dc2626;
  --danger-dim: rgba(220,38,38,.10);
  --danger-text: #b91c1c;
  --warning: #b45309;
  --shadow-sm: 0 1px 3px rgba(15,23,42,.08);
  --shadow-md: 0 4px 16px rgba(15,23,42,.10);
  --shadow-lg: 0 8px 32px rgba(15,23,42,.12);
  --shadow-xl: 0 16px 48px rgba(15,23,42,.16);
  --graph-grid: #e5e7eb;
}
html[data-tone="light"][data-accent="cyan"]   { --brand: #0e7490; --brand-dark: #155e75; }
html[data-tone="light"][data-accent="yellow"] { --brand: #a16207; --brand-dark: #854d0e; }
html[data-tone="light"][data-accent="orange"] { --brand: #c2410c; --brand-dark: #9a3412; }
html[data-tone="light"][data-accent="pink"]   { --brand: #be185d; --brand-dark: #9d174d; }
html[data-tone="light"][data-accent="purple"] { --brand: #6d28d9; --brand-dark: #5b21b6; }
html[data-tone="light"][data-accent="blue"]   { --brand: #1d4ed8; --brand-dark: #1e40af; }
html[data-tone="light"][data-accent="teal"]   { --brand: #0f766e; --brand-dark: #115e59; }
html[data-tone="light"][data-accent="lime"]   { --brand: #4d7c0f; --brand-dark: #3f6212; }
html[data-tone="light"][data-accent="red"]    { --brand: #b91c1c; --brand-dark: #991b1b; }
html[data-tone="light"][data-accent="indigo"] { --brand: #4338ca; --brand-dark: #3730a3; }
html[data-tone="light"][data-accent="mono"]   { --brand: #1f2937; --brand-dark: #111827; }
html[data-tone="light"][data-accent="sky"]     { --brand: #0369a1; --brand-dark: #075985; }
html[data-tone="light"][data-accent="emerald"] { --brand: #047857; --brand-dark: #065f46; }
html[data-tone="light"][data-accent="amber"]   { --brand: #b45309; --brand-dark: #92400e; }
html[data-tone="light"][data-accent="coral"]   { --brand: #c2410c; --brand-dark: #9a3412; }
html[data-tone="light"][data-accent="rose"]    { --brand: #be123c; --brand-dark: #9f1239; }
html[data-tone="light"][data-accent="violet"]  { --brand: #7e22ce; --brand-dark: #6b21a8; }

/* Extra background palettes (each keeps its tone's accent shades above) */
html[data-mode="black"] {
  --bg: #000000; --surface-1: #0b0b0c; --surface-2: #141416; --surface-3: #1c1c1f; --surface-4: #26262a;
  --border: rgba(255,255,255,.08); --border-mid: rgba(255,255,255,.14);
}
html[data-mode="midnight"] {
  --bg: #0b1020; --surface-1: #10172a; --surface-2: #18213a; --surface-3: #202b48; --surface-4: #29355a;
  --border: rgba(148,163,209,.12); --border-mid: rgba(148,163,209,.2);
  --text-1: #eef2fb; --text-2: #9aa6c4; --text-3: #63708f;
}
html[data-mode="mocha"] {
  --bg: #14100d; --surface-1: #1b1612; --surface-2: #262019; --surface-3: #302820; --surface-4: #3b3128;
  --border: rgba(255,232,210,.08); --border-mid: rgba(255,232,210,.14);
  --text-1: #f5ede5; --text-2: #ab9b8b; --text-3: #73665a;
}
html[data-mode="sand"] {
  --bg: #f3ece1; --surface-1: #fffaf2; --surface-2: #f8f1e6; --surface-3: #eee4d5; --surface-4: #e2d5c2;
  --border: rgba(70,45,20,.12); --border-mid: rgba(70,45,20,.2);
  --text-1: #2b2118; --text-2: #5e4f40; --text-3: #7d6c5b;
  --graph-grid: #e6dccd;
}
html[data-mode="forest"] {
  --bg: #0b130f; --surface-1: #101b15; --surface-2: #17251d; --surface-3: #1e3026; --surface-4: #273c30;
  --border: rgba(190,235,210,.09); --border-mid: rgba(190,235,210,.16);
  --text-1: #ecf5ef; --text-2: #97ae9f; --text-3: #607868;
  --graph-grid: #1a2a21;
}
html[data-mode="slate"] {
  --bg: #11151b; --surface-1: #171c24; --surface-2: #1f2630; --surface-3: #27303c; --surface-4: #313b49;
  --border: rgba(200,215,235,.09); --border-mid: rgba(200,215,235,.16);
  --text-1: #eef2f7; --text-2: #9ba7b7; --text-3: #667284;
  --graph-grid: #222a35;
}
html[data-mode="plum"] {
  --bg: #130d17; --surface-1: #1a1220; --surface-2: #241a2c; --surface-3: #2e2238; --surface-4: #392b45;
  --border: rgba(235,210,250,.09); --border-mid: rgba(235,210,250,.16);
  --text-1: #f5eef9; --text-2: #ad9cb8; --text-3: #766682;
  --graph-grid: #271d30;
}
html[data-mode="mist"] {
  --bg: #e9eef4; --surface-1: #f8fafc; --surface-2: #f1f5f9; --surface-3: #e2e8f0; --surface-4: #cbd5e1;
  --border: rgba(15,35,65,.11); --border-mid: rgba(15,35,65,.19);
  --text-1: #0f1b2d; --text-2: #46566b; --text-3: #64748b;
  --graph-grid: #dbe3ec;
}
html[data-mode="mint"] {
  --bg: #e6f2ec; --surface-1: #f7fcf9; --surface-2: #eef7f2; --surface-3: #dcede4; --surface-4: #c6e0d2;
  --border: rgba(15,60,35,.11); --border-mid: rgba(15,60,35,.19);
  --text-1: #12261b; --text-2: #445b4e; --text-3: #5f7768;
  --graph-grid: #d5e8dd;
}
html[data-mode="blush"] {
  --bg: #f6e9ec; --surface-1: #fffafb; --surface-2: #faf0f2; --surface-3: #f0dfe3; --surface-4: #e5ccd2;
  --border: rgba(70,20,35,.11); --border-mid: rgba(70,20,35,.19);
  --text-1: #2a141b; --text-2: #614650; --text-3: #7d6069;
  --graph-grid: #ecdbe0;
}
html[data-tone="light"] .modal-backdrop,
html[data-tone="light"] .sidebar-overlay { background: rgba(15,23,42,.45); }

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
}

/* Text size (Account page): every rem scales with --font-scale */
html { --font-scale: .92; scroll-behavior: smooth; font-size: calc(16px * var(--font-scale)); }
html[data-font="xs"] { --font-scale: .78; }
html[data-font="sm"] { --font-scale: .85; }
html[data-font="lg"] { --font-scale: 1; }
html[data-font="xl"] { --font-scale: 1.12; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI',
               system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-1);
  font-size: .9375rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type=number] { appearance: textfield; -moz-appearance: textfield; }
input:focus, select:focus, textarea:focus { outline: none; }
.google-visualization-tooltip {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── App shell ───────────────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 200;
  overflow-y: auto;
  transition: transform .25s ease;
}

.sidebar-brand {
  padding: var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-brand-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.sidebar-brand-logo {
  display: block;
  width: 176px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.sidebar-brand-name {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.sidebar-brand-tag {
  font-size: .7rem;
  color: var(--brand);
  margin-top: 2px;
  font-weight: 500;
}

.sidebar-nav {
  flex: 1;
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.sidebar-section { display: flex; flex-direction: column; gap: 2px; }

.sidebar-section-label {
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 0 var(--sp-3) var(--sp-2);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: .875rem;
  color: var(--text-2);
  transition: background .15s, color .15s;
  text-decoration: none;
}

.sidebar-link .link-icon { font-size: 1rem; width: 1.25rem; text-align: center; flex-shrink: 0; }

.sidebar-link:hover { background: var(--surface-3); color: var(--text-1); }

.sidebar-link.active {
  background: var(--brand-dim);
  color: var(--brand);
  font-weight: 500;
}

.sidebar-footer {
  padding: var(--sp-4) var(--sp-3);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
}

.sidebar-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--brand-dim);
  border: 1px solid var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  color: var(--brand);
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-username { font-size: .8rem; color: var(--text-2); }
a.sidebar-user { transition: background .15s; }
a.sidebar-user:hover, a.sidebar-user.active { background: var(--surface-3); }
.sidebar-user-sub { font-size: .7rem; color: var(--text-3); }

/* ── Topbar (mobile) ─────────────────────────────────────────── */
.topbar {
  display: none;
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  z-index: 150;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  min-height: 64px;
  align-items: center;
  padding: 0 var(--sp-4);
  gap: var(--sp-3);
}

.topbar-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-1);
  font-size: 1.2rem;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  line-height: 1;
}

.topbar-toggle:hover { background: var(--surface-3); }

.topbar-title {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.topbar-brand-logo {
  display: block;
  width: 34px;
  height: 34px;
  max-width: 100%;
  object-fit: contain;
}

.topbar-brand-icon {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.topbar-account {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.topbar-account-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  color: var(--text-2);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}

.topbar-account-link:hover { color: var(--text-1); }

.topbar-account-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: var(--brand-dim);
  border: 1px solid var(--brand-dark);
  font-size: .75rem;
}

.topbar-user-icon {
  position: relative;
  background: transparent;
}

.topbar-user-icon::before,
.topbar-user-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: currentColor;
}

.topbar-user-icon::before {
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.topbar-user-icon::after {
  bottom: 5px;
  width: 14px;
  height: 7px;
  border-radius: 8px 8px 5px 5px;
}

.mobile-bottom-nav { display: none; }

/* ── Page area ───────────────────────────────────────────────── */
.page-area {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  padding-top: 0;
}

/* ── Page header ─────────────────────────────────────────────── */
.page-header {
  padding: var(--sp-10) var(--sp-10) var(--sp-6);
  border-bottom: 1px solid var(--border);
}

.page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}
h1.page-title { margin: 0; }

.page-subtitle {
  font-size: .875rem;
  color: var(--text-2);
  margin-top: var(--sp-1);
}

.page-breadcrumb {
  font-size: .8rem;
  color: var(--text-3);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.page-breadcrumb a { color: var(--brand); }
.page-breadcrumb a:hover { text-decoration: underline; }
.page-breadcrumb-sep { color: var(--text-3); }

/* ── Page body ───────────────────────────────────────────────── */
.page-body {
  flex: 1;
  padding: var(--sp-8) var(--sp-10);
  max-width: 1400px;
}

.page-body.full { max-width: none; }

/* ── Grid utilities ──────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-5); }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

.card-sm  { padding: var(--sp-4); }
.card-lg  { padding: var(--sp-8); }
.card-xl  { padding: var(--sp-10); }

.card-hover {
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.card-hover:hover {
  border-color: var(--border-mid);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-brand { border-color: color-mix(in srgb, var(--brand) 20%, transparent); }

/* ── Stat cards ──────────────────────────────────────────────── */
.stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.stat-label { font-size: .75rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.stat-value { font-size: 1.75rem; font-weight: 600; color: var(--text-1); line-height: 1.1; }
.stat-change { font-size: .8rem; color: var(--text-2); }
.stat-brand  { color: var(--brand); }

/* ── Dividers ────────────────────────────────────────────────── */
.divider   { height: 1px; background: var(--border); margin: var(--sp-6) 0; }
.divider-brand { background: linear-gradient(90deg, var(--brand), transparent); height: 1px; margin: var(--sp-4) 0; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: none;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 500;
  padding: .5rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, opacity .15s, transform .1s;
  text-decoration: none;
  line-height: 1.4;
}

.btn:active { transform: scale(.98); }

.btn-primary {
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
}
.btn-primary:hover { background: var(--brand-dark); }

.btn-secondary {
  background: var(--surface-3);
  color: var(--text-1);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--surface-4); border-color: var(--border-mid); }

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text-1); }

.btn-danger {
  background: var(--danger-dim);
  color: var(--danger);
  border: 1px solid rgba(224,80,80,.25);
}
.btn-danger:hover { background: var(--danger); color: #fff; }

.btn-sm { font-size: .8rem; padding: .35rem .75rem; }
.btn-lg { font-size: 1rem; padding: .7rem 1.5rem; }
.btn-xl { font-size: 1.05rem; padding: .85rem 2rem; font-weight: 600; }
.btn-block { width: 100%; }

/* ── Inputs ──────────────────────────────────────────────────── */
.input-group { display: flex; flex-direction: column; gap: var(--sp-2); }

.input-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.tooltip-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-left: 0;
  padding: 0;
  border: 1px solid var(--text-3);
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
  text-transform: none;
  letter-spacing: 0;
}

.tooltip-trigger:hover,
.tooltip-trigger:focus-visible {
  border-color: var(--brand);
  color: var(--brand);
  outline: none;
}

.tooltip-content {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 8px);
  width: 220px;
  padding: 9px 11px;
  border: 1px solid var(--border-mid);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-1);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.tooltip-content::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 8px;
  height: 8px;
  background: var(--surface-3);
  border-right: 1px solid var(--border-mid);
  border-bottom: 1px solid var(--border-mid);
  transform: translate(-50%, -4px) rotate(45deg);
}

.tooltip-trigger:hover .tooltip-content,
.tooltip-trigger:focus-visible .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.planner-form-title .tooltip-trigger {
  flex-shrink: 0;
}

.input-hint { font-size: .78rem; color: var(--text-3); }

.input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .55rem .75rem;
  color: var(--text-1);
  font-size: .9375rem;
  width: 100%;
  transition: border-color .15s;
}

.input:focus { border-color: var(--brand); }
.input::placeholder { color: var(--text-3); }
.input-sm { padding: .35rem .6rem; font-size: .85rem; }

/* Number inputs in calc tools */
.num-input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .4rem .6rem;
  color: var(--text-1);
  font-size: 1.1rem;
  width: 6rem;
  text-align: center;
  transition: border-color .15s;
}
.num-input:focus { border-color: var(--brand); }
.num-input::placeholder { color: var(--text-3); }

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: .15rem .55rem;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.badge-brand   { background: var(--brand-dim); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent); }
.badge-neutral { background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); }
.badge-danger  { background: var(--danger-dim); color: var(--danger); border: 1px solid rgba(224,80,80,.2); }
.badge-warning { background: rgba(245,158,11,.12); color: var(--warning); border: 1px solid rgba(245,158,11,.2); }

/* ── Progress bar ────────────────────────────────────────────── */
.progress-bar {
  height: 4px;
  background: var(--surface-3);
  border-radius: 99px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 99px;
  transition: width .6s ease;
}
.progress-bar-lg { height: 7px; }

/* ── Flash messages ──────────────────────────────────────────── */
.flash {
  padding: .75rem 1rem;
  border-radius: var(--r-sm);
  font-size: .875rem;
  line-height: 1.5;
  margin-bottom: var(--sp-4);
}
.flash-error {
  background: var(--danger-dim);
  border: 1px solid rgba(224,80,80,.25);
  color: var(--danger-text);
}
.flash-ok {
  background: var(--brand-dim);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  color: var(--brand);
}

/* ── Tables ──────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.data-table th {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  font-size: .72rem; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
}
.data-table td:first-child, .data-table th:first-child { padding-left: 0; }
.data-table tr:last-child td { border-bottom: none; }
.data-table .td-accent { color: var(--brand); font-weight: 500; }
.data-table .td-primary { color: var(--text-1); font-weight: 500; }

/* ── Graph container ─────────────────────────────────────────── */
.graph-container {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

.graph-title {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--sp-4);
}

/* ── Section headings ────────────────────────────────────────── */
.section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: var(--sp-4);
}

.section-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ── Modal ───────────────────────────────────────────────────── */
.modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 500;
  align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.modal-backdrop.open { display: flex; }

.modal {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  max-width: 28rem;
  width: 100%;
  box-shadow: var(--shadow-xl);
}
.modal-title { font-size: 1.1rem; font-weight: 600; color: var(--text-1); margin-bottom: var(--sp-3); }
.modal-body  { font-size: .875rem; color: var(--text-2); line-height: 1.6; margin-bottom: var(--sp-6); }
.modal-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; }

/* ── AUTH PAGES ──────────────────────────────────────────────── */
.auth-page {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.auth-topbar {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) clamp(var(--sp-4), 4vw, var(--sp-10));
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}

.auth-topbar-brand,
.auth-topbar-brand img { display: block; }

.auth-topbar-brand img {
  width: 142px;
  max-width: 42vw;
  height: auto;
}

.auth-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-3);
  font-size: .78rem;
  text-align: right;
}

.auth-brand-panel {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 9%, var(--bg)), var(--bg));
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-12) var(--sp-12);
  position: relative;
  overflow: hidden;
}

.auth-brand-panel::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 8%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.auth-brand-logo {
  font-size: .85rem;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.auth-brand-headline {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.25;
}

.auth-brand-headline span { color: var(--brand); }

.auth-brand-desc {
  font-size: .9rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-top: var(--sp-4);
  max-width: 28rem;
}

.auth-feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

.auth-feature {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: .875rem;
  color: var(--text-2);
}

.auth-feature-icon { color: var(--brand); font-size: 1rem; }

.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) var(--sp-10);
  background: var(--bg);
}

.auth-form-box {
  width: 100%;
  max-width: 24rem;
}

.auth-form-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: var(--sp-2);
}

.auth-form-sub {
  font-size: .875rem;
  color: var(--text-2);
  margin-bottom: var(--sp-8);
}

.auth-form-fields { display: flex; flex-direction: column; gap: var(--sp-4); }

.auth-link {
  font-size: .85rem;
  color: var(--text-2);
  margin-top: var(--sp-5);
  text-align: center;
}

.auth-link a { color: var(--brand); font-weight: 500; }
.auth-link a:hover { text-decoration: underline; }

/* ── LANDING PAGE ────────────────────────────────────────────── */
.landing-hero {
  padding: var(--sp-20) var(--sp-10) var(--sp-16);
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .3rem .85rem;
  background: var(--brand-dim);
  border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: var(--sp-6);
}

.hero-headline {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: var(--sp-5);
}

.hero-headline span { color: var(--brand); }

.hero-sub {
  font-size: 1.05rem;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto var(--sp-8);
}

.hero-cta-row {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-5);
  padding: 0 var(--sp-10) var(--sp-16);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.feature-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: border-color .2s;
}

.feature-card:hover { border-color: var(--border-mid); }

.feature-icon {
  font-size: 1.5rem;
  margin-bottom: var(--sp-3);
}

.feature-title { font-size: .95rem; font-weight: 600; color: var(--text-1); margin-bottom: var(--sp-2); }
.feature-desc  { font-size: .85rem; color: var(--text-2); line-height: 1.65; }

.landing-cta-strip {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 9%, var(--surface-1)), color-mix(in srgb, var(--brand) 4%, var(--surface-1)));
  border-top: 1px solid color-mix(in srgb, var(--brand) 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 15%, transparent);
  padding: var(--sp-12) var(--sp-10);
  text-align: center;
  margin-bottom: var(--sp-16);
  width: 100%;
}

.landing-cta-strip h2 { font-size: 1.6rem; font-weight: 600; color: var(--text-1); margin-bottom: var(--sp-3); }
.landing-cta-strip p  { color: var(--text-2); margin-bottom: var(--sp-6); }

.landing-steps { padding: 0 var(--sp-10) var(--sp-16); max-width: 800px; margin: 0 auto; }
.landing-steps-title { font-size: 1.3rem; margin-bottom: var(--sp-8); text-align: center; }
.landing-steps-list { display: flex; flex-direction: column; gap: var(--sp-5); }
.landing-step { display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-5); align-items: start; }
.landing-step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand-dim);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: var(--brand);
  flex-shrink: 0;
}
.landing-step-title { font-weight: 600; color: var(--text-1); margin-bottom: var(--sp-1); }
.landing-step-desc  { font-size: .875rem; color: var(--text-2); line-height: 1.6; }

/* ── PLANNER PAGE ────────────────────────────────────────────── */
.planner-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--sp-6);
  align-items: start;
}

.planner-form-panel {
  position: sticky;
  top: var(--sp-6);
}

.planner-form-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}

.planner-form-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.form-sep {
  height: 1px;
  background: var(--border);
  margin: var(--sp-4) 0;
}

/* Results panel */
.planner-results { display: flex; flex-direction: column; gap: var(--sp-5); }

.plan-summary-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.plan-summary-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 9%, var(--surface-1)), color-mix(in srgb, var(--brand) 4%, var(--surface-1)));
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 15%, transparent);
  padding: var(--sp-6);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.plan-summary-title { font-size: 1rem; font-weight: 600; color: var(--text-1); }
.plan-summary-tip   { font-size: .8rem; color: var(--text-2); line-height: 1.5; max-width: 360px; margin-top: var(--sp-2); }

.plan-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
}

.plan-metric {
  padding: var(--sp-4) var(--sp-5);
  border-right: 1px solid var(--border);
  text-align: center;
}

.plan-metric:last-child { border-right: none; }

.plan-metric-label { font-size: .68rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-1); }
.plan-metric-value { font-size: 1.3rem; font-weight: 600; color: var(--brand); }
.plan-metric-sub   { font-size: .72rem; color: var(--text-3); margin-top: 2px; }

/* Session cards */
.sessions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
}

.session-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  transition: border-color .2s, transform .2s;
}

.session-card:hover { border-color: var(--border-mid); transform: translateY(-2px); }

.session-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.session-num {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.session-orm-badge {
  font-size: .72rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-dim);
  padding: .15rem .5rem;
  border-radius: 99px;
}

.session-sets { display: flex; flex-direction: column; gap: var(--sp-2); }

.session-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
}

.set-label  { color: var(--text-3); font-size: .7rem; font-weight: 600; letter-spacing: .04em; }
.set-value  { color: var(--text-1); font-weight: 500; }
.set-orm    { color: var(--text-3); font-size: .75rem; font-family: monospace; }

.session-footer {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .75rem;
}

.session-improvement { color: var(--brand); font-weight: 600; }

/* Save plan bar */
.save-plan-bar {
  background: var(--surface-1);
  border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.save-plan-bar .save-label {
  font-size: .85rem;
  color: var(--text-2);
  flex-shrink: 0;
}

.save-plan-bar .input {
  flex: 1;
  min-width: 180px;
}

.save-plan-bar .hint {
  font-size: .78rem;
  color: var(--text-3);
  width: 100%;
}

/* Empty results state */
.results-empty {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-12) var(--sp-8);
  text-align: center;
}

.results-empty-icon { font-size: 2.5rem; margin-bottom: var(--sp-4); opacity: .4; }
.results-empty-title { font-size: 1rem; font-weight: 600; color: var(--text-1); margin-bottom: var(--sp-2); }
.results-empty-desc  { font-size: .875rem; color: var(--text-2); line-height: 1.6; max-width: 320px; margin: 0 auto; }

/* ── DASHBOARD (MY PLANS) ────────────────────────────────────── */
.dash-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

.plan-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: border-color .2s, box-shadow .2s;
}

.plan-card:hover { border-color: var(--border-mid); box-shadow: var(--shadow-sm); }

.plan-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.plan-name { font-size: 1rem; font-weight: 600; color: var(--text-1); }
.plan-exercise { font-size: .8rem; color: var(--text-3); margin-top: 2px; }

.plan-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }

.plan-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-6);
}

.plan-stat-item { display: flex; flex-direction: column; gap: 2px; }
.plan-stat-lbl { font-size: .7rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.plan-stat-val { font-size: .875rem; color: var(--text-1); font-weight: 500; }
.plan-stat-val.accent { color: var(--brand); }

.plan-progress-section { display: flex; flex-direction: column; gap: var(--sp-2); }
.plan-progress-row { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; }
.plan-progress-pct { color: var(--brand); font-weight: 600; }
.plan-progress-lbl { color: var(--text-3); }

/* ── PLAN DETAIL PAGE ────────────────────────────────────────── */
.plan-detail-header {
  padding: var(--sp-8) var(--sp-10) var(--sp-6);
  border-bottom: 1px solid var(--border);
}

.plan-detail-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-10);
  border-bottom: 1px solid var(--border);
}

.plan-detail-body {
  padding: var(--sp-6) var(--sp-10) var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* Session timeline */
.timeline-section { display: flex; flex-direction: column; gap: var(--sp-3); }

.timeline-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.timeline-label .tl-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
}
.tl-done     { background: var(--brand); }
.tl-current  { background: var(--warning); }
.tl-upcoming { background: var(--surface-4); }

.timeline-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); }

/* Workout session cards (completed, current, future) */
.wk-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}

.wk-card.wk-done    { border-color: color-mix(in srgb, var(--brand) 15%, transparent); opacity: .8; }
.wk-card.wk-current { border-color: rgba(245,158,11,.3); background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 9%, var(--surface-1)), var(--surface-1)); }
.wk-card.wk-future  { opacity: .5; }

.wk-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.wk-num { font-size: .72rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.wk-date { font-size: .72rem; color: var(--text-3); }

.wk-sets { display: flex; flex-direction: column; gap: var(--sp-2); }

.wk-set-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: var(--sp-2);
  align-items: center;
  font-size: .82rem;
}

.wk-set-label { color: var(--text-3); font-size: .7rem; font-weight: 600; letter-spacing: .04em; }
.wk-set-val   { color: var(--text-1); font-weight: 500; }
.wk-set-orm   { color: var(--text-3); font-size: .75rem; }
.wk-set-star  { color: var(--brand); margin-right: 2px; }

/* Workout form inputs */
.wk-input-row {
  display: grid;
  grid-template-columns: 3rem 1fr 1fr auto;
  gap: var(--sp-2);
  align-items: center;
  font-size: .82rem;
}

.wk-form-input {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .3rem .5rem;
  color: var(--text-1);
  font-size: .9rem;
  width: 100%;
  text-align: center;
  transition: border-color .15s;
}
.wk-form-input:focus { border-color: var(--brand); }

.wk-orm-cell { font-size: .75rem; color: var(--text-3); font-family: monospace; text-align: right; }

/* ── CALCULATORS ─────────────────────────────────────────────── */
.calc-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--sp-6);
  align-items: start;
}

.calc-sidebar { position: sticky; top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }

.calc-form-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}

.calc-form-title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: var(--sp-5);
}

.calc-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.calc-row-label { font-size: .8rem; font-weight: 600; color: var(--text-2); flex: 1; min-width: 8rem; }

.calc-connector { font-size: .75rem; color: var(--text-3); }

.calc-results { display: flex; flex-direction: column; gap: var(--sp-5); }

/* ORM hero result */
.orm-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 9%, var(--surface-1)), color-mix(in srgb, var(--brand) 4%, var(--surface-1)));
  border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  text-align: center;
}
.orm-hero-label { font-size: .75rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--sp-3); }
.orm-hero-value { font-size: 3rem; font-weight: 700; color: var(--brand); line-height: 1; }
.orm-hero-sub   { font-size: .85rem; color: var(--text-2); margin-top: var(--sp-3); }

.orm-formulas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
}

.orm-formula-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  text-align: center;
}

.orm-formula-name  { font-size: .72rem; font-weight: 600; color: var(--text-3); margin-bottom: var(--sp-2); text-transform: uppercase; letter-spacing: .04em; }
.orm-formula-value { font-size: 1.4rem; font-weight: 600; color: var(--text-1); }

/* Micro overload result */
.micro-result-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}

.micro-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-4);
  align-items: center;
  text-align: center;
}

.micro-set-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}

.micro-set-box.next { border-color: color-mix(in srgb, var(--brand) 30%, transparent); background: var(--brand-dim); }

.micro-set-label { font-size: .7rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: var(--sp-2); }
.micro-set-value { font-size: 1.3rem; font-weight: 600; color: var(--text-1); }
.micro-set-value.brand { color: var(--brand); }
.micro-set-orm   { font-size: .78rem; color: var(--text-2); margin-top: var(--sp-1); }
.micro-arrow     { font-size: 1.4rem; color: var(--brand); font-weight: 700; }

.micro-improvement {
  text-align: center;
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--border);
  margin-top: var(--sp-4);
  font-size: .85rem;
  color: var(--text-2);
}

.micro-improvement strong { color: var(--brand); }

/* Sets history in micro */
.micro-history { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.micro-history-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  font-size: .82rem;
  color: var(--text-2);
}
.micro-history-num { color: var(--text-3); font-size: .7rem; font-weight: 600; min-width: 2rem; }
.micro-history-val { color: var(--text-1); font-weight: 500; }
.micro-history-orm { margin-left: auto; color: var(--text-3); font-family: monospace; }

/* Guide panels (right column) */
.guide-panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}

.guide-panel-title { font-size: .85rem; font-weight: 600; color: var(--text-1); margin-bottom: var(--sp-4); }

.guide-field-item {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.guide-field-item:last-child { border-bottom: none; }
.guide-field-name { font-size: .82rem; font-weight: 600; color: var(--text-1); margin-bottom: var(--sp-1); }
.guide-field-desc { font-size: .78rem; color: var(--text-2); line-height: 1.6; }
.guide-field-ex   { font-size: .75rem; color: var(--brand); margin-top: var(--sp-1); font-family: monospace; }

.guide-example-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-dark);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  font-size: .82rem;
  line-height: 1.75;
  color: var(--text-2);
  margin-top: var(--sp-3);
}
.guide-example-block code { color: var(--brand); font-family: monospace; }
.guide-example-block strong { color: var(--text-1); }

.guide-tip {
  background: var(--brand-dim);
  border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: .8rem;
  color: var(--text-2);
  line-height: 1.6;
  margin-top: var(--sp-3);
}
.guide-tip strong { color: var(--brand); }

/* Goal achieved banner */
.goal-banner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 9%, var(--surface-1)), color-mix(in srgb, var(--brand) 4%, var(--surface-1)));
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  text-align: center;
}
.goal-banner h2 { font-size: 1.3rem; font-weight: 600; color: var(--brand); margin-bottom: var(--sp-2); }
.goal-banner p  { color: var(--text-2); font-size: .9rem; }

/* ── DIET ────────────────────────────────────────────────────── */
.diet-tabs { display: flex; gap: var(--sp-1); margin-top: var(--sp-4); overflow-x: auto; scrollbar-width: none; }
.diet-tabs::-webkit-scrollbar { display: none; }
.diet-tab {
  padding: .4rem .85rem;
  border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
}
.diet-tab:hover { color: var(--text-1); background: var(--surface-2); }
.diet-tab.active { color: var(--brand); background: var(--brand-dim); border-color: color-mix(in srgb, var(--brand) 25%, transparent); }

.diet-macros { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: .8rem; color: var(--text-2); }
.diet-macros strong { color: var(--text-1); font-weight: 600; }
.diet-macros .kcal { color: var(--brand); }
.diet-estimate { font-size: .72rem; color: var(--text-3); }
/* Skip next to Done; a skipped meal is dimmed; meals added that weren't planned */
.diet-meal-actions { gap: var(--sp-2); flex-wrap: nowrap; }
.diet-meal.is-skipped .diet-meal-title, .diet-meal.is-skipped .diet-macros { opacity: .55; }
.diet-meal.is-skipped .diet-macros { text-decoration: line-through; }
.diet-meal.is-extra { border-style: dashed; }
.diet-add-extra { margin-top: var(--sp-3); }
/* − n sets + (how many sets this session) */
.focus-setcount, .set-count { display: inline-flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; color: var(--text-2); font-size: .85rem; font-weight: 650; }
.focus-setcount { align-self: center; }
.focus-setcount button, .set-count button { width: 34px; height: 30px; border-radius: 9px; border: 1px solid var(--border-mid); background: var(--surface-2); color: var(--text-1); font-size: 1.05rem; font-weight: 700; line-height: 1; }
.focus-setcount button:disabled, .set-count button:disabled { opacity: .35; }
.focus-setcount span, .set-count span { min-width: 4.2em; text-align: center; font-variant-numeric: tabular-nums; }
.workout-set-label small { display: block; color: var(--text-3); font-size: .7rem; font-weight: 600; }
.workout-exercise-tools { justify-content: flex-end; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.workout-exercise.is-skipped .workout-exercise-title { opacity: .55; text-decoration: line-through; }
.diet-add-extra > summary { list-style: none; display: inline-flex; cursor: pointer; }
.diet-add-extra > summary::-webkit-details-marker { display: none; }
.diet-add-extra[open] > summary { display: none; }
.diet-extra-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.diet-macros.diet-eaten { color: var(--text-1); font-weight: 600; margin-bottom: 2px; }

.diet-list { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 900px; }
[hidden] { display: none !important; }
.list-search { position: relative; max-width: 900px; margin-bottom: var(--sp-3); }
.list-search-input { width: 100%; padding-right: 5.5rem; }
.list-search-count { position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--text-3); pointer-events: none; }
.list-search-empty { margin-bottom: var(--sp-3); }
.diet-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.diet-row-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.diet-row-title { color: var(--text-1); font-weight: 600; overflow-wrap: anywhere; }
.diet-row-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.diet-row-actions form { margin: 0; }

.diet-form-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--sp-3); align-items: end; }
.diet-line { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem auto auto; gap: var(--sp-2); align-items: center; }
.diet-lines { display: flex; flex-direction: column; gap: var(--sp-2); }
.diet-line-macros { grid-column: 1 / -1; font-size: .72rem; color: var(--text-3); margin-top: -2px; }
textarea.input { resize: vertical; min-height: 7rem; line-height: 1.5; }
/* Long text (a meal's instructions): at least 10 lines; grows with what's written (data-autogrow) */
textarea.input.textarea-long { min-height: calc(10 * 1.5em + .9rem); }

/* Plan builder */
.diet-day { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); }
.diet-day + .diet-day { margin-top: var(--sp-3); }
.diet-day-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.diet-day-num { font-size: .7rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.diet-day-head .input { flex: 1; }
.diet-day-body { padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.diet-slot { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; }
.diet-slot-macros { grid-column: 2 / -1; font-size: .72rem; color: var(--text-3); margin-top: -2px; }
.diet-day-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
.icon-btns { display: flex; gap: 2px; }
.icon-btn {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2);
  color: var(--text-2); font-size: .8rem; line-height: 1;
}
.icon-btn:hover { color: var(--text-1); border-color: var(--border-mid); }
.icon-btn.danger:hover { color: var(--danger); border-color: rgba(224,80,80,.4); }
.diet-sticky-bar {
  position: sticky; bottom: 0; z-index: 5; margin-top: var(--sp-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); background: var(--surface-2);
  border: 1px solid var(--border-mid); border-radius: var(--r-md); box-shadow: var(--shadow-md);
}

/* Daily tracker (mirrors the workout page) */
.diet-day-strip { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 2px; margin-top: var(--sp-4); scrollbar-width: thin; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.diet-day-chip { scroll-snap-align: center; }
.diet-day-chip {
  display: flex; flex-direction: column; gap: 2px; min-width: 6.5rem; flex-shrink: 0;
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-1); font-size: .72rem; color: var(--text-3);
}
.diet-day-chip strong { color: var(--text-1); font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9rem; }
.diet-day-chip.is-done { border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.diet-day-chip.is-done span { color: var(--brand); }
.diet-day-chip.is-current { border-color: rgba(245,158,11,.4); }
.diet-day-chip.is-current span { color: var(--warning); }
.diet-day-chip.is-viewing { background: var(--surface-3); border-color: var(--border-focus); }

.diet-meals { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.diet-meal { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); }
.diet-meal::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--warning); }
.diet-meal.is-complete::before { background: var(--brand); }
.diet-meal.is-complete { border-color: color-mix(in srgb, var(--brand) 24%, transparent); }
.diet-meal.is-upcoming::before { background: var(--surface-4); }
.diet-meal-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-4) var(--sp-4) var(--sp-3) var(--sp-5); }
.diet-meal-title-row { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.diet-meal-index {
  display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; flex: 0 0 1.9rem;
  border-radius: 999px; background: rgba(245,158,11,.13); border: 1px solid rgba(245,158,11,.24);
  color: var(--warning); font-size: .75rem; font-weight: 800;
}
.diet-meal.is-complete .diet-meal-index { background: var(--brand-dim); border-color: color-mix(in srgb, var(--brand) 24%, transparent); color: var(--brand); }
.diet-meal-slot { font-size: .68rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .07em; }
.diet-meal-title { color: var(--text-1); font-size: .92rem; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.diet-meal .diet-macros { padding: 0 var(--sp-4) var(--sp-3) var(--sp-5); }
.diet-meal details { border-top: 1px solid var(--border); }
.diet-meal summary { cursor: pointer; padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-5); font-size: .78rem; color: var(--text-2); list-style: none; }
.diet-meal summary::-webkit-details-marker { display: none; }
.diet-meal summary::before { content: '▸ '; }
.diet-meal details[open] summary::before { content: '▾ '; }
.diet-meal-detail { padding: 0 var(--sp-4) var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.diet-recipe { white-space: pre-wrap; font-size: .82rem; color: var(--text-2); line-height: 1.6; background: var(--surface-2); border-radius: var(--r-sm); padding: var(--sp-3); }

@media (max-width: 760px) {
  .diet-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .diet-form-grid > :first-child { grid-column: 1 / -1; }
  .diet-row { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .diet-row-actions { justify-content: flex-start; }
  .diet-slot { grid-template-columns: minmax(0, 1fr) auto; }
  .diet-slot .diet-slot-meal { grid-column: 1 / -1; grid-row: 2; }
  .diet-slot-macros { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .diet-tabs { margin-top: var(--sp-3); }
  .diet-tab { font-size: .75rem; padding: .3rem .7rem; }
  .diet-row { padding: var(--sp-3); }
  .diet-day-head, .diet-day-body, .diet-day-foot { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .diet-meal-header { padding: var(--sp-3) var(--sp-3) var(--sp-2) var(--sp-4); }
  .diet-meal .diet-macros { padding: 0 var(--sp-3) var(--sp-2) var(--sp-4); font-size: .75rem; }
  .diet-meal summary { padding-left: var(--sp-4); }
  .diet-meal-detail { padding: 0 var(--sp-3) var(--sp-3) var(--sp-4); }
  .diet-meal-index { width: 1.6rem; height: 1.6rem; flex-basis: 1.6rem; font-size: .7rem; }
  .diet-meal-title { font-size: .84rem; }
  .diet-swap-label { display: none; } /* Swap: just its icon, so the meal's name has room */
  .diet-sticky-bar { padding: var(--sp-2) var(--sp-3); }
}

/* Keep the builder save bar above the mobile/tablet bottom nav */
@media (max-width: 1024px) {
  .diet-sticky-bar { bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* ── TARGET MUSCLES ──────────────────────────────────────────── */
.save-plan-bar .muscle-picker { width: 100%; }
.muscle-tags { font-size: .78rem; color: var(--brand); }
.muscle-selected { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.muscle-selected-list { display: contents; }
.workout-target {
  font-size: .75rem; padding: .15rem .5rem; border-radius: 99px; white-space: nowrap;
  background: var(--surface-3); border: 1px solid var(--border); color: var(--text-2);
}
.workout-target.is-done { background: var(--brand-dim); border-color: color-mix(in srgb, var(--brand) 25%, transparent); color: var(--brand); }
.muscle-dialog {
  position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 24px)); max-height: min(80vh, 680px); margin: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--border-mid); border-radius: var(--r-lg); background: var(--surface-1); color: var(--text-1);
  box-shadow: var(--shadow-xl);
}
.muscle-dialog::backdrop { background: rgba(0,0,0,.72); }
.muscle-dialog-inner { display: flex; flex-direction: column; max-height: min(80vh, 680px); }
.muscle-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--border); }
.muscle-dialog-list { list-style: none; overflow: auto; display: grid; gap: var(--sp-1); margin: var(--sp-3) var(--sp-4); padding: 0; overscroll-behavior: contain; }
.muscle-dialog-list li[hidden] { display: none; }
.muscle-option { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); cursor: pointer; }
.muscle-option:hover { border-color: var(--border-mid); }
.muscle-option:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 35%, transparent); background: var(--brand-dim); }
.muscle-option input { accent-color: var(--brand); width: 17px; height: 17px; flex-shrink: 0; }
.muscle-option-name { flex: 1; min-width: 0; font-size: .88rem; }
.muscle-dialog-empty { color: var(--text-3); font-size: .85rem; padding: var(--sp-2) 0; }
.muscle-dialog-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
*, *::before, *::after { min-width: 0; }
img, svg, canvas, iframe { max-width: 100%; }

.planner-layout > *, .calc-layout > *, .grid-2 > *, .grid-3 > *, .grid-4 > *,
.plan-detail-kpis > *, .plan-metrics-row > *, .sessions-grid > *, .timeline-cards > * { min-width: 0; }

.planner-options-row { grid-template-columns: 1fr; }

.graph-container, .micro-result-card, .calc-form-card, .guide-panel,
.planner-form-card, .plan-summary-card, .card, .plan-card { min-width: 0; }

@media (max-width: 1100px) {
  .planner-layout { grid-template-columns: 300px minmax(0, 1fr); }
  .calc-layout { grid-template-columns: 290px minmax(0, 1fr); }
  .plan-detail-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-header, .page-body { padding-left: var(--sp-6); padding-right: var(--sp-6); }
}

@media (max-width: 1024px) {
  :root { --sidebar-w: 0px; }
  .sidebar { transform: translateX(-224px); width: 224px; --sidebar-w: 224px; }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-xl); }
  .topbar { display: flex; }
  .topbar-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .topbar { left: 0; }
  .page-area { margin-left: 0; padding-top: 64px; }

  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 180;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-2) calc(var(--sp-1) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface-1) 97%, transparent);
    border-top: 1px solid var(--border-mid);
    box-shadow: 0 -8px 24px rgba(0,0,0,.28);
  }

  .mobile-nav-link {
    min-width: 0;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--sp-1);
    border-radius: var(--r-sm);
    color: var(--text-3);
    font-size: clamp(9px, .64rem, 10px); /* fixed-width bar: don't grow with the text size */
    font-weight: 600;
    white-space: nowrap;
  }
  .mobile-bottom-nav-auth { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mobile-nav-link > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .mobile-nav-link:hover, .mobile-nav-link.active { color: var(--brand); background: var(--brand-dim); }
  .mobile-nav-icon { font-size: min(1.05rem, 17px); line-height: 1; }
  .mobile-nav-brand-icon {
    width: 17px;
    height: 17px;
    object-fit: contain;
  }
  .app-shell { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .sidebar-overlay { display: none; }
  .sidebar-overlay.open { display: block; }
}

@media (max-width: 900px) {
  .auth-page { grid-template-columns: 1fr; min-height: calc(100vh - 64px); }
  .auth-brand-panel { display: none; }
  .planner-layout, .calc-layout { grid-template-columns: minmax(0, 1fr); }
  .planner-form-panel, .calc-sidebar { position: static; }
  .dash-stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan-detail-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sessions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline-cards { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* Compact mobile density: smaller type scale, tighter spacing, slimmer controls */
  html { font-size: calc(15px * var(--font-scale)); }
  body { line-height: 1.5; }

  .topbar { min-height: 52px; padding: var(--sp-1) var(--sp-3); gap: var(--sp-2); }
  .page-area { padding-top: 52px; }
  .topbar-brand-logo { width: 28px; height: 28px; }
  .topbar-account { gap: var(--sp-2); }
  .topbar-account-name { display: none; }
  .topbar-account-link { min-height: 40px; }
  .topbar-account-avatar { width: 28px; height: 28px; }
  .topbar-toggle { min-width: 40px; min-height: 40px; font-size: 1.1rem; }

  .tooltip-content {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(64px + env(safe-area-inset-bottom));
    top: auto;
    width: auto;
    transform: translateY(4px);
  }

  .tooltip-trigger:hover .tooltip-content,
  .tooltip-trigger:focus-visible .tooltip-content {
    transform: translateY(0);
  }

  .tooltip-content::after {
    left: 50%;
    right: auto;
    top: 100%;
    transform: translate(-50%, -4px) rotate(45deg);
  }
  .tooltip-trigger { width: 16px; height: 16px; font-size: .65rem; }

  /* Page chrome */
  .page-header { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  .page-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .page-title { font-size: 1.15rem; overflow-wrap: anywhere; }
  .page-subtitle { font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; margin-top: 2px; }
  .page-breadcrumb { font-size: .75rem; margin-bottom: var(--sp-1); }
  .page-header-row { align-items: center; gap: var(--sp-3); }
  .page-header-row > div:first-child { flex: 1 1 12rem; }
  .plan-detail-header { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  .plan-detail-header .page-header-row { margin-top: var(--sp-2) !important; }
  .plan-detail-kpis { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-detail-body { padding: var(--sp-3) var(--sp-4) var(--sp-6); gap: var(--sp-4); }
  .section-title { font-size: .95rem; margin-bottom: var(--sp-3); }
  .section-label, .timeline-label { font-size: .7rem; }

  /* Cards & stats */
  .card, .card-lg, .card-xl, .calc-form-card, .guide-panel, .micro-result-card,
  .graph-container, .planner-form-card, .plan-card, .wk-card, .session-card { padding: var(--sp-3); }
  .card, .card-lg, .card-xl, .calc-form-card, .guide-panel, .micro-result-card,
  .graph-container, .planner-form-card, .plan-card, .plan-summary-card, .results-empty { border-radius: var(--r-md); }
  .stat-card { padding: var(--sp-3); gap: 2px; border-radius: var(--r-md); }
  .stat-label { font-size: .7rem; letter-spacing: .05em; }
  .stat-value { font-size: 1.3rem; }
  .stat-change { font-size: .7rem; }
  .dash-stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-5); }
  .grid-2, .grid-3, .grid-4, .sessions-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .grid-auto { gap: var(--sp-3); }
  .divider { margin: var(--sp-4) 0; }

  /* Forms & buttons */
  .input-group { gap: var(--sp-1); }
  .input-label { font-size: .72rem; }
  .input-hint { font-size: .72rem; }
  /* The app's normal text size; iPhones are told not to zoom in on a field (components/pwa-head.php) */
  .input, .wk-form-input, .num-input, select, textarea { font-size: .9375rem; }
  .input { min-height: 38px; padding: .35rem .65rem; }
  .input::placeholder, .wk-form-input::placeholder, .num-input::placeholder, textarea::placeholder { font-size: .9375rem; }
  .input-sm { min-height: 36px; padding: .3rem .5rem; }
  .btn { min-height: 38px; padding: .4rem .85rem; font-size: .85rem; }
  .btn-sm { min-height: 32px; padding: .3rem .65rem; font-size: .78rem; }
  .btn-lg, .btn-xl { min-height: 42px; padding: .5rem 1.1rem; font-size: .92rem; }
  .auth-form-fields { gap: var(--sp-3); }
  .planner-form-title, .calc-form-title { margin-bottom: var(--sp-3); font-size: .92rem; }
  .form-sep { margin: var(--sp-3) 0; }
  .input-row { gap: var(--sp-2); }
  [style*="repeat(auto-fill,minmax(240px"], [style*="repeat(auto-fill, minmax(280px"] { grid-template-columns: 1fr !important; }
  .flash { padding: .55rem .75rem; font-size: .8rem; margin-bottom: var(--sp-3); }
  .badge { font-size: .7rem; padding: .1rem .45rem; }

  /* Landing */
  .landing-hero { padding: var(--sp-8) var(--sp-4) var(--sp-6); }
  .hero-eyebrow { font-size: .7rem; padding: .25rem .7rem; margin-bottom: var(--sp-4); }
  .hero-headline { font-size: 1.75rem; margin-bottom: var(--sp-3); }
  .hero-sub { font-size: .88rem; line-height: 1.6; margin-bottom: var(--sp-5); }
  .hero-cta-row { gap: var(--sp-2); }
  .feature-grid { padding: 0 var(--sp-4) var(--sp-8); grid-template-columns: 1fr; gap: var(--sp-2); }
  .feature-card {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    column-gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--r-md);
  }
  .feature-icon { grid-row: span 2; font-size: 1.15rem; margin: 0; line-height: 1.4; }
  .feature-title { font-size: .88rem; margin-bottom: 2px; }
  .feature-desc { font-size: .8rem; line-height: 1.5; }
  .landing-cta-strip { padding: var(--sp-6) var(--sp-4); margin-bottom: var(--sp-8); }
  .landing-cta-strip h2 { font-size: 1.2rem; margin-bottom: var(--sp-2); }
  .landing-cta-strip p { margin-bottom: var(--sp-4); font-size: .85rem; }
  .landing-steps { padding: 0 var(--sp-4) var(--sp-8); }
  .landing-steps-title { font-size: 1.1rem; margin-bottom: var(--sp-4); }
  .landing-steps-list { gap: var(--sp-3); }
  .landing-step { grid-template-columns: 28px 1fr; gap: var(--sp-3); }
  .landing-step-num { width: 28px; height: 28px; font-size: .72rem; }
  .landing-step-desc { font-size: .8rem; }

  /* Planner */
  .planner-layout, .calc-layout { gap: var(--sp-4); }
  .planner-results, .calc-results { gap: var(--sp-3); }
  .plan-summary-header { padding: var(--sp-3); }
  .plan-summary-title { font-size: .92rem; }
  .plan-summary-tip { font-size: .75rem; }
  .plan-metrics-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plan-metric { padding: var(--sp-2) var(--sp-1); }
  .plan-metric-label { font-size: .66rem; letter-spacing: .03em; }
  .plan-metric-value { font-size: 1rem; }
  .plan-metric-sub { font-size: .7rem; }
  .session-card-header, .wk-card-header { margin-bottom: var(--sp-2); }
  .session-footer { margin-top: var(--sp-2); padding-top: var(--sp-2); }
  .save-plan-bar { flex-direction: column; align-items: stretch; padding: var(--sp-3); gap: var(--sp-2); }
  .save-plan-bar .input, .save-plan-bar .btn { width: 100%; min-width: 0; }
  .results-empty { padding: var(--sp-6) var(--sp-4); }
  .results-empty-icon { font-size: 1.75rem; margin-bottom: var(--sp-2); }
  .results-empty-title { font-size: .92rem; }
  .results-empty-desc { font-size: .8rem; }

  /* My plans */
  .plan-card { gap: var(--sp-3); }
  .plan-card-top { flex-direction: column; gap: var(--sp-2); }
  .plan-name { font-size: .95rem; }
  .plan-actions { width: 100%; gap: var(--sp-2); }
  .plan-actions .btn { flex: 1; }
  .plan-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
  .plan-stat-lbl { font-size: .66rem; letter-spacing: .03em; }
  .plan-stat-val { font-size: .78rem; }
  .progress-bar-lg { height: 5px; }

  /* Plan detail / workouts */
  .timeline-section { gap: var(--sp-2); }
  .wk-set-row { font-size: .78rem; }
  .wk-input-row { grid-template-columns: 2rem 1fr 1fr; }
  .wk-input-row .wk-orm-cell { display: none; }
  #plan-graph { height: 260px !important; }
  #planner-graph { height: 240px !important; }
  .graph-title { margin-bottom: var(--sp-2); font-size: .72rem; }
  .goal-banner { padding: var(--sp-5); }
  .goal-banner h2 { font-size: 1.1rem; }

  /* Calculators */
  .orm-hero { padding: var(--sp-5) var(--sp-4); }
  .orm-hero-value { font-size: 2.25rem; }
  .orm-hero-label { margin-bottom: var(--sp-2); }
  .orm-hero-sub { margin-top: var(--sp-2); }
  .orm-formulas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .orm-formula-card { padding: var(--sp-2); border-radius: var(--r-md); }
  .orm-formula-name { font-size: .68rem; margin-bottom: 2px; }
  .orm-formula-value { font-size: 1.05rem; }
  .micro-comparison { grid-template-columns: 1fr auto 1fr; gap: var(--sp-2); }
  .micro-set-box { padding: var(--sp-3) var(--sp-2); }
  .micro-set-value { font-size: 1.05rem; }
  .micro-arrow { font-size: 1.1rem; }
  .micro-history-row { flex-wrap: wrap; }
  .micro-history-orm { margin-left: 0; width: 100%; }
  .guide-field-item { padding: var(--sp-2) 0; }
  .guide-example-block, .guide-tip { padding: var(--sp-3); font-size: .78rem; }

  /* Tables */
  .data-table { table-layout: fixed; font-size: .78rem; }
  .data-table th, .data-table td { padding: var(--sp-2); overflow-wrap: anywhere; }
  .data-table th:first-child, .data-table td:first-child { padding-left: 0; }
  .data-table .input { min-height: 36px; padding-left: .35rem; padding-right: .35rem; }
  .graph-container { overflow: hidden; }

  /* Modal */
  .modal { padding: var(--sp-5); border-radius: var(--r-lg); }
  .modal-title { font-size: 1rem; }
  .modal-body { margin-bottom: var(--sp-4); }
  .modal-actions { flex-direction: column-reverse; gap: var(--sp-2); }
  .modal-actions .btn, .hero-cta-row .btn { width: 100%; }

  /* Auth */
  .auth-topbar { min-height: 52px; padding: var(--sp-2) var(--sp-3); }
  .auth-topbar-brand img { width: 28px; height: 28px; object-fit: contain; }
  .auth-topbar-actions > span { display: none; }
  .auth-topbar-actions .btn { min-height: 34px; }
  .auth-form-panel { padding: var(--sp-6) var(--sp-4); align-items: flex-start; }
  .auth-form-title { font-size: 1.2rem; }
  .auth-form-sub { margin-bottom: var(--sp-5); font-size: .82rem; }
  .auth-link { margin-top: var(--sp-4); }
}

@media (max-width: 380px) {
  .mobile-nav-link { font-size: clamp(9px, .64rem, 10px); }
  .mobile-nav-icon { font-size: min(1rem, 16px); }
  .plan-metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-metric:nth-child(2n) { border-right: none; }
  .plan-metric:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .orm-formulas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-headline { font-size: 1.6rem; }
}

/* Sidebar overlay on mobile */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 190;
}
.sidebar-overlay.open { display: block; }


/* ═══════════════════════════════════════════════════════════════
   STRENLA 2 — app shell & component layer
   Loaded last so it refines the base styles above. Every colour
   comes from the theme tokens, so all modes/accents keep working.
═══════════════════════════════════════════════════════════════ */
:root { --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --sidebar-w: 236px; }
body { letter-spacing: -.003em; }
.page-title, .section-title, .hero-title, .kpi-value { letter-spacing: -.02em; }
.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.num { font-variant-numeric: tabular-nums; }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 999; padding: 8px 14px; border-radius: var(--r-sm); background: var(--brand); color: var(--on-brand); font-weight: 600; }
.skip-link:focus { left: 8px; }

/* Controls */
.btn { border-radius: 10px; font-weight: 600; min-height: 40px; }
.btn-sm { min-height: 34px; border-radius: 9px; }
.btn-lg { min-height: 48px; border-radius: 12px; }
.btn-xl { min-height: 52px; border-radius: 14px; }
.btn .icon { width: 1.1em; height: 1.1em; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.input { border-radius: 10px; min-height: 42px; }
.input:focus { box-shadow: 0 0 0 3px var(--brand-dim); }
.flash { border-radius: var(--r-md); display: flex; gap: .6rem; align-items: flex-start; }
.card { border-radius: var(--r-lg); }

/* ── Sidebar (desktop) ───────────────────────────────────────── */
.sidebar { width: var(--sidebar-w); padding: var(--sp-6) var(--sp-3) var(--sp-4); gap: var(--sp-6); }
.sidebar-brand { display: block; padding: 0 var(--sp-3); border-bottom: none; }
.sidebar-brand-logo { width: 124px; }
.sidebar-nav { padding: 0; gap: 2px; }
.sidebar-link { gap: .75rem; padding: .62rem .8rem; border-radius: 10px; font-size: .92rem; font-weight: 550; color: var(--text-2); }
.sidebar-link .icon { width: 1.2rem; height: 1.2rem; }
.sidebar-link.active { background: var(--brand-dim); color: var(--brand); font-weight: 650; }
.sidebar-footer { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) 0 0; border-top: 1px solid var(--border); }
.sidebar-user { gap: .7rem; padding: .55rem .8rem; border-radius: 10px; }
.sidebar-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sidebar-username { color: var(--text-1); font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-sub { font-size: .74rem; }
.avatar { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .8rem; font-weight: 700; color: var(--brand); background: var(--brand-dim); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); }

/* ── Mobile top bar & tab bar ────────────────────────────────── */
.topbar, .tabbar { display: none; }
@media (max-width: 1024px) {
  .sidebar { display: none; }
  .topbar {
    display: flex; left: 0; justify-content: space-between; gap: var(--sp-3);
    min-height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--sp-4) 0;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  }
  .topbar-brand { display: flex; align-items: center; }
  .topbar-logo { display: block; height: 22px; width: auto; }
  .topbar-actions { display: flex; align-items: center; gap: var(--sp-2); }
  .topbar-icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-2); }
  .topbar-icon-btn:hover { background: var(--surface-3); color: var(--text-1); }
  .topbar-icon-btn .icon { width: 22px; height: 22px; }
  .avatar-link { width: 34px; height: 34px; }
  .page-area { padding-top: calc(56px + env(safe-area-inset-top)); }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 180;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: 6px var(--sp-2) calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface-1) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--border);
  }
  .tabbar-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; min-width: 0; border-radius: 12px; color: var(--text-3); font-size: clamp(10px, .7rem, 11px); font-weight: 650; white-space: nowrap; }
  .tabbar-link span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .tabbar-link .icon { width: 22px; height: 22px; }
  .tabbar-link.active { color: var(--brand); }
  .tabbar-link.active .icon { stroke-width: 2.4; }
  .app-shell { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* ── Page header, sub-navigation ─────────────────────────────── */
.page-header { padding: var(--sp-8) var(--sp-10) 0; border-bottom: none; }
.page-header + .page-body { padding-top: var(--sp-6); }
.page-title { font-size: 1.75rem; font-weight: 750; line-height: 1.2; }
.page-subtitle { max-width: 62ch; color: var(--text-2); font-size: .92rem; }
.page-eyebrow { margin-bottom: 4px; color: var(--text-3); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.page-back { display: inline-flex; align-items: center; gap: 2px; margin-bottom: var(--sp-2); color: var(--text-2); font-size: .85rem; font-weight: 600; }
.page-back:hover { color: var(--brand); }
.page-back .icon { width: 1rem; height: 1rem; }
.subnav { display: flex; gap: 6px; margin-top: var(--sp-5); overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav-link { flex-shrink: 0; padding: .42rem .95rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-2); font-size: .86rem; font-weight: 650; }
.subnav-link:hover { color: var(--text-1); border-color: var(--border-mid); }
.subnav-link.active { background: var(--text-1); border-color: var(--text-1); color: var(--bg); }
.diet-tabs { margin-top: var(--sp-5); }

/* ── Layout helpers ──────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.stack-lg { gap: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.layout-2 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.layout-narrow { max-width: 760px; }
@media (max-width: 900px) { .layout-2 { grid-template-columns: minmax(0, 1fr); } }

/* ── Panels ──────────────────────────────────────────────────── */
.panel { min-width: 0; padding: var(--sp-5); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.panel-title { display: flex; align-items: center; gap: .5rem; color: var(--text-2); font-size: .78rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.panel-title .icon { width: 1.05rem; height: 1.05rem; color: var(--brand); }
.panel-link { display: inline-flex; align-items: center; gap: 2px; color: var(--brand); font-size: .85rem; font-weight: 650; white-space: nowrap; }
.panel-link .icon { width: 1rem; height: 1rem; }
.panel-link:hover { text-decoration: underline; }

/* Hero: the one primary thing on a screen */
.hero {
  position: relative; overflow: hidden; padding: var(--sp-6); border-radius: var(--r-xl);
  background: radial-gradient(120% 150% at 100% 0%, color-mix(in srgb, var(--brand) 16%, transparent) 0%, transparent 58%), var(--surface-1);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--border));
}
.hero-kicker { display: flex; align-items: center; gap: .4rem; color: var(--brand); font-size: .74rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.hero-kicker .icon { width: 1rem; height: 1rem; }
.hero-title { margin-top: 6px; color: var(--text-1); font-size: 1.6rem; font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; }
.hero-sub { margin-top: 4px; color: var(--text-2); font-size: .92rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }

/* ── Rows ────────────────────────────────────────────────────── */
.row-list { display: flex; flex-direction: column; }
.row-item { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding: .8rem 0; border-top: 1px solid var(--border); }
.row-item:first-child { border-top: none; padding-top: 0; }
.row-item:last-child { padding-bottom: 0; }
a.row-item:hover .row-title { color: var(--brand); }
.row-icon { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--surface-3); color: var(--text-2); font-size: .85rem; font-weight: 750; }
.row-icon .icon { width: 18px; height: 18px; }
.row-icon.is-brand { background: var(--brand-dim); color: var(--brand); }
.row-icon.is-done { background: var(--brand); color: var(--on-brand); }
.row-main { flex: 1; min-width: 0; }
.row-title { color: var(--text-1); font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.row-meta { margin-top: 1px; color: var(--text-3); font-size: .82rem; overflow-wrap: anywhere; }
/* Shared with you: a row with its own Remove button beside the link */
.shared-row { display: flex; align-items: center; gap: var(--sp-2); border-top: 1px solid var(--border); }
.shared-row:first-child { border-top: none; }
.shared-row > .row-item { flex: 1; border-top: none; padding: .8rem 0; }
.shared-row:first-child > .row-item { padding-top: 0; }
.shared-row:last-child > .row-item { padding-bottom: 0; }
.shared-remove { flex-shrink: 0; margin: 0; }
.shared-remove .icon-btn, .shared-row > .icon-btn { width: 36px; height: 36px; }
.shared-row .icon-btn .icon { width: 16px; height: 16px; }
.row-trail { flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-2); color: var(--text-3); }
.row-trail .icon { width: 18px; height: 18px; }
.row-trail form { margin: 0; }

/* ── Chips, meters, KPIs ─────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: .2rem .62rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-3); color: var(--text-2); font-size: .76rem; font-weight: 650; white-space: nowrap; }
.chip-brand { background: var(--brand-dim); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.chip-warn { background: color-mix(in srgb, var(--warning) 13%, transparent); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.meter { height: 6px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width .4s ease; }
.meter-lg { height: 10px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-3); }
.kpi { min-width: 0; padding: var(--sp-4); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); }
.kpi-label { color: var(--text-3); font-size: .72rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.kpi-value { margin-top: 2px; color: var(--text-1); font-size: 1.5rem; font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-value.is-brand { color: var(--brand); }
.kpi-sub { color: var(--text-3); font-size: .78rem; }

/* ── Empty states ────────────────────────────────────────────── */
.empty { padding: var(--sp-8) var(--sp-5); text-align: center; background: var(--surface-1); border: 1px dashed var(--border-mid); border-radius: var(--r-lg); }
.empty-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3); border-radius: 16px; background: var(--brand-dim); color: var(--brand); }
.empty-icon .icon { width: 26px; height: 26px; }
.empty-title { color: var(--text-1); font-size: 1.08rem; font-weight: 750; }
.empty-text { max-width: 48ch; margin: 4px auto 0; color: var(--text-2); font-size: .9rem; line-height: 1.6; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-5); }
.empty.compact { padding: var(--sp-5); text-align: left; border-style: solid; }

/* ── Inline explanations ("What's this?") ────────────────────── */
details.explain { color: var(--text-2); font-size: .86rem; }
details.explain > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--text-2); font-size: .84rem; font-weight: 650; }
details.explain > summary::-webkit-details-marker { display: none; }
details.explain > summary .icon { width: 16px; height: 16px; color: var(--brand); }
details.explain[open] > summary { color: var(--text-1); }
.explain-body { margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); line-height: 1.6; }
.explain-body p + p { margin-top: var(--sp-2); }
.explain-body strong { color: var(--text-1); }

/* ── Getting-started checklist ───────────────────────────────── */
.checklist { display: flex; flex-direction: column; gap: 2px; }
.check-step { display: flex; align-items: center; gap: var(--sp-3); padding: .7rem .75rem; margin: 0 -.75rem; border-radius: var(--r-md); }
a.check-step:hover { background: var(--surface-2); }
.check-dot { width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--border-mid); color: var(--text-3); font-size: .78rem; font-weight: 750; }
.check-dot .icon { width: 15px; height: 15px; }
.check-step.is-done .check-dot { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.check-step.is-done .row-title { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--border-mid); }
.check-step.is-next .check-dot { border-color: var(--brand); color: var(--brand); }

/* ── Big "pick one" choices (onboarding, new lift) ───────────── */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: block; padding: .65rem .8rem; border-radius: var(--r-md); border: 1.5px solid var(--border-mid); background: var(--surface-2); color: var(--text-1); font-size: .9rem; font-weight: 600; text-align: center; }
.choice input:checked + span { border-color: var(--brand); background: var(--brand-dim); color: var(--brand); }
.choice input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Forms: field pairs and step sections */
.field-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-2); }
.field-pair .times { color: var(--text-3); font-weight: 700; }
/* Two fields side by side (no "×" between): how many + unit, how many + goal time */
.field-pair-amount { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: end; }
.field-pair-goal { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); align-items: end; }
.form-section { padding: var(--sp-5); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); }
.form-section + .form-section { margin-top: var(--sp-3); }
.form-step { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--sp-4); color: var(--text-1); font-size: 1rem; font-weight: 700; }
.form-step-num { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-dim); color: var(--brand); font-size: .8rem; font-weight: 800; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: minmax(0, 1fr); } .form-grid .span-2 { grid-column: auto; } }
details.advanced { margin-top: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); }
details.advanced > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none; font-weight: 650; color: var(--text-1); }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary .icon { transition: transform .2s; color: var(--text-3); }
details.advanced[open] > summary .icon { transform: rotate(180deg); }
details.advanced > summary small { display: block; color: var(--text-3); font-size: .8rem; font-weight: 500; }
.advanced-body { padding: 0 var(--sp-5) var(--sp-5); }
.sticky-actions { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-3) 0; background: linear-gradient(to top, var(--bg) 70%, transparent); }
@media (max-width: 1024px) { .sticky-actions { bottom: calc(64px + env(safe-area-inset-bottom)); } }

/* ── Tiles (More page, tools) ────────────────────────────────── */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.tile { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color .15s, transform .15s; }
.tile:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.tile-title { color: var(--text-1); font-weight: 700; }
.tile-text { margin-top: 2px; color: var(--text-2); font-size: .84rem; line-height: 1.5; }
.section-heading { margin: var(--sp-6) 0 var(--sp-3); color: var(--text-3); font-size: .74rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.section-heading:first-child { margin-top: 0; }

/* ── Help page ───────────────────────────────────────────────── */
.help-toc { display: flex; flex-wrap: wrap; gap: 6px; }
.help-section { scroll-margin-top: 80px; }
.help-section h2 { margin-bottom: var(--sp-2); color: var(--text-1); font-size: 1.15rem; font-weight: 750; letter-spacing: -.015em; }
.help-section p, .help-section li { color: var(--text-2); line-height: 1.7; }
.help-section p + p { margin-top: var(--sp-2); }
.help-section ul, .help-section ol { padding-left: 1.2rem; margin-top: var(--sp-2); }
.help-section strong { color: var(--text-1); }
.help-term { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--sp-1) var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--border); }
.help-term dt { color: var(--text-1); font-weight: 700; }
.help-term dd { color: var(--text-2); line-height: 1.6; }
@media (max-width: 600px) { .help-term { grid-template-columns: minmax(0, 1fr); } }

/* Guide: hub + tutorials */
.page-kicker { margin-bottom: 2px; color: var(--brand); font-size: .74rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.help-row { color: inherit; text-decoration: none; }
.help-row:hover .row-title { color: var(--brand); }
.help-row .row-trail .icon { width: 16px; height: 16px; color: var(--text-3); }
.help-video-chip { flex-shrink: 0; gap: 4px; }
.help-video-chip .icon { width: 12px; height: 12px; }
.help-video-cards { display: grid; grid-auto-flow: column; grid-auto-columns: 8.5rem; justify-content: start; gap: var(--sp-3); overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; } /* every card the same size, however many in the row */
.help-video-card { display: flex; flex-direction: column; gap: var(--sp-2); color: var(--text-1); text-decoration: none; scroll-snap-align: start; }
.help-video-thumb { position: relative; display: block; width: 100%; aspect-ratio: 390 / 844; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2) center top / cover no-repeat; overflow: hidden; }
.help-play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-md); transition: transform .15s; }
.help-play .icon { width: 20px; height: 20px; margin-left: 2px; }
.help-video-card:hover .help-play { transform: scale(1.08); }
.help-video-group + .help-video-group { margin-top: var(--sp-4); }
.help-video-group-title { font-size: .85rem; font-weight: 700; color: var(--text-1); margin: 0 0 var(--sp-2); }
.help-video-group-title span { color: var(--text-3); font-weight: 600; margin-left: 4px; }
/* The tour (Why Strenla): one large card at the top of the Guide */
.help-tour { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3); border-radius: var(--r-lg); text-decoration: none; color: var(--text-1);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, var(--surface-1)), var(--surface-1) 70%); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border)); }
.help-tour[hidden] { display: none; }
.help-tour-thumb { position: relative; flex: 0 0 auto; width: 92px; aspect-ratio: 390 / 844; border-radius: var(--r-md); background: var(--surface-2) center / cover no-repeat; overflow: hidden; }
.help-tour-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.help-tour-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.help-tour-title { font-size: 1.25rem; font-weight: 750; line-height: 1.2; }
.help-tour-sub { font-size: .9rem; color: var(--text-2); line-height: 1.4; }
.help-tour:hover .help-play { transform: scale(1.08); }
.help-video-title { font-size: .85rem; font-weight: 650; line-height: 1.3; }
.help-topic { display: grid; gap: var(--sp-5); max-width: 760px; }
.help-topic.has-video { max-width: 1040px; }
@media (min-width: 900px) {
  .help-topic.has-video { grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); align-items: start; }
  .help-topic.has-video .help-video { position: sticky; top: calc(env(safe-area-inset-top) + 72px); }
}
.help-video { scroll-margin-top: calc(env(safe-area-inset-top) + 64px); }
.help-video-frame { max-width: 20rem; margin: 0 auto; padding: 6px; border-radius: 26px; background: var(--surface-3); border: 1px solid var(--border-mid); box-shadow: var(--shadow-lg); }
.help-video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; border-radius: 20px; background: #000; }
.help-chapters { list-style: none; margin: var(--sp-3) auto 0; padding: 0; max-width: 20rem; display: grid; gap: 2px; }
.help-chapters button { display: flex; gap: var(--sp-3); width: 100%; padding: 6px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font: inherit; font-size: .85rem; text-align: left; cursor: pointer; }
.help-chapters button .num { flex-shrink: 0; min-width: 2.4rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.help-chapters button:hover { background: var(--surface-2); color: var(--text-1); }
.help-chapters button.is-current { background: var(--brand-dim); color: var(--text-1); }
.help-chapters button.is-current .num { color: var(--brand); }
.help-body h3 { margin: var(--sp-5) 0 var(--sp-1); color: var(--text-1); font-size: 1rem; font-weight: 750; }
.help-body h3:first-child { margin-top: 0; }
.help-body em { color: var(--text-1); font-style: normal; font-weight: 600; }
.help-steps { counter-reset: step; list-style: none; padding-left: 0 !important; }
.help-steps > li { position: relative; padding: 0 0 var(--sp-3) 2.4rem; counter-increment: step; }
.help-steps > li::before { content: counter(step); position: absolute; left: 0; top: .15rem; width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-dim); color: var(--brand); font-size: .8rem; font-weight: 800; }
.help-link { display: inline-block; margin-left: 2px; color: var(--brand); font-weight: 650; white-space: nowrap; }
.help-tip { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--brand-dim); color: var(--text-2); line-height: 1.6; }
.help-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.help-pager-link { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); color: var(--text-1); text-decoration: none; min-width: 0; }
.help-pager-link small { color: var(--text-3); font-size: .74rem; }
.help-pager-link span { display: flex; align-items: center; gap: 4px; font-weight: 650; overflow: hidden; }
.help-pager-link .icon { width: 14px; height: 14px; flex-shrink: 0; }
.help-pager-link.is-next { text-align: right; align-items: flex-end; grid-column: 2; }
.help-pager-link:hover { border-color: var(--border-focus); }

/* ── Landing (signed out) ────────────────────────────────────── */
.landing { max-width: 1080px; width: 100%; margin: 0 auto; padding: var(--sp-12) var(--sp-8) var(--sp-16); }
.landing-hero2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-10); align-items: center; }
.landing-kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; background: var(--brand-dim); color: var(--brand); font-size: .78rem; font-weight: 700; }
.landing-title { margin-top: var(--sp-4); color: var(--text-1); font-size: clamp(2.1rem, 5vw, 3.3rem); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; }
.landing-title span { color: var(--brand); }
.landing-lead { margin-top: var(--sp-4); max-width: 46ch; color: var(--text-2); font-size: 1.05rem; line-height: 1.65; }
.landing-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.landing-whats-new { display: inline-flex; align-items: center; gap: 6px; align-self: center; padding: 8px 2px; color: var(--text-2); font-size: .84rem; font-weight: 650; text-decoration: none; }
.landing-whats-new:hover { color: var(--brand); }
.landing-note { margin-top: var(--sp-3); color: var(--text-3); font-size: .84rem; }
.demo-card { padding: var(--sp-5); border-radius: var(--r-xl); background: var(--surface-1); border: 1px solid var(--border-mid); box-shadow: var(--shadow-lg); }
.demo-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: .65rem 0; border-top: 1px solid var(--border); font-size: .9rem; }
.demo-row:first-of-type { border-top: none; }
.demo-row .is-up { color: var(--brand); font-weight: 700; }
.landing-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-16); }
.pillar .row-icon { margin-bottom: var(--sp-3); }
.pillar h3 { color: var(--text-1); font-size: 1.02rem; font-weight: 700; }
.pillar p { margin-top: 4px; color: var(--text-2); font-size: .9rem; line-height: 1.6; }
.landing-steps2 { margin-top: var(--sp-16); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); counter-reset: step; }
.landing-steps2 li { list-style: none; padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface-1); border: 1px solid var(--border); }
.landing-steps2 li::before { counter-increment: step; content: counter(step); display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; margin-bottom: var(--sp-3); border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: .85rem; }
.landing-steps2 strong { display: block; color: var(--text-1); }
.landing-steps2 span { color: var(--text-2); font-size: .9rem; line-height: 1.6; }
@media (max-width: 900px) {
  .landing { padding: var(--sp-8) var(--sp-4) var(--sp-12); }
  .landing-hero2, .landing-pillars, .landing-steps2 { grid-template-columns: minmax(0, 1fr); }
  .landing-pillars, .landing-steps2 { margin-top: var(--sp-10); }
}

/* ── Session (Train) ─────────────────────────────────────────── */
.day-strip { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.day-pill { flex-shrink: 0; min-width: 7.5rem; padding: .55rem .8rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-1); color: var(--text-3); font-size: .72rem; font-weight: 650; }
.day-pill strong { display: block; color: var(--text-1); font-size: .88rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 10rem; }
.day-pill.is-done { color: var(--brand); }
.day-pill.is-current { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand); }
.day-pill.is-viewing { background: var(--surface-3); }

/* ── Mobile density ──────────────────────────────────────────── */
@media (max-width: 1100px) { .page-header { padding-left: var(--sp-6); padding-right: var(--sp-6); } }
@media (max-width: 600px) {
  .page-header { padding: var(--sp-5) var(--sp-4) 0; }
  .page-header + .page-body { padding-top: var(--sp-4); }
  .page-title { font-size: 1.45rem; }
  .subnav { margin-top: var(--sp-4); margin-left: calc(-1 * var(--sp-4)); margin-right: calc(-1 * var(--sp-4)); padding: 0 var(--sp-4); }
  .panel, .form-section { padding: var(--sp-4); }
  .hero { padding: var(--sp-5); border-radius: var(--r-lg); }
  .hero-title { font-size: 1.35rem; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .kpi { padding: var(--sp-3); }
  .kpi-value { font-size: 1.25rem; }
  details.advanced > summary { padding: var(--sp-4); }
  .advanced-body { padding: 0 var(--sp-4) var(--sp-4); }
  .btn { min-height: 40px; }
}

/* Rows and meters are often <span>s inside links */
.row-title, .row-meta, .meter, .tile-title, .tile-text { display: block; }
.topbar-logo.is-icon { height: 28px; }

/* Today: two columns on desktop; one prioritised column on phones */
@media (max-width: 900px) {
  .today-grid { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  .today-grid > .stack { display: contents; }
  .today-grid .o-1 { order: 1; } .today-grid .o-2 { order: 2; } .today-grid .o-3 { order: 3; }
  .today-grid .o-4 { order: 4; } .today-grid .o-5 { order: 5; } .today-grid .o-6 { order: 6; } .today-grid .o-7 { order: 7; }
}

/* The legacy landing .hero-sub is centred; in Strenla 2 heroes it is left-aligned */
.hero .hero-sub { max-width: 62ch; margin: 4px 0 0; font-size: .92rem; line-height: 1.6; }
.hero.hero-center { text-align: center; }
.hero.hero-center .hero-sub { margin-left: auto; margin-right: auto; }
.hero.hero-center .hero-actions { justify-content: center; }

/* Sign-up perks: the brand panel is hidden on small screens, so show a short list instead */
.auth-mobile-perks { display: none; }
@media (max-width: 900px) {
  .auth-mobile-perks { display: grid; gap: 6px; margin: 0 0 var(--sp-5); padding: 0; list-style: none; color: var(--text-2); font-size: .86rem; }
  .auth-mobile-perks li { display: flex; align-items: center; gap: .5rem; }
  .auth-mobile-perks .icon { width: 16px; height: 16px; color: var(--brand); }
}

/* Tab labels with a short form for narrow phones (e.g. Measurements → Measure) */
.tab-short { display: none; }
@media (max-width: 389px) {
  .tabbar-link .tab-full { display: none; }
  .tabbar-link .tab-short { display: block; }
}

/* Floating copy of the top message after a reload restores the scroll position */
.flash-toast {
  position: fixed; z-index: 300; left: 50%; top: calc(16px + env(safe-area-inset-top));
  width: min(92vw, 520px); margin: 0; transform: translateX(-50%);
  box-shadow: var(--shadow-lg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background-color: color-mix(in srgb, var(--surface-1) 88%, transparent);
  animation: toast-in .25s ease-out; transition: opacity .4s, transform .4s;
}
.flash-toast.is-leaving { opacity: 0; transform: translate(-50%, -8px); }
.flash-toast { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; } /* swiped away: scripts/app/toast-swipe.js */
.flash-toast:active { cursor: grabbing; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }
@media (max-width: 1024px) { .flash-toast { top: calc(64px + env(safe-area-inset-top)); } }
@media (prefers-reduced-motion: reduce) { .flash-toast { animation: none; transition: none; } }

/* ── Installable app ─────────────────────────────────────────── */
.topbar-install { gap: 5px; white-space: nowrap; }
.topbar-install .icon { width: 16px; height: 16px; }
.install-steps { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-2); padding: 0; list-style: none; counter-reset: s; }
.install-steps li { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-2); font-size: .92rem; }
.install-steps strong { color: var(--text-1); }
.install-step-icon { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--brand-dim); color: var(--brand); }
.install-step-icon .icon { width: 18px; height: 18px; }
@media (max-width: 600px) {
  /* Bottom sheet on phones */
  .install-sheet.open { align-items: flex-end; padding: 0; }
  .install-sheet .modal { width: 100%; max-width: none; border-radius: 22px 22px 0 0; padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); }
}
/* Installed app on large screens: keep content below the status bar */
@media (min-width: 1025px) and (display-mode: standalone) {
  .sidebar { padding-top: calc(var(--sp-6) + env(safe-area-inset-top)); }
  .page-area { padding-top: env(safe-area-inset-top); }
}
.auth-topbar { padding-top: env(safe-area-inset-top); }
@media (max-width: 1024px) {
  /* viewport-fit=cover: keep content clear of the notch in landscape */
  .page-area { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .tabbar { padding-left: max(var(--sp-2), env(safe-area-inset-left)); padding-right: max(var(--sp-2), env(safe-area-inset-right)); }
}

/* ── Searchable picker (replaces long dropdowns) ─────────────── */
.picker-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important;
  opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; }
.picker-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; min-width: 0;
  text-align: left; cursor: pointer; color: var(--text-1); font: inherit; }
.picker-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-btn::after { content: ''; flex-shrink: 0; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg) translateY(-2px); }
.picker-btn.is-empty span { color: var(--text-3); }
.picker-btn.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-dim); }
.picker-dialog { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: min(82vh, 720px);
  margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--border-mid); border-radius: var(--r-lg); background: var(--surface-1); color: var(--text-1); box-shadow: var(--shadow-xl); }
.picker-dialog::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(2px); }
.picker-inner { display: flex; flex-direction: column; max-height: min(82vh, 720px); }
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--border); }
.picker-search { padding: var(--sp-3) var(--sp-4) 0; }
.picker-list { list-style: none; overflow: auto; display: grid; gap: var(--sp-2); margin: var(--sp-3) var(--sp-4) var(--sp-4); padding: 0; min-height: 10rem; overscroll-behavior: contain; align-content: start; }
.picker-list li[hidden] { display: none; }
.picker-option { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: var(--sp-3); text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-1); font: inherit; }
.picker-option:hover, .picker-option:focus-visible { border-color: var(--border-mid); background: var(--surface-3); }
.picker-option.is-selected { border-color: color-mix(in srgb, var(--brand) 40%, transparent); background: var(--brand-dim); }
.picker-option-name { font-weight: 650; overflow-wrap: anywhere; }
.picker-option-meta { color: var(--text-3); font-size: .8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.picker-empty { margin: 0 var(--sp-4) var(--sp-4); color: var(--text-3); font-size: .88rem; }
@media (max-width: 600px) {
  .picker-dialog { inset: auto 0 0 0; transform: none; width: 100%; max-width: none; max-height: 86vh; border-radius: 22px 22px 0 0; }
  .picker-inner { max-height: 86vh; padding-bottom: env(safe-area-inset-bottom); }
}
.install-card { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); }
.install-card[hidden] { display: none; }
.install-card-icon { border-radius: 12px; flex-shrink: 0; }
.landing > .install-card { margin-bottom: var(--sp-6); }
@media (max-width: 420px) { .install-card .btn { padding-left: .6rem; padding-right: .6rem; } .install-card .row-meta { display: none; } }

/* Short labels ("Save") still get a comfortably sized button */
.btn-wide { min-width: 6.5rem; }

/* ── Undo ────────────────────────────────────────────────────── */
.undo-bar { align-items: center; }
.undo-bar .undo-text { flex: 1; min-width: 0; }
.undo-bar form { margin: 0; flex-shrink: 0; }
.undo-btn { border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); background: transparent; color: var(--brand);
  font: inherit; font-weight: 700; padding: .3rem .8rem; border-radius: 8px; cursor: pointer; }
.undo-btn:hover { background: var(--brand); color: var(--on-brand); }

/* Destructive section (Delete account) */
.danger-zone { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.danger-zone .section-title { color: var(--danger-text); }

/* Editor save bars (meal, meal plan, routine): actions stay on the right even when the bar wraps */
.diet-sticky-bar > div:last-child { margin-left: auto; }

/* ── Friends, chat & sharing ─────────────────────────────────── */
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .38rem; margin-left: auto; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: .72rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.tile-title .count-badge { margin-left: .4rem; vertical-align: 2px; }
.tabbar-link { position: relative; }
.tab-dot { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: .62rem; font-weight: 800; line-height: 1; border: 2px solid var(--surface-1); }
.friend-last.is-unread { color: var(--text-1); font-weight: 650; }
.row-trail .btn { white-space: nowrap; }

/* Chat: header and composer stay put, messages scroll between them */
.chat-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border);
}
.chat-back { width: 40px; height: 40px; margin-left: -8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-2); }
.chat-back:hover { background: var(--surface-3); color: var(--text-1); }
.chat-back .icon { width: 22px; height: 22px; }
.chat-menu-btn { margin: 0 -8px 0 0; }
.chat-menu-btn .icon { fill: currentColor; }
.chat-who { flex: 1; min-width: 0; line-height: 1.2; }
.chat-name { margin: 0; font-size: 1.05rem; font-weight: 750; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-status { color: var(--text-3); font-size: .78rem; }
.chat-menu { position: relative; flex-shrink: 0; }
.chat-menu > summary { list-style: none; cursor: pointer; }
.chat-menu > summary::-webkit-details-marker { display: none; }
.chat-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 12rem; padding: 6px; background: var(--surface-2); border: 1px solid var(--border-mid); border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.chat-menu-list form { margin: 0; }
.chat-menu-item { display: block; width: 100%; padding: .6rem .75rem; border: 0; border-radius: 8px; background: none; color: var(--text-1); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.chat-menu-item:hover { background: var(--surface-3); }
.chat-menu-item .icon { width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; color: var(--brand); }
.chat-menu-item.is-danger { color: var(--danger-text); }
.chat-menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }
.chat-menu-list { min-width: 15rem; }

.chat-page .page-area { min-height: 100dvh; }
.chat-body { flex: 1; display: flex; flex-direction: column; padding-bottom: 0; }
.chat-thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; width: 100%; max-width: 760px; margin: 0 auto; padding: var(--sp-2) 0 var(--sp-3); }
.chat-retention { align-self: center; display: flex; align-items: center; gap: 6px; max-width: 26rem; margin: 0 auto var(--sp-3); padding: 6px 12px; border-radius: 99px; background: var(--surface-2); color: var(--text-3); font-size: .78rem; line-height: 1.4; text-align: center; }
.chat-retention .icon, .chat-retention svg { width: 14px; height: 14px; flex: none; }
.chat-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 18rem; padding: var(--sp-8) 0; text-align: center; color: var(--text-3); font-size: .88rem; }
.chat-empty strong { color: var(--text-1); font-size: 1rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.3rem; margin-bottom: 4px; }

/* Messages: a run from the same person sits close together, with a gap when the sender changes */
.msg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: min(80%, 520px); }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg.mine + .msg:not(.mine), .msg:not(.mine) + .msg.mine { margin-top: 10px; }
.msg-bubble { padding: .5rem .8rem; border-radius: 18px; background: var(--surface-3); color: var(--text-1); font-size: .95rem; line-height: 1.4; overflow-wrap: anywhere; }
.msg.mine .msg-bubble { background: var(--brand); color: var(--on-brand); }
/* tail on the last bubble of a run */
.msg:not(.mine):not(:has(+ .msg:not(.mine))) .msg-bubble { border-bottom-left-radius: 5px; }
.msg.mine:not(:has(+ .msg.mine)) .msg-bubble { border-bottom-right-radius: 5px; }

.msg-share { display: flex; flex-direction: column; width: min(100%, 300px); border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border-mid); overflow: hidden; }
.msg.mine .msg-share { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.msg-share-top { display: flex; gap: var(--sp-3); align-items: center; padding: .7rem .8rem; }
.msg-share-top .row-icon { width: 34px; height: 34px; border-radius: 10px; }
.msg-share-top .row-main { display: flex; flex-direction: column; min-width: 0; }
.msg-share-top .row-title { font-size: .92rem; }
.msg-share-top .row-meta { font-size: .76rem; }
.msg-share-kicker { color: var(--brand); font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.msg-share-action { display: flex; align-items: center; justify-content: center; gap: 6px; padding: .6rem .8rem; border-top: 1px solid var(--border); color: var(--brand); font-size: .85rem; font-weight: 700; }
.msg-share-action:hover { background: var(--surface-3); }
.msg-share-action.is-done { color: var(--text-2); }
.msg-share-action .icon { width: 15px; height: 15px; }
.msg-share-action .icon:last-child { margin-left: auto; opacity: .6; }

.chat-composer {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: flex-end; gap: var(--sp-2);
  width: 100%; max-width: 760px; margin: 0 auto;
  padding: var(--sp-2) 0 var(--sp-4);
  background: var(--bg);
}
.chat-input {
  flex: 1; min-width: 0; min-height: 44px; max-height: 140px; resize: none;
  padding: .62rem 1rem; border-radius: 22px;
  background: var(--surface-2); border: 1px solid var(--border-mid); color: var(--text-1);
  font: inherit; font-size: max(16px, .95rem); line-height: 1.35;
}
.chat-input:focus { border-color: var(--brand); outline: none; }
.chat-input::placeholder { color: var(--text-3); }
.chat-send { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--brand); color: var(--on-brand); cursor: pointer; }
.chat-send:disabled { opacity: .5; }
.chat-send .icon { width: 20px; height: 20px; }
.chat-locked { max-width: 760px; margin: var(--sp-2) auto var(--sp-4); }
@media (max-width: 1024px) {
  .chat-header { top: calc(56px + env(safe-area-inset-top)); padding: var(--sp-2) var(--sp-4); }
  .chat-page .page-area { min-height: 100dvh; }
  .chat-composer { bottom: calc(62px + env(safe-area-inset-bottom)); padding-bottom: var(--sp-2); }
  .chat-body { padding-top: 0; }
}

.share-pick { cursor: pointer; }
.share-pick input { width: 1.15rem; height: 1.15rem; accent-color: var(--brand); flex-shrink: 0; }

.input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-dim); }
.field-error { margin-top: 4px; color: var(--danger-text); font-size: .82rem; font-weight: 600; }
.data-wrap { overflow-x: auto; }
.clash { padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); }
.clash-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); overflow-wrap: anywhere; }
.clash-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.clash-table th, .clash-table td { padding: .35rem .5rem; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.clash-table thead th { border-top: 0; color: var(--text-3); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.clash-table tbody th { color: var(--text-2); font-weight: 600; white-space: nowrap; width: 1%; }
.clash-table tr.is-diff td:last-child { color: var(--warning); font-weight: 650; }
.clash-options { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.clash-option { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.clash-option input { width: 1.1rem; height: 1.1rem; accent-color: var(--brand); flex-shrink: 0; }
.clash-name { margin-left: 1.6rem; width: calc(100% - 1.6rem); }
.clash-options .field-error { margin: 0 0 0 1.6rem; }
.import-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.import-day { padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); font-size: .88rem; }
.import-day-head { display: flex; justify-content: space-between; gap: var(--sp-2); margin-bottom: 6px; }
.import-day-line { padding: 2px 0; color: var(--text-1); overflow-wrap: anywhere; }
.import-list > summary { cursor: pointer; list-style: none; }
.import-list > summary::-webkit-details-marker { display: none; }

/* ── Menu chooser (Account → Menu) ───────────────────────────── */
.menu-preview { display: grid; grid-template-columns: auto repeat(var(--tabs, 3), minmax(0, 1fr)) auto; gap: 6px; align-items: stretch; padding: 8px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); }
.menu-fixed, .menu-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 10px 4px; border-radius: 12px; font-size: .78rem; font-weight: 650; text-align: center; }
.menu-fixed { color: var(--text-3); padding-inline: 10px; }
.menu-fixed .icon, .menu-slot-icon .icon { width: 22px; height: 22px; }
.menu-slot { position: relative; background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); cursor: pointer; }
.menu-slot:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.menu-slot-icon { color: var(--brand); display: inline-flex; }
.menu-slot-label { max-width: 100%; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-slot-change { display: inline-flex; align-items: center; gap: 1px; color: var(--brand); font-size: .68rem; font-weight: 700; }
.menu-slot-change .icon { width: 12px; height: 12px; }
.menu-slot-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
@media (max-width: 480px) {
  .menu-preview { gap: 4px; padding: 6px; }
  .menu-fixed { padding-inline: 3px; font-size: .68rem; }
}

/* ── Compact lists (long libraries: ingredients, muscles) ────── */
.diet-list.is-compact { gap: 0; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.diet-list.is-compact .diet-row { flex-direction: row; align-items: center; gap: var(--sp-3); padding: .65rem var(--sp-3) .65rem var(--sp-4); border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
.diet-list.is-compact .diet-row:first-child { border-top: 0; }
.diet-list.is-compact .diet-row-main { flex: 1; gap: 2px; }
.diet-list.is-compact .diet-macros, .diet-list.is-compact .stat-change { font-size: .8rem; }
.diet-list.is-compact .diet-row-actions { flex-wrap: nowrap; gap: 2px; justify-content: flex-end; }
.icon-action { width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; justify-content: center; color: var(--text-2); }
.icon-action:hover { color: var(--text-1); }
.icon-action.is-danger:hover { color: var(--danger-text); background: var(--danger-dim); }
.icon-action .icon { width: 18px; height: 18px; }

/* The "?" help buttons look small but are easy to tap: a 42px invisible hit area */
.tooltip-trigger::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; }
.diet-list.is-compact .diet-estimate { display: none; } /* the page already says "per 100 g" */
.diet-list.is-compact .icon-action { border-color: transparent; background: none; }
.diet-list.is-compact .icon-action:hover { background: var(--surface-3); }
.diet-list.is-compact .icon-action.is-danger:hover { background: var(--danger-dim); }

/* ── Pace slider (Edit lift) ─────────────────────────────────── */
.pace-value { margin: var(--sp-2) 0 2px; color: var(--text-2); font-size: .9rem; }
.pace-value strong { color: var(--text-1); font-size: 1.35rem; font-weight: 750; margin-right: 2px; }
.pace-range { display: block; width: 100%; height: 32px; margin: 0; accent-color: var(--brand); cursor: pointer; touch-action: pan-y; }
.pace-ends { display: flex; justify-content: space-between; gap: var(--sp-3); color: var(--text-3); font-size: .74rem; }

/* ── Rest timer (floats on top of every page) ────────────────── */
.rest-timer {
  position: fixed; z-index: 260; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top) + 12px);
  width: min(calc(100vw - 24px), 440px);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 8px 8px 8px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border));
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: rest-in .2s ease-out;
}
@keyframes rest-in { from { opacity: 0; transform: translate(-50%, -8px); } }
@media (max-width: 1024px) { .app-shell .rest-timer { top: calc(56px + env(safe-area-inset-top) + 8px); } }
.rest-timer-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rest-ring { width: 40px; height: 40px; flex-shrink: 0; transform: rotate(-90deg); }
.rest-ring circle { fill: none; stroke-width: 3.5; }
.rest-ring-bg { stroke: var(--surface-4); }
.rest-ring-fg { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 97.39; transition: stroke-dashoffset .25s linear; }
.rest-timer-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.rest-timer-label { color: var(--text-2); font-size: .72rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rest-timer-time { color: var(--text-1); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.rest-timer-actions { display: flex; gap: 4px; flex-shrink: 0; }
.rest-btn { min-width: 44px; height: 38px; padding: 0 10px; border: 1px solid var(--border-mid); border-radius: 999px; background: var(--surface-3); color: var(--text-1); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.rest-btn:hover { border-color: var(--brand); }
.rest-skip { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.rest-timer.is-done { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 18%, var(--surface-2)); }
.rest-timer.is-done .rest-timer-time { color: var(--brand); }
.rest-timer.is-done [data-rest-add] { display: none; }
.rest-timer.is-done .rest-skip { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .rest-timer { animation: none; } .rest-ring-fg { transition: none; } }
/* Solid, so nothing shows through; in Focus mode it covers the header row while you rest */
.rest-timer { background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.rest-timer.is-done { background: color-mix(in srgb, var(--brand) 18%, var(--surface-2)); }
.focus-body .rest-timer { top: calc(env(safe-area-inset-top) + 6px); width: calc(100vw - 16px); max-width: 560px; }

/* ── Coaching (working in a client's account) ─────────────────── */
.coach-banner { display: flex; align-items: center; gap: 10px; min-width: 0; }
.coach-banner form { margin: 0; flex-shrink: 0; }
.coach-banner-icon { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--brand); color: var(--on-brand); }
.coach-banner-icon .icon { width: 18px; height: 18px; }
.coach-banner-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.coach-banner-kicker { color: var(--brand); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coach-banner-name { color: var(--text-1); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-exit .icon { width: 15px; height: 15px; }
.coach-banner-side { padding: 10px; border-radius: var(--r-md); background: var(--brand-dim); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.coach-banner-side { flex-wrap: wrap; }
.coach-banner-side form, .coach-banner-side .coach-exit { width: 100%; }
.coach-banner-top { flex: 1; padding: 0 2px; }
.coach-banner-top .coach-banner-icon { width: 30px; height: 30px; }
.coach-banner-top .coach-exit { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 1024px) {
  .tabbar-coach { border-top-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
}
@media (max-width: 600px) {
  body.coach-mode .topbar { justify-content: flex-start; gap: var(--sp-2); }
  body.coach-mode .topbar-brand,
  body.coach-mode .topbar-actions { flex: 0 0 auto; }
  body.coach-mode .topbar-actions { gap: 2px; }
  body.coach-mode .coach-banner-top { flex: 1 1 0; min-width: 0; gap: 6px; }
  body.coach-mode .coach-banner-top form { flex: 0 0 auto; }
  body.coach-mode .coach-banner-top .coach-exit { min-height: 36px; padding-inline: 8px; }
}
@media (max-width: 360px) {
  body.coach-mode .coach-banner-top .coach-banner-kicker { display: none; }
}
/* Coaching page */
.coach-page { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 640px; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.segmented-item { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 10px; color: var(--text-2); font-size: .9rem; font-weight: 700; }
.segmented-item:hover { color: var(--text-1); }
.segmented-item.active { background: var(--surface-1); color: var(--text-1); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.segmented-count { min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: .72rem; line-height: 1.3rem; text-align: center; }
.coach-intro { margin: 0; color: var(--text-2); font-size: .9rem; }
.coach-card { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface-1); border: 1px solid var(--border); }
.coach-card.has-coach { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.coach-card-head { display: flex; gap: var(--sp-3); align-items: flex-start; }
.coach-card-icon { width: 42px; height: 42px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--brand-dim); color: var(--brand); }
.coach-card-icon .icon { width: 21px; height: 21px; }
.coach-card-title h2 { margin: 0; font-size: 1.05rem; font-weight: 750; color: var(--text-1); }
.coach-card-title p { margin: 2px 0 0; color: var(--text-3); font-size: .85rem; line-height: 1.4; }
.coach-choose { align-self: stretch; justify-content: center; }
.coach-person { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); }
.coach-person-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.coach-person-name { color: var(--text-1); font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-person-meta { color: var(--text-3); font-size: .8rem; }
.client-card { gap: var(--sp-3); }
.client-card .coach-person { background: none; padding: 0; }
.client-open { display: grid; gap: var(--sp-2); }
.client-card form { margin: 0; }
.client-open-btn { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: .8rem var(--sp-4); border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); background: var(--brand-dim); color: var(--text-1); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.client-open-btn:hover { border-color: var(--brand); }
.client-open-btn > .icon:first-child { width: 20px; height: 20px; color: var(--brand); flex-shrink: 0; }
.client-open-btn > .icon:last-child { width: 16px; height: 16px; margin-left: auto; color: var(--text-3); }
.client-open-btn span { display: flex; flex-direction: column; line-height: 1.25; }
.client-open-btn small { color: var(--text-3); font-size: .76rem; font-weight: 600; }
.client-open-btn.is-open { background: var(--surface-2); }
.client-more summary { color: var(--text-3); font-size: .82rem; cursor: pointer; list-style: none; width: max-content; }
.client-more summary::-webkit-details-marker { display: none; }
.client-more[open] summary { margin-bottom: var(--sp-2); }
.client-more form { margin: 0; }
.text-danger { color: var(--danger-text) !important; }
.coach-how { padding: var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--border); color: var(--text-2); font-size: .88rem; }
.coach-how summary { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-weight: 700; color: var(--text-1); list-style: none; }
.coach-how summary::-webkit-details-marker { display: none; }
.coach-how summary .icon { width: 18px; height: 18px; color: var(--text-3); }
.coach-how ul { margin: var(--sp-3) 0 0; padding-left: 1.2rem; display: grid; gap: 6px; }

/* Pick lists: big tappable rows (choose a coach, what a coach sees) */
.pick-list { display: grid; gap: var(--sp-2); }
.pick-list form { margin: 0; }
.pick-option { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 60px; padding: .6rem var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-1); color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.pick-option:hover:not(:disabled) { border-color: var(--brand); }
.pick-option.is-current { cursor: default; border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: var(--brand-dim); }
.pick-option-name { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-option-trail { color: var(--brand); font-size: .85rem; font-weight: 700; }
.pick-option.is-current .pick-option-trail { color: var(--text-2); }
.coach-remove { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
a.coach-person { color: inherit; }
a.coach-person:hover { background: var(--surface-3); }
.coach-person > .icon:last-child { width: 18px; height: 18px; color: var(--brand); }
.coach-link { display: flex; align-items: center; gap: var(--sp-3); padding: .7rem var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--border); color: var(--text-1); }
.coach-link:hover { border-color: var(--border-mid); background: var(--surface-2); }
.coach-link > .icon:first-child { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; }
.coach-link > .icon:last-child { width: 16px; height: 16px; margin-left: auto; color: var(--text-3); flex-shrink: 0; }
.coach-link span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.coach-link strong { font-size: .92rem; }
.coach-link small { color: var(--text-3); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-page { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 640px; }
.social-search { display: flex; gap: var(--sp-2); }
.social-search .input { flex: 1; min-width: 0; }
.social-hint { margin: 0; color: var(--text-3); font-size: .85rem; }
.social-blocked summary { cursor: pointer; font-weight: 700; color: var(--text-2); }
/* On/off switch from a checkbox */
.switch { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: var(--surface-4); position: relative; cursor: pointer; transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch:checked { background: var(--brand); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Friends list: who coaches whom */
.coach-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 0 .45rem; border-radius: 999px; background: var(--brand-dim); color: var(--brand); font-size: .68rem; font-weight: 750; vertical-align: 2px; white-space: nowrap; }
.coach-share-form { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.coach-share-option { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); cursor: pointer; min-height: 44px; max-width: 420px; }

/* Account pages */
.account-wrap { max-width:720px;display:flex;flex-direction:column;gap:var(--sp-5); }
.account-id { display:flex;align-items:center;gap:var(--sp-4); }
.account-avatar { width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;color:var(--brand);background:var(--brand-dim);border:1px solid var(--brand); }
.account-form { display:grid;gap:var(--sp-3); }
.account-form .input-group { max-width:420px; }
/* Action buttons sit on the right of each card */
.card-actions { display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-4); }
.mode-options { display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:var(--sp-3); }
.mode-option input, .accent-option input { position:absolute;opacity:0;pointer-events:none; }
.mode-option { position:relative;cursor:pointer; }
.mode-card { display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);border:2px solid var(--border-mid);border-radius:var(--r-md); }
.mode-option input:checked + .mode-card { border-color:var(--brand); }
.mode-option input:focus-visible + .mode-card { outline:2px solid var(--brand);outline-offset:2px; }
.mode-preview { height:56px;border-radius:var(--r-sm);display:flex;gap:6px;padding:8px;border:1px solid rgba(127,127,127,.25); }
.mode-preview span { border-radius:4px; }
.mode-preview { background:var(--p-bg); }
.mode-preview span:first-child { width:28%;background:var(--p-s1); }
.mode-preview span:last-child { flex:1;background:var(--p-s2); }
.mode-preview.is-light span { box-shadow:0 1px 3px rgba(15,23,42,.1); }
.mode-name { font-size:.85rem;font-weight:600;color:var(--text-1); }
.accent-options { display:grid;grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));gap:var(--sp-2); }
.accent-option { position:relative;cursor:pointer; }
.accent-card { display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--sp-3) var(--sp-2);border:2px solid var(--border);border-radius:var(--r-md);font-size:.78rem;color:var(--text-2); }
.accent-swatch { width:30px;height:30px;border-radius:50%;background:var(--sw-dark);box-shadow:0 0 14px color-mix(in srgb, var(--sw-dark) 55%, transparent); }
html[data-tone="light"] .accent-swatch { background:var(--sw-light);box-shadow:none; }
.accent-option input:checked + .accent-card { border-color:var(--brand);color:var(--text-1);background:var(--brand-dim); }
.accent-option input:focus-visible + .accent-card { outline:2px solid var(--brand);outline-offset:2px; }
.theme-actions { display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-4); }
.starter-list { display:flex;flex-direction:column; }
.starter-row { display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--border); }
.starter-row:first-child { border-top:0;padding-top:0; }
.starter-row .btn { min-width:4.5rem; }
.starter-row > div { flex:1; }
.starter-row form { flex-shrink:0; }
.starter-name { font-size:.88rem;font-weight:600;color:var(--text-1); }
.starter-hint { font-size:.75rem;color:var(--text-3);margin-top:2px; }
.theme-preview-note { font-size:.75rem;color:var(--text-3); }
.font-size-head { display:flex;align-items:baseline;justify-content:space-between;margin:var(--sp-5) 0 var(--sp-2); }
.font-size-value { font-size:.85rem;font-weight:600;color:var(--brand); }
.font-size-row { display:flex;align-items:center;gap:var(--sp-3); }
.font-size-a { color:var(--text-2);font-weight:600;line-height:1;flex-shrink:0;width:1.4rem;text-align:center; }
.font-size-a.small { font-size:.8rem; }
.font-size-a.big { font-size:1.35rem; }
.font-size-range { flex:1;min-width:0;accent-color:var(--brand);height:28px;cursor:pointer; }
.font-size-ticks { display:flex;justify-content:space-between;margin:2px calc(1.4rem + var(--sp-3) + 8px) 0; }
.font-size-ticks span { width:2px;height:6px;border-radius:1px;background:var(--border-mid); }
.account-hub .row-item { min-height: 60px; }
.account-hub .row-item.is-danger .row-title { color: var(--danger-text); }
.account-hub .row-icon.is-danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger-text); }

.coach-how summary { min-height: 44px; margin: -12px 0; }

/* More: grouped lists */
.more-group { max-width: 720px; padding: var(--sp-2) var(--sp-4); }
.more-group .row-item { min-height: 58px; }
.more-version { max-width: 720px; margin: var(--sp-6) 0 var(--sp-2); text-align: center; font-size: .78rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.more-install { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.more-install[hidden] { display: none; }

/* Lists: open an item to change, copy, share or delete it */
.item-open .icon { width: 15px; height: 15px; margin-left: 2px; margin-right: -4px; }
.item-title-link { color: inherit; }
.item-title-link:hover { color: var(--brand); }
.item-row { color: inherit; text-decoration: none; }
.item-row:hover .diet-row-title { color: var(--brand); }
.item-row-chevron { display: inline-flex; color: var(--text-3); flex-shrink: 0; }
.item-row-chevron .icon { width: 16px; height: 16px; }

/* Rest timer outside Focus mode: a small pill in the centre of the top bar, so it covers nothing */
.rest-timer {
  width: auto; max-width: calc(100vw - 200px);
  top: calc(env(safe-area-inset-top) + 9px);
  gap: 6px; padding: 3px 3px 3px 5px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 1024px) { .app-shell .rest-timer { top: calc(env(safe-area-inset-top) + 9px); } }
@media (min-width: 1025px) { .app-shell .rest-timer { left: calc(50% + var(--sidebar-w) / 2); } }
.rest-timer-main { gap: 6px; }
.rest-ring { width: 30px; height: 30px; }
.rest-timer-label { display: none; }
.rest-timer-time { font-size: 1.02rem; min-width: 2.4em; }
.rest-timer-actions { gap: 3px; }
.rest-btn { min-width: 36px; height: 32px; padding: 0 9px; font-size: .76rem; }
.rest-btn[data-rest-add="-15"] { display: none; }

/* New exercise: inputs come first in the page; on wide screens the plan takes the left, wider column */
@media (min-width: 901px) { .planner-layout > #results { order: -1; } }
#results, #calc-result { scroll-margin-top: calc(env(safe-area-inset-top) + 64px); }
@media (min-width: 1025px) { #results { scroll-margin-top: var(--sp-4); } }
a.rest-timer { color: inherit; text-decoration: none; padding: 4px 14px 4px 5px; cursor: pointer; }
a.rest-timer:hover { border-color: var(--brand); }

/* Routine / meal plan: skip today, or make another day today */
.day-move { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.day-move .text-3 { font-size: .82rem; }

/* Note kept with a logged workout */
.workout-note { margin: var(--sp-3) 0; }
.workout-note summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--text-2); font-size: .86rem; font-weight: 650; cursor: pointer; list-style: none; }
.workout-note summary::-webkit-details-marker { display: none; }
.workout-note summary .icon { width: 15px; height: 15px; }
.workout-note summary .text-3 { font-weight: 500; }
.workout-note[open] summary { margin-bottom: var(--sp-2); }
.workout-note-input { min-height: 4.2rem; resize: vertical; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wk-card-link { color: inherit; display: flex; align-items: center; gap: var(--sp-2); }
.wk-card-link > .icon { width: 14px; height: 14px; margin-left: auto; color: var(--text-3); }
.wk-card-link:hover .wk-num { color: var(--brand); }
.wk-note { display: flex; gap: 6px; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); color: var(--text-2); font-size: .78rem; line-height: 1.35; }
.wk-note .icon { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; color: var(--text-3); }
.wk-note span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; }

/* Search inside Friends lists */
.panel > .list-search { margin-bottom: var(--sp-3); }
.client-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.client-list > [hidden], .row-list > [hidden], .pick-list > [hidden] { display: none !important; }

/* Chats button in the top bar, with the unread count */
.topbar-chat { position: relative; }
.topbar-chat.is-active { color: var(--brand); }
.topbar-badge { position: absolute; top: 2px; right: 0; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: .62rem; font-weight: 800; line-height: 1; border: 2px solid var(--surface-1); }
/* Phones: the rest pill is part of the top bar, centred in the space between the logo and the
   buttons; it shrinks before it would overlap anything */
.topbar-rest { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.topbar-rest:empty { display: none; pointer-events: none; }
body:not(.has-rest-timer) .topbar-rest { display: none; }
body.coach-mode .rest-timer,
body.coach-mode .topbar-rest { display: none !important; }
.topbar .topbar-rest .rest-timer { position: static; transform: none; left: auto; top: auto; max-width: 100%; min-width: 0; animation: rest-in-bar .2s ease-out; }
.topbar .topbar-rest .rest-timer-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes rest-in-bar { from { opacity: 0; transform: translateY(-6px); } }

/* Rest timer settings */
.timer-steps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 420px) { .timer-steps { grid-template-columns: 1fr; } }
.input-suffix { display: flex; align-items: center; gap: var(--sp-2); }
.input-suffix .input { flex: 1; min-width: 0; }
.input-suffix span { color: var(--text-3); font-size: .85rem; }

/* Warm-up sets (Session page): same columns as the set rows, in a dashed box; never saved */
.warmup-add { margin: var(--sp-2) 0; }
.warmup-add[hidden] { display: none; }
.workout-set-row.warmup-row {
  position: relative;
  margin: 0 calc(-1 * var(--sp-3)) var(--sp-2);
  padding: calc(var(--sp-3) - 1px); /* minus the border, so the columns line up with the set rows */
  border: 1px dashed color-mix(in srgb, var(--warning) 45%, var(--border-mid));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--warning) 5%, transparent);
}
.warmup-row .workout-set-label { color: var(--warning); white-space: normal; line-height: 1.15; font-size: .88rem; }
.warmup-row .workout-set-label small { display: block; color: var(--text-3); font-size: .72rem; font-weight: 650; }
.warmup-row.is-done { opacity: .6; }
/* Remove: a small × in the box's corner, so Done lines up with "Set done" */
.workout-set-action .btn.warmup-remove { position: absolute; top: 4px; right: 4px; min-width: 0; width: 26px; height: 26px; border-color: transparent; padding: 0; font-size: 1rem; line-height: 1; color: var(--text-3); }
.workout-set-action .btn.warmup-remove:hover { color: var(--text-1); }
.warmup-done-mark { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-size: .85rem; font-weight: 650; }
.warmup-done-mark .icon { width: 15px; height: 15px; }
/* Focus mode: a warm-up step looks lighter, so it's clearly not a logged set */
.focus-main.is-warmup .focus-set { color: var(--warning); }

/* New exercise: what are you tracking? */
.kind-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); border: 0; margin: 0; padding: 0; min-width: 0; }
.kind-picker legend { margin-bottom: var(--sp-2); padding: 0; }
.kind-option { position: relative; cursor: pointer; }
.kind-option input { position: absolute; opacity: 0; pointer-events: none; }
.kind-option span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: var(--sp-3); border: 2px solid var(--border-mid); border-radius: var(--r-md); background: var(--surface-1); }
.kind-option strong { color: var(--text-1); font-size: .92rem; }
.kind-option small { color: var(--text-3); font-size: .74rem; line-height: 1.3; }
.kind-option input:checked + span { border-color: var(--brand); background: var(--brand-dim); }
.kind-option input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 420px) { .kind-picker { grid-template-columns: 1fr; } .kind-option span { flex-direction: row; align-items: baseline; gap: var(--sp-2); } }
.time-input { font-variant-numeric: tabular-nums; }

/* Session page: time-based set rows */
.workout-set-row.is-timed .time-input { font-variant-numeric: tabular-nums; }

/* Focus mode: stopwatch for time-based exercises */
.sw-target { margin-top: var(--sp-2); color: var(--text-2); font-size: .95rem; font-weight: 650; }
.sw { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-top: clamp(8px, 3vh, var(--sp-6)); }
.sw-display { font-size: clamp(3.2rem, min(20vw, 13vh), 6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--text-1); font-variant-numeric: tabular-nums; }
.sw-display.is-running { color: var(--brand); }
.sw-status { min-height: 1.3em; color: var(--text-3); font-size: .9rem; font-weight: 650; }
.sw-status.is-good { color: var(--brand); }
.sw-status.is-behind { color: var(--warning); }
.sw-controls { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); }
.sw-toggle { min-width: 9rem; min-height: 52px; border-radius: 16px; font-size: 1.05rem; }
.sw-reset { min-width: 52px; min-height: 52px; padding: 0; border-radius: 16px; }
.sw-fields { display: flex; justify-content: center; gap: var(--sp-3); margin-top: clamp(8px, 2.5vh, var(--sp-5)); }
.sw-field { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sw-field span { color: var(--text-3); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.sw-field input { width: 7rem; background: transparent; border: none; border-bottom: 2px solid var(--border-mid); color: var(--text-1); font-size: 1.6rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.sw-field input:focus { border-color: var(--brand); outline: none; }

/* ── Diet tracker: a week of intake as bars, with the daily average ──────────── */
.tracker-metrics { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tracker-metrics .chip { padding: .38rem .85rem; font-size: .82rem; text-decoration: none; }
.tracker-metrics .chip.active { background: var(--brand-dim); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.tracker-head { margin-top: var(--sp-5); }
.tracker-kicker { color: var(--text-3); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tracker-avg { margin-top: 2px; color: var(--text-1); font-size: clamp(1.9rem, 7vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.tracker-avg span { color: var(--text-2); font-size: 1rem; font-weight: 650; letter-spacing: 0; }
.tracker-sub { margin-top: 4px; color: var(--text-2); font-size: .86rem; }
.tracker-change.is-up { color: var(--brand); }
.tracker-change.is-down { color: var(--warning); }
.tracker-week { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-4); color: var(--text-1); font-weight: 650; font-size: .92rem; }
.tracker-chart { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); height: 170px; margin: calc(var(--sp-3) + 1rem) 0 26px; }
.tracker-avgline { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--text-3); pointer-events: none; z-index: 1; }
.tracker-avgline span { position: absolute; right: 0; top: -1.15rem; color: var(--text-3); font-size: .7rem; font-weight: 650; }
.tracker-bar { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; text-decoration: none; border-radius: 10px; }
.tracker-col { position: relative; flex: 1; width: min(100%, 34px); display: flex; align-items: flex-end; }
.tracker-fill { display: block; width: 100%; min-height: 3px; border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--brand) 38%, var(--surface-3)); transition: height .25s ease; }
.tracker-bar.is-selected .tracker-fill { background: var(--brand); }
.tracker-bar.is-future .tracker-fill { background: var(--surface-3); min-height: 3px; height: 3px !important; }
.tracker-day { position: absolute; bottom: -22px; color: var(--text-3); font-size: .78rem; font-weight: 700; }
.tracker-bar.is-today .tracker-day { color: var(--text-1); }
.tracker-bar.is-selected .tracker-day { color: var(--brand); }
.tracker-bar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tracker-detail { margin-top: var(--sp-4); }
.tracker-selector { margin-top: var(--sp-3); }
.tracker-selector > summary { display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-1); font-size: .84rem; font-weight: 650; cursor: pointer; }
.tracker-selector[open] > summary { margin-bottom: var(--sp-2); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.tracker-selector .tracker-metrics { padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-1); }
.tracker-periods { margin-top: var(--sp-4); }
.tracker-chart-period .tracker-day { font-size: .66rem; white-space: nowrap; }
.tracker-meal .row-trail { color: var(--text-1); font-weight: 650; }
.tracker-meal.is-skipped .row-title, .tracker-meal.is-skipped .row-trail { color: var(--text-3); }
/* Several metrics at once: grouped bars, a colour each (fixed order, checked for colour blindness;
   values are always also shown as text: the legend and the day's list) */
:root { --series-calories: #3987e5; --series-protein: #d95926; --series-carbs: #199e70; --series-fat: #c98500; }
html[data-tone="light"] { --series-calories: #2a78d6; --series-protein: #eb6834; --series-carbs: #1baf7a; --series-fat: #eda100; }
.tracker-series-calories { --c: var(--series-calories); }
.tracker-series-protein { --c: var(--series-protein); }
.tracker-series-carbs { --c: var(--series-carbs); }
.tracker-series-fat { --c: var(--series-fat); }
.tracker.is-multi .tracker-col { width: 100%; max-width: 46px; gap: 2px; }
.tracker.is-multi .tracker-fill { flex: 1; min-width: 0; background: var(--c); border-radius: 4px 4px 2px 2px; }
.tracker.is-multi .tracker-bar:not(.is-selected) .tracker-fill { opacity: .5; }
.tracker.is-multi .tracker-bar.is-future .tracker-fill { background: var(--surface-3); opacity: 1; }
.tracker-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2); color: var(--text-2); font-size: .9rem; }
.tracker-key { display: inline-flex; align-items: center; gap: 6px; }
.tracker-key i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.tracker-key strong { color: var(--text-1); font-size: 1.05rem; font-weight: 750; }
.tracker-key .tracker-change { font-size: .8rem; }
.tracker.is-multi .tracker-metrics .chip.active { background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--text-1); border-color: var(--c); }
.tracker-chip-calories { --c: var(--series-calories); } .tracker-chip-protein { --c: var(--series-protein); }
.tracker-chip-carbs { --c: var(--series-carbs); } .tracker-chip-fat { --c: var(--series-fat); }

/* Pickers (lists, muscles, exercises): one height whatever the list holds, so a short list or a
   search with no results doesn't shrink it to the bottom of a phone, behind the keyboard; the
   search stays near the top and the list scrolls inside. (Stronger selectors: some pages style
   their picker themselves.) */
html .picker-dialog:has(.picker-list), html .muscle-dialog, html .exercise-picker-dialog { height: min(82vh, 720px); }
html .picker-dialog:has(.picker-list) .picker-inner, html .muscle-dialog .muscle-dialog-inner, html .exercise-picker-dialog .exercise-picker-dialog-inner { height: 100%; max-height: none; }
html .picker-list, html .muscle-dialog-list, html .exercise-picker-results { flex: 0 1 auto; min-height: 0; } /* as tall as its items, scrolling when they fill the picker; "no matches" right under the search */
@media (max-width: 620px) {
  html .picker-dialog:has(.picker-list), html .muscle-dialog, html .exercise-picker-dialog { height: 86vh; height: 86dvh; max-height: 86vh; max-height: 86dvh; }
}

/* ── Plate calculator (scripts/app/plates.js) ─────────────────────────────── */
:root { --bar-steel: #9aa1ab; }
.plate-layout { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "result" "plates"; }
.plate-layout > .plate-top { grid-area: top; } .plate-layout > .plate-result { grid-area: result; } .plate-layout > .plate-inputs { grid-area: plates; }
/* Wide screens: what you enter on the left, the answer beside it */
@media (min-width: 900px) { .plate-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "top result" "plates result"; align-items: start; } .plate-result { position: sticky; top: var(--sp-4); } }
.plate-inputs { display: flex; flex-direction: column; gap: var(--sp-4); }
.plate-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-3); }
.plate-top .input-group { margin: 0; }
.plate-have-title { font-weight: 600; font-size: .9rem; }
.plate-have-title .text-2 { font-weight: 400; font-size: .82rem; }
.plate-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.plate-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: var(--sp-2) var(--sp-3); align-items: end; }
/* A number with − / + either side */
.plate-step { display: flex; align-items: stretch; gap: 4px; }
.plate-step .input { flex: 1 1 auto; min-width: 0; text-align: center; -moz-appearance: textfield; }
.plate-step .input::-webkit-inner-spin-button, .plate-step .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.plate-step button { flex: none; width: 36px; border-radius: 9px; border: 1px solid var(--border-mid); background: var(--surface-2); color: var(--text-1); font-size: 1.1rem; font-weight: 700; line-height: 1; cursor: pointer; }
.plate-step button:active { background: var(--surface-3, var(--surface-2)); }
.plate-row .input-group { margin: 0; }
.plate-row:not(:first-child) .input-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.plate-remove { min-width: 40px; height: 40px; }
.plate-result { display: flex; flex-direction: column; gap: var(--sp-3); }
.plate-empty { color: var(--text-2); padding: var(--sp-6) 0; text-align: center; }
.plate-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3); }
.plate-total-num { font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.plate-total-off { font-size: .85rem; display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.barbell { display: flex; align-items: center; justify-content: center; height: 140px; padding: var(--sp-3) 0; overflow: hidden; }
.barbell-plates { display: flex; align-items: center; gap: 2px; height: 100%; }
.barbell-plates.is-left { justify-content: flex-end; }
.barbell-shaft { flex: 1 1 auto; min-width: 40px; max-width: 220px; height: 8px; background: var(--bar-steel); border-radius: 2px; }
.barbell-collar { width: 6px; height: 22px; background: var(--bar-steel); border-radius: 2px; flex: none; }
.barbell-end { width: 18px; height: 10px; background: var(--bar-steel); border-radius: 2px; flex: none; opacity: .8; }
/* Plates are shades of the theme's accent (inline); an edge keeps the palest visible */
.plate { display: block; flex: none; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 0 0 1px rgba(127,127,127,.35); }
.plate-side-title { font-size: .8rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.plate-side { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.plate-side li { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: 999px; font-size: .95rem; }
.plate-swatch { width: 10px; height: 18px; border-radius: 3px; display: inline-block; box-shadow: 0 0 0 1px rgba(127,127,127,.35); }
.plate-meta { font-size: .85rem; }
/* Focus mode: how to load the bar, in a popup */
/* Its own width on wide screens (a sheet on phones, like the other pickers), content filling it */
.plate-dialog .picker-inner { max-width: none; }
@media (min-width: 621px) { .plate-dialog { width: min(480px, calc(100vw - 32px)); } }
.plate-dialog-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-5); overflow-y: auto; }
.plate-dialog-label { font-weight: 700; font-size: .9rem; }
.plate-dialog-tools { display: flex; align-items: center; gap: var(--sp-2); }
.bw-fields { align-items: start; }
.plate-bar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.plate-bar-head .plate-bar-toggle { height: 26px; padding: 0 9px; font-size: .74rem; }
#plate-bar:disabled { opacity: .45; }
/* Bar on / off: a small pill with a bar drawn in it (struck through when off) */
.plate-bar-toggle { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-mid); background: var(--surface-2); color: var(--text-2); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.plate-bar-toggle[aria-pressed="true"] { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); background: var(--brand-dim); color: var(--brand); }
.plate-bar-icon { position: relative; width: 18px; height: 10px; }
.plate-bar-icon::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: currentColor; border-radius: 1px; box-shadow: -1px 0 0 1px currentColor inset; }
.plate-bar-icon::after { content: ''; position: absolute; left: 3px; right: 3px; top: 0; bottom: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.plate-bar-toggle[aria-pressed="false"] .plate-bar-icon { opacity: .55; }
.plate-bar-toggle[aria-pressed="false"] .plate-bar-icon::before { transform: rotate(-30deg); }
.plate-dialog-set + .plate-dialog-set { border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.plate-dialog .plate-total-num { font-size: 1.8rem; }
.plate-dialog .barbell { height: 110px; }
/* A bodyweight exercise's extra weight: one stack on a belt pin */
.barbell.is-belt { justify-content: center; }
.plate-dialog-foot { padding: 0 var(--sp-4) var(--sp-4); }
.plate-use { margin-top: var(--sp-1); }

/* ── Saved as you go (components/autosave.php, scripts/app/autosave.js) ─────── */
.autosave-status { font-size: .8rem; color: var(--text-3); min-height: 1.2em; display: flex; align-items: center; gap: 6px; }
.autosave-status:empty { display: none; }
.autosave-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.autosave-status[data-state="ok"] { color: var(--text-2); }
.autosave-status[data-state="ok"]::before { background: var(--brand); }
.autosave-status[data-state="busy"]::before { background: var(--brand); opacity: .5; }
.autosave-status[data-state="wait"] { color: var(--warning, #c98500); }
.autosave-status[data-state="wait"]::before { background: var(--warning, #c98500); }
.autosave-status[data-state="error"] { color: var(--danger, #e5484d); }
.autosave-status[data-state="error"]::before { background: var(--danger, #e5484d); }
/* The routine picker's "New exercise", on the left of its buttons */
.exercise-picker-create { margin-right: auto; }

/* Menu: − / + for how many sections, then a picker for each */
.menu-count { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-2); font-weight: 650; font-size: .9rem; }
.menu-count .set-count { margin: 0; }
.menu-slots { display: flex; flex-direction: column; gap: var(--sp-2); }
.menu-slot-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: var(--sp-2); }
.menu-slot-num { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-dim); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; }
.menu-slot { cursor: default; }

/* Routine and meal plan editors: less clutter. Row buttons quiet until you need them, tighter rows */
.schedule-day .icon-btn, .diet-day .icon-btn { width: 30px; height: 30px; border: 0; background: none; color: var(--text-3); font-size: .95rem; }
.schedule-day .icon-btn:hover, .diet-day .icon-btn:hover { background: var(--surface-3); color: var(--text-1); }
.schedule-day .icon-btn.danger:hover, .diet-day .icon-btn.danger:hover { color: var(--danger, #e5484d); }
.schedule-day .icon-btns, .diet-day .icon-btns { gap: 0; }
.schedule-exercise { padding: 6px 4px 6px 8px; gap: 8px; }
.schedule-days, #plan-days { display: flex; flex-direction: column; gap: var(--sp-3); }
.diet-day-head .input.day-name, .diet-day-head .input[data-k="name"] { font-weight: 700; }

/* ── Plan setup (pages/setup.php): a question per screen, tappable cards ── */
.setup-wrap { max-width: 44rem; margin: 0 auto; }
.setup-progress { height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-bottom: var(--sp-5); }
.setup-progress span { display: block; height: 100%; width: 0; background: var(--brand); transition: width .25s; }
.setup-q { font-size: 1.35rem; font-weight: 700; margin: 0 0 var(--sp-2); color: var(--text-1); }
.setup-hint { color: var(--text-2); font-size: .9rem; line-height: 1.55; margin: 0 0 var(--sp-4); }
.setup-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.setup-cards.is-swatches { grid-template-columns: repeat(3, 1fr); }
.setup-card { position: relative; cursor: pointer; }
.setup-card input { position: absolute; opacity: 0; pointer-events: none; }
.setup-card > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 6.5rem; height: 100%;
    padding: var(--sp-3); border: 1.5px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); transition: border-color .15s, background .15s; }
.setup-card:hover > span { border-color: var(--text-3); }
.setup-card input:checked + span { border-color: var(--brand); background: var(--brand-dim); }
.setup-card input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.setup-icon { display: flex; align-items: center; justify-content: center; height: 34px; color: var(--text-2); transition: color .15s; }
.setup-icon svg { width: 30px; height: 30px; }
.setup-card input:checked + span .setup-icon { color: var(--brand); }
.setup-num { font-size: 1.75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.setup-label { font-weight: 600; color: var(--text-1); font-size: .95rem; overflow-wrap: anywhere; }
.setup-sub { color: var(--text-2); font-size: .8rem; line-height: 1.35; }
.setup-swatch { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); }
.setup-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-4); }
.setup-nav { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); }
.setup-targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--sp-3); }
.setup-targets > div { padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); display: flex; flex-direction: column; }
.setup-targets strong { font-size: 1.25rem; color: var(--text-1); }
.setup-targets span { color: var(--text-2); font-size: .82rem; }
.setup-sub-h { font-size: 1rem; margin: var(--sp-5) 0 var(--sp-2); color: var(--text-1); }
.setup-week { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.setup-week li, .setup-food > div { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); }
.setup-week span, .setup-food span { color: var(--text-2); font-size: .86rem; line-height: 1.45; }
.setup-food { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-2); }
.setup-buy { color: var(--text-2); font-size: .88rem; line-height: 1.6; }
.setup-note { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-5); padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-2); font-size: .85rem; line-height: 1.5; }
.setup-note .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
@media (max-width: 520px) {
    .setup-cards { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
    .setup-card > span { min-height: 5.5rem; }
}
.setup-more { margin-top: var(--sp-3); }
.setup-card[hidden] { display: none; }
.setup-starts { display: flex; flex-direction: column; gap: 6px; }
.setup-start { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); font-size: .9rem; color: var(--text-1); }
.setup-start-in { display: flex; align-items: center; gap: 6px; flex: none; color: var(--text-2); font-size: .85rem; }
.setup-start-in .input { width: 4.6rem; padding: 6px 8px; text-align: center; }
.setup-start > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.setup-start small { color: var(--text-2); font-size: .78rem; line-height: 1.35; }
.setup-mode { width: 100%; height: 52px; }
/* Pick-several cards: a tick box in the corner */
.setup-card input[type=checkbox] + span { position: relative; }
.setup-card input[type=checkbox] + span::after { content: ''; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-mid, var(--border)); background: var(--surface-1); }
.setup-card input[type=checkbox]:checked + span::after { border-color: var(--brand); background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Swap an ingredient (meal editor): similar ones under the line */
.swap-list { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.swap-head, .swap-empty { font-size: .8rem; color: var(--text-2); padding: 2px 4px 4px; }
.swap-option { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; text-align: left; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid transparent; background: var(--surface-1); color: var(--text-1); cursor: pointer; font: inherit; }
.swap-option:hover { border-color: var(--brand); }
.swap-name { font-weight: 600; font-size: .9rem; }
.swap-meta { font-size: .78rem; color: var(--text-2); }
/* Swap an exercise on the plan setup review */
.setup-exs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.setup-ex { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-1); font-size: .84rem; }
.setup-ex-swap { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; padding: 0; }
.setup-ex-swap:hover { color: var(--brand); background: var(--brand-dim); }
.setup-ex-swap .icon { width: 14px; height: 14px; }
/* Swap on the Diet day: what you had instead of a planned meal */
.day-swap { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.day-swap .section-label { margin-top: var(--sp-2); }
.day-swap-ings { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-1); font: inherit; font-size: .84rem; cursor: pointer; }
.chip-btn:hover, .chip-btn.is-on { border-color: var(--brand); color: var(--brand); }
.stack-sm { display: flex; flex-direction: column; gap: 4px; }
.diet-had { font-size: .84rem; color: var(--text-2); margin-top: 2px; }

/* The body diagram (scripts/app/bodymap.js): muscle groups worked, lit up by how much */
.bodymap { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.bodymap svg { width: 100%; max-width: 260px; height: auto; }
.bodymap.is-sm svg { max-width: 170px; }
.bm-part { fill: var(--surface-2); stroke: var(--border-mid, var(--border)); stroke-width: .8; transition: fill .2s; }
.bm-skin { fill: var(--surface-2); opacity: .7; }
.bm-part.bm-1 { fill: color-mix(in srgb, var(--brand) 45%, var(--surface-2)); }
.bm-part.bm-2 { fill: color-mix(in srgb, var(--brand) 65%, var(--surface-2)); }
.bm-part.bm-3 { fill: var(--brand); stroke: color-mix(in srgb, var(--brand) 70%, var(--text-1)); }
.bm-heart { fill: #e5484d; stroke: none; }
.bm-label { font-size: 9px; fill: var(--text-3); font-family: inherit; }
.bm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: .8rem; }
.bm-chip { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); }
.bm-chip.bm-3 { border-color: var(--brand); color: var(--text-1); background: var(--brand-dim); }
.bm-chip.bm-2 { border-color: color-mix(in srgb, var(--brand) 60%, var(--border)); color: var(--text-1); }
.bm-caption { margin: 0; font-size: .8rem; color: var(--text-3); text-align: center; }
/* A group's name sits with its own muscles: room above it (it's the first thing in its group's box,
   which .section-heading:first-child would leave with none), a small gap to the list below */
.muscle-group-head, .muscle-group-head:first-child { margin: var(--sp-6) 0 var(--sp-2); }
[data-search-group]:first-child > .muscle-group-head { margin-top: var(--sp-2); }
/* Session: Muscles today opens the body diagram */
.session-bodymap > summary { list-style: none; cursor: pointer; }
.session-bodymap > summary::-webkit-details-marker { display: none; }
.session-bodymap-toggle { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: .78rem; color: var(--brand); }
.session-bodymap-toggle .icon { width: 14px; height: 14px; }
.session-bodymap[open] > summary { margin-bottom: var(--sp-3); }
.session-page-body .workout-session-card { padding: clamp(16px, 2.5vw, 26px); border-radius: var(--r-lg); background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 7%, var(--surface-1)), var(--surface-1) 58%); }
.session-page-body .workout-session-card .workout-next { align-items: center; gap: var(--sp-3); }
.session-page-body .workout-session-card .section-title { font-size: clamp(1.25rem, 2.5vw, 1.65rem); line-height: 1.15; }
.session-page-body .workout-session-card .stat-change { margin-top: 4px; font-size: .82rem; }
.session-page-body .workout-session-card > div:has(> .plan-progress-row) { margin-top: var(--sp-3) !important; }
.session-page-body .session-bodymap { margin-top: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface-2) 72%, transparent); }
.session-page-body .session-bodymap-summary { display: flex; align-items: center; gap: var(--sp-2); min-height: 42px; padding: 8px 12px; cursor: pointer; list-style: none; }
.session-page-body .session-bodymap-summary::-webkit-details-marker { display: none; }
.session-page-body .session-bodymap-title { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: .8rem; font-weight: 700; }
.session-page-body .session-bodymap-title .icon { width: 16px; height: 16px; color: var(--brand); }
.session-page-body .session-bodymap-count { color: var(--text-3); font-size: .75rem; }
.session-page-body .session-bodymap-toggle { margin-left: auto; }
.session-page-body .session-bodymap-content { display: grid; gap: var(--sp-3); padding: 0 12px 12px; }
.session-page-body .session-bodymap-content .workout-muscles-hit { margin: 0; }
.session-page-body .session-bodymap-content .bodymap { margin: 0 auto; }
.session-page-body .session-focus-action { display: flex; margin-top: var(--sp-3); }
.session-page-body .session-focus-action .btn { min-height: 40px; }
.session-exercise-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-2); }
.session-exercise-heading h2 { margin: 0; color: var(--text-1); font-size: 1.05rem; font-weight: 750; }
.session-exercise-heading > span { color: var(--text-3); font-size: .76rem; }
.session-day-strip { margin-top: var(--sp-3); gap: 6px; scrollbar-width: none; }
.session-day-strip::-webkit-scrollbar { display: none; }
.session-day-strip .diet-day-chip { min-width: 5.4rem; padding: 7px 9px; border-radius: var(--r-md); scroll-snap-align: start; }
.session-page-body .workout-exercises { gap: var(--sp-3); margin-top: var(--sp-2); }
.session-page-body .workout-exercise-wrap { position: relative; width: 100%; min-width: 0; }
.session-page-body .workout-exercise { border-radius: var(--r-lg); background: var(--surface-1); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.session-page-body .workout-exercise.is-active { border-color: color-mix(in srgb, var(--brand) 48%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent), var(--shadow-sm); }
.session-page-body .workout-exercise.is-upcoming { background: color-mix(in srgb, var(--surface-1) 72%, var(--surface-2)); }
.session-page-body .workout-exercise.is-queued { border-color: var(--border); box-shadow: none; }
.session-page-body .workout-exercise.is-queued::before { background: var(--surface-4); }
.session-page-body .workout-exercise-header { padding: 16px 18px 12px 20px; align-items: center; }
.session-page-body .workout-exercise-header { grid-template-columns: minmax(0,1fr) auto auto; cursor: pointer; list-style: none; }
.session-page-body .workout-exercise-header > div:first-child { padding-right: 0; }
.session-page-body .workout-exercise-header::-webkit-details-marker { display: none; }
.session-page-body .workout-exercise:not([open]) > .workout-exercise-header { border-bottom: 0; }
.session-page-body .workout-exercise-plan { min-height: 32px; margin-bottom: var(--sp-2); padding-inline: 9px; font-size: .74rem; }
.session-page-body .workout-exercise-disclosure { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--text-3); transition: transform .18s ease; }
.session-page-body .workout-exercise-disclosure .icon { width: 16px; height: 16px; }
.session-page-body .workout-exercise[open] .workout-exercise-disclosure { transform: rotate(180deg); color: var(--brand); }
.session-page-body .workout-exercise-title-row { gap: 10px; }
.session-page-body .workout-exercise-meta { margin-top: 7px; gap: 6px; font-size: .72rem; }
.session-page-body .workout-exercise-body { padding: 14px 18px 18px 20px; }
.session-page-body .workout-exercise-order { position: static; display: flex; align-items: center; gap: 2px; margin: 0; }
.session-page-body .workout-exercise-order .btn { display: grid; place-items: center; width: 31px; min-width: 31px; min-height: 32px; padding: 0; font-size: 1rem; line-height: 1; }
.session-page-body .workout-exercise-tools { margin-bottom: var(--sp-3); gap: 4px; }
.session-page-body .workout-exercise-tools .btn { min-height: 32px; padding-inline: 9px; font-size: .74rem; }
.session-page-body .session-target-plan { margin: 0 0 var(--sp-3); }
.session-page-body .session-target-plan > summary { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); font-size: .72rem; font-weight: 650; cursor: pointer; list-style: none; }
.session-page-body .session-target-plan > summary::-webkit-details-marker { display: none; }
.session-page-body .session-target-plan > summary::before { content: '+'; color: var(--brand); font-size: 1rem; line-height: 1; }
.session-page-body .session-target-plan[open] > summary::before { content: '−'; }
.session-page-body .session-target-plan .workout-targets { margin: var(--sp-2) 0 0; }
.session-page-body .session-target-plan .workout-targets-label { display: none; }
.session-page-body .workout-targets[aria-label="Today's target sets"] { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.session-page-body .workout-targets[aria-label="Today's target sets"]::-webkit-scrollbar { display: none; }
.session-page-body .workout-targets-label { flex: 0 0 auto; }
.session-page-body .workout-set-row { border-color: color-mix(in srgb, var(--border) 70%, transparent); }
.session-page-body .workout-set-field input { min-height: 44px; border-radius: var(--r-sm); }
.session-page-body .workout-set-action .btn { min-height: 42px; }
@media (max-width: 760px) {
  .session-page-body .workout-session-card .workout-next { grid-template-columns: minmax(0,1fr) auto; }
  .session-page-body .workout-exercise-header { padding: 12px 12px 10px 16px; }
  .session-page-body .workout-exercise-body { padding: 12px 12px 14px 16px; }
  .session-page-body .workout-set-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .session-page-body .workout-exercise-header { grid-template-columns: minmax(0,1fr) auto auto; }
  .session-page-body .workout-exercise-plan { padding: 6px 8px; font-size: .7rem; }
  .session-page-body .workout-exercise-meta { gap: 4px; }
  .session-page-body .workout-set-orm { display: none; }
  .session-exercise-heading { margin-top: var(--sp-4); }
}
.setup-bodymap { margin-top: var(--sp-4); }

.setup-shuffle { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); font-size: .82rem; }

/* A meal's portion in a meal plan (× its recipe) */
.diet-slot-portion { grid-column: 2 / -1; display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-3); }
.diet-slot-portion .input { width: 5rem; padding: 4px 8px; font-size: .85rem; }
@media (max-width: 600px) { .diet-slot-portion { grid-column: 1 / -1; } }
.diet-portion { font-size: .8rem; font-weight: 600; color: var(--brand); white-space: nowrap; }

/* ── Grocery list / Meal prep ────────────────────────────────── */
.ahead-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); padding: var(--sp-4); }
.ahead-form .input-group { flex: 0 1 11rem; margin: 0; }
.ahead-days { flex-basis: 100%; font-size: .82rem; color: var(--text-2); }
.grocery { margin-top: var(--sp-4); padding: var(--sp-4); }
.grocery-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.grocery-list { list-style: none; margin: 0; padding: 0; }
.grocery-list li + li { border-top: 1px solid var(--border); }
.grocery-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-1); min-height: 44px; cursor: pointer; }
.grocery-item input { width: 1.2rem; height: 1.2rem; accent-color: var(--brand); flex-shrink: 0; margin: 0; }
.grocery-name { flex: 1; min-width: 0; color: var(--text-1); font-weight: 500; overflow-wrap: anywhere; }
.grocery-amount { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.grocery-item input:checked ~ .grocery-name, .grocery-item input:checked ~ .grocery-amount { color: var(--text-3); text-decoration: line-through; }
.prep-meal .diet-meal-index.prep-count { width: auto; min-width: 2.4rem; padding: 0 var(--sp-2); flex-basis: auto; border-radius: 999px; background: var(--brand-dim); color: var(--brand); font-weight: 700; }
.diet-header-actions { gap: var(--sp-2); }

/* ── Exercise swap (routine editor, Session) ─────────────────── */
.schedule-exercise { flex-wrap: wrap; }
.schedule-exercise .ex-swap-list { flex-basis: 100%; margin-top: 2px; }
.icon-btn[data-ex-swap] .icon { width: 1rem; height: 1rem; }

/* ── Setup: text size step ───────────────────────────────────── */
.setup-cards.is-sizes { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.setup-font-sample { display: flex; align-items: flex-end; justify-content: center; height: 44px; font-weight: 700; line-height: 1; color: var(--text-1); }

/* ── Search ──────────────────────────────────────────────────── */
.search-box { position: relative; max-width: 900px; }
.search-box .search-box-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 1.15rem; height: 1.15rem; color: var(--text-3); pointer-events: none; }
.search-box .input { padding-left: 2.6rem; height: 48px; font-size: 1rem; }
.search-results { max-width: 900px; margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 4px; }
.search-results .section-label { margin: var(--sp-3) 0 var(--sp-1); }
.search-result { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); min-height: 52px; border-radius: var(--r-md); border: 1px solid transparent; background: var(--surface-1); color: var(--text-1); text-decoration: none; }
.search-result:hover, .search-result.is-on { border-color: var(--brand); }
.search-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); }
.search-icon .icon { width: 1.05rem; height: 1.05rem; }
.search-text { display: flex; flex-direction: column; min-width: 0; }
.search-title { font-weight: 600; overflow-wrap: anywhere; }
.search-meta { font-size: .78rem; color: var(--text-3); }
.search-hint { color: var(--text-2); font-size: .9rem; line-height: 1.55; padding: var(--sp-2) 0; }
.sidebar-kbd { margin-left: auto; font: inherit; font-size: .72rem; color: var(--text-3); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }

/* ── Folding days (routine and meal plan editors) ────────────── */
.days-tools { display: flex; justify-content: flex-end; max-width: 900px; margin-bottom: var(--sp-2); }
.diet-day-head { flex-wrap: wrap; }
.day-fold .icon { width: 1rem; height: 1rem; transition: transform .15s; }
.diet-day.is-folded .day-fold .icon { transform: rotate(-90deg); }
.diet-day.is-folded > .diet-day-body, .diet-day.is-folded > .diet-day-foot, .diet-day.is-folded > [data-slots] { display: none; }
.day-summary { display: none; }
.diet-day.is-folded .day-summary { display: block; flex-basis: 100%; padding-left: 2.6rem; font-size: .8rem; color: var(--text-3); }

/* ── Landing: everything in Strenla ──────────────────────────── */
.landing-feature-list { margin: 0; padding-left: 1.1rem; display: grid; gap: 6px; color: var(--text-2); line-height: 1.55; }
.landing-feature-list strong { color: var(--text-1); }
.landing-faq summary { cursor: pointer; }

/* Public feature directory: browsable categories, compact cards and complete crawlable descriptions. */
.directory-hero, .release-hero {
  position: relative; overflow: hidden; padding: clamp(28px, 5vw, 58px) clamp(20px, 5vw, 56px);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  border-radius: var(--r-xl);
  background: radial-gradient(ellipse at 85% 5%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 42%), linear-gradient(135deg, var(--surface-2), var(--surface-1));
}
.directory-hero { max-width: 1120px; margin: var(--sp-8) auto var(--sp-8); }
.directory-back { display: inline-flex; color: var(--text-2); font-size: .84rem; text-decoration: none; margin-bottom: var(--sp-8); }
.directory-back:hover, .directory-secondary-link:hover, .feature-overview-link:hover { color: var(--brand); }
.directory-eyebrow { display: block; color: var(--brand); font-size: .72rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.directory-hero h1, .release-hero h1 { max-width: 780px; margin: var(--sp-3) 0; color: var(--text-1); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.08; letter-spacing: -.045em; }
.directory-hero > p, .release-hero > p { max-width: 680px; color: var(--text-2); font-size: 1rem; line-height: 1.65; }
.directory-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); }
.directory-secondary-link, .feature-overview-link, .release-back-link { color: var(--text-1); font-size: .88rem; font-weight: 650; text-decoration: none; }
.directory-content, .release-content { width: 100%; max-width: 1120px; box-sizing: border-box; margin: 0 auto; padding: 0 clamp(16px, 3vw, 28px) var(--sp-12); }
.directory-jump { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-5); }
.directory-jump a { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1); color: var(--text-2); font-size: .78rem; text-decoration: none; }
.directory-jump a:hover { color: var(--text-1); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.directory-jump a span, .feature-category-count, .release-series-count { color: var(--text-3); font-size: .7rem; }
.feature-categories { display: grid; gap: var(--sp-3); }
.feature-category, .guide-directory { scroll-margin-top: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); overflow: hidden; }
.feature-category[open] { border-color: color-mix(in srgb, var(--brand) 28%, var(--border)); }
.feature-category > summary, .guide-directory > summary { display: flex; align-items: center; gap: var(--sp-4); min-height: 78px; padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none; }
.feature-category > summary::-webkit-details-marker, .guide-directory > summary::-webkit-details-marker { display: none; }
.feature-category-copy { display: grid; gap: 4px; flex: 1; }
.feature-category-title { color: var(--text-1); font-size: 1rem; font-weight: 700; }
.feature-category-desc { color: var(--text-2); font-size: .82rem; line-height: 1.5; }
.feature-category-toggle { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid var(--border-mid); border-radius: 50%; color: var(--brand); font-size: 1.2rem; transition: transform .18s ease; }
.feature-category[open] .feature-category-toggle, .guide-directory[open] > summary .feature-category-toggle { transform: rotate(45deg); }
.feature-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-4); }
.feature-card-public { min-width: 0; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.feature-card-public h3 { margin: 0; color: var(--text-1); font-size: .91rem; line-height: 1.4; }
.feature-card-public p { margin: var(--sp-2) 0 0; color: var(--text-2); font-size: .8rem; line-height: 1.58; }
.feature-card-public > a { display: inline-block; margin-top: var(--sp-3); color: var(--brand); font-size: .76rem; font-weight: 650; text-decoration: none; }
.feature-card-public > a:hover { text-decoration: underline; }
.guide-directory { margin-top: var(--sp-5); }
.guide-directory > summary { justify-content: space-between; }
.guide-directory > summary > span:first-child { display: grid; gap: 3px; }
.guide-directory > summary strong { color: var(--text-1); font-size: .96rem; }
.guide-directory > summary small { color: var(--text-3); font-size: .78rem; }
.guide-directory-group { padding: 0 var(--sp-5) var(--sp-4); }
.guide-directory-group h2 { margin: var(--sp-3) 0; color: var(--text-2); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.guide-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.guide-link-grid a { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); text-decoration: none; }
.guide-link-grid a:hover { background: var(--surface-3); }
.guide-link-grid strong { color: var(--text-1); font-size: .79rem; }
.guide-link-grid span { color: var(--text-3); font-size: .73rem; line-height: 1.4; }
.directory-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6); margin-top: var(--sp-8); padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); }
.directory-footer h2 { margin: var(--sp-2) 0; color: var(--text-1); font-size: 1.35rem; }
.directory-footer p { max-width: 620px; margin: 0; color: var(--text-2); font-size: .83rem; line-height: 1.55; }
.directory-footer .directory-actions { justify-content: flex-end; min-width: 245px; margin: 0; }

/* Compact overview cards on the public landing page. */
.feature-overview-head { display: flex; justify-content: space-between; align-items: end; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.feature-overview-head .section-title { margin: var(--sp-2) 0 0; }
.feature-overview-link { flex: 0 0 auto; color: var(--brand); }
.feature-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.feature-overview-card { display: flex; flex-direction: column; min-height: 166px; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); text-decoration: none; transition: transform .18s ease, border-color .18s ease; }
.feature-overview-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 38%, var(--border)); }
.feature-overview-count { color: var(--brand); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.feature-overview-card h3 { margin: var(--sp-2) 0; color: var(--text-1); font-size: .96rem; }
.feature-overview-card p { margin: 0; color: var(--text-2); font-size: .78rem; line-height: 1.5; }
.feature-overview-more { margin-top: auto; padding-top: var(--sp-3); color: var(--text-3); font-size: .73rem; }

/* Release history: one timeline, newest first, every release's features on the page (pages/whats-new.php). */
.release-hero { max-width: 1120px; margin: var(--sp-8) auto var(--sp-6); }
.release-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.release-content { max-width: 880px; }
.release-breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin: 0 0 var(--sp-5); color: var(--text-3); font-size: .77rem; }
.release-breadcrumbs a { color: var(--text-2); text-decoration: none; }
.release-breadcrumbs a:hover { color: var(--brand); }
.release-version-pill { display: inline-flex; width: fit-content; padding: 4px 9px; border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--brand) 9%, transparent); color: var(--brand); font-size: .7rem; font-weight: 750; letter-spacing: .03em; text-decoration: none; }
a.release-version-pill:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.rel-latest { display: flex; align-items: center; gap: var(--sp-3); max-width: 560px; margin-top: var(--sp-5); padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border)); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface-1) 80%, transparent); color: var(--text-1); text-decoration: none; }
.rel-latest:hover { border-color: var(--brand); }
.rel-latest-tag { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.rel-latest-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.rel-latest-copy strong { font-size: .86rem; line-height: 1.35; }
.rel-latest-copy span { color: var(--text-3); font-size: .74rem; }
.rel-filter, .feat-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: var(--sp-2); margin: 0 calc(-1 * var(--sp-2)) var(--sp-5); padding: var(--sp-2); overflow-x: auto; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); scrollbar-width: none; }
.rel-filter::-webkit-scrollbar, .feat-nav::-webkit-scrollbar { display: none; }
.rel-filter a, .feat-nav a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1); color: var(--text-2); font-size: .8rem; font-weight: 600; text-decoration: none; }
.rel-filter a span, .feat-nav a span { color: var(--text-3); font-size: .7rem; font-weight: 500; }
.rel-filter a:hover, .feat-nav a:hover { color: var(--text-1); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.rel-filter a[aria-current], .feat-nav a.is-here { border-color: var(--brand); background: var(--brand-dim); color: var(--text-1); }
.rel-timeline { position: relative; display: grid; gap: var(--sp-4); padding-left: 26px; }
.rel-timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 7px; width: 2px; border-radius: 2px; background: linear-gradient(var(--brand), color-mix(in srgb, var(--brand) 10%, var(--border))); }
.rel-family { position: relative; margin: var(--sp-5) 0 0; color: var(--text-2); font-size: .74rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; scroll-margin-top: 64px; }
.rel-family:first-child { margin-top: 0; }
.rel-family a { color: inherit; text-decoration: none; }
.rel-family a:hover { color: var(--brand); }
.rel-family::before { content: ""; position: absolute; left: -26px; top: 50%; width: 16px; height: 16px; margin-top: -8px; box-sizing: border-box; border: 2px solid var(--brand); border-radius: 50%; background: var(--bg); }
.rel-card { position: relative; padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); scroll-margin-top: 64px; }
.rel-timeline .rel-card::before { content: ""; position: absolute; left: -23px; top: 26px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--bg); }
.rel-card:target { border-color: var(--brand); }
.rel-card--single { padding: clamp(20px, 4vw, 36px); border-color: color-mix(in srgb, var(--brand) 22%, var(--border)); background: linear-gradient(145deg, var(--surface-2), var(--surface-1)); }
.rel-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--text-3); font-size: .76rem; }
.rel-card-count { margin-left: auto; }
.rel-card-title { margin: var(--sp-3) 0 var(--sp-2); color: var(--text-1); font-size: 1.08rem; line-height: 1.35; }
.rel-card--single .rel-card-title { font-size: clamp(1.4rem, 4vw, 1.9rem); line-height: 1.2; }
.rel-card-title a { color: inherit; text-decoration: none; }
.rel-card-title a:hover { color: var(--brand); }
.rel-card-summary { margin: 0; color: var(--text-2); font-size: .88rem; line-height: 1.6; }
.rel-card-features { display: grid; gap: 9px; margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.rel-card-features li { position: relative; padding-left: 26px; color: var(--text-1); font-size: .86rem; line-height: 1.55; }
.rel-card-features li::before { content: "✓"; position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-dim); color: var(--brand); font-size: .65rem; font-weight: 800; }
.rel-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-5); }
.rel-pager a { display: grid; gap: 4px; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); text-decoration: none; }
.rel-pager a:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.rel-pager span { color: var(--text-3); font-size: .74rem; }
.rel-pager strong { color: var(--text-1); font-size: .84rem; line-height: 1.4; }
.rel-pager-next { grid-column: 2; text-align: right; }
.rel-empty { color: var(--text-2); }
.release-feature-directory { margin-top: var(--sp-6); color: var(--text-3); text-align: center; font-size: .8rem; line-height: 1.8; }
.release-feature-directory a { color: var(--text-2); }

/* Feature guide: every feature visible, a sticky category bar, a link for each feature (pages/features.php). */
.feat-stats { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.feat-stats li { padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface-1) 80%, transparent); color: var(--text-2); font-size: .76rem; }
.feat-stats strong { color: var(--text-1); }
.feat-group { margin-top: var(--sp-8); scroll-margin-top: 64px; }
.feat-nav + .feat-group { margin-top: var(--sp-3); }
.feat-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.feat-group-head h2 { margin: 0; color: var(--text-1); font-size: 1.3rem; letter-spacing: -.02em; }
.feat-group-head p { margin: 4px 0 0; color: var(--text-2); font-size: .86rem; line-height: 1.5; }
.feat-group-head > span { flex: 0 0 auto; color: var(--text-3); font-size: .74rem; }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--sp-3); }
.feat-card { display: flex; flex-direction: column; min-width: 0; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); scroll-margin-top: 72px; transition: border-color .18s ease; }
.feat-card:hover { border-color: var(--border-mid); }
.feat-card:target { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }
.feat-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.feat-card h3 { margin: 0; color: var(--text-1); font-size: .95rem; line-height: 1.4; }
.feat-card h3 a { color: inherit; text-decoration: none; }
.feat-card p { margin: var(--sp-2) 0 0; color: var(--text-2); font-size: .82rem; line-height: 1.6; }
.feat-badge { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: var(--brand-dim); color: var(--brand); font-size: .66rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.feat-badge.is-new { background: var(--brand); color: var(--on-brand); }
.feat-card-links { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); }
.feat-card-links a { color: var(--brand); font-size: .76rem; font-weight: 650; text-decoration: none; }
.feat-card-links a:hover { text-decoration: underline; }
.feat-faq { margin-top: var(--sp-8); }
.feat-faq h2 { margin: 0 0 var(--sp-4); color: var(--text-1); font-size: 1.3rem; letter-spacing: -.02em; }
.feat-faq details { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); }
.feat-faq details + details { margin-top: var(--sp-2); }
.feat-faq summary { padding: var(--sp-4); color: var(--text-1); font-size: .9rem; font-weight: 650; cursor: pointer; }
.feat-faq details p { margin: 0; padding: 0 var(--sp-4) var(--sp-4); color: var(--text-2); font-size: .86rem; line-height: 1.6; }
@media (max-width: 1024px) { /* under the phone's fixed top bar */
  .rel-filter, .feat-nav { top: calc(56px + env(safe-area-inset-top)); }
  .rel-card, .rel-family, .feat-group, .feat-card { scroll-margin-top: calc(124px + env(safe-area-inset-top)); }
}
@media (max-width: 520px) {
  .rel-pager { grid-template-columns: 1fr; }
  .rel-pager-next { grid-column: auto; text-align: left; }
  .feat-group-head > span { display: none; }
}

@media (max-width: 760px) {
  .directory-hero, .release-hero { margin: var(--sp-4) var(--sp-3) var(--sp-5); border-radius: var(--r-lg); }
  .directory-content, .release-content { padding-right: var(--sp-3); padding-left: var(--sp-3); }
  .directory-back { margin-bottom: var(--sp-5); }
  .feature-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directory-footer { align-items: flex-start; flex-direction: column; }
  .directory-footer .directory-actions { justify-content: flex-start; min-width: 0; }
}
@media (max-width: 520px) {
  .feature-category > summary { align-items: flex-start; min-height: 0; padding: var(--sp-4); }
  .feature-category-count { display: none; }
  .feature-card-grid, .guide-link-grid { grid-template-columns: 1fr; }
  .guide-directory-group { padding-right: var(--sp-3); padding-left: var(--sp-3); }
  .feature-overview-head { align-items: flex-start; flex-direction: column; }
  .feature-overview-grid { grid-template-columns: 1fr; }
  .feature-overview-card { min-height: 0; }
  .release-index-card { min-height: 150px; }
  .release-series { padding: var(--sp-4); }
}

/* ── Kitchen measures (ingredient page) and amounts (meal lines) ─ */
.measure-block { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.measure-hint { font-size: .82rem; margin: 0; }
.measure-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.measure-row { display: grid; grid-template-columns: auto minmax(0, 1.4fr) auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px; max-width: 30rem; }
.measure-one, .measure-eq, .measure-g { color: var(--text-3); font-size: .85rem; }
.measure-round { grid-column: 2 / -1; display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: .75rem; margin: -2px 0 var(--sp-1); }
.measure-round .picker-btn { width: auto; flex: 0 0 auto; min-height: 0; height: auto; padding: .15rem .5rem .15rem .6rem; border-radius: 99px; font-size: .75rem; font-weight: 600; color: var(--text-2); }
.measure-round .picker-btn::after { width: 6px; height: 6px; margin-right: 2px; }
.measure-block > [data-measure-add] { align-self: flex-start; }
/* A meal line with a measure: the ingredient, swap and remove on top; amount, measure and grams under them */
.diet-line { grid-template-columns: minmax(0, 1fr) auto auto; }
.diet-line > [data-name=ingredient_id], .diet-line > .select-trigger { grid-column: 1; grid-row: 1; }
.diet-line > [data-line-swap] { grid-column: 2; grid-row: 1; }
.diet-line > [data-line-remove], .diet-line > [aria-label="Remove ingredient"] { grid-column: 3; grid-row: 1; }
.diet-line > .line-amount { grid-column: 1; grid-row: 2; display: flex; gap: 6px; align-items: center; min-width: 0; }
.diet-line > .line-grams { grid-column: 2 / -1; grid-row: 2; font-size: .78rem; color: var(--text-3); white-space: nowrap; }
.diet-line .line-amount [data-name=amount] { width: 5rem; flex: 0 0 5rem; }
.diet-line .line-amount select { min-width: 6.5rem; flex: 1; }
.diet-line > .diet-line-macros, .diet-line > [data-add-measure] { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .diet-line { grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem) 4.5rem auto auto; }
  .diet-line > .line-amount { grid-column: 2; grid-row: 1; }
  .diet-line > .line-grams { grid-column: 3; grid-row: 1; }
  .diet-line > [data-line-swap] { grid-column: 4; }
  .diet-line > [data-line-remove], .diet-line > [aria-label="Remove ingredient"] { grid-column: 5; }
}
.add-measure { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: var(--sp-2); border: 1px dashed var(--border); border-radius: var(--r-md); font-size: .85rem; color: var(--text-2); }
.add-measure [data-am=name] { width: 7.5rem; }
.add-measure [data-am=grams] { width: 6rem; }
.add-measure-error { flex-basis: 100%; font-size: .8rem; }