:root{
  /* Aura design system — accent is a warm gold; --teal kept as the var name so the
     whole app (header/nav/cards/news/nutrition) re-accents from one place. Light-mode
     gold is deep enough to carry white text on filled chips. */
  --teal:#b8911f; --ink:#1b1c1c; --bg:#faf9f7; --card:#fff;
  --faint:#8a8d8c; --line:#ece9e4; --amber:#b45309; --good:#15803d;
  --accent-soft:#fbe6a4;
  /* surface-container elevation tiers (lighter = higher). Warm-chalk bg + white cards = lift by
     TONE (no shadow needed, both modes). Nav harmonizes with the bg, not pure white. */
  --surface-1:#ece8e1; --surface-2:#ffffff; --surface-3:#ffffff; --surface-4:#ffffff;
  --serif:'Manrope','Fraunces','Georgia',serif;        /* Aura display (metrics, titles, brand) */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
/* brand rule: titles are never bold — serif headings render light (a class can still opt back in) */
h1,h2,h3,h4{font-weight:400}
body{
  background:var(--bg);
  /* ambient depth: a faint warm-gold glow at the top so glass surfaces have something to refract */
  background-image:radial-gradient(125% 65% at 50% -12%, color-mix(in srgb, var(--teal) 6%, var(--bg)), var(--bg) 68%);
  background-attachment:fixed;
  color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; padding-bottom:env(safe-area-inset-bottom);
}
.app-header{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:calc(env(safe-area-inset-top) + 14px) 20px 11px;
  position:sticky; top:0; z-index:30; background:var(--bg);
  border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s;
}
.app-header.scrolled{border-bottom-color:var(--line); box-shadow:0 2px 10px rgba(0,0,0,.04)}
.header-left{display:flex; align-items:center; gap:9px; justify-self:start}
.header-center{justify-self:center}
.brand{font-family:var(--serif); font-size:24px; font-weight:400; color:var(--ink)}
.brand-logo{height:40px; width:auto; display:block}

/* in-app scan viewer (image/PDF with a close button) */
.scan-viewer{position:fixed; inset:0; z-index:60; background:rgba(10,14,12,.92); display:flex; flex-direction:column}
.scan-viewer[hidden]{display:none}
.scan-viewer-bar{display:flex; justify-content:flex-end; padding:calc(env(safe-area-inset-top) + 8px) 12px 8px}
.scan-viewer-close{width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:24px; line-height:1; cursor:pointer}
.scan-viewer-body{flex:1; display:flex; align-items:center; justify-content:center; overflow:auto; padding:0 8px 8px}
.scan-viewer-body img{max-width:100%; max-height:100%; object-fit:contain; border-radius:8px}
.scan-viewer-body iframe{width:100%; height:100%; border:0; background:#fff; border-radius:8px}
.asof{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}

/* Segmented timeframe toggle */
.toggle{
  display:flex; gap:4px; margin:0 14px 14px; padding:4px;
  background:#efece4; border:1px solid var(--line); border-radius:12px;
  position:sticky; top:0; z-index:5;
}
.toggle button{
  flex:1; border:0; background:transparent; color:#5d6a64;
  font-family:var(--sans); font-size:14px; font-weight:600;
  padding:9px 4px; border-radius:9px; cursor:pointer; transition:all .15s ease;
}
.toggle button.active{background:var(--card); color:var(--teal); box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* Prev / label / next period bar */
/* within-timeframe nav is now swipe (carousel inside the report); hide the button bar */
.period{display:none}
.period.show{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 16px 12px}
.plabel{flex:1; text-align:center; font-family:var(--serif); font-size:17px; color:var(--ink)}
.navbtn{
  width:38px; height:38px; flex:0 0 38px; border:1px solid var(--line); background:var(--card);
  color:var(--teal); font-size:20px; line-height:1; border-radius:50%; cursor:pointer;
}
.navbtn:disabled{color:#cfd4cf; border-color:#eee; cursor:default}

main{padding:0 20px 28px}   /* 20px gutter — luxe breathing room; header matches so controls line up */

/* pull-to-refresh indicator (swipe down at the top of any page) */
.ptr{
  position:fixed; top:calc(env(safe-area-inset-top) + 4px); left:50%; margin-left:-19px;
  width:38px; height:38px; border-radius:50%; background:var(--card); border:1px solid var(--line);
  box-shadow:0 2px 12px rgba(0,0,0,.12); color:var(--teal);
  display:grid; place-items:center; z-index:25; opacity:0;
  transform:translateY(-50px) scale(.8); pointer-events:none;
}
.ptr.spinning svg{animation:ptrspin .8s linear infinite}

/* ---------- News ---------- */
.news-controls{justify-content:flex-start}
.news-feed{display:flex; flex-direction:column; gap:14px; padding-top:2px}
.news-card{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.news-thumb{aspect-ratio:16/9; background:#efece4; overflow:hidden}
.news-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.news-body{padding:13px 14px 12px}
.news-meta{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:7px}
.news-media{color:var(--teal)}
.news-type{font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; border-radius:5px; padding:2px 6px; border:1px solid var(--line); color:var(--faint)}
.news-type.t-video{color:#c0392b; border-color:color-mix(in srgb,#c0392b 35%,transparent)}
.news-type.t-podcast{color:#8b5cf6; border-color:color-mix(in srgb,#8b5cf6 35%,transparent)}
.news-type.t-text{color:var(--teal); border-color:color-mix(in srgb,var(--teal) 35%,transparent)}
.news-title{font-family:var(--serif); font-size:18px; line-height:1.25; color:var(--ink); margin:6px 0 0}
.news-source{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); margin-top:5px}
.news-sum{font-size:14px; line-height:1.5; color:color-mix(in srgb, var(--ink) 78%, transparent); margin:7px 0 0}
.news-kws{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.news-kw{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:#5d6a64; background:#efece4; border-radius:6px; padding:3px 7px}
.news-actions{display:flex; align-items:center; justify-content:space-between; margin-top:12px}
.news-read{font-size:13px; font-weight:600; color:var(--teal); text-decoration:none}
.news-save{border:0; background:transparent; color:var(--faint); cursor:pointer; padding:4px; line-height:0; border-radius:8px; margin-right:-3px}   /* align the bookmark icon's right edge with the chat (Ask) button above it */
.news-save.on{color:var(--teal)}
.news-empty{text-align:center; padding:48px 20px; color:color-mix(in srgb, var(--ink) 78%, transparent)}
.news-empty p{margin:0 0 6px; font-family:var(--serif); font-size:17px}
.news-empty .goal-note{font-family:var(--sans); font-size:13px}
html[data-theme="dark"] .news-thumb{background:#222a2e}
html[data-theme="dark"] .news-kw{background:#222a2e; color:#9aa39d}

/* News filters (v68): sort order + type + keyword chips */
.news-controls{display:flex; gap:8px; align-items:center; margin:0 0 10px}
.news-filters{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px}
.news-order{flex:0 0 auto; border:1px solid var(--line); background:var(--card); color:var(--teal); font-family:var(--sans); font-size:13px; font-weight:600; padding:7px 12px; border-radius:10px; cursor:pointer}
.news-kwbar{display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; flex:1 1 100%}
.news-kwbar::-webkit-scrollbar{display:none}
.news-kwchip{flex:0 0 auto; border:1px solid var(--line); background:transparent; color:#5d6a64; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; padding:5px 9px; border-radius:8px; cursor:pointer}
.news-kwchip.on{background:var(--teal); color:#fff; border-color:var(--teal)}

/* ---------- Motion (v68): smart, minimal feedback ---------- */
/* chat — message bubbles glide in; the bot bubble pulses "•••" until text arrives */
.msg{animation:msgin .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes msgin{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.msg.bot.streaming:empty::after{content:'•••'; letter-spacing:2px; opacity:.45; animation:typing 1.1s ease-in-out infinite}
@keyframes typing{0%,100%{opacity:.22}50%{opacity:.7}}

/* fuel — status "fires up" + the big number counts when a meal is logged */
.nut-hero.fired{animation:nutfire .95s ease}
@keyframes nutfire{0%{box-shadow:0 0 0 0 transparent; transform:scale(1)}22%{transform:scale(1.03); box-shadow:0 0 24px 2px color-mix(in srgb, var(--amber) 50%, transparent)}100%{transform:scale(1); box-shadow:0 0 0 0 transparent}}
.nut-hero-k .nut-hero-n{display:inline-block; font-family:var(--serif); font-size:38px}   /* keep the big size (the unit span stays 16px) */
.nut-hero-n.t-good{color:#15803d}
.nut-hero-n.t-warn{color:#b45309}

/* check-in — Save button success pulse */
.ci-save.saved{background:var(--good); animation:savepulse .42s ease}
@keyframes savepulse{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}

/* training highlight — recovery heart pumps, strain bolt strikes */
.wk-vital .rec-ic svg{transform-origin:center; animation:heartpump 2.8s ease-in-out infinite}
@keyframes heartpump{0%,30%,100%{transform:scale(1)}8%{transform:scale(1.22)}16%{transform:scale(1.05)}23%{transform:scale(1.15)}}
.wk-vital .str-ic svg{transform-origin:center; animation:zapstrike 3.6s ease-in-out infinite}
@keyframes zapstrike{0%,80%{transform:scale(1); opacity:1}84%{transform:scale(.85); opacity:.4}88%{transform:scale(1.3); opacity:1}94%,100%{transform:scale(1)}}
.wk-vital .slp-ic{display:inline-block}
.wk-vital .slp-ic svg{display:block; transform-origin:center; animation:sleepbreathe 6.5s ease-in-out infinite}
@keyframes sleepbreathe{0%,72%,100%{transform:translateY(0) scale(1) rotate(0deg); opacity:.7}85%{transform:translateY(-2px) scale(1.22) rotate(-14deg); opacity:1}}

/* nav — a pulsing dot when a page has unseen new data */
.nav-btn{position:relative}
.nav-btn.has-new::after{content:''; position:absolute; top:7px; right:50%; margin-right:-13px; width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 6px var(--teal); animation:badgepulse 1.8s ease-in-out infinite}
@keyframes badgepulse{0%,100%{transform:scale(1); opacity:1}50%{transform:scale(1.4); opacity:.6}}
/* a Robinhood-style firework/confetti burst on a happy log (check-in / workout / fuel) */
.fx-layer{position:fixed; inset:0; pointer-events:none; z-index:80}
.fx-bit{position:absolute; width:9px; height:9px; border-radius:50%; will-change:transform,opacity}
/* check-in reminder: pulsing dot when today's check-in isn't done yet (persists until done) */
.nav-btn.needs-checkin::after{content:''; position:absolute; top:7px; right:50%; margin-right:-13px; width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 6px var(--amber); animation:badgepulse 1.8s ease-in-out infinite}
/* chat FAB: a glowing white dot when a reply finished while the chat was closed */
.chat-fab.unread::after{content:''; position:absolute; top:6px; right:6px; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 7px 2px rgba(255,255,255,.95), 0 0 0 1.5px color-mix(in srgb, var(--teal) 45%, transparent); animation:unreadglow 1.6s ease-in-out infinite}
@keyframes unreadglow{0%,100%{box-shadow:0 0 5px 1px rgba(255,255,255,.85); transform:scale(1)}50%{box-shadow:0 0 11px 3px rgba(255,255,255,1); transform:scale(1.14)}}

/* ---------- News: search, pills, sort popup, ask-concierge ---------- */
.news-search{flex:1; min-width:0; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font-family:var(--sans); font-size:14px; padding:10px 13px; -webkit-appearance:none; appearance:none}
.news-search::placeholder{color:var(--faint)}
.news-pill{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--card); color:#5d6a64; font-family:var(--sans); font-size:13px; font-weight:600; padding:9px 12px; border-radius:11px; cursor:pointer}
.news-pill svg{width:15px; height:15px}
.news-pill.on{background:var(--teal); color:#fff; border-color:var(--teal)}
/* a teal cue when a non-default sort/filter is active */
.news-pill{position:relative}
.news-pill.lit{border-color:var(--teal); color:var(--teal)}
.news-pill-dot{width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 6px var(--teal)}
.news-pill-icons{gap:7px; padding:9px 11px}   /* icon-only: sort glyph + filter funnel, no label */
.news-iconbtn{flex:0 0 auto; width:40px; height:38px; display:grid; place-items:center; border:1px solid var(--line); background:var(--card); color:#5d6a64; border-radius:11px; cursor:pointer}
.news-iconbtn svg{width:18px; height:18px}
.news-iconbtn.on{background:var(--teal); color:#fff; border-color:var(--teal)}
.news-ask{position:absolute; top:9px; right:9px; z-index:2; width:26px; height:26px; display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer;
  background:color-mix(in srgb, var(--card) 72%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--teal); box-shadow:0 2px 8px rgba(0,0,0,.14)}   /* matches the .ctx-chat size */
.news-ask svg{width:14px; height:14px}
.news-card{position:relative}
/* Stories day-sheets: one full-width sheet per day, horizontal scroll-snap between days */
.story-days{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:18px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.story-days::-webkit-scrollbar{display:none}
.story-day{flex:0 0 100%; scroll-snap-align:center; min-width:0; display:flex; flex-direction:column; gap:16px}
.story-date{display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:2px 2px -2px}
.story-hint{opacity:.7; text-transform:none; letter-spacing:.02em; font-size:10px}
/* brand sort popup reuses the .wk-classify scrim+card; option rows: */
.news-sortgrp{margin:4px 0 2px; text-align:left}
.news-sortgrp-cap{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:10px 0 7px}
.news-opts{display:flex; gap:8px; flex-wrap:wrap}
.news-opt{flex:1 1 auto; border:1px solid var(--line); background:var(--card); color:#5d6a64; font-family:var(--sans); font-size:14px; font-weight:600; padding:10px 8px; border-radius:10px; cursor:pointer}
.news-opt.on{background:var(--teal); color:#fff; border-color:var(--teal)}

/* chat: pinned-article context banner (Ask concierge from a news card) */
.chat-pin{display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:9px 11px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb, var(--teal) 7%, var(--card))}
.chat-pin-ic{flex:0 0 auto}
.chat-pin-t{flex:1; font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chat-pin-x{flex:0 0 auto; border:0; background:transparent; color:var(--faint); font-size:18px; line-height:1; cursor:pointer; padding:0 2px}

@media (prefers-reduced-motion: reduce){
  .cal-cell.pop::after{animation:none; opacity:0}
  .msg{animation:none}
  .msg.bot.streaming:empty::after{animation:none}
  .nut-hero.fired{animation:none}
  .nm-bar i{transition:none}
  .ci-save.saved{animation:none}
  .wk-vital .rec-ic svg, .wk-vital .str-ic svg, .wk-vital .slp-ic svg{animation:none}
  .nav-btn.has-new::after, .nav-btn.needs-checkin::after{animation:none}
  .chat-fab.unread::after{animation:none}
}

/* KPI cards */
.kpis{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px}
.kpi{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px 14px 12px; min-height:84px; display:flex; flex-direction:column; justify-content:center;
}
.kpi-v{font-family:var(--serif); font-size:30px; line-height:1; color:var(--teal)}
.kpi-l{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:color-mix(in srgb, var(--ink) 68%, transparent); margin-top:8px}
.kpi-s{font-size:12px; color:#5d6a64; margin-top:3px}
.kpis:empty{display:none}   /* rich report view owns the glance cards; native strip stays hidden */

.status{min-height:16px; font-size:12px; color:var(--faint); padding:2px 4px 8px}

/* Embedded full report */
.report-wrap{
  background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.report{width:100%; height:78vh; border:0; display:block; background:#fff}

/* "Show full report" — a separate sibling iframe (never nested inside the view) */
.full-report{margin-top:12px}
.full-report[hidden]{display:none}
.full-report > summary{list-style:none; cursor:pointer; text-align:center; border:1px dashed var(--line); background:var(--card); color:var(--teal); font-weight:600; font-size:13px; padding:12px; border-radius:12px}
.full-report > summary::-webkit-details-marker{display:none}
.full-report[open] > summary{margin-bottom:10px}

@media (min-width:680px){
  main{max-width:760px; margin:0 auto}
  .toggle{max-width:760px; margin-left:auto; margin-right:auto}
  .kpis{grid-template-columns:repeat(4,1fr)}
}

/* ============ theming: dark mode (Aura warm-dark + luminous gold) ============ */
html[data-theme="dark"]{
  --teal:#bd9740;   /* readable gold on dark; tints carry it, filled chips stay legible */
  --ink:#e7e3dd; --bg:#100f0e; --card:#211f1c; --faint:#8f877b; --line:#2f2c28;
  --accent-soft:#3a352a;
  /* elevation by TONE (lighter = higher) — the dark depth system, so cards lift without a hard shadow */
  --surface-1:#191815; --surface-2:#211f1c; --surface-3:#2a2723; --surface-4:#33302a;
}
/* light mode: small filled-gold chips/toggles get DARK text (bright gold + white was low-contrast) */
html:not([data-theme="dark"]) :is(.news-pill,.news-kwchip,.news-iconbtn,.news-opt,.ci-chip,.met-chip,.mem-priv-b,.ci-dot,.news-pill-dot).on{color:#1b1c1c}
html[data-theme="dark"] .toggle{background:#221f1b}
html[data-theme="dark"] .toggle button.active{background:#100f0d}
html[data-theme="dark"] .toggle button{color:#9a948a}
/* Aura uses a single gold accent — persona changes the concierge voice, not the colour */
body,.toggle button,.kpi,.kpi-v,.navbtn{transition:background .25s,color .25s,border-color .25s}
/* Aura: shell Manrope metrics read bold + tight */
.kpi-v,.nut-hero-n,.nut-hero-k .nut-hero-n{font-weight:700; letter-spacing:-.01em}

/* header right cluster + settings button */
.header-right{display:flex; align-items:center; gap:10px; justify-self:end}
.menu-btn{
  width:38px; height:38px; border:1px solid var(--line); border-radius:10px;
  background:var(--card); color:var(--ink); display:grid; place-items:center; cursor:pointer;
}

/* refresh button (replaces pull-to-refresh) */
.icon-btn{
  width:38px; height:38px; border:1px solid var(--line); border-radius:10px;
  background:var(--card); color:var(--ink); display:grid; place-items:center; cursor:pointer;
}
.icon-btn svg{transition:transform .15s}
.icon-btn:active svg{transform:rotate(-30deg)}
.icon-btn.spin svg{animation:ptrspin .8s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}

/* settings tabs */
.set-tabs{display:flex; gap:4px; background:#efece4; border:1px solid var(--line); border-radius:11px; padding:3px; margin:14px 0 6px}
html[data-theme="dark"] .set-tabs{background:#222a2e}
.set-tab-btn{flex:1; border:0; background:transparent; color:#5d6a64; font-family:var(--sans); font-size:13px; font-weight:600; padding:8px 4px; border-radius:8px; cursor:pointer}
.set-tab-btn.active{background:var(--card); color:var(--teal); box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* body-scan upload + archive */
.scan-upload{display:block; border:1.5px dashed var(--line); border-radius:12px; padding:18px; text-align:center; color:var(--teal); font-weight:600; font-size:14px; cursor:pointer}
.scan-archive{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.scan-item{display:flex; align-items:center; gap:12px; padding:9px; border:1px solid var(--line); border-radius:11px; text-decoration:none; color:var(--ink)}
.scan-thumb{width:46px; height:46px; flex:0 0 46px; border-radius:8px; object-fit:cover; background:var(--bg); display:grid; place-items:center; font-family:var(--mono); font-size:11px; color:var(--faint)}
.scan-meta{display:flex; flex-direction:column; line-height:1.3}
.scan-meta b{font-size:14px} .scan-meta i{font-style:normal; font-size:11.5px; color:var(--faint)}
.scan-row{display:flex; align-items:center; gap:8px}
.scan-row .scan-item{flex:1 1 auto; min-width:0}
.scan-del{flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--line); border-radius:11px; background:transparent; color:var(--faint); padding:11px; cursor:pointer; line-height:1}
.scan-del:hover{color:#c0392b; border-color:#c0392b}
/* destructive variant of the brand popup (delete confirms) */
.wkc-badge.wkc-danger{background:#c0392b}
.wkc-yes.wkc-yes-danger{background:#c0392b}

/* check-in weekly heatmap */
.ci-chart{margin-top:6px}
.cc-row{display:grid; grid-template-columns:62px repeat(7,1fr); gap:4px; align-items:center; margin-bottom:4px}
.cc-lab{font-size:11.5px; color:#5d6a64}
.cc-h{text-align:center; font-family:var(--mono); font-size:10px; color:var(--faint)}
.cc-cell{height:26px; border-radius:5px; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:600; cursor:pointer}

.cc-cell.eff{color:#fff}
.ci-hint{font-weight:400; color:var(--faint); font-size:11px}

/* check-in log — swipe a row left to delete */
.checkin-log{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.cl-row{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:11px; background:var(--card)}
.cl-del-bg{position:absolute; right:0; top:0; bottom:0; width:96px; display:flex; align-items:center; justify-content:center; background:#d9534f; color:#fff; font-size:13px; font-weight:600}
.cl-main{position:relative; z-index:1; display:block; width:100%; text-align:left; border:0; background:var(--card); color:var(--ink); padding:10px 12px; cursor:pointer; transition:transform .2s; touch-action:pan-y}
.ci-edit{border:0; background:transparent; color:var(--faint); font-size:13px; cursor:pointer; padding:0 4px}
.cl-date{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.cl-sub{font-size:13.5px; color:var(--ink); margin-top:3px}
.cl-note{font-size:12.5px; color:#5d6a64; margin-top:4px; line-height:1.45}

.ci-more{width:100%; margin-top:8px; border:1px solid var(--line); border-radius:10px; background:var(--card);
  color:var(--teal); font-family:var(--sans); font-size:13px; font-weight:600; padding:9px; cursor:pointer}

/* check-in extra fields (date / chips / supplements) */
.ci-dateinput{border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--ink); font:inherit; font-size:14px; padding:6px 9px}
.ci-field{padding:13px 0; border-bottom:1px solid var(--line)}
.ci-field .ci-lab{display:block; margin-bottom:9px}
.ci-chips{display:flex; flex-wrap:wrap; gap:7px}
.ci-chip{border:1px solid var(--line); background:var(--bg); color:#5d6a64; font-size:12.5px; padding:7px 11px; border-radius:999px; cursor:pointer}
.ci-chip.on{background:var(--teal); color:#fff; border-color:var(--teal)}
.ci-text{width:100%; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font:inherit; font-size:14px; padding:8px 10px}

/* data-freshness 'last sync' line (under the sticky header) */
.sync-line{display:block; width:calc(100% - 36px); margin:0 18px 8px; padding:6px 11px;
  border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--faint);
  font-family:var(--mono); font-size:11px; letter-spacing:.03em; text-align:left; cursor:pointer}
.sync-line[hidden]{display:none}
.sync-line.warn{color:var(--amber); border-color:var(--amber); background:var(--bg)}

/* ===== bottom nav + pages ===== */
main{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
.page[hidden]{display:none}
/* floating glass nav — icon-only pills, centred, not edge-to-edge. The translucent +
   blurred background is the "liquid glass" look; no text labels (which also stops iOS
   from popping its copy/selection callout when you hold the Dashboard button). */
.bottom-nav{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(12px + env(safe-area-inset-bottom)); z-index:35;
  display:flex; gap:4px; padding:6px; border-radius:24px;
  background:var(--bg);   /* solid page bg — opaque so the floating pill is the exact page colour (translucent+blur picked up scrolled content and read as a different tone) */
  border:1px solid color-mix(in srgb, var(--ink) 9%, transparent); box-shadow:0 10px 30px rgba(0,0,0,.18)}
.nav-btn{position:relative; display:grid; place-items:center; width:50px; height:46px; border:0; border-radius:15px;
  background:transparent; color:var(--faint); cursor:pointer;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.nav-btn.active{color:var(--teal); background:color-mix(in srgb, var(--teal) 15%, transparent)}
html[data-theme="dark"] .nav-btn.active svg{filter:drop-shadow(0 0 6px color-mix(in srgb, var(--teal) 55%, transparent))}
.dash-loading{text-align:center; color:var(--faint); padding:90px 0; font-family:var(--mono); font-size:13px; letter-spacing:.12em}

/* ===== Metric detail: slide-up sheet (replaces in-place expand) ===== */
body.sheet-open{overflow:hidden; overscroll-behavior:none}   /* freeze the dashboard behind an open detail sheet */
.sheet-scrim{position:fixed; inset:0; z-index:48; background:rgba(10,12,14,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .26s ease}
.sheet-scrim.show{opacity:1}
.sheet-scrim[hidden]{display:none}
.detail-sheet{position:fixed; left:0; right:0; bottom:0; z-index:49; max-width:520px; margin:0 auto;
  background:var(--card); border:1px solid var(--line); border-bottom:0; border-radius:26px 26px 0 0;
  box-shadow:0 -10px 40px rgba(10,12,14,.28); padding:8px 20px calc(22px + env(safe-area-inset-bottom));
  max-height:86vh; display:flex; flex-direction:column;
  transform:translateY(106%); transition:transform .3s cubic-bezier(.2,.8,.2,1); will-change:transform}
.detail-sheet.open{transform:translateY(0)}
html[data-theme="dark"] .detail-sheet{box-shadow:0 -10px 40px rgba(0,0,0,.5), 0 0 26px rgba(255,248,238,.05)}
.sheet-grab{flex:0 0 auto; width:38px; height:4px; border-radius:2px; margin:8px auto 4px;
  background:color-mix(in srgb, var(--ink) 18%, transparent)}
.sheet-head{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:6px 0 12px}
.sheet-title{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 70%, transparent); margin:0}
.sheet-body{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
/* the cloned detail keeps the dashboard's scoped look (the .dash <style> applies globally),
   but it no longer needs the in-card top border/margin that separated it from a summary */
.sheet-body .dash .blk-detail{margin-top:0; border-top:0; padding-top:0}

/* ===== Training page ===== */
.wk-page-head{padding:4px 0 8px}   /* no side padding → right edge matches the header's 16px gutter (so ＋ lines up under the hamburger) */
.wk-title{font-family:var(--serif); font-weight:400; font-size:26px; margin:0 0 18px; color:var(--ink); text-align:center}   /* weight 400 to match the dashboard date title (a span, not a bold h1) */
.wk-sub{margin:3px 0 0; font-size:13px; color:var(--faint)}

.cal-head{display:flex; align-items:center; justify-content:space-between; margin:24px 0 10px}   /* breathing room below the vitals highlight */
.cal-label{font-family:var(--serif); font-size:18px; color:var(--ink)}
.cal-nav{width:36px; height:36px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font-size:20px; line-height:1; cursor:pointer}
.cal-dow-row{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px}
.cal-dow-row span{text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--faint)}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.cal-cell{aspect-ratio:1/1; border:1px solid var(--line); border-radius:12px; background:var(--card); position:relative;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:2px; color:var(--ink)}
.cal-cell.empty{border:0; background:transparent; cursor:default}
.cal-d{font-family:var(--mono); font-size:10.5px; color:var(--faint); position:absolute; top:5px; left:7px}
.cal-ic{position:absolute; inset:0; padding-top:7px; color:var(--teal); display:grid; place-items:center}   /* anchored (centered) so a border/animation can never shift it */
.cal-cell.k-rest .cal-ic, .cal-cell.k-active_recovery .cal-ic{color:var(--faint)}
.cal-cell.past{opacity:.66}
/* day status = the block's BORDER colour (less cramped than an inner dot):
   green = did the planned routine · blue = trained, different workout · red = missed ·
   default line = planned */
/* "today" is marked by a tint + a bold number ONLY — its border + glow follow the day's
   STATUS colour (done/other/miss/plan), same as every other day, so they never disagree. */
.cal-cell.today{border-width:2px; background:color-mix(in srgb, var(--teal) 8%, var(--card))}
.cal-cell.today .cal-d{font-weight:700}
.cal-cell.st-done{border-color:color-mix(in srgb, var(--good) 75%, transparent)}
.cal-cell.st-other{border-color:color-mix(in srgb, #2f6f9f 80%, transparent)}
.cal-cell.st-miss{border-color:color-mix(in srgb, #d9534f 65%, transparent)}
.cal-cell.sel{box-shadow:0 0 12px 2px color-mix(in srgb, var(--teal) 38%, transparent)}   /* slight glow */
/* status BORDER pops in (staggered) as the month renders — the colored ring scales + glows */
.cal-cell.st-done{--stc:var(--good)}
.cal-cell.st-other{--stc:#2f6f9f}
.cal-cell.st-miss{--stc:#d9534f}
.cal-cell.st-plan{--stc:color-mix(in srgb, var(--ink) 22%, transparent)}   /* planned/neutral days get a soft ring so EVERY date pops */
/* the pop is a transient ring OVERLAY (a ::after), so the cell — and its number/icon — never
   scale or shift; staggered via the per-cell --pop-delay custom property set in renderGrid */
.cal-cell.pop::after{content:''; position:absolute; inset:-1px; border-radius:13px; border:2px solid var(--stc, transparent);
  opacity:0; pointer-events:none; transform-origin:center; animation:borderpop .42s cubic-bezier(.2,1.25,.4,1) backwards; animation-delay:var(--pop-delay, 0ms)}
@keyframes borderpop{0%{transform:scale(.7); opacity:0}55%{transform:scale(1.06); opacity:1}100%{transform:scale(1); opacity:0}}

.cal-detail{margin-top:26px; border:1px solid var(--line); border-radius:16px; background:var(--card); padding:14px 15px}   /* breathing room below the calendar */
.cal-detail[hidden]{display:none}
.cal-det-head{display:flex; align-items:flex-start; gap:12px}
.cal-det-ic{width:46px; height:46px; flex:0 0 46px; border-radius:13px; display:grid; place-items:center; background:var(--bg); color:var(--teal)}
.cal-det-ic.k-rest, .cal-det-ic.k-active_recovery{color:var(--faint)}
.cal-det-id{flex:1; min-width:0}
.cal-det-title{font-family:var(--serif); font-size:19px; color:var(--ink); display:flex; align-items:center; gap:9px}
.cal-pri{font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--teal); color:var(--teal); border-radius:5px; padding:1px 6px}
.cal-pri.must{border-color:var(--amber); color:var(--amber)}
.cal-det-date{font-size:12.5px; color:var(--faint); margin-top:2px}
.cal-det-x{width:30px; height:30px; flex:0 0 30px; border:0; background:transparent; color:var(--faint); font-size:22px; line-height:1; cursor:pointer}
.cal-det-lead{font-size:13.5px; font-style:italic; color:#5d6a64; margin-top:10px; line-height:1.5}
/* status dot beside the day title in the detail (mirrors the calendar) */
.cal-stat{width:9px; height:9px; flex:0 0 9px; border-radius:50%; display:inline-block}
.cal-stat.done{background:var(--good); box-shadow:0 0 6px var(--good)}
.cal-stat.other{background:#2f6f9f; box-shadow:0 0 6px #2f6f9f}
.cal-stat.plan{background:var(--faint)}
.cal-stat.miss{background:#d9534f}
/* top-right control stack: close (×) with the ＋ log button right below it */
/* logged workout(s) • strain — clean green line below the icon (remove entries in the ＋ sheet) */
.cal-det-logd{margin-top:11px; font-size:12.5px; color:var(--good); line-height:1.5}
.cal-det-logd.ld-other{color:#2f6f9f}   /* trained off-plan → blue, mirrors the dot/border */
.cal-det-reclass{margin-left:8px; border:0; background:transparent; color:var(--teal); font-size:13px; line-height:1; cursor:pointer; padding:0 2px; opacity:.65}
.cal-det-reclass:active{opacity:1}
/* log-a-workout sheet bits (shares the check-in sheet styles) */
.wk-log-name{width:100%; margin-top:9px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font:inherit; font-size:14px; padding:8px 11px}
.wkl-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink)}
.wkl-row:first-child{border-top:0}
.wkl-act{display:flex; gap:6px; flex:0 0 auto}
.wkl-ed,.wkl-rm{border:1px solid var(--line); border-radius:8px; background:var(--card); font-size:11.5px; font-weight:600; padding:5px 10px; cursor:pointer}
.wkl-ed{color:var(--teal)}
.wkl-rm{color:#d9534f}
/* Concierge-remembers: lighter, quieter than other section headers */
.wk-remember-h{font-weight:400; color:var(--faint)}
#workoutPrefs .wk-pref-slide{color:#5d6a64; font-weight:400}
/* classify popup — "was this your planned routine?" (brand-aligned card) */
.wk-classify{position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:24px}
/* confirm/prompt/alert (UI.*) must sit ABOVE the full-screen list sheet (z-80) — e.g. the delete
   confirm fired from inside the Golden Book, otherwise it renders behind it and looks broken */
.wk-classify.ui-modal{z-index:90}
/* "what did you do?" picker inside the classify card */
.wkc-picks{justify-content:center; margin:6px 0 10px}
.wkc-name{margin-bottom:10px}
.wk-classify-scrim{position:absolute; inset:0; background:rgba(20,30,25,.45)}
.wk-classify-card{position:relative; width:100%; max-width:340px; background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:22px 20px 18px; text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.3)}
.wkc-x{position:absolute; top:10px; right:12px}
.wkc-badge{width:46px; height:46px; margin:0 auto 10px; border-radius:50%; background:var(--teal); color:#fff; display:grid; place-items:center}
.wkc-title{font-family:var(--serif); font-size:19px; margin:0; color:var(--ink)}
.wkc-sub{font-size:12.5px; color:var(--faint); margin:5px 0 16px; line-height:1.5}
.wkc-yes{display:block; width:100%; border:0; border-radius:11px; background:var(--teal); color:#fff; font-size:14px; font-weight:600; padding:12px; cursor:pointer}
.wkc-no{display:block; width:100%; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink); font-size:13.5px; padding:11px; cursor:pointer; margin-top:8px}
.ui-in{width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink); font-size:14px; padding:9px 11px; margin:4px 0 12px; font-family:inherit; resize:vertical}
.ui-in:focus{outline:none; border-color:var(--teal)}
.wkc-ta{width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:11px; background:var(--bg); color:var(--ink); font:inherit; font-size:15px; line-height:1.6; padding:11px 12px; margin:0 0 14px; resize:vertical; text-align:left}

/* ===== Sunday "week in review" card (weekly dashboard) ===== */
.sun-report{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 16px 14px; margin:0 0 14px; box-shadow:0 6px 20px rgba(0,0,0,.05)}
.sun-report .sr-head{display:flex; align-items:center; gap:11px; margin-bottom:10px}
.sun-report .sr-badge{width:34px; height:34px; flex:0 0 34px; border-radius:11px; background:color-mix(in srgb, var(--teal) 9%, var(--card)); padding:7px; object-fit:contain; display:block}
/* gold logo as the concierge mark in every AI narrative head */
.narr-mark{width:17px; height:17px; flex:0 0 17px; display:block; object-fit:contain}
.sun-report h3{font-family:var(--serif); font-weight:400; font-size:19px; margin:0; color:var(--ink)}
.sun-report .sr-sub{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin-top:2px}
.sun-report .sr-goal{font-size:13.5px; line-height:1.5; color:var(--ink); opacity:.85; margin:0 0 12px}
.sun-report .sr-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); gap:10px; margin-bottom:14px}
.sun-report .sr-stat{text-align:center}
.sun-report .sr-k{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--faint)}
.sun-report .sr-v{font-family:var(--serif); font-size:22px; color:var(--ink); margin-top:2px}
.sun-report .sr-v.t-good{color:#2f9e6f} .sun-report .sr-v.t-caution,.sun-report .sr-v.t-warn{color:#d4942b} .sun-report .sr-v.t-alert{color:#d9534f}
.sun-report .sr-s{font-size:10.5px; color:var(--faint); margin-top:1px}
.sun-report .sr-adjust{width:100%; border:0; border-radius:11px; background:var(--teal); color:#fff; font-size:14px; font-weight:600; padding:12px; cursor:pointer}

/* ===== Onboarding tour ===== */
.tour-overlay{position:fixed; inset:0; z-index:5000; display:flex; align-items:flex-end; justify-content:center}
.tour-scrim{position:absolute; inset:0; background:rgba(20,30,25,.55)}
.tour-card{position:relative; width:100%; max-width:430px; background:var(--bg); border-radius:22px 22px 0 0; padding:26px 22px calc(24px + env(safe-area-inset-bottom)); box-shadow:0 -18px 50px rgba(0,0,0,.3); animation:tourup .32s cubic-bezier(.2,.8,.2,1)}
@keyframes tourup{from{transform:translateY(40px); opacity:.4}to{transform:none; opacity:1}}
.tour-x{position:absolute; top:12px; right:14px; border:0; background:none; color:var(--faint); font-size:24px; line-height:1; cursor:pointer}
.tour-badge{width:48px; height:48px; margin:0 0 12px; border-radius:14px; background:var(--teal); color:#fff; display:grid; place-items:center; font-size:24px}
/* brand-art badges (logo, chat glyph, golden book) sit on no fill so the art reads cleanly */
.tour-badge-art{background:none; color:var(--teal)}
.tour-badge-art svg{width:34px; height:34px}
.tour-logo{width:48px; height:48px; object-fit:contain; display:block}
/* inline concierge glyph used mid-sentence in the tour body */
.tour-inline{display:inline-flex; vertical-align:-0.18em; width:1.15em; height:1.15em; color:var(--teal)}
.tour-inline svg{width:100%; height:100%}
.tour-title{font-family:var(--serif); font-weight:400; font-size:24px; margin:0 0 8px; color:var(--ink)}
.tour-body{font-size:14.5px; line-height:1.6; color:var(--ink); opacity:.82; margin:0 0 18px}
/* "Choose your concierge" persona rows — colored badge + name + feel, mirroring the chat switcher */
.tour-personas{display:flex; flex-direction:column; gap:9px; margin:14px 0 4px; text-align:left}
.tour-persona{display:flex; align-items:center; gap:11px}
.tour-persona .bc-badge{width:34px; height:34px; flex:0 0 34px; font-size:16px}
.tour-persona-id{display:flex; flex-direction:column; line-height:1.3; min-width:0}
.tour-persona-id b{font-size:14.5px; color:var(--ink)}
.tour-persona-id i{font-style:normal; font-size:12px; color:var(--teal)}
.tour-persona-feel{font-size:12px; color:var(--faint)}
.tour-dots{display:flex; gap:6px; margin-bottom:16px}
.tour-dot{width:6px; height:6px; border-radius:50%; background:var(--line)}
.tour-dot.on{background:var(--teal); width:18px; border-radius:3px}
.tour-nav{display:flex; gap:10px}
.tour-nav button{flex:1; border-radius:12px; font-size:15px; padding:13px; cursor:pointer}
.tour-back,.tour-skip{border:1px solid var(--line); background:var(--card); color:var(--ink)}
.tour-next{border:0; background:var(--teal); color:#fff; font-weight:600}
.cal-det-meta{font-family:var(--mono); font-size:12px; color:var(--ink); margin-top:9px; margin-bottom:18px}
.cal-det-done{margin-top:9px; font-size:13px; color:var(--good)}
.cal-det-sec{margin-top:0; border-top:1px solid var(--line)}
.cal-det-sec > .cal-det-cap{font-family:var(--mono); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:color-mix(in srgb, var(--ink) 78%, transparent); list-style:none; cursor:pointer; padding:12px 22px 12px 0; position:relative; -webkit-user-select:none; user-select:none}
.cal-det-sec > .cal-det-cap::-webkit-details-marker{display:none}
.cal-det-sec > .cal-det-cap::after{content:'⌄'; position:absolute; right:2px; top:50%; transform:translateY(-60%); font-size:14px; color:var(--faint); transition:transform .18s}
.cal-det-sec[open] > .cal-det-cap::after{transform:translateY(-30%) rotate(180deg)}
.cal-det-body{font-size:13.5px; color:var(--ink); line-height:1.55; padding-bottom:12px}
.cal-cue{font-style:italic; color:#5d6a64; margin-top:5px}
.cal-curate{display:block; width:100%; text-align:left; margin-top:12px; border:1px dashed color-mix(in srgb,var(--teal) 40%,transparent); border-radius:10px; background:color-mix(in srgb,var(--teal) 5%,transparent); color:var(--teal); font-size:12.5px; line-height:1.5; padding:10px 12px; cursor:pointer; font-family:inherit}
.cal-ex{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:7px 0; border-top:1px solid var(--line)}
.cal-ex:first-child{border-top:0}

/* staged-proposal review: a quiet button + the popup table */
.wp-review{width:100%; text-align:left; border:1px solid var(--teal); border-radius:12px; background:color-mix(in srgb,var(--teal) 7%,transparent); color:var(--teal); font-size:14px; font-weight:600; padding:12px 14px; cursor:pointer; font-family:inherit; margin:6px 0 2px}
.pr-modal{position:fixed; inset:0; z-index:62; display:flex; align-items:flex-end; justify-content:center}
.pr-modal[hidden]{display:none}
.pr-scrim{position:absolute; inset:0; background:rgba(20,30,25,.45)}
.pr-sheet{position:relative; width:100%; max-width:520px; max-height:90vh; display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line); border-bottom:0; border-radius:18px 18px 0 0; box-shadow:0 -8px 30px rgba(20,30,25,.2)}
@media (min-width:680px){ .pr-modal{align-items:center} .pr-sheet{border-radius:18px; border-bottom:1px solid var(--line); max-height:86vh} }
.pr-head{display:flex; align-items:flex-start; justify-content:space-between; padding:15px 16px 12px; border-bottom:1px solid var(--line)}
.pr-title{font-family:var(--serif); font-size:19px; color:var(--ink)}
.pr-sub{font-size:12px; color:var(--faint); margin-top:3px; line-height:1.4}
.pr-close{border:0; background:transparent; font-size:24px; line-height:1; color:var(--faint); cursor:pointer; padding:0 2px}
.pr-body{overflow-y:auto; padding:4px 0 6px; -webkit-overflow-scrolling:touch}
.pr-wk{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:12px 16px 3px}
.pr-day{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.pr-day:first-child{border-top:0}
.pr-drow{display:flex; align-items:center; gap:9px; padding:11px 16px; cursor:default}
.pr-day.has-ex .pr-drow{cursor:pointer}
.pr-dic{flex:0 0 22px; color:var(--teal); display:grid; place-items:center}
.pr-dic svg{width:18px; height:18px}
.pr-dd{flex:0 0 70px; font-size:11.5px; color:var(--faint)} .pr-dd b{color:var(--ink); font-size:12.5px}
.pr-dn{flex:1; font-size:13.5px; font-weight:600; color:var(--ink); min-width:0; display:flex; align-items:center; gap:7px}
.pr-dm{font-size:11px; color:var(--faint); flex:0 0 auto}
.pr-cv{flex:0 0 auto; color:var(--faint); font-size:12px; transition:transform .15s}
.pr-day.open .pr-cv{transform:rotate(90deg)}
.pr-chg{font-family:var(--mono); font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--amber); padding:2px 6px; border-radius:20px}
.pr-day.changed{background:color-mix(in srgb,var(--amber) 6%,transparent); border-left:3px solid var(--amber); box-shadow:inset 0 0 13px color-mix(in srgb,var(--amber) 12%,transparent); animation:prglow 2.6s ease-in-out infinite}
@keyframes prglow{0%,100%{box-shadow:inset 0 0 9px color-mix(in srgb,var(--amber) 8%,transparent)}50%{box-shadow:inset 0 0 17px color-mix(in srgb,var(--amber) 19%,transparent)}}
.pr-ex{display:none; list-style:none; margin:0; padding:2px 16px 12px 47px}
.pr-day.open .pr-ex{display:block}
.pr-exh{display:none; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); padding:6px 16px 0 47px}
.pr-day.open .pr-exh{display:block}
.pr-ex li{display:flex; align-items:center; gap:8px; padding:4px 0; font-size:13px; border-top:1px dashed color-mix(in srgb,var(--line) 70%,transparent)}
.pr-ex li:first-child{border-top:0}
.pr-exi{flex:0 0 16px; color:var(--teal); display:grid; place-items:center} .pr-exi svg{width:13px; height:13px}
.pr-exn{flex:1; color:var(--ink)} .pr-exs{font-family:var(--mono); font-size:11.5px; color:var(--faint)}
.pr-foot{display:flex; gap:8px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line)}
.pr-btn{flex:1; border-radius:11px; padding:12px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit}
.pr-btn.ghost{border:1px solid var(--line); background:transparent; color:var(--faint); flex:0 0 auto; padding:12px 16px}
.pr-btn.edit{border:1px solid var(--teal); background:transparent; color:var(--teal)}
.pr-btn.apply{border:0; background:var(--teal); color:#fff}
.pr-btn:disabled{opacity:.6; cursor:default}

/* dispute/edit corner button (mirror of the ＋), amber day selection, a discuss bar */
.wk-corner-left{left:0; right:auto}
.wk-corner-left svg{width:22px; height:22px}
.wk-corner-btn.on{color:#fff; background:var(--amber); border-radius:50%}
.cal-cell.disputed{border-color:var(--amber) !important; box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 35%,transparent); position:relative}
.cal-cell.disputed::after{content:'✓'; position:absolute; top:-6px; right:-6px; width:17px; height:17px; border-radius:50%; background:var(--amber); color:#fff; font-size:10px; display:grid; place-items:center}
.dispute-bar{display:flex; align-items:center; gap:10px; margin:8px 0 2px; padding:11px 14px; border:1px solid color-mix(in srgb,var(--amber) 40%,transparent); background:color-mix(in srgb,var(--amber) 8%,transparent); border-radius:12px}
.dispute-bar[hidden]{display:none}
.db-t{flex:1; font-size:13px; color:var(--ink)} .db-t b{color:var(--amber)}
.db-go{border:0; background:var(--teal); color:#fff; font-size:13px; font-weight:600; border-radius:10px; padding:9px 15px; cursor:pointer}
.cal-ex-n{flex:1; min-width:0; font-size:13.5px; color:var(--ink)}   /* fill the middle so the ▶ how-to link doesn't push the title in (space-between) */
.cal-ex-note{font-size:11.5px; color:var(--faint); margin-top:2px; line-height:1.4}
.cal-ex-s{font-family:var(--mono); font-size:12px; color:#5d6a64; white-space:nowrap}
/* cardio session breakdown (intervals / Zone 2) */
.cal-ph{padding:9px 0; border-top:1px solid var(--line)}
.cal-ph:first-child{border-top:0}
.cal-ph-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.cal-ph-n{font-size:13.5px; color:var(--ink)}   /* match the exercise-name weight (not bold) */
.cal-ph-m{font-family:var(--mono); font-size:12px; color:#5d6a64; white-space:nowrap; text-align:right}
.cal-ph-note{font-size:12px; color:var(--faint); margin-top:3px; line-height:1.45}
.cal-ex-yt{display:inline-flex; vertical-align:middle; margin-left:6px; color:var(--teal); text-decoration:none}
.cal-ex-yt svg{display:block; width:16px; height:16px}
.cal-ex-yt:active{opacity:.5}

.wk-page-head{position:relative}
.wk-corner-btn{position:absolute; top:2px; right:0; width:38px; height:38px; border:0; background:transparent; color:var(--teal); font-size:26px; line-height:1; display:grid; place-items:center; cursor:pointer; padding:0}   /* 38px, right:0 → centre lines up with the 38px hamburger */
.wk-vitals{display:flex; gap:22px; margin-top:10px; align-items:baseline; justify-content:center; border-top:1px solid var(--line); padding-top:10px}
.wk-vital{display:flex; align-items:center; gap:6px}
.wk-vital .v{font-family:var(--serif); font-size:16px; line-height:1; color:var(--teal)}   /* sized level with the 15px icons */
.wk-vital .v.t-good{color:#15803d} .wk-vital .v.t-caution{color:#b45309} .wk-vital .v.t-alert{color:#c0392b}
.wk-vital .v .u{font-size:12px; color:var(--faint)}
.wk-vital .l{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:color-mix(in srgb, var(--ink) 60%, transparent); display:inline-flex; align-items:center}
.wk-vital .l.t-good{color:#15803d} .wk-vital .l.t-caution{color:#b45309} .wk-vital .l.t-alert{color:#c0392b}   /* icon tinted by result */
.wk-vital .l svg{width:15px; height:15px}

/* goal-changed banner — dismissible */
.wk-hint[hidden]{display:none}   /* the .wk-hint flex display would otherwise override [hidden] */
.wk-hint{display:flex; align-items:flex-start; gap:8px}
.wk-hint-t{flex:1}
.wk-hint-x{flex:0 0 auto; border:0; background:transparent; color:var(--amber); font-size:20px; line-height:1; cursor:pointer; padding:0 2px}
/* end-of-cycle nudge — a tappable, calm banner (not an alert) */
.wk-cycle{background:color-mix(in srgb, var(--teal) 7%, var(--card)); border:1px solid color-mix(in srgb, var(--teal) 26%, transparent); border-radius:12px; padding:11px 13px; margin:6px 0 2px; cursor:pointer; font-size:13.5px; line-height:1.5; color:var(--ink)}
.wk-cycle b{color:var(--teal); font-weight:600}

/* sync line at the bottom of the home content */
.sync-line-bottom{margin-top:16px}

/* ===== (legacy) Settings → Workout tab styles, reused on the Training page ===== */
.wk-hint{background:var(--bg); border:1px solid var(--amber); border-left-width:3px; border-radius:10px;
  padding:10px 12px; font-size:13px; color:var(--ink); margin:6px 0 12px; line-height:1.5}
.wk-tag{font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--faint); text-transform:none}
.wk-sched{display:flex; flex-direction:column; gap:6px}
.wk-day{display:flex; align-items:center; gap:11px; padding:9px 11px; border:1px solid var(--line);
  border-radius:11px; background:var(--card)}
.wk-day.today{border-color:var(--teal); box-shadow:0 0 0 1px var(--teal) inset}
.wk-day.k-rest, .wk-day.k-active_recovery{opacity:.72}
.wk-dow{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--faint); width:30px; flex:0 0 30px}
.wk-ic{width:30px; height:30px; flex:0 0 30px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg); color:var(--teal)}
.wk-day.k-rest .wk-ic, .wk-day.k-active_recovery .wk-ic{color:var(--faint)}
.wk-body{flex:1; min-width:0}
.wk-name{font-size:14.5px; color:var(--ink); font-weight:600; display:flex; align-items:center; gap:8px}
.wk-pri{font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--teal); color:var(--teal); border-radius:5px; padding:1px 6px}
.wk-pri.must{border-color:var(--amber); color:var(--amber)}
.wk-meta{font-size:12px; color:#5d6a64; margin-top:2px}
.wk-adh{margin-top:2px}
.wk-adh-top{font-size:13px; color:#5d6a64} .wk-adh-top b{color:var(--ink); font-family:var(--serif); font-size:16px}
.wk-dots{display:flex; gap:6px; margin-top:7px}
.wk-dot{width:24px; height:24px; border-radius:6px; display:grid; place-items:center; font-size:12px;
  border:1px solid var(--line); color:var(--faint)}
.wk-dot.hit{background:var(--good); border-color:var(--good); color:#fff}
.wk-rot{display:flex; flex-direction:column; gap:5px}
.wk-rotrow{display:grid; grid-template-columns:48px 1fr 1fr; gap:8px; align-items:center; padding:8px 11px;
  border:1px solid var(--line); border-radius:10px; background:var(--card); font-size:12.5px; color:#5d6a64}
.wk-rotrow.on{border-color:var(--teal); background:var(--bg)}
.wk-rotw{font-family:var(--mono); font-size:11px; color:var(--faint)}
.wk-rotm b{display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:600}
.wk-rotm{color:var(--ink)}
.wk-legs{display:flex; flex-direction:column; gap:6px}
.wk-lift{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:9px 11px;
  border:1px solid var(--line); border-radius:10px; background:var(--card)}
.wk-lift-n{font-size:14px; color:var(--ink)}
.wk-lift-note{font-size:11.5px; color:var(--faint); margin-top:2px; line-height:1.4}
.wk-lift-s{font-family:var(--mono); font-size:12px; color:#5d6a64; white-space:nowrap}
.wk-prefs{display:flex; flex-direction:column; gap:6px}
/* swipe a row left to reveal Edit / Delete (iOS-style). The sliding face covers the
   actions until you drag; one row opens at a time. */
.wk-pref{position:relative; overflow:hidden; border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:9px; background:var(--bg)}
.wk-pref-slide{position:relative; z-index:2; display:flex; align-items:center; min-height:38px; padding:8px 11px;
  background:var(--bg); font-size:13px; color:var(--ink); line-height:1.4; transform:translateX(0); transition:transform .22s ease; touch-action:pan-y}
.wk-pref.open .wk-pref-slide{transform:translateX(-132px)}
.wk-pref-t{flex:1; min-width:0}
.wk-pref-act{position:absolute; top:0; right:0; bottom:0; z-index:1; display:flex}
.wk-pref-btn{border:0; width:66px; display:grid; place-items:center; font-size:12px; font-weight:600; color:#fff; cursor:pointer}
.wk-pref-edit{background:var(--teal)}
.wk-pref-del{background:#d9534f}
.wk-pref-hint{margin:2px 2px 0; font-size:11px; color:var(--faint)}

/* check-in button in the header */
.checkin-btn{
  width:38px; height:38px; flex:0 0 38px; border:1px solid var(--teal); background:var(--card); color:var(--teal);
  font-size:24px; font-weight:400; line-height:1; border-radius:10px; cursor:pointer; display:grid; place-items:center;
}

/* timeframe — single button: tap to cycle, hold + drag to scrub */
/* (timeframe button retired — the scrubber now lives on the Dashboard nav button) */

/* check-in sheet grabber (drag down to close) */
.ci-grab{width:38px; height:4px; border-radius:3px; background:var(--line); margin:0 auto 10px}

/* ============ daily check-in sheet ============ */
.ci-scrim{position:fixed; inset:0; background:rgba(10,14,12,.42); z-index:44}
.ci-scrim[hidden]{display:none}
.ci-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:45; max-width:520px; margin:0 auto;
  background:var(--card); border:1px solid var(--line); border-bottom:0; border-radius:18px 18px 0 0;
  box-shadow:0 -8px 30px rgba(20,30,25,.18); padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  max-height:88vh; overflow-y:auto; transform:translateY(105%); transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.ci-sheet.open{transform:translateY(0)}
.ci-head{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:6px}
.ci-head h2{font-family:var(--serif); font-size:22px; font-weight:400; margin:0}
.ci-date{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-top:3px}
.ci-close{border:0; background:transparent; font-size:26px; line-height:1; color:var(--faint); cursor:pointer}
.ci-scale{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line)}
.ci-lab{font-size:14.5px; color:var(--ink)}
.ci-dots{display:flex; gap:6px}
.ci-dot{width:38px; height:38px; border:1px solid var(--line); background:var(--bg); color:var(--faint); border-radius:10px; font-size:14px; font-weight:600; cursor:pointer}
.ci-dot.on{background:var(--teal); color:#fff; border-color:var(--teal)}
.ci-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--line)}
.ci-sleep-times{display:flex; align-items:center; gap:7px}
.ci-time{border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--ink); font:inherit; font-size:14px; padding:5px 8px}
.ci-sleep-arrow{color:var(--faint)}
.ci-sleep-dur{font-family:var(--mono); font-size:12px; color:var(--teal); min-width:54px; text-align:right}
.ci-step{display:flex; align-items:center; gap:10px}
.ci-step button{width:34px; height:34px; border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:9px; font-size:18px; line-height:1; cursor:pointer}
.ci-step #alcVal{min-width:18px; text-align:center; font-family:var(--serif); font-size:18px}
.ci-unit{font-size:12px; color:var(--faint)}
.app-toast{position:fixed; left:50%; bottom:84px; transform:translateX(-50%) translateY(12px); z-index:80;
  background:var(--ink); color:var(--bg); font-size:13px; line-height:1.4; padding:11px 16px; border-radius:12px;
  max-width:86%; text-align:center; box-shadow:0 8px 26px rgba(0,0,0,.24); opacity:0; transition:opacity .25s, transform .25s; pointer-events:none}
.app-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.ci-note{width:100%; margin-top:14px; border:1px solid var(--line); border-radius:11px; background:var(--bg); color:var(--ink); font:inherit; font-size:13.5px; line-height:1.5; padding:10px; resize:vertical; min-height:104px}
.ci-save{margin-top:14px; width:100%; border:0; border-radius:12px; background:var(--teal); color:#fff; font-size:15px; font-weight:600; padding:14px; cursor:pointer}
.ci-save:disabled{opacity:.6; cursor:default}

/* ============ narrative arc (editorial serif, accent rail) ============ */
.narrative{
  border:1.5px solid transparent;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--teal) 11%, var(--card)), var(--card)) padding-box,
    linear-gradient(135deg, #b8911f, #f0d472) border-box;
  border-radius:20px; padding:14px 38px 14px 16px; margin:0 0 16px;
  position:relative; box-shadow:0 6px 22px color-mix(in srgb, var(--teal) 12%, transparent);
}
html[data-theme="dark"] .narrative{
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--teal) 13%, var(--card)), var(--card)) padding-box,
    linear-gradient(135deg, #6b5512, #e5c18c) border-box;
  box-shadow:0 4px 26px color-mix(in srgb, var(--teal) 18%, transparent);
}
/* concierge chat button — chromeless (no border/background) in every narrative, incl. Stories */
.narrative-chat, .narr-head .narrative-chat, .narr-head .ctx-chat, .ctx-chat{
  background:transparent; border:0; box-shadow:none;
}
.narrative-chat:hover, .ctx-chat:hover{background:transparent}
/* header'd narratives (dashboard, fuel) carry the chat button in a title row, so the text
   reclaims the full width — no reserved right gutter */
.narrative:has(.narr-head){padding:10px 14px 12px}
.narr-head{display:flex; align-items:center; gap:10px; margin-bottom:7px}
.narr-head .narrative-lab{
  flex:1; min-width:0; margin-bottom:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.narr-when{color:var(--faint)}
/* "updating" state — a soft shimmer over the text while a fresher narrative is being fetched/regenerated */
.narrative.narr-updating{position:relative; overflow:hidden}
.narrative.narr-updating p{opacity:.45}
.narrative.narr-updating::after{content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 20%, color-mix(in srgb,var(--teal) 16%,transparent) 50%, transparent 80%); background-size:220% 100%; animation:narrShimmer 1.25s ease-in-out infinite; pointer-events:none}
@keyframes narrShimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}
/* tiny chat button on every narrative — opens the concierge pinned to this note */
.narrative-chat{
  position:absolute; top:8px; right:8px; width:26px; height:26px; padding:0;
  border:0; border-radius:8px; cursor:pointer; display:grid; place-items:center;
  background:color-mix(in srgb, var(--teal) 12%, transparent); color:var(--teal);
}
.narrative-chat svg{width:15px; height:15px}
.narrative-chat:hover{background:color-mix(in srgb, var(--teal) 22%, transparent)}
/* inside a title row the button sits inline at top-right and shrinks so the title, time
   and narrative text all fit the block width */
.narr-head .narrative-chat,
.narr-head .ctx-chat{
  position:static; top:auto; right:auto; flex:0 0 auto;
  width:22px; height:22px; margin:-1px -2px 0 0; border-radius:7px;
}
.narr-head .narrative-chat svg,
.narr-head .ctx-chat svg{width:13px; height:13px}
.narrative-lab{
  font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--teal); display:block; margin-bottom:4px;
}
.narrative p{
  margin:0; font-family:var(--sans); font-style:italic; font-size:14.5px; line-height:1.6; color:var(--ink);
}

/* ============ loading skeletons (per-block SVG, shimmer) ============ */
.kpi.sk{align-items:center; justify-content:center; gap:10px; text-align:center}
.sk-svg{color:var(--line); opacity:.9}
.sk-line{height:9px; border-radius:6px; background:var(--line); width:62%}
.sk-line.short{width:40%}
.shim{position:relative; overflow:hidden}
.shim::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform:translateX(-100%); animation:shimmer 1.3s infinite;
}
html[data-theme="dark"] .shim::after{background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent)}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ============ settings drawer ============ */
.settings-scrim{position:fixed; inset:0; background:rgba(10,14,12,.42); z-index:42}
.settings-scrim[hidden]{display:none}
.settings-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:43; width:min(360px,88vw);
  background:var(--card); border-left:1px solid var(--line);
  padding:calc(env(safe-area-inset-top) + 16px) 18px calc(18px + env(safe-area-inset-bottom));
  overflow-y:auto; transform:translateX(102%); transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.settings-panel.open{transform:translateX(0)}
.settings-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.settings-head h2{font-family:var(--serif); font-size:23px; font-weight:400; margin:0}
.settings-close{border:0; background:transparent; font-size:26px; line-height:1; color:var(--faint); cursor:pointer}
/* section divider — one uniform rhythm across Training, Fuel, Check-ins (and Settings) */
.settings-grp{font-family:var(--serif); font-size:16px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink); margin:34px 0 12px; padding-top:24px; border-top:1px solid color-mix(in srgb, var(--ink) 8%, transparent)}
.settings-grp:first-child{padding-top:0; border-top:0}   /* no rule above the first section in a container */
.settings-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); cursor:pointer}
.settings-t{flex:1; font-size:14.5px; color:var(--ink)}
/* "Concierge remembers" manager (search / edit / delete) */
.mem-row{margin-top:12px; width:100%}
.mem-modal{position:fixed; inset:0; z-index:70; display:flex; align-items:flex-end; justify-content:center}
.mem-scrim{position:absolute; inset:0; background:rgba(10,14,12,.45)}
.mem-sheet{position:relative; width:100%; max-width:560px; max-height:82vh; display:flex; flex-direction:column;
  background:var(--card); border-radius:18px 18px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(0,0,0,.2)}
@media (min-width:680px){ .mem-modal{align-items:center} .mem-sheet{border-radius:18px} }
.mem-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.mem-head h2{margin:0; font-family:var(--serif); font-size:19px; color:var(--ink)}
.mem-search{margin-bottom:12px}
.mem-list{overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; gap:10px}
.mem-item{border:1px solid var(--line); border-radius:12px; padding:11px 13px; background:var(--card)}
.mem-text{font-size:14px; line-height:1.5; color:var(--ink)}
.mem-meta{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint)}
.mem-acts{display:flex; gap:6px; flex:0 0 auto}
.mem-edit,.mem-del,.mem-lockt{border:1px solid var(--line); background:transparent; border-radius:7px; padding:4px 10px; font-family:var(--sans); font-size:11px; font-weight:600; cursor:pointer}
.mem-edit{color:var(--teal)} .mem-del{color:var(--amber)} .mem-lockt{color:var(--faint)}
.mem-lock{font-size:11px}
.mem-sec-cap{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:6px 2px 2px}
/* suggest-and-confirm card (the concierge proposing a Golden Book entry) */
.gb-suggest{margin:4px 0 10px}
.gb-sug-card{margin:0}
.gb-sug-acts{display:flex; gap:8px; margin-top:10px}
.gb-sug-acts button{flex:1; border:1px solid var(--line); border-radius:9px; padding:8px 0; font-family:var(--sans); font-size:13px; font-weight:600; cursor:pointer; background:var(--card)}
.gb-sug-y{color:#fff !important; background:var(--teal) !important; border-color:var(--teal) !important}
.gb-sug-m{color:var(--ink)}
.gb-sug-n{color:var(--faint)}
.gb-sug-acts button:disabled{opacity:.5}
/* Golden Book privacy: curtain (hidden/locked) + the off/hidden/lock control */
.gb-curtain{display:flex; align-items:center; gap:9px; padding:12px 14px; border:1px dashed var(--line); border-radius:12px; color:var(--faint); font-size:13px}
.gb-curtain .mem-lock,.gb-curtain .gb-eye{font-size:15px}
.gb-blur{filter:blur(4px); user-select:none}
.gb-reveal,.gb-unlock{margin-left:auto; border:1px solid var(--line); background:var(--card); color:var(--teal); border-radius:8px; padding:5px 12px; font-size:12px; font-weight:600; cursor:pointer}
.mem-priv{display:flex; align-items:center; gap:6px; margin:0 0 10px; flex-wrap:wrap}
.mem-priv-lab{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-right:2px}
.mem-priv-b{border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:7px; padding:4px 11px; font-size:12px; font-weight:600; cursor:pointer}
.mem-priv-b.on{background:var(--teal); color:#fff; border-color:var(--teal)}
/* admin: affinity profile inside the manager */
.mem-prof{margin-top:14px; border-top:1px solid var(--line); padding-top:10px}
.mem-prof summary{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); cursor:pointer}
.mem-prof-row{display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid var(--line)}
.mem-prof-c{flex:0 0 auto; font-family:var(--mono); font-size:12px; font-weight:700; color:var(--teal); min-width:38px}
.mem-prof-t{flex:1; font-size:13px}
.mem-prof-m{flex:0 0 auto; font-family:var(--mono); font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.04em}
.mem-sec-cap:first-child{margin-top:0}
/* Golden Book accents */
.gb-ic{vertical-align:-0.18em}
.gb-badge{background:linear-gradient(145deg,#2c2618,#171309) !important}
.wkc-badge.gb-badge-lg{background:linear-gradient(145deg,#2c2618,#171309)}
.gb-intro .wkc-sub em{color:#b88a1e; font-style:italic; font-size:15px}
.chat-goldbook:active{opacity:.6; transform:scale(.94)}
.wk-gb-head{display:flex; align-items:center; justify-content:center; position:relative}
.wk-gb-head .wk-gb-add{position:absolute; right:0; top:50%; transform:translateY(-50%)}
.wk-gb-add, .mem-add{flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line); background:var(--card); color:var(--teal); border-radius:9px; font-size:19px; line-height:1; cursor:pointer; padding:0}
.wk-gb-add:active, .mem-add:active{opacity:.6}
.mem-head-r{display:flex; align-items:center; gap:8px}
/* aggregate Golden Book glance (counts, not the entries verbatim) */
.wk-gb-agg{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:16px; text-align:center}
.wk-gb-count{font-family:var(--serif); font-size:34px; line-height:1; color:#c9a227}
.wk-gb-cap{font-size:13px; color:var(--ink); margin-top:5px}
.wk-gb-note{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); margin-top:7px}
.wk-gb-sum .narrative{margin-top:10px}
/* news: published date under the title; "For you"; the Save-a-link button in Saved */
.news-date{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--faint); margin-top:3px}
.news-foryou{font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:#c9a227; border-radius:5px; padding:2px 6px; margin-right:7px}
.news-add{display:flex; align-items:center; gap:8px; width:100%; border:1px dashed var(--line); border-radius:14px; background:transparent; color:var(--teal); font-family:var(--sans); font-size:13px; font-weight:600; padding:13px; cursor:pointer; margin-bottom:2px}
.news-add-plus{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--teal); color:#fff; font-size:16px; line-height:1}
.wk-gb-sum{display:flex; flex-direction:column; gap:7px}
.wk-gb-line{position:relative; padding-left:15px; font-size:13.5px; line-height:1.5; color:var(--ink)}
.wk-gb-line::before{content:''; position:absolute; left:3px; top:8px; width:5px; height:5px; border-radius:50%; background:#c9a227}
.wk-gb-more{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--faint); margin-top:2px}
.wk-gb-link{display:block; width:100%; margin-top:12px; border:1px dashed var(--line); border-radius:11px; background:transparent; color:var(--teal); font-family:var(--sans); font-size:13px; font-weight:600; padding:11px; cursor:pointer}
.wk-gb-link:active{opacity:.6}
/* section headings the user wants matched to the calendar's "June 2026" label */
.grp-cal{font-family:var(--serif); font-size:18px; font-weight:400; color:var(--ink); text-transform:none; letter-spacing:0; text-align:center}
/* ===== full-screen "Open …" list page (UI.sheet): slide-up, drag-down to close ===== */
.ui-sheet{position:fixed; inset:0; z-index:80; opacity:0; pointer-events:none; transition:opacity .2s}
.ui-sheet.open{opacity:1; pointer-events:auto}
.ui-sheet-panel{position:absolute; inset:0; display:flex; flex-direction:column; background:var(--bg);
  transform:translateY(100%); transition:transform .26s cubic-bezier(.2,.8,.2,1);
  padding:calc(env(safe-area-inset-top) + 6px) 16px calc(12px + env(safe-area-inset-bottom))}
.ui-sheet.open .ui-sheet-panel{transform:translateY(0)}
.ui-sheet-grab{width:40px; height:5px; border-radius:3px; background:var(--line); margin:2px auto 9px; flex:0 0 auto}
.ui-sheet-head{display:flex; align-items:center; gap:8px; flex:0 0 auto; margin-bottom:11px}
.ui-sheet-x{flex:0 0 auto; border:0; background:transparent; color:var(--teal); padding:4px; cursor:pointer; display:grid; place-items:center}
.ui-sheet-title{flex:1; margin:0; font-family:var(--serif); font-size:22px; font-weight:400; color:var(--ink); text-align:center}
.ui-sheet-head-r{flex:0 0 auto; display:flex; align-items:center; gap:8px; min-width:30px; justify-content:flex-end}
.ui-sheet-add{width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line); background:var(--card); color:var(--teal); border-radius:9px; font-size:19px; line-height:1; cursor:pointer; padding:0}
.ui-sheet-navrow{display:flex; align-items:center; justify-content:center; gap:16px; flex:0 0 auto; margin-bottom:9px}
.ui-sheet-nav{width:34px; height:34px; border:1px solid var(--line); background:var(--card); color:var(--teal); border-radius:50%; font-size:18px; line-height:1; cursor:pointer}
.ui-sheet-nav:disabled{opacity:.4; cursor:default}
.ui-sheet-navlab{font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--faint); min-width:120px; text-align:center}
.ui-sheet-search{width:100%; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink); font-size:14px; font-family:var(--sans); padding:11px 13px; margin-bottom:10px; flex:0 0 auto}
.ui-sheet-tools{display:flex; flex-wrap:wrap; gap:7px; flex:0 0 auto; margin-bottom:11px}
.ui-sheet-body{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch}
/* the dotted "Open …" control that opens a section in a modal (shared by check-ins, scans, meals) */
.open-link{display:block; width:100%; margin-top:10px; border:1px dashed var(--line); border-radius:11px; background:transparent;
  color:var(--teal); font-family:var(--sans); font-size:13px; font-weight:600; padding:11px; cursor:pointer; text-align:center}
.open-link:active{opacity:.6}
/* floating re-lock button shown while the Golden Book is unlocked */
#gbRelock{position:fixed; right:16px; bottom:calc(78px + env(safe-area-inset-bottom)); z-index:60;
  width:46px; height:46px; display:grid; place-items:center; border:0; border-radius:50%;
  background:var(--teal); color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.22); cursor:pointer}
#gbRelock:active{opacity:.8}

/* collapsible settings sections (mono subtitles + chevron) */
.set-sec{border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent)}
.set-sec > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); padding:16px 2px; margin:0}
.set-sec > summary::-webkit-details-marker{display:none}
.set-sec > summary::after{content:''; margin-left:auto; width:7px; height:7px; border-right:2px solid var(--faint); border-bottom:2px solid var(--faint); transform:rotate(-45deg); transition:transform .2s}
.set-sec[open] > summary::after{transform:rotate(45deg)}
.set-sec-body{padding:0 2px 16px}
.set-sec-body .settings-row:last-child{border-bottom:0}
.set-footer{margin-top:22px; padding-top:16px; border-top:1px solid color-mix(in srgb, var(--ink) 8%, transparent); display:flex; flex-direction:column; gap:8px; align-items:center}
.set-stat{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--faint); background:transparent; border:0; text-align:center; padding:2px; cursor:pointer}
.set-stat.warn{color:var(--amber)}
/* CSS switch */
.switch-in{position:absolute; opacity:0; pointer-events:none}
.switch{width:46px; height:27px; flex:0 0 46px; border-radius:99px; background:var(--line); position:relative; transition:background .2s}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch-in:checked + .switch{background:var(--teal)}
.switch-in:checked + .switch::after{transform:translateX(19px)}
/* persona list */
.persona-list{display:flex; flex-direction:column; gap:7px}
.prow{display:flex; align-items:center; gap:11px; padding:10px; border:1px solid var(--line); border-radius:11px; background:transparent; cursor:pointer; text-align:left; color:var(--ink)}
.prow .pbadge{width:30px; height:30px; flex:0 0 30px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:14px}
.prow .pmeta{display:flex; flex-direction:column; line-height:1.2}
.prow .pmeta b{font-size:14px}
.prow .pmeta i{font-style:normal; font-size:11px; color:var(--faint)}
.prow .pcheck{margin-left:auto; color:var(--teal); font-weight:700; opacity:0}
.prow.active{border-color:var(--teal); background:color-mix(in srgb, var(--teal) 8%, transparent)}
.prow.active .pcheck{opacity:1}
.b-atlas{background:#0d7a70} .b-sage{background:#4a7c59} .b-vita{background:#c0674a} .b-lumen{background:#2f6f9f}
/* goal box */
.goal-box textarea{width:100%; border:1px solid var(--line); border-radius:11px; background:var(--bg); color:var(--ink); font:inherit; font-size:13.5px; line-height:1.5; padding:10px; resize:vertical; min-height:100px}
.goal-save{margin-top:9px; width:100%; border:0; border-radius:11px; background:var(--teal); color:#fff; font-size:14px; font-weight:600; padding:12px; cursor:pointer}
.goal-save:disabled{opacity:.55; cursor:default}
.ring-btn{display:inline-flex; align-items:center; justify-content:center; gap:9px}
.ring-btn svg{flex:0 0 auto; transform-origin:top center}
.ring-btn.ringing svg{animation:bell-ring .8s ease-in-out}  /* keyframe defined in chat.css */
.goal-note{font-size:11.5px; color:var(--faint); line-height:1.5; margin:9px 0 0}
.settings-danger{width:100%; border:1px solid var(--line); border-radius:11px; background:transparent; color:var(--amber); font-size:14px; padding:12px; cursor:pointer}
.set-btn{width:100%; border:1px solid var(--line); border-radius:11px; background:transparent; color:var(--teal); font-size:14px; padding:12px; cursor:pointer; margin-top:8px}
.set-btn:disabled{opacity:.55; cursor:default}
.auth-only{display:none}
html.auth-on .auth-only{display:block}
#authSignOut{color:var(--amber); cursor:pointer; border:0; background:none}

/* ===== Login screen (Supabase auth) ===== */
.auth-screen{position:fixed; inset:0; z-index:4000; background:var(--bg); display:grid; place-items:center; padding:24px}
.auth-screen.gone{display:none}
.auth-card{width:100%; max-width:340px; text-align:center}
.auth-badge{width:54px; height:54px; margin:0 auto 14px; border-radius:50%; background:var(--teal); color:#fff; display:grid; place-items:center; font-size:24px}
.auth-logo{display:block; width:66px; height:66px; margin:0 auto 14px; object-fit:contain}
.auth-title{font-family:var(--serif); font-weight:400; font-size:30px; margin:0 0 6px; color:var(--ink)}
.auth-sub{color:var(--faint); font-size:14px; line-height:1.5; margin:0 0 20px}
.auth-in{width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink); font-size:16px; padding:13px 14px; margin-bottom:10px; text-align:center}
.auth-in:focus{outline:none; border-color:var(--teal)}
.auth-code{letter-spacing:6px; font-family:var(--mono); font-size:20px}
.auth-btn{width:100%; border:0; border-radius:11px; background:var(--teal); color:#fff; font-size:15px; font-weight:600; padding:14px; cursor:pointer}
.auth-btn:disabled{opacity:.6; cursor:default}
.auth-msg{min-height:18px; font-size:13px; color:var(--faint); margin:10px 0 0}
.auth-msg.bad{color:var(--amber)}
.auth-link{margin-top:14px; border:0; background:none; color:var(--teal); font-size:13px; cursor:pointer}
.gone{display:none !important}

/* ===== Check-ins page: chart controls + block / line / bars ===== */
.ci-controls{display:flex; gap:8px; margin:8px 0 10px; flex-wrap:wrap; justify-content:space-between}
.seg{display:flex; background:#efece4; border:1px solid var(--line); border-radius:10px; padding:3px}
html[data-theme="dark"] .seg{background:#222a2e}
.seg-b{border:0; background:transparent; color:#5d6a64; font-family:var(--sans); font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:8px; cursor:pointer}
.seg-b.active{background:var(--card); color:var(--teal); box-shadow:0 1px 3px rgba(0,0,0,.08)}
.ci-metricrow{display:flex; gap:5px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:10px}
.ci-metricrow::-webkit-scrollbar{display:none}
.ci-metricrow[hidden]{display:none}
.met-chip{flex:0 0 auto; border:1px solid var(--line); background:var(--bg); color:#5d6a64; font-size:11px; padding:4px 9px; border-radius:999px; cursor:pointer; white-space:nowrap}
.met-chip.on{background:var(--teal); color:#fff; border-color:var(--teal)}
.ci-chart2{overflow-x:hidden}   /* lock to the visible width — 30d uses the SAME window as 7d, never scrolls/expands */
/* both 7d and 30d fit the SAME on-screen window; 30d just packs 30 thinner cells with tighter gaps */
.ci-chart2.r-7 .cc-cell{border-radius:5px}
.ci-chart2.r-30 .cc-cell{border-radius:3px}
.ci-chart2.r-30 .cc-cells{gap:2px}
.ci-chart2 .cc-row{display:flex; grid-template-columns:none; align-items:center; gap:4px; margin-bottom:4px}
/* the metric-name column stays pinned to the left while the 30d strip scrolls (sticky + opaque
   bg + a divider so it reads as fixed and the cells never slide under it invisibly) */
.ci-chart2 .cc-lab{position:sticky; left:0; z-index:4; width:70px; flex:0 0 70px; display:flex; align-items:center; gap:4px; font-size:11.5px; color:#5d6a64; background:var(--bg); padding-right:8px; box-shadow:6px 0 6px -4px color-mix(in srgb, var(--bg) 80%, transparent)}
.cc-name{flex:1}
.cc-axis{margin-top:3px}
.cc-x{text-align:center; font-family:var(--mono); font-size:9px; color:var(--faint); white-space:nowrap}
.cc-cells{display:flex; gap:4px}
.ci-chart2 .cc-h{text-align:center; font-family:var(--mono); font-size:10px; color:var(--faint)}
.ci-chart2 .cc-cell{height:26px; border:0; border-radius:5px; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:600; cursor:pointer}
.ci-svg{display:block}
/* fuel chart y-axis: a tiny kcal scale in the left gutter */
.nut-chart-plot{position:relative}
.nut-ytick{position:absolute; left:0; transform:translateY(-50%); width:28px; text-align:right;
  font-family:var(--mono); font-size:8.5px; color:var(--faint); pointer-events:none}
.nut-yunit{position:absolute; left:0; top:-2px; font-family:var(--mono); font-size:8px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--faint); pointer-events:none}
.ci-legend{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; font-size:11px; color:#5d6a64}
.ci-legend i{display:inline-block; width:10px; height:3px; border-radius:2px; margin-right:5px; vertical-align:middle}
.bars{display:flex; align-items:flex-end; gap:4px; height:150px; padding-top:6px}
.bar-col{flex:1; min-width:8px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; height:100%}
.bar-track{flex:1; width:62%; min-width:7px; background:var(--bg); border-radius:6px; display:flex; align-items:flex-end; overflow:hidden}
.bar-fill{width:100%; border-radius:6px; transition:height .2s}
.bar-x{font-family:var(--mono); font-size:9px; color:var(--faint)}

/* ===== Nutrition page ===== */
.nut-hero{border:1px solid var(--line); border-radius:16px; background:var(--card); padding:16px 18px; margin:6px 0 14px}
.nut-hero-k{font-family:var(--serif); font-size:38px; line-height:1; color:var(--teal)}
.nut-hero-k span{font-size:16px; color:var(--faint)}
.nut-hero-s{font-size:12.5px; color:#5d6a64; margin-top:8px}
.nut-input{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:12px; margin-bottom:14px}
.nut-desc{width:100%; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font:inherit; font-size:14px; padding:9px 10px; min-height:54px; resize:vertical; box-sizing:border-box}
.nut-actions{display:flex; gap:10px; margin-top:10px}
.nut-photo{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--teal); font-size:13px; font-weight:600; padding:9px 14px; cursor:pointer}
.nut-analyze{flex:1; border:0; border-radius:10px; background:var(--teal); color:#fff; font-size:14px; font-weight:600; cursor:pointer}
.nut-analyze:disabled{opacity:.6}
.nut-status{font-size:12px; color:#5d6a64; margin-top:8px; display:flex; align-items:center; gap:8px}
.nut-thumb{width:34px; height:34px; border-radius:7px; object-fit:cover}
.nut-est{border:1px solid var(--teal); border-radius:14px; background:color-mix(in srgb, var(--teal) 6%, var(--card)); padding:14px 15px; margin-bottom:14px}
.nut-est[hidden]{display:none}
.nut-est-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.nut-est-name{font-family:var(--serif); font-size:17px; color:var(--ink); flex:1; min-width:0}
.nut-edit-btn{flex:0 0 auto; border:1px solid var(--line); background:var(--card); color:var(--teal); border-radius:9px; font-size:12px; padding:5px 9px; cursor:pointer; white-space:nowrap}
.nut-edit{margin:10px 0 2px}
.nut-edit-row{display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.04em}
.nut-edit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px}
.nut-edit-cap{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); margin:12px 0 6px; display:flex; justify-content:space-between; align-items:baseline}
.nut-edit-hint{text-transform:none; letter-spacing:0; opacity:.8}
.nut-eitem{display:flex; gap:7px; align-items:center; margin-bottom:6px}
.nut-eitem .nut-ei-name{flex:1; margin:0; padding:8px 9px; font-size:13px}
.nut-eitem .nut-ei-kcal{width:64px; margin:0; padding:8px 6px; font-size:13px; text-align:center}
.nut-ei-del{flex:0 0 auto; border:0; background:none; color:var(--faint); font-size:15px; cursor:pointer; padding:2px 4px}
.nut-ei-add{border:1px dashed var(--line); background:none; color:var(--teal); border-radius:9px; font-size:12.5px; padding:7px 10px; cursor:pointer; margin-top:2px}
.nut-edit-grid label{display:flex; flex-direction:column; gap:3px; font-size:10.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.03em}
.nut-edit .ui-in{margin:0; padding:9px 8px; font-size:14px; text-align:center}
.nut-edit-row .ui-in{text-align:left}
.nut-edit-done{margin-top:12px; width:100%; border:0; border-radius:10px; background:var(--teal); color:#fff; font-size:13px; font-weight:600; padding:10px; cursor:pointer}
.nut-tgt-btn{display:block; margin:2px 0 10px; border:0; background:none; color:var(--teal); font-size:12.5px; cursor:pointer; padding:4px 0; text-align:left}
/* calorie-target edit pencil — sits at the top-right of the calorie block */
.nut-day{position:relative}
.nut-tgt-edit{position:absolute; top:6px; right:8px; z-index:2; width:30px; height:30px; display:grid; place-items:center;
  border:0; background:transparent; color:var(--teal); cursor:pointer; padding:0}
.nut-tgt-edit:active{opacity:.6}
.nut-rev{position:relative; padding-right:40px}
/* context chat — the tiny "talk about this" button on narrative blocks (and news cards): one size */
.ctx-chat{position:absolute; top:9px; right:9px; width:26px; height:26px; display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer;
  background:color-mix(in srgb, var(--teal) 12%, transparent); color:var(--teal)}
.ctx-chat svg{width:14px; height:14px}
.nut-manual{font-family:inherit}
.nut-reorder-btn{position:absolute; left:0; top:4px; border:0; background:transparent; opacity:.55}   /* quiet, like the dashboard's */
.nut-reorder-btn:active{opacity:.9}
.nut-det-time{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--faint); margin-bottom:8px}
.nut-det-time input{border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); font-size:12.5px; padding:4px 7px}
/* Fuel section reorder (mirrors the dashboard's ▲▼ mode) */
.sec-mv{display:none}
.nut-reorder .sec-mv{display:flex; gap:6px; justify-content:flex-end; margin:0 0 8px}
.nut-reorder .sec-mv button{width:34px; height:26px; border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--teal); font-size:12px; line-height:1; cursor:pointer}
.nut-reorder .nut-sec{outline:1.5px dashed color-mix(in srgb, var(--teal) 45%, transparent); outline-offset:3px; border-radius:8px; margin-bottom:18px}
.tgt-reset{color:#d9534f; font-size:12px; line-height:1.45; margin:-4px 0 12px}
.tgt-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:6px 0 14px}
.tgt-grid label{display:flex; flex-direction:column; gap:3px; font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.03em}
.tgt-grid .ui-in{margin:0; padding:9px 6px; font-size:14px; text-align:center}
.nut-conf{font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:6px; border:1px solid var(--line); color:var(--faint); white-space:nowrap}
.nut-conf.c-high{color:#15803d; border-color:#15803d} .nut-conf.c-low{color:#b45309; border-color:#b45309}
.nut-est-kcal{font-family:var(--serif); font-size:30px; color:var(--teal); margin-top:8px}
.nut-est-kcal span{font-size:14px; color:var(--faint)}
.nut-est-macros{display:flex; gap:16px; margin-top:6px; font-size:13px; color:#5d6a64}
.nut-est-macros b{color:var(--ink)}
.nut-items{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.nut-items span{font-size:11.5px; color:#5d6a64; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:4px 9px}
.nut-est-note{font-size:12px; color:#5d6a64; font-style:italic; margin-top:9px}
.nut-est-date{display:flex; align-items:center; gap:9px; font-size:13px; color:#5d6a64; margin-top:12px}
.nut-est-date input{border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--ink); font:inherit; font-size:14px; padding:5px 9px}
.nut-est-actions{display:flex; gap:10px; margin-top:13px}
.nut-discard{flex:0 0 auto; border:1px solid var(--line); border-radius:10px; background:var(--card); color:#5d6a64; font-size:13px; font-weight:600; padding:10px 14px; cursor:pointer}
.nut-log-btn{flex:1; border:0; border-radius:10px; background:var(--teal); color:#fff; font-size:14px; font-weight:600; cursor:pointer}
.nut-macros{display:flex; flex-direction:column; gap:11px; margin:4px 0 14px}
.nm-top{display:flex; justify-content:space-between; font-size:13px; color:#5d6a64}
.nm-top b{color:var(--ink); font-family:var(--serif); font-size:15px}
.nm-bar{height:7px; background:var(--bg); border:1px solid var(--line); border-radius:5px; margin-top:4px; overflow:hidden}
.nm-bar i{display:block; height:100%; background:var(--teal); transition:width .7s cubic-bezier(.2,.8,.2,1)}
.nm-sub{font-size:11px; color:var(--faint); margin-top:3px}
.nut-log{display:flex; flex-direction:column; gap:8px}
.nut-row{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:11px; background:var(--card); padding:10px 12px}
.nut-row-n{flex:1; font-size:14px; color:var(--ink)}
.nut-row-m{font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:3px}
.nut-del{flex:0 0 auto; width:30px; height:30px; border:0; background:transparent; color:var(--faint); font-size:15px; cursor:pointer}

/* nutrition day-nav + expandable log rows */
.nut-daynav{display:flex; align-items:center; justify-content:space-between; margin:28px 0 10px}   /* separate today's fuel status from the estimator above */
.nut-date{font-family:var(--serif); font-size:16px; color:var(--ink)}
.cal-nav:disabled{opacity:.4; cursor:default}
.nut-day{touch-action:pan-y}
.nut-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.nut-row-main{flex:1; display:flex; align-items:center; gap:10px; border:0; background:transparent; text-align:left; cursor:pointer; padding:0; color:inherit}
.nut-chev{color:var(--faint); transition:transform .2s; font-size:14px}
.nut-row.open .nut-chev{transform:rotate(180deg)}
.nut-row-det{flex-basis:100%; border-top:1px solid var(--line); margin-top:9px; padding-top:9px}
.nut-row-det[hidden]{display:none}
.nut-det-meta{font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-bottom:8px}
.nut-det-macros{display:flex; flex-wrap:wrap; gap:14px; font-size:12.5px; color:#5d6a64}
.nut-det-macros b{color:var(--ink)}
.nut-det-note{font-size:12.5px; color:#5d6a64; font-style:italic; margin-top:8px}

/* nutrition Today button */
.nut-daynav-r{display:flex; align-items:center; gap:10px}
.nut-today{border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--teal); font-size:13px; font-weight:600; padding:7px 13px; cursor:pointer}
.nut-today:disabled{opacity:.4; cursor:default}

/* settings: data-sources disclaimer — the summary reads as a button (matches .set-btn) */
.set-disclaimer{margin-top:8px}
.set-disclaimer > summary{list-style:none; cursor:pointer; width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:11px; background:transparent; color:var(--teal); font-family:inherit; font-size:14px; font-weight:400; padding:12px; text-align:center}
.set-disclaimer > summary::-webkit-details-marker{display:none}
.set-disclaimer[open] > summary{margin-bottom:8px}
.set-disc-body{padding:0 4px; font-size:12.5px; line-height:1.55; color:#5d6a64}
.set-disc-body p{margin:0 0 9px} .set-disc-body p:last-child{margin:0} .set-disc-body b{color:var(--ink)}

/* settings: current butler + chooser popup */
.butler-current{display:flex; align-items:center; gap:12px; width:100%; padding:12px; border:1px solid var(--line); border-radius:13px; background:var(--card); cursor:pointer; text-align:left; color:var(--ink)}
.bc-badge{width:38px; height:38px; flex:0 0 38px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:17px; background:var(--teal)}
.bc-badge.b-atlas{background:#0d7a70} .bc-badge.b-sage{background:#4a7c59} .bc-badge.b-vita{background:#c0674a} .bc-badge.b-lumen{background:#2f6f9f}
.bc-meta{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.bc-meta b{font-size:15px} .bc-meta i{font-style:normal; font-size:12px; color:var(--faint)}
.bc-choose{margin-left:auto; flex:0 0 auto; font-size:13px; font-weight:600; color:var(--teal)}

.butler-modal{position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center}
.butler-modal[hidden]{display:none}
.butler-scrim{position:absolute; inset:0; background:rgba(20,30,25,.45)}
.butler-sheet{position:relative; width:100%; max-width:520px; max-height:88vh; overflow-y:auto; background:var(--bg);
  border:1px solid var(--line); border-bottom:0; border-radius:18px 18px 0 0; box-shadow:0 -8px 30px rgba(20,30,25,.18);
  padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
@media (min-width:680px){ .butler-modal{align-items:center} .butler-sheet{border-radius:18px; border-bottom:1px solid var(--line); max-height:84vh} }
.butler-sheet-head{display:flex; align-items:center; justify-content:space-between}
.butler-sheet-head h2{font-family:var(--serif); font-size:21px; margin:0; color:var(--ink)}
.butler-sheet-sub{font-size:12.5px; color:var(--faint); margin:4px 0 14px; line-height:1.5}
.butler-cards{display:flex; flex-direction:column; gap:10px}
.butler-card{display:block; width:100%; text-align:left; border:1px solid var(--line); border-radius:14px; background:var(--card); padding:13px 14px; cursor:pointer; color:var(--ink)}
.butler-card.on{border-color:var(--teal); box-shadow:0 0 0 1px var(--teal) inset}
.bk-head{display:flex; align-items:center; gap:11px}
.bk-id{display:flex; flex-direction:column; line-height:1.2}
.bk-id b{font-size:15px} .bk-id i{font-style:normal; font-size:11.5px; color:var(--faint)}
.bk-check{margin-left:auto; color:var(--teal); font-weight:700; opacity:0}
.butler-card.on .bk-check{opacity:1}
.bk-desc{font-size:13px; color:var(--ink); margin-top:10px; line-height:1.45}
.bk-traits{display:flex; flex-direction:column; gap:3px; margin-top:9px; font-size:11.5px; color:var(--faint); line-height:1.4}
.bk-traits b{color:var(--teal); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:9.5px; margin-right:4px}
.bk-sample{font-family:var(--serif); font-style:italic; font-size:13.5px; color:#5d6a64; margin-top:9px; line-height:1.5; border-left:3px solid var(--line); padding-left:11px}

/* header weather + left group */
.header-left{display:flex; align-items:center; gap:10px}
.weather-btn{display:inline-flex; align-items:center; gap:4px; border:0; background:transparent; color:var(--ink); padding:6px 2px; cursor:pointer}
.weather-btn[hidden]{display:none}
.wx-t{font-family:var(--mono); font-size:12px; color:var(--faint)}

/* check-in history: hide control + pagination at the top */
.cl-hist-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.cl-hide{width:auto; margin:0; flex:0 0 auto; padding:8px 14px}
.cl-page{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--faint)}
.cl-pg{width:30px; height:30px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--teal); font-size:16px; line-height:1; cursor:pointer}
.cl-pg:disabled{opacity:.4; cursor:default}

/* reorder dashboard blocks — barely-there until engaged (no chrome), then teal when active */
#reorderBtn{background:transparent; border-color:transparent; color:color-mix(in srgb, var(--ink) 20%, transparent)}
#reorderBtn.active{border-color:var(--teal); color:var(--teal); background:color-mix(in srgb, var(--teal) 10%, var(--card))}
body:not([data-page="home"]) #reorderBtn{display:none}
.blk-reorder{display:none}
body[data-reorder="on"] .blk-reorder{display:flex; gap:6px; justify-content:flex-end; margin:0 0 8px}
body[data-reorder="on"] .blk-reorder button{width:34px; height:26px; border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--teal); font-size:12px; line-height:1; cursor:pointer}
body[data-reorder="on"] #dash .card,
body[data-reorder="on"] #dash .narrative{outline:1.5px dashed color-mix(in srgb, var(--teal) 45%, transparent); outline-offset:-1px}
body[data-reorder="on"] #dash details.blk > summary{pointer-events:none}

/* dark mode: the recovery / weekly-status zone bar bands were too pale — saturate them */
html[data-theme="dark"] .dash .z-red{background:#a84334}
html[data-theme="dark"] .dash .z-amber{background:#b3892c}
html[data-theme="dark"] .dash .z-green{background:#3f8e63}
html[data-theme="dark"] .dash .zmark{box-shadow:0 0 0 2px var(--card)}
html[data-theme="dark"] .dash .sband.ok{background:#3f8e63}
html[data-theme="dark"] .dash .sband.over{background:#b3892c}
/* dark mode: the hardcoded light track backgrounds (macro / HR-zone / strain) need to go dark */
html[data-theme="dark"] .dash .macro-bar,
html[data-theme="dark"] .dash .hzb,
html[data-theme="dark"] .dash .strack,
html[data-theme="dark"] .dash .strainbar .strack{background:#2c2925}
html[data-theme="dark"] .dash .tz-easy{background:#46423b}
html[data-theme="dark"] .dash .tz-tgt{background:#3f8e63}
html[data-theme="dark"] .dash .tz-over{background:#b3892c}
/* Aura Tier-2 bloom (dark): the gold chart line appears to emit light */
html[data-theme="dark"] .dash .aura-spark{filter:drop-shadow(0 0 3px color-mix(in srgb, var(--teal) 55%, transparent))}
/* dark depth = surface tone + hairline + a MINIMAL luminous glow (faint warm-white halo) as
   the alternative contrast. Kept very low alpha so the part the carousel clips is imperceptible. */
html[data-theme="dark"] .dash .card{box-shadow:0 0 22px rgba(255,248,238,.055)}
/* brighter champagne gradient metric in dark */
html[data-theme="dark"] .dash .v-daily .rec-num,
html[data-theme="dark"] .dash .v-daily .big2 .big2-n{background-image:linear-gradient(118deg,#cdab63,#ecd49a)}

/* dashboard controls row: reorder (left) · period label (dead-centre) · dots (right).
   Period is absolutely centred on the row so it stays on the SCREEN centre regardless
   of the side widths; reorder + dots sit at the flex edges. */
.dash-controls{position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 10px}
/* reorder is a faint, chromeless glyph (no border/background) */
#reorderBtn{flex:0 0 auto; width:30px; height:30px; border:0; background:transparent; color:var(--faint); border-radius:9px}
#reorderBtn svg{width:18px; height:18px}
.dash-period{position:absolute; left:50%; transform:translateX(-50%); max-width:62%; text-align:center; font-family:var(--serif); font-weight:600; letter-spacing:-.01em; font-size:22px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#dash .phead{display:none}   /* the period label now lives in .dash-controls */

/* settings: refresh button + profile inputs */
.set-refresh{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--teal); font-size:13px; font-weight:600; padding:9px 14px; cursor:pointer; margin:2px 0 4px}
.set-refresh.spin svg{animation:ptrspin .8s linear infinite}
.set-input{border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--ink); font:inherit; font-size:14px; padding:6px 9px; max-width:60%}
.set-input-sm{max-width:90px; text-align:right}
/* version / update indicator */
.set-version{display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-family:var(--mono); font-size:11px}
.ver-state{color:var(--faint)}
.ver-state.ok{color:var(--teal)}
.ver-state.old{color:#b45309}
.ver-update{border:1px solid #b45309; color:#b45309; background:color-mix(in srgb,#b45309 10%,var(--card)); border-radius:7px; font-size:11px; font-weight:600; padding:3px 9px; cursor:pointer}
.height-in{display:inline-flex; align-items:center; gap:6px}
.height-in .ci-hint{margin-right:2px}
.set-input.height-unit{width:62px; max-width:62px; text-align:right; padding:7px 8px}
/* reorder controls stay tappable even when the card summary is disabled in reorder mode */
body[data-reorder="on"] .blk-reorder{pointer-events:auto}

/* Training-page "butler proposed changes" Apply/Discard banner */
.wk-pending{border:1px solid var(--teal); border-radius:14px; background:color-mix(in srgb, var(--teal) 7%, var(--card)); padding:13px 14px; margin:0 0 14px}
.wk-pending[hidden]{display:none}
.wp-head{font-family:var(--serif); font-size:15px; color:var(--ink); display:flex; align-items:center; gap:8px}
.wp-why{font-size:12.5px; color:#5d6a64; line-height:1.5; margin:8px 0 4px}
.wp-row{padding:8px 0; border-top:1px solid var(--line)}
.wp-rt{font-size:13px; font-weight:700; color:var(--ink)}
.wp-rd{font-size:13px; color:var(--ink); margin-top:2px} .wp-rd s{color:#b4452f; opacity:.8} .wp-rd b{color:var(--teal)}
.wp-rr{font-size:11.5px; color:var(--faint); margin-top:2px; line-height:1.45}
.wp-actions{display:flex; gap:9px; margin-top:12px}
.wp-discard{flex:0 0 auto; border:1px solid var(--line); border-radius:10px; background:var(--card); color:#5d6a64; font-size:13px; font-weight:600; padding:10px 14px; cursor:pointer}
.wp-apply{flex:1; border:0; border-radius:10px; background:var(--teal); color:#fff; font-size:14px; font-weight:600; cursor:pointer}
.wp-apply:disabled{opacity:.6}