/* ==========================================================================
   Performance Slate — the redesign, applied over the live app.
   Everything here is scoped under html.ui-slate, which the pre-paint script
   in index.html's <head> always sets: Slate is the only design.
   Source of the design: poc/redesign/ (tokens, layout, components).
   ========================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
html.ui-slate {
  --bg: #0B0D10;
  --surface: #14171C;
  --surface-2: #1B1F26;
  --surface-3: #232833;
  --text: #F2F4F7;
  --text-2: #A9B1BE;
  --text-3: #8A93A1;
  --accent: #FF8A3D;
  --accent-bg: rgba(255, 138, 61, .14);
  --go: #3DDC97;
  --go-bg: rgba(61, 220, 151, .13);
  --caution: #F5A524;
  --caution-bg: rgba(245, 165, 36, .13);
  --stop: #F2555A;
  --stop-bg: rgba(242, 85, 90, .14);
  --info: #6CB6FF;
  --on-accent: #1A0E05;               /* text/icons on an accent fill */
  --chart-grid: rgba(255, 255, 255, .06);
  --chart-tip: #232833;               /* Chart.js tooltip (core.js chartTheme) */
  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --slate-sidebar: 0px;

  /* Legacy tokens remapped, so every existing card, chip and chart adopts
     the Slate palette without touching its own rules. */
  --ink-950: #0B0D10;
  --ink-900: #0B0D10;
  --ink-800: #14171C;
  --ink-700: #1B1F26;
  --line: #262B33;
  --line-strong: #353C48;
  --glass-hairline: #262B33;
  --mist: #A9B1BE;
  --mist-dim: #8A93A1;
  --muted: #8A93A1;
  --dawn: #FF8A3D;
  --dawn-dim: #FFB27F;
  --frost: #3DDC97;
  --frost-dim: #8BE8C0;
  --alert: #F2555A;
  --white: #F2F4F7;
  --app-bg: #0B0D10;
  --card-tint: transparent;
  --card-base: #14171C;
  --coach-bg: #1B1F26;
  --glass-blur: none;
  --glass-1: #14171C;
  --glass-2: #14171C;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .30), 0 8px 24px -12px rgba(0, 0, 0, .50);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .32), 0 14px 32px -12px rgba(0, 0, 0, .58);
  --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, .6);
  --font-ui: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-logo: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --r-xl: 20px;
  color-scheme: dark;
}

/* Light theme: html[data-theme="light"], set before first paint by the
   <head> script in index.html and switched by theme.js (Me → Display).
   Only tokens change here; every rule above reads them. Status colours are
   deeper than the dark set so text in them keeps 4.5:1 on white. */
html.ui-slate[data-theme="light"] {
  --bg: #F2F3F5;
  --surface: #FFFFFF;
  --surface-2: #F4F5F7;
  --surface-3: #E8EBEF;
  --text: #12151A;
  --text-2: #4A5261;
  --text-3: #646C79;
  --accent: #C9510C;
  --accent-bg: rgba(201, 81, 12, .10);
  --go: #0B7A4C;
  --go-bg: rgba(11, 122, 76, .10);
  --caution: #9E5C00;
  --caution-bg: rgba(158, 92, 0, .10);
  --stop: #C92A33;
  --stop-bg: rgba(201, 42, 51, .09);
  --info: #1A6FC4;
  --on-accent: #FFFFFF;
  --chart-grid: rgba(16, 24, 40, .08);
  --chart-tip: #FFFFFF;
  --bar-bg: rgba(255, 255, 255, .92);
  --bar-line: #DDE1E7;
  --bar-shadow: 0 10px 28px rgba(16, 24, 40, .14);

  --ink-950: #F2F3F5;
  --ink-900: #F2F3F5;
  --ink-800: #FFFFFF;
  --ink-700: #F4F5F7;
  --line: #E1E4E9;
  --line-strong: #CDD2D9;
  --glass-hairline: #E1E4E9;
  --mist: #4A5261;
  --mist-dim: #646C79;
  --muted: #646C79;
  --dawn: #C9510C;
  --dawn-dim: #A84A0E;
  --frost: #0B7A4C;
  --frost-dim: #2E8F67;
  --alert: #C92A33;
  --white: #12151A;
  --app-bg: #F2F3F5;
  --card-base: #FFFFFF;
  --coach-bg: #F4F5F7;
  --glass-1: #FFFFFF;
  --glass-2: #FFFFFF;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px -8px rgba(16, 24, 40, .12);
  --shadow-2: 0 2px 4px rgba(16, 24, 40, .06), 0 12px 28px -10px rgba(16, 24, 40, .18);
  --shadow-3: 0 24px 60px -20px rgba(16, 24, 40, .28);
  color-scheme: light;
}

html.ui-slate body { background: var(--bg); color: var(--text); font-family: var(--font-ui); }
html.ui-slate :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.ui-slate ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* Display type: Barlow Condensed replaces Boldonse/Outfit everywhere. */
html.ui-slate h1,
html.ui-slate h2,
html.ui-slate h3 { font-family: var(--font-display); font-synthesis: none; }
html.ui-slate .num { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The decorative Glass layers go: ambient glow, per-tab sky, watermark. */
html.ui-slate .app::after,
html.ui-slate .atmosphere,
html.ui-slate .hero-watermark { display: none !important; }

/* ── Shell ───────────────────────────────────────────────────────────────── */
/* One layout for every size: no framed phone card, no landscape rail. */
html.ui-slate body { display: block; padding: 0; }
html.ui-slate .app {
  position: fixed; inset: 0; max-width: none; height: auto; margin: 0;
  border: 0; border-radius: 0; box-shadow: none; background: var(--bg);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
}
html.ui-slate .app-header {
  grid-column: 1; grid-row: 1;
  padding: max(16px, calc(20px + env(safe-area-inset-top))) 16px 12px;
  border-bottom: 0; gap: 0; background: var(--bg);
  position: relative; z-index: 5;
}
/* The header's bottom edge: a translucent gradient with a soft blur that fades
   out with it, so scrolled content dissolves under the title instead of
   stopping at a hard line. Only shown once .app-main has scrolled (core.js),
   so the first card is untouched at rest. */
html.ui-slate .app-header::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 45%, color-mix(in srgb, var(--bg) 0%, transparent) 100%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent);
  opacity: 0; transition: opacity .2s var(--ease-out);
}
html.ui-slate .app.is-scrolled .app-header::after { opacity: 1; }
@media (prefers-reduced-transparency: reduce) {
  html.ui-slate .app-header::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
html.ui-slate .app-main {
  grid-column: 1; grid-row: 2;
  /* Clears the floating tab bar (+ home indicator) so the last item is never under it. */
  padding: 4px 16px calc(var(--bar-h, 68px) + var(--bar-b, 12px) + 40px);
  background: var(--bg);
}
/* Phones: quick-return bars (core.js wireBars()). The header and the tab
   bar + "+" track the scroll 1:1 through --bars-p (0 = shown, 1 = hidden):
   scroll down 20px and they move 20px, then .bars-snap eases them the rest of
   the way in or out once the scroll stops. The header floats over .app-main
   instead of owning a grid row, so hiding it hands its space to the content;
   .app-main pads its top by the measured header height (--hdr-h). Sticky
   elements pin just under it and ride the header with the same transform (and
   the same .bars-snap ease), so they never lag it or leave a gap.
   html.bars-hidden marks the fully hidden state. */
@media (max-width: 767px) {
  html.ui-slate .app { grid-template-rows: minmax(0, 1fr); }
  html.ui-slate .app-header { position: absolute; top: 0; left: 0; right: 0; transform: translateY(calc(var(--bars-p, 0) * -100%)); }
  /* .app-main is zoomed (--ui-zoom) but the header isn't: ÷ zoom keeps the
     content starting just under the header at 75% and 125% too. */
  html.ui-slate .app-main { grid-row: 1; padding-top: calc((var(--hdr-h, 96px) + 4px) / var(--ui-zoom, 1)); }
  html.ui-slate.bars-hidden .app-header::after { opacity: 0; }
}

/* Header: [avatar] [title / subtitle] [live badge]. The legacy greeting is
   replaced by the page title (see core.js renderHead()). */
html.ui-slate #greetBlock { display: none; }
html.ui-slate .app-header-top { align-items: center; gap: 14px; }
html.ui-slate .slate-head { flex: 1; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* The badge never wraps under a long subtitle: the text block shrinks and wraps instead. */
html.ui-slate .slate-head-text { min-width: 0; flex: 1 1 auto; }
html.ui-slate .slate-head h1 {
  font: 700 clamp(1.75rem, 1.5rem + 1.2vw, 2.4rem)/1 var(--font-display);
  text-transform: uppercase; letter-spacing: .01em; color: var(--text); margin: 0;
}
html.ui-slate .slate-head .sub { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.35; margin: 6px 0 0; }
html.ui-slate .sl-badge {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px !important; height: 40px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--text-2);
  font: 600 var(--fs-sm)/1 var(--font-ui); white-space: nowrap; flex: none; position: relative;
  transition: border-color .15s var(--ease-out), color .15s var(--ease-out);
}
/* Phones: a smaller pill; the invisible hit area keeps it 44px tall. */
@media (max-width: 559px) {
  html.ui-slate .sl-badge { min-height: 32px !important; height: 29px; padding: 0 11px; gap: 6px; font-size: 12px; }
  html.ui-slate .sl-badge::after { content: ''; position: absolute; inset: -9px -4px; }
  html.ui-slate .sl-badge i { width: 6px; height: 6px; }
}
html.ui-slate .gl-date { display: block; margin-top: 2px; color: var(--text-2); font: 500 var(--fs-sm)/1.3 var(--font-ui); text-transform: none; letter-spacing: 0; }
html.ui-slate .sl-badge:hover { border-color: var(--line-strong); color: var(--text); }
html.ui-slate .sl-badge i { width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); flex: none; }
html.ui-slate .sl-badge[data-state="live"] i { background: var(--go); }
html.ui-slate .sl-badge[data-state="stale"] i { background: var(--caution); }
html.ui-slate .sl-badge[data-state="syncing"] i { background: var(--accent); animation: slatePulse 1s ease-in-out infinite; }
@keyframes slatePulse { 50% { opacity: .3; } }

/* Header avatar: as tall as the title + subtitle block (core.js measures it). */
html.ui-slate .app-header .avatar-wrap { width: var(--ph-h, 56px); height: var(--ph-h, 56px); border-radius: 50%; }
html.ui-slate .app-header .avatar,
html.ui-slate .app-header .avatar-fallback { width: 100%; height: 100%; border: 1px solid var(--line-strong); box-shadow: none; }

/* Bottom tab bar (phones): Today · Rides · [+] · Fuel · Health. Train and Me
   stay in the DOM (routing, the desktop sidebar) but phones reach them from
   the avatar drawer. A floating rounded bar, inset 16px from the screen edges
   and lifted off the home indicator, with the quick-add "+" sitting inside it
   as a rounded square in the middle column. Five equal columns, so every icon
   sits the same distance from its neighbours; the middle one is an empty slot
   under the "+" (quickadd.js), which lives on <body> so it can rise above its
   tray. The active tab is bright with an accent dot under its label.
   --bar-h is the bar's full height (border included); --bar-b is its gap
   above the screen edge (the home-indicator inset, at least 12px). */
html.ui-slate { --bar-bg: rgba(28, 32, 39, .94); --bar-line: #2E333C; --bar-shadow: 0 10px 28px rgba(0, 0, 0, .5); --bar-h: 68px; --fab-w: 52px; --fab-h: 48px; --bar-pad-b: env(safe-area-inset-bottom); --bar-b: max(12px, var(--bar-pad-b)); }
/* iOS home-screen app with a short viewport (html.vp-short, set by the <head>
   script in index.html): iOS stops the page ~62px above the screen edge, so
   that band already stands in for the home-indicator gap and the bar drops
   its own. */
html.ui-slate.vp-short { --bar-pad-b: max(0px, calc(env(safe-area-inset-bottom) - var(--vp-short, 0px))); }
html.ui-slate .tabbar {
  position: fixed; left: 16px; right: 16px; bottom: var(--bar-b); z-index: 20;
  box-sizing: border-box; height: var(--bar-h);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
  padding: 0 6px;
  border: 1px solid var(--bar-line); border-radius: 24px;
  background: var(--bar-bg); box-shadow: var(--bar-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
/* Quick-return (see the .app-header note above): bar and "+" drop below the
   screen edge with the scroll; the "+" press spring is off while they move. */
html.ui-slate .tabbar,
html.ui-slate .qa-fab:not(:active) { transform: translateY(calc(var(--bars-p, 0) * (var(--bar-h) + var(--bar-b) + 12px))); }
html.ui-slate.bars-drag .qa-fab { transition: none; }
html.ui-slate.bars-hidden .tabbar,
html.ui-slate.bars-hidden .qa-fab { pointer-events: none; }
html.ui-slate.bars-snap .app-header,
html.ui-slate.bars-snap .tabbar,
html.ui-slate.bars-snap .qa-fab { transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
html.ui-slate .tabbar .tab-btn[data-tab="training"],
html.ui-slate .tabbar .tab-btn[data-tab="profile"] { display: none; }
/* The "+" is centred on the slot column (the bar is symmetric, so that is the
   screen centre) and vertically inside the bar. */
html.ui-slate .qa-fab {
  position: fixed; z-index: 25; left: 50%; bottom: calc(var(--bar-b) + (var(--bar-h) - var(--fab-h)) / 2);
  width: var(--fab-w); height: var(--fab-h); margin-left: calc(var(--fab-w) / -2); border-radius: 16px; border: 0;
  display: grid; place-items: center; background: var(--accent); color: var(--on-accent);
  box-shadow: none;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
  animation: qaPop .42s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
@keyframes qaPop { from { transform: scale(.6); opacity: 0; } }
html.ui-slate .qa-fab svg { width: 24px; height: 24px; transition: transform .28s var(--ease-out); }
html.ui-slate .qa-fab:active { transform: scale(.92); transition-duration: .1s; }
html.ui-slate .qa-fab:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
html.ui-slate .qa-fab.raised { z-index: 70; }
html.ui-slate .qa-fab.x svg { transform: rotate(45deg); }
html.ui-slate .tabbar .tab-btn { transition: color .3s var(--ease-out); }
/* Quick-add sheet (quickadd.js tray): opens at the tall snap point (75%).
   Two accent hero cards on top (Add food, Meal photo), then two grouped
   lists of rows (Nutrition, Body & training). Sized so the last row ends
   just above the raised "×" (.qa-fab) at 75% on a ~844px phone; shorter
   screens open it at full height (quickadd.js), where the bottom padding lets
   the last row scroll clear of the "×". Everything pops in top-down. */
html.ui-slate .qa-grid { display: flex; flex-direction: column; padding-bottom: 8px; }
html.ui-slate .slate-overlay[data-mode="bottom"] .qa-grid { padding-bottom: calc(70px + var(--bar-b)); }
html.ui-slate .qa-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html.ui-slate .qa-hero__card {
  min-width: 0; min-height: 100px; padding: 12px 14px; border: 0; border-radius: 20px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 60%);
  color: var(--on-accent); cursor: pointer; text-align: left;
  box-shadow: var(--shadow-2), 0 10px 24px -14px color-mix(in srgb, var(--accent) 70%, transparent);
  animation: qaCardIn .32s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 30ms + 40ms);
  transition: transform .12s var(--ease-out), filter .15s var(--ease-out);
}
html.ui-slate .qa-hero__ic { width: 36px; height: 36px; margin-bottom: auto; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--on-accent) 16%, transparent); }
html.ui-slate .qa-hero__ic svg { width: 22px; height: 22px; }
html.ui-slate .qa-hero__l { margin-top: 10px; font: 600 var(--fs-base)/1.2 var(--font-ui); letter-spacing: -.01em; }
html.ui-slate .qa-hero__hint { font: 500 var(--fs-xs)/1.3 var(--font-ui); opacity: .82; }
html.ui-slate .qa-hero__card:hover { filter: brightness(1.06); }
html.ui-slate .qa-hero__card:active { transform: scale(.97); }
html.ui-slate .qa-group__t { margin: 16px 4px 6px; }
html.ui-slate .qa-list { background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-1); }
html.ui-slate .qa-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 14px 6px 8px;
  border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text);
  font: 600 var(--fs-sm)/1.25 var(--font-ui); text-align: left; cursor: pointer;
  animation: qaCardIn .32s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 30ms + 40ms);
  transition: background-color .15s var(--ease-out);
}
html.ui-slate .qa-row:first-child { border-top: 0; }
html.ui-slate .qa-row__ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--accent); }
html.ui-slate .qa-row__ic svg { width: 20px; height: 20px; }
html.ui-slate .qa-row__l { flex: 1; min-width: 0; }
html.ui-slate .qa-row__chev, html.ui-slate .qa-row__chev svg { width: 16px; height: 16px; flex: none; color: var(--text-3); }
html.ui-slate .qa-row:hover { background: var(--surface-3); }
html.ui-slate .qa-row:active { background: var(--surface-3); }
html.ui-slate .qa-row:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
html.ui-slate .qa-hero__card:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@keyframes qaCardIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  html.ui-slate .tabbar, html.ui-slate .tabbar .tab-btn { transition: none; }
  html.ui-slate .qa-hero__card, html.ui-slate .qa-row { animation: none; transition: none; }
}
html.ui-slate .qa-side { display: none; }
@media (prefers-reduced-motion: reduce) { html.ui-slate .qa-fab, html.ui-slate .qa-fab svg { transition: none; animation: none; } }
html.ui-slate .tab-indicator { display: none; }
html.ui-slate .tab-btn { min-width: 0; height: 56px; min-height: 0; padding: 0; justify-content: center; gap: 3px; color: var(--text-3); border-radius: 12px; }
html.ui-slate .tab-btn.active .tab-icon, html.ui-slate .tab-btn.active .tab-label { transform: none; filter: none; }
html.ui-slate .tab-btn .tab-label { font: 600 11px/1.1 var(--font-ui); letter-spacing: 0; }
html.ui-slate .tab-btn::after { content: ''; width: 4px; height: 4px; border-radius: 2px; background: transparent; }
html.ui-slate .tab-btn.active { color: var(--text); }
html.ui-slate .tab-btn.active::after { background: var(--accent); }
html.ui-slate .tab-btn.active .tab-icon svg { stroke: currentColor; filter: none; }
html.ui-slate .tab-btn .tab-icon svg { width: 22px; height: 22px; stroke-width: 1.75; filter: none; }
/* Tab order is set in the DOM by core.js reorder(), so keyboard focus matches. */

/* Sidebar: an 80px icon rail from 768px, a 232px labelled sidebar from 1200px. */
html.ui-slate .app-sidebar { display: none; }
@media (min-width: 768px) {
  html.ui-slate { --slate-sidebar: 80px; }
  html.ui-slate .app { grid-template-columns: var(--slate-sidebar) minmax(0, 1fr); }
  html.ui-slate .app-header,
  html.ui-slate .app-main { grid-column: 2; }
  html.ui-slate .app-header { padding: 24px 24px 16px; }
  html.ui-slate .app-main { padding: 0 24px 40px; }
  html.ui-slate .tabbar, html.ui-slate .qa-fab { display: none; }
  html.ui-slate .qa-side {
    display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin: 0 0 16px;
    border: 0; border-radius: 14px; background: var(--accent); color: var(--on-accent); font: 600 var(--fs-sm)/1 var(--font-ui); cursor: pointer;
  }
  html.ui-slate .qa-side svg { width: 22px; height: 22px; }
  html.ui-slate .qa-side span { display: none; }
  html.ui-slate .app-header .avatar-wrap { display: none; }
  html.ui-slate .app-sidebar {
    display: flex; flex-direction: column; grid-column: 1; grid-row: 1 / span 2;
    padding: 16px 8px; background: var(--bg); border-right: 1px solid var(--line); overflow-y: auto;
  }
  /* The legacy sidebar base (flex layout, icon stroke) only exists from 1024px,
     so the rail supplies it itself for 768–1023px. */
  html.ui-slate .app-sidebar-brand { display: flex; align-items: center; }
  html.ui-slate .app-sidebar-nav { display: flex; flex-direction: column; }
  html.ui-slate .app-sidebar-spacer { flex: 1 1 auto; }
  html.ui-slate .side-btn { display: flex; align-items: center; background: transparent; text-align: center; cursor: pointer; }
  html.ui-slate .app-sidebar svg { stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
  html.ui-slate .app-sidebar-brand { justify-content: center; padding: 0; margin: 0 0 24px; font-size: 0; gap: 0; }
  /* App mark = the favicon: orange two-peak mountain on black (100-unit viewBox). */
  html.ui-slate .app-sidebar-brand svg {
    width: 32px; height: 32px; padding: 0; border-radius: 9px; background: #000;
    color: #FF9E52; stroke: #FF9E52; stroke-width: 7;
  }
  html.ui-slate .app-sidebar-nav { gap: 4px; }
  html.ui-slate .side-btn {
    flex-direction: column; justify-content: center; gap: 4px; min-height: 56px; padding: 0;
    border: 0; border-radius: 12px; color: var(--text-3);
    font: 500 var(--fs-xs)/1.1 var(--font-ui);
    transition: background .18s var(--ease-out), color .18s var(--ease-out);
  }
  html.ui-slate .side-btn:hover { background: var(--surface); color: var(--text-2); }
  html.ui-slate .side-btn.active { background: var(--surface-2); color: var(--text); border: 0; }
  html.ui-slate .side-btn.active svg { stroke: var(--accent); }
  html.ui-slate .side-btn svg { width: 20px; height: 20px; }
  /* Me sits below a divider, apart from the five data screens. */
  html.ui-slate .side-btn[data-tab="profile"] { margin-top: 9px; position: relative; }
  html.ui-slate .side-btn[data-tab="profile"]::before {
    content: ""; position: absolute; top: -7px; left: 8px; right: 8px; height: 1px; background: var(--line);
  }
  html.ui-slate .slate-side-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 12px; }
}
@media (min-width: 1200px) {
  html.ui-slate { --slate-sidebar: 232px; }
  html.ui-slate .app-sidebar { padding: 24px 16px; }
  html.ui-slate .app-sidebar-brand {
    justify-content: flex-start; gap: 10px; padding: 0 8px; font: 700 var(--fs-xl)/1 var(--font-display);
    letter-spacing: .02em; text-transform: uppercase; color: var(--text);
  }
  html.ui-slate .side-btn { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 16px; min-height: 44px; font-size: var(--fs-base); }
  html.ui-slate .app-header { padding: 32px 40px 16px; }
  html.ui-slate .app-main { padding: 0 40px 48px; }
  html.ui-slate .slate-side-foot { align-items: stretch; }
  html.ui-slate .qa-side { justify-content: flex-start; padding: 0 16px; }
  html.ui-slate .qa-side span { display: inline; }
}
html.ui-slate .slate-avatar-btn {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px; border-radius: 999px;
  color: var(--text); text-align: left; transition: background .15s var(--ease-out);
}
html.ui-slate .slate-avatar-btn:hover { background: var(--surface-2); }
html.ui-slate .slate-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--line-strong); font: 700 var(--fs-sm)/1 var(--font-display);
}
html.ui-slate button.slate-avatar { padding: 0; color: inherit; cursor: pointer; }
html.ui-slate .slate-avatar img { width: 100%; height: 100%; object-fit: cover; }
html.ui-slate .slate-avatar-btn .who { display: none; min-width: 0; }
html.ui-slate .slate-avatar-btn .who b { display: block; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-slate .slate-avatar-btn .who span { display: block; font-size: var(--fs-xs); color: var(--text-2); }
@media (min-width: 1200px) {
  html.ui-slate .slate-side-foot .slate-avatar-btn { border-radius: 12px; padding: 6px 10px 6px 6px; }
  html.ui-slate .slate-side-foot .slate-avatar-btn .who { display: block; }
}

/* Tab content: the legacy desktop 2-column grid only from 1200px (the rail
   takes width from 768px); cards stack below that. */
@media (min-width: 1024px) and (max-width: 1199px) {
  html.ui-slate .tabsection.active { display: block; }
}

/* ── Legacy components, flattened ───────────────────────────────────────── */
html.ui-slate .card,
html.ui-slate .coach-card,
html.ui-slate .modal-card,
html.ui-slate .tool-card,
html.ui-slate .atmo-glass {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
html.ui-slate .chip { background: var(--surface-2); border-color: var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ui-slate .card { padding: 16px; margin-bottom: 12px; }
@media (min-width: 768px) { html.ui-slate .card { padding: 20px; margin-bottom: 16px; } }
/* Card headings read as eyebrows: small caps label, the number underneath is the headline. */
html.ui-slate .card > h2 {
  font: 600 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2);
}
html.ui-slate .card > h2 svg { stroke: var(--text-2); }

html.ui-slate .subtab-strip { background: var(--surface-2); border: 0; border-radius: 12px; padding: 3px; gap: 2px; }
html.ui-slate .subtab-btn { border-radius: 9px; color: var(--text-2); font: 600 var(--fs-sm)/1 var(--font-ui); min-height: 38px; }
html.ui-slate .subtab-btn:hover { color: var(--text); }
html.ui-slate .subtab-btn.active { background: var(--surface-3); box-shadow: none; color: var(--text); }
html.ui-slate .range-btn { border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text-2); font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: .06em; }
html.ui-slate .range-btn.active { background: var(--text); border-color: var(--text); color: var(--bg); box-shadow: none; }
html.ui-slate .btn { font-family: var(--font-ui); border-radius: 12px; }
html.ui-slate .coach-line { background: var(--surface-2); border-color: var(--line); color: var(--text-2); }

/* Legacy sheets and modals: solid surface, no blur on the scrim. */
html.ui-slate .ride-sheet-overlay { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ui-slate .ride-sheet { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-3); }
html.ui-slate .menu-drawer { background: var(--surface); border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── Slate sheet (sheet.js) ──────────────────────────────────────────────── */
/* An *Overlay id + .open class, so index.html's initHistory() modal stack
   (back gesture, Escape → click on the overlay) handles it unchanged.
   The sheet system (poc/sheets/): a light scrim keeps the page readable
   (rule 1); on phones the panel is always 92% tall and sheet.js only
   translates it between peek / half / full (rule 2) and while dragging
   (rule 3); from 768px it's a bounded right drawer (rule 4). */
html.ui-slate .slate-overlay {
  position: fixed; inset: 0; z-index: 60; display: none;
  /* sheet.js sets these from visualViewport so a bottom sheet sits above the on-screen keyboard */
  top: var(--vv-top, 0); bottom: auto; height: var(--vv-h, 100%);
}
html.ui-slate .slate-overlay::before {
  content: ""; position: absolute; inset: 0; background: #000;
  opacity: 0; transition: opacity .32s var(--ease-out);
}
html.ui-slate .slate-overlay.open::before { opacity: calc(.32 * var(--scrim, 1)); }
html.ui-slate .slate-overlay:has(.sl-sheet.dragging)::before { transition: none; }
html.ui-slate .slate-overlay.visible { display: block; }
/* Own compositing layer while shown: stops iOS re-rasterizing the panel on the first frames of the slide (flicker). */
html.ui-slate .slate-overlay.visible .sl-sheet { will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
html.ui-slate .sl-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; height: 92%;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0;
  color: var(--text); transform: translateY(100%); box-shadow: 0 -12px 40px -16px rgba(0, 0, 0, .6);
}
html.ui-slate .sl-sheet.anim { transition: transform .32s var(--ease-out); }
html.ui-slate .sl-sheet.dragging, html.ui-slate .sl-sheet.dragging * { user-select: none; -webkit-user-select: none; }
html.ui-slate .sl-sheet .grab { flex: none; padding: 8px 0 10px; touch-action: none; cursor: grab; }
html.ui-slate .sl-sheet .grab i { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0 auto; }
html.ui-slate .sl-sheet.dragging .grab { cursor: grabbing; }
html.ui-slate .sl-sheet__head { flex: none; display: flex; align-items: center; gap: 12px; padding: 0 20px 16px; touch-action: none; }
html.ui-slate #slateSheetBody {
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 0 20px calc(24px + env(safe-area-inset-bottom));
}
/* App zoom (Me → Display → Text size, --ui-zoom) for every sheet: its header
   and body scale like .app-main does; the panel itself (size, slide, drag)
   stays in real px. */
html.ui-slate .sl-sheet__head, html.ui-slate #slateSheetBody { zoom: var(--ui-zoom, 1); }
html.ui-slate .sl-sheet__head .ttl { flex: 1; min-width: 0; }
html.ui-slate .sl-sheet__head h2 { font: 700 var(--fs-2xl)/1.1 var(--font-display); text-transform: uppercase; margin: 0; color: var(--text); overflow-wrap: anywhere; }
/* A title that wraps to several lines keeps Back and X in the top corners. */
html.ui-slate .sl-sheet__head > .sl-icon-button { align-self: flex-start; }
html.ui-slate .sl-sheet__head small { display: block; margin-top: 2px; color: var(--text-2); font-size: var(--fs-sm); }
html.ui-slate .sl-sheet__head .lead:empty { display: none; }
html.ui-slate .sl-sheet__back[hidden] { display: none; }
html.ui-slate .sl-icon-button {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-2); color: var(--text-2);
}
html.ui-slate .sl-icon-button:hover { color: var(--text); }
html.ui-slate .sl-icon-button svg { width: 20px; height: 20px; }
@media (min-width: 768px) {
  html.ui-slate .sl-sheet {
    top: 0; left: auto; bottom: 0; height: auto; width: max(360px, 40vw); border: 0; border-left: 1px solid var(--line);
    border-radius: 0; transform: translateX(100%); box-shadow: var(--shadow-3);
  }
  html.ui-slate .sl-sheet .grab { display: none; }
  html.ui-slate .sl-sheet__head { padding: 24px 24px 16px; touch-action: pan-y; }
  /* A bottom sheet on desktop (side: 'bottom', e.g. the AI prompt): half height, centred, 640px at most. */
  html.ui-slate .slate-overlay[data-mode="bottom"] .sl-sheet { top: auto; height: 92%; left: max(0px, calc(50% - 320px)); right: auto; width: min(640px, 100%); border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px -16px rgba(0, 0, 0, .6); }
  html.ui-slate .slate-overlay[data-mode="bottom"] .sl-sheet .grab { display: block; }
  html.ui-slate .slate-overlay[data-mode="bottom"] #slateSheetBody { padding: 0 20px 20px; }
  html.ui-slate #slateSheetBody { padding: 0 24px 24px; }
}
/* The avatar's drawer: narrow enough that the page stays visible beside it. */
html.ui-slate .slate-overlay.left .sl-sheet {
  top: 0; right: auto; bottom: 0; left: 0; height: auto; width: min(320px, 82vw); border: 0;
  border-right: 1px solid var(--line); border-radius: 0 20px 20px 0; transform: translateX(-100%);
}
html.ui-slate .slate-overlay.left .sl-sheet__head { padding: calc(20px + env(safe-area-inset-top)) 16px 16px 20px; touch-action: pan-y; }
html.ui-slate .slate-overlay.left #slateSheetBody { padding: 0 16px 24px 20px; }
html.ui-slate .slate-overlay.left .grab { display: none; }
/* Glance drawer on phones: the avatar lands exactly where the header avatar was,
   at the same size (glance.js copies its rect into --gl-*), so tapping it reads as no change. */
html.ui-slate .slate-overlay.left .sl-sheet__head { padding-top: var(--gl-top, calc(20px + env(safe-area-inset-top))); padding-left: var(--gl-left, 20px); }
html.ui-slate .slate-overlay.left .sl-sheet__head .lead { align-self: flex-start; }
html.ui-slate .slate-overlay.left .sl-sheet__head .lead .slate-avatar { width: var(--gl-av, 44px); height: var(--gl-av, 44px); font-size: calc(var(--gl-av, 44px) * .32); }
/* Slide under the avatar: glance.js puts a fixed copy of the header avatar above
   the scrim (z 61 > the overlay's 60) and hides the drawer's own one, so the
   drawer passes beneath an avatar that never moves, with a small pulse as it does. */
html.ui-slate .gl-ghost {
  position: fixed; z-index: 61; margin: 0;
  transition: top .26s cubic-bezier(.2, .8, .2, 1);
}
html.ui-slate .gl-ghost.in { animation: glGhostPulse .42s .1s var(--ease-out); }
@keyframes glGhostPulse { 45% { transform: scale(1.08); } }
html.ui-slate .slate-overlay.gl-ghosted .sl-sheet__head .lead .gl-me { visibility: hidden; }
/* Hiding: the drawer softens into a blur and fades while it slides away. */
html.ui-slate .slate-overlay.left.gl-closing .sl-sheet {
  filter: blur(8px); opacity: 0;
  transition: transform .32s cubic-bezier(.4, 0, .6, 1), filter .28s var(--ease-out), opacity .3s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  html.ui-slate .sl-sheet.anim, html.ui-slate .slate-overlay::before { transition: none; }
  html.ui-slate .gl-ghost { transition: none; animation: none; }
  html.ui-slate .slate-overlay.left.gl-closing .sl-sheet { filter: none; transition: none; }
}

/* ── Toast (core.js toast()) ─────────────────────────────────────────────── */
html.ui-slate .sl-toast-stack {
  position: fixed; left: 50%; bottom: calc(var(--bar-b) + var(--bar-h) + 12px); transform: translateX(-50%);
  z-index: 80; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none;
}
html.ui-slate.bars-hidden .sl-toast-stack { bottom: calc(var(--bar-b) + 12px); }
@media (min-width: 768px) { html.ui-slate .sl-toast-stack { bottom: 24px; left: calc(50% + var(--slate-sidebar) / 2); } }
html.ui-slate .sl-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 8px 8px 16px;
  background: var(--surface-3); border: 1px solid var(--line-strong); border-radius: 12px; color: var(--text);
  font-size: var(--fs-sm); box-shadow: var(--shadow-3);
  animation: slateToastIn .22s var(--ease-out) both;
}
html.ui-slate .sl-toast[data-tone="error"] { border-color: var(--stop); }
html.ui-slate .sl-toast[data-tone="success"] { border-color: var(--go); }
html.ui-slate .sl-toast span { flex: 1; min-width: 0; }
html.ui-slate .sl-toast button[data-toast-x] { color: var(--text-2); font-weight: 500; }
html.ui-slate .sl-toast button { min-height: 36px; padding: 0 12px; border-radius: 8px; color: var(--accent); font-weight: 600; }
@keyframes slateToastIn { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  html.ui-slate .slate-overlay, html.ui-slate .sl-sheet, html.ui-slate .sl-toast { transition: none; animation: none; }
}

/* ==========================================================================
   Screens (Phase 1+). A .slate-screen inside a #tab-* section replaces that
   tab's classic cards once the screen is ported; the classic cards stay in
   the DOM (hidden) so their renderers and re-hosted parts keep working.
   ========================================================================== */
html.ui-slate { --st-deep: #6A78F0; --st-light: #3F6DA6; --st-rem: #7FD8F5; --st-awake: #F2A65A; }
.slate-screen { display: none; }
html.ui-slate .slate-screen { display: block; container: slate / inline-size; }
html.ui-slate #tab-today.active { display: block; }
html.ui-slate #tab-today > :not(.slate-screen):not(.pull-refresh-indicator) { display: none !important; }

/* Grid: 1 column → 2 → 12, keyed to the screen's own width (a container query),
   not the viewport's: the sidebar and the content zoom (.app-main's
   zoom: var(--ui-zoom)) both shrink it, and viewport breakpoints put a
   12-column grid into a box too narrow for it. 600 ≈ a 768px viewport beside
   the rail; 960 ≈ a 1270px viewport beside the sidebar at 100%. */
html.ui-slate .sg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container slate (min-width: 600px) {
  html.ui-slate .sg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; grid-auto-flow: row dense; }
  html.ui-slate .sg > .c-12, html.ui-slate .sg > .c-8, html.ui-slate .sg > .t-full { grid-column: span 2; }
}
@container slate (min-width: 960px) {
  html.ui-slate .sg { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; grid-auto-flow: row; }
  html.ui-slate .sg > .c-12 { grid-column: span 12; } html.ui-slate .sg > .c-8 { grid-column: span 8; }
  html.ui-slate .sg > .c-6 { grid-column: span 6; } html.ui-slate .sg > .c-4 { grid-column: span 4; }
  html.ui-slate .sg > .t-full.c-4 { grid-column: span 4; } html.ui-slate .sg > .t-full.c-6 { grid-column: span 6; }
}

/* Card */
html.ui-slate .sl-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 16px; min-width: 0;
  box-shadow: var(--shadow-1);
  animation: stRise .34s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms);
}
@container slate (min-width: 600px) { html.ui-slate .sl-card { padding: 20px; } }
@keyframes stRise { from { opacity: 0; transform: translateY(8px); } }
html.ui-slate .sl-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; min-height: 24px; flex-wrap: wrap; }
html.ui-slate .sl-card__head:has(> .sl-card__title) { flex-wrap: nowrap; align-items: flex-start; }
html.ui-slate .sl-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; flex: 1 1 auto; }
html.ui-slate .sl-card__title .sl-src { margin: 0; }
html.ui-slate .sl-card__title ~ * { flex: none; }
html.ui-slate .eyebrow { font: 600 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
html.ui-slate .muted { color: var(--text-2); }
html.ui-slate .faint { color: var(--text-3); }
html.ui-slate .st-small { font-size: var(--fs-xs); }
html.ui-slate .st-empty { padding: 20px; border: 1px dashed var(--line-strong); border-radius: 12px; text-align: center; color: var(--text-2); font-size: var(--fs-sm); }
html.ui-slate .si { width: 18px; height: 18px; flex: none; }

/* Chips, links, buttons */
html.ui-slate .sl-chip-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }
html.ui-slate .sl-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px;
  font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  background: var(--surface-3); color: var(--text-2);
}
html.ui-slate button.sl-chip { min-height: 32px; position: relative; }
html.ui-slate button.sl-chip::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
html.ui-slate .sl-chip .si { width: 14px; height: 14px; }
html.ui-slate .sl-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
html.ui-slate .sl-chip.sl-chip--go { background: var(--go-bg); color: var(--go); }
html.ui-slate .sl-chip.sl-chip--caution { background: var(--caution-bg); color: var(--caution); }
html.ui-slate .sl-chip.sl-chip--stop { background: var(--stop-bg); color: var(--stop); }
html.ui-slate .sl-chip.sl-chip--accent { background: var(--accent-bg); color: var(--accent); }
/* Garmin-only features: neutral outline so it reads as a label, not a status. */
html.ui-slate .sl-chip.sl-chip--garmin,
html.ui-slate .sl-chip.sl-chip--quiet { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); min-height: 22px; padding: 0 8px; }
html.ui-slate .sl-chip.sl-chip--sm { min-height: 22px; padding: 0 6px; font-size: 11px; letter-spacing: .02em; }
html.ui-slate .sl-card--locked { opacity: .85; }
html.ui-slate .sl-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
html.ui-slate .st-link {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 4px; border-radius: 8px;
  color: var(--text-2); font: 500 var(--fs-sm) var(--font-ui); text-decoration: none; transition: color .15s var(--ease-out);
}
html.ui-slate .st-link:hover { color: var(--text); }
html.ui-slate .st-link .si { width: 16px; height: 16px; }
/* Inline text button: exempt from the legacy 44px button minimum, which would stretch the text line. */
html.ui-slate .st-inline { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; padding: 0; min-height: 0 !important; min-width: 0 !important; display: inline; }
html.ui-slate .sl-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; margin-top: 16px;
  border-radius: 12px; background: var(--accent); color: var(--on-accent); font: 600 var(--fs-base) var(--font-ui);
  transition: filter .15s var(--ease-out), transform .15s var(--ease-out);
}
html.ui-slate .sl-button:hover { filter: brightness(1.08); }
html.ui-slate .sl-button:active { transform: scale(.98); }
html.ui-slate .sl-button[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
html.ui-slate .sl-button.sl-button--secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); }
html.ui-slate .sl-button .si { width: 18px; height: 18px; }

/* Trend tag (vs 7-day median) */
html.ui-slate .sl-trend { display: inline-flex; align-items: center; gap: 1px; margin-left: 6px; vertical-align: middle; white-space: nowrap;
  font: 600 var(--fs-xs)/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text-3); }
html.ui-slate .sl-trend svg { width: 14px; height: 14px; stroke-width: 2.5; }
html.ui-slate .sl-trend.sl-trend--good { color: var(--go); } html.ui-slate .sl-trend.sl-trend--bad { color: var(--stop); }

/* Gauge (270° arc) */
html.ui-slate .st-gauge { position: relative; width: 168px; height: 168px; margin: 0 auto; }
html.ui-slate .st-gauge svg { width: 100%; height: 100%; transform: rotate(135deg); }
html.ui-slate .st-gauge .track { stroke: var(--surface-3); }
html.ui-slate .st-gauge .val { transition: stroke-dasharray .8s var(--ease-out); }
html.ui-slate .st-gauge .val[data-zero] { visibility: hidden; }
html.ui-slate .st-gauge .c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
html.ui-slate .st-gauge .num { font-size: clamp(3.5rem, 2.8rem + 3vw, 5.25rem); line-height: .9; }
html.ui-slate .st-gauge .lbl { font-size: var(--fs-xs); color: var(--text-2); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
html.ui-slate .st-gauge .lbl:empty { display: none; }
html.ui-slate .st-gauge .lbl { max-width: 72%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Today: decision block */
html.ui-slate .st-hero { padding: 20px; container: hero / inline-size; }
@container slate (min-width: 600px) { html.ui-slate .st-hero { padding: 24px; } }
html.ui-slate .st-hero-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; }
@container hero (min-width: 480px) { html.ui-slate .st-hero-body { grid-template-columns: auto minmax(0, 1fr); gap: 24px; } }
@container hero (max-width: 479.98px) {
  html.ui-slate .st-hero .st-gauge { width: 148px; height: 148px; }
  html.ui-slate .st-hero .st-gauge-btn { margin-bottom: -20px; }
  html.ui-slate .st-hero .st-gauge .num { font-size: 3.4rem; }
}
/* The hit area is the ring itself: no button padding or border around the gauge, and the gauge's size sets the button's. */
html.ui-slate .st-gauge-btn { display: block; width: fit-content; margin-inline: auto; padding: 0; border: 0; border-radius: 50%; background: none; }
/* "Today's call" + check-in + go/no-go share one row: compact chips, 44px hit area kept via ::after. */
html.ui-slate .st-hero .sl-card__head { flex-wrap: nowrap; align-items: flex-start; }
html.ui-slate .st-hero .sl-card__head .eyebrow { white-space: nowrap; }
/* One row when it fits; when zoom or a narrow card runs out of room the go/no-go chip drops under the check-in chip, both on the right. */
html.ui-slate .st-hero .sl-chip-group { flex-wrap: wrap; justify-content: flex-end; align-items: center; min-width: 0; max-width: 100%; gap: 4px; }
html.ui-slate .st-hero .sl-chip { flex: none; max-width: 100%; min-height: 24px; padding: 0 8px; gap: 4px; font-size: 11px; letter-spacing: .02em; }
html.ui-slate .st-hero button.sl-chip { position: relative; min-height: 24px !important; min-width: 0 !important; }
html.ui-slate .st-hero button.sl-chip::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
html.ui-slate .st-hero .sl-chip .si { width: 12px; height: 12px; }
html.ui-slate .st-hero .sl-chip i { width: 6px; height: 6px; }
/* today.js fitChips() shortens the go/no-go pill only as far as the row needs. */
html.ui-slate .st-hero .sl-chip-group.fit-short .v-word,
html.ui-slate .st-hero .sl-chip-group.fit-bare .v-lvl { display: none; }
html.ui-slate .st-verdict h2 { font: 700 clamp(1.5rem, 1.1rem + 3cqi, 2.4rem)/1.02 var(--font-display); text-transform: uppercase; margin: 0 0 4px; color: var(--text); text-wrap: balance; }
html.ui-slate .st-verdict .sub { color: var(--text-2); font-size: var(--fs-md); margin: 0; }
html.ui-slate .st-verdict-toggle { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; text-align: inherit; cursor: pointer; }
html.ui-slate .st-verdict-toggle .chev { flex: none; width: 16px; height: 16px; color: var(--text-2); transition: transform .2s var(--ease-out); }
html.ui-slate .st-verdict-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
html.ui-slate .st-verdict .sub[hidden] { display: none; }
/* A coach-ask change: sits above the session name, not in the no-wrap header row (it pushed that row past the card). */
html.ui-slate .st-verdict-chip { margin: 0 0 8px; max-width: 100%; }
@container hero (max-width: 479.98px) { html.ui-slate .st-verdict-chip { display: flex; width: fit-content; margin-inline: auto; } }
html.ui-slate .st-verdict h2 { overflow: hidden; }
@container hero (max-width: 479.98px) { html.ui-slate .st-verdict h2, html.ui-slate .st-verdict .sub { text-align: center; } }
/* Centred layout: the name is centred on the card; the chevron hangs off the right edge (equal side padding keeps the text true-centre). */
@container hero (max-width: 479.98px) { html.ui-slate .st-verdict-toggle { position: relative; padding-inline: 22px; } html.ui-slate .st-verdict-toggle .chev { position: absolute; right: 0; top: 50%; margin-top: -8px; } }
html.ui-slate .st-targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 20px 0 0; background: var(--line); border-radius: 12px; overflow: hidden; }
html.ui-slate .st-targets > div { background: var(--surface-2); padding: 10px 12px; min-width: 0; }
html.ui-slate .st-targets dt { font-size: var(--fs-xs); color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
html.ui-slate .st-targets dd { margin: 2px 0 0; font: 600 clamp(18px, 5.2vw, var(--fs-lg))/1.2 var(--font-display); font-variant-numeric: tabular-nums; overflow-wrap: break-word; text-wrap: balance; }
/* Targets can be words (BBA focus, "RPE 6–7 (Z2–Z4)"): wrap between words, never inside a number (the old `anywhere` split digits). */
@container hero (min-width: 480px) { html.ui-slate .st-targets dd { font-size: var(--fs-xl); } }
/* Very narrow hero (≈320px phone at 125% zoom): one row per target so a word like "hypertrophy" is never cut mid-word. */
@container hero (max-width: 299.98px) { html.ui-slate .st-targets { grid-template-columns: minmax(0, 1fr); } html.ui-slate .st-targets > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } html.ui-slate .st-targets dd { text-align: right; } }
html.ui-slate .st-caution { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; background: var(--caution-bg); border-radius: 12px; font-size: var(--fs-sm); color: var(--text); }
html.ui-slate .st-caution > .si { color: var(--caution); margin-top: 1px; }
html.ui-slate .st-caution--info { background: var(--surface-2); }
html.ui-slate .st-caution--info > .si { color: var(--muted); }
/* A cyclist's BBA strength class today (ui/bba-program.js addon), under the session targets. */
html.ui-slate .st-addon { display: flex; gap: 10px; align-items: flex-start; width: 100%; margin-top: 12px; padding: 10px 12px; background: var(--surface-2); border-radius: 12px; font-size: var(--fs-sm); color: var(--text); text-align: left; }
html.ui-slate .st-addon > .si { color: var(--accent); margin-top: 1px; flex: none; }
html.ui-slate .st-addon > span { flex: 1; min-width: 0; }
html.ui-slate .st-addon > .chev { color: var(--text-2); align-self: center; }
html.ui-slate .st-addon:hover { background: var(--surface-3, var(--surface-2)); }
html.ui-slate .st-why { margin-top: 16px; border-top: 1px solid var(--line); }
html.ui-slate .st-why > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none; color: var(--text-2); font: 600 var(--fs-sm) var(--font-ui); }
html.ui-slate .st-why > summary::-webkit-details-marker { display: none; }
html.ui-slate .st-why > summary .chev { transition: transform .2s var(--ease-out); transform: rotate(90deg); }
html.ui-slate .st-why[open] > summary .chev { transform: rotate(-90deg); }
html.ui-slate .st-why .st-factors { margin-top: 0; border-top: 0; padding-top: 4px; }
html.ui-slate .st-factors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
@container hero (min-width: 400px) { html.ui-slate .st-factors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container hero (min-width: 680px) { html.ui-slate .st-factors { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
html.ui-slate .st-factor { display: block; text-align: left; padding: 6px 4px; border-radius: 8px; min-width: 0; min-height: 0; color: inherit; }
html.ui-slate button.st-factor:hover { background: var(--surface-2); }
/* Label left, value + arrow right (as in the POC); nowrap, so six across only once there's room. */
html.ui-slate .st-factor .top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
html.ui-slate .st-factor .top > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.ui-slate .st-factor .top > span:last-child { display: flex; align-items: center; flex: none; }
html.ui-slate .st-factor .num { font-size: var(--fs-lg); line-height: 1; color: var(--text); }
html.ui-slate .st-factor .sl-trend { margin-left: 2px; }
html.ui-slate .st-factor .sl-trend svg { width: 13px; height: 13px; }
html.ui-slate .st-factor .bar { display: block; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
html.ui-slate .st-factor .bar > span { display: block; height: 100%; border-radius: inherit; background: var(--c); transform-origin: left; animation: stGrow .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms + 120ms); }
@keyframes stGrow { from { transform: scaleX(0); } }
html.ui-slate .st-hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; flex-wrap: wrap; font-size: var(--fs-xs); }
html.ui-slate .st-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
/* Today's call: Last week · Workout · Why this call share one full-width row
   (still wraps on the narrowest phones rather than scrolling sideways). */
html.ui-slate .st-hero-foot .st-actions { width: 100%; justify-content: space-between; }
html.ui-slate .st-hero-foot .st-actions .st-link { white-space: nowrap; }

/* Rail */
html.ui-slate .st-rail { display: grid; gap: 12px; align-content: start; }
/* From 600px: Sleep | Recovery side by side, Recent activity (and the
   no-device Last night card) full width. Today's call and This week are full
   rows of the page grid above and below it. */
@container slate (min-width: 600px) {
  html.ui-slate .st-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  html.ui-slate .st-rail > :is(.st-recent, .st-self) { grid-column: span 2; }
}
@container slate (min-width: 960px) { html.ui-slate .st-rail { gap: 20px; } }
html.ui-slate .st-plain { display: block; width: 100%; text-align: left; border-radius: 12px; color: inherit; }
html.ui-slate .st-big { font: 600 clamp(1.75rem, 1.5rem + 1.2vw, 2.4rem)/1 var(--font-display); font-variant-numeric: tabular-nums; display: block; }
html.ui-slate .st-big small { font-size: .5em; color: var(--text-2); font-weight: 500; margin-left: 2px; }
html.ui-slate .st-stack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; margin-top: 14px; }
html.ui-slate .st-stack span { background: var(--c); }
html.ui-slate .st-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: var(--fs-xs); color: var(--text-2); }
html.ui-slate .st-legend span { display: inline-flex; align-items: center; gap: 6px; }
html.ui-slate .st-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
html.ui-slate .st-legend b { color: var(--text); font-weight: 600; }
html.ui-slate .st-kv {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; min-height: 48px; padding: 8px 4px;
  border-top: 1px solid var(--line); text-align: left; font-size: var(--fs-sm); color: inherit; border-radius: 0;
}
html.ui-slate .st-kv:first-of-type { border-top: 0; }
/* Admin → App health: long values (commits, chips, agent text) wrap instead of widening the sheet. */
html.ui-slate .adm, html.ui-slate .adm-sec { min-width: 0; max-width: 100%; }
html.ui-slate .adm .st-kv > span:last-child { min-width: 0; text-align: right; overflow-wrap: anywhere; }
html.ui-slate .adm .st-kv > span:first-child { flex: none; }
html.ui-slate .adm .st-row .s { overflow-wrap: anywhere; }
html.ui-slate .adm .st-row .end { max-width: 45%; }
html.ui-slate button.st-kv:hover { background: var(--surface-2); }
html.ui-slate .st-kv .num { font-size: var(--fs-xl); }
html.ui-slate .st-band { position: relative; height: 6px; margin: 4px 4px 4px; background: var(--surface-3); border-radius: 3px; }
html.ui-slate .st-band .ok { position: absolute; top: 0; bottom: 0; background: var(--go-bg); border-left: 1px solid var(--go); border-right: 1px solid var(--go); }
html.ui-slate .st-band .dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 3px var(--surface); }
html.ui-slate .st-rail .faint.st-small { padding: 0 4px 6px; }

/* Plan week + block line */
html.ui-slate .st-plan { display: flex; flex-direction: column; }
html.ui-slate .st-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
html.ui-slate .st-day { display: flex; flex-direction: column; gap: 6px; min-height: 104px; padding: 10px 8px; background: var(--surface-2); border: 1px solid transparent; border-radius: 12px; min-width: 0; }
html.ui-slate .st-day.today { border-color: var(--accent); }
/* Next 7 days / Week plan rows open the day's session sheet. */
html.ui-slate button.st-day, html.ui-slate button.tr-hbar-btn { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
html.ui-slate button.st-day:hover { border-color: var(--line-strong); }
html.ui-slate button.tr-hbar-btn { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
html.ui-slate button.tr-hbar-btn:first-child { border-top: 0; }
html.ui-slate button.tr-hbar-btn:hover { background: var(--surface-2); }
html.ui-slate .st-day .dow { font-size: var(--fs-xs); color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
html.ui-slate .st-day .z { height: 3px; border-radius: 2px; background: var(--c); }
html.ui-slate .st-day .type { font-size: var(--fs-sm); font-weight: 700; color: var(--text); line-height: 1.25; hyphens: auto; overflow-wrap: break-word; }
/* Today: the weekday stays, with a "Today" tag under it; its session is the accent. */
html.ui-slate .st-day .now { display: block; margin-top: 2px; color: var(--accent); font-weight: 700; }
html.ui-slate .st-day.today { background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
html.ui-slate .st-day.today .type { color: var(--accent); }
/* Days already gone this week: what was done, dimmed. */
html.ui-slate .st-day.past { opacity: .55; }
html.ui-slate .st-day.past .type { font-weight: 500; color: var(--text-2); }
html.ui-slate .st-day .h { margin-top: auto; font: 600 var(--fs-lg)/1 var(--font-display); font-variant-numeric: tabular-nums; }
@media (max-width: 559px) {
  html.ui-slate .st-week { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html.ui-slate .st-day { flex-direction: row; align-items: center; min-height: 48px; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 8px 0; gap: 12px; }
  html.ui-slate .st-day:first-child { border-top: 0; }
  html.ui-slate .st-day.today .dow { color: var(--accent); }
  html.ui-slate .st-day.today { background: none; }
  /* Sized in em so "TODAY" always fits on one line at any font scale (other
     languages use a short form there: "AUJ.", S.tc('dow', 'Today')). */
  html.ui-slate .st-day .dow { width: 4.6em; flex: none; }
  html.ui-slate .st-day .z { width: 3px; height: 24px; flex: none; }
  html.ui-slate .st-day .type { flex: 1; min-width: 0; font-size: var(--fs-sm); }
  /* A long activity name stays on one line, so the time stays inside the card. */
  html.ui-slate .st-day.past .type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ui-slate .st-day .h { margin: 0; flex: none; }
}
/* Today's row when readiness swapped its session; the week's Garmin ⋯ (watch.js). */
html.ui-slate .st-adj { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); }
html.ui-slate .st-adj--inline { display: inline; margin: 0; }
html.ui-slate .st-plan-tools { display: inline-flex; align-items: center; gap: 10px; }
html.ui-slate .st-plan .sl-menu { margin: -8px -6px -8px 0; }
html.ui-slate .tr-week-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; }
html.ui-slate .tr-week-tools .sl-menu { margin: -6px -6px -6px 0; }
/* Send to Garmin, in a workout sheet. */
html.ui-slate .sl-watch { margin: 16px 0 10px; }
html.ui-slate .sl-watch__row { display: flex; flex-wrap: wrap; gap: 8px; }
html.ui-slate .sl-watch__note { margin: 6px 0 0; }
html.ui-slate .st-why { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
html.ui-slate .st-block { margin: auto 0 0; padding-top: 14px; font-size: var(--fs-sm); color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
html.ui-slate .st-block b { color: var(--text); font: 600 var(--fs-md) var(--font-display); font-variant-numeric: tabular-nums; }
html.ui-slate .st-block .st-link { margin-left: auto; }

/* Rows */
html.ui-slate .st-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 4px; text-align: left; border-top: 1px solid var(--line); border-radius: 0; color: inherit; }
html.ui-slate .st-row:first-of-type { border-top: 0; }
html.ui-slate .st-row:hover { background: var(--surface-2); }
html.ui-slate .st-row .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-3); display: grid; place-items: center; color: var(--text-2); flex: none; }
html.ui-slate .st-row .body { flex: 1; min-width: 0; }
html.ui-slate .st-row .t { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-slate .st-row .s { display: block; font-size: var(--fs-xs); color: var(--text-2); }
/* Recent activity: phones show 3 compact rows; from 600px, 5 rows with
   HR / power / elevation / calories / load columns. */
html.ui-slate .st-row__stats { display: none; }
@container slate (max-width: 599.98px) { html.ui-slate .st-row--more { display: none; } }
@container slate (min-width: 600px) {
  html.ui-slate .st-row__stats { display: flex; flex: none; gap: 12px; }
  html.ui-slate .st-row__stat { display: flex; flex-direction: column; align-items: flex-end; width: 80px; }
  html.ui-slate .st-row__stat b { font: 600 var(--fs-md)/1.1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
  html.ui-slate .st-row__stat b small { margin-left: 2px; font: 500 var(--fs-xs) var(--font-ui); color: var(--text-3); }
  html.ui-slate .st-row__stat i { font: 500 var(--fs-xs)/1.3 var(--font-ui); font-style: normal; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
  html.ui-slate .st-row:has(.st-row__stat--kcal) .end--kcal { visibility: hidden; }   /* keeps the column, drops the duplicate kcal */
  html.ui-slate .st-row .end { min-width: 72px; text-align: right; }
}
@container slate (min-width: 600px) and (max-width: 879.98px) { html.ui-slate .st-row__stat--elev { display: none; } }
@container slate (min-width: 600px) and (max-width: 759.98px) { html.ui-slate .st-row__stat--power { display: none; } }
html.ui-slate .st-row .end { flex: none; text-align: right; font-size: var(--fs-xs); color: var(--text-2); }
html.ui-slate .st-row .end .num { display: block; font-size: var(--fs-lg); color: var(--text); }
html.ui-slate .st-row .chev { width: 16px; height: 16px; color: var(--text-3); }

/* Sheet content */
html.ui-slate .st-p { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; margin: 0 0 8px; }
html.ui-slate .st-h3 { font: 600 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin: 20px 0 8px; }
html.ui-slate .st-kv.static { min-height: 44px; }
/* Why this call → Main vs second device. Fixed columns, one line per row, no scroll. */
html.ui-slate .st-cmp { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-sm); }
html.ui-slate .st-cmp col:first-child { width: 34%; }
html.ui-slate .st-cmp th, html.ui-slate .st-cmp td { padding: 8px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--line); }
html.ui-slate .st-cmp thead th { border-top: 0; padding-top: 0; text-align: right; font: 600 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .04em; color: var(--text); }
html.ui-slate .st-cmp thead th.faint { color: var(--text-3); }
html.ui-slate .st-cmp abbr { text-decoration: none; }
html.ui-slate .st-cmp tbody th { text-align: left; font-weight: 400; color: var(--text-2); }
html.ui-slate .st-cmp td { text-align: right; font-weight: 500; }
html.ui-slate .st-cmp small { font: 500 .75em var(--font-ui); }
html.ui-slate .st-notes { list-style: none; margin: 0; padding: 0; }
html.ui-slate .st-notes li { position: relative; padding: 8px 0 8px 18px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); }
html.ui-slate .st-notes li:first-child { border-top: 0; }
html.ui-slate .st-notes li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
html.ui-slate .st-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; margin: 12px 0 0; }
html.ui-slate .st-stats > div { background: var(--surface-2); padding: 12px; }
html.ui-slate .st-stats dt { font-size: var(--fs-xs); color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
html.ui-slate .st-stats dd { margin: 0; font: 600 var(--fs-xl)/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
/* Weekly review: three numbers in one row, each with its 4-week average under it. */
html.ui-slate .st-stats--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.ui-slate .st-stats--three dd { font-size: var(--fs-lg); }
html.ui-slate .st-stats .wr-vs { display: block; margin-top: 2px; font: 500 var(--fs-xs)/1.2 var(--font-ui); }
html.ui-slate .wr-punch { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
html.ui-slate .wr-range { margin: 0 0 16px; }
html.ui-slate .st-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
html.ui-slate .st-steps li { counter-increment: s; position: relative; padding: 10px 0 10px 36px; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
html.ui-slate .st-steps li:first-child { border-top: 0; }
html.ui-slate .st-steps li::before { content: counter(s); position: absolute; left: 0; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font: 600 var(--fs-xs)/1 var(--font-ui); color: var(--text-2); }
html.ui-slate .st-steps b { display: block; font-weight: 600; }
html.ui-slate .st-steps span { color: var(--text-2); }
html.ui-slate .sl-segmented { display: flex; width: 100%; padding: 3px; margin-top: 16px; background: var(--surface-2); border-radius: 12px; gap: 2px; max-width: 100%; overflow-x: auto; container-type: inline-size; }
/* Long labels (French "Récupération · Sommeil · Énergie · Tendances") share
   the row by width and the type steps down with the row's width (cqi) instead
   of spilling past the button edge; ellipsis is only the last resort. */
html.ui-slate .sl-segmented > button { flex: 1 1 auto; min-height: 44px; min-width: 0; padding: 0 clamp(4px, 1.6cqi, 10px); border-radius: 9px; color: var(--text-2); font: 600 min(var(--fs-sm), 3.5cqi) var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-slate .sl-segmented > button[aria-selected="true"], html.ui-slate .sl-segmented > button[aria-checked="true"] { background: var(--surface-3); color: var(--text); }
html.ui-slate .st-chart { position: relative; height: 200px; margin-top: 12px; }
html.ui-slate .st-rd-head { display: flex; align-items: center; gap: 16px; }
html.ui-slate .st-rd-head .st-gauge { width: 96px; height: 96px; margin: 0; }
html.ui-slate .st-rd-head .st-gauge .num { font-size: 2.2rem; }
html.ui-slate .st-rd-head .st-gauge .lbl { display: none; }
html.ui-slate #stRdBreakdownHost .rb-card { margin-top: 20px; }
html.ui-slate .st-sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
html.ui-slate .st-sheet-foot .sl-button { margin-top: 0; }

/* Check-in */
html.ui-slate .st-steps-dots { display: flex; gap: 6px; margin-bottom: 4px; }
html.ui-slate .st-steps-dots i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); }
html.ui-slate .st-steps-dots i.on { background: var(--accent); }
html.ui-slate .sl-option-group { display: grid; gap: 8px; }
html.ui-slate .sl-option { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); text-align: left; width: 100%; color: var(--text); font-weight: 500; }
html.ui-slate .sl-option small { display: block; font-size: var(--fs-xs); color: var(--text-2); font-weight: 400; }
html.ui-slate .sl-option[aria-checked="true"] { border-color: var(--accent); background: var(--accent-bg); }
html.ui-slate .sl-option .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--text-3); flex: none; display: grid; place-items: center; }
html.ui-slate .sl-option[aria-checked="true"] .radio { border-color: var(--accent); }
html.ui-slate .sl-option[aria-checked="true"] .radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
html.ui-slate .st-tags { display: flex; flex-wrap: wrap; gap: 8px; }
html.ui-slate .st-tag { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-2); font: 500 var(--fs-sm) var(--font-ui); }
html.ui-slate .st-tag[aria-pressed="true"] { background: var(--accent-bg); border-color: var(--accent); color: var(--text); }

/* Glance drawer */
html.ui-slate .st-h3 + .sl-attr { margin: -4px 0 10px; }
html.ui-slate .gl-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; align-items: center; width: 100%; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid transparent; text-align: left; color: inherit; transition: border-color .15s var(--ease-out); }
html.ui-slate .gl-head:hover, html.ui-slate .gl-tile:hover { border-color: var(--line-strong); }
html.ui-slate .gl-left { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
html.ui-slate .gl-left .st-gauge { width: 76px; height: 76px; margin: 0; }
html.ui-slate .gl-left .st-gauge .num { font-size: 1.9rem; }
html.ui-slate .gl-ring-lbl { font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
html.ui-slate .gl-right { min-width: 0; }
html.ui-slate .gl-dir { display: inline-flex; align-items: center; gap: 2px; font: 600 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
html.ui-slate .gl-dir svg { width: 12px; height: 12px; stroke-width: 2.5; }
html.ui-slate .gl-dir.up { color: var(--go); } html.ui-slate .gl-dir.down { color: var(--caution); } html.ui-slate .gl-dir.flat { color: var(--text-2); }
html.ui-slate .gl-head strong { display: block; font-size: var(--fs-md); margin: 2px 0; }
html.ui-slate .gl-head p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.45; }
/* Full-width KPI row under both the ring and the feedback; its divider spans the card. */
html.ui-slate .gl-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-strong); font-size: var(--fs-xs); color: var(--text-2); }
html.ui-slate .gl-stats > span { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
html.ui-slate .gl-stats b { color: var(--text); font: 600 var(--fs-md)/1 var(--font-display); font-variant-numeric: tabular-nums; }
html.ui-slate .gl-stats b small { font: 500 var(--fs-xs) var(--font-ui); color: var(--text-2); margin-left: 1px; }
html.ui-slate .gl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
html.ui-slate .gl-tile { display: flex; flex-direction: column; gap: 6px; min-height: 124px; padding: 12px; border-radius: 16px; background: var(--surface-2); border: 1px solid transparent; text-align: left; color: inherit; min-width: 0; transition: border-color .15s var(--ease-out); }
html.ui-slate .gl-tile .lbl { display: flex; align-items: center; gap: 6px; font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
html.ui-slate .gl-tile .lbl .si { width: 14px; height: 14px; }
html.ui-slate .gl-tile .lbl i { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; background: var(--c); }
html.ui-slate .gl-tile .val { font: 600 var(--fs-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
html.ui-slate .gl-tile .val small { font-size: .55em; color: var(--text-2); margin-left: 2px; font-weight: 500; }
html.ui-slate .gl-tile .st-stack { margin-top: 4px; }
html.ui-slate .gl-note { margin-top: auto; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.35; }
html.ui-slate .gl-note b { color: var(--text); font-weight: 600; }
html.ui-slate .gl-bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
html.ui-slate .gl-bars span { flex: 1; height: var(--h); min-height: 3px; border-radius: 2px; background: var(--surface-3); }
html.ui-slate .gl-bars span.now { background: var(--accent); }
html.ui-slate .gl-meter { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
html.ui-slate .gl-meter span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
html.ui-slate .gl-links { display: grid; margin-top: 4px; }
html.ui-slate .gl-links + .gl-links { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line-strong); }
html.ui-slate .gl-links button { font: inherit; font-weight: 500; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 4px; border-top: 1px solid var(--line); font-weight: 500; color: var(--text); text-align: left; width: 100%; border-radius: 0; }
html.ui-slate .gl-links button:first-child { border-top: 0; }
html.ui-slate .gl-links a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 4px; border-top: 1px solid var(--line); font-weight: 500; color: var(--text); text-decoration: none; width: 100%; }
html.ui-slate .gl-links a:first-child { border-top: 0; }
html.ui-slate .gl-links a > .si:first-child { color: var(--text-2); }
html.ui-slate .gl-links button > .si:first-child { color: var(--text-2); }
html.ui-slate .gl-links .sub { color: var(--text-3); font-weight: 400; font-size: var(--fs-sm); }
html.ui-slate .gl-links .meta { margin-left: auto; color: var(--text-3); font-size: var(--fs-xs); }
html.ui-slate .gl-links .chev { margin-left: auto; width: 16px; height: 16px; color: var(--text-3); }
html.ui-slate .gl-links .meta + .chev { margin-left: 8px; }
html.ui-slate .sl-sheet__head .lead .slate-avatar { width: 44px; height: 44px; }

@media (prefers-reduced-motion: reduce) {
  html.ui-slate .sl-card, html.ui-slate .st-factor .bar > span, html.ui-slate .st-gauge .val { animation: none; transition: none; }
}
/* An odd last stat spans the row instead of leaving an empty cell. */
html.ui-slate .st-stats > div:last-child:nth-child(odd) { grid-column: span 2; }
/* Three columns: the last tile fills what's left of its row (5 tiles → spans 2, 7 → spans 3, 6/9 → as is). */
html.ui-slate .st-stats--three > div:last-child:nth-child(odd) { grid-column: auto; }
html.ui-slate .st-stats--three > div:last-child:nth-child(3n+2) { grid-column: span 2; }
html.ui-slate .st-stats--three > div:last-child:nth-child(3n+1) { grid-column: span 3; }

/* ── Ride detail sheet body (rides.js, ride-fit.js) ─────────────────────────────────────── */
/* The classic title/sub are mirrored into the Slate sheet head. */
html.ui-slate .ride-sheet-body > .sheet-title,
html.ui-slate .ride-sheet-body > .sheet-sub,
html.ui-slate .ride-sheet-body > div > .sheet-title:first-child,
html.ui-slate .ride-sheet-body > div > .sheet-sub { display: none; }
html.ui-slate .ride-sheet-body .chart-wrap { position: relative; }
html.ui-slate .ride-sheet-body .stat-mini { background: var(--surface-2); border: 0; border-radius: 12px; }
/* Endurance trend: the 7D/14D/MTD/30D range reads as the Slate segmented control. */
html.ui-slate .ride-sheet-body #enduranceRange { display: flex !important; width: 100%; padding: 3px; gap: 2px; background: var(--surface-2); border-radius: 12px; }
html.ui-slate .ride-sheet-body #enduranceRange .zone-method-btn { flex: 1 1 0; min-height: 38px; min-width: 52px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: 600 var(--fs-sm) var(--font-ui); }
html.ui-slate .ride-sheet-body #enduranceRange .zone-method-btn.active { background: var(--surface-3); color: var(--text); }

/* ── Train (train.js) ────────────────────────────────────────────────────── */
html.ui-slate #tab-training.active { display: block; }
html.ui-slate #tab-training > :not(.slate-screen):not(.pull-refresh-indicator) { display: none !important; }
html.ui-slate .tr-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 0; background: var(--line); overflow: hidden; }
@container slate (min-width: 520px) { html.ui-slate .tr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container slate (min-width: 960px) { html.ui-slate .tr-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
html.ui-slate .tr-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--surface); padding: 16px 18px; min-width: 0; text-align: left; color: inherit; border-radius: 0; min-height: 0; }
html.ui-slate button.tr-kpi:hover { background: var(--surface-2); }
html.ui-slate .tr-kpi .v { font: 600 clamp(20px, 6vw, 2.2rem)/1 var(--font-display); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; gap: 0 2px; }
html.ui-slate .tr-kpi .v small { font-size: .5em; color: var(--text-2); font-weight: 500; margin-left: 3px; }
html.ui-slate .tr-kpi .d { font-size: var(--fs-xs); color: var(--text-2); }
html.ui-slate .tr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-xs); color: var(--text-2); margin-bottom: 4px; }
html.ui-slate .tr-legend span { display: inline-flex; align-items: center; gap: 6px; }
html.ui-slate .tr-legend i { width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
html.ui-slate .tr-legend i.box { width: 10px; height: 10px; }
html.ui-slate .tr-legend i.dash { background: none; border-top: 2px dashed var(--c); height: 0; }
/* FTP progression: hero number + change, window switch, chart. */
html.ui-slate .tr-ftp-hero { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 2px 0 12px; }
html.ui-slate .tr-ftp-hero .num { font: 600 clamp(2.2rem, 1.8rem + 1.6vw, 3rem)/.9 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text); }
html.ui-slate .tr-ftp-hero .num small { font-size: .42em; color: var(--text-2); font-weight: 500; margin-left: 3px; }
html.ui-slate .tr-ftp-hero .meta { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--text-2); padding-bottom: 2px; }
html.ui-slate .tr-ftp-hero .meta b { color: var(--text); font-weight: 600; font-size: var(--fs-sm); }
html.ui-slate .tr-ftp-hero .sl-trend { font-weight: 600; }
html.ui-slate .tr-ftp-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
html.ui-slate .tr-ftp-bar .sl-segmented { margin: 0; flex: 1 1 auto; }
html.ui-slate .tr-ftp-bar .sl-segmented > button { min-height: 32px; font-size: var(--fs-xs); }
html.ui-slate .tr-ftp-bar .sl-chip { flex: none; }
/* Rider profile radar: shape at a glance, the bars below keep the exact numbers. */
html.ui-slate .tr-radar { margin: 4px 0 8px; }
html.ui-slate .tr-radar-box { position: relative; height: 260px; max-width: 360px; margin: 0 auto; }
@container slate (min-width: 960px) { html.ui-slate .tr-radar-box { height: 300px; } }
html.ui-slate .tr-chart { height: 240px; }
@container slate (min-width: 960px) { html.ui-slate .tr-chart { height: 260px; } }
/* Week plan / Load balance / Rider profile switch (from the POC). */
html.ui-slate { --z1: #8A93A1; --z2: #5AA9E6; --z3: #3DDC97; --z4: #F5A524; --z5: #F2555A; }
html.ui-slate .tr-detail-seg { margin: 0 0 12px; }
html.ui-slate .tr-hbar { display: grid; grid-template-columns: 112px minmax(0, 1fr) 150px; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
html.ui-slate .tr-hbar:first-child, html.ui-slate .tr-lead + .tr-hbar { border-top: 0; }
html.ui-slate .tr-hbar .l { color: var(--text-2); }
html.ui-slate .tr-hbar.now .l { color: var(--accent); font-weight: 600; }
html.ui-slate .tr-hbar .now { display: block; margin-top: 2px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
html.ui-slate .tr-hbar.now { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
html.ui-slate .tr-hbar .sub .type { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
html.ui-slate .tr-hbar.now .sub .type { color: var(--accent); }
html.ui-slate .tr-hbar.past { opacity: .55; }
html.ui-slate .tr-hbar.past .sub .type { font-weight: 500; color: var(--text-2); }
html.ui-slate .tr-hbar .track { position: relative; display: block; height: 10px; background: var(--surface-3); border-radius: 5px; }
html.ui-slate .tr-hbar .fill { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--c); transform-origin: left; animation: stGrow .7s var(--ease-out) both; }
html.ui-slate .tr-hbar .target { position: absolute; top: -4px; bottom: -4px; border: 1px dashed var(--text-3); border-radius: 4px; }
html.ui-slate .tr-hbar .sub { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-3); }
html.ui-slate .tr-hbar .v { font: 600 var(--fs-lg)/1 var(--font-display); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
html.ui-slate .tr-hbar .v small { font: 500 var(--fs-xs) var(--font-ui); color: var(--text-2); margin-left: 1px; }
html.ui-slate .tr-lead { color: var(--text-2); margin: 0 0 8px; font-size: var(--fs-sm); }
html.ui-slate .tr-lead strong { color: var(--text); }
html.ui-slate .tr-foot { color: var(--text-3); font-size: var(--fs-xs); margin: 8px 0 0; }
html.ui-slate .tr-foot b { color: var(--text-2); }
html.ui-slate .tr-coach { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); }
@media (max-width: 559px) {
  html.ui-slate .tr-hbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t t"; gap: 8px 12px; }
  html.ui-slate .tr-hbar > :nth-child(1) { grid-area: l; } html.ui-slate .tr-hbar > :nth-child(2) { grid-area: t; } html.ui-slate .tr-hbar > :nth-child(3) { grid-area: v; }
}
@media (prefers-reduced-motion: reduce) { html.ui-slate .tr-hbar .fill { animation: none; } }
html.ui-slate .tr-sections { scroll-margin-top: 12px; }
html.ui-slate .tr-sections > .sl-segmented { margin: 4px 0 12px; }
/* Hosted classic cards: 1 column, 2 from 1200px. */
html.ui-slate .tr-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
html.ui-slate .tr-sec[hidden] { display: none; }
@container slate (min-width: 600px) { html.ui-slate .tr-sec { gap: 16px; } }
@container slate (min-width: 960px) { html.ui-slate .tr-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
html.ui-slate .tr-sec > .card { margin: 0; }
html.ui-slate .tr-sec > .card.tsub-off { display: block; }
html.ui-slate .mt-head { display: flex; align-items: flex-end; gap: 16px; }
html.ui-slate .mt-coach { margin-top: 16px; }

/* ── Rides (rides.js) ────────────────────────────────────────────────────── */
html.ui-slate #tab-rides.active { display: block; }
html.ui-slate #tab-rides > :not(.slate-screen):not(.pull-refresh-indicator) { display: none !important; }
html.ui-slate .slate-screen.no-anim .sl-card { animation: none; }
html.ui-slate .rd-range { display: flex; flex: 1 1 100%; gap: 4px; }
html.ui-slate .rd-range button { flex: 1 1 0; min-height: 36px; min-width: 44px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-strong); color: var(--text-2); font: 600 var(--fs-xs) var(--font-ui); letter-spacing: .06em; }
html.ui-slate .rd-range button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
html.ui-slate .rd-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
@container slate (min-width: 720px) { html.ui-slate .rd-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html.ui-slate .rd-sum .v { font: 600 clamp(1.75rem, 1.5rem + 1.2vw, 2.4rem)/1 var(--font-display); font-variant-numeric: tabular-nums; margin-top: 6px; }
html.ui-slate .rd-sum .v small { font-size: .5em; color: var(--text-2); font-weight: 500; margin-left: 3px; }
html.ui-slate .rd-sum .d { font-size: var(--fs-xs); color: var(--text-2); margin-top: 6px; }
html.ui-slate .rd-sum .d .sl-trend { margin: 0 4px 0 0; }
/* This week: headline numbers beside a Monday→Sunday strip (rides.js thisWeek()). */
html.ui-slate .rd-wk-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
html.ui-slate .rd-wk-days { display: grid; grid-template-columns: repeat(7, 22px); gap: 6px; height: 72px; }
html.ui-slate .rd-wk-days .d { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
html.ui-slate .rd-wk-days .b { width: 100%; height: var(--h); min-height: 3px; border-radius: 4px 4px 1px 1px; background: var(--surface-3); transform-origin: bottom; animation: stGrowY .6s var(--ease-out) both; }
html.ui-slate .rd-wk-days .d.now .b { background: var(--accent); }
html.ui-slate .rd-wk-days .d.future .b { background: transparent; border: 1px dashed var(--line-strong); min-height: 0; height: 3px; }
html.ui-slate .rd-wk-days .l { font: 600 var(--fs-xs)/1 var(--font-ui); color: var(--text-3); }
html.ui-slate .rd-wk-days .d.now .l { color: var(--text); }
/* Off-season week strip: wider columns, a value label over each bar (km / min / steps). */
html.ui-slate .rd-wk-days.os { grid-template-columns: repeat(7, 30px); height: 92px; }
html.ui-slate .rd-wk-days .v { font: 600 10px/1 var(--font-ui); color: var(--text-2); white-space: nowrap; min-height: 10px; letter-spacing: -.02em; }
html.ui-slate .rd-wk-days.os .b { flex: none; }
/* Ride sheet: Laps / HR zones / Power zones open as views inside the same sheet. */
html.ui-slate .ride-sheet-body .rs-sub:not(.rs-on), html.ui-slate .ride-sheet-body .rs-off { display: none !important; }
html.ui-slate .rs-drill { display: grid; margin: 12px 0; }
html.ui-slate .rs-drill .st-row { border: 0; border-radius: 0; }
html.ui-slate .rs-drill .st-row[hidden] { display: none; }
html.ui-slate .rs-laps { display: grid; font-size: var(--fs-sm); }
html.ui-slate .rs-laps .h, html.ui-slate .rs-laps .r {
  display: grid; grid-template-columns: var(--gtc); gap: 8px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line);
}
html.ui-slate .rs-laps .h { font: 600 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding-top: 0; }
html.ui-slate .rs-laps .r > span { font-variant-numeric: tabular-nums; }
html.ui-slate .rs-laps small { color: var(--text-3); margin-left: 2px; font-size: var(--fs-xs); }
html.ui-slate .rs-laps .n { color: var(--text-3); }
html.ui-slate .rs-laps .best { color: var(--accent); font-weight: 600; }
html.ui-slate .rs-laps .medal { margin-left: 4px; font-size: 1.1em; }
html.ui-slate .rs-laps .r.podium .n { color: var(--text); font-weight: 600; }
html.ui-slate .rd-vol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; height: 150px; }
html.ui-slate .rd-vol .col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
html.ui-slate .rd-vol .b { width: 100%; max-width: 56px; border-radius: 6px 6px 2px 2px; background: var(--surface-3); height: var(--h); min-height: 4px; transform-origin: bottom; animation: stGrowY .6s var(--ease-out) both; }
html.ui-slate .rd-vol .col.now .b { background: var(--accent); }
html.ui-slate .rd-vol .km { font: 600 var(--fs-md)/1 var(--font-display); font-variant-numeric: tabular-nums; }
html.ui-slate .rd-vol .wk { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
@keyframes stGrowY { from { transform: scaleY(0); } }
html.ui-slate .rd-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
html.ui-slate .rd-bar .sl-segmented { margin: 0; flex: 1 1 100%; }
html.ui-slate .rd-chips { display: flex; flex: 1 1 100%; gap: 4px; flex-wrap: nowrap; }
html.ui-slate .rd-chips[hidden] { display: none; }
html.ui-slate .rd-chips button { flex: 1 1 0; min-width: 0; min-height: 36px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-2); font: 500 var(--fs-sm) var(--font-ui); }
html.ui-slate .rd-chips button[aria-pressed="true"] { background: var(--accent-bg); border-color: var(--accent); color: var(--text); }
html.ui-slate .rd-chips button span { color: var(--text-3); margin-left: 4px; font-variant-numeric: tabular-nums; }
html.ui-slate .rd-wk { display: flex; justify-content: space-between; gap: 8px; padding: 16px 4px 8px; font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
html.ui-slate .rd-wk:first-child { padding-top: 0; }
html.ui-slate .rd-row .rd-metrics { display: flex; gap: 18px; text-align: right; flex: none; }
html.ui-slate .rd-row .rd-metrics > span { font-size: var(--fs-xs); color: var(--text-2); min-width: 44px; }
html.ui-slate .rd-row .rd-metrics .num { display: block; font-size: var(--fs-lg); color: var(--text); }
@media (max-width: 559px) { html.ui-slate .rd-row .rd-metrics .opt { display: none; } }
html.ui-slate .rd-cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
html.ui-slate .rd-cal-nav h2 { font: 700 var(--fs-xl)/1 var(--font-display); text-transform: uppercase; margin: 0; }
html.ui-slate .rd-cal-nav [disabled] { opacity: .35; cursor: not-allowed; }
html.ui-slate .rd-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
html.ui-slate .rd-cal .dow { font-size: var(--fs-xs); color: var(--text-2); text-align: center; padding: 4px 0; text-transform: uppercase; letter-spacing: .06em; }
html.ui-slate .rd-cal .cell { min-height: 76px; min-width: 0; padding: 6px; border-radius: 8px; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; text-align: left; border: 1px solid transparent; color: inherit; }
html.ui-slate .rd-cal .cell.out { background: none; }
html.ui-slate .rd-cal .cell.today { border-color: var(--accent); }
html.ui-slate .rd-cal button.cell:hover { border-color: var(--line-strong); }
html.ui-slate .rd-cal .dn { font-size: var(--fs-xs); color: var(--text-2); }
html.ui-slate .rd-cal .km { margin-top: auto; font: 600 var(--fs-md)/1 var(--font-display); font-variant-numeric: tabular-nums; }
html.ui-slate .rd-cal .km small { font-size: .7em; color: var(--text-2); font-weight: 500; }
html.ui-slate .rd-cal .ticks { display: flex; gap: 2px; }
html.ui-slate .rd-cal .ticks i { flex: 1; height: 3px; border-radius: 2px; background: var(--c); }
html.ui-slate .rd-cal .cnt { font-size: var(--fs-xs); color: var(--text-2); }
@media (max-width: 559px) { html.ui-slate .rd-cal .cell { min-height: 56px; padding: 4px; } html.ui-slate .rd-cal .km { font-size: var(--fs-sm); } html.ui-slate .rd-cal .cnt { display: none; } }
html.ui-slate .rd-cal-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: var(--fs-sm); color: var(--text-2); }
html.ui-slate .rd-cal-foot b { color: var(--text); font: 600 var(--fs-md) var(--font-display); }
html.ui-slate #rdMapHost #ridesViewMap > .card { padding: 0; border: 0; background: none; margin: 0; }
html.ui-slate #rdMapHost #ridesMapCanvas { border-radius: 12px !important; height: 62vh; min-height: 360px; }

/* ── Ride sheet (classic content in the Slate sheet) ─────────────────────── */
html.ui-slate .ride-sheet-body .sheet-map { height: 220px; border-radius: 16px; overflow: hidden; margin: 0 0 12px; }
html.ui-slate .ride-sheet-body .sheet-map-empty { border-radius: 16px; background: var(--surface-2); color: var(--text-2); }
/* Hero map (sheet.js setHero + rides.js heroMap): the route fills the top of the
   sheet edge to edge, the activity name follows it, and the header's Back / Close
   float over the map until it scrolls away, when the header turns solid. */
html.ui-slate .sl-sheet--hero { --rs-map-h: clamp(220px, 34vh, 320px); --rs-gutter: 20px; }
html.ui-slate .sl-sheet--hero .grab { position: absolute; top: 0; left: 0; right: 0; z-index: 1101; pointer-events: none; }
html.ui-slate .sl-sheet--hero .grab i { background: rgba(255, 255, 255, .9); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
html.ui-slate .sl-sheet--hero .sl-sheet__head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1100; padding: 14px 12px 10px;
  border-radius: inherit; background: transparent; transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
html.ui-slate .sl-sheet--hero .sl-sheet__head .ttl { opacity: 0; transition: opacity .2s var(--ease-out); }
html.ui-slate .sl-sheet--hero .sl-sheet__head h2 { font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-slate .sl-sheet--hero .sl-sheet__head small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-slate .sl-sheet--hero:not(.is-solid) .sl-sheet__head .sl-icon-button {
  background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--text);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
html.ui-slate .sl-sheet--hero.is-solid .sl-sheet__head { background: var(--surface); box-shadow: 0 1px 0 var(--line); }
html.ui-slate .sl-sheet--hero.is-solid .sl-sheet__head .ttl { opacity: 1; }
html.ui-slate .sl-sheet--hero:not(.is-solid) .sl-sheet__head .ttl { pointer-events: none; }
html.ui-slate .sl-sheet--hero #slateSheetBody { padding-top: 0; }
html.ui-slate .rs-hero #rideSheetBody { position: relative; }
html.ui-slate .rs-hero #rideSheetBody > .sheet-map {
  /* #sheetMap cancels the content zoom (index.html, for Leaflet's hit-testing),
     so its own lengths are real px: the bleed has to match the body's zoomed
     gutter (gutter × zoom) to reach both edges at 75 / 100 / 125 %. */
  height: var(--rs-map-h); margin: 0 calc(var(--rs-gutter) * -1 * var(--ui-zoom, 1)) calc(14px * var(--ui-zoom, 1));
  width: auto; max-width: none; border-radius: 20px 20px 0 0;
  /* Its own stacking context: Leaflet's panes (z 400-1000) stay under the sheet's header. */
  position: relative; isolation: isolate; z-index: 0;
}
/* Lock / unlock (phones) sits above the zoom buttons, in the same frosted style. */
html.ui-slate .rs-hero .leaflet-control-zoom, html.ui-slate .rs-map-lock { border: 0 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .25) !important; }
html.ui-slate .rs-hero .leaflet-control-zoom a { background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--text); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html.ui-slate .rs-hero .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; font-size: 20px; }
html.ui-slate .rs-map-lock { width: 40px; height: 40px; margin-bottom: 8px !important; background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--text); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html.ui-slate .rs-map-lock svg { width: 18px; height: 18px; }
html.ui-slate .sheet-map.is-unlocked .rs-map-lock { background: var(--accent); color: var(--on-accent); }
/* Fades the map's foot into the sheet; above the tiles, under Leaflet's controls. */
html.ui-slate .rs-hero #rideSheetBody > .sheet-map::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 450; pointer-events: none; background: linear-gradient(transparent, var(--surface)); }
html.ui-slate .rs-hero #rideSheetBody > .sheet-map[data-sheet-drag] { touch-action: pan-y; }
html.ui-slate .rs-hero #rideSheetBody > .sheet-map[data-sheet-drag] .leaflet-interactive { pointer-events: none; }
/* The name and date under the map (the header shows them only once solid). */
html.ui-slate .ride-sheet-body.rs-hero > #rideSheetBody > .sheet-title { display: block; padding: 0; margin: 0; font: 700 var(--fs-2xl)/1.1 var(--font-display); text-transform: uppercase; color: var(--text); overflow-wrap: anywhere; }
html.ui-slate .ride-sheet-body.rs-hero > #rideSheetBody > .sheet-sub { display: block; margin: 2px 0 14px; color: var(--text-2); font-size: var(--fs-sm); }
@media (min-width: 768px) {
  html.ui-slate .sl-sheet--hero { --rs-gutter: 24px; --rs-map-h: clamp(240px, 32vh, 340px); }
  html.ui-slate .sl-sheet--hero .grab { display: none; }
  html.ui-slate .sl-sheet--hero .sl-sheet__head { padding: 16px 16px 12px; }
  html.ui-slate .rs-hero #rideSheetBody > .sheet-map { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.ui-slate .sl-sheet--hero .sl-sheet__head, html.ui-slate .sl-sheet--hero .sl-sheet__head .ttl { transition: none; }
}
/* Ride power + training effect (ride-fit.js), under the verdict. */
html.ui-slate .rf-card { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
/* Read-only rows in the sheet's compact style (no 44px tap height, no dividers). */
html.ui-slate .rf-card .st-kv { min-height: 0; padding: 3px 0; border: 0; font-size: var(--fs-sm); line-height: 1.35; }
html.ui-slate .rf-curve { width: 100%; height: auto; display: block; overflow: visible; }
html.ui-slate .rf-curve .grid line { stroke: var(--chart-grid); stroke-width: 1; }
html.ui-slate .rf-curve text { fill: var(--text-3); font: 500 10px var(--font-ui); font-variant-numeric: tabular-nums; }
html.ui-slate .rf-curve .best { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 4 3; }
html.ui-slate .rf-curve .ride { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
html.ui-slate .rf-curve .pt { fill: var(--accent); }
html.ui-slate .rf-curve .nb { fill: #E8C35C; stroke: var(--surface); stroke-width: 1.5; }
html.ui-slate .rf-legend { display: flex; gap: 14px; font-size: var(--fs-xs); color: var(--text-2); }
html.ui-slate .rf-legend i { display: inline-block; width: 14px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2.25px solid var(--accent); }
html.ui-slate .rf-legend i.best { border-top: 1.5px dashed var(--text-3); }
html.ui-slate .rf-new { margin: 0; font-size: var(--fs-sm); color: var(--text); }
html.ui-slate .rf-new::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #E8C35C; vertical-align: 1px; }
/* One grid for both rows (rows are display: contents), so the bars, numbers and
   band labels line up, with a clear gap between the number and its label. */
html.ui-slate .rf-te__rows { display: grid; grid-template-columns: auto minmax(48px, 1fr) auto auto; align-items: center; column-gap: 12px; row-gap: 10px; font-size: var(--fs-sm); }
html.ui-slate .rf-te__row { display: contents; }
html.ui-slate .rf-te__num { min-width: 2.2em; text-align: right; }
html.ui-slate .rf-te__bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
html.ui-slate .rf-te__bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
html.ui-slate .ride-sheet-body .sheet-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; margin: 0 0 12px; }
html.ui-slate .ride-sheet-body .sheet-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.ui-slate .ride-sheet-body .sheet-stats .stat-mini { background: var(--surface-2); border-radius: 0; padding: 10px 8px 10px 12px; text-align: left; box-shadow: none; }
html.ui-slate .ride-sheet-body .sheet-stats .stat-mini .v { font: 600 var(--fs-xl)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
html.ui-slate .ride-sheet-body .sheet-stats .stat-mini .l { font-size: var(--fs-xs); color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; overflow-wrap: normal; word-break: normal; }
html.ui-slate .ride-sheet-body .sheet-verdict { background: var(--surface-2); border: 0; border-radius: 12px; }
/* Stat rows: read-only, so a compact list (no 44px tap height, no dividers). */
html.ui-slate .ride-sheet-body .sheet-load-row { border-bottom: 0; min-height: 0; padding: 3px 0; line-height: 1.35; font-size: var(--fs-sm); align-items: center; gap: 12px; }
html.ui-slate .ride-sheet-body .sheet-verdict + .sheet-load-row { margin-top: 8px; }
html.ui-slate .ride-sheet-body .sheet-load-row .pill { padding: 1px 8px; font-size: var(--fs-xs); }
html.ui-slate .ride-sheet-body .sheet-load-row span:first-child { color: var(--text-2); }
html.ui-slate .ride-sheet-body .sheet-zone-block { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 16px 0 0; margin-top: 16px; }
html.ui-slate .ride-sheet-body .sheet-zone-title { font: 600 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
html.ui-slate .ride-sheet-body .rs-tabs { margin: 16px 0 0; }
html.ui-slate .ride-sheet-body .rs-tabs ~ .sheet-zone-block { border-top: 0; margin-top: 8px; padding-top: 8px; }
html.ui-slate .ride-sheet-body .sheet-anatomy-block.rs-on { border-top: 0; margin-top: 0; padding-top: 0; }
html.ui-slate .ride-sheet-body .rs-hidden { display: none !important; }

/* ── Health (health.js) ──────────────────────────────────────────────────── */
html.ui-slate #tab-sleep.active { display: block; }
html.ui-slate #tab-sleep > :not(.slate-screen):not(.pull-refresh-indicator) { display: none !important; }
html.ui-slate .hl-rd { display: flex; align-items: center; gap: 16px; }
html.ui-slate .hl-rd .st-gauge { flex: none; width: 124px; height: 124px; margin: 0; }
html.ui-slate .hl-rd .st-gauge .num { font-size: 2.8rem; }
html.ui-slate .hl-rd .st-gauge .lbl { font-size: 9px; letter-spacing: .04em; max-width: 60%; }
html.ui-slate .hl-rd-meta { display: grid; gap: 6px; min-width: 0; }
html.ui-slate .hl-hero { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
html.ui-slate .hl-hero .num { font: 600 clamp(1.75rem, 1.5rem + 1.2vw, 2.4rem)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text); }
html.ui-slate .hl-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 4px 0 12px; }
html.ui-slate .hl-bar .sl-segmented { margin: 0; flex: 1 1 100%; }
html.ui-slate #hlRangeHost { flex: 1 1 100%; }
html.ui-slate #hlRangeHost:empty { display: none; }
html.ui-slate .hl-range { display: flex; gap: 4px; }
html.ui-slate .hl-range__btn { flex: 1 1 0; min-height: 36px; min-width: 52px; border-radius: 9px; border: 1px solid var(--line); background: none; color: var(--text-2); font: 600 var(--fs-sm) var(--font-ui); cursor: pointer; }
html.ui-slate .hl-range__btn[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg, #0b0d12); }
html.ui-slate .hl-ct__wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
html.ui-slate .hl-ct { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
html.ui-slate .hl-ct th, html.ui-slate .hl-ct td { padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--line); }
html.ui-slate .hl-ct thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--accent); font-weight: 700; }
html.ui-slate .hl-ct thead th small { display: block; font-weight: 500; opacity: .7; }
html.ui-slate .hl-ct tbody th { font-weight: 500; color: var(--text-2); }
html.ui-slate .hl-ct tr:last-child > * { border-bottom: 0; }
html.ui-slate .hl-ct tr.range-stat-row td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
html.ui-slate .hl-ct tr.range-stat-row td:first-child { font-weight: 700; color: var(--accent); }
html.ui-slate .hl-ct tr.cross-table-divider td { padding: 5px 9px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); background: var(--surface-2); }
html.ui-slate #hlRangeHost .range-filter { display: flex; width: 100%; margin: 0; gap: 4px; }
html.ui-slate #hlRangeHost .range-btn { min-height: 36px; min-width: 52px; flex: 1 1 0; }
html.ui-slate .hl-exc { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
html.ui-slate .hl-exc summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 600; list-style: none; }
html.ui-slate .hl-exc summary::-webkit-details-marker { display: none; }
html.ui-slate .hl-exc summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform .15s var(--ease-out); }
html.ui-slate .hl-exc[open] summary::after { transform: rotate(-135deg); }
html.ui-slate .hl-src-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-top: 1px solid var(--line); }
html.ui-slate .hl-src-row b { display: block; font-weight: 600; }
html.ui-slate .hl-src-row small { display: block; font-size: var(--fs-xs); color: var(--text-2); }
/* ON/OFF pill (all switches: .sl-switch, .src-toggle). Black track + white thumb = off;
   white track + black thumb = on. The thumb is a background layer so it also works on
   buttons without an <i>; the 4px transparent border is the thumb's inset. */
html.ui-slate :is(.sl-switch, .src-toggle) {
  --sw-black: #1E1E1E; --sw-grey: #CCCCCC; --sw-white: #FFFFFF;
  position: relative; box-sizing: border-box; flex: none; padding: 0; cursor: pointer;
  width: 80px !important; height: 30px; min-width: 80px !important; min-height: 30px !important;
  border: 4px solid transparent; border-radius: 15px;
  background-color: var(--sw-black);
  background-image: linear-gradient(var(--sw-white), var(--sw-white));
  background-repeat: no-repeat; background-size: 50% 100%; background-position: 100% 0;
  background-origin: padding-box; background-clip: padding-box, border-box;
  box-shadow: 0 0 0 1px var(--line-strong);
  font: 600 10px/1 var(--font-ui); letter-spacing: .08em;
  transition: background-color .25s var(--ease-out), background-position .3s var(--ease-out);
}
html.ui-slate :is(.sl-switch, .src-toggle) i { display: none; }
html.ui-slate :is(.sl-switch, .src-toggle)::before,
html.ui-slate :is(.sl-switch, .src-toggle)::after {
  position: absolute; top: 50%; width: 50%; text-align: center; transform: translateY(-50%);
  transition: color .25s var(--ease-out); pointer-events: none;
}
html.ui-slate :is(.sl-switch, .src-toggle)::before { content: "ON"; left: 0; color: transparent; }
html.ui-slate :is(.sl-switch, .src-toggle)::after { content: "OFF"; right: 0; color: var(--sw-black); }
html.ui-slate :is(.sl-switch[aria-checked="true"], .src-toggle[aria-pressed="true"]) {
  background-color: var(--sw-white); background-image: linear-gradient(var(--sw-black), var(--sw-black));
  background-position: 0 0;
}
html.ui-slate :is(.sl-switch[aria-checked="true"], .src-toggle[aria-pressed="true"])::before { color: var(--sw-white); }
html.ui-slate :is(.sl-switch[aria-checked="true"], .src-toggle[aria-pressed="true"])::after { color: transparent; }
html.ui-slate :is(.sl-switch, .src-toggle):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.ui-slate :is(.sl-switch, .src-toggle):disabled { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  html.ui-slate :is(.sl-switch, .src-toggle), html.ui-slate :is(.sl-switch, .src-toggle)::before,
  html.ui-slate :is(.sl-switch, .src-toggle)::after { transition-duration: .01s; }
}
html.ui-slate .hl-rd .st-gauge-btn { flex: none; }

/* ── Confirm dialog (core.js confirm()) ──────────────────────────────────── */
html.ui-slate .sl-dialog-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .15s var(--ease-out); }
html.ui-slate .sl-dialog-overlay.open { opacity: 1; }
html.ui-slate .sl-dialog { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 20px; padding: 20px; box-shadow: var(--shadow-3); }
html.ui-slate .sl-dialog h2 { font: 700 var(--fs-xl)/1.1 var(--font-display); text-transform: uppercase; margin: 0 0 8px; color: var(--text); }
html.ui-slate .sl-dialog p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
html.ui-slate .sl-dialog__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
html.ui-slate .sl-dialog__foot .sl-button { margin: 0; }
html.ui-slate .sl-button.sl-button--danger { background: var(--stop); color: #fff; }

/* ── Fuel (fuel.js) ──────────────────────────────────────────────────────── */
html.ui-slate #tab-nutrition.active { display: block; }
html.ui-slate #tab-nutrition > :not(.slate-screen):not(.pull-refresh-indicator) { display: none !important; }
/* Week strip: Sun–Sat, each day's adherence score as a ring (tap to open that day).
   Swipe between weeks (this week back to 5 weeks ago); it always comes to rest on a full Sun–Sat page. */
html.ui-slate .fu-week { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding: 6px 0 12px; margin: -6px 0 -12px; }
html.ui-slate .fu-week::-webkit-scrollbar { display: none; }
/* Each week clips at its own edge (with a hair of padding), so sub-pixel scroll rounding under the content zoom never shows a sliver of the next or previous week. */
html.ui-slate .fu-week-pg { flex: 0 0 100%; box-sizing: border-box; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 2px; overflow: clip; scroll-snap-align: start; scroll-snap-stop: always; }
@media (prefers-reduced-motion: reduce) { html.ui-slate .fu-week { scroll-behavior: auto; } }
html.ui-slate .fu-wd { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 8px 0 10px; border: 0; border-radius: 16px; background: none; color: var(--text-2); cursor: pointer; transition: background .15s var(--ease-out), transform .15s var(--ease-out); }
html.ui-slate .fu-wd:hover { background: var(--surface-2); }
html.ui-slate .fu-wd:active { transform: scale(.97); }
html.ui-slate .fu-wd.sel { background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 14px rgba(0, 0, 0, .06); color: var(--text); }
html.ui-slate .fu-wd-l { font: 500 var(--fs-xs)/1 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
html.ui-slate .fu-wd.now .fu-wd-l { font-weight: 700; color: var(--text); }
/* Sized by its 1/7 column, not the viewport (vw ignores the content zoom), with room left between rings: ≈40px at 100%, ≈30px at 125%. */
html.ui-slate .fu-wd-r { position: relative; display: grid; place-items: center; width: min(40px, 78%); aspect-ratio: 1; }
html.ui-slate .fu-wd-r svg { position: absolute; inset: 0; width: 100%; height: 100%; }
html.ui-slate .fu-wd-r circle { fill: none; stroke-width: 3.5; }
html.ui-slate .fu-wd-r .tr { stroke: var(--surface-3); }
html.ui-slate .fu-wd-r .fl { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray .6s var(--ease-out); }
html.ui-slate .fu-wd.go .fl { stroke: var(--go); } html.ui-slate .fu-wd.caution .fl { stroke: var(--caution); } html.ui-slate .fu-wd.stop .fl { stroke: var(--stop); }
html.ui-slate .fu-wd.pend .fl { opacity: .45; }
html.ui-slate .fu-wd-r .num { position: relative; font: 600 var(--fs-sm)/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
html.ui-slate[data-ui-zoom="1.25"] .fu-wd-r .num { font-size: var(--fs-xs); }
html.ui-slate[data-ui-zoom="1.25"] .fu-wd-r circle { stroke-width: 3; }
/* Day stepper, at the top of the Intake card. Off today the label is a button back to today. */
html.ui-slate .fu-in-nav { display: grid; grid-template-columns: 1fr auto minmax(110px, auto) auto 1fr; align-items: center; gap: 6px; margin: -4px 0 10px; }
html.ui-slate .fu-in-nav > .sl-icon-button:first-child { grid-column: 2; }
html.ui-slate .fu-in-nav .fu-dayint-wrap { grid-column: 5; justify-self: end; display: inline-flex; align-items: center; gap: 4px; }
html.ui-slate .fu-in-nav .fu-trend-btn { width: 32px; height: 32px; min-width: 32px; color: var(--text-2); }
html.ui-slate .fu-in-nav .fu-trend-btn svg { width: 18px; height: 18px; }
html.ui-slate .fu-in-nav .fu-trend-btn { position: relative; }
html.ui-slate .fu-in-nav .fu-trend-btn::after { content: ''; position: absolute; inset: -6px; }
html.ui-slate .fu-date-label { font: 700 var(--fs-lg, 1.15rem)/1 var(--font-display); text-transform: uppercase; text-align: center; white-space: nowrap; }
html.ui-slate button.fu-date-label { min-height: 40px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--accent); cursor: pointer; }
html.ui-slate button.fu-date-label:hover { background: var(--surface-2); }
@media (max-width: 559px) {
  html.ui-slate .fu-in-nav { grid-template-columns: auto minmax(0, 1fr) auto; }
  html.ui-slate .fu-in-nav > .sl-icon-button:first-child { grid-column: auto; }
  html.ui-slate .fu-in-nav .fu-dayint-wrap { grid-column: 1 / -1; justify-self: center; }
}
/* Intake card hero: the day's calories as a ring (tap → Trends), Eaten / Goal /
   Plan so far beside it, Log food + Plan under them (beside them from 768px).
   The ring's notch is where the plan says you'd be for the meals logged so far. */
html.ui-slate .fu-intake .sl-card__head { margin-bottom: 6px; }
html.ui-slate .fu-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 22px; }
/* The three panels (calories ring, macros & hydration, burned): a swipe
   carousel that wraps both ways on phones (fuel.js carouselHtml; the
   --copy pages are the wrap-around stand-ins), one row from 768px. */
html.ui-slate .fu-car__track { display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; }
html.ui-slate .fu-car__track::-webkit-scrollbar { display: none; }
html.ui-slate .fu-car__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A panel clips at its own edge, so nothing it can't fit shows through on the next one (the margin keeps the ring's focus outline). */
html.ui-slate .fu-car__pg { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; scroll-snap-align: start; scroll-snap-stop: always; overflow: clip; overflow-clip-margin: 8px; }
html.ui-slate .fu-car__in { flex: 1; min-width: 0; display: flex; flex-direction: column; container: fucar / inline-size; }
html.ui-slate .fu-car__in > .fu-hero { flex: 1; }
/* Phones: a gap between panels, and a panel fades, shrinks and softens as it
   leaves the middle (--d = 0 centred … 1 one page away, set by wireCarousel)
   so two panels never read as one glued strip mid-swipe. The effect sits on
   the inner wrapper: a transform on the page itself would move its snap box. */
@media (max-width: 767.98px) {
  html.ui-slate .fu-car__track { position: relative; gap: 32px; }
  html.ui-slate .fu-car__pg { --d: 0; }
  html.ui-slate .fu-car__in { opacity: calc(1 - var(--d) * .75); transform: scale(calc(1 - var(--d) * .06)); filter: blur(calc(var(--d) * 3px)); will-change: opacity, transform; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  html.ui-slate .fu-car__in { transform: none; filter: none; }
}
html.ui-slate .fu-car__pg .sl-card__head { margin-bottom: 6px; }
html.ui-slate .fu-car__dots { display: flex; justify-content: center; gap: 2px; margin: 4px 0 -4px; }
html.ui-slate .fu-car__dot { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.ui-slate .fu-car__dot i { width: 6px; height: 6px; border-radius: 3px; background: var(--surface-3); transition: width .25s var(--ease-out), background-color .25s; }
html.ui-slate .fu-car__dot.on i { width: 18px; background: var(--text-2); }
html.ui-slate .fu-car__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 8px; }
html.ui-slate .fu-intake > .fu-actions { margin-top: 14px; }
@media (min-width: 768px) {
  html.ui-slate .fu-car__track { overflow: visible; scroll-snap-type: none; }
  html.ui-slate .fu-car__pg { flex: 1 1 0; }
  html.ui-slate .fu-car__pg:has(> .fu-car__in > .fu-hero) { flex: 0 0 auto; }
  html.ui-slate .fu-car__pg--copy, html.ui-slate .fu-car__dots { display: none; }
  /* Divider only between two real panels (the hidden leading copy doesn't count). */
  html.ui-slate .fu-car__pg:not(.fu-car__pg--copy) + .fu-car__pg:not(.fu-car__pg--copy) { padding-left: 24px; margin-left: 24px; border-left: 1px solid var(--line); }
  html.ui-slate .fu-car .fu-bars { grid-template-columns: minmax(0, 1fr); }
  html.ui-slate .fu-car .fu-bars > .fu-bar-row:nth-child(2) { border-top: 1px solid var(--line); }
}
/* 768–1299px: three panels don't fit one row, so calories takes the first row
   and macros & hydration | burned share the second, above Log food. */
@media (min-width: 768px) and (max-width: 1299.98px) {
  html.ui-slate .fu-car__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.ui-slate .fu-car__pg:has(> .fu-car__in > .fu-hero) { grid-column: 1 / -1; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
  html.ui-slate .fu-car__pg:has(> .fu-car__in > .fu-hero) + .fu-car__pg:not(.fu-car__pg--copy) { padding-left: 0; margin-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { html.ui-slate .fu-car__track { scroll-behavior: auto; } html.ui-slate .fu-car__dot i { transition: none; } }
html.ui-slate .fu-ring { position: relative; display: grid; place-items: center; width: 136px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .22s var(--ease-out); }
html.ui-slate .fu-ring:active { transform: scale(.96); transition-duration: .06s; }
html.ui-slate .fu-ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
html.ui-slate .fu-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html.ui-slate .fu-ring circle { fill: none; stroke-width: 11; }
html.ui-slate .fu-ring .tr { stroke: var(--surface-3); }
html.ui-slate .fu-ring .fl { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: var(--len) var(--c); animation: fuRingIn .9s var(--ease-out) both; }
/* Same colours as the week strip's score ring for this day (85+ go, 65+ caution, else stop). */
html.ui-slate .fu-ring.go .fl { stroke: var(--go); } html.ui-slate .fu-ring.caution .fl { stroke: var(--caution); } html.ui-slate .fu-ring.stop .fl { stroke: var(--stop); }
html.ui-slate .fu-ring .pace { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
@keyframes fuRingIn { from { stroke-dasharray: 0 var(--c); } }
html.ui-slate .fu-ring__c { position: relative; display: grid; justify-items: center; gap: 4px; }
html.ui-slate .fu-ring__c .num { font: 700 2.05rem/1 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
html.ui-slate .fu-ring__c small { font: 500 var(--fs-xs)/1 var(--font-ui); color: var(--text-2); }
html.ui-slate .fu-ring.over .fu-ring__c .num { color: var(--caution); }
html.ui-slate .fu-hero__kv { display: grid; gap: 9px; margin: 0; min-width: 0; }
html.ui-slate .fu-hero__side { display: grid; gap: 12px; min-width: 0; }
html.ui-slate .fu-hero__done { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
html.ui-slate .fu-kv .fu-delta { margin: 0 0 0 6px; }
html.ui-slate .fu-delta.bad { color: var(--stop); }
html.ui-slate .fu-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
html.ui-slate .fu-kv:last-child { padding-bottom: 0; border-bottom: 0; }
html.ui-slate .fu-kv dt { font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; }
html.ui-slate .fu-kv dd { display: inline-flex; align-items: baseline; gap: 3px; margin: 0; }
html.ui-slate .fu-kv .num { font: 600 1.3rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
html.ui-slate .fu-kv small { font-size: var(--fs-xs); color: var(--text-2); }
/* The pace row carries the ring notch's mark, so the two read as one thing. */
html.ui-slate .fu-kv--pace dt::before { content: ''; display: inline-block; width: 2.5px; height: .95em; margin-right: 7px; vertical-align: -2px; border-radius: 1px; background: var(--text); }
@media (max-width: 379px) {
  html.ui-slate .fu-ring { width: 116px; }
  html.ui-slate .fu-ring__c .num { font-size: 1.75rem; }
  html.ui-slate .fu-hero { column-gap: 16px; }
}
/* Narrow panel: a smaller ring, values stay on one row beside their label. */
@container fucar (max-width: 340px) {
  html.ui-slate .fu-ring { width: 108px; }
  html.ui-slate .fu-ring__c .num { font-size: 1.6rem; }
  html.ui-slate .fu-hero { column-gap: 14px; }
  html.ui-slate .fu-kv { gap: 8px; }
  html.ui-slate .fu-kv .num { font-size: 1.2rem; }
}
@container fucar (max-width: 310px) {
  html.ui-slate .fu-ring { width: 96px; }
  html.ui-slate .fu-ring__c .num { font-size: 1.4rem; }
  html.ui-slate .fu-hero { column-gap: 12px; }
  html.ui-slate .fu-kv .num { font-size: 1.1rem; }
}
/* Only at 125% (or a very narrow panel) does each value go under its label, so Eaten / Goal / Plan so far never spill past the panel. */
html.ui-slate[data-ui-zoom="1.25"] .fu-kv { flex-direction: column; align-items: flex-start; gap: 3px; }
@container fucar (max-width: 279.98px) { html.ui-slate .fu-kv { flex-direction: column; align-items: flex-start; gap: 3px; } }
html.ui-slate .fu-subhead { margin-bottom: 2px; }
/* Macros & hydration (inside the Intake card): one line per nutrient (label · bar · actual/goal · gap); two columns on wide cards. */
html.ui-slate .fu-bars { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
@media (min-width: 900px) { html.ui-slate .fu-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html.ui-slate .fu-bar-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 10.5em; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
html.ui-slate .fu-bars > .fu-bar-row:first-child { border-top: 0; }
@media (min-width: 900px) { html.ui-slate .fu-bars > .fu-bar-row:nth-child(2) { border-top: 0; } }
html.ui-slate .fu-bar-row .track { position: relative; height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
html.ui-slate .fu-bar-row .fill { position: absolute; inset: 0 auto 0 0; background: var(--c); border-radius: 3px; transform-origin: left; animation: stGrow .7s var(--ease-out) both; }
html.ui-slate .fu-drops { display: flex; justify-content: space-between; gap: 2px; min-width: 0; }
/* Water: 10 drops, or at 125% (too small to read) a plain bar, with litres instead of ml. */
html.ui-slate .fu-bar-row.fu-water-row :is(.fu-water-bar, .fu-u-l) { display: none; }
html.ui-slate[data-ui-zoom="1.25"] .fu-bar-row.fu-water-row :is(.fu-drops, .fu-u-ml) { display: none; }
html.ui-slate[data-ui-zoom="1.25"] .fu-bar-row.fu-water-row .fu-water-bar { display: block; }
html.ui-slate[data-ui-zoom="1.25"] .fu-bar-row.fu-water-row .fu-u-l { display: flex; }
html.ui-slate .fu-drop { position: relative; flex: 0 1 18px; aspect-ratio: 1; max-height: 20px; }
html.ui-slate .fu-drop svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--surface-3); }
html.ui-slate .fu-drop svg + svg { fill: #5AA9E6; clip-path: inset(var(--empty) 0 0 0); animation: fuDropIn .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms + 120ms); }
@keyframes fuDropIn { from { clip-path: inset(100% 0 0 0); } }
@media (prefers-reduced-motion: reduce) { html.ui-slate .fu-drop svg + svg { animation: none; } }
html.ui-slate .fu-bar-row .v {display: flex; align-items: baseline; justify-content: flex-end; font: 600 var(--fs-md, 1rem)/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ui-slate .fu-bar-row .v small { font: 500 var(--fs-xs) var(--font-ui); color: var(--text-2); margin-left: 1px; }
html.ui-slate .fu-bar-row .v .fu-delta { min-width: 3.4em; margin: 0 0 0 6px; text-align: right; }
html.ui-slate .fu-delta { font: 600 var(--fs-xs)/1 var(--font-ui); font-variant-numeric: tabular-nums; margin-right: 8px; color: var(--text-2); }
html.ui-slate .fu-delta.good { color: var(--go); } html.ui-slate .fu-delta.warn { color: var(--caution); }
@media (max-width: 559px) {
  html.ui-slate .fu-in-row { grid-template-columns: minmax(0, 1fr); }
  html.ui-slate .fu-bar-row { grid-template-columns: 46px minmax(0, 1fr) 10em; gap: 8px; }
}
/* Spanish and French macro names ("Protéines", "Proteína") run longer than "Protein". */
html.ui-slate:not([lang="en"]) .fu-bar-row { grid-template-columns: 70px minmax(0, 1fr) 10.5em; }
@media (max-width: 559px) { html.ui-slate:not([lang="en"]) .fu-bar-row { grid-template-columns: 66px minmax(0, 1fr) 10em; } }
/* "Add water" + quick adds fit one row at 100% text size on a phone: tight link padding, spread with space-between (wraps only at Larger). */
html.ui-slate .fu-water { display: flex; align-items: center; justify-content: space-between; gap: 0; flex-wrap: wrap; margin-top: 10px; }
html.ui-slate .fu-water .st-link { margin-right: 2px; padding: 0 2px; }
html.ui-slate .fu-water .fu-chip { padding: 0 4px; }
/* When the row can't fit (125%, or a narrow panel): Add water on its own line, the amounts in even columns under it (--n = how many, set by fuel.js). */
html.ui-slate[data-ui-zoom="1.25"] .fu-water { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
html.ui-slate[data-ui-zoom="1.25"] .fu-water .st-link { grid-column: 1 / -1; justify-self: start; }
@container fucar (max-width: 300px) {
  html.ui-slate .fu-water { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
  html.ui-slate .fu-water .st-link { grid-column: 1 / -1; justify-self: start; }
}
html.ui-slate .fu-water .fu-chip, html.ui-slate .fu-water-opts .fu-chip { min-height: 38px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
html.ui-slate .fu-water .fu-chip:hover, html.ui-slate .fu-water-opts .fu-chip:hover { color: var(--accent); background: none; }
html.ui-slate .sl-option-row.fu-water-opts { gap: 2px; }
html.ui-slate .fu-chip { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font: 600 var(--fs-sm) var(--font-ui); white-space: nowrap; }
html.ui-slate .fu-chip:hover { color: var(--text); border-color: var(--text-3); }
html.ui-slate .fu-chip[aria-checked="true"], html.ui-slate .fu-chip[aria-pressed="true"] { background: var(--accent-bg); border-color: var(--accent); color: var(--text); }
html.ui-slate .fu-chip[disabled] { opacity: .5; }
html.ui-slate .fu-meal + .fu-meal { margin-top: 16px; }
html.ui-slate .fu-meal-head { display: flex; align-items: center; gap: 10px; padding: 4px; font: 600 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
html.ui-slate .fu-meal-head .fu-mh { flex: none; }
/* Meal totals: smaller, lowercase, one line beside the meal name ("449 kcal · 36g P · 33g C · 20g F"). */
html.ui-slate .fu-mac-legend { margin: -6px 0 8px; }
html.ui-slate .fu-mh-sum { min-width: 0; margin-left: auto; font: 500 .6875rem/1.2 var(--font-ui); letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* Meal ⋯ menu: the meal's Add / Edit / Remove, at the end of its title row.
   Tapping ⋯ springs its three dots open into small round icon buttons (labels
   under them, always shown: no hover on a phone), and a ✕ draws itself in
   exactly where the ⋯ was (right padding + 34px ✕ centre on the 36px ⋯).
   The 36px ⋯ pulls back with negative margins so the row keeps its height. */
html.ui-slate .sl-menu { position: relative; flex: none; margin: -14px -10px; }
html.ui-slate .sl-menu-btn { border: 0; background: none; color: var(--text-2); transition: opacity .15s ease, transform .15s ease; }
html.ui-slate .sl-menu-btn .si { width: 20px; height: 20px; }
html.ui-slate .sl-menu-btn:hover { color: var(--text); background: var(--surface-3); }
html.ui-slate .sl-menu-btn[aria-expanded="true"] { opacity: 0; transform: scale(.6); pointer-events: none; }
html.ui-slate .sl-menu-list { position: absolute; right: 0; top: 50%; z-index: 30; display: flex; align-items: center; gap: 2px; padding: 5px 1px 4px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-3); transform: translateY(-50%); text-transform: none; letter-spacing: 0; transform-origin: right center; animation: sl-menu-tray .18s ease-out; }
html.ui-slate .sl-menu-list[hidden] { display: none; }
html.ui-slate .sl-menu-list [role="menuitem"] { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 52px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.ui-slate .sl-menu-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); animation: sl-menu-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; transition: transform .2s ease, background .2s ease; }
html.ui-slate .sl-menu-dot .si { width: 15px; height: 15px; animation: sl-menu-icon .3s .12s ease-out both; }
html.ui-slate .sl-menu-list [role="menuitem"]:nth-of-type(2) .sl-menu-dot { animation-delay: .04s; }
html.ui-slate .sl-menu-list [role="menuitem"]:nth-of-type(3) .sl-menu-dot { animation-delay: .08s; }
html.ui-slate .sl-menu-list [role="menuitem"]:hover .sl-menu-dot, html.ui-slate .sl-menu-list [role="menuitem"]:focus-visible .sl-menu-dot { transform: scale(1.1); }
html.ui-slate .sl-menu-list [role="menuitem"]:active .sl-menu-dot { transform: scale(.94); }
html.ui-slate .sl-menu-list [role="menuitem"]:focus-visible { outline: none; }
html.ui-slate .sl-menu-list [role="menuitem"]:focus-visible .sl-menu-dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
html.ui-slate .sl-menu-l { font: 600 .6875rem/1.1 var(--font-ui); letter-spacing: .03em; text-transform: uppercase; color: var(--text-2); animation: sl-menu-label .3s .15s ease-out both; }
html.ui-slate .sl-menu-danger .sl-menu-dot { background: var(--stop-bg); color: var(--stop); }
/* ✕: two strokes that rotate in, the second a beat later (like the reference pen). */
html.ui-slate .sl-menu-x { position: relative; flex: none; align-self: center; width: 44px; height: 44px; margin: 0; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; }
html.ui-slate .sl-menu-x span { position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: currentColor; transform: rotate(-45deg); animation: sl-menu-x .25s ease-out both; }
html.ui-slate .sl-menu-x span:first-child { transform: rotate(45deg); animation-delay: .12s; }
html.ui-slate .sl-menu-x:hover { color: var(--stop); }
@keyframes sl-menu-tray { from { opacity: 0; transform: translateY(-50%) scale(.85); } }
@keyframes sl-menu-pop { from { transform: scale(.33); opacity: .6; } }
@keyframes sl-menu-icon { from { opacity: 0; transform: scale(.4); } }
@keyframes sl-menu-label { from { opacity: 0; transform: translateY(-4px); } }
@keyframes sl-menu-x { from { width: 0; margin-left: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.ui-slate .sl-menu-list, html.ui-slate .sl-menu-dot, html.ui-slate .sl-menu-dot .si, html.ui-slate .sl-menu-l, html.ui-slate .sl-menu-x span { animation: none; }
}
html.ui-slate .fu-entry { border-top: 1px solid var(--line); }
html.ui-slate .fu-entry-end { display: flex; align-items: center; gap: 4px; min-width: 0; }
html.ui-slate .fu-entry-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 0; }
html.ui-slate .fu-entry .st-row { border-top: 0; min-height: 48px; }
html.ui-slate .st-row.static { cursor: default; }
/* Fuel sections: Today is the screen. The Intake strip's kcal bar opens
   Trends; Log food + the Plan icon sit beside it (under it on a phone).
   Trends/Plan open with a back header. */
html.ui-slate .fu-actions { display: flex; align-items: center; gap: 8px; }
html.ui-slate .fu-actions .sl-button { margin: 0; }
html.ui-slate .fu-actions .fu-log-btn { flex: 1 1 auto; min-width: 168px; min-height: 52px; padding: 0 20px; border-radius: 14px; white-space: nowrap; }
html.ui-slate .fu-actions :is(.fu-plan-btn, .fu-water-btn) { flex: none; width: 52px; min-height: 52px; padding: 0; color: var(--text-2); }
html.ui-slate .fu-actions :is(.fu-plan-btn, .fu-water-btn):hover { color: var(--text); }
html.ui-slate .fu-actions .fu-water-btn { position: relative; }
html.ui-slate .fu-actions .fu-water-btn--done { color: #5AA9E6; }
html.ui-slate .fu-actions .fu-water-btn .fu-water-btn__fill { position: absolute; left: 50%; top: 50%; translate: -50% -50%; fill: #5AA9E6; clip-path: inset(var(--empty) 0 0 0); transition: clip-path .4s var(--ease-out); }
html.ui-slate .fu-actions :is(.fu-plan-btn, .fu-water-btn) .si { width: 22px; height: 22px; }
html.ui-slate .fu-sub-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
html.ui-slate .fu-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-left: -6px; }
html.ui-slate .fu-back svg { width: 20px; height: 20px; }
html.ui-slate .fu-sub-title { margin: 0; font: 700 var(--fs-xl)/1 var(--font-display); text-transform: uppercase; flex: 1 1 auto; outline: none; }
html.ui-slate .fu-sub-head .fu-tr-bar { flex: 1 1 100%; }
/* Trends: the back link, title and 7/14/30 range stay pinned to the top of
   .app-main while the cards scroll under them, with the header's soft fade. */
html.ui-slate #fuSec-trends .fu-sub-head { position: sticky; top: 0; z-index: 4; background: var(--bg); padding: 4px 0 2px; }
/* Phones: pinned under the header and moving with it (quick-return bars,
   see the .app-header note at the top). Sticky insets count from inside
   .app-main's padding, which already holds the header height + 4px, so -4px
   lands it right under the header. */
@media (max-width: 767px) {
  html.ui-slate #fuSec-trends .fu-sub-head { top: -4px; transform: translateY(calc(var(--bars-p, 0) * -1 * var(--hdr-h, 96px) / var(--ui-zoom, 1))); }
  html.ui-slate.bars-snap #fuSec-trends .fu-sub-head { transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
}
html.ui-slate #fuSec-trends .fu-sub-head .fu-tr-bar { margin-bottom: 6px; }
html.ui-slate #fuSec-trends .fu-sub-head::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; pointer-events: none;
  background: linear-gradient(to bottom, var(--bg), color-mix(in srgb, var(--bg) 0%, transparent));
}
html.ui-slate .fu-sec[hidden] { display: none; }
html.ui-slate .fu-delta.under { color: var(--info); } html.ui-slate .fu-delta.flat { color: var(--go); }
/* Meals: logged meals with their entries, planned-but-missing ones as a one-line row. */
html.ui-slate .fu-mh { display: inline-flex; align-items: center; gap: 6px; }
html.ui-slate .fu-mh .fu-ok { width: 14px; height: 14px; color: var(--go); }
html.ui-slate .fu-meal-missing { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 4px; border-top: 1px solid var(--line); }
html.ui-slate .fu-meal-missing:first-of-type { border-top: 0; }
html.ui-slate .fu-meal + .fu-meal-missing, html.ui-slate .fu-meal-missing + .fu-meal { margin-top: 12px; }
html.ui-slate .fu-meal-missing .body { flex: 1; min-width: 0; display: grid; gap: 2px; }
html.ui-slate .fu-meal-missing .t { font-weight: 600; }
html.ui-slate .fu-meal-missing .s { font-size: var(--fs-xs); color: var(--text-2); }
html.ui-slate .fu-mico { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px dashed var(--text-3); }
/* Coach */
html.ui-slate .fu-coach-head { font: 600 var(--fs-lg)/1.3 var(--font-display); margin: 4px 0 10px; }
html.ui-slate .fu-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.45; }
html.ui-slate .fu-notes li { position: relative; padding-left: 16px; }
html.ui-slate .fu-notes li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
html.ui-slate .fu-coach-meals { margin-top: 14px; border-top: 1px solid var(--line); }
html.ui-slate .fu-coach-meals summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; font-size: var(--fs-sm); list-style: none; }
html.ui-slate .fu-coach-meals summary::-webkit-details-marker { display: none; }
html.ui-slate .fu-coach-meals summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform .15s var(--ease-out); }
html.ui-slate .fu-coach-meals[open] summary::after { transform: rotate(-135deg); }
html.ui-slate .fu-cm { padding: 8px 0; border-top: 1px solid var(--line); }
html.ui-slate .fu-cm-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
html.ui-slate .fu-cm p { margin: 4px 0 0; }
html.ui-slate .fu-cm-lines { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: var(--fs-xs); color: var(--text-2); }
html.ui-slate .fu-cm-lines li { display: flex; gap: 6px; }
html.ui-slate .fu-cm-lines li.go span { color: var(--go); }
html.ui-slate .fu-cm-lines li.stop span { color: var(--stop); }
/* Meal vs plan as bullet bars (ui/slate/plan-match.js). Every row shares one
   scale, 0 to 150% of plan, so the plan tick and the shaded ±15% "on plan"
   zone line up down the list. The signed gap is written; colour reinforces it. */
html.ui-slate .pm-bullets { display: grid; gap: 2px; }
html.ui-slate .pm-b { --c: var(--text-3); display: grid; grid-template-columns: 54px minmax(0, 1fr) auto 3.1em; align-items: center; gap: 10px; min-height: 30px; }
html.ui-slate:not([lang="en"]) .pm-b { grid-template-columns: 70px minmax(0, 1fr) auto 3.1em; }
html.ui-slate .pm-b--go { --c: var(--go); } html.ui-slate .pm-b--caution { --c: var(--caution); } html.ui-slate .pm-b--stop { --c: var(--stop); } html.ui-slate .pm-b--info { --c: var(--info); }
html.ui-slate .pm-b__l { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-slate .pm-b__track { position: relative; height: 8px; border-radius: 4px; background: var(--surface-3); }
html.ui-slate .pm-b__zone { position: absolute; top: -3px; bottom: -3px; border-radius: 4px; background: var(--go-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--go) 30%, transparent); }
html.ui-slate .pm-b__fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--c); transform-origin: left; animation: stGrow .6s var(--ease-out) both; }
/* Past 150% of plan: the bar runs off its end as an arrow. */
html.ui-slate .pm-b--past .pm-b__fill { border-radius: 4px 0 0 4px; }
html.ui-slate .pm-b--past .pm-b__fill::after { content: ''; position: absolute; left: 100%; top: 50%; border: 6px solid transparent; border-left-color: var(--c); border-right-width: 0; transform: translateY(-50%); }
html.ui-slate .pm-b__tick { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); }
html.ui-slate .pm-b__v { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
html.ui-slate .pm-b__v b { font: 600 var(--fs-md, 1rem)/1 var(--font-display); }
html.ui-slate .pm-b__v small { margin-left: 1px; font-size: var(--fs-xs); color: var(--text-2); }
html.ui-slate .pm-b__d { text-align: right; font: 600 var(--fs-xs)/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text-2); }
html.ui-slate .pm-b--caution .pm-b__d { color: var(--caution); } html.ui-slate .pm-b--stop .pm-b__d { color: var(--stop); }
/* Today → Meals: one line per logged meal against its closest plan option, opening to the bars. */
html.ui-slate .fu-mvp { margin: 0 0 4px; }
html.ui-slate .fu-mvp > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px; border-radius: 10px; cursor: pointer; list-style: none; font-size: var(--fs-xs); color: var(--text-2); -webkit-tap-highlight-color: transparent; transition: background-color .15s var(--ease-out); }
html.ui-slate .fu-mvp > summary::-webkit-details-marker { display: none; }
html.ui-slate .fu-mvp > summary:hover { background: var(--surface-2); }
html.ui-slate .fu-mvp > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
html.ui-slate .fu-mvp > summary .sl-chip { flex: none; min-height: 22px; padding: 0 8px; font-size: 11px; }
html.ui-slate .fu-mvp__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-slate .fu-mvp__chev, html.ui-slate .fl-after__chev { width: 14px; height: 14px; flex: none; transform: rotate(90deg); transition: transform .22s var(--ease-out); }
html.ui-slate .fu-mvp[open] .fu-mvp__chev, html.ui-slate .fl-after[open] .fl-after__chev { transform: rotate(-90deg); }
html.ui-slate .fu-mvp > .pm-bullets { margin: 4px 0 8px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); animation: fuUnfold .24s var(--ease-out); }
@keyframes fuUnfold { from { opacity: 0; transform: translateY(-4px); } }
html.ui-slate .fu-meal--caution .fu-ok { color: var(--caution); } html.ui-slate .fu-meal--stop .fu-ok { color: var(--stop); }
html.ui-slate .fu-standing { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
html.ui-slate .fu-stand-title { font-weight: 600; font-size: var(--fs-sm); }
html.ui-slate .fu-stand-line { margin: 0; font-size: var(--fs-sm); }
html.ui-slate .fu-stand-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
html.ui-slate .fu-standing p { margin: 0; }
html.ui-slate .fu-wbar { display: block; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
html.ui-slate .fu-wbar > span { display: block; height: 100%; background: var(--info); }
html.ui-slate .fu-mc { display: grid; gap: 8px; margin-bottom: 4px; }
/* Trends */
html.ui-slate .fu-tr-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
html.ui-slate .fu-adh { display: grid; gap: 3px; }
html.ui-slate .fu-adh-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
/* Rows sit tight like a calendar: the label beats the global tap-target min-height. */
html.ui-slate .fu-adh-h { font: 500 var(--fs-xs)/1 var(--font-ui, inherit); color: var(--text-2); background: none; border: 0; text-align: left; padding: 1px 0; min-height: 0 !important; min-width: 0 !important; cursor: pointer; border-radius: 4px; }
html.ui-slate .fu-adh-row.sel .fu-adh-h { color: var(--accent); font-weight: 600; }
html.ui-slate .fu-adh-row[data-fu-trrow] { cursor: pointer; border-radius: 4px; }
@media (hover: hover) { html.ui-slate .fu-adh-row[data-fu-trrow]:not(.sel):hover .fu-adh-h { color: var(--text); } }
/* Sugar / sodium sit under a divider: daily limits, tracked but not scored. */
html.ui-slate .fu-adh-sep { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: var(--fs-xs); color: var(--text-3); }
html.ui-slate .fu-adh-sep::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
html.ui-slate .fu-adh-rule { border-top: 1px solid var(--line); margin: 4px 0 6px; }
/* Load-calendar style: colour-only squares, one centred in each day column, so they line up with the per-day chart's bars below. */
html.ui-slate .fu-adh-cells { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; }
html.ui-slate .fu-adh-cell { display: block; width: min(calc(100% - 3px), 16px); aspect-ratio: 1; justify-self: center; border-radius: 3px; background: var(--surface-3); }
html.ui-slate .fu-adh-cell.go { background: var(--go); } html.ui-slate .fu-adh-cell.caution { background: var(--caution); } html.ui-slate .fu-adh-cell.stop { background: var(--stop); }
/* Today before it's marked complete: logged, but gray and not scored yet. */
html.ui-slate .fu-adh-cell.pending, html.ui-slate .tr-legend i.fu-adh-pend { filter: saturate(.3); opacity: .45; }
/* "Mark today complete": a quiet check in the card header; filled once done. */
html.ui-slate .fu-adh-done { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--text-3); cursor: pointer; flex: none; }
html.ui-slate .fu-adh-done svg { width: 14px; height: 14px; }
html.ui-slate .fu-adh-done:hover { color: var(--text); border-color: var(--text-3); }
html.ui-slate .fu-adh-done.on { background: var(--go); border-color: var(--go); color: var(--bg, #000); }
html.ui-slate .fu-adh-n { text-align: right; font-size: var(--fs-sm); } html.ui-slate .fu-adh-n small { color: var(--text-2); }
/* Weekday initials (S M T W T F S) under each day column. */
html.ui-slate .fu-adh-wd { margin-top: 4px; font-size: 10px; line-height: 1; color: var(--text-3); }
html.ui-slate .fu-adh-wd .fu-adh-cells > span { text-align: center; } html.ui-slate .fu-adh-wd .now { color: var(--text); font-weight: 600; }
html.ui-slate .fu-adh-wd.r14 .fu-adh-cells, html.ui-slate .fu-adh-wd.r30 .fu-adh-cells { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
html.ui-slate .fu-adh-wd.r30 { font-size: 8px; }
html.ui-slate .fu-adh-axis { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-3); }
html.ui-slate .fu-adh-axis-d { display: flex; justify-content: space-between; max-width: none; }
/* 14/30 days: the day squares stretch across the row, so today is always
   the last column at the right edge. 30 days keeps one line per nutrient
   with small squares and a tighter gap rather than wrapping. */
html.ui-slate .fu-adh.r14 .fu-adh-cells, html.ui-slate .fu-adh.r30 .fu-adh-cells { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
html.ui-slate .fu-adh.r30 .fu-adh-cell { border-radius: 2px; }
html.ui-slate .fu-adh.r30 .fu-adh-n { font-size: var(--fs-xs); }
html.ui-slate .fu-adh-axis.r14 .fu-adh-axis-d, html.ui-slate .fu-adh-axis.r30 .fu-adh-axis-d { max-width: none; }
html.ui-slate .fu-adh-legend { margin: 0 0 8px; gap: 4px 12px; }
html.ui-slate .fu-adh-legend i.box { border-radius: 3px; }
html.ui-slate .fu-adh-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
html.ui-slate .fu-adh-score { display: grid; justify-items: end; gap: 2px; }
html.ui-slate .fu-adh-score.go .st-big { color: var(--go); } html.ui-slate .fu-adh-score.caution .st-big { color: var(--caution); } html.ui-slate .fu-adh-score.stop .st-big { color: var(--stop); }
html.ui-slate .fu-bal { height: 160px; margin-top: 4px; }
html.ui-slate .fu-tvr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; }
html.ui-slate .fu-tvr-col { display: grid; gap: 4px; min-width: 0; padding: 12px 14px; background: var(--surface-2); align-content: start; }
html.ui-slate .fu-tvr-col .v { font: 600 var(--fs-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
html.ui-slate .fu-tvr-col .v small { font-size: .5em; color: var(--text-2); font-weight: 500; margin-left: 3px; }
html.ui-slate .fu-tvr-spark { position: relative; height: 96px; margin-top: 6px; touch-action: pan-y; }
html.ui-slate .fu-mp { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 190px); }
@media (max-width: 520px) { html.ui-slate .fu-mp { grid-template-columns: 78px minmax(0, 1fr); } html.ui-slate .fu-mp .v { grid-column: 1 / -1; } html.ui-slate .fu-adh-row { grid-template-columns: 54px minmax(0, 1fr) 38px; gap: 6px; } html.ui-slate .fu-adh.r30 .fu-adh-cells, html.ui-slate .fu-adh-wd.r30 .fu-adh-cells { gap: 1px; } }
html.ui-slate .fu-tr-bar .sl-segmented { margin: 0; flex: 1 1 200px; max-width: 280px; }
@media (max-width: 559px) { html.ui-slate .fu-tr-bar .sl-segmented { flex-basis: 100%; max-width: none; } }
/* Plan */
html.ui-slate .fu-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; }
@container slate (min-width: 720px) { html.ui-slate .fu-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
html.ui-slate .fu-tiles.fu-tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
/* Daily energy target (ui/slate/energy-target.js): 5 KPI tiles, an SVG 7-day chart, the settings form. */
html.ui-slate .et-head-end { display: inline-flex; align-items: center; gap: 8px; }
html.ui-slate .et-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.ui-slate .et-tiles .fu-tile:last-child { grid-column: 1 / -1; }
@container slate (min-width: 720px) { html.ui-slate .et-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } html.ui-slate .et-tiles .fu-tile:last-child { grid-column: auto; } }
html.ui-slate .et-chart { display: block; width: 100%; max-width: 520px; height: auto; margin: 4px auto 0; overflow: visible; }
html.ui-slate .et-kg { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-2); }
html.ui-slate .et-bar { fill: var(--accent); opacity: .45; }
html.ui-slate .et-bar--hit { opacity: 1; }
html.ui-slate .et-bar--today { fill-opacity: .25; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 2; }
html.ui-slate .et-base { stroke: var(--line); stroke-width: 1; }
html.ui-slate .et-target { stroke: var(--text); stroke-width: 2; stroke-dasharray: 5 4; }
html.ui-slate .et-ax { fill: var(--text-2); font: 500 10px var(--font-ui); }
html.ui-slate .et-ax--target { fill: var(--text); font-weight: 600; }
html.ui-slate .et-fuel { font-size: 10px; }
html.ui-slate .et-form { display: grid; gap: 10px; margin: 0 0 14px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
html.ui-slate .et-ms > div { grid-template-columns: 52px minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(56px, auto); }
html.ui-slate .fu-tile { display: grid; gap: 4px; padding: 12px 14px; background: var(--surface-2); min-width: 0; }
html.ui-slate .fu-tile .v { font: 600 var(--fs-xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
html.ui-slate .fu-tile .v small { font-size: .55em; color: var(--text-2); font-weight: 500; margin-left: 2px; }
html.ui-slate .fu-opt-seg { margin: 0 0 8px; }
html.ui-slate .fu-opt-items .st-row { min-height: 44px; }
html.ui-slate .fu-opt-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
html.ui-slate .fu-opt-foot b { color: var(--text); }

/* Log food / water / entry sheets */
html.ui-slate .sl-option-row { display: flex; gap: 6px; flex-wrap: wrap; }
/* Meal picker (Log food, meal photo, Edit entry): one meal at a time between ‹ ›,
   wrapping both ways; swipe the name to step (fuel.js mealCarHtml / wireMealCar). */
html.ui-slate .fl-mealcar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
html.ui-slate .fl-mealcar__btn { width: 40px; height: 40px; }
html.ui-slate .fl-mealcar__stage { display: grid; justify-items: center; gap: 5px; min-width: 0; padding: 4px 0 2px; overflow: hidden; cursor: grab; }
html.ui-slate .fl-mealcar__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: var(--fs-xl); transition: transform .2s var(--ease-out); }
html.ui-slate .fl-mealcar__name--in-r { animation: fl-mealcar-in-r .24s var(--ease-out); }
html.ui-slate .fl-mealcar__name--in-l { animation: fl-mealcar-in-l .24s var(--ease-out); }
@keyframes fl-mealcar-in-r { from { opacity: 0; transform: translateX(28px); } }
@keyframes fl-mealcar-in-l { from { opacity: 0; transform: translateX(-28px); } }
html.ui-slate .fl-mealcar__dots { display: flex; gap: 4px; }
html.ui-slate .fl-mealcar__dots i { width: 5px; height: 5px; border-radius: 3px; background: var(--surface-3); transition: width .2s var(--ease-out), background-color .2s; }
html.ui-slate .fl-mealcar__dots i.on { width: 14px; background: var(--text-2); }
@media (prefers-reduced-motion: reduce) { html.ui-slate :is(.fl-mealcar__name, .fl-mealcar__dots i) { animation: none; transition: none; } }
/* Plan options: label left, compact segmented control right */
html.ui-slate .fl-opts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 0; }
html.ui-slate .fl-opts .fl-label { margin: 0; }
/* container-type off: inline-size containment ignores the buttons' width, so a width:auto bar collapsed to its padding and hid A/B/C */
html.ui-slate .fl-opts .sl-segmented { width: auto; margin: 0; flex: none; container-type: normal; overflow: visible; }
html.ui-slate .fl-opts .sl-segmented > button { flex: none; min-height: 32px; min-width: 40px; padding: 0 12px; font-size: var(--fs-sm); }
html.ui-slate .fl-opts-r { display: flex; align-items: center; gap: 8px; }
html.ui-slate .fl-opts .fl-clear { margin: 0; min-height: 36px; padding: 0 14px; font-size: var(--fs-sm); }
html.ui-slate #flDraft > .st-empty { margin-top: 16px; }
html.ui-slate .fl-label { margin: 18px 0 8px; font: 600 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
html.ui-slate #flSearchWrap { margin-top: 16px; }
html.ui-slate #flSearchWrap[hidden] { display: none; }
html.ui-slate .fl-search { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: 500 var(--fs-md) var(--font-ui); }
html.ui-slate .fl-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Search field. Barcode scan: the button sits inside the search field's right edge; the scan sheet (ui/slate/scan.js). */
html.ui-slate #flSearchWrap:not([hidden]) { display: flex; align-items: center; gap: 8px; }
html.ui-slate .fl-search-field { position: relative; flex: 1; min-width: 0; }
html.ui-slate #flSearchWrap .fl-search { padding-right: 56px; }
/* Log food: one full-width Log button, pinned to the sheet's bottom (it rides above the keyboard too). */
/* Sticky edges are measured inside the sheet body's padding: offset by it so nothing shows below the bar. */
html.ui-slate .fl-foot { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); z-index: 2; margin: 16px -20px calc(-24px - env(safe-area-inset-bottom)); padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
html.ui-slate .fl-foot__note { margin: 0 0 8px; text-align: center; }
html.ui-slate .fl-go { display: block; width: 100%; margin: 0; min-height: 48px; padding: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) { html.ui-slate .fl-foot { bottom: -24px; margin: 16px -24px -24px; padding: 12px 24px; } }
/* Log food: the meal against its plan option (always open), then "After
   logging", the day's bars with this meal added (folded, remembered). The
   running total lives in the pinned footer above Log. */
html.ui-slate .fl-sum { margin-top: 14px; padding: 12px 14px 2px; border-radius: 16px; background: var(--surface-2); }
html.ui-slate .fl-sum--none { padding-top: 0; }
html.ui-slate .fl-sum__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html.ui-slate .fl-sum__head .fl-label { margin: 0; }
html.ui-slate .fl-sum__head .sl-chip { flex: none; }
html.ui-slate .fl-sum__msg { margin: 6px 0 8px; font-size: var(--fs-sm); line-height: 1.35; }
html.ui-slate .fl-sum .pm-b__track { background: var(--surface-3); }
html.ui-slate .fl-after { margin-top: 8px; border-top: 1px solid var(--line); }
html.ui-slate .fl-sum--none .fl-after { margin-top: 0; border-top: 0; }
html.ui-slate .fl-after[open] { padding-bottom: 12px; }
html.ui-slate .fl-after > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font: 600 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
html.ui-slate .fl-after > summary::-webkit-details-marker { display: none; }
html.ui-slate .fl-after > summary .faint { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; }
html.ui-slate .fl-after > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
html.ui-slate .fl-foot__sum { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 10px; font-size: var(--fs-sm); color: var(--text-2); }
html.ui-slate .fl-foot__sum[hidden] { display: none; }
html.ui-slate .fl-foot__k { white-space: nowrap; }
html.ui-slate .fl-foot__k b { font: 700 1.4rem/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
html.ui-slate .fl-foot__m { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
html.ui-slate .fl-foot__sum .sl-chip { flex: none; align-self: center; min-height: 24px; padding: 0 8px; font-size: var(--fs-xs); }
/* Plan options: the letter with that option's kcal under it. */
html.ui-slate .fl-opts .fl-opt-seg > button { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 40px; min-width: 48px; line-height: 1; }
html.ui-slate .fl-opt-seg > button small { font: 500 var(--fs-xs)/1 var(--font-ui); color: var(--text-2); font-variant-numeric: tabular-nums; }
html.ui-slate .fl-opt-seg > button[aria-checked="true"] small { color: inherit; opacity: .75; }
/* Press feedback on the Fuel flows' tap targets: shrink on press, spring back on release. */
html.ui-slate :is(.fl-add, .fu-chip, .fl-go, .fu-log-btn, .fu-plan-btn, .fu-water-btn, .fl-opt-seg > button) { transition: transform .2s var(--ease-out), background-color .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out); }
html.ui-slate :is(.fl-add, .fu-chip, .fl-go, .fu-log-btn, .fu-plan-btn, .fu-water-btn, .fl-opt-seg > button):active:not(:disabled) { transform: scale(.96); transition-duration: .06s; }
html.ui-slate .fl-res__main { transition: transform .2s var(--ease-out); }
html.ui-slate .fl-res__main:active { transform: scale(.985); transition-duration: .06s; }
@media (prefers-reduced-motion: reduce) {
  html.ui-slate .fu-ring .fl, html.ui-slate .pm-b__fill, html.ui-slate .fu-mvp > .pm-bullets { animation: none; }
  html.ui-slate .fu-ring:active, html.ui-slate .fl-res__main:active,
  html.ui-slate :is(.fl-add, .fu-chip, .fl-go, .fu-log-btn, .fu-plan-btn, .fu-water-btn, .fl-opt-seg > button):active { transform: none; }
}
/* Time chip + "Add a note" on one row; an open note (or the supplement form) takes the full width. */
html.ui-slate .fl-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
html.ui-slate .fl-extras #flNoteBox { flex: 1 1 auto; }
html.ui-slate .fl-extras #flNoteBox:has(textarea, .fl-sf) { flex-basis: 100%; }
html.ui-slate .fl-extras #flNoteBox:empty { display: none; }
html.ui-slate .fl-extras .fl-add-note { margin: 0; }
html.ui-slate .fl-scan { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: transparent; }
html.ui-slate .fl-scan:hover { background: var(--surface-3); }
/* Meal photo: a camera just left of the barcode button (two buttons inside the field). */
html.ui-slate .fl-photo { right: 44px; }
html.ui-slate #flSearchWrap:not(.fl-search-wrap--supp) .fl-search { padding-right: 96px; }
/* Log food → photo step: preview, Take photo / Choose from photos (labels wrapping hidden file inputs), meal, hint. */
html.ui-slate .fp-preview { display: block; width: 100%; max-height: 38vh; object-fit: cover; border-radius: 14px; }
html.ui-slate .fp-pick { display: flex; gap: 8px; margin: 12px 0 4px; }
html.ui-slate .fp-pick .sl-button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; cursor: pointer; }
html.ui-slate .fp-pick svg { width: 20px; height: 20px; flex-shrink: 0; }
html.ui-slate .fp-pick .sl-button:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
html.ui-slate .fp-sec { margin-top: 20px; }
html.ui-slate .fp-sec + .fp-sec { padding-top: 20px; border-top: 1px solid var(--line); }
html.ui-slate .fp-sec .fl-label { display: block; margin: 0 0 10px; }
html.ui-slate .fp-tips { margin-top: 8px; }
html.ui-slate .fp-tips summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-sm); color: var(--text-2); list-style: none; }
html.ui-slate .fp-tips summary::-webkit-details-marker { display: none; }
html.ui-slate .fp-tips summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform .15s var(--ease-out); }
html.ui-slate .fp-tips[open] summary::after { transform: rotate(-135deg); }
html.ui-slate .fp-tips ul { margin: 0 0 4px; padding-left: 18px; display: grid; gap: 6px; }
html.ui-slate .fp-beta { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
html.ui-slate .fp-beta .sl-chip, html.ui-slate .fu-beta { min-height: 20px; padding: 0 8px; flex-shrink: 0; }
html.ui-slate .fu-photos .sl-card__head { justify-content: flex-start; gap: 8px; }
/* Fuel → Today "Meal photos": one row per queued / read / failed photo. */
html.ui-slate .fu-photo { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 4px; border-top: 1px solid var(--line); }
html.ui-slate .fu-photos .sl-card__head + .fu-photo { border-top: 0; }
html.ui-slate .fu-photo .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.ui-slate .fu-photo .t { font-weight: 600; }
html.ui-slate .fu-photo .s { color: var(--text-2); font-size: var(--fs-sm); }
html.ui-slate .fu-photo .s.fu-photo-err { color: var(--caution); }
html.ui-slate .fu-photo-act { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 480px) {
  html.ui-slate .fu-photo { flex-wrap: wrap; }
  html.ui-slate .fu-photo-act { width: 100%; justify-content: flex-end; }
}
/* Meal photo review (Log food, while a read photo is being checked): the read's
   confidence as a pill, a thumbs up/down on the read, and a "Check" pill on weak items. */
html.ui-slate .fu-review { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; background: var(--surface-2); }
html.ui-slate .fu-review__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
html.ui-slate .fu-review__fb { display: inline-flex; align-items: center; gap: 6px; }
html.ui-slate .fu-conf--high { background: var(--go-bg); color: var(--go); }
html.ui-slate .fu-conf--medium { background: var(--caution-bg); color: var(--caution); }
html.ui-slate .fu-conf--low { background: var(--stop-bg); color: var(--stop); }
html.ui-slate .fu-fb[aria-pressed="true"] { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); }
html.ui-slate .fu-review__why { display: flex; flex-wrap: wrap; gap: 6px; }
html.ui-slate .fu-why { border: 0; cursor: pointer; background: var(--surface-3); color: var(--text-2); font: inherit; font-size: var(--fs-sm); }
html.ui-slate .fu-why[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent); }
html.ui-slate .fu-check { margin-left: 6px; vertical-align: middle; }
/* Pull-to-refresh spinner (index.html initPullToRefresh, iOS): a round chip that follows the finger. */
.ptr { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; z-index: 90; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; opacity: 0; pointer-events: none; transform: translate(-50%, -44px); background: var(--surface-2, #222); color: var(--text, #fff); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.ptr svg { display: block; }
.ptr--spin svg { animation: ptr-spin .8s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr--spin svg { animation-duration: 2s; } }
html.ui-slate .sc-view { position: relative; aspect-ratio: 4 / 3; max-height: 52vh; width: 100%; border-radius: 14px; overflow: hidden; background: #000; }
html.ui-slate .sc-view[hidden] { display: none; }
html.ui-slate .sc-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
html.ui-slate .sc-frame { position: absolute; left: 10%; right: 10%; top: 30%; bottom: 30%; border: 2px solid var(--accent); border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); pointer-events: none; }
html.ui-slate .sc-frame::after { content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: var(--accent); opacity: .8; animation: sc-sweep 1.6s ease-in-out infinite alternate; }
@keyframes sc-sweep { from { transform: translateY(-28px); } to { transform: translateY(28px); } }
@media (prefers-reduced-motion: reduce) { html.ui-slate .sc-frame::after { animation: none; } }
html.ui-slate .sc-torch { position: absolute; right: 12px; bottom: 12px; background: rgba(0, 0, 0, .55); color: #fff; }
html.ui-slate .sc-torch[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
html.ui-slate .sc-status { min-height: 1.4em; margin: 12px 0 0; color: var(--text-2); font-size: var(--fs-sm); }
html.ui-slate .sc-status[data-tone="caution"] { color: var(--text); padding: 12px 14px; border-radius: 12px; background: var(--caution-bg); }
html.ui-slate .sc-manual { margin-top: 16px; }
html.ui-slate .sc-manual .fl-label { display: block; margin-top: 0; }
html.ui-slate .sc-row { display: flex; gap: 8px; }
html.ui-slate .sc-row .fl-search { flex: 1; min-width: 0; letter-spacing: .04em; }
html.ui-slate .sc-row .sl-button { margin: 0; flex: none; }
html.ui-slate .fl-results { display: grid; margin-top: 6px; max-height: 300px; overflow-y: auto; border-radius: 12px; }
html.ui-slate .fl-results[hidden] { display: none; }
html.ui-slate .fl-results:empty { display: none; }
html.ui-slate .fl-res { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; text-align: left; border-top: 1px solid var(--line); color: var(--text); border-radius: 0; width: 100%; }
html.ui-slate .fl-res:first-child { border-top: 0; }
html.ui-slate .fl-res:hover { background: var(--surface-2); }
html.ui-slate .fl-res .ck { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; flex: none; color: var(--accent); }
html.ui-slate .fl-res[aria-selected="true"] .ck { border-color: var(--accent); background: var(--accent-bg); }
html.ui-slate .fl-res.free .ck { border: 0; color: var(--accent); }
html.ui-slate .fl-res .ck .si { width: 14px; height: 14px; }
html.ui-slate .fl-res .body { flex: 1; min-width: 0; }
/* Search results: the name opens Nutrition facts; the "+" on the right adds at the usual portion (a check once it's in the meal). */
html.ui-slate div.fl-res { padding: 0 4px 0 0; }
html.ui-slate div.fl-res:hover { background: none; }
html.ui-slate .fl-res__main { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 48px; padding: 6px 8px; text-align: left; background: none; border: 0; border-radius: 8px; color: inherit; font: inherit; cursor: pointer; }
html.ui-slate .fl-res__main:hover { background: var(--surface-2); }
html.ui-slate .fl-res .fl-add { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); cursor: pointer; }
html.ui-slate .fl-res .fl-add svg { width: 18px; height: 18px; }
html.ui-slate .fl-res .fl-add.on { background: var(--accent); color: var(--on-accent); }
html.ui-slate .fl-res .fl-add.on .si { width: 16px; height: 16px; }
/* Time eaten: one native field — the phone's own wheel / clock picker. */
html.ui-slate .fl-time {
  width: 100%; max-width: 220px; min-height: 46px; padding: 0 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text);
  font: 600 var(--fs-base)/1 var(--font-ui); font-variant-numeric: tabular-nums; color-scheme: dark;
}
html.ui-slate .fl-time::-webkit-calendar-picker-indicator { filter: invert(.75); cursor: pointer; }
/* Edit entry: time (sized to "10:30 AM" + clock) · Remove entry · Save on one row */
html.ui-slate .fe-top { display: flex; align-items: center; gap: 8px; }
html.ui-slate .fe-top .fl-time { flex: none; width: 8.75em; }
html.ui-slate .fe-top .sl-button { margin: 0; min-height: 46px; padding: 0 14px; white-space: nowrap; }
html.ui-slate .fe-top .sl-button--secondary { margin-left: auto; }
/* Nutrition Facts sheet (fuel.js openFacts / openPickFacts): the whole sheet
   is the FDA label card, with a border in the label's ink. Light theme:
   black on white. Dark theme: inverted, white on black, with the red and
   status colours lifted to keep their contrast on black. The label's rules and type carry through the actions, notes and
   meal goal below it. Qty, unit and meal are the only editable figures:
   red, underlined, with − / + either side of the amount. Padding gives
   them a 44px hit area without moving the label's lines. */
html.ui-slate .sl-sheet.sl-sheet--facts {
  --fx-ink: #CFCFCF; --fx-paper: #000; --fx-mid: #6a6a6a; --fx-scheme: dark;
  --fx-red: #FF6B6B; --fx-red-bg: rgba(255, 107, 107, .16); --fx-go: #4CC46A; --fx-caution: #F0A43A;
}
html.ui-slate[data-theme="light"] .sl-sheet.sl-sheet--facts {
  --fx-ink: #000; --fx-paper: #fff; --fx-mid: #8a8a8a; --fx-scheme: light;
  --fx-red: #B0101F; --fx-red-bg: rgba(176, 16, 31, .1); --fx-go: #1E7B34; --fx-caution: #B26A00;
}
html.ui-slate .sl-sheet.sl-sheet--facts {
  color-scheme: var(--fx-scheme); background: var(--fx-paper); color: var(--fx-ink); border: 3px solid var(--fx-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums;
}
html.ui-slate .sl-sheet--facts .grab i { background: var(--fx-ink); }
html.ui-slate .sl-sheet--facts .sl-sheet__head { margin: 0 20px; padding: 0 0 6px; border-bottom: 10px solid var(--fx-ink); }
html.ui-slate .sl-sheet--facts .sl-sheet__head h2 { color: var(--fx-ink); font: 900 22px/1.1 "Helvetica Neue", Helvetica, Arial, sans-serif; }
html.ui-slate .sl-sheet--facts .sl-sheet__head small { color: var(--fx-ink); font-size: 13px; }
html.ui-slate .sl-sheet--facts .sl-sheet__head .sl-icon-button { background: var(--fx-paper); color: var(--fx-ink); border: 2px solid var(--fx-ink); }
@media (min-width: 768px) {
  html.ui-slate .sl-sheet.sl-sheet--facts { border: 3px solid var(--fx-ink); }
  html.ui-slate .sl-sheet--facts .sl-sheet__head { margin: 24px 24px 0; padding: 0 0 6px; }
}
html.ui-slate .sl-sheet--facts .fx-top { margin-top: 10px; }
html.ui-slate .fx-top .sl-button { flex: 1 1 0; }
html.ui-slate .fx-top .sl-button--secondary { margin-left: 0; }
html.ui-slate .sl-sheet--facts .sl-button { border-radius: 4px; background: var(--fx-ink); color: var(--fx-paper); border: 2px solid var(--fx-ink); font: 800 15px "Helvetica Neue", Helvetica, Arial, sans-serif; }
html.ui-slate .sl-sheet--facts .sl-button.sl-button--secondary { background: var(--fx-paper); color: var(--fx-ink); }
html.ui-slate .sl-facts { margin: 12px 0 0; color: var(--fx-ink); font: 400 14px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; }
html.ui-slate .sl-facts p { margin: 2px 0; }
html.ui-slate .sl-facts b { font-weight: 800; }
html.ui-slate .sl-facts__header { padding-bottom: 3px; border-bottom: 10px solid var(--fx-ink); }
/* Serving size / Meal lines: label, −, qty, unit, +, grams all on one centre line. */
html.ui-slate .sl-facts__header p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-height: 32px; }
html.ui-slate .sl-facts__header .sl-facts__step { gap: 4px; }
html.ui-slate .sl-facts__header .sl-facts__stepbtn { margin: 0 2px; }
html.ui-slate .sl-facts__header .sl-facts__edit { margin: 0; line-height: 1.2; }
html.ui-slate .sl-facts .sl-facts__title { margin: 0 0 2px; color: var(--fx-ink); font: 900 32px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.01em; }
html.ui-slate .sl-facts__table { width: 100%; border-collapse: collapse; }
html.ui-slate .sl-facts__table th, html.ui-slate .sl-facts__table td { padding: 3px 0; border-top: 1px solid var(--fx-ink); font-weight: 400; text-align: left; vertical-align: baseline; color: var(--fx-ink); }
html.ui-slate .sl-facts__table thead th { border-top: 0; }
html.ui-slate .sl-facts__table td:last-child { text-align: right; white-space: nowrap; padding-left: 8px; }
html.ui-slate .sl-facts__cal th, html.ui-slate .sl-facts__cal td { font-size: 16px; }
html.ui-slate .sl-facts__cal b { font-weight: 900; }
html.ui-slate .sl-facts__dvhead td { border-top-width: 5px; }
html.ui-slate .sl-facts__row--sub th { padding-left: 1.1em; }
/* One line per nutrient (and for the calories row), whatever the language. */
html.ui-slate .sl-facts__table tbody th, html.ui-slate .sl-facts__cal td { white-space: nowrap; }
html.ui-slate .sl-facts__row--end th, html.ui-slate .sl-facts__row--end td { border-bottom: 10px solid var(--fx-ink); }
html.ui-slate .sl-facts__small { font-size: 12px; }
html.ui-slate .sl-facts__note { margin-top: 5px; }
html.ui-slate .sl-facts__note + .sl-facts__note { margin-top: 2px; }
html.ui-slate .sl-facts__step { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
html.ui-slate .sl-facts .sl-facts__stepbtn {
  position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; min-width: 0 !important; min-height: 0 !important;
  margin: 0 4px; padding: 0; border: 2px solid var(--fx-red); border-radius: 50%; background: var(--fx-paper); color: var(--fx-red); cursor: pointer;
}
html.ui-slate .sl-facts .sl-facts__stepbtn svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
html.ui-slate .sl-facts .sl-facts__stepbtn::after { content: ''; position: absolute; inset: -9px; }
html.ui-slate .sl-facts .sl-facts__stepbtn:disabled { opacity: .3; cursor: not-allowed; }
html.ui-slate .sl-facts .sl-facts__stepbtn:focus-visible { outline: 2px solid var(--fx-red); outline-offset: 2px; }
html.ui-slate .sl-facts .sl-facts__edit {
  -webkit-appearance: none; appearance: none; display: inline; width: auto; min-width: 0; min-height: 0; height: auto;
  margin: -4px 0; padding: 4px 3px; border: 0; border-radius: 4px; box-shadow: none; cursor: pointer;
  font: inherit; font-weight: 800; color: var(--fx-red); text-align: left; background: transparent;
}
/* Focus: a soft tint hugging the figure, not a ring around its padding. */
html.ui-slate .sl-facts .sl-facts__edit:focus, html.ui-slate .sl-facts .sl-facts__edit:focus-visible { outline: none; background: var(--fx-red-bg); }
html.ui-slate .sl-facts select.sl-facts__edit option { color: var(--fx-ink); background: var(--fx-paper); }
html.ui-slate .sl-facts .sl-facts__qty { width: 4.5ch; -moz-appearance: textfield; text-align: center; }
html.ui-slate .sl-facts .sl-facts__qty::-webkit-inner-spin-button, html.ui-slate .sl-facts .sl-facts__qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@supports (field-sizing: content) {
  html.ui-slate .sl-facts .sl-facts__qty { field-sizing: content; width: auto; min-width: 1.5ch; }
  html.ui-slate .sl-facts select.sl-facts__edit { field-sizing: content; }
}
/* Below the label: same ink, same rules. */
html.ui-slate .sl-sheet--facts #fxAbout { margin-top: 10px; }
html.ui-slate .sl-sheet--facts #fxAbout .fl-label {
  margin: 14px 0 6px; padding-top: 5px; border-top: 5px solid var(--fx-ink); color: var(--fx-ink);
  font: 800 13px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0; text-transform: none;
}
html.ui-slate .sl-sheet--facts #fxAbout .fl-label:first-child { margin-top: 0; }
html.ui-slate .sl-sheet--facts .muted, html.ui-slate .sl-sheet--facts .faint { color: var(--fx-ink); }
html.ui-slate .sl-sheet--facts .sl-chip { background: var(--fx-paper); color: var(--fx-ink); border: 1.5px solid var(--fx-ink); border-radius: 2px; font-family: inherit; font-weight: 800; letter-spacing: 0; }
html.ui-slate .sl-sheet--facts .sl-chip.sl-chip--go i { background: var(--fx-go); }
html.ui-slate .sl-sheet--facts .sl-chip.sl-chip--caution i { background: var(--fx-caution); }
html.ui-slate .fx-notes { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
html.ui-slate .fx-notes li { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--fx-ink); font-size: 13px; line-height: 1.35; }
html.ui-slate .fx-notes__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px); }
html.ui-slate .fx-notes__dot--go { background: var(--fx-go); }
html.ui-slate .fx-notes__dot--caution { background: var(--fx-caution); }
html.ui-slate .fx-history { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 0; color: var(--fx-ink); font-style: italic; }
html.ui-slate .fx-history .si { width: 16px; height: 16px; flex: none; }
html.ui-slate .sl-sheet--facts .fl-impact > div { padding-bottom: 8px; border-bottom: 1px solid var(--fx-ink); }
html.ui-slate .sl-sheet--facts .fl-impact .l, html.ui-slate .sl-sheet--facts .fl-impact .s { color: var(--fx-ink); font-family: inherit; }
html.ui-slate .sl-sheet--facts .fl-impact .v { color: var(--fx-ink); font: 900 17px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; }
html.ui-slate .sl-sheet--facts .fl-impact .v small { color: var(--fx-ink); font-family: inherit; }
html.ui-slate .sl-sheet--facts .fl-impact .track { background: var(--fx-paper); border: 1px solid var(--fx-ink); border-radius: 0; }
html.ui-slate .sl-sheet--facts .fl-impact .track .now { background: var(--fx-ink); }
html.ui-slate .sl-sheet--facts .fl-impact .track .add { background: var(--fx-mid); }
html.ui-slate .sl-sheet--facts .fl-impact .track .add.over { background: var(--fx-red); }
html.ui-slate .sl-sheet--facts .fl-impact .s.over { color: var(--fx-red); font-weight: 700; }
html.ui-slate .fx-more { margin: 14px 0 4px; }
html.ui-slate .sl-sheet--facts .st-inline { color: var(--fx-red); font-weight: 800; }
html.ui-slate .fl-note {
  width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 12px; resize: vertical;
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text); font: 400 var(--fs-sm)/1.4 var(--font-ui);
}
html.ui-slate .fl-add-note { display: inline-block; margin: 12px 0 0; }
html.ui-slate .fl-usual { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--accent-bg); color: var(--text); font-size: var(--fs-sm); }
html.ui-slate .fl-usual .si { width: 18px; height: 18px; flex: none; color: var(--accent); }
html.ui-slate .fl-usual span { flex: 1; min-width: 0; }
html.ui-slate .fu-note { margin: 2px 0 6px; color: var(--text-2); font-size: var(--fs-sm); font-style: italic; }
html.ui-slate .fl-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0 4px; }
html.ui-slate .fl-filters .fu-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
html.ui-slate .fl-results .fl-group { margin: 10px 0 2px; padding: 0 8px; }
html.ui-slate .fl-results .fl-group + .fl-res { border-top: 0; }
html.ui-slate .fl-res .fl-src { margin-left: 6px; font-size: var(--fs-xs); padding: 1px 6px; vertical-align: 1px; }
html.ui-slate .fl-res[disabled] { opacity: .6; }
html.ui-slate .fl-res .t { display: block; font-weight: 600; font-size: 1rem; }
html.ui-slate .fl-res .s { display: block; font-size: var(--fs-sm); color: var(--text-2); }
html.ui-slate .fl-item { display: flex; align-items: flex-start; gap: 8px; min-height: 56px; padding: 6px 0; border-top: 1px solid var(--line); }
html.ui-slate .fl-item .t { flex: 1; min-width: 0; font-weight: 600; font-size: 1rem; align-self: center; }
/* Edit entry: the item name is a button into the detailed editor (unit, name, details) */
html.ui-slate .fl-item .fe-detail { text-align: left; color: var(--text); font: inherit; font-weight: 600; padding: 0; min-height: 44px; border-radius: 6px; }
html.ui-slate .fl-item .fe-detail:hover { color: var(--accent); }
html.ui-slate .fl-item .t small { display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--text-2); }
html.ui-slate .fl-step { display: inline-flex; align-items: center; gap: 4px; flex: none; align-self: flex-start; margin-top: 4px; /* pinned: stays put when the macro line wraps */ }
html.ui-slate .fl-item > .sl-icon-button { align-self: flex-start; margin-top: 4px; }
html.ui-slate .sl-icon-button.sl-icon-button--small { width: 44px; height: 44px; min-width: 44px !important; min-height: 44px !important; font-size: 18px; }
html.ui-slate .sl-icon-button.sl-icon-button--small .si { width: 16px; height: 16px; }
html.ui-slate .fl-qty { width: 64px; min-height: 36px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); text-align: center; font: 600 var(--fs-base) var(--font-ui); }
html.ui-slate .fl-qty:disabled { opacity: .45; }
html.ui-slate .fl-step .u, html.ui-slate .fl-supp .u { font-size: var(--fs-sm); color: var(--text-2); min-width: 22px; }
/* Fixed unit column so every row's qty box, −/+ and remove (X) line up, whatever the unit ("g" vs "serving") */
html.ui-slate .fl-step .u { flex: none; width: 36px; min-width: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Unit picker (fuel.js unitControl): a native select styled as a chip, so it reads as tappable.
   Convertible rows put the stepper on its own line under the name: −, qty, unit, + don't fit beside it at 320–360px. */
html.ui-slate .fl-item--convertible { flex-wrap: wrap; row-gap: 2px; }
html.ui-slate .fl-item--convertible > .sl-icon-button { order: 1; }
html.ui-slate .fl-item--convertible .fl-step { order: 2; flex-basis: 100%; gap: 8px; margin-top: 0; }
html.ui-slate .fl-unit { position: relative; display: inline-flex; flex: none; }
html.ui-slate .fl-unit::after { content: ''; position: absolute; right: 9px; top: 50%; width: 10px; height: 10px; margin-top: -5px; pointer-events: none; background: var(--text-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
html.ui-slate .fl-unit__select { -webkit-appearance: none; appearance: none; min-width: 64px; min-height: 36px; padding: 0 26px 0 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: 600 var(--fs-base) var(--font-ui); cursor: pointer; }
html.ui-slate .fl-unit__select:hover { border-color: var(--text-2); }
html.ui-slate .fl-impact { display: grid; gap: 10px; }
html.ui-slate .fl-impact > div { display: grid; grid-template-columns: 70px 76px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 10px; }
html.ui-slate .fl-impact .l { font-size: var(--fs-sm); color: var(--text-2); grid-row: span 2; }
html.ui-slate .fl-impact .v { font: 600 var(--fs-lg)/1 var(--font-display); grid-row: span 2; }
html.ui-slate .fl-impact .v small { font: 500 var(--fs-sm) var(--font-ui); color: var(--text-2); margin-left: 2px; }
html.ui-slate .fl-impact .track { position: relative; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
html.ui-slate .fl-impact .track .now { position: absolute; inset: 0 auto 0 0; background: var(--text-3); }
html.ui-slate .fl-impact .track .add { position: absolute; top: 0; bottom: 0; background: var(--accent); }
html.ui-slate .fl-impact .track .add.over { background: var(--stop); }
html.ui-slate .fl-impact .s { font-size: var(--fs-sm); color: var(--text-2); }
html.ui-slate .fl-impact .s.over { color: var(--stop); }
html.ui-slate .fl-supp { display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid var(--line); }
html.ui-slate .fl-supp .t { flex: 1; min-width: 0; font-weight: 500; font-size: 1rem; }
html.ui-slate .fl-supp .fl-step { align-self: center; margin-top: 0; }
html.ui-slate .fl-step .sl-icon-button:disabled { opacity: .45; }
html.ui-slate .fl-check { width: 24px !important; height: 24px; min-width: 24px !important; min-height: 24px !important; border-radius: 6px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: var(--on-accent); flex: none; }
html.ui-slate .fl-check[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
/* Log food: draft header with the ⋯ defaults menu (Save as default / Reset), a dropdown, not the meal tray. */
html.ui-slate .fl-dhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 0 8px; }
html.ui-slate .fl-dhead .fl-label { margin: 0; }
html.ui-slate .fl-dmenu { margin: -8px -6px; }
html.ui-slate .fl-dmenu .sl-menu-btn[aria-expanded="true"] { opacity: 1; transform: none; pointer-events: auto; color: var(--text); background: var(--surface-3); }
html.ui-slate .fl-dmenu-list { top: calc(100% + 4px); flex-direction: column; align-items: stretch; gap: 0; min-width: 220px; padding: 6px; transform: none; transform-origin: top right; animation: fl-dmenu-in .16s ease-out; }
html.ui-slate .fl-dmenu-list [role="menuitem"] { flex-direction: row; justify-content: flex-start; gap: 10px; width: auto; min-height: 44px; padding: 0 12px; border-radius: 10px; font: 500 var(--fs-sm)/1.2 var(--font-ui); text-align: left; }
html.ui-slate .fl-dmenu-list [role="menuitem"] .si { width: 18px; height: 18px; flex: none; color: var(--accent); }
html.ui-slate .fl-dmenu-list [role="menuitem"]:hover, html.ui-slate .fl-dmenu-list [role="menuitem"]:focus-visible { background: var(--surface-2); }
html.ui-slate .fl-dmenu-list [role="menuitem"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
html.ui-slate .fl-dmenu-list [role="menuitem"]:disabled { opacity: .45; cursor: default; background: none; }
@keyframes fl-dmenu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.ui-slate .fl-dmenu-list { animation: none; } }
/* Supplements: add one by hand. */
html.ui-slate .fl-sf { margin-top: 8px; padding: 4px 12px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
html.ui-slate .fl-sf .fl-label { margin-top: 12px; }
html.ui-slate .fl-sf-f { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; margin-bottom: 10px; font-size: var(--fs-xs); color: var(--text-2); }
html.ui-slate .fl-sf-f small { font-size: inherit; color: var(--text-3, var(--text-2)); }
html.ui-slate .fl-sf .fl-search { background: var(--surface); }
html.ui-slate .fl-sf .fl-qty { width: 100%; min-height: 44px; background: var(--surface); }
html.ui-slate .fl-sf .fl-unit, html.ui-slate .fl-sf .fl-unit__select { width: 100%; min-height: 44px; }
html.ui-slate .fl-sf .fl-unit__select { background: var(--surface); }
html.ui-slate .fl-sf-row { display: flex; gap: 10px; }
html.ui-slate .fl-sf-mac { margin-top: 10px; }
html.ui-slate .fl-sf-mac .fl-sf-f { margin-bottom: 4px; }
html.ui-slate .fl-sf-hint { margin: 2px 0 0; }
html.ui-slate .fl-sf-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
html.ui-slate .fl-search-wrap--supp .fl-search { padding-right: 14px !important; }
html.ui-slate .fl-search-wrap--supp .fl-scan { display: none; }
html.ui-slate .fl-supp-more { display: inline-block; margin: 10px 0 0; }
html.ui-slate .fl-check .si { width: 14px; height: 14px; }
html.ui-slate .fw-custom { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: nowrap; }
html.ui-slate .fw-custom .fl-qty { flex: 1 1 auto; width: auto; min-width: 0; min-height: 44px; }
html.ui-slate .fw-custom .sl-segmented { flex: none; width: auto; container-type: normal; overflow: visible; }
html.ui-slate .fw-custom .sl-segmented > button { flex: none; min-width: 44px; padding: 0 12px; font-size: var(--fs-sm); }
html.ui-slate .fw-custom .sl-button { flex: none; }
html.ui-slate .fw-custom .sl-segmented, html.ui-slate .fw-custom .sl-button { margin: 0; }
html.ui-slate .st-kv .st-link { min-height: 36px; margin-left: 8px; font-size: var(--fs-xs); }
html.ui-slate .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Me (me.js) ──────────────────────────────────────────────────────────── */
html.ui-slate #tab-profile.active { display: block; }
html.ui-slate #tab-profile > :not(.slate-screen):not(.pull-refresh-indicator) { display: none !important; }
/* Me and the AI prompts page (prompts.js) share the tab: one shows at a time. */
html.ui-slate #tab-profile.slate-prompts > .slate-screen[data-screen="me"], html.ui-slate #tab-profile:not(.slate-prompts) > .slate-screen[data-screen="prompts"] { display: none; }
html.ui-slate .me-id { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
html.ui-slate .me-id h2 { font: 700 var(--fs-2xl)/1.05 var(--font-display); text-transform: uppercase; margin: 0; color: var(--text); }
html.ui-slate .me-id p { color: var(--text-2); font-size: var(--fs-sm); margin: 4px 0 0; }
html.ui-slate .slate-avatar.lg { width: 72px; height: 72px; font-size: var(--fs-2xl); }
html.ui-slate .me-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html.ui-slate .me-actions .sl-button { flex: 1; }
html.ui-slate .me-three { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
@media (min-width: 560px) { html.ui-slate .me-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html.ui-slate .me-three dd small { font: 500 var(--fs-xs) var(--font-ui); color: var(--text-2); }
html.ui-slate .me-three dd small.me-src { display: block; margin-top: 2px; }
/* Full-width tiles (Training for, Email) in the Personal details grid: same
   tile and label as the stats above, body-size text since the values are
   sentences / addresses rather than numbers. */
html.ui-slate .st-stats.me-three > div.me-wide { grid-column: 1 / -1; }
html.ui-slate .me-three > .me-wide dd { font: 500 var(--fs-md)/1.35 var(--font-ui); margin-top: 4px; overflow-wrap: anywhere; }
/* 8 short tiles leave a hole in the 3-column grid: Goal takes the rest of its row. */
@media (min-width: 560px) { html.ui-slate .me-three > .me-fill { grid-column: span 2; } }
/* Tappable tile: the button's ::after covers the whole tile. */
html.ui-slate .me-tap { position: relative; transition: background-color .15s ease; }
html.ui-slate .me-tap:hover { background: var(--surface-3); }
html.ui-slate .me-tap button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
html.ui-slate .me-tap button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
html.ui-slate .me-tap button:focus-visible { outline: none; }
html.ui-slate .me-tap:has(button:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
html.ui-slate .me-tap button > span { min-width: 0; }
html.ui-slate .me-tap button small { display: block; font-size: var(--fs-xs); color: var(--caution); margin-top: 2px; }
html.ui-slate .me-tap button > svg { flex: none; color: var(--text-3); }
/* Icon + name/description on the first row; status chip + action fill the second, under the name. */
html.ui-slate .me-conn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
html.ui-slate .me-conn-actions { grid-column: 3; display: flex; align-items: center; gap: 8px; }
html.ui-slate .me-conn-actions:empty { display: none; }
/* Phone: icon-only. Labels stay in the DOM for screen readers. */
html.ui-slate .me-conn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.ui-slate .me-conn .me-conn-ok { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
html.ui-slate .me-conn .me-conn-ok > i { display: none; }
html.ui-slate .me-conn .me-ic { width: 18px; height: 18px; }
html.ui-slate .me-conn .me-conn-btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 12px; }
@media (min-width: 720px) {
  html.ui-slate .me-conn .lbl { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  html.ui-slate .me-conn .me-ic { display: none; }
  html.ui-slate .me-conn .me-conn-ok { width: auto; height: auto; padding: 0 10px; border-radius: 999px; }
  html.ui-slate .me-conn .me-conn-ok > i { display: inline-block; }
  html.ui-slate .me-conn .me-conn-btn { width: auto; padding: 0 16px; }
}
html.ui-slate .me-conn:first-child { border-top: 0; }
/* Source badge on a main card's title: the Me → Connections tile, small. */
html.ui-slate .sl-src { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0 auto 0 8px; border-radius: 5px; font: 700 10px/1 var(--font-display); color: #0B0D10; background: var(--surface-3); flex: none; vertical-align: middle; }
/* Garmin attribution as text (Track 3): under the screen question and on Garmin-only cards. */
html.ui-slate .sl-attr { margin: 4px 0 0; font: 600 var(--fs-sm)/1.3 var(--font-ui); color: var(--text-2); }
html.ui-slate .me-conn .mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font: 700 var(--fs-md)/1 var(--font-display); color: #0B0D10; background: var(--surface-3); flex: none; }
html.ui-slate :is(.me-conn .mark, .sl-src) > svg { width: 62%; height: 62%; display: block; }
html.ui-slate [data-k="garmin"]:is(.mark, .sl-src) { background: #6CB6FF; } html.ui-slate [data-k="strava"]:is(.mark, .sl-src) { background: #FF8A3D; }
html.ui-slate .me-conn .mark[data-k="mfp"] { background: #4A8DFF; }
html.ui-slate [data-k="apple_health"]:is(.mark, .sl-src) { background: #FF6B81; }
html.ui-slate [data-k="oura"]:is(.mark, .sl-src) { background: #C9CED6; } html.ui-slate [data-k="ultrahuman"]:is(.mark, .sl-src) { background: #3DDC97; }
html.ui-slate .me-conn .body { min-width: 0; }
html.ui-slate .me-conn .body b { display: block; font-weight: 600; }
html.ui-slate .me-conn .body span { font-size: var(--fs-xs); color: var(--text-2); }
html.ui-slate .me-conn .body .me-sync.stale { color: var(--caution); }
html.ui-slate .sl-button.sl-button--small { min-height: 44px; padding: 0 12px; margin: 0; font-size: var(--fs-sm); }
html.ui-slate #meContentHost > .card { margin: 0; }
html.ui-slate .me-form { display: grid; gap: 12px; }
html.ui-slate .me-field { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
html.ui-slate .me-field input, html.ui-slate .me-field select { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: 500 var(--fs-md) var(--font-ui); text-transform: none; letter-spacing: 0; }
html.ui-slate .me-field input:focus, html.ui-slate .me-field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
html.ui-slate .me-field[hidden] { display: none; }
html.ui-slate .me-synclog { margin: 0; font: 400 var(--fs-xs)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Me → Instagram content (ui/slate/content.js) */
html.ui-slate .me-ct__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
html.ui-slate .me-ct__angle { margin: 8px 0 12px; font: 600 var(--fs-md)/1.35 var(--font-ui); color: var(--text); }
html.ui-slate .me-ct__block { margin-top: 14px; }
html.ui-slate .me-ct__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
html.ui-slate .me-ct__label { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
html.ui-slate .me-ct__pre { margin: 6px 0 0; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 var(--fs-sm)/1.5 var(--font-ui); color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
html.ui-slate .me-ct__strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; }
html.ui-slate .me-ct__strip img { flex: 0 0 auto; width: 216px; height: 270px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); scroll-snap-align: start; }
html.ui-slate .me-ct__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
html.ui-slate .me-ct__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: var(--fs-sm); color: var(--text); }
html.ui-slate .me-ct__img { margin-top: 8px; margin-bottom: 4px; }
html.ui-slate .me-ct__posted { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html.ui-slate .me-ct__posted .sl-input { flex: 1 1 220px; min-width: 0; }
html.ui-slate .me-ct .sl-input { height: 44px; padding: 0 12px; font: 400 var(--fs-sm) var(--font-ui); color: var(--text); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 12px; }
html.ui-slate .me-ct .sl-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.ui-slate .me-ct__article { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 4px; }
html.ui-slate .me-ct__article summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--text); }
html.ui-slate .me-ct__prose { font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); }
html.ui-slate .me-ct__prose h4 { margin: 14px 0 4px; font-size: var(--fs-md); color: var(--text); }
html.ui-slate .me-ct__prose blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--accent); }
/* A body field the nutrition targets still need (me.js openEdit). */
html.ui-slate .me-field[data-missing] input, html.ui-slate .me-field[data-missing] select { border-color: var(--caution); background: var(--caution-bg); }
html.ui-slate .me-field em { font-style: normal; color: var(--caution); text-transform: none; letter-spacing: 0; margin-left: 6px; }
html.ui-slate .me-field [aria-invalid="true"] { border-color: var(--stop); background: var(--stop-bg); }
html.ui-slate .me-err { color: var(--stop); font-size: var(--fs-xs); text-transform: none; letter-spacing: 0; }
html.ui-slate .gl-danger button, html.ui-slate .gl-danger button > .si:first-child { color: var(--stop); }
html.ui-slate .gl-danger button .sub { color: var(--stop); opacity: .8; }
html.ui-slate .me-actions .sl-button[disabled] { cursor: progress; }
html.ui-slate button.st-kv .muted .si { width: 14px; height: 14px; margin-left: 2px; vertical-align: -2px; }
html.ui-slate .me-sync-dot { display: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
html.ui-slate .me-actions .sl-button[aria-busy] { color: var(--text); border-color: var(--accent); }
html.ui-slate .me-actions .sl-button[aria-busy] .si { display: none; }
html.ui-slate .me-actions .sl-button[aria-busy] .me-sync-dot { display: inline-block; animation: slatePulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { html.ui-slate .me-actions .sl-button[aria-busy] .me-sync-dot { animation: none; } }
html.ui-slate .me-field textarea { min-height: 120px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: 400 var(--fs-sm)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: none; letter-spacing: 0; resize: vertical; }
html.ui-slate .me-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
html.ui-slate .me-field input.me-file { padding: 8px 12px; font-size: var(--fs-sm); color: var(--text-2); }
html.ui-slate .me-file::file-selector-button { min-height: 32px; margin-right: 12px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-3); color: var(--text); font: 600 var(--fs-sm) var(--font-ui); cursor: pointer; }
/* Today: one-line ask for missing Profile fields (today.js). */
html.ui-slate .st-nudge { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--caution) 40%, transparent); background: var(--caution-bg); font-size: var(--fs-sm); color: var(--text); }
html.ui-slate .st-nudge > span { display: inline-flex; align-items: center; gap: 8px; }
html.ui-slate .st-nudge .si { color: var(--caution); flex: none; }
html.ui-slate .fu-basis { margin: 12px 0 0; }
/* Admin sheet (admin.js). */
html.ui-slate .adm { display: grid; gap: 8px; }
html.ui-slate .adm-sec { padding: 4px 0 16px; border-bottom: 1px solid var(--line); }
html.ui-slate .adm-sec:last-child { border-bottom: 0; }
html.ui-slate .adm-head .st-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
html.ui-slate .adm code { font: 500 var(--fs-sm) ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }
html.ui-slate .adm-err { margin: 12px 0 0; }
html.ui-slate .adm-pin { display: grid; justify-items: center; gap: 16px; padding: 4px 0 8px; text-align: center; }
html.ui-slate .adm-pin .adm-err { margin: 0; }
html.ui-slate .adm-pin__dots { display: flex; gap: 14px; min-height: 16px; align-items: center; }
html.ui-slate .adm-pin__dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-strong, var(--line)); transition: background .12s, border-color .12s; }
html.ui-slate .adm-pin__dot--on { background: var(--text); border-color: var(--text); }
html.ui-slate .adm-pin__dots--shake { animation: admPinShake .36s ease; }
@keyframes admPinShake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
html.ui-slate .adm-pin__pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px; }
html.ui-slate .adm-pin__key { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2, transparent); color: var(--text); font-family: inherit; font-size: 26px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background .1s, transform .1s; }
html.ui-slate .adm-pin__key:active:not(:disabled) { background: var(--line); transform: scale(.94); }
html.ui-slate .adm-pin__key:focus-visible { outline: 2px solid var(--accent, var(--text)); outline-offset: 2px; }
html.ui-slate .adm-pin__key:disabled { opacity: .35; cursor: default; }
html.ui-slate .adm-pin__key--fn { border-color: transparent; background: transparent; }
html.ui-slate .adm-pin__key--go { background: var(--text); color: var(--bg); border-color: var(--text); }
html.ui-slate .adm-pin__key .si { width: 26px; height: 26px; }
html.ui-slate .adm-pin__note { margin: 0; }
@media (prefers-reduced-motion: reduce) { html.ui-slate .adm-pin__dots--shake { animation: none; } html.ui-slate .adm-pin__key { transition: none; } }
html.ui-slate .adm-user .body { min-width: 0; }
html.ui-slate .adm-actions { display: flex; gap: 8px; flex: none; }
html.ui-slate .adm-actions .sl-button.sl-button--small { min-height: 44px; }
html.ui-slate .adm-actions .sl-chip { margin-left: 2px; padding: 0 6px; }
html.ui-slate .adm-bulk { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
html.ui-slate .adm-bulk > :first-child { grid-column: 1 / -1; }
html.ui-slate .adm-bulk .sl-button { margin: 0; justify-content: center; }
html.ui-slate .adm-bulk.adm-bulk--pair > :first-child { grid-column: auto; }
html.ui-slate .st-log { list-style: none; margin: 12px 0 0; padding: 8px 12px; max-height: 160px; overflow-y: auto; border-radius: 12px; background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-2); }
html.ui-slate .st-log li { padding: 4px 0 4px 14px; position: relative; }
html.ui-slate .st-log li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--go); }
html.ui-slate .st-log li.fail::before { background: var(--stop); }
html.ui-slate .adm-refresh { display: flex; justify-content: flex-end; }
html.ui-slate .adm-queue { margin-top: 8px; }
html.ui-slate .adm-queue .sl-chip { white-space: normal; line-height: 1.3; min-height: 26px; padding: 4px 10px; }
html.ui-slate .adm-note { margin: 8px 0 0; }
html.ui-slate .adm-warn { color: var(--caution); }
html.ui-slate .adm-backfill { grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-top: 12px; }
html.ui-slate .adm-backfill .sl-button { margin: 0; min-height: 44px; }
html.ui-slate .adm-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
html.ui-slate .adm-trio .sl-button { margin: 0; justify-content: center; }
html.ui-slate .adm-backfill .me-field { min-width: 0; }
html.ui-slate .adm-backfill .me-field input, html.ui-slate .adm-backfill .me-field select { width: 100%; min-width: 0; box-sizing: border-box; }
html.ui-slate .adm-tool { padding: 12px 0; border-top: 1px solid var(--line); }
html.ui-slate .adm-tool:first-of-type { border-top: 0; }
html.ui-slate .adm-tool .fl-label { margin-top: 0; }
html.ui-slate .adm-tool-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
html.ui-slate .adm-tool-foot .sl-button { margin: 0; }
@media (max-width: 420px) { html.ui-slate .adm-bulk { grid-template-columns: 1fr; } html.ui-slate .adm-user { flex-wrap: wrap; } html.ui-slate .adm-actions { flex: 1 1 100%; flex-wrap: wrap; } }
/* Classic Prompts page restyled in place. */

/* ── Chrome: sign-in, loading, pending sync, announcements (chrome.js) ───── */
/* App mark = the favicon: orange two-peak mountain on black. */
html.ui-slate .sc-mark { width: 48px; height: 48px; border-radius: 14px; background: #000; color: #FF9E52; display: grid; place-items: center; margin: 0 auto 16px; overflow: hidden; }
html.ui-slate .sc-mark svg { width: 48px; height: 48px; }
html.ui-slate #auth-overlay.sc-auth { background: var(--bg) !important; }
html.ui-slate .sc-auth #auth-form { max-width: 360px !important; gap: 14px !important; }
html.ui-slate .sc-auth-brand { text-align: center; margin-bottom: 12px; }
/* App identity (S.brand(), core.js): the app-icon mark, FNP and the full name
   with the version. --foot closes the avatar drawer; --stacked closes Me.
   Light theme: white tile, orange mountain (the light accent stays legible on
   white), with a hairline so the tile reads on the page. */
html.ui-slate .sl-brand { display: flex; align-items: center; gap: 10px; color: var(--text-3); }
html.ui-slate .sl-brand__mark { flex: none; width: 32px; aspect-ratio: 1; border-radius: 24%; background: #000; color: #FF9E52; display: grid; place-items: center; }
html.ui-slate .sl-brand__mark svg { width: 84%; height: 84%; }
html.ui-slate[data-theme="light"] .sl-brand__mark { background: #FFF; color: var(--accent); box-shadow: inset 0 0 0 1px var(--line); }
html.ui-slate .sl-brand__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html.ui-slate .sl-brand__text b { font: 700 var(--fs-md, 1rem)/1 var(--font-display); letter-spacing: .06em; color: var(--text-2); }
html.ui-slate .sl-brand__text span { font-size: var(--fs-xs); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-slate .sl-brand--foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
html.ui-slate .sl-brand--stacked { flex-direction: column; gap: 8px; padding: 24px 0 8px; text-align: center; }
html.ui-slate .sl-brand--stacked .sl-brand__mark { width: 40px; }
/* The brand is a button: tapping the version opens What's new + Roadmap (releases.js). */
html.ui-slate button.sl-brand { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; border-radius: 12px; min-height: 44px; }
html.ui-slate button.sl-brand--foot { width: 100%; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); border-radius: 0; }
html.ui-slate button.sl-brand--stacked { width: 100%; padding: 24px 0 8px; text-align: center; align-items: center; }
html.ui-slate button.sl-brand .sl-brand__text span { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
html.ui-slate button.sl-brand:hover .sl-brand__text span { color: var(--text-2); text-decoration-color: currentColor; }
html.ui-slate button.sl-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.ui-slate .sl-rel__tabs { margin: 0 0 16px; }
html.ui-slate .sl-rel { display: flex; flex-direction: column; gap: 12px; }
html.ui-slate .sl-rel__ver { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); }
html.ui-slate .sl-rel__ver--current { background: var(--surface-3); }
html.ui-slate .sl-rel__head, html.ui-slate .sl-rel__ver > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
html.ui-slate .sl-rel__head h3, html.ui-slate .sl-rel__sub { margin: 0; font: 600 var(--fs-md, 1rem)/1.3 var(--font-ui); color: var(--text); }
html.ui-slate .sl-rel__sub { margin-top: 8px; font-size: var(--fs-sm); color: var(--text-2); }
html.ui-slate .sl-rel__ver > summary { cursor: pointer; min-height: 32px; align-items: center; font-weight: 600; color: var(--text); list-style: none; }
html.ui-slate .sl-rel__ver > summary::-webkit-details-marker { display: none; }
html.ui-slate .sl-rel__ver > summary > span:first-child { flex: 1; }
html.ui-slate .sl-rel__ver > summary::after { content: '+'; color: var(--text-3); width: 1ch; text-align: center; }
html.ui-slate .sl-rel__ver[open] > summary::after { content: '−'; }
html.ui-slate .sl-rel__list { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); line-height: 1.45; }
html.ui-slate .sl-rel__group { margin-top: 12px; }
html.ui-slate .sl-rel__more { align-self: stretch; margin-top: 4px; }
html.ui-slate .sl-rel__group .sl-rel__list { margin-top: 6px; }
html.ui-slate .sl-rel__tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 var(--fs-xs, .75rem)/1.4 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; border: 1px solid currentColor; }
html.ui-slate .sl-rel__tag--new { color: var(--accent); }
html.ui-slate .sl-rel__tag--improved { color: var(--text-2); }
html.ui-slate .sl-rel__tag--fixed { color: var(--go); }
html.ui-slate .sl-brand--stacked .sl-brand__text { align-items: center; }
html.ui-slate .sc-auth-brand h1 { font: 700 var(--fs-3xl, 2rem)/1 var(--font-display); text-transform: uppercase; color: var(--text); margin: 0; }
html.ui-slate .sc-auth-brand p { color: var(--text-2); margin: 8px 0 0; font-size: var(--fs-sm); }
html.ui-slate .sc-field { position: relative; display: grid; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
html.ui-slate .sc-field input { min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: 500 var(--fs-md) var(--font-ui); text-transform: none; letter-spacing: 0; }
html.ui-slate .sc-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
html.ui-slate .sc-reveal { position: absolute; right: 6px; bottom: 6px; min-height: 36px !important; min-width: 56px !important; padding: 0 10px; border-radius: 8px; color: var(--text-2); font: 600 var(--fs-xs) var(--font-ui); text-transform: none; letter-spacing: 0; }
html.ui-slate .sc-reveal:hover { color: var(--text); }
html.ui-slate .sc-auth .sl-button { width: 100%; margin-top: 6px; }
html.ui-slate .sc-auth #auth-error { color: var(--stop); font-size: var(--fs-sm); text-align: center; min-height: 18px; margin: 0; }
html.ui-slate #pending-sync-overlay.sc-pending { background: var(--bg) !important; }
html.ui-slate .sc-pending h1 { font: 700 var(--fs-2xl)/1.1 var(--font-display) !important; text-transform: uppercase; }
html.ui-slate .boot-overlay { background: var(--bg); }
html.ui-slate .boot-overlay .fx-loader { color: var(--accent); }
html.ui-slate .boot-overlay .fx-loader p { color: var(--text-2); font-family: var(--font-ui); }
html.ui-slate .announce-overlay { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ui-slate .announce-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 20px; box-shadow: var(--shadow-3); color: var(--text); }
html.ui-slate .announce-title { font: 700 var(--fs-xl)/1.1 var(--font-display); text-transform: uppercase; }
html.ui-slate .announce-body { color: var(--text-2); }
html.ui-slate .announce-ok { background: var(--accent); color: var(--on-accent); border-radius: 12px; min-height: 44px; padding: 0 18px; font-weight: 600; }

/* Today: Recovery / Load factor sheets (today.js openFactor) */
html.ui-slate .st-fx-links { display: flex; gap: 8px; }
html.ui-slate .st-fx-links > .sl-button { flex: 1 1 0; }

/* Fuel — Burned card, entry time, plan vs computed targets */
html.ui-slate .fu-burn { margin-top: 10px; }
html.ui-slate .fu-burn .fu-delta { margin-right: 6px; }
/* Fuel — energy-flow Sankey (macros → eaten → burned) */
html.ui-slate .fu-sankey svg { display: block; width: 100%; height: auto; max-height: 400px; overflow: visible; }
/* Labels can sit over a band (phone layout): a surface-coloured halo keeps them legible. */
html.ui-slate .fu-sankey .lbl, html.ui-slate .fu-sankey .pct { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
html.ui-slate .fu-sankey .lbl { font: 600 14px var(--font-ui); fill: var(--text); }
html.ui-slate .fu-sankey .pct { font: 500 13px var(--font-ui); fill: var(--text-2); font-variant-numeric: tabular-nums; }
html.ui-slate .fu-sankey .val { font: 600 17px var(--font-display); fill: var(--text); font-variant-numeric: tabular-nums; }
html.ui-slate .fu-sankey .ok { fill: var(--go); font-weight: 700; }
html.ui-slate .fu-sankey .off { fill: var(--caution); font-weight: 700; }
html.ui-slate .fu-sankey .gtrack { fill: var(--line); }
html.ui-slate .fu-sankey .gtick { fill: var(--text); }
html.ui-slate .fu-sankey .mid { fill: var(--text); }
html.ui-slate .fu-sankey .pill { fill: var(--surface); stroke: var(--line); }
html.ui-slate .fu-sankey .band { opacity: .45; transition: opacity .15s var(--ease-out); }
html.ui-slate .fu-sankey .band:hover { opacity: .9; }
html.ui-slate .fu-sankey__read { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
/* Time eaten: a chip with the native time field laid invisibly over it (a tap opens the phone's own picker). */
html.ui-slate .fl-when { display: flex; align-items: center; gap: 10px; }
html.ui-slate .fl-when-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; cursor: pointer; font-variant-numeric: tabular-nums; }
html.ui-slate .fl-when-chip .si { width: 16px; height: 16px; }
html.ui-slate .fl-when-chip:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
html.ui-slate .fl-when-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
html.ui-slate .fu-cmp { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
html.ui-slate .fu-cmp-t { display: grid; font-size: var(--fs-sm); }
html.ui-slate .fu-cmp-t > div { display: grid; grid-template-columns: minmax(64px, 1fr) repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
html.ui-slate .fu-cmp-t > .h { border-top: 0; font: 600 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
html.ui-slate .fu-cmp-t > div > :not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
html.ui-slate .fu-cmp-t small { color: var(--text-2); font-size: var(--fs-xs); }
html.ui-slate .fu-cmp-d { color: var(--text-2); }

/* Blind feel gate: full-screen layer so no readiness number shows before the user answers. */
html.st-blind body { overflow: hidden; }
#stFeelGate { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: var(--bg, #0b0d12); }
#stFeelGate { overflow-y: auto; }
#stFeelGate .st-feel-card { width: min(440px, 100%); display: grid; gap: 8px; text-align: center; margin: auto; }
#stFeelGate .st-feel-card .st-h3 { margin: 0; }
#stFeelGate .st-feel-hello { font: 600 clamp(1.5rem, 1.2rem + 1.6vw, 1.9rem)/1.1 var(--font-display, inherit); text-transform: none; letter-spacing: 0; color: var(--text); }
/* Daily motivation line under the greeting (a mindset tip, tips.js morningLine). */
#stFeelGate .st-feel-motto { margin: 0; color: var(--text-2); font-size: var(--fs-sm, .9rem); line-height: 1.4; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#stFeelGate .st-feel-motto b { color: var(--text); font-weight: 600; }
#stFeelGate .st-feel-q { margin: 4px 0 0; font: 600 var(--fs-md, 1.05rem) var(--font-display, inherit); color: var(--text); }
#stFeelGate .st-feel-links { display: flex; justify-content: center; gap: 4px; }
#stFeelGate .st-feel-link { min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: var(--fs-sm, .85rem); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#stFeelGate .st-feelslider--gate [data-feel-sub] { display: none; }
#stFeelGate .st-feelslider--gate input[type="range"] { height: 36px; }
#stFeelGate .st-buddy-panel { text-align: left; max-height: 40vh; overflow-y: auto; padding: 4px 2px 8px; }
/* Structured block header above the sport week (train.js blockHead). */
html.ui-slate .tr-block { display: grid; gap: 6px; padding: 12px; margin-bottom: 10px; border-radius: 12px; background: var(--surface-2); }
html.ui-slate .tr-block__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
html.ui-slate .tr-block .track { display: block; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
html.ui-slate .tr-block .fill { display: block; height: 100%; background: var(--c); }
html.ui-slate .tr-block__paces { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-variant-numeric: tabular-nums; }
html.ui-slate .tr-block__paces small { color: var(--text-2); }
/* 0–5 feel slider with the buddy (today.js feelSliderHTML). */
html.ui-slate .st-feelslider { display: grid; gap: 8px; justify-items: center; text-align: center; margin: 4px 0 8px; }
html.ui-slate .st-feelring { position: relative; width: clamp(132px, 40vw, 168px); aspect-ratio: 1; }
html.ui-slate .st-feelring svg { width: 100%; height: 100%; display: block; transform: rotate(135deg); }
html.ui-slate .st-feelring .track { stroke: var(--surface-3); }
html.ui-slate .st-feelring .val { stroke: var(--feel-c); transition: stroke-dasharray .15s var(--ease-out, ease-out), stroke .2s; }
html.ui-slate .st-feelring .c { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
html.ui-slate .st-feelring .num { font: 600 clamp(2.8rem, 2.2rem + 2.4vw, 3.8rem)/.9 var(--font-display, inherit); color: var(--text); font-variant-numeric: tabular-nums; }
html.ui-slate .st-feelring small { font: 500 var(--fs-sm, .85rem) var(--font-body, inherit); color: var(--text-2); margin-left: 2px; }
html.ui-slate .st-feelring--sm { width: 84px; }
html.ui-slate .st-feelring--sm .num { font-size: 1.9rem; }
html.ui-slate .st-feelring--sm small { font-size: var(--fs-xs); }
html.ui-slate .st-feelslider__line { font: 600 var(--fs-lg, 1.15rem) var(--font-display, inherit); color: var(--text); margin-top: -14px; }
html.ui-slate .st-feelslider .st-p { margin: 0; min-height: 1.4em; }
html.ui-slate .st-feelslider input[type="range"] { width: 100%; height: 44px; accent-color: var(--feel-c); cursor: pointer; touch-action: pan-y; }
html.ui-slate .st-feelslider__ends { width: 100%; display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-2); }
/* Buddy (ui/slate/buddy.js): the Green day character, also the check-in's face. */
html.ui-slate .gm-buddy__svg { display: block; width: 100%; overflow: visible; }
html.ui-slate .gm-buddy__svg .ln { fill: none; stroke: #1A1D22; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
html.ui-slate .gm-buddy__svg .eye, html.ui-slate .gm-buddy__svg .mouth, html.ui-slate .gm-buddy__svg .mask { fill: #1A1D22; }
html.ui-slate .gm-buddy__svg .shadow { fill: rgba(0, 0, 0, .28); animation: gmShadow 2.4s ease-in-out infinite; }
html.ui-slate .gm-buddy__svg .spot { fill: #1A1D22; opacity: .2; }
html.ui-slate .gm-buddy__svg .shell { fill: #F4EBDD; stroke: #1A1D22; stroke-width: 3; stroke-linejoin: round; }
html.ui-slate .gm-buddy__svg .sweat { fill: #7CC6FF; stroke: #1A1D22; stroke-width: 1.5; }
html.ui-slate .gm-buddy__svg .cape { fill: #E63946; stroke: #1A1D22; stroke-width: 3; stroke-linejoin: round; }
html.ui-slate .gm-buddy__svg .emblem { fill: #FFD166; stroke: #1A1D22; stroke-width: 2; stroke-linejoin: round; }
html.ui-slate .gm-buddy__svg .spark { fill: #FFD166; animation: gmTwinkle 1.6s calc(var(--i) * .3s) ease-in-out infinite; }
html.ui-slate .gm-buddy__svg .zz { fill: var(--text-2); font: 700 14px var(--font-ui); animation: gmZ 2s ease-in-out infinite; }
html.ui-slate .gm-buddy__svg .zz--2 { animation-delay: .6s; font-size: 10px; }
html.ui-slate .gm-buddy__body { transform-origin: 60px 108px; animation: gmBob 2.4s ease-in-out infinite; }
html.ui-slate .gm-mood-4 .gm-buddy__body { animation: gmHop .9s ease-in-out infinite; }
html.ui-slate .gm-mood-5 .gm-buddy__body { animation: gmFly 1.8s ease-in-out infinite; }
html.ui-slate .gm-mood-5 .shadow { animation: gmShadowFly 1.8s ease-in-out infinite; }
html.ui-slate .gm-mood-0 .gm-buddy__body { animation-duration: 4s; }
html.ui-slate .gm-buddy__svg .shadow, html.ui-slate .gm-buddy__svg .zz, html.ui-slate .gm-buddy__svg .spark { transform-box: fill-box; transform-origin: center; }
@keyframes gmBob { 50% { transform: translateY(-4px) scale(1.02, .98); } }
@keyframes gmHop { 0%, 100% { transform: translateY(0) scale(1.04, .94); } 40% { transform: translateY(-14px) scale(.97, 1.04); } }
@keyframes gmFly { 0%, 100% { transform: translateY(-8px) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(2deg); } }
@keyframes gmShadow { 50% { transform: scaleX(.9); opacity: .7; } }
@keyframes gmShadowFly { 0%, 100% { transform: scaleX(.75); opacity: .6; } 50% { transform: scaleX(.6); opacity: .4; } }
@keyframes gmTwinkle { 0%, 100% { transform: scale(.4); opacity: .2; } 50% { transform: scale(1); opacity: 1; } }
@keyframes gmZ { 0% { opacity: 0; transform: translate(0, 4px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -8px); } }
/* The gate: the buddy above the feel slider (today.js feelSliderHTML(…, true)). */
html.ui-slate .st-feelbuddy--gate { width: auto; min-height: 104px; margin: 0; display: grid; place-items: center; }
html.ui-slate .st-feelbuddy--gate > svg { width: 96px; }
html.ui-slate .st-feelslider--gate { gap: 4px; margin: 0; }
html.ui-slate .st-feelslider--gate .st-feelslider__line { margin-top: 0; }
/* Mascot: sprite buddies (ui/slate/mascot.js). Two stacked 3×3 sheets; the cell is picked with background-position. */
html.ui-slate .sl-mascot { position: relative; display: block; flex: none; width: var(--sl-mascot-size, 140px); aspect-ratio: 1; padding: 0; border: 0; background: transparent; appearance: none; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
html.ui-slate .sl-mascot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 16px; }
html.ui-slate .sl-mascot__squash { position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 78%; }
html.ui-slate .sl-mascot__layer { position: absolute; inset: 0; background-size: 300% 300%; background-repeat: no-repeat; pointer-events: none; }
html.ui-slate .sl-mascot__layer--react { opacity: 0; }
html.ui-slate .sl-mascot--reaction .sl-mascot__layer--dir { opacity: 0; }
html.ui-slate .sl-mascot--reaction .sl-mascot__layer--react { opacity: 1; }
html.ui-slate .sl-mascot-thumb { display: block; width: var(--sl-mascot-size, 64px); aspect-ratio: 1; background-size: 300% 300%; background-position: 50% 50%; background-repeat: no-repeat; }
html.ui-slate .sl-mascot-thumb--svg { display: grid; place-items: center; }
html.ui-slate .sl-mascot-thumb--svg > svg { width: 82%; }
/* Buddy picker (Me → Display, the gate's "Change buddy"). */
html.ui-slate .sl-buddy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 8px; }
html.ui-slate .sl-buddy-grid__item { display: grid; justify-items: center; gap: 2px; padding: 8px 4px 10px; min-height: 44px; border: 2px solid transparent; border-radius: 14px; background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-sm, .85rem); cursor: pointer; }
html.ui-slate .sl-buddy-grid__item[aria-checked="true"] { border-color: var(--accent); background: var(--surface-3); }
html.ui-slate .sl-buddy-grid__item small { color: var(--accent); font-size: var(--fs-xs, .72rem); }
html.ui-slate .me-buddy { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
html.ui-slate .me-buddy__text { flex: 1; min-width: 0; display: grid; }
html.ui-slate .me-buddy__text small { color: var(--text-2); }
/* The check-in's buddy above the ring. */
html.ui-slate .st-feelbuddy { width: clamp(96px, 30vw, 120px); margin-bottom: -6px; }
@media (prefers-reduced-motion: reduce) {
  html.ui-slate .st-feelring .val { transition: none; }
  html.ui-slate .gm-buddy__body, html.ui-slate .gm-buddy__svg .shadow, html.ui-slate .gm-buddy__svg .zz, html.ui-slate .gm-buddy__svg .spark { animation: none; }
}
/* Health → Patterns: today's check-in at a glance (ui/slate/health.js checkinCard). */
html.ui-slate .hl-ci { display: flex; gap: 16px; align-items: center; }
html.ui-slate .hl-ci__buddy { flex: none; width: 56px; }
html.ui-slate .hl-ci__rows { flex: 1; min-width: 0; }
html.ui-slate .hl-ci__line { font-weight: 600; margin-bottom: 4px; }
html.ui-slate .hl-rc__bar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
html.ui-slate .hl-rc__picker { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
html.ui-slate .hl-rc__picker::-webkit-scrollbar { display: none; }
html.ui-slate .hl-rc__chip { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--text-2); font: 600 var(--fs-sm) var(--font-ui); cursor: pointer; }
html.ui-slate .hl-rc__chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #14100c); }
html.ui-slate .hl-mt__wrap { overflow-x: auto; }
html.ui-slate .hl-mt { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-sm); }
html.ui-slate .hl-mt th, html.ui-slate .hl-mt td { padding: 8px 6px; text-align: left; border-top: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; }
html.ui-slate .hl-mt th:first-child, html.ui-slate .hl-mt td:first-child { width: 46%; font-weight: 500; color: var(--text-2); }
html.ui-slate .hl-mt thead th { border-top: 0; font: 600 var(--fs-xs) var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
html.ui-slate .hl-mt td { font-variant-numeric: tabular-nums; }
html.ui-slate .hl-mt td.used { color: var(--accent); font-weight: 700; }
html.ui-slate .hl-mt__grp th { padding-top: 14px; font: 600 var(--fs-xs) var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); border-top: 1px solid var(--line-strong, var(--line)); }
html.ui-slate .hl-mt__foot th, html.ui-slate .hl-mt__foot td { background: var(--surface-2); }
html.ui-slate .hl-mt button.st-plain { font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 0; min-height: 0; background: none; border: 0; }
@media (max-width: 560px) { html.ui-slate .hl-mt { font-size: 11.5px; } html.ui-slate .hl-mt thead th { letter-spacing: .02em; overflow-wrap: normal; } html.ui-slate .hl-mt th, html.ui-slate .hl-mt td { padding: 6px 5px; } html.ui-slate .hl-mt td { text-align: right; } html.ui-slate .hl-mt th:first-child { width: 42%; } }
html.ui-slate .tr-callout { margin: 0 0 12px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--go) 9%, transparent); border: 1px solid color-mix(in srgb, var(--go) 25%, transparent); line-height: 1.6; }
html.ui-slate .tr-callout--stop { background: color-mix(in srgb, var(--stop) 10%, transparent); border-color: color-mix(in srgb, var(--stop) 35%, transparent); }
html.ui-slate .tr-phase { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; font-size: var(--fs-sm); }
html.ui-slate .tr-phase > summary { cursor: pointer; font-weight: 600; }
html.ui-slate .tr-phase ul { margin: 0 0 6px 16px; padding: 0; color: var(--text-2); }
html.ui-slate .tr-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
html.ui-slate .tr-cal__dow, html.ui-slate .tr-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
html.ui-slate .tr-cal__dow { margin-bottom: 4px; text-align: center; font-size: var(--fs-xs); color: var(--text-3); }
html.ui-slate .tr-cal__day { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 10px; background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-2); }
html.ui-slate .tr-cal__day[data-cal-open] { cursor: pointer; }
html.ui-slate .tr-cal__day[data-cal-open]:hover { background: var(--surface-3); }
html.ui-slate .tr-cal__day--other { background: none; }
html.ui-slate .tr-cal__day--today { outline: 1.5px solid var(--go); outline-offset: -1.5px; color: var(--text); font-weight: 700; }
html.ui-slate .tr-cal__day--done::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--go); }
html.ui-slate .tr-cal__tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 3px; border-radius: 4px; font-size: 9.2px; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
html.ui-slate .tr-zs { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: 10px; }
html.ui-slate .tr-zs > span { min-width: 3px; }
html.ui-slate .tr-zcall { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--text-2); }
html.ui-slate .tr-zcall__dot { display: inline-block; margin-right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
html.ui-slate .tr-zr { display: grid; grid-template-columns: 10px minmax(0, 9.5em) auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
html.ui-slate .tr-zr--avg .tr-zr__name { color: var(--accent); font-weight: 700; }
html.ui-slate .tr-zr__dot { width: 10px; height: 10px; border-radius: 3px; }
html.ui-slate .tr-zr__track { position: relative; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: visible; }
html.ui-slate .tr-zr__track > span { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
html.ui-slate .tr-zr__mark { position: absolute; top: -3px; width: 3px; height: 14px; margin-left: -1px; border-radius: 2px; background: var(--text); }
html.ui-slate .tr-zr__val { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ui-slate .tr-zi { width: 20px; height: 20px; padding: 0; min-height: 0 !important; border: 0; background: none; color: var(--text-3); cursor: pointer; }
html.ui-slate .tr-zi svg { width: 16px; height: 16px; }
html.ui-slate .tr-en__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
html.ui-slate .tr-en__stat { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--surface-2); text-align: left; }
html.ui-slate .tr-en__stat b { font: 600 var(--fs-lg, 1.15rem) var(--font-display, inherit); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { html.ui-slate .tr-en__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html.ui-slate .tr-zt__block { margin-top: 14px; }
html.ui-slate .tr-zt__wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
html.ui-slate .tr-zt { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
html.ui-slate .tr-zt th, html.ui-slate .tr-zt td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
html.ui-slate .tr-zt tr:last-child td { border-bottom: 0; }
html.ui-slate .tr-zt th { color: var(--accent); font-weight: 700; }
html.ui-slate .tr-zinfo { margin: 0 0 8px 18px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: var(--fs-sm); }
html.ui-slate .tr-zinfo p { margin: 4px 0 0; color: var(--text-2); }
html.ui-slate .tr-sim__w { display: flex; justify-content: space-between; margin: 12px 0 4px; font-size: var(--fs-sm); }
html.ui-slate .tr-sim__range { width: 100%; accent-color: var(--accent); margin: 0 0 12px; }
html.ui-slate .tr-tips { margin: 0 0 8px 18px; padding: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
html.ui-slate .tr-lc { display: flex; --lc-h: 18px; --lc-gap: 3px; }
html.ui-slate .tr-lc__dows { display: grid; grid-template-rows: 12px repeat(7, var(--lc-h)); row-gap: var(--lc-gap); padding: var(--lc-pad, 4px) 0; flex: none; font-size: 10px; font-weight: 600; color: var(--text-3); }
html.ui-slate .tr-lc__dows span { display: flex; align-items: center; justify-content: center; width: 12px; margin-right: 6px; }
html.ui-slate .tr-lc--weekly .tr-lc__dows { display: none; }
html.ui-slate .tr-lc__wrap { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html.ui-slate .tr-lc__wrap::-webkit-scrollbar { display: none; }
html.ui-slate .tr-lc__grid { display: grid; grid-template-rows: 12px repeat(var(--lc-rows, 7), var(--lc-h)); grid-auto-flow: column; gap: var(--lc-gap); padding: var(--lc-pad, 4px) var(--lc-pad-r, 4px) var(--lc-pad, 4px) var(--lc-pad, 4px); width: max-content; }
html.ui-slate .tr-lc__mon { height: 12px; overflow: visible; font-size: 10px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--text-3); }
html.ui-slate .tr-lc__cell { display: block; width: 100%; height: 100%; min-width: 0 !important; min-height: 0 !important; padding: 0; border: 0; border-radius: 3px; background: var(--surface-3); cursor: pointer; transition: transform .15s ease; }
html.ui-slate .tr-lc__cell.empty { visibility: hidden; cursor: default; }
html.ui-slate .tr-lc__cell.l1, html.ui-slate .tr-lc__legend i.l1 { background: color-mix(in srgb, var(--go) 22%, transparent); }
html.ui-slate .tr-lc__cell.l2, html.ui-slate .tr-lc__legend i.l2 { background: color-mix(in srgb, var(--go) 42%, transparent); }
html.ui-slate .tr-lc__cell.l3, html.ui-slate .tr-lc__legend i.l3 { background: color-mix(in srgb, var(--go) 66%, transparent); }
html.ui-slate .tr-lc__cell.l4, html.ui-slate .tr-lc__legend i.l4 { background: var(--go); }
html.ui-slate .tr-lc__cell:hover { transform: scale(1.25); }
html.ui-slate .tr-lc__cell:focus-visible, html.ui-slate .tr-lc__cell.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
html.ui-slate .tr-lc__cell.now { box-shadow: inset 0 0 0 1.5px var(--text); }
html.ui-slate .tr-lc__legend { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 8px; font-size: var(--fs-xs); color: var(--text-3); }
html.ui-slate .tr-lc__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--surface-3); }
html.ui-slate .tr-lc__detail { margin-top: 10px; border-radius: 12px; background: var(--surface-2); font-size: var(--fs-sm); color: var(--text-2); }
html.ui-slate .tr-lc__detail:empty { display: none; }
html.ui-slate .tr-lc__detail > * { padding-left: 12px; padding-right: 12px; }
html.ui-slate .tr-lc__head { display: flex; justify-content: space-between; padding-top: 10px; padding-bottom: 6px; font-weight: 600; }
html.ui-slate .tr-lc__act { display: flex; align-items: center; gap: 8px; width: 100%; padding-top: 8px; padding-bottom: 8px; background: none; border: 0; border-top: 1px solid var(--line); color: inherit; font: inherit; text-align: left; cursor: pointer; }
html.ui-slate .tr-lc__act svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; }
html.ui-slate .tr-lc__act > :last-child { margin-left: auto; }
html.ui-slate .rb-card { margin-top: 18px; padding: 16px 14px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
html.ui-slate .rb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
html.ui-slate .rb-title { font-size: var(--fs-md, 1rem); font-weight: 650; }
html.ui-slate .rb-devices { display: flex; gap: 6px; flex-wrap: wrap; }
html.ui-slate .rb-chip { font-size: var(--fs-xs); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); }
html.ui-slate .rb-chip.is-primary { border-color: var(--go); color: var(--go); }
html.ui-slate .rb-headline { display: flex; align-items: baseline; gap: 14px; margin: 12px 0 8px; flex-wrap: wrap; }
html.ui-slate .rb-num { font: 700 28px var(--font-display, inherit); font-variant-numeric: tabular-nums; }
html.ui-slate .rb-cap { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
html.ui-slate .rb-arrow { color: var(--text-3); font-size: 18px; }
html.ui-slate .rb-stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface-3); }
html.ui-slate .rb-stack > span { display: block; height: 100%; }
html.ui-slate .rb-stack > span + span { box-shadow: inset 1px 0 0 rgba(0, 0, 0, .35); }
html.ui-slate .rb-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-2); margin-top: 6px; }
html.ui-slate .rb-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
html.ui-slate .rb-section-label { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 2px; }
html.ui-slate .rb-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
html.ui-slate .rb-row:last-of-type { border-bottom: 0; }
html.ui-slate .rb-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
html.ui-slate .rb-row-label { font-weight: 600; }
html.ui-slate .rb-row-label small { font-weight: 500; color: var(--text-3); font-size: var(--fs-xs); margin-left: 6px; }
html.ui-slate .rb-row-score { font-weight: 650; font-variant-numeric: tabular-nums; }
html.ui-slate .rb-bars { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
html.ui-slate .rb-track { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
html.ui-slate .rb-track > span { display: block; height: 100%; border-radius: 3px; }
html.ui-slate .rb-impact { flex: 0 0 96px; display: flex; align-items: center; gap: 6px; }
html.ui-slate .rb-impact-track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); }
html.ui-slate .rb-impact-track::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line-strong, var(--line)); }
html.ui-slate .rb-impact-track > span { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
html.ui-slate .rb-impact-val { flex: 0 0 38px; text-align: right; font-size: var(--fs-xs); font-weight: 650; font-variant-numeric: tabular-nums; }
html.ui-slate .rb-detail { font-size: var(--fs-xs); color: var(--text-3); margin-top: 5px; }
html.ui-slate .rb-math { font-size: var(--fs-xs); color: var(--text-3); margin-top: 10px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html.ui-slate .rb-dev { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: var(--fs-sm); color: var(--text-2); }
html.ui-slate .rb-dev-name { flex: 0 0 92px; }
html.ui-slate .rb-dev-val { min-width: 26px; text-align: right; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
html.ui-slate .tl-list { display: grid; gap: 8px; margin-top: 4px; }
html.ui-slate .tl-row { display: flex; align-items: stretch; gap: 8px; }
html.ui-slate .tl-row__main { flex: 1; min-width: 0; min-height: 56px; display: grid; gap: 2px; padding: 12px 14px; text-align: left; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--accent); font: inherit; cursor: pointer; }
html.ui-slate .tl-row__main b { font-weight: 600; color: var(--text); }
html.ui-slate .tl-row__link { flex: 0 0 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--line); color: var(--text-2); text-decoration: none; font-size: 18px; }
html.ui-slate .tl-when { margin: 0 0 12px; }
html.ui-slate .tl-doc { max-height: none; }
html.ui-slate .rd-dayacts { display: grid; gap: 8px; margin-top: 4px; }
html.ui-slate .rd-dayact { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
html.ui-slate .rd-dayact:hover { border-color: var(--line-strong, var(--line)); }
html.ui-slate .rd-dayact__ico { display: flex; width: 26px; height: 26px; flex: 0 0 auto; }
html.ui-slate .rd-dayact__ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
html.ui-slate .rd-dayact__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
html.ui-slate .rd-dayact__body b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-slate .hl-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 8px; }
html.ui-slate .hl-day-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; }
html.ui-slate .hl-day-nav > b { font: 600 var(--fs-md, 1rem) var(--font-ui); }
html.ui-slate .hl-di__row { padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
html.ui-slate .hl-di__row:first-of-type { border-top: 0; }
html.ui-slate .hl-di__head { display: flex; justify-content: space-between; gap: 8px; }
html.ui-slate .hl-di .track, html.ui-slate .hl-di__row .track { position: relative; display: block; height: 8px; margin: 6px 0 4px; background: var(--surface-3); border-radius: 4px; }
html.ui-slate .hl-di__row .fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--c); }
html.ui-slate .hl-ci-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
/* Weight & body fat card: body fat / BMI / count under the hero. */
html.ui-slate .tr-hbar .track { position: relative; }
html.ui-slate .st-kv.static > span:last-child { white-space: nowrap; }
html.ui-slate .ex-band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--go) 22%, transparent); border-radius: 3px; }
html.ui-slate .rs-garmin { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
html.ui-slate .rs-garmin:empty { display: none; }
html.ui-slate .rs-gn { margin: 0 0 6px; line-height: 1.4; }
html.ui-slate .dv-watch { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
html.ui-slate .dv-watch img { border-radius: 12px; background: var(--surface-3); object-fit: contain; }
html.ui-slate .dv-caps { margin-bottom: 12px; }
html.ui-slate .dv-sec { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; display: grid; gap: 4px; }
html.ui-slate .gr-row { display: grid; gap: 4px; width: 100%; padding: 10px 0; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); color: inherit; font: inherit; cursor: pointer; }
html.ui-slate .gr-row:first-of-type { border-top: 0; }
html.ui-slate .gr-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
html.ui-slate .gr-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
html.ui-slate .gr-bar > span { display: block; height: 100%; background: var(--c); border-radius: 999px; }
html.ui-slate .gr-defaults { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
html.ui-slate button.sl-chip[aria-pressed="true"] { background: var(--go-bg); color: var(--go); }
html.ui-slate .gr-old { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
html.ui-slate .gr-old summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
html.ui-slate .cy-bar { position: relative; display: flex; gap: 2px; height: 10px; margin: 6px 0 12px; border-radius: 999px; overflow: visible; }
html.ui-slate .cy-bar > span { background: var(--c); opacity: .55; border-radius: 3px; min-width: 3px; }
html.ui-slate .cy-bar > i { position: absolute; top: -4px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: var(--text); }
html.ui-slate .hl-wt-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: -4px 0 12px; }
html.ui-slate .hl-wt-stats > div { display: grid; gap: 2px; }
html.ui-slate .hl-wt-stats b { font: 600 var(--fs-lg, 1.15rem) var(--font-display, inherit); font-variant-numeric: tabular-nums; color: var(--text); }
/* Body composition (InBody) under the weight card: muscle map + radar */
html.ui-slate .hl-body { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
html.ui-slate .hl-body__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html.ui-slate .hl-body__bar .fl-label { margin: 0; }
html.ui-slate .hl-body__note { margin: 8px 0 0; }
html.ui-slate .hl-body__note .sl-button { margin-top: 8px; }
html.ui-slate .hl-body__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
html.ui-slate .hl-body__actions .sl-button { margin-top: 0; }
html.ui-slate .hl-body__seg { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
html.ui-slate .hl-body__seg th, html.ui-slate .hl-body__seg td { padding: 5px 4px; text-align: left; border-top: 1px solid var(--line); font-weight: 400; }
html.ui-slate .hl-body__seg thead th { border-top: 0; font-size: var(--fs-xs); color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
html.ui-slate .hl-body__seg tbody th { color: var(--text-2); white-space: nowrap; }
html.ui-slate .hl-ib-seg summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
html.ui-slate .hl-ib-table input { width: 100%; min-width: 0; min-height: 36px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: inherit; }
html.ui-slate .hl-ib-list { list-style: none; margin: 0; padding: 0; }
html.ui-slate .hl-ib-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
  html.ui-slate .hl-body__bar { flex-wrap: wrap; }
html.ui-slate .hl-body__facts { margin: 8px 0 0; }
html.ui-slate .hl-file { position: relative; overflow: hidden; cursor: pointer; }
html.ui-slate .hl-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
html.ui-slate .hl-file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
html.ui-slate .hl-mm { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
html.ui-slate .mm { display: block; width: 100%; height: auto; max-height: 420px; }
html.ui-slate .mm__sil { fill: var(--surface-3); }
html.ui-slate .mm__m { stroke: var(--surface); stroke-width: 3; stroke-linejoin: round; cursor: pointer; transition: opacity .2s; }
html.ui-slate .hl-mm__map { --mm-muscle: var(--text-3); }
html.ui-slate .hl-mm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html.ui-slate .hl-mm-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-2); font: 500 var(--fs-sm) var(--font-ui); }
html.ui-slate .hl-mm-chip i { width: 10px; height: 10px; border-radius: 50%; }
html.ui-slate .hl-mm-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-bg); color: var(--text); }
html.ui-slate .hl-mm-detail { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
html.ui-slate .hl-mm-detail__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html.ui-slate .hl-mm-radar { margin-top: 16px; }
html.ui-slate .hl-mm-lens { margin-top: 0; width: auto; flex: 0 1 180px; container-type: normal; overflow: visible; }
html.ui-slate .hl-mm-lens > button { min-height: 32px; padding: 0 12px; font-size: var(--fs-sm); }
html.ui-slate .hl-mm-todo { margin-top: 16px; }
html.ui-slate .hl-mm-todo ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
html.ui-slate .hl-mm-todo li { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
html.ui-slate .hl-mm-todo p { margin: 6px 0 0; }
html.ui-slate .hl-mm-radar__chart { height: 260px; }
html.ui-slate .hl-mm-numbers { margin-top: 12px; }
html.ui-slate .hl-ib-trend { margin-top: 16px; }
html.ui-slate .hl-ib-trend__chart { height: 200px; }
html.ui-slate .hl-ib-cmp { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
html.ui-slate .hl-ib-cmp select { min-height: 36px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-sm); }
html.ui-slate .hl-ib-list__act { display: inline-flex; gap: 16px; flex-shrink: 0; }
html.ui-slate .hl-mm-numbers .hl-body__seg { display: block; overflow-x: auto; }
html.ui-slate .hl-mm-numbers summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
@media (max-width: 560px) {
  html.ui-slate .hl-mm { grid-template-columns: minmax(0, 1fr); }
}
html.ui-slate [data-hl-weighin] { min-height: 44px; }

/* Today · tip of the day (ui/slate/tips.js). Floats above Today; the buttons
   unlock once the read ring on Close completes. */
html.ui-slate .st-tip-scrim { position: fixed; inset: 0; z-index: 95; display: grid; grid-template-columns: minmax(0, 420px); justify-content: center; align-content: end; padding: 16px 16px calc(96px + env(safe-area-inset-bottom, 0px)); background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .18s var(--ease-out); }
html.ui-slate .st-tip-scrim.open { opacity: 1; }
@media (min-width: 900px) { html.ui-slate .st-tip-scrim { align-content: center; padding-bottom: 16px; } }
html.ui-slate .st-tip { width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 20px; padding: 18px 18px 12px; box-shadow: var(--shadow-3); transform: translateY(12px); transition: transform .22s var(--ease-out); outline: none; }
html.ui-slate .st-tip-scrim.open .st-tip { transform: none; }
html.ui-slate .st-tip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
html.ui-slate .st-tip-n { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ui-slate .st-tip-text { margin: 10px 0 0; color: var(--text); font-size: var(--fs-base); line-height: 1.5; }
html.ui-slate .st-tip-text b { color: var(--accent); font-weight: 650; font-variant-numeric: tabular-nums; }
html.ui-slate .st-tip-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
html.ui-slate .st-tip-fb { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); cursor: pointer; transition: opacity .15s var(--ease-out), background .15s var(--ease-out); }
html.ui-slate .st-tip-fb.down svg { transform: rotate(180deg); }
html.ui-slate .st-tip-fb:not(:disabled):hover { background: var(--surface-3); }
html.ui-slate .st-tip-close { margin: 0 0 0 auto; min-width: 112px; }
/* Like: accent counter panel (rolls to +1 on a like) + thumb and label; on hover the fill flips to accent. */
html.ui-slate .st-tip-like { display: inline-flex; place-items: stretch; width: auto; padding: 0; overflow: hidden; border-color: var(--accent); background: var(--surface-2); color: var(--accent); box-shadow: 0 3px 0 var(--accent-bg); font: 650 var(--fs-base)/1 var(--font-ui); transition: opacity .15s var(--ease-out), background .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
html.ui-slate .st-tip-like-n { width: 40px; height: 100%; overflow: hidden; background: var(--accent); color: var(--on-accent); font-variant-numeric: tabular-nums; transition: background .2s var(--ease-out), color .2s var(--ease-out); }
html.ui-slate .st-tip-like-n > span { display: flex; flex-direction: column; transform: translateY(-50%); transition: transform .3s var(--ease-out); }
html.ui-slate .st-tip-like-n > span > span { display: grid; place-items: center; height: 42px; }
html.ui-slate .st-tip-like.liked .st-tip-like-n > span { transform: none; }
html.ui-slate .st-tip-like-r { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px 0 10px; }
html.ui-slate .st-tip-like-r svg, html.ui-slate .st-tip-like-l { transition: transform .2s var(--ease-out), opacity .2s var(--ease-out); }
@media (hover: hover) {
  html.ui-slate .st-tip-like:not(:disabled):hover { background: var(--accent); color: var(--on-accent); }
  html.ui-slate .st-tip-like:not(:disabled):hover .st-tip-like-n { background: var(--surface-2); color: var(--accent); }
  html.ui-slate .st-tip-like:not(:disabled):hover svg { transform: translateX(14px) scale(1.25); }
  html.ui-slate .st-tip-like:not(:disabled):hover .st-tip-like-l { transform: translateX(150%); opacity: 0; }
}
html.ui-slate .st-tip-like:not(:disabled):active, html.ui-slate .st-tip-like.liked { transform: translateY(2px) scale(.97); box-shadow: 0 1px 0 var(--accent-bg); }
html.ui-slate .st-tip-like:not(:disabled):active svg, html.ui-slate .st-tip-like.liked svg { transform: rotate(-20deg) scale(1.15); }
html.ui-slate .st-tip-like.liked:disabled { opacity: 1; }
@media (max-width: 359px) { html.ui-slate .st-tip-like-l { display: none; } html.ui-slate .st-tip-close { min-width: 0; } }
html.ui-slate .st-tip [data-tip]:disabled { opacity: .45; cursor: default; filter: none; }
html.ui-slate .st-tip-ring .trk { stroke: rgba(26, 14, 5, .25); }
html.ui-slate .st-tip-ring .val { stroke: #1A0E05; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .1s linear; }
html.ui-slate .st-tip-scrim.ready .st-tip-ring { display: none; }
html.ui-slate .st-tip-off { display: block; margin: 10px auto 0; padding: 8px; border: 0; background: none; color: var(--text-2); font: 500 var(--fs-sm)/1 var(--font-ui); cursor: pointer; }
html.ui-slate .st-tip-off:not(:disabled):hover { color: var(--text); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  html.ui-slate .st-tip-scrim, html.ui-slate .st-tip, html.ui-slate .st-tip-ring .val, html.ui-slate .st-tip-like, html.ui-slate .st-tip-like *, html.ui-slate .st-tip-like-n > span { transition: none; }
}

/* Health · "Which device is right?" — one card per device (no sideways-scrolling table).
   Cards flow 1-up on phones, 2-up and wider as space allows; every card lists the same rows. */
html.ui-slate .cmp-devs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
html.ui-slate .cmp-dev { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; min-width: 0; }
html.ui-slate .cmp-dev.on { border-color: var(--go); }
html.ui-slate .cmp-dev header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
html.ui-slate .cmp-dev h3 { margin: 0; font: 700 var(--fs-md, 16px)/1.2 var(--font-display); flex: 1; }
html.ui-slate .cmp-score { display: flex; align-items: center; gap: 10px; }
html.ui-slate .cmp-score .num { font: 700 32px/1.1 var(--font-display); }
html.ui-slate .cmp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm, 14px); }
html.ui-slate .cmp-row:first-of-type { margin-top: 10px; }
html.ui-slate .cmp-z { margin-left: 6px; font-size: var(--fs-xs); }
html.ui-slate .cmp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; margin-top: 10px; }
html.ui-slate .cmp-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 14px; }
html.ui-slate .cmp-tile .cmp-score .num { font-size: 24px; }
/* Sleep score sheet: the night view (night.js) sits below the score block. */
html.ui-slate .mt-hypno { margin-top: 16px; }
/* Health → Sleep and the Sleep score sheet: sleep cycle bands under the hypnogram (night.js) */
html.ui-slate .nt-cyc { position: relative; height: 10px; margin-top: 8px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--text) 6%, transparent); }
html.ui-slate .nt-cyc__b { position: absolute; top: 0; bottom: 0; background: var(--text-3); opacity: .55; }
html.ui-slate .nt-cyc__b.done { background: var(--go); opacity: 1; }
/* Collapsed by default: the summary is the card head, with a chevron. */
html.ui-slate .cmp-card > summary { cursor: pointer; list-style: none; min-height: 44px; margin-bottom: 0; justify-content: flex-start; }
html.ui-slate .cmp-card > summary .eyebrow { margin-right: auto; }
html.ui-slate .cmp-card > summary::-webkit-details-marker { display: none; }
html.ui-slate .cmp-card > summary::after { content: ""; margin-left: 10px; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform .15s var(--ease-out); }
html.ui-slate .cmp-card[open] > summary { margin-bottom: 12px; }
html.ui-slate .cmp-card[open] > summary::after { transform: rotate(-135deg); }

/* Health · Patterns · Load vs. Recovery: six narrow columns that fit a phone
   without sideways scrolling (units live in the column, trend is arrow-only). */
html.ui-slate #crossTableBody { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
html.ui-slate #crossTableBody :is(th, td) { padding: 7px 4px; }
html.ui-slate #crossTableBody :is(th, td):first-child { padding-left: 8px; }
html.ui-slate #crossTableBody :is(th, td):last-child { padding-right: 8px; }

/* Guide & glossary (ui/slate/guide.js) + the Effort term link on Today */
/* 44px touch area around the 16px label, like the hero chips. */
html.ui-slate .st-term { position: relative; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; min-height: 0 !important; min-width: 0 !important; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
html.ui-slate .st-term::after { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
html.ui-slate { --gd-z1: #8A93A1; --gd-z2: #5AA9E6; --gd-z3: #3DDC97; --gd-z4: #F5A524; --gd-z5: #F2555A; --gd-z6: #B57BFF; --gd-z7: #FF5FA8; --gd-sweet: #B9DC4A; }
html.ui-slate .gd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
html.ui-slate .gd-chips button { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text); background: color-mix(in srgb, var(--gd-c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gd-c) 35%, transparent); border-radius: 999px; padding: 4px 10px; }
html.ui-slate .gd-chips button i { width: 8px; height: 8px; border-radius: 50%; background: var(--gd-c); flex: none; }
html.ui-slate .gd-chips button:hover { border-color: var(--gd-c); background: color-mix(in srgb, var(--gd-c) 22%, transparent); }
html.ui-slate .gd-sec { scroll-margin-top: 12px; margin-top: 8px; }
html.ui-slate .gd-h { display: flex; align-items: center; gap: 8px; color: var(--gd-c); font-size: var(--fs-sm); margin-top: 24px; }
html.ui-slate .gd-h::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--gd-c); flex: none; }
html.ui-slate .gd-intro { color: var(--text); }
html.ui-slate .gd-bar { display: flex; gap: 2px; margin: 0 0 8px; border-radius: 8px; overflow: hidden; }
html.ui-slate .gd-bar span { flex: 1 1 0; min-width: 0; padding: 6px 2px; text-align: center; font: 600 var(--fs-xs)/1 var(--font-ui); color: #0B0D10; background: var(--t, var(--gd-c)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-slate .gd-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--gd-c) 30%, var(--line)); margin: 0 0 8px; }
html.ui-slate .gd-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
html.ui-slate .gd-table th, html.ui-slate .gd-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-top: 1px solid var(--line); line-height: 1.45; }
html.ui-slate .gd-table thead th { border-top: 0; background: color-mix(in srgb, var(--gd-c) 16%, var(--surface-2)); font-size: var(--fs-xs); color: var(--gd-c); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
html.ui-slate .gd-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--gd-c) 4%, transparent); }
html.ui-slate .gd-table tbody th { font-weight: 600; white-space: nowrap; color: var(--text); }
html.ui-slate .gd-table td { color: var(--text-2); }
html.ui-slate .gd-pill { display: inline-block; color: var(--gd-c); }
html.ui-slate .gd-table.toned tbody tr { box-shadow: inset 3px 0 0 var(--t, transparent); }
html.ui-slate .gd-table.toned .gd-pill { padding: 2px 8px; border-radius: 999px; color: var(--t, var(--text)); background: color-mix(in srgb, var(--t, var(--gd-c)) 18%, transparent); border: 1px solid color-mix(in srgb, var(--t, var(--gd-c)) 40%, transparent); }
html.ui-slate .gd-tip { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; font-size: var(--fs-sm); color: var(--text); background: color-mix(in srgb, var(--gd-c) 10%, transparent); border-left: 3px solid var(--gd-c); }
html.ui-slate .gd-tip::before { content: "Tip · "; font-weight: 600; color: var(--gd-c); }

/* Today: Fitness · last 14 days (today.js fitness14()) */
html.ui-slate .st-fit14-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
html.ui-slate .st-fit14-top .st-big small { margin-left: 4px; }
html.ui-slate .st-fit14-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; align-items: end; height: 72px; margin-top: 12px; }
html.ui-slate .st-fit14-bars span { height: var(--h); min-height: 3px; border-radius: 3px 3px 1px 1px; background: var(--surface-3); transform-origin: bottom; animation: stGrowY .6s var(--ease-out) both; }
html.ui-slate .st-fit14-bars span.now { background: var(--accent); }

/* Charts: a vertical swipe still scrolls the page; a horizontal drag scrubs the
   tooltip (it shows only while the finger is down, see fnPressToPeek). */
html.ui-slate .st-chart canvas, html.ui-slate .tr-chart canvas { touch-action: pan-y; }

/* ── Theme: light-mode fixes + the light switch (theme.js, Me → Display) ─── */
/* Rules that hardcode a dark-only look and so need a light twin. */
html.ui-slate[data-theme="light"] .fl-time { color-scheme: light; }
html.ui-slate[data-theme="light"] .fl-time::-webkit-calendar-picker-indicator { filter: none; opacity: .7; }
html.ui-slate[data-theme="light"] .sl-segmented > button[aria-selected="true"],
html.ui-slate[data-theme="light"] .sl-segmented > button[aria-checked="true"] { background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 0 0 1px var(--line); }
/* Classic panels Slate still hosts paint their wells in a translucent black. */
html.ui-slate[data-theme="light"] :is(.workout-stat-row .ws, .log-item, .log-entry, .macro-box, .ride-card:active) { background: var(--surface-2); }

/* The light switch (theme.js switchHTML(): Me → Display and the avatar
   drawer). A pill switch plugged into the wall: its cord lights up green when
   it's on, the knob is a fried egg that flips over as it slides across, and
   the whole switch tips on its hinge as it goes. On = light mode. Sizes are
   in em, so --ts-size scales the lot; the cord and plug hang 2em to its left.
   --pristine (dropped on the first change) keeps the tip animation from
   playing on render. */
html.ui-slate .sl-theme-switch {
  --ts-hue1: 223; --ts-hue2: 123; --ts-hue3: 38; --ts-hue4: 63;
  --ts-dur: .4s; --ts-t1: cubic-bezier(.65, .05, .36, 1); --ts-t2: cubic-bezier(.65, -.05, .36, 1.1);
  position: relative; display: block; flex: none; margin-left: 2em; border-radius: 1.5em;
  font-size: var(--ts-size, 10px); line-height: 1;
  box-shadow: 0 0 0 .125em hsla(var(--ts-hue1), 90%, 50%, 0);
  transform-origin: 0 50%;
  animation: tsOff var(--ts-dur) var(--ts-t1) forwards;
  transition: box-shadow .15s linear;
}
html.ui-slate .sl-theme-switch::before,
html.ui-slate .sl-theme-switch::after { content: ""; display: block; position: absolute; }
/* The cord. */
html.ui-slate .sl-theme-switch::before {
  top: calc(50% - .125em); right: 100%; width: .5em; height: .25em;
  background-color: hsl(var(--ts-hue1), 10%, 60%);
  box-shadow: .0625em 0 .0625em hsla(0, 0%, 10%, .8) inset;
  transition: background-color calc(var(--ts-dur) / 2) calc(var(--ts-dur) / 2) var(--ts-t1);
}
/* The plug. */
html.ui-slate .sl-theme-switch::after {
  top: calc(50% - .25em); right: calc(100% + .5em); width: 1.5em; height: .5em;
  border-radius: .25em .125em .125em .25em;
  background-image: radial-gradient(.3em .3em at 25% 50%, hsla(var(--ts-hue1), 10%, 20%, 0) 30%, hsl(var(--ts-hue1), 10%, 20%) 35% 45%, hsl(var(--ts-hue1), 10%, 30%) 50%);
  box-shadow: 0 0 .125em hsl(var(--ts-hue1), 10%, 10%) inset;
}
html.ui-slate .sl-theme-switch__input {
  position: relative; display: block; width: 6em; height: 3em; margin: 0; font: inherit; padding: 0; border: 0; border-radius: 1.5em;
  -webkit-appearance: none; appearance: none; outline: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background-color: hsl(var(--ts-hue1), 10%, 30%);
  box-shadow: 0 0 0 .125em hsl(var(--ts-hue1), 10%, 40%) inset, 0 0 .125em .375em hsl(var(--ts-hue1), 10%, 25%) inset, 0 0 0 .375em hsl(var(--ts-hue1), 10%, 55%) inset;
  animation: tsOffInput var(--ts-dur) var(--ts-t1) forwards;
}
html.ui-slate .sl-theme-switch__input::before,
html.ui-slate .sl-theme-switch__input::after {
  content: ""; position: absolute;
  transition: background-color var(--ts-dur) var(--ts-t1), box-shadow var(--ts-dur) var(--ts-t1), transform var(--ts-dur) var(--ts-t1);
}
/* The egg white. */
html.ui-slate .sl-theme-switch__input::before {
  top: .625em; left: .5em; width: 2em; height: 1.75em; border-radius: 50% 40%;
  background-color: hsla(var(--ts-hue4), 90%, 50%, .15);
  box-shadow: .0625em .0625em 0 hsla(var(--ts-hue4), 0%, 100%, .15) inset;
}
/* The yolk. */
html.ui-slate .sl-theme-switch__input::after {
  top: 1em; left: 1em; width: 1em; height: 1em; border-radius: 50%;
  background-color: hsl(var(--ts-hue3), 90%, 50%);
  background-image: radial-gradient(12.5% 12.5% at 20% 25%, hsl(0, 0%, 100%) 45%, hsla(0, 0%, 100%, 0) 50%), radial-gradient(15% 30% at 15% 50%, hsl(0, 0%, 100%) 45%, hsla(0, 0%, 100%, 0) 50%);
  box-shadow: -.0625em 0 0 hsla(var(--ts-hue3), 10%, 95%, .9), -.125em 0 0 hsl(var(--ts-hue3), 90%, 45%) inset, .125em 0 .125em hsla(0, 0%, 10%, .3);
  transform: rotate(45deg);
  transition-timing-function: var(--ts-t1), var(--ts-t1), var(--ts-t2);
}
/* The wrapper's state is a class theme.js sets (--on, --pristine), not
   :has(:checked): mobile WebKit doesn't restart an animation whose name
   changes through :has(), so the tip never played on phones. */
html.ui-slate .sl-theme-switch--pristine,
html.ui-slate .sl-theme-switch__input[data-pristine="true"] { animation: none; }
html.ui-slate .sl-theme-switch:has(:focus-visible) { box-shadow: 0 0 0 .125em var(--accent); }
html.ui-slate .sl-theme-switch--on { animation-name: tsOn; }
html.ui-slate .sl-theme-switch--on::before { background-color: hsl(var(--ts-hue2), 90%, 60%); }
/* The green track is also set statically: the animation ends on it, but a
   switch drawn already on (pristine, no animation) must show it too. */
html.ui-slate .sl-theme-switch__input:checked {
  animation-name: tsOnInput;
  background-color: hsl(var(--ts-hue2), 90%, 30%);
  box-shadow: 0 0 0 .125em hsl(var(--ts-hue2), 90%, 40%) inset, 0 0 .125em .375em hsl(var(--ts-hue2), 90%, 25%) inset, 0 0 0 .375em hsl(var(--ts-hue2), 90%, 55%) inset;
}
html.ui-slate .sl-theme-switch__input:checked::before {
  background-color: hsl(var(--ts-hue4), 10%, 95%);
  box-shadow: -.0625em -.0625em 0 hsl(var(--ts-hue4), 0%, 100%) inset;
  transform: translateX(3em) rotate(180deg);
}
html.ui-slate .sl-theme-switch__input:checked::after {
  background-color: hsl(var(--ts-hue3), 90%, 50%);
  box-shadow: -.0625em -.0625em 0 hsla(var(--ts-hue3), 10%, 95%, .6), -.125em 0 0 hsl(var(--ts-hue3), 90%, 45%) inset, .0625em .0625em .125em hsla(0, 0%, 10%, 0);
  transform: translateX(3em) rotate(45deg);
}
/* The tip on the hinge (the source's 480px body perspective, ≈ 11em at its size). */
@keyframes tsOff { from, to { transform: perspective(11em) rotateY(0); } 50% { transform: perspective(11em) rotateY(-15deg); } }
@keyframes tsOn { from, to { transform: perspective(11em) rotateY(0); } 50% { transform: perspective(11em) rotateY(15deg); } }
@keyframes tsOffInput {
  from {
    background-color: hsl(var(--ts-hue2), 90%, 30%);
    box-shadow: 0 0 0 .125em hsl(var(--ts-hue2), 90%, 40%) inset, 0 0 .125em .375em hsl(var(--ts-hue2), 90%, 25%) inset, 0 0 0 .375em hsl(var(--ts-hue2), 90%, 55%) inset;
  }
  50% {
    background-color: hsl(var(--ts-hue2), 90%, 30%);
    box-shadow: -.0625em 0 0 .125em hsl(var(--ts-hue2), 90%, 40%) inset, .0625em 0 .125em .375em hsl(var(--ts-hue2), 90%, 25%) inset, .0625em 0 0 .375em hsl(var(--ts-hue2), 90%, 55%) inset;
  }
  to {
    background-color: hsl(var(--ts-hue1), 10%, 30%);
    box-shadow: 0 0 0 .125em hsl(var(--ts-hue1), 10%, 40%) inset, 0 0 .125em .375em hsl(var(--ts-hue1), 10%, 25%) inset, 0 0 0 .375em hsl(var(--ts-hue1), 10%, 55%) inset;
  }
}
@keyframes tsOnInput {
  from {
    background-color: hsl(var(--ts-hue1), 10%, 30%);
    box-shadow: 0 0 0 .125em hsl(var(--ts-hue1), 10%, 40%) inset, 0 0 .125em .375em hsl(var(--ts-hue1), 10%, 25%) inset, 0 0 0 .375em hsl(var(--ts-hue1), 10%, 55%) inset;
  }
  50% {
    background-color: hsl(var(--ts-hue1), 10%, 30%);
    box-shadow: .0625em 0 0 .125em hsl(var(--ts-hue1), 10%, 40%) inset, -.0625em 0 .125em .375em hsl(var(--ts-hue1), 10%, 25%) inset, -.0625em 0 0 .375em hsl(var(--ts-hue1), 10%, 55%) inset;
  }
  to {
    background-color: hsl(var(--ts-hue2), 90%, 30%);
    box-shadow: 0 0 0 .125em hsl(var(--ts-hue2), 90%, 40%) inset, 0 0 .125em .375em hsl(var(--ts-hue2), 90%, 25%) inset, 0 0 0 .375em hsl(var(--ts-hue2), 90%, 55%) inset;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.ui-slate .sl-theme-switch,
  html.ui-slate .sl-theme-switch__input { animation-duration: .01s; }
  html.ui-slate .sl-theme-switch__input::before,
  html.ui-slate .sl-theme-switch__input::after { transition-duration: .01s; }
}
/* Me → Display row, and the avatar drawer's row (glance.js, at the top above
   "Today at a glance"). Each row is the switch's <label>, so a tap anywhere
   on it flips the switch. */
html.ui-slate .me-theme { display: flex; align-items: center; gap: 14px; cursor: pointer; }
html.ui-slate .me-theme__text { flex: 1 1 auto; min-width: 0; }
html.ui-slate .me-theme__text b { display: block; font-weight: 600; }
html.ui-slate .me-theme__text small { display: block; color: var(--text-2); font-size: var(--fs-xs); margin-top: 2px; }
html.ui-slate .me-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-top: 10px; }
html.ui-slate .me-theme-auto { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
html.ui-slate .gl-theme { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 4px; margin: 0 0 12px; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--text); cursor: pointer; }
html.ui-slate .gl-theme > span:not(.sl-theme-switch) { flex: 1 1 auto; }
html.ui-slate .gl-theme .sl-theme-switch { --ts-size: 13.33px; }
html.ui-slate .gl-theme > .si:first-child { color: var(--text-2); }

/* Screens redrawn for a theme change (theme.js) skip the card rise. */
html.theme-swap .sl-card { animation: none !important; }

/* ── Log a workout (workout.js, Quick add → Workout) ─────────────────────── */
html.ui-slate .wk-sports { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; text-transform: none; letter-spacing: 0; }
@media (max-width: 380px) { html.ui-slate .wk-sports { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html.ui-slate .wk-sports button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px !important; min-width: 0 !important; padding: 6px 2px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); font: 600 var(--fs-xs)/1.1 var(--font-ui); }
html.ui-slate .wk-sports button .si { width: 20px; height: 20px; }
html.ui-slate .wk-sports button[aria-checked="true"] { border-color: var(--accent); background: var(--accent-bg); color: var(--text); }
html.ui-slate .wk-sports button[aria-checked="true"] .si { color: var(--accent); }
html.ui-slate .wk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html.ui-slate .wk-quick { margin-top: -4px; }
html.ui-slate .wk-form .me-field small { text-transform: none; letter-spacing: 0; color: var(--text-3); }
html.ui-slate .wk-form .me-field b { color: var(--text); text-transform: none; letter-spacing: 0; margin-left: 6px; }
html.ui-slate .wk-form input[type="range"] { min-height: 32px; padding: 0; border: 0; background: none; accent-color: var(--accent); }
html.ui-slate .wk-form textarea { font: 400 var(--fs-base)/1.5 var(--font-ui); min-height: 84px; }
html.ui-slate .wk-form input[type="date"], html.ui-slate .wk-form input[type="time"] { color-scheme: inherit; }
html.ui-slate .wk-hint { margin: -6px 0 0; }
html.ui-slate .wk-err { margin: 8px 0 0; color: var(--stop); font-size: var(--fs-sm); min-height: 0; }
html.ui-slate .wk-err:empty { display: none; }

html.ui-slate .fu-pace { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); opacity: .85; pointer-events: none; }

/* Ask your coach (ui/slate/coach-ask.js) */
html.ui-slate .st-coach { display: flex; flex-direction: column; gap: 12px; }
html.ui-slate .st-coach-form { display: flex; gap: 8px; align-items: stretch; }
html.ui-slate .st-coach-in { flex: 1; min-width: 0; resize: vertical; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
html.ui-slate .st-coach-in:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
html.ui-slate .st-coach-in:disabled { opacity: .55; }
html.ui-slate .st-coach-reply { margin: 0; color: var(--text-2); }
html.ui-slate .st-coach-reply:empty { display: none; }
html.ui-slate .st-coach-list, html.ui-slate .st-coach-tune { display: flex; flex-direction: column; gap: 8px; }
html.ui-slate .st-coach-group { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; background: var(--surface-2); border-radius: 12px; }
html.ui-slate .st-coach-group ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.ui-slate .st-coach-tune-row { display: flex; flex-wrap: wrap; gap: 8px; }
html.ui-slate .st-coach-tuned:empty { display: none; }
html.ui-slate .st-coach-history { align-self: flex-start; margin: -4px 0; }
html.ui-slate .st-coach-past { display: flex; flex-direction: column; gap: 20px; }
html.ui-slate .st-coach-past__item { display: flex; flex-direction: column; gap: 8px; }
html.ui-slate .st-coach-past__item p { margin: 0; }
@media (max-width: 560px) { html.ui-slate .st-coach-form { flex-direction: column; } }

/* ── Compact phones (375px): mobile UX pass ─────────────────────────────── */
/* Big figures stay on one line: the value and its unit never split. */
html.ui-slate :is(.st-big, .st-stats dd, .gl-tile .val, .tr-ftp-hero .num, .rd-sum .v, .hl-hero .num, .fu-ring__c .num, .fu-kv .num, .fu-tvr-col .v, .fu-tile .v, .fl-foot__k b) { white-space: nowrap; }

/* Small sheet tables (breathing nights, weekly recovery): fixed columns that fit 375px, never scroll. */
html.ui-slate .st-mini-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 8px 0 4px; font-size: .92rem; font-variant-numeric: tabular-nums; }
html.ui-slate .st-mini-table th, html.ui-slate .st-mini-table td { padding: 5px 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The label column is wider and may wrap; the number columns never do. */
html.ui-slate .st-mini-table :is(th, td):first-child { width: 36%; text-align: left; white-space: normal; overflow-wrap: break-word; padding-right: 8px; }
html.ui-slate .st-mini-table :is(th, td) + :is(th, td) { padding-left: 8px; }
html.ui-slate .st-mini-table thead th { padding-top: 4px; padding-bottom: 4px; white-space: normal; vertical-align: bottom; font-weight: 500; color: var(--text-3); }
html.ui-slate .st-mini-table tbody td { border-top: 1px solid var(--line); }
html.ui-slate .st-mini-table .st-mini-table__key { font-weight: 600; }
html.ui-slate .hl-body__seg { table-layout: fixed; }
html.ui-slate .hl-body__seg :is(th, td) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Guide tables → one card per row under 640px (the row's pill is the card title, each cell keyed by its column). */
@media (max-width: 639.98px) {
  html.ui-slate .gd-wrap { overflow: visible; }
  html.ui-slate .gd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.ui-slate .gd-table, html.ui-slate .gd-table tbody, html.ui-slate .gd-table tr { display: block; }
  html.ui-slate .gd-table tr { padding: 10px 12px; border-top: 1px solid var(--line); }
  html.ui-slate .gd-table tbody tr:first-child { border-top: 0; }
  html.ui-slate .gd-table tbody th { display: block; padding: 0 0 6px; border: 0; }
  html.ui-slate .gd-table td { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 10px; padding: 4px 0; border: 0; }
  html.ui-slate .gd-table td::before { content: attr(data-label); color: var(--text-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; line-height: 1.7; }
}

/* iOS zooms into any field under 16px on focus: floor every typing field at 16px
   on phones. !important so inherited/inline sizes (facts label, Garmin login) can't undercut it. */
@media (max-width: 767px) {
  html.ui-slate :is(input:not([type="range"], [type="checkbox"], [type="radio"], [type="file"]), select, textarea) { font-size: max(16px, 1em) !important; }
}
html.ui-slate .mfp-cookie { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Touch screens: every control gets a 44px tap area without changing how it looks.
   Row-packed controls grow vertically only (so neighbours don't steal taps);
   lone round controls grow both ways. Fine pointers keep the compact sizes. */
@media (pointer: coarse) {
  html.ui-slate :is(.fu-car__dot, .fl-opts .sl-segmented > button, .tr-ftp-bar .sl-segmented > button, .rd-range button, #hlRangeHost .range-btn, .fu-chip, .sl-toast button, .subtab-btn, .fl-clear, .hl-ib-seg summary, .fu-adh-done, .sl-menu-dot, .side-btn) { position: relative; }
  html.ui-slate :is(.fl-opts .sl-segmented > button, .tr-ftp-bar .sl-segmented > button) { overflow: visible; }
  html.ui-slate :is(.fu-car__dot, .fl-opts .sl-segmented > button, .tr-ftp-bar .sl-segmented > button, .rd-range button, #hlRangeHost .range-btn, .fu-chip, .sl-toast button, .subtab-btn, .fl-clear, .hl-ib-seg summary)::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); transform: translateY(-50%);
  }
  html.ui-slate :is(.fu-adh-done, .sl-menu-dot, .side-btn)::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  /* Ellipsised chips clip a pseudo hit area, so these grow for real. */
  html.ui-slate .rd-chips button { min-height: 44px; }
  /* Checkbox / radio chips (Cycle log): the whole label is the target. */
  html.ui-slate label.sl-chip:has(> input:is([type="checkbox"], [type="radio"])) { min-height: 44px; }
}

html.ui-slate .ride-sheet-body .rs-source-link { display: block; margin: 8px 0 0; padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; }
html.ui-slate .ride-sheet-body .rs-source-link:hover { color: var(--text); }