/* ═══════════════════════════════════════════════════════════════════════════
   Trimbit — App layer
   The redesigned look, on top of the component layer. Shared components are
   scoped to `.content-area`, so they read the same on every screen; the few
   rules that only describe the dashboard's own layout stay on `.dash-v2`.

   Selector weight note: the same `:root[data-theme]` prefix the component
   layer uses, plus a scope class — so these rules always outrank it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Soft White from the brand guidelines: a canvas with the faintest green in
   it, so white cards read as lifted rather than dissolving into a flat sheet.
   Light mode only — dark keeps its true black. */
:root[data-theme="light"],
:root:not([data-theme="dark"]) {
  --canvas: var(--brand-soft-white);
}

/* One typeface everywhere. The older sheets name fonts in ~90 places
   (Inter, JetBrains Mono, system stacks); this settles all of them at once.
   Icon glyphs are drawn in ::before with their own font, which a selector on
   elements never reaches, so the icons are untouched. */
html body,
html body * {
  font-family: var(--font-sans) !important;
}
/* Figures line up in columns (tables, rings, counters) without a mono face. */
html body {
  font-variant-numeric: tabular-nums;
}

/* ═══════════════ 1 · SHELL — topbar and bottom nav ═══════════════
   Shared chrome, so deliberately NOT scoped to the dashboard: every screen
   gets the leaner bar. Sizes and colours are measured from the reference
   design — the header carries the brand's charcoal, which is what makes the
   bar read as Trimbit rather than as browser chrome. */

:root[data-theme] {
  --hdr-plum: var(--brand-charcoal);
  --hdr-chip-h: 32px;
}
:root[data-theme="dark"] {
  --hdr-plum: var(--ink);
}

/* One colour for the whole layout: the header, the bottom nav and the page
   are all the canvas, solid. A see-through chrome picked up the white cards
   scrolling beneath it and read as a lighter, different tint, so neither bar
   matched the page. Only a hairline and the nav's soft lift separate them. */
:root[data-theme] {
  --chrome-bg: var(--canvas);
  --chrome-line: color-mix(in srgb, var(--hdr-plum) 7%, transparent);
}
:root[data-theme="dark"] {
  --chrome-line: rgba(255, 255, 255, 0.08);
}

/* The shell is the sticky block; the row, the section tabs and the setup strip
   ride inside it, so they scroll as one header. */
:root[data-theme] .topbar-shell {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: block;
  background: var(--chrome-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 var(--chrome-line);
}

/* The section's screens — a slim row of tabs under the title. The current one
   wears the same plum capsule as the bottom nav's current tab.

   Scrolling down folds the row up behind the title (Topbar adds .is-compact);
   scrolling back up unfolds it. The height is fixed rather than measured so
   the fold animates at all — a 30px tab plus the row's own 10px foot. */
:root[data-theme] .topbar-shell .snav {
  height: 40px;
  padding: 0 0 10px;
  overflow: hidden;
  transition:
    height 260ms var(--ease-out),
    padding-bottom 260ms var(--ease-out),
    opacity 150ms linear,
    transform 260ms var(--ease-out);
  will-change: height;
}
:root[data-theme] .topbar-shell.is-compact .snav {
  height: 0;
  /* border-box keeps the padding even at height:0 — the row has to give that
     up too, or it leaves a 10px ledge under the title. */
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .topbar-shell .snav {
    transition: none;
  }
}
:root[data-theme] .topbar-shell .snav-row {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 0 max(var(--sp-4), env(safe-area-inset-right)) 0 max(var(--sp-4), env(safe-area-inset-left));
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
:root[data-theme] .topbar-shell .snav-row::-webkit-scrollbar {
  display: none;
}
:root[data-theme] .topbar-shell .snav-tab {
  flex: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  color: var(--ink-subtle);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.1px;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
:root[data-theme] .topbar-shell .snav-tab:hover {
  color: var(--hdr-plum);
  background: color-mix(in srgb, var(--hdr-plum) 6%, transparent);
}
:root[data-theme] .topbar-shell .snav-tab.is-on {
  color: #fff;
  background: var(--mbn-disc);
}
:root[data-theme] .topbar-shell .topbar {
  position: static;
  min-height: 0;
  padding: max(var(--sp-4), env(safe-area-inset-top)) var(--sp-4) 10px;
  padding-left: max(var(--sp-4), env(safe-area-inset-left));
  padding-right: max(var(--sp-4), env(safe-area-inset-right));
  background: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}
/* One line, always. A title long enough to wrap pushed the header taller and
   moved everything measured against it — so a long one is trimmed rather than
   allowed to break the layout. The name is the fix; this is the guard. */
:root[data-theme] .topbar-shell .topbar-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.15;
  color: var(--hdr-plum);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root[data-theme] .topbar-shell .topbar-heading {
  min-width: 0;
}
:root[data-theme] .topbar-shell .topbar > div:first-child {
  min-width: 0;
}
:root[data-theme] .topbar-shell .topbar-date {
  font-size: var(--t-2xs);
  color: var(--ink-subtle);
}
:root[data-theme] .topbar .sidebar-toggle,
:root[data-theme] .topbar .sidebar-collapse-btn {
  width: 40px;
  height: 40px;
  margin-left: -10px;
  border-radius: var(--r-pill);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: var(--hdr-plum);
  font-size: 22px;
  border: none;
  background: transparent;
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
:root[data-theme] .topbar .sidebar-toggle:active,
:root[data-theme] .topbar .sidebar-collapse-btn:active {
  transform: scale(0.94);
  background: var(--surface-3);
}
/* Measured 6px between the chips in the reference. */
:root[data-theme] .topbar-actions {
  gap: 6px !important;
}

/* Points — a white pill with a tabular figure. */
:root[data-theme] .topbar-points {
  height: var(--hdr-chip-h);
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: #ffffff;
  border: none;
  box-shadow: 0 2px 8px rgba(15, 17, 19, 0.08);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}
:root[data-theme="dark"] .topbar-points {
  background: var(--surface-2);
}
:root[data-theme] .topbar-points i {
  color: var(--accent-vivid);
  font-size: 15px;
}
:root[data-theme] .topbar-points .tp-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--hdr-plum);
}

/* Streak — the one gradient chip in the bar. */
:root[data-theme] .topbar-streak {
  height: var(--hdr-chip-h);
  padding: 0 11px;
  border-radius: var(--r-pill);
  /* Follows the accent, so the chip never clashes with the chosen theme. */
  background: linear-gradient(159deg, var(--accent-vivid) 0%, color-mix(in srgb, var(--accent-vivid) 50%, #ffffff) 100%);
  border: none;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-vivid) 30%, transparent);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
:root[data-theme] .topbar-streak .bi-fire {
  color: #f0dc82;
  font-size: 15px;
}
:root[data-theme] .topbar-streak .ts-count {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

/* The gem stands in for the streak when there isn't one to show. */
:root[data-theme] .topbar-premium {
  width: var(--hdr-chip-h);
  height: var(--hdr-chip-h);
  border-radius: var(--r-pill);
  background: #ffffff;
  border: none;
  box-shadow: 0 2px 8px rgba(15, 17, 19, 0.08);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: var(--accent-vivid);
  font-size: 15px;
}
:root[data-theme="dark"] .topbar-premium {
  background: var(--surface-2);
}

/* The avatar sits in a solid accent ring so it reads as "you". */
:root[data-theme] .topbar-profile {
  width: 38px;
  height: 38px;
  padding: 2px;
  border-radius: var(--r-pill);
  background: var(--accent-vivid);
  border: none;
  box-shadow: 0 2px 6px rgba(15, 17, 19, 0.12);
  display: inline-flex;
  flex-direction: row;
}
:root[data-theme] .topbar-profile img,
:root[data-theme] .topbar-profile .topbar-profile-initials {
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  object-fit: cover;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: var(--surface-1);
  color: var(--hdr-plum);
  font-weight: 700;
  font-size: var(--t-sm);
}

/* The setup strip: an inset card in the header, not a full-bleed banner. */
:root[data-theme] .topbar-shell .onboarding-reminder {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: auto;
  margin: 0 var(--sp-4) 10px;
  padding: 7px 12px;
  border-radius: var(--r-md);
  border: none;
  background: var(--accent-soft);
  color: var(--accent);
  /* 11px/500 is what makes the full sentence fit at 390px without clipping. */
  font-size: 11px;
  font-weight: 500;
  box-shadow: none;
}
:root[data-theme] .topbar-shell .onboarding-reminder .or-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .topbar-shell .onboarding-reminder .or-arrow {
  flex: none;
  font-size: var(--t-sm);
}

/* ── Bottom nav — a slim floating capsule in the header's glass ─────────────
   Icons only; the current tab sits on a plum capsule that slides between
   tabs. Lifted off the bottom edge and hugging its tabs, rather than a
   full-width bar. The older sheets draw a full-width bar with a pill behind
   each icon — everything below undoes that. */
:root[data-theme] {
  --mbn-w: 56px;      /* each tab, and the capsule behind the current one */
  --mbn-h: 40px;
  --mbn-gap: 2px;
  --mbn-pad: 4px;
  /* The pill's own height, and how far it floats above the screen's edge —
     named so the FAB and the page's bottom padding can line up with it. */
  --mbn-total: calc(var(--mbn-h) + var(--mbn-pad) * 2 + 2px);
  --mbn-lift: max(14px, calc(env(safe-area-inset-bottom) + 4px));
  /* The current tab — bottom nav and the header's tab row both — wears the
     app's accent, not the header's near-black plum. One colour for "this is
     where you are", and it follows whatever accent the person picked. */
  --mbn-disc: var(--accent-vivid);
}
/* The dock: exactly the screen, taking no taps of its own. */
:root[data-theme] .mbn-dock {
  position: fixed;
  inset: 0;
  z-index: 190;
  pointer-events: none;
}
:root[data-theme] body .mbn-dock .mobile-bottom-nav {
  /* Absolute inside the dock, so its bottom edge is the dock's — the screen's
     — and never a viewport height iOS computed for the document. */
  position: absolute;
  pointer-events: auto;
}
:root[data-theme] body .mobile-bottom-nav {
  left: 50%;
  right: auto;
  /* One number, the same on every screen, with nothing in it that can vary by
     page: the safe-area lift and nothing else.

     Two cleverer versions came before it and both moved the bar between pages.
     100svh put it under Chrome's bottom toolbar on any page too short to
     scroll that toolbar away, and measuring the visual viewport lifted it on
     exactly those same short pages. A tab bar has to be in one place, so its
     position is now a constant. */
  bottom: var(--mbn-lift);
  width: auto;
  min-height: 0;
  height: auto;
  gap: var(--mbn-gap);
  justify-content: flex-start;
  padding: var(--mbn-pad);
  transform: translateX(-50%);
  border: 1px solid var(--chrome-line);
  border-radius: var(--r-pill);
  background: var(--chrome-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 12px 28px -14px rgba(28, 20, 40, 0.30),
    0 1px 3px rgba(28, 20, 40, 0.05);
}
/* The component layer repaints the old full-width bar under [data-accent];
   answer at its weight so the nav stays exactly the page colour. */
:root[data-theme][data-accent] body .mobile-bottom-nav {
  background: var(--chrome-bg);
  border-top-color: var(--chrome-line);
}
:root[data-theme="dark"] body .mobile-bottom-nav,
:root[data-theme="dark"][data-accent] body .mobile-bottom-nav {
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.8);
}

/* The date strip's edge fades end in the page colour, not white — white
   showed as a pale patch at each end on the lavender canvas. */
:root[data-theme] .date-strip-wrap::before {
  background: linear-gradient(to right, var(--canvas), color-mix(in srgb, var(--canvas) 0%, transparent));
}
:root[data-theme] .date-strip-wrap::after {
  background: linear-gradient(to left, var(--canvas), color-mix(in srgb, var(--canvas) 0%, transparent));
}

/* The sliding capsule. */
:root[data-theme] body .mobile-bottom-nav .mbn-thumb {
  position: absolute;
  top: var(--mbn-pad);
  left: var(--mbn-pad);
  width: var(--mbn-w);
  height: var(--mbn-h);
  border-radius: var(--r-pill);
  background: var(--mbn-disc);
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--mbn-disc) 90%, transparent);
  transform: translateX(calc(var(--mbn-active, 0) * (var(--mbn-w) + var(--mbn-gap))));
  transition: transform 0.38s cubic-bezier(0.3, 0.8, 0.2, 1);
  pointer-events: none;
}
:root[data-theme] body .mobile-bottom-nav .mbn-thumb.is-hidden {
  opacity: 0;
}

:root[data-theme] body .mobile-bottom-nav .mbn-item {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--mbn-w);
  height: var(--mbn-h);
  padding: 0;
  gap: 0;
  border-radius: var(--r-pill);
  color: var(--ink-muted);
  background: none;
  transition: color 0.25s ease;
}
:root[data-theme] body .mobile-bottom-nav .mbn-item i,
:root[data-theme] body .mobile-bottom-nav .mbn-item.active i,
:root[data-theme] body .mobile-bottom-nav .mbn-item.mbn-home i {
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: 19px;
  transform: none;
  transition: transform 0.15s ease;
}
:root[data-theme] body .mobile-bottom-nav .mbn-item:active i {
  transform: scale(0.86);
}
:root[data-theme] body .mobile-bottom-nav .mbn-item.active,
:root[data-theme] body .mobile-bottom-nav .mbn-item.mbn-going {
  color: #fff;
}
/* The name stays for screen readers; the bar itself is icons only. */
:root[data-theme] body .mobile-bottom-nav .mbn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] body .mobile-bottom-nav .mbn-thumb {
    transition: none;
  }
}
/* Pages keep enough room at the foot that the pill never covers the last
   card — the pill's own height and offset, not a round number guessed above
   them, so there's no band of empty canvas under the last card. */
@media (max-width: 991px) {
  /* On a phone the header floats over the page rather than sitting in it, and
     the page reserves its full height as padding. That is what lets the tab
     row fold without moving anything: a header in the flow made the page
     shorter as it folded, the browser corrected the scroll position to
     compensate, and that correction read as a scroll the other way — folding
     and unfolding chasing each other under your thumb. Floating, a fold just
     uncovers the content already behind it. */
  :root[data-theme] .topbar-shell {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  :root[data-theme] .main-content {
    padding-top: var(--hdr-full, 106px);
    padding-bottom: calc(var(--mbn-total) + var(--mbn-lift) + 12px);
  }
  :root[data-theme] .content-area {
    padding-bottom: var(--sp-4) !important;
  }
}

/* A page is exactly as tall as what's on it — no viewport unit anywhere in
   its height.

   Phone browsers disagree about what 100vh / 100svh / 100dvh mean, and Chrome
   on iOS measures a viewport taller than the area it actually shows. Any of
   those disagreements lands as a band of empty canvas under the last card,
   which is what the whole page then scrolls into. The canvas colour moves onto
   <html>, so a short page still paints the full screen without the page having
   to pretend it is a screen tall. */
:root[data-theme] {
  background: var(--canvas);
  /* The device's own insets, named. Installed to the Home screen the app draws
     under the status bar and the home indicator, so anything pinned to an edge
     has to know how deep they are. */
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
}
/* The page is at least one screen tall — and no viewport unit does it.
   html's `height: 100%` is the layout viewport, which doesn't grow when a
   phone browser's toolbar collapses (that growth is what used to leave a band
   of empty canvas under the last card), and body's `min-height: 100%` follows
   it. A short page is then exactly one screen: nothing to scroll, nothing
   trailing.

   Why the bottom bar needs this: iOS lays a `position: fixed` element out
   against the document when the document is shorter than the screen, not
   against the screen. With a 597px-tall page on a 956px phone, the bar sat at
   the bottom of the *content* — which is the empty space under it on every
   short screen, and why the long ones looked right. */
:root[data-theme] {
  height: 100%;
}
:root[data-theme] body {
  min-height: 100%;
}
:root[data-theme] .main-content {
  min-height: 0;
}
/* When the header's tab row folds away, everything below it moves up by the
   row's height, and the browser answers by shifting the scroll position to
   hold the content still. That shift reads exactly like a scroll in the other
   direction, which flips the row back — a fold and an unfold chasing each
   other. The page would rather move under the header than have the scroll
   position rewritten beneath it. */
:root[data-theme] body {
  overflow-anchor: none;
}

/* ═══════════════ 2 · DASHBOARD canvas ═══════════════ */

:root[data-theme] .dash-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
/* The flex gap carries the rhythm now, so the old per-card margins go. */
:root[data-theme] .dash-v2 > * {
  margin-bottom: 0 !important;
}
:root[data-theme] .content-area .card-section {
  padding: var(--sp-4);
  border-radius: var(--r-xl);
}

/* ── Greeting — reference #10: "Hello, Name", no card ──────────────────── */
:root[data-theme] .dash-greet {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 2px 2px 0;
}
:root[data-theme] .dash-greet-text {
  min-width: 0;
}
:root[data-theme] .dash-greet-title {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.6px;
  line-height: 1.15;
  color: var(--hdr-plum);
}
:root[data-theme] .dash-greet-title b {
  font-weight: 800;
}
:root[data-theme] .dash-greet-sub {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: var(--t-xs);
  color: var(--ink-subtle);
}
:root[data-theme] .dash-greet-sub i {
  color: var(--accent-vivid);
}
:root[data-theme] .dash-greet-date {
  flex: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--hdr-plum);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
:root[data-theme] .dash-greet-date i {
  color: var(--accent-vivid);
}

/* ── Tiles — reference #10's grid ──────────────────────────────────────── */
:root[data-theme] .dash-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px 100px auto;
  grid-template-areas:
    'steps  weight'
    'steps  cal'
    'water  cal'
    'habits habits';
  gap: var(--sp-3);
}
:root[data-theme] .dash-tile {
  --c: var(--accent-vivid);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
  border-radius: 22px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
:root[data-theme] a.dash-tile:hover {
  box-shadow: 0 10px 24px -12px rgba(15, 17, 19, 0.3);
}
:root[data-theme] a.dash-tile:active {
  transform: scale(0.98);
}
:root[data-theme] .tile-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
:root[data-theme] .tile-name {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .tile-head i {
  color: var(--c);
  font-size: 18px;
}
:root[data-theme] .tile-weight { grid-area: weight; --c: var(--m-weight); }
:root[data-theme] .tile-cal { grid-area: cal; --c: var(--m-calories); }
:root[data-theme] .tile-water { grid-area: water; --c: var(--m-water); }
:root[data-theme] .tile-habits { grid-area: habits; --c: var(--m-steps); }

/* Rings (Steps and Calories) */
:root[data-theme] .tile-ring-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
:root[data-theme] .tile-ring {
  width: 104px;
  height: 104px;
}
:root[data-theme] .tile-ring .ring-track {
  stroke: color-mix(in srgb, var(--c) 14%, var(--surface-1));
}
:root[data-theme] .tile-ring .ring-fill {
  stroke: var(--c);
}
:root[data-theme] .tile-ring-mid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
:root[data-theme] .tile-ring-mid b {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .tile-ring-mid small {
  font-size: 11px;
  color: var(--ink-subtle);
}
:root[data-theme] .tile-foot {
  font-size: var(--t-2xs);
  font-weight: 600;
  text-align: center;
  color: var(--ink-subtle);
}
:root[data-theme] .tile-cal.is-over {
  --c: var(--danger);
}

/* Steps is the hero: filled with the accent, white type, a white ring. */
:root[data-theme] .tile-steps {
  grid-area: steps;
  background: linear-gradient(160deg, var(--accent-vivid) 0%, var(--accent) 100%);
  color: #fff;
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--accent-vivid) 70%, transparent);
}
:root[data-theme] .tile-steps .tile-name,
:root[data-theme] .tile-steps .tile-head i,
:root[data-theme] .tile-steps .tile-ring-mid b,
:root[data-theme] .tile-steps .tile-foot {
  color: #fff;
}
:root[data-theme] .tile-steps .tile-ring-mid small {
  color: rgba(255, 255, 255, 0.8);
}
:root[data-theme] .tile-steps .tile-ring .ring-track {
  stroke: rgba(255, 255, 255, 0.24);
}
:root[data-theme] .tile-steps .tile-ring .ring-fill {
  stroke: #fff;
}
:root[data-theme] .tile-steps::after {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 120px;
  height: 120px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%);
  pointer-events: none;
}

/* Figures (Weight and Water) */
:root[data-theme] .tile-value {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}
:root[data-theme] .tile-value small {
  margin-left: 4px;
  font-family: var(--font-sans);
  font-size: var(--t-2xs);
  font-weight: 500;
  color: var(--ink-subtle);
}
:root[data-theme] .tile-note {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--ink-subtle);
}
:root[data-theme] .tile-delta {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}
:root[data-theme] .tile-delta.is-good {
  color: var(--success);
}
:root[data-theme] .tile-delta i {
  font-size: 15px;
  line-height: 1;
}
:root[data-theme] .tile-bar {
  display: block;
  height: 6px;
  margin-top: 8px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c) 14%, var(--surface-1));
  overflow: hidden;
}
:root[data-theme] .tile-bar span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--c);
}

/* Habits — a full-width summary row */
:root[data-theme] .tile-habits {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
}
:root[data-theme] .tile-habits-ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c) 16%, var(--surface-1));
  color: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}
:root[data-theme] .tile-habits-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
:root[data-theme] .tile-habits-line {
  font-size: var(--t-xs);
  color: var(--ink-subtle);
}
:root[data-theme] .tile-habits-line b {
  font-family: var(--font-mono);
  color: var(--ink);
}
:root[data-theme] .tile-habits-dots {
  flex: none;
  display: flex;
  flex-direction: row;
  gap: 5px;
}
:root[data-theme] .tile-habits-dots span {
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c) 18%, var(--surface-1));
}
:root[data-theme] .tile-habits-dots span.is-on {
  background: var(--c);
}

/* ── Tip for today ─────────────────────────────────────────────────────── */
:root[data-theme] .dash-tip {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 14px 16px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent-vivid) 10%, var(--surface-1));
}
:root[data-theme] .dash-tip-ico {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: #f5b800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: var(--shadow-sm);
}
:root[data-theme] .dash-tip-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
:root[data-theme] .dash-tip-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent);
}
:root[data-theme] .dash-tip-text {
  margin-top: 2px;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

/* ── Card headings shared by the dashboard's own cards ─────────────────── */
:root[data-theme] .dash-card-title {
  margin: 0;
  font-size: var(--t-headline);
  font-weight: 700;
  letter-spacing: var(--t-headline-ls);
  color: var(--ink);
}
:root[data-theme] .dash-card-sub {
  margin: 1px 0 0;
  font-size: var(--t-2xs);
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .dash-food {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
:root[data-theme] .dash-food-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
:root[data-theme] .dash-section-title {
  margin: var(--sp-2) 2px 0;
  font-size: var(--t-title3);
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--hdr-plum);
}

/* ── This week — reference #11: one card per measure ───────────────────── */
:root[data-theme] .dash-trends {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
:root[data-theme] .trend {
  --c: var(--accent-vivid);
  padding: 16px;
  border-radius: 22px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .trend-cal { --c: var(--m-calories); }
:root[data-theme] .trend-weight { --c: var(--m-weight); }
:root[data-theme] .trend-habits { --c: var(--m-steps); }
:root[data-theme] .trend-water { --c: var(--m-water); }
:root[data-theme] .trend-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
:root[data-theme] .trend-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: var(--t-callout);
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .trend-title i {
  color: var(--c);
  font-size: 17px;
}
:root[data-theme] .trend-range {
  font-size: var(--t-2xs);
  color: var(--ink-subtle);
}
:root[data-theme] .trend-body {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
:root[data-theme] .trend-figure {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
:root[data-theme] .trend-figure b {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
}
:root[data-theme] .trend-figure b small {
  margin-left: 4px;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-subtle);
}
:root[data-theme] .trend-figure > span {
  margin-top: 3px;
  font-size: var(--t-2xs);
  color: var(--ink-subtle);
}
:root[data-theme] .trend-chart {
  flex: none;
  width: 160px;
}

/* Bars */
:root[data-theme] .trend-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
:root[data-theme] .trend-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
:root[data-theme] .trend-track {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 10px;
  height: 52px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c) 14%, var(--surface-1));
  overflow: hidden;
}
:root[data-theme] .trend-fill {
  display: block;
  width: 100%;
  border-radius: var(--r-pill);
  background: var(--c);
}
:root[data-theme] .trend-fill.is-hot {
  background: var(--danger);
}
:root[data-theme] .trend-day,
:root[data-theme] .trend-days span {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
}
:root[data-theme] .is-today .trend-day,
:root[data-theme] .trend-days span.is-today {
  color: var(--c);
  font-weight: 800;
}

/* Weight sparkline */
:root[data-theme] .trend-spark svg {
  display: block;
  width: 100%;
  height: 52px;
  overflow: visible;
}
:root[data-theme] .spark-line {
  stroke: var(--c);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
:root[data-theme] .spark-dot {
  fill: var(--surface-1);
  stroke: var(--c);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
:root[data-theme] .spark-dot.is-today {
  fill: var(--c);
}
:root[data-theme] .trend-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: 6px;
  text-align: center;
}

/* Habit rings */
:root[data-theme] .trend-rings {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
:root[data-theme] .trend-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
:root[data-theme] .trend-ring-mark {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
:root[data-theme] .trend-ring-mark svg {
  width: 22px;
  height: 22px;
}
:root[data-theme] .trend-ring-mark .ring-track {
  stroke: color-mix(in srgb, var(--c) 18%, var(--surface-1));
}
:root[data-theme] .trend-ring-mark .ring-fill {
  stroke: var(--c);
}
:root[data-theme] .trend-ring-mark i {
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--c);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* ── Progress hero ────────────────────────────────────────────────────── */
:root[data-theme] .content-area .dash-hero-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
:root[data-theme] .content-area .pc-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
}
:root[data-theme] .content-area .pc-hero-l {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
:root[data-theme] .content-area .pc-tag {
  display: block;
  padding: 0;
  background: none;
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .pc-big {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  /* "56%" is one figure — only the note after it gets breathing room. */
  gap: 0;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--t-large);
  font-weight: 700;
  letter-spacing: var(--t-large-ls);
  line-height: 1.05;
  color: var(--ink);
}
:root[data-theme] .content-area .pc-big > span {
  font-size: var(--t-title2);
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .content-area .pc-big-note {
  margin-left: 7px;
  font-family: var(--font-sans);
  font-size: var(--t-2xs);
  font-weight: 600;
  font-style: normal;
  color: var(--accent);
  white-space: nowrap;
}
:root[data-theme] .content-area .pc-sub {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--ink-subtle);
  white-space: nowrap;
}
:root[data-theme] .content-area .pc-sub b {
  color: var(--ink);
  font-weight: 600;
}
:root[data-theme] .content-area .pc-ring {
  flex: none;
  position: relative;
  width: 116px;
  height: 116px;
}
:root[data-theme] .content-area .pc-ring svg {
  width: 100%;
  height: 100%;
  display: block;
}
:root[data-theme] .content-area .pc-ring-track {
  stroke: var(--surface-3);
  stroke-width: 10;
}
:root[data-theme] .content-area .pc-ring-fill {
  stroke: var(--accent-vivid);
  stroke-width: 10;
  filter: none;
}
:root[data-theme] .content-area .dash-hero-card.is-over .pc-ring-fill {
  stroke: var(--danger);
}
:root[data-theme] .content-area .pc-ring-mid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
}
:root[data-theme] .content-area .pc-ring-mid b {
  font-family: var(--font-mono);
  font-size: var(--t-title2);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
:root[data-theme] .content-area .pc-ring-mid small {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-subtle);
}

/* Two recessed stat tiles. */
:root[data-theme] .content-area .pc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin: 0;
}
:root[data-theme] .content-area .pc-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: none;
  box-shadow: none;
}
:root[data-theme] .content-area .pc-stat-k {
  font-size: var(--t-2xs);
  font-weight: 500;
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .pc-stat-n {
  font-family: var(--font-mono);
  font-size: var(--t-title3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
:root[data-theme] .content-area .pc-stat-n i {
  margin-left: 2px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .pc-delta {
  align-self: flex-start;
  margin-top: 6px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 1px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
:root[data-theme] .content-area .pc-delta i {
  font-size: var(--t-body);
  line-height: 1;
}
:root[data-theme] .content-area .pc-sub2 {
  margin-top: 6px;
  padding: 0;
  background: none;
  font-size: var(--t-2xs);
  color: var(--ink-subtle);
}

/* Steps strip. */
:root[data-theme] .content-area .pc-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--accent-softer);
  border: none;
  box-shadow: none;
}
:root[data-theme] .content-area .pc-steps-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
}
:root[data-theme] .content-area .pc-steps-ico {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--ink-on-accent);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: var(--t-2xs);
}
:root[data-theme] .content-area .pc-steps-count {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 600;
  color: var(--ink);
}
:root[data-theme] .content-area .pc-steps-pct {
  flex: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  font-size: var(--t-2xs);
  font-weight: 600;
  color: var(--accent);
}
:root[data-theme] .content-area .pc-steps-bar {
  width: 100%;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  overflow: hidden;
}
:root[data-theme] .content-area .pc-steps-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent-vivid);
}

/* ── Today's Activities ───────────────────────────────────────────────── */
:root[data-theme] .content-area .dash-acts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
:root[data-theme] .content-area .dash-acts-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
:root[data-theme] .content-area .dash-acts-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--t-headline);
  font-weight: 700;
  letter-spacing: var(--t-headline-ls);
  color: var(--ink);
}
:root[data-theme] .content-area .dash-acts-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-subtle);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
:root[data-theme] .content-area .dash-icon-btn {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-subtle);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: var(--t-xs);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
:root[data-theme] .content-area .dash-icon-btn:hover {
  color: var(--ink);
}

:root[data-theme] .content-area .activity-checklist {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px;
}
/* The old checklist was a grid of tiles: half-width rows, a capped width and
   a corner tick. The new row is a full-width list item, so those go. */
:root[data-theme] .content-area .activity-checklist > .check-row {
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
}
:root[data-theme] .content-area .check-row.checked::after {
  display: none;
}

:root[data-theme] .content-area .check-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-3);
  min-height: 48px;
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: transparent;
  border: none;
  box-shadow: none;
  /* The tile style centred its text; a list row reads from the left. */
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}
:root[data-theme] .content-area .check-row:hover {
  background: var(--surface-3);
}
/* One 24px control leads the row: the tick box. The activity's own icon is
   redundant beside it, so it steps aside. */
:root[data-theme] .content-area .check-row .check-mark {
  order: 1;
  flex: none;
  position: static;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: transparent;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: var(--t-xs);
  opacity: 1;
  transform: none;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
:root[data-theme] .content-area .check-row:active .check-mark {
  transform: scale(0.9);
}
:root[data-theme] .content-area .check-row.checked .check-mark {
  background: var(--accent);
  color: var(--ink-on-accent);
}
:root[data-theme] .content-area .check-row .check-box {
  display: none;
}
:root[data-theme] .content-area .check-row .check-label {
  order: 3;
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .content-area .check-row.checked .check-label {
  color: var(--ink-subtle);
  text-decoration: line-through;
}
:root[data-theme] .content-area .check-note {
  order: 4;
  flex: none;
  font-size: var(--t-2xs);
  font-weight: 500;
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .check-row.checked .check-note {
  color: var(--accent);
}

/* Derived rows read as locked: recessed, badged, not tappable. */
:root[data-theme] .content-area .check-row.metric-locked {
  background: var(--surface-3);
  cursor: default;
}
:root[data-theme] .content-area .check-row.metric-locked .check-mark {
  display: none;
}
:root[data-theme] .content-area .check-row .metric-lock {
  order: 1;
  flex: none;
  position: static;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  background: var(--surface-4);
  color: var(--ink-subtle);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  opacity: 1;
}
:root[data-theme] .content-area .check-row.metric-locked.checked .metric-lock {
  background: var(--accent-soft);
  color: var(--accent);
}
:root[data-theme] .content-area .check-row.metric-locked.checked .check-label {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
:root[data-theme] .content-area .check-note.is-auto,
:root[data-theme] .content-area .check-note.is-derived {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-weight: 600;
}
:root[data-theme] .content-area .check-note.is-auto {
  background: var(--accent-soft);
  color: var(--accent);
}
:root[data-theme] .content-area .check-note.is-derived {
  background: var(--surface-4);
  color: var(--ink-subtle);
  font-weight: 500;
}

:root[data-theme] .content-area .dash-check-sync {
  min-height: 16px;
  font-size: var(--t-2xs);
  color: var(--ink-subtle);
}

/* Upcoming reminder, as a row inside the activities card. */
:root[data-theme] .content-area .upcoming-reminder-section {
  margin: 0;
}
:root[data-theme] .content-area .upcoming-reminder-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: none;
  box-shadow: none;
  text-decoration: none;
}
:root[data-theme] .content-area .upcoming-reminder-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--ios-red);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: var(--t-xs);
  box-shadow: var(--shadow-sm);
}
:root[data-theme] .content-area .upcoming-reminder-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
:root[data-theme] .content-area .upcoming-reminder-label {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .content-area .upcoming-reminder-title {
  font-size: var(--t-2xs);
  color: var(--ink-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .content-area .upcoming-reminder-when {
  flex: none;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--ink);
  font-size: var(--t-2xs);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

/* ── Nutrition Today ──────────────────────────────────────────────────── */
:root[data-theme] .content-area .nutrition-today {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
:root[data-theme] .content-area .nutrition-today-head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}
:root[data-theme] .content-area .nutrition-today-title {
  margin: 0;
  font-size: var(--t-headline);
  font-weight: 700;
  letter-spacing: var(--t-headline-ls);
  color: var(--ink);
}
:root[data-theme] .content-area .nutrition-today-sub {
  margin: 0;
  font-size: var(--t-2xs);
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .nutrition-today-date {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
:root[data-theme] .content-area .nutrient-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
:root[data-theme] .content-area .nutrient-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: none;
  box-shadow: none;
}
:root[data-theme] .content-area .nutrient-card-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
}
:root[data-theme] .content-area .nutrient-card-top i {
  display: none;
}
:root[data-theme] .content-area .nutrient-card-top,
:root[data-theme] .content-area .nutrient-name {
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .nutrient-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--accent-vivid);
}
:root[data-theme] .content-area .nutrient-card.status-under .nutrient-dot,
:root[data-theme] .content-area .nutrient-card.status-under .nutrient-bar-fill {
  background: var(--ios-orange);
}
:root[data-theme] .content-area .nutrient-card.status-over .nutrient-dot,
:root[data-theme] .content-area .nutrient-card.status-over .nutrient-bar-fill {
  background: var(--danger);
}
:root[data-theme] .content-area .nutrient-card.status-good .nutrient-dot,
:root[data-theme] .content-area .nutrient-card.status-good .nutrient-bar-fill {
  background: var(--accent-vivid);
}
:root[data-theme] .content-area .nutrient-value {
  font-family: var(--font-mono);
  font-size: var(--t-title3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
:root[data-theme] .content-area .nutrient-unit {
  margin-left: 3px;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .nutrient-target {
  margin-top: -5px;
  font-size: 11px;
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .nutrient-bar {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  overflow: hidden;
}
:root[data-theme] .content-area .nutrient-bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
}
:root[data-theme] .content-area .nutrient-bar-min {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--line-strong);
}

/* ── Week / Food tabs ─────────────────────────────────────────────────── */
:root[data-theme] .content-area .dash-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
:root[data-theme] .content-area .dash-tabs-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
:root[data-theme] .content-area .dash-tabbar {
  display: inline-flex;
  flex-direction: row;
  gap: 0;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: none;
}
:root[data-theme] .content-area .dash-tabbar .dash-tab {
  padding: 6px 18px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-subtle);
  font-size: var(--t-2xs);
  font-weight: 500;
  box-shadow: none;
  transition: all var(--dur-2) var(--ease-out);
}
:root[data-theme] .content-area .dash-tabbar .dash-tab.is-on {
  background: var(--accent) !important;
  color: var(--ink-on-accent) !important;
  font-weight: 700;
  box-shadow: var(--shadow-sm) !important;
}
:root[data-theme] .content-area .dash-addfood {
  flex: none;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--ink-on-accent);
  font-size: var(--t-2xs);
  font-weight: 700;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-vivid) 28%, transparent);
  transition: transform var(--dur-1) var(--ease-out);
}
:root[data-theme] .content-area .dash-addfood:active {
  transform: scale(0.95);
}

:root[data-theme] .content-area .dash-tabs .week-table-wrap {
  overflow-x: auto;
}
:root[data-theme] .content-area .dash-tabs .week-table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
}
:root[data-theme] .content-area .dash-tabs .week-table thead th {
  padding: 6px 4px;
  border: none;
  background: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-subtle);
  text-align: center;
}
:root[data-theme] .content-area .dash-tabs .week-table thead th:first-child {
  padding-left: 0;
  text-align: left;
}
:root[data-theme] .content-area .dash-tabs .week-table thead th.num-col,
:root[data-theme] .content-area .dash-tabs .week-table tbody td.num-col {
  text-align: right;
}
:root[data-theme] .content-area .dash-tabs .week-table tbody td {
  padding: 9px 4px;
  border: none;
  font-size: var(--t-xs);
  text-align: center;
  color: var(--ink);
}
:root[data-theme] .content-area .dash-tabs .week-table .day-cell {
  padding-left: 8px;
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
:root[data-theme] .content-area .dash-tabs .week-table .day-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  vertical-align: middle;
}
:root[data-theme] .content-area .dash-tabs .week-table .tick-cell i {
  font-size: var(--t-xs);
  color: var(--ink-faint);
}
:root[data-theme] .content-area .dash-tabs .week-table .tick-cell i.is-on {
  color: var(--accent);
}
:root[data-theme] .content-area .dash-tabs .week-table .weight-cell,
:root[data-theme] .content-area .dash-tabs .week-table .cals-cell {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--ink);
}
:root[data-theme] .content-area .dash-tabs .week-table tbody tr.today-row {
  background: var(--accent-soft);
}
:root[data-theme] .content-area .dash-tabs .week-table tbody tr.today-row td:first-child {
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  color: var(--accent);
  font-weight: 700;
}
:root[data-theme] .content-area .dash-tabs .week-table tbody tr.today-row td:last-child {
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
:root[data-theme] .content-area .dash-tabs .week-table tbody tr.today-row .weight-cell,
:root[data-theme] .content-area .dash-tabs .week-table tbody tr.today-row .cals-cell {
  color: var(--accent);
  font-weight: 700;
}

/* Today's food, as tiles. */
:root[data-theme] .content-area .dash-panel {
  display: none;
}
:root[data-theme] .content-area .dash-panel.is-on {
  display: block;
}
:root[data-theme] .content-area .food-section {
  border: none;
  padding: 0;
}
:root[data-theme] .content-area .food-section + .food-section {
  margin-top: var(--sp-4);
}
:root[data-theme] .content-area .food-cat-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  padding: 0;
  border: none;
  background: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .food-cat-header .count-badge {
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
:root[data-theme] .content-area .food-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: none;
}
:root[data-theme] .content-area .food-row + .food-row {
  margin-top: 6px;
}
:root[data-theme] .content-area .food-row-ico {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--accent);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: var(--t-xs);
}
:root[data-theme] .content-area .food-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
:root[data-theme] .content-area .food-row .food-name {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .content-area .food-row .food-macros {
  font-size: 11px;
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .food-row-cal {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 700;
  color: var(--ink);
}

/* ═══════════════ 3 · EVERY SCREEN — rhythm and primitives ═══════════════
   What makes a page read as designed rather than assembled: one vertical
   rhythm, one title size, and controls that share the dashboard's language. */

/* One rhythm: cards are spaced by the column gap, not by ad-hoc margins. */
:root[data-theme] .content-area {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
:root[data-theme] .content-area > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  /* A wide child (a table, a tab bar) scrolls inside itself instead of
     widening the page. */
  min-width: 0;
  max-width: 100%;
}
/* Wide screens: a comfortable reading column. The admin table opts out. */
@media (min-width: 992px) {
  :root[data-theme] .content-area:not(.content-wide) {
    width: 100%;
    max-width: 768px;
    margin-inline: auto;
  }
}

/* Card titles — one size everywhere, matching the dashboard's cards. */
:root[data-theme] .content-area .section-label {
  font-size: var(--t-headline);
  font-weight: 700;
  letter-spacing: var(--t-headline-ls);
  color: var(--ink);
}
:root[data-theme] .content-area .section-label > i:first-child {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
}

/* Segmented controls — the dashboard's filled accent pill, everywhere. The
   component layer paints a white thumb with !important, so answer in kind. */
:root[data-theme] .content-area .section-tabs,
:root[data-theme] .content-area .fp-tabs,
:root[data-theme] .content-area .discover-mode-switch {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: none;
}
:root[data-theme] .content-area .section-tabs .section-tab,
:root[data-theme] .content-area .fp-tabs .fp-tab,
:root[data-theme] .content-area .discover-mode-switch .discover-mode-btn {
  flex: 1;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-subtle);
  font-size: var(--t-xs);
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
:root[data-theme] .content-area .section-tabs .section-tab.active,
:root[data-theme] .content-area .fp-tabs .fp-tab.active,
:root[data-theme] .content-area .discover-mode-switch .discover-mode-btn.active {
  background: var(--accent) !important;
  color: var(--ink-on-accent) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-vivid) 25%, transparent) !important;
}
:root[data-theme] .content-area .section-tabs .section-tab i {
  margin: 0 !important;
}

/* Switches take the accent, not iOS green — one "on" colour in the app. */
:root[data-theme] .reminder-switch input:checked + .reminder-switch-track {
  background: var(--accent-vivid);
}

/* Buttons — the dashboard's pill shape for filled and tinted actions. */
:root[data-theme] .content-area .btn-plum,
:root[data-theme] .content-area .btn-accent,
:root[data-theme] .content-area .btn-coral,
:root[data-theme] .content-area .btn-plum-outline,
:root[data-theme] .content-area .btn-outline-accent,
:root[data-theme] .content-area .btn-outline-plum {
  border-radius: var(--r-pill);
  min-height: 44px;
  padding-inline: 20px;
}
:root[data-theme] .content-area .btn-sm.btn-plum,
:root[data-theme] .content-area .btn-sm.btn-accent,
:root[data-theme] .content-area .btn-sm.btn-plum-outline,
:root[data-theme] .content-area .btn-sm.btn-outline-accent,
:root[data-theme] .content-area .btn-sm.btn-outline-plum {
  min-height: 36px;
  padding: 6px 14px;
  font-size: var(--t-xs);
}
:root[data-theme] .content-area .btn-plum,
:root[data-theme] .content-area .btn-accent {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-vivid) 25%, transparent);
}
:root[data-theme] .content-area .btn-coral {
  background: var(--accent);
  color: var(--ink-on-accent);
  border: none;
}

/* Empty states — an icon in a tinted disc, a line of copy, and the action. */
:root[data-theme] .content-area .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  border-radius: var(--r-lg);
  background: var(--surface-3);
}
:root[data-theme] .content-area .empty-state > i:first-child {
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px !important;
}
:root[data-theme] .content-area .empty-state p {
  max-width: 320px;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .empty-state a {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

/* Page-level action rows ("+ Add Reminder", "+ New Report") sit flush right. */
:root[data-theme] .page-action-bar {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0;
  background: none;
  border: none;
}

/* Informational cards read as a tinted note, not a bordered alert. */
:root[data-theme] .content-area .info-card {
  background: var(--accent-softer);
  /* The older sheets drew an accent stripe down the left; a tint is enough. */
  border: none !important;
  box-shadow: none;
}
:root[data-theme] .content-area .info-card p {
  line-height: 1.5;
}

/* ═══════════════ 4 · LISTS — tappable rows ═══════════════
   Activities and Reminders: a row opens its editor; only the controls that
   make sense in-line (reorder, on/off) stay on the row. */

/* A count beside a card title: "Your Reminders 4/5 on". */
:root[data-theme] .content-area .title-count {
  margin-left: var(--sp-2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-subtle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: middle;
}

:root[data-theme] .content-area .reminder-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:root[data-theme] .content-area .reminder-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  min-height: 60px;
  padding: 10px 10px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
}
:root[data-theme] .content-area .reminder-item.is-tappable {
  cursor: pointer;
}
:root[data-theme] .content-area .reminder-item.is-tappable:hover {
  background: var(--surface-3);
}
:root[data-theme] .content-area .reminder-item.is-tappable:active {
  background: var(--surface-4);
}
:root[data-theme] .content-area .reminder-item.disabled .reminder-main,
:root[data-theme] .content-area .reminder-item.disabled .reminder-time {
  opacity: 0.45;
}
:root[data-theme] .content-area .reminder-item.disabled {
  opacity: 1;
}
:root[data-theme] .content-area .reminder-main {
  flex: 1;
  min-width: 0;
}
:root[data-theme] .content-area .reminder-main .reminder-label {
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  /* Two lines, then an ellipsis — never a four-line wrap. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:root[data-theme] .content-area .reminder-main .reminder-sub {
  margin-top: 2px;
  font-size: var(--t-2xs);
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .reminder-main .reminder-sub i {
  color: var(--accent);
}
:root[data-theme] .content-area .reminder-actions {
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}
:root[data-theme] .content-area .row-icon-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-xs);
  transition: background var(--dur-1) var(--ease-out);
}
:root[data-theme] .content-area .row-icon-btn:hover:not(:disabled) {
  background: var(--surface-4);
  color: var(--ink);
}
:root[data-theme] .content-area .row-icon-btn:disabled {
  opacity: 0.25;
}
:root[data-theme] .content-area .row-chev {
  flex: none;
  color: var(--ink-faint);
  font-size: var(--t-xs);
}

/* Activity icon tile, tinted by the activity's own colour. */
:root[data-theme] .content-area .act-ico {
  --c: var(--accent-vivid);
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c) 15%, var(--surface-1));
  color: var(--c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-body);
}
:root[data-theme] .content-area .act-ico.act-plum { --c: #7a4c96; }
:root[data-theme] .content-area .act-ico.act-coral { --c: #e0706a; }
:root[data-theme] .content-area .act-ico.act-mauve { --c: #a0688a; }
/* Yellow text on a yellow tint fails contrast — the glyph takes a deeper cut. */
:root[data-theme] .content-area .act-ico.act-yellow { --c: #c79a14; }
:root[data-theme] .content-area .act-ico[style*='--act-color'] { --c: var(--act-color); }

/* Reminder time: the number reads first, the period sits under it. */
:root[data-theme] .content-area .rem-item .reminder-time {
  flex: none;
  width: 58px;
  padding: 6px 0;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
:root[data-theme] .content-area .rem-item .reminder-time b {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 700;
}
:root[data-theme] .content-area .rem-item .reminder-time small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  opacity: 0.8;
}

/* ═══════════════ 5 · HEROES on Daily Log and Progress ═══════════════
   Same card as the dashboard's hero; these variants carry an icon in the tag
   and a unit (kcal, kg) rather than a percent after the big figure. */
:root[data-theme] .content-area .pc-tag i {
  margin-right: 5px;
  color: var(--accent);
}
:root[data-theme] .content-area .pc-hero-cal .pc-big > span {
  margin-left: 4px;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .pc-hero-cal .pc-sub {
  font-family: var(--font-sans);
  color: var(--accent);
  font-weight: 600;
}
:root[data-theme] .content-area .pc-hero-cal .pc-sub i {
  margin-right: 2px;
}
:root[data-theme] .content-area .pc-stat-h {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--t-2xs);
  font-weight: 500;
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .pc-stat-h .pc-chip {
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* ═══════════════ 6 · REWARDS — a hub, then tabs ═══════════════
   Design refs: the Rewarzo board (tiles, podium), the "Rewards App" set
   (balance, day track, referral card, level path) and the Jane Doe quests
   screen (reward reveal). Coin gold is the one extra colour on this screen. */
:root[data-theme] {
  --coin: #f5b73b;
  --coin-ink: #b9780a;
  --coin-bg: #fff4dc;
}
:root[data-theme="dark"] {
  --coin-ink: #f5c04a;
  --coin-bg: rgba(245, 183, 59, 0.14);
}

/* Balance + level — the page's one filled card. */
:root[data-theme] .rwd-balance {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 16px;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent-vivid) 60%, transparent) 0%, transparent 62%),
    linear-gradient(150deg, var(--brand-charcoal) 0%, #553383 55%, var(--accent-vivid) 100%);
  box-shadow: 0 14px 30px -16px rgba(15, 17, 19, 0.6);
}
:root[data-theme] .rwd-bal-top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
:root[data-theme] .rwd-bal-lbl {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
:root[data-theme] .rwd-bal-num {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
}
:root[data-theme] .rwd-bal-num .bi-coin {
  font-size: 24px;
  color: #ffd166;
}
:root[data-theme] .rwd-bal-num small {
  align-self: flex-end;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.72);
}
:root[data-theme] .rwd-level {
  flex: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 4px;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
:root[data-theme] .rwd-level:active {
  transform: scale(0.97);
}
:root[data-theme] .rwd-level-lv {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--brand-charcoal);
  font-size: 11px;
  font-weight: 800;
}
:root[data-theme] .rwd-level .bi {
  font-size: 11px;
  opacity: 0.8;
}
:root[data-theme] .rwd-bal-track {
  height: 8px;
  margin-top: 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
:root[data-theme] .rwd-bal-track span {
  display: block;
  min-width: 8px;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #ffd166, #ffe8a3);
  transition: width var(--dur-3) var(--ease-out);
}
:root[data-theme] .rwd-bal-foot {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

/* Three quick tiles — Streak, Rank, Badges. */
:root[data-theme] .rwd-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
:root[data-theme] .rwd-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: none;
  border-radius: 18px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
}
:root[data-theme] .rwd-tile:active {
  transform: scale(0.97);
}
:root[data-theme] .rwd-tile-lbl {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .rwd-tile-lbl .bi {
  font-size: 10px;
  color: var(--ink-faint);
}
:root[data-theme] .rwd-tile b {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .rwd-tile b small {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-faint);
}
:root[data-theme] .rwd-tile.t-streak b .bi { color: #ff7a2f; }
:root[data-theme] .rwd-tile.t-rank b .bi { color: var(--coin); }
:root[data-theme] .rwd-tile.t-badges b .bi { color: var(--accent-vivid); }

/* Section heads inside the cards. */
:root[data-theme] .rwd-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
:root[data-theme] .rwd-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink);
}
:root[data-theme] .rwd-head-note {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-subtle);
  text-align: right;
}
:root[data-theme] .rwd-chest-copy,
:root[data-theme] .rwd-copy {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-subtle);
}

/* The chest as a 7-day track: a rail behind the dots, filled as days land. */
:root[data-theme] .rwd-days {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
:root[data-theme] .rwd-days::before,
:root[data-theme] .rwd-days::after {
  content: '';
  position: absolute;
  top: 15px;
  left: calc(100% / 14);
  height: 3px;
  border-radius: var(--r-pill);
}
:root[data-theme] .rwd-days::before {
  right: calc(100% / 14);
  background: var(--surface-3);
}
:root[data-theme] .rwd-days::after {
  width: calc((100% - 100% / 7) * var(--fill, 0));
  background: var(--accent-vivid);
  transition: width var(--dur-3) var(--ease-out);
}
:root[data-theme] .rwd-day {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
:root[data-theme] .rwd-day-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--surface-3);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: #fff;
  font-size: 14px;
}
:root[data-theme] .rwd-day.is-done .rwd-day-dot {
  border-color: var(--accent-vivid);
  background: var(--accent-vivid);
}
:root[data-theme] .rwd-day.is-next .rwd-day-dot {
  border-color: var(--accent-vivid);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-vivid) 16%, transparent);
}
:root[data-theme] .rwd-day.is-gift .rwd-day-dot {
  border-color: var(--coin);
  background: var(--coin-bg);
  color: var(--coin-ink);
}
:root[data-theme] .rwd-chest.is-ready .rwd-day.is-gift .rwd-day-dot {
  background: var(--coin);
  color: #fff;
  animation: rwd-pulse 1.6s ease-in-out infinite;
}
:root[data-theme] .rwd-day-lbl {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
}
:root[data-theme] .rwd-day.is-done .rwd-day-lbl,
:root[data-theme] .rwd-day.is-next .rwd-day-lbl {
  color: var(--ink-subtle);
}
:root[data-theme] .rwd-cta.is-waiting {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-subtle);
  font-size: 14px;
  font-weight: 700;
}
@keyframes rwd-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--coin) 50%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--coin) 0%, transparent); }
}

/* The tab strip — the app's filled segmented control, four to a row. */
/* Sized by their labels, so "Leaderboard" gets the room it needs. The legacy
   sheet pins every .fp-tab to an equal share with !important. */
:root[data-theme] .content-area .rwd-tabs .fp-tab {
  flex: 1 1 auto !important;
  padding: 6px 8px !important;
  white-space: nowrap;
}
:root[data-theme] .rwd-tab-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 2px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: #ff5a5f;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

/* Quests */
:root[data-theme] .rwd-quests {
  display: flex;
  flex-direction: column;
}
:root[data-theme] .rwd-quest {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-subtle);
}
:root[data-theme] .rwd-quest:first-child {
  padding-top: 6px;
  border-top: none;
}
:root[data-theme] .rwd-quest-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 17px;
}
:root[data-theme] .rwd-quest.is-done .rwd-quest-ico {
  background: var(--success-bg);
  color: var(--success);
}
:root[data-theme] .rwd-quest-body {
  flex: 1;
  min-width: 0;
}
:root[data-theme] .rwd-quest-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .rwd-quest.is-claimed .rwd-quest-label {
  color: var(--ink-subtle);
}
:root[data-theme] .rwd-quest-bar {
  height: 5px;
  margin-top: 7px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
:root[data-theme] .rwd-quest-bar span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent-vivid);
  transition: width var(--dur-3) var(--ease-out);
}
:root[data-theme] .rwd-quest.is-done .rwd-quest-bar span {
  background: var(--success);
}
:root[data-theme] .rwd-quest-sub {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
}
:root[data-theme] .rwd-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--coin-bg);
  color: var(--coin-ink);
  font-size: 12px;
  font-weight: 800;
}
:root[data-theme] .rwd-chip.is-claimed {
  background: var(--surface-3);
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .rwd-claim {
  flex: none;
}

/* AI-credit packs */
:root[data-theme] .rwd-packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
:root[data-theme] .rwd-pack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  border: 1.5px solid var(--line-subtle);
  border-radius: 18px;
  background: var(--surface-1);
  color: var(--ink);
  font: inherit;
}
:root[data-theme] .rwd-pack:not(:disabled):active {
  transform: scale(0.97);
}
:root[data-theme] .rwd-pack:disabled {
  opacity: 0.55;
}
:root[data-theme] .rwd-pack-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--accent);
}
:root[data-theme] .rwd-pack b {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}
:root[data-theme] .rwd-pack-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .rwd-pack-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--coin-bg);
  color: var(--coin-ink);
  font-size: 12px;
  font-weight: 800;
}

/* Points history */
:root[data-theme] .rwd-hist-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line-subtle);
}
:root[data-theme] .rwd-hist-row:first-child {
  border-top: none;
}
:root[data-theme] .rwd-hist-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--success-bg);
  color: var(--success);
  font-size: 13px;
}
:root[data-theme] .rwd-hist-ico.is-spend {
  background: var(--surface-3);
  color: var(--ink-subtle);
}
:root[data-theme] .rwd-hist-body {
  flex: 1;
  min-width: 0;
}
:root[data-theme] .rwd-hist-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
:root[data-theme] .rwd-hist-label::first-letter {
  text-transform: uppercase;
}
:root[data-theme] .rwd-hist-date {
  font-size: 11px;
  color: var(--ink-faint);
}
:root[data-theme] .rwd-hist-pts {
  font-weight: 800;
  color: var(--success);
}
:root[data-theme] .rwd-hist-pts.is-spend {
  color: var(--ink-subtle);
}

/* Leaderboard — scope switch, podium, ranked list. */
:root[data-theme] .rwd-scope {
  display: flex;
  flex-direction: row;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}
:root[data-theme] .rwd-scope-btn {
  height: 28px;
  padding: 0 12px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-subtle);
  font-size: 12px;
  font-weight: 700;
}
:root[data-theme] .rwd-scope-btn.is-on {
  background: var(--surface-1);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(28, 20, 40, 0.1);
}
:root[data-theme] .rwd-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 8px;
  margin: 26px 0 4px;
}
:root[data-theme] .rwd-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
:root[data-theme] .rwd-seat-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 3px solid #c3c7d4;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 6px 16px -8px rgba(15, 17, 19, 0.5);
}
:root[data-theme] .rwd-seat.p1 .rwd-seat-avatar {
  width: 64px;
  height: 64px;
  border-color: var(--coin);
  font-size: 19px;
}
:root[data-theme] .rwd-seat.p3 .rwd-seat-avatar {
  border-color: #e0a27a;
}
:root[data-theme] .rwd-crown {
  position: absolute;
  top: -19px;
  left: 50%;
  width: 24px;
  height: 16px;
  transform: translateX(-50%);
  fill: var(--coin);
}
:root[data-theme] .rwd-seat-place {
  position: absolute;
  right: -4px;
  bottom: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--surface-1);
  border-radius: var(--r-pill);
  background: #9aa0b4;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
:root[data-theme] .rwd-seat.p1 .rwd-seat-place { background: var(--coin); }
:root[data-theme] .rwd-seat.p3 .rwd-seat-place { background: #d0875a; }
:root[data-theme] .rwd-seat-name {
  max-width: 100%;
  margin-top: 6px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .rwd-seat.is-me .rwd-seat-name {
  color: var(--accent);
}
:root[data-theme] .rwd-seat-pts,
:root[data-theme] .rwd-rank-pts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--coin-ink);
}
:root[data-theme] .rwd-seat-block {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  padding-top: 8px;
  border-radius: 14px 14px 6px 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-vivid) 70%, #fff), color-mix(in srgb, var(--accent-vivid) 38%, #fff));
  color: rgba(255, 255, 255, 0.95);
  font-size: 24px;
  font-weight: 800;
}
:root[data-theme] .rwd-seat.p1 .rwd-seat-block {
  height: 86px;
  background: linear-gradient(180deg, var(--accent-vivid), color-mix(in srgb, var(--accent-vivid) 62%, #fff));
  font-size: 30px;
}
:root[data-theme] .rwd-seat.p2 .rwd-seat-block { height: 62px; }
:root[data-theme] .rwd-seat.p3 .rwd-seat-block { height: 46px; }
:root[data-theme] .rwd-ranks,
:root[data-theme] .rwd-friends {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
:root[data-theme] .rwd-rank,
:root[data-theme] .rwd-friend {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--surface-3);
}
:root[data-theme] .rwd-rank.is-me {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-vivid) 40%, transparent);
}
:root[data-theme] .rwd-rank-num {
  width: 22px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-subtle);
  text-align: center;
}
:root[data-theme] .rwd-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
}
:root[data-theme] .rwd-rank-body {
  flex: 1;
  min-width: 0;
}
:root[data-theme] .rwd-rank-name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .rwd-rank-sub {
  font-size: 11.5px;
  color: var(--ink-faint);
}
:root[data-theme] .rwd-you {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--accent-vivid);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  vertical-align: 2px;
}
:root[data-theme] .rwd-sublabel {
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-subtle);
}
:root[data-theme] .rwd-remove {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-faint);
}
:root[data-theme] .rwd-inline {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
:root[data-theme] .rwd-inline .form-control-custom {
  flex: 1;
  min-width: 0;
}
:root[data-theme] .rwd-hint {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ink-faint);
}

/* Invite — the referral card, stats and the three steps. */
:root[data-theme] .content-area .rwd-invite {
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% 0%, var(--accent-soft), transparent 70%),
    var(--surface-1) !important;
}
:root[data-theme] .rwd-invite-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 4px auto 12px;
  border-radius: 24px;
  background: linear-gradient(145deg, #ff7aa8, var(--coin));
  color: #fff;
  font-size: 34px;
  box-shadow: 0 12px 24px -12px rgba(245, 120, 80, 0.6);
  transform: rotate(-6deg);
}
:root[data-theme] .rwd-invite-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
}
:root[data-theme] .rwd-invite .rwd-copy {
  margin-bottom: 0;
}
:root[data-theme] .rwd-code {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 8px 8px 8px 16px;
  border: 1.5px dashed color-mix(in srgb, var(--accent-vivid) 45%, transparent);
  border-radius: 18px;
  background: var(--surface-1);
  text-align: left;
}
:root[data-theme] .rwd-code-lbl {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
}
:root[data-theme] .rwd-code b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--ink);
  text-overflow: ellipsis;
}
:root[data-theme] .rwd-code-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--accent-vivid);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
:root[data-theme] .rwd-share {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
:root[data-theme] .rwd-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  border: 1.5px solid var(--line-subtle);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
:root[data-theme] .rwd-share-btn.is-wa {
  border-color: #25d366;
  background: #25d366;
  color: #fff;
}
:root[data-theme] .rwd-code-wait {
  margin: 14px 0 0;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface-3);
  font-size: 13px;
  color: var(--ink-subtle);
}
:root[data-theme] .rwd-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
:root[data-theme] .rwd-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .rwd-stat .bi {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 16px;
}
:root[data-theme] .rwd-stat span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .rwd-stat b {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .rwd-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: rwd-step;
}
:root[data-theme] .rwd-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 40px;
  counter-increment: rwd-step;
}
:root[data-theme] .rwd-steps li::before {
  content: counter(rwd-step);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
}
:root[data-theme] .rwd-steps b {
  font-size: 14px;
  color: var(--ink);
}
:root[data-theme] .rwd-steps span {
  font-size: 12.5px;
  color: var(--ink-subtle);
}

/* Badge wall */
:root[data-theme] .rwd-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
:root[data-theme] .rwd-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 6px 12px;
  border-radius: 18px;
  background: var(--surface-3);
  text-align: center;
}
:root[data-theme] .rwd-badge.is-got {
  background: var(--accent-soft);
}
:root[data-theme] .rwd-badge-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--ink-faint);
  font-size: 22px;
}
:root[data-theme] .rwd-badge.is-got .rwd-badge-art {
  background: linear-gradient(145deg, var(--accent-vivid), color-mix(in srgb, var(--accent-vivid) 55%, #fff));
  color: #fff;
  box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--accent-vivid) 80%, transparent);
}
:root[data-theme] .rwd-badge-lock {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--surface-3);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--ink-subtle);
  font-size: 9px;
}
:root[data-theme] .rwd-badge-name {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}
:root[data-theme] .rwd-badge-desc {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--ink-subtle);
}
:root[data-theme] .rwd-badge-pts {
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--coin-ink);
}
:root[data-theme] .rwd-badge.is-got .rwd-badge-pts {
  color: var(--accent);
}

/* Level path — rows in the sheet, a medal per tier. */
:root[data-theme] .lv-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
:root[data-theme] .lv-rung {
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--surface-3);
}
:root[data-theme] .lv-rung.is-current {
  background: var(--surface-1);
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--accent-vivid) 45%, transparent),
    0 8px 20px -14px var(--accent-vivid);
}
:root[data-theme] .lv-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
:root[data-theme] .lv-medal {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #fff;
  font-size: 20px;
}
:root[data-theme] .tier-bronze .lv-medal { background: linear-gradient(145deg, #e8b08a, #b86b3f); }
:root[data-theme] .tier-silver .lv-medal { background: linear-gradient(145deg, #dfe3ec, #979fb4); }
:root[data-theme] .tier-gold .lv-medal { background: linear-gradient(145deg, #ffd86b, #dc9b0e); }
:root[data-theme] .tier-platinum .lv-medal { background: linear-gradient(145deg, #a8dcff, #5c7cfa); }
/* Locked rungs keep their tier's colour, faded — the path still reads as
   bronze → silver → gold → platinum ahead of you. */
:root[data-theme] .lv-rung.is-locked .lv-medal {
  opacity: 0.4;
}
:root[data-theme] .lv-body {
  flex: 1;
  min-width: 0;
}
:root[data-theme] .lv-name {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .lv-name small {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-faint);
}
:root[data-theme] .lv-sub {
  font-size: 12px;
  color: var(--ink-subtle);
}
:root[data-theme] .lv-state {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 800;
}
:root[data-theme] .lv-state-current { background: var(--accent-soft); color: var(--accent); }
:root[data-theme] .lv-state-done { background: var(--success-bg); color: var(--success); }
:root[data-theme] .lv-state-locked { background: var(--surface-1); color: var(--ink-faint); }
:root[data-theme] .lv-track {
  height: 6px;
  margin-top: 10px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
:root[data-theme] .lv-track span {
  display: block;
  min-width: 6px;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent-vivid), var(--coin));
}
:root[data-theme] .lv-foot {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--ink-subtle);
  text-align: center;
}

/* Reward reveal — full screen, light rays turning behind the card. */
:root[data-theme] .rv-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, var(--brand-mint) 45%, #d4efd9 100%);
  animation: rv-in 0.28s ease-out;
}
:root[data-theme="dark"] .rv-screen {
  background: radial-gradient(circle at 50% 42%, #1c3a25 0%, #0f1f15 70%, #070d09 100%);
}
:root[data-theme] .rv-rays {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 180vmax;
  height: 180vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--accent-vivid) 18%, transparent) 0deg 9deg,
    transparent 9deg 22.5deg
  );
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 55%);
  mask-image: radial-gradient(circle, #000 0%, transparent 55%);
  animation: rv-spin 40s linear infinite;
}
:root[data-theme] .rv-stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
:root[data-theme] .rv-card {
  width: min(260px, 72vw);
  padding: 3px;
  border-radius: 24px;
  background: linear-gradient(135deg, #ff7aa8, var(--coin));
  box-shadow: 0 24px 50px -20px rgba(245, 120, 80, 0.55);
  animation: rv-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) 0.08s both;
}
:root[data-theme] .rv-card-head {
  padding: 7px 0 9px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
:root[data-theme] .rv-card-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 16px;
  border-radius: 21px;
  background: #fff;
}
:root[data-theme] .rv-card-body .bi-coin {
  font-size: 38px;
  color: var(--coin);
}
:root[data-theme] .rv-points {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: #1d1530;
}
:root[data-theme] .rv-title {
  margin-top: 20px;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .rv-note {
  font-size: 14px;
  color: var(--ink-subtle);
}
:root[data-theme] .rv-done {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 52px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--mbn-disc);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
@keyframes rv-in { from { opacity: 0; } }
@keyframes rv-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes rv-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .rv-rays,
  :root[data-theme] .rv-card,
  :root[data-theme] .rwd-chest.is-ready .rwd-day.is-gift .rwd-day-dot {
    animation: none;
  }
}

/* ═══════════════ 6b · STREAK — Rewarzo's Daily Streak ═══════════════ */

/* The flame leads: centred, warm, glowing over a faint grid. */
:root[data-theme] .stk-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 18px 18px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(60% 45% at 50% 22%, color-mix(in srgb, var(--accent-vivid) 18%, transparent), transparent 70%),
    linear-gradient(var(--line-subtle) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, var(--line-subtle) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--surface-1);
  box-shadow: var(--shadow-card);
  text-align: center;
}
:root[data-theme] .stk-flame {
  position: relative;
  line-height: 1;
}
:root[data-theme] .stk-flame img {
  display: block;
  width: 132px;
  height: 132px;
  filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--accent-vivid) 35%, transparent));
  animation: stk-flicker 3.2s ease-in-out infinite;
  transform-origin: 50% 90%;
}
/* A streak that has gone out: the flame is still there, just no longer lit. */
:root[data-theme] .stk-hero.is-cold .stk-flame img {
  filter: grayscale(1) opacity(0.45);
  animation: none;
}
:root[data-theme] .stk-num {
  margin-top: 2px;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--ink);
}
:root[data-theme] .stk-lbl {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-subtle);
}
:root[data-theme] .stk-note {
  max-width: 280px;
  margin: 8px 0 18px;
  font-size: 13px;
  color: var(--ink-subtle);
}
:root[data-theme] .stk-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  width: 100%;
}
:root[data-theme] .stk-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
:root[data-theme] .stk-day-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: #fff;
  font-size: 16px;
}
:root[data-theme] .stk-day-dot .is-ghost {
  color: var(--ink-faint);
  opacity: 0.5;
}
:root[data-theme] .stk-day.is-active .stk-day-dot {
  background: var(--accent-vivid);
  box-shadow: 0 6px 12px -6px var(--accent-vivid);
}
:root[data-theme] .stk-day.is-today:not(.is-active) .stk-day-dot {
  background: var(--surface-1);
  box-shadow: inset 0 0 0 2px var(--accent-vivid);
}
:root[data-theme] .stk-day.is-future .stk-day-dot {
  opacity: 0.55;
}
:root[data-theme] .stk-day-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-faint);
}
:root[data-theme] .stk-day.is-active .stk-day-lbl,
:root[data-theme] .stk-day.is-today .stk-day-lbl {
  color: var(--ink-subtle);
}
:root[data-theme] .stk-treasure {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-subtle);
  font-size: 12.5px;
  font-weight: 700;
}
:root[data-theme] .stk-treasure .bi {
  color: var(--coin);
}
:root[data-theme] .stk-treasure.is-open {
  background: var(--coin-bg);
  color: var(--coin-ink);
}
@keyframes stk-flicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.04, 0.98) rotate(-1.5deg); }
  60% { transform: scale(0.98, 1.03) rotate(1.5deg); }
}

/* Card heads */
:root[data-theme] .stk-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
:root[data-theme] .stk-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink);
}
:root[data-theme] .stk-head-note {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-subtle);
}

/* Your statistics — three figures split by hairlines. */
:root[data-theme] .stk-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
:root[data-theme] .stk-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  text-align: center;
}
:root[data-theme] .stk-stat + .stk-stat {
  border-left: 1px solid var(--line-subtle);
}
:root[data-theme] .stk-stat .bi {
  margin-bottom: 4px;
  font-size: 20px;
}
:root[data-theme] .stk-stat .t-gold { color: var(--coin); }
:root[data-theme] .stk-stat .t-violet { color: var(--accent-vivid); }
:root[data-theme] .stk-stat .t-orange { color: #ff8a3d; }
:root[data-theme] .stk-stat b {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .stk-stat span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-subtle);
}

/* The month */
:root[data-theme] .stk .cal-head {
  margin-bottom: 12px;
}
:root[data-theme] .stk-month {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
/* One paragraph, with the icon hanging in a gutter to its left.
   Not a flex row: in a flex container every loose run of text and the
   <strong> inside it become separate items, so "Tap a day" was being laid out
   as its own narrow column between two others. As a block, the sentence
   flows as a sentence and the bold words stay inline. */
:root[data-theme] .stk-hint {
  position: relative;
  display: block;
  margin: 14px 0 0;
  padding-left: 20px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-subtle);
}
:root[data-theme] .stk-hint .bi {
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--accent);
}

/* Milestones as claim tiles — earned, the one to aim for, locked. One row
   that scrolls sideways (ten tiles never divide into a tidy grid), bleeding
   to the card's edges and opening on the tile you're working toward. */
:root[data-theme] .stk-miles {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin: 0 -16px;
  padding: 0 16px 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  scrollbar-width: none;
}
:root[data-theme] .stk-miles::-webkit-scrollbar {
  display: none;
}
:root[data-theme] .stk-mile {
  flex: 0 0 96px;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding-top: 10px;
  border-radius: 18px;
  background: var(--surface-3);
}
:root[data-theme] .stk-mile-bonus {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--coin-bg);
  color: var(--coin-ink);
  font-size: 11px;
  font-weight: 800;
}
:root[data-theme] .stk-mile-days {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
:root[data-theme] .stk-mile-unit {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-faint);
}
:root[data-theme] .stk-mile-track {
  width: calc(100% - 24px);
  height: 5px;
  margin-top: 8px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent-vivid) 16%, transparent);
  overflow: hidden;
}
:root[data-theme] .stk-mile-track span {
  display: block;
  min-width: 5px;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent-vivid);
}
:root[data-theme] .stk-mile-foot {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin-top: 10px;
  padding: 7px 0;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink-subtle);
  font-size: 12px;
  font-weight: 800;
}
:root[data-theme] .stk-mile.is-done {
  background: var(--success-bg);
}
:root[data-theme] .stk-mile.is-done .stk-mile-foot {
  background: var(--success);
  color: #fff;
}
:root[data-theme] .stk-mile.is-next {
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-vivid) 50%, transparent);
}
:root[data-theme] .stk-mile.is-next .stk-mile-foot {
  background: var(--accent-vivid);
  color: #fff;
}
:root[data-theme] .stk-mile.is-locked .stk-mile-days,
:root[data-theme] .stk-mile.is-locked .stk-mile-bonus {
  opacity: 0.6;
}

/* Personal bests */
:root[data-theme] .stk-bests {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
:root[data-theme] .stk-best {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface-3);
}
:root[data-theme] .stk-best .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--accent);
  font-size: 15px;
}
:root[data-theme] .stk-best b {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .stk-best span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .stk-best small {
  font-size: 11px;
  color: var(--ink-faint);
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .stk-flame img {
    animation: none;
  }
}

/* ═══════════════ 7 · PROFILE ═══════════════ */
:root[data-theme] .content-area .profile-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-4);
}
:root[data-theme] .content-area .profile-head-av {
  position: relative;
  flex: none;
  width: 68px;
  height: 68px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--accent-vivid);
  text-decoration: none;
}
:root[data-theme] .content-area .profile-head-av img,
:root[data-theme] .content-area .profile-head-initials {
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  object-fit: cover;
  background: var(--surface-1);
  color: var(--hdr-plum);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-title3);
  font-weight: 800;
}
:root[data-theme] .content-area .profile-head-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
:root[data-theme] .content-area .profile-head-main {
  flex: 1;
  min-width: 0;
}
:root[data-theme] .content-area .profile-head-name {
  font-size: var(--t-title3);
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--hdr-plum);
  line-height: 1.2;
}
:root[data-theme] .content-area .profile-head-email {
  font-size: var(--t-xs);
  color: var(--ink-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .content-area .profile-head-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
:root[data-theme] .content-area .profile-chip {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-subtle);
  font-size: 11px;
  font-weight: 600;
}
:root[data-theme] .content-area .profile-chip.is-premium {
  background: color-mix(in srgb, #f5c518 22%, var(--surface-1));
  color: #9a7300;
}
:root[data-theme] .content-area .profile-chip.is-ok {
  background: var(--success-bg);
  color: var(--success-ink);
}
:root[data-theme] .content-area .profile-chip.is-warn {
  background: var(--warning-bg);
  color: var(--warning-ink);
}

/* Selected goal pill — accent-tinted, so the current choice is obvious. */
:root[data-theme] .content-area .fp-pill.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1.5px var(--accent-vivid) !important;
}

/* ═══════════════ 8 · PREMIUM ═══════════════
   The plans, what they buy, and the questions everyone asks before paying.
   Gold appears once — on the saving badge — so it reads as a deal rather than
   as a second brand colour. */
:root[data-theme] .prem {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
  margin-inline: auto;
}

/* ── Hero ── */
:root[data-theme] .content-area .prem-hero {
  position: relative;
  overflow: hidden;
  padding: 22px 20px 20px;
  border-radius: 26px;
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--accent-vivid) 26%, transparent), transparent 70%),
    var(--surface-1);
  box-shadow: var(--shadow-card);
  text-align: center;
}
:root[data-theme] .prem-hero-art img {
  display: block;
  width: min(150px, 44vw);
  margin: 0 auto;
}
:root[data-theme] .prem-title {
  margin: 8px 0 0;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--ink);
}
:root[data-theme] .prem-sub {
  max-width: 300px;
  margin: 7px auto 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-subtle);
}
:root[data-theme] .prem-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-subtle);
  font-size: 12.5px;
  font-weight: 700;
}
:root[data-theme] .prem-chip.is-on {
  background: color-mix(in srgb, var(--accent-vivid) 14%, transparent);
  color: var(--accent);
}
:root[data-theme] .prem-chip.is-off {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

/* ── The plans ── */
:root[data-theme] .prem-plans {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
:root[data-theme] .prem-plan {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 20px 12px 16px;
  border: 2px solid var(--line-subtle);
  border-radius: 22px;
  background: var(--surface-1);
  text-align: center;
}
:root[data-theme] .prem-plan.is-on {
  border-color: var(--accent-vivid);
  background: color-mix(in srgb, var(--accent-vivid) 6%, var(--surface-1));
  box-shadow: 0 10px 24px -16px var(--accent-vivid);
}
:root[data-theme] .prem-save {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(145deg, #fbe08a, #f5c518 55%, #e0ab00);
  color: #4a3600;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
:root[data-theme] .prem-plan-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-subtle);
}
:root[data-theme] .prem-plan-price b {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--ink);
}
:root[data-theme] .prem-plan.is-on .prem-plan-price b {
  color: var(--accent);
}
:root[data-theme] .prem-plan-per {
  font-size: 12px;
  color: var(--ink-faint);
}
:root[data-theme] .prem-plan-note {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-faint);
}

/* ── The action ── */
:root[data-theme] .prem-act {
  display: flex;
  flex-direction: column;
  align-items: center;
}
:root[data-theme] .prem-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 54px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--mbn-disc);
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
}
:root[data-theme] .prem-cta:disabled {
  opacity: 0.7;
}
:root[data-theme] .prem-cta.is-done {
  background: var(--surface-3);
  color: var(--ink-subtle);
}
:root[data-theme] .prem-fine {
  max-width: 330px;
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-faint);
}

/* ── Cards ── */
:root[data-theme] .prem-card {
  padding: 16px 16px 14px;
  border-radius: 22px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .prem-h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
}
:root[data-theme] .prem-perk {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
}
:root[data-theme] .content-area .prem-perk-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-vivid) 12%, transparent) !important;
  color: var(--accent) !important;
  font-size: 17px;
}
:root[data-theme] .prem-perk-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
:root[data-theme] .prem-perk-text b {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .prem-perk-text span {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-subtle);
}

/* ── Free vs Premium ── */
:root[data-theme] .prem-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
:root[data-theme] .prem-table th,
:root[data-theme] .prem-table td {
  padding: 9px 6px;
  border-bottom: 1px solid var(--line-subtle);
  text-align: center;
  color: var(--ink-subtle);
  font-weight: 600;
}
:root[data-theme] .prem-table thead th {
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
:root[data-theme] .prem-table tbody th[scope='row'] {
  text-align: left;
  color: var(--ink);
  font-weight: 600;
}
:root[data-theme] .prem-table td.is-pro {
  color: var(--accent);
  font-weight: 700;
}
:root[data-theme] .prem-table .bi-check-lg {
  color: var(--accent);
  font-size: 15px;
}
:root[data-theme] .prem-table .bi-dash {
  color: var(--ink-faint);
}
:root[data-theme] .prem-table tbody tr:last-child th,
:root[data-theme] .prem-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Questions ── */
:root[data-theme] .prem-faq {
  border-bottom: 1px solid var(--line-subtle);
}
:root[data-theme] .prem-faq:last-child {
  border-bottom: none;
}
:root[data-theme] .prem-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 0;
  border: none;
  background: none;
  text-align: left;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .prem-faq-q .bi {
  flex: none;
  color: var(--ink-faint);
  transition: transform var(--dur-2) var(--ease-out);
}
:root[data-theme] .prem-faq.is-open .prem-faq-q .bi {
  transform: rotate(180deg);
}
:root[data-theme] .prem-faq-a {
  margin: -2px 0 12px;
  padding-right: 26px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-subtle);
}

/* ═══════════════ AUTH — sign in, sign up, password reset ═══════════════
   One app screen, never a scrolling page: Shelly's hero on top, the sign-in
   sheet below it, all inside 100dvh. On a wide screen the same screen sits in
   a phone-shaped frame, so it reads as an app rather than a website.

   Nothing moves when you switch tabs: the hero and the sheet's header live in
   the layout, the sheet always fills the rest of the screen, and the main
   button is pinned to its foot — only the fields between them change. */

:root[data-theme] body.auth-body {
  overflow: hidden;
  overscroll-behavior: none;
}
:root[data-theme] .auth-wrapper {
  display: flex;
  flex-direction: column;
  /* An older sheet centres this box's contents, which shrinks the screen to
     its content width on a phone. Full width here; only the wide-screen
     frame below centres it. */
  align-items: stretch;
  justify-content: flex-start;
  /* Same as .ob — the one full-screen box every mobile browser agrees on. */
  position: fixed;
  inset: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--canvas);
}
:root[data-theme] .auth-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 12% 0%, color-mix(in srgb, var(--accent-vivid) 30%, var(--surface-1)) 0%, transparent 62%),
    radial-gradient(80% 55% at 100% 8%, color-mix(in srgb, var(--brand-lime) 22%, var(--surface-1)) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent-vivid) 12%, var(--surface-1)) 0%, var(--canvas) 55%);
}

/* ── Hero ── */
/* Installed on a phone there is no browser chrome, so this band starts at the
   very top of the screen — under the clock and the notch. It gains the status
   bar's depth rather than losing it out of its own height, which is what left
   Shelly squashed into the title in the installed app. */
:root[data-theme] .auth-side {
  position: relative;
  flex: none;
  height: calc(clamp(176px, 28dvh, 244px) + var(--sa-top, 0px));
  padding: max(14px, var(--sa-top, 0px)) 20px 0;
}
:root[data-theme] .auth-wrapper .auth-brand {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
}
:root[data-theme] .auth-wrapper .auth-brand img {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(15, 17, 19, 0.15);
}
:root[data-theme] .auth-wrapper .auth-brand span {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--hdr-plum);
}
:root[data-theme] .auth-hero {
  position: absolute;
  /* Absolute offsets start at the padding box — above the padding — so this
     has to repeat the inset or it lands on top of the brand row. */
  top: calc(max(14px, var(--sa-top, 0px)) + 30px);
  bottom: 18px;
  left: 0;
  right: 0;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
}
:root[data-theme] .auth-shelly-box {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 150px;
  height: 100%;
  max-height: 180px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
:root[data-theme] .auth-shelly {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transform-origin: bottom center;
  filter: drop-shadow(0 14px 18px rgba(15, 17, 19, 0.16));
  animation: authFade 0.35s ease both, authBob 5s var(--ease-in-out) 0.35s infinite;
}
:root[data-theme] .auth-bubble {
  --c: var(--accent-vivid);
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-1) 62%, transparent);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--surface-1) 80%, transparent);
  color: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 6px 16px -8px rgba(15, 17, 19, 0.28);
  animation: authFloat 6s var(--ease-in-out) infinite;
}
:root[data-theme] .auth-bubble.tone-pink { --c: #f0467a; }
:root[data-theme] .auth-bubble.tone-blue { --c: #3b82f6; }
:root[data-theme] .auth-bubble.tone-yellow { --c: #d99a00; }
:root[data-theme] .auth-bubble.tone-violet { --c: #7264e4; }
:root[data-theme] .auth-bubble.tone-amber { --c: #d97706; }
:root[data-theme] .auth-bubble.tone-flame { --c: #ea580c; }
:root[data-theme] .auth-bubble.tone-green { --c: var(--brand-green); }
:root[data-theme] .auth-bubble.tone-lime { --c: #65a30d; }
:root[data-theme] .auth-bubble.b1 { top: 6%; left: 6%; animation-delay: 0s; }
:root[data-theme] .auth-bubble.b2 { top: 1%; right: 9%; animation-delay: -1.5s; }
:root[data-theme] .auth-bubble.b3 { top: 27%; left: 0; animation-delay: -3s; }
:root[data-theme] .auth-bubble.b4 { top: 23%; right: 0; animation-delay: -4.5s; }
:root[data-theme] .auth-bubble.b5 { top: 50%; left: 1%; animation-delay: -0.8s; }
:root[data-theme] .auth-bubble.b6 { top: 47%; right: 1%; animation-delay: -2.3s; }
:root[data-theme] .auth-bubble.b7 { top: 72%; left: 9%; animation-delay: -3.8s; }
:root[data-theme] .auth-bubble.b8 { top: 75%; right: 7%; animation-delay: -5.2s; }

/* Only the first four fit beside a hero that is a band across the top of the
   screen; the rest appear where there is height to hold them — the welcome
   screen, and the picture panel on a desktop. */
:root[data-theme] .auth-bubble.b5,
:root[data-theme] .auth-bubble.b6,
:root[data-theme] .auth-bubble.b7,
:root[data-theme] .auth-bubble.b8 {
  display: none;
}
:root[data-theme] .auth-wrapper:has(.auth-choice) .auth-bubble,
:root[data-theme] .auth-side .auth-showcase ~ * .auth-bubble {
  display: flex;
}

@keyframes authFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes authBob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-4px) rotate(1.2deg); }
}
@keyframes authFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .auth-bubble,
  :root[data-theme] .auth-shelly,
  :root[data-theme] .auth-form > .card-section,
  :root[data-theme] .auth-tabs-thumb {
    animation: none;
    transition: none;
  }
}

/* ── Sheet ── */
:root[data-theme] .auth-wrapper .auth-card {
  position: relative;
  z-index: 3;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  margin: -16px 0 0;
  padding: 24px 22px max(18px, env(safe-area-inset-bottom));
  border: none;
  border-radius: 30px 30px 0 0;
  background: var(--surface-1);
  box-shadow: 0 -16px 40px -24px rgba(15, 17, 19, 0.35);
}
:root[data-theme] .auth-wrapper .auth-card > * {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}
:root[data-theme] .auth-head {
  position: relative;
  flex: none;
  text-align: center;
}

/* The way back, in the sheet's top-left corner.
   Absolute rather than in flow: the title stays optically centred in the
   sheet, which it would not be if a 40px button pushed it along. */
:root[data-theme] .auth-back {
  position: absolute;
  top: -4px;
  left: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
  font-size: 19px;
  text-decoration: none;
  transition: background 140ms var(--ease-out);
}
:root[data-theme] .auth-back:hover {
  background: color-mix(in srgb, var(--ink) 11%, transparent);
  color: var(--ink);
}
/* The title clears the button rather than running under it. */
:root[data-theme] .auth-head:has(.auth-back) .auth-title {
  padding: 0 46px;
}
:root[data-theme] .auth-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.15;
  color: var(--hdr-plum);
}
/* One line, fixed height — so a longer subtitle can't push the sheet down. */
:root[data-theme] .auth-sub {
  height: 20px;
  margin: 5px 0 0;
  max-width: none;
  font-size: var(--t-sm);
  line-height: 20px;
  color: var(--ink-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Register | Log In — a white thumb that slides, iOS-style. */
:root[data-theme] .auth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 18px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}
:root[data-theme] .auth-tabs-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px -4px rgba(15, 17, 19, 0.22);
  transition: transform 0.32s cubic-bezier(0.3, 0.7, 0.2, 1);
}
:root[data-theme] .auth-tabs.is-login .auth-tabs-thumb {
  transform: translateX(100%);
}
:root[data-theme] .auth-tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-height: 0;
  border-radius: var(--r-pill);
  background: none;
  box-shadow: none;
  color: var(--ink-subtle);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s ease;
}
:root[data-theme] .auth-tab.is-on {
  background: none;
  box-shadow: none;
  color: var(--accent);
  font-weight: 700;
}

/* The fields: fill the rest of the sheet; scroll inside it only if a very
   short screen really can't fit them. */
:root[data-theme] .auth-form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* The scroll box clips whatever spills past it — the button's shadow and a
     field's focus ring. Padding gives them room; the matching negative margin
     keeps every field and the button exactly where they were. */
  margin: 14px -6px -14px;
  padding: 4px 6px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
:root[data-theme] .auth-form::-webkit-scrollbar {
  display: none;
}
:root[data-theme] .auth-form > .card-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  animation: authFade 0.28s ease both;
}
:root[data-theme] .auth-form form {
  flex: 1;
  display: flex;
  flex-direction: column;
}
:root[data-theme] .auth-form form > .mb-3 {
  margin-bottom: 12px !important;
}
:root[data-theme] .auth-wrapper .form-label-custom {
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
}
:root[data-theme] .auth-wrapper .form-control-custom {
  height: 46px;
  min-height: 0;
  padding: 0 16px;
  border-radius: 14px;
  background: var(--surface-3);
  border: 1.5px solid transparent;
  font-size: 15px;
  box-shadow: none;
}
:root[data-theme] .auth-wrapper .form-control-custom::placeholder {
  color: var(--ink-faint);
}
:root[data-theme] .auth-wrapper .form-control-custom:focus {
  background: var(--surface-1);
  border-color: var(--accent-vivid);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-vivid) 14%, transparent);
}
:root[data-theme] .auth-wrapper .pw-wrap .form-control-custom {
  padding-right: 44px;
}
:root[data-theme] .auth-wrapper .pw-wrap .pw-toggle {
  right: 8px;
}
:root[data-theme] .auth-forgot {
  text-align: right;
}
:root[data-theme] .auth-forgot a {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

/* The main action, pinned to the foot of the sheet — the same spot on
   every tab. Slim, not a slab. */
:root[data-theme] .auth-wrapper .auth-submit {
  flex: none;
  height: 46px;
  min-height: 0;
  margin-top: auto !important;
  padding: 0 20px;
  border: none;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--accent-vivid), var(--accent));
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1px;
  box-shadow:
    0 10px 22px -12px color-mix(in srgb, var(--accent-vivid) 85%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
:root[data-theme] .auth-wrapper .auth-footer-link {
  flex: none;
  margin: 14px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-subtle);
}
:root[data-theme] .auth-wrapper .auth-footer-link a {
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

/* The password checklist folds into two tidy columns, so opening it doesn't
   push the button off a phone screen. */
:root[data-theme] .auth-form .pw-rules {
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  padding: 0 2px;
  background: none;
}
:root[data-theme] .auth-form .pw-rules.is-open {
  max-height: 56px;
  margin: 8px 0 0;
  padding: 0 2px;
}
:root[data-theme] .auth-form .pw-rules-title {
  display: none;
}
:root[data-theme] .auth-form .pw-rule {
  gap: 5px;
  font-size: 12px;
}
:root[data-theme] .auth-form .pw-rule.ok,
:root[data-theme] .auth-form .pw-rule.ok i,
:root[data-theme] .auth-form .pw-match-msg.ok {
  color: var(--success);
}
:root[data-theme] .auth-form .pw-match-msg {
  margin-top: 6px;
  font-size: 12px;
}

/* ── Short phones (iPhone SE and similar): a smaller hero and tighter
   spacing, so the full Register form and its button still fit on one
   screen without scrolling. ── */
@media (max-width: 599px) and (max-height: 740px) {
  :root[data-theme] .auth-side {
    height: calc(146px + var(--sa-top, 0px));
  }
  :root[data-theme] .auth-hero {
    top: calc(max(14px, var(--sa-top, 0px)) + 26px);
    bottom: 16px;
  }
  :root[data-theme] .auth-shelly-box {
    width: 104px;
  }
  :root[data-theme] .auth-bubble {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  :root[data-theme] .auth-wrapper .auth-card {
    padding-top: 20px;
  }
  :root[data-theme] .auth-title {
    font-size: 23px;
  }
  :root[data-theme] .auth-tabs,
  :root[data-theme] .auth-form {
    margin-top: 14px;
  }
  :root[data-theme] .auth-tab {
    height: 36px;
  }
  :root[data-theme] .auth-form form > .mb-3 {
    margin-bottom: 9px !important;
  }
  :root[data-theme] .auth-wrapper .form-label-custom {
    margin-bottom: 4px;
  }
  :root[data-theme] .auth-wrapper .form-control-custom {
    height: 44px;
  }
  :root[data-theme] .auth-wrapper .auth-submit {
    height: 44px;
  }
}

/* ── Wide screens: the same app screen, in a phone-shaped frame ── */
@media (min-width: 600px) {
  :root[data-theme] .auth-wrapper {
    align-items: center;
    justify-content: center;
    padding: 28px;
    background:
      radial-gradient(40% 50% at 20% 20%, color-mix(in srgb, var(--accent-vivid) 16%, transparent) 0%, transparent 70%),
      radial-gradient(35% 45% at 85% 80%, color-mix(in srgb, var(--brand-lime) 12%, transparent) 0%, transparent 70%),
      var(--canvas);
  }
  :root[data-theme] .auth-stage {
    flex: none;
    width: 400px;
    height: min(820px, calc(100dvh - 56px));
    border-radius: 40px;
    box-shadow:
      0 40px 80px -32px rgba(15, 17, 19, 0.42),
      0 0 0 1px rgba(15, 17, 19, 0.06);
  }
}

/* ═══════════════ ONBOARDING — Shelly's chat ═══════════════ */
/* The mascot is a full-body illustration: contain it on a tinted disc rather
   than cropping it like a photo. */
:root[data-theme] .chat-head .chat-head-av {
  padding: 3px;
  object-fit: contain;
  background: var(--accent-soft);
  border: none;
}

/* ═══════════════ ADMIN ═══════════════ */
:root[data-theme] .content-area .admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}
:root[data-theme] .content-area .admin-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .content-area .admin-stat i {
  color: var(--accent);
  font-size: var(--t-sm);
}
:root[data-theme] .content-area .admin-stat b {
  font-family: var(--font-mono);
  font-size: var(--t-headline);
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .content-area .admin-stat span {
  font-size: 11px;
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .admin-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
:root[data-theme] .content-area .admin-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
:root[data-theme] .content-area .admin-card-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
}
:root[data-theme] .content-area .admin-card-av {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
:root[data-theme] .content-area .admin-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
:root[data-theme] .content-area .admin-card-main b {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .content-area .admin-card-main span {
  font-size: var(--t-2xs);
  color: var(--ink-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .content-area .admin-card-id {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--ink-faint);
}
:root[data-theme] .content-area .admin-card-badges {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}
:root[data-theme] .content-area .admin-card-meta {
  font-size: var(--t-2xs);
  color: var(--ink-subtle);
}
:root[data-theme] .content-area .admin-card-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-subtle);
}

/* ═══════════════ 9 · AVATAR — see "AVATAR BUILDER" at the end ═══════════════ */

/* ═══════════════ 10 · DISCOVER ═══════════════ */
:root[data-theme] .content-area .howto-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
:root[data-theme] .content-area .howto-steps li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-3);
}
:root[data-theme] .content-area .howto-num {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
}
:root[data-theme] .content-area .howto-steps b {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}
:root[data-theme] .content-area .howto-steps span:not(.howto-num) {
  display: block;
  margin-top: 1px;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--ink-subtle);
}
/* The usage counter sits in the page column, not flush under the header. */
:root[data-theme] .topbar-usage-bar {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 6px;
  padding: 10px var(--sp-4) 0;
  background: none;
  border: none;
}
:root[data-theme] .topbar-usage-bar .api-usage-badge {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

/* ── Desktop ──────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  :root[data-theme] .dash-v2 {
    max-width: 768px;
    margin-inline: auto;
  }
  :root[data-theme] .content-area .nutrient-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  :root[data-theme] .content-area .card-section {
    padding: var(--sp-5);
  }
}

/* ═══════════════ DAILY LOG — references #6 (the day) and #13 (weigh-in) ═══════════════ */

/* Logged days carry a green ring on the date strip, so gaps show at a glance. */
:root[data-theme] .date-chip.is-marked:not(.is-active) {
  box-shadow: inset 0 0 0 1.5px var(--success);
}
:root[data-theme] .date-chip.is-marked:not(.is-active) .date-chip-day {
  color: var(--success);
}

:root[data-theme] .log-section-title {
  margin: 4px 2px 0;
  font-size: var(--t-title3);
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--hdr-plum);
}
:root[data-theme] .log-meals,
:root[data-theme] .meal-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ── Meal cards ── */
:root[data-theme] .meal-card {
  --c: #ff8a3d;
  padding: 14px;
  border-radius: 22px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
/* One tint per meal, following the day: sunrise, midday, afternoon, evening. */
:root[data-theme] .meal-card.tone-breakfast,
:root[data-theme] .afs-hero-art.tone-breakfast { --c: #ff9f2e; }
:root[data-theme] .meal-card.tone-lunch,
:root[data-theme] .afs-hero-art.tone-lunch { --c: #2fb35a; }
:root[data-theme] .meal-card.tone-tea,
:root[data-theme] .afs-hero-art.tone-tea { --c: #c9782f; }
:root[data-theme] .meal-card.tone-dinner,
:root[data-theme] .afs-hero-art.tone-dinner { --c: #5b6ad0; }
:root[data-theme] .meal-card.tone-snack,
:root[data-theme] .afs-hero-art.tone-snack { --c: #e0568c; }
/* The slots the log used to keep. */
:root[data-theme] .meal-card.tone-bar,
:root[data-theme] .afs-hero-art.tone-bar { --c: #af52de; }
:root[data-theme] .meal-card.tone-drink,
:root[data-theme] .afs-hero-art.tone-drink { --c: #2d9fd8; }
:root[data-theme] .meal-card-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
}
:root[data-theme] .meal-card-art {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--c) 16%, var(--surface-1));
  color: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
:root[data-theme] .meal-card-titles {
  flex: 1;
  min-width: 0;
}
:root[data-theme] .meal-card-title {
  margin: 0;
  font-size: var(--t-callout);
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .meal-card-sub {
  margin: 1px 0 0;
  font-size: var(--t-2xs);
  color: var(--ink-subtle);
}
:root[data-theme] .meal-card-add {
  flex: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--t-xs);
  font-weight: 700;
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--accent-vivid) 80%, transparent);
  transition: transform var(--dur-1) var(--ease-out);
}
:root[data-theme] .meal-card-add:active {
  transform: scale(0.95);
}
:root[data-theme] .meal-card-items {
  margin-top: var(--sp-3);
  padding-top: 4px;
  border-top: 1px solid var(--line-subtle);
}
:root[data-theme] .meal-card-items .food-entry {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid var(--line-subtle);
  background: none;
}
:root[data-theme] .meal-card-items > div:last-child .food-entry {
  border-bottom: none;
}
/* The entry's illustration, the same one the food shows in My Foods. */
:root[data-theme] .meal-card-items .fe-art {
  --fi-size: 34px;
  flex: none;
  margin-right: 2px;
}
:root[data-theme] .meal-card-items .fe-info {
  flex: 1;
  min-width: 0;
}
:root[data-theme] .meal-card-items .fe-name {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .meal-card-items .fe-macros {
  font-size: 11.5px;
  color: var(--ink-subtle);
}
:root[data-theme] .fe-kcal {
  flex: none;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .meal-card-items .fe-actions {
  flex: none;
  display: flex;
  flex-direction: row;
  gap: 2px;
}
:root[data-theme] .fe-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
:root[data-theme] .fe-btn:hover {
  background: var(--surface-3);
  color: var(--ink);
}
:root[data-theme] .fe-btn.is-danger:hover {
  color: var(--danger);
}

/* ── Weigh-in, water, steps ── */
:root[data-theme] .content-area .log-metrics {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
:root[data-theme] .log-card-head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}
:root[data-theme] .log-card-title {
  margin: 0;
  font-size: var(--t-headline);
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .log-card-sub {
  margin: 1px 0 0;
  font-size: var(--t-2xs);
  color: var(--ink-subtle);
}
:root[data-theme] .log-head-link {
  flex: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--t-2xs);
  font-weight: 700;
  text-decoration: none;
}
:root[data-theme] .log-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
:root[data-theme] .log-slot {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1.5px solid transparent;
  border-radius: 16px;
  background: var(--surface-3);
  color: var(--ink-subtle);
  text-align: left;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
:root[data-theme] .log-slot i {
  grid-row: 1 / 3;
  font-size: 18px;
}
:root[data-theme] .log-slot-name {
  font-size: 11.5px;
  font-weight: 600;
}
:root[data-theme] .log-slot-val {
  font-size: var(--t-callout);
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .log-slot.is-on {
  background: var(--accent-soft);
  border-color: var(--accent-vivid);
  color: var(--accent);
}

/* The ruler */
:root[data-theme] .ruler {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* The scroller is thousands of pixels wide; these keep it from widening
     whatever holds it. */
  min-width: 0;
}
:root[data-theme] .ruler-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
:root[data-theme] .ruler-value,
:root[data-theme] .ruler-input {
  border: none;
  background: none;
  padding: 0;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.05;
  color: var(--ink);
}
:root[data-theme] .ruler-value small {
  margin-left: 5px;
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-subtle);
}
:root[data-theme] .ruler.is-empty .ruler-value {
  color: var(--ink-faint);
}
:root[data-theme] .ruler-input {
  width: 150px;
  text-align: center;
  border-bottom: 2px solid var(--accent-vivid);
  outline: none;
}
:root[data-theme] .ruler-hint {
  min-height: 18px;
  font-size: var(--t-2xs);
  color: var(--ink-subtle);
}
:root[data-theme] .ruler-clear {
  border: none;
  background: none;
  padding: 0;
  font-size: var(--t-2xs);
  font-weight: 700;
  color: var(--accent);
}
/* The edges fade with two overlays, not mask-image: a mask on a scroller this
   wide (thousands of px) failed to paint at all in Chromium, blanking the
   whole ruler. The frame is isolated so the overlays and needle stack above
   the scroller's own layer. */
:root[data-theme] .ruler-frame {
  position: relative;
  isolation: isolate;
  min-width: 0;
  border-radius: 18px;
  background: var(--surface-3);
  overflow: hidden;
}
:root[data-theme] .ruler-frame::before,
:root[data-theme] .ruler-frame::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22%;
  z-index: 1;
  pointer-events: none;
}
:root[data-theme] .ruler-frame::before {
  left: 0;
  background: linear-gradient(90deg, var(--surface-3), transparent);
}
:root[data-theme] .ruler-frame::after {
  right: 0;
  background: linear-gradient(270deg, var(--surface-3), transparent);
}
:root[data-theme] .ruler-scroll {
  display: flex;
  flex-direction: row;
  height: 66px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  outline: none;
  border-radius: 18px;
}
:root[data-theme] .ruler-scroll::-webkit-scrollbar {
  display: none;
}
:root[data-theme] .ruler-scroll:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent-vivid);
}
:root[data-theme] .ruler-pad {
  flex: none;
}
/* Ticks every 0.1 kg, taller every half kilo, tallest every kilo. */
:root[data-theme] .ruler-ticks {
  position: relative;
  flex: none;
  height: 100%;
  background-image:
    repeating-linear-gradient(90deg, var(--ink-muted) 0 2px, transparent 2px 80px),
    repeating-linear-gradient(90deg, var(--ink-faint) 0 1.5px, transparent 1.5px 40px),
    repeating-linear-gradient(90deg, var(--ink-faint) 0 1px, transparent 1px 8px);
  background-size: calc(100% + 2px) 26px, calc(100% + 2px) 20px, calc(100% + 2px) 13px;
  background-position: -1px 100%, -0.75px 100%, -0.5px 100%;
  background-repeat: no-repeat;
}
:root[data-theme] .ruler-label {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-subtle);
  pointer-events: none;
}
:root[data-theme] .ruler-needle {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 26px;
  bottom: 0;
  width: 3px;
  border-radius: 3px;
  transform: translateX(-50%);
  background: var(--accent-vivid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-vivid) 18%, transparent);
  pointer-events: none;
}
:root[data-theme] .ruler-needle::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  transform: translateX(-50%);
  background: var(--accent-vivid);
}
:root[data-theme] .ruler.is-empty .ruler-needle {
  opacity: 0.45;
}

/* Water stepper and the read-only steps tile */
:root[data-theme] .log-minis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
:root[data-theme] .log-mini {
  --c: var(--m-water);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 18px;
  background: var(--surface-3);
}
:root[data-theme] .log-steps { --c: var(--m-steps); }
:root[data-theme] .log-mini-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
}
:root[data-theme] .log-mini-head i:first-child {
  color: var(--c);
}
:root[data-theme] .log-lock {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-faint);
}
:root[data-theme] .log-stepper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
:root[data-theme] .log-stepper button {
  flex: none;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}
:root[data-theme] .log-stepper button:disabled {
  opacity: 0.35;
}
:root[data-theme] .log-stepper b,
:root[data-theme] .log-mini-val {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
}
:root[data-theme] .log-stepper b small {
  margin-left: 2px;
  font-size: var(--t-2xs);
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .log-mini-bar {
  display: block;
  height: 5px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c) 16%, var(--surface-1));
  overflow: hidden;
}
:root[data-theme] .log-mini-bar span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--c);
}
:root[data-theme] .log-mini-note {
  font-size: 11px;
  color: var(--ink-subtle);
}
:root[data-theme] .log-metrics textarea.form-control-custom {
  margin-top: -6px;
  border-radius: 14px;
}
:root[data-theme] .log-save-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
}
:root[data-theme] .content-area .log-save {
  min-height: 42px;
  padding: 0 22px;
}

/* ═══════════════ BOTTOM SHEET (shared) ═══════════════ */
:root[data-theme] .ab-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20, 12, 30, 0.4);
  animation: sheetFade 0.22s ease both;
}
:root[data-theme] .ab-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 90dvh;
  border-radius: 28px 28px 0 0;
  background: var(--surface-1);
  box-shadow: var(--shadow-pop);
  outline: none;
  animation: sheetUp 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes sheetFade { from { opacity: 0; } }
@keyframes sheetUp { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .ab-sheet-overlay,
  :root[data-theme] .ab-sheet { animation: none; }
}
@media (min-width: 600px) {
  :root[data-theme] .ab-sheet-overlay { align-items: center; padding: 24px; }
  :root[data-theme] .ab-sheet { max-height: min(760px, 90dvh); border-radius: 28px; }
}
:root[data-theme] .ab-sheet-grip {
  align-self: center;
  width: 40px;
  height: 5px;
  margin-top: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-4);
}
:root[data-theme] .ab-sheet-head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 10px 20px 12px;
}
:root[data-theme] .ab-sheet-titles {
  flex: 1;
  min-width: 0;
}
:root[data-theme] .ab-sheet-title {
  margin: 0;
  font-size: var(--t-title3);
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--hdr-plum);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .ab-sheet-sub {
  margin: 1px 0 0;
  font-size: var(--t-xs);
  color: var(--ink-subtle);
}
:root[data-theme] .ab-sheet-close {
  flex: none;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
:root[data-theme] .ab-sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 20px 18px;
}
:root[data-theme] .ab-sheet-foot {
  padding: 12px 20px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-subtle);
}
:root[data-theme] .sheet-cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  min-height: 0;
  border: none;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--accent-vivid), var(--accent));
  color: var(--accent-ink);
  font-size: var(--t-callout);
  font-weight: 700;
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent-vivid) 85%, transparent);
}

/* ── Add-food sheet: browse ── */
:root[data-theme] .afs-browse {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
:root[data-theme] .afs-search {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: var(--surface-3);
  color: var(--ink-subtle);
}
:root[data-theme] .afs-search:focus-within {
  border-color: var(--accent-vivid);
  background: var(--surface-1);
}
:root[data-theme] .afs-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-size: 15px;
  color: var(--ink);
}
:root[data-theme] .afs-search-clear {
  border: none;
  background: none;
  color: var(--ink-subtle);
  font-size: 12px;
}
:root[data-theme] .afs-slots {
  display: flex;
  flex-direction: row;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
:root[data-theme] .afs-slot {
  flex: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-muted);
  font-size: var(--t-xs);
  font-weight: 600;
}
:root[data-theme] .afs-slot.is-on {
  background: var(--accent-soft);
  color: var(--accent);
}
/* Group tabs, underlined as in #6. */
:root[data-theme] .afs-tabs {
  display: flex;
  flex-direction: row;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line-subtle);
}
:root[data-theme] .afs-tab {
  flex: none;
  padding: 6px 0 9px;
  border: none;
  border-bottom: 2.5px solid transparent;
  background: none;
  color: var(--ink-subtle);
  font-size: var(--t-sm);
  font-weight: 600;
}
:root[data-theme] .afs-tab.is-on {
  border-bottom-color: var(--accent-vivid);
  color: var(--ink);
}
:root[data-theme] .afs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
:root[data-theme] .afs-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 16px;
  background: var(--surface-3);
  text-align: left;
  transition: background var(--dur-1) var(--ease-out);
}
:root[data-theme] .afs-item:hover {
  background: var(--surface-4);
}
:root[data-theme] .afs-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
:root[data-theme] .afs-item-main b {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .afs-item-main span {
  font-size: 11.5px;
  color: var(--ink-subtle);
}
:root[data-theme] .afs-item-kcal {
  flex: none;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .afs-item-chev {
  flex: none;
  color: var(--ink-faint);
  font-size: 12px;
}
:root[data-theme] .afs-empty {
  margin: 0 0 8px;
  font-size: var(--t-sm);
  color: var(--ink-subtle);
}
:root[data-theme] .afs-ai-result {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
  padding: 14px;
  border-radius: 16px;
  background: var(--accent-softer);
}
:root[data-theme] .afs-ai-result b {
  font-size: var(--t-callout);
  color: var(--ink);
}
:root[data-theme] .afs-ai-result span {
  font-size: var(--t-xs);
  color: var(--ink-muted);
}
:root[data-theme] .afs-ai-result small {
  font-size: 11px;
  color: var(--ink-subtle);
}
:root[data-theme] .afs-emptybox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 12px;
  text-align: center;
  color: var(--ink-subtle);
}
:root[data-theme] .afs-emptybox i {
  font-size: 26px;
  color: var(--ink-faint);
}
:root[data-theme] .afs-emptybox p {
  margin: 0;
  max-width: 280px;
  font-size: var(--t-sm);
}
:root[data-theme] .afs-emptybox a {
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

/* ── Add-food sheet: one food (#6's right-hand screen) ── */
:root[data-theme] .afs-detail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-4);
}
:root[data-theme] .afs-back {
  align-self: flex-start;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--accent);
}
:root[data-theme] .afs-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
:root[data-theme] .afs-hero-art {
  --c: #ff8a3d;
  width: 84px;
  height: 84px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--c) 16%, var(--surface-1));
  color: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}
:root[data-theme] .afs-kcal {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
}
:root[data-theme] .afs-kcal b {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--ink);
}
:root[data-theme] .afs-kcal span {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .afs-stepper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
:root[data-theme] .afs-stepper > button {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
:root[data-theme] .afs-stepper > button:disabled {
  opacity: 0.35;
}
:root[data-theme] .afs-stepper-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 130px;
}
:root[data-theme] .afs-stepper-mid b {
  font-size: var(--t-callout);
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .afs-qty {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  font-size: var(--t-xs);
  color: var(--ink-subtle);
}
:root[data-theme] .afs-qty input {
  width: 64px;
  height: 30px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: var(--surface-3);
  text-align: center;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
  outline: none;
}
:root[data-theme] .afs-qty input:focus {
  border-color: var(--accent-vivid);
  background: var(--surface-1);
}
:root[data-theme] .afs-macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: var(--surface-3);
}
:root[data-theme] .afs-macro {
  --c: #2d9fd8;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}
:root[data-theme] .afs-macro.tone-protein { --c: #ff8a3d; }
:root[data-theme] .afs-macro.tone-fat { --c: var(--accent-vivid); }
:root[data-theme] .afs-macro-bar {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 8px;
  height: 44px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c) 18%, var(--surface-1));
  overflow: hidden;
}
:root[data-theme] .afs-macro-bar span {
  display: block;
  width: 100%;
  border-radius: var(--r-pill);
  background: var(--c);
}
:root[data-theme] .afs-macro-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
:root[data-theme] .afs-macro-text b {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .afs-macro-text span {
  font-size: 11px;
  font-weight: 600;
  color: var(--c);
  white-space: nowrap;
}

/* ═══════════════ FOOD PAGE — one page per food, view ⇄ edit ═══════════════
   Design refs: NutriPam (kcal pill, macro rings, nutrient bars) and the green
   meal-planner kit (quantity row). One colour per macro, used everywhere. */
:root[data-theme] {
  --mc-kcal: var(--accent-vivid);
  --mc-carbs: #8b7cf6;
  --mc-protein: #f5b73b;
  --mc-fat: #ff7a8a;
  --mc-fiber: #3fbf83;
  --mc-sugar: #c9a4ff;
  --mc-sodium: #6cbcec;
  --mc-chol: #ff9f6b;
}
:root[data-theme] .t-kcal { --mc: var(--mc-kcal); }
:root[data-theme] .t-carbs { --mc: var(--mc-carbs); }
:root[data-theme] .t-protein { --mc: var(--mc-protein); }
:root[data-theme] .t-fat { --mc: var(--mc-fat); }
:root[data-theme] .t-fiber { --mc: var(--mc-fiber); }
:root[data-theme] .t-sugar { --mc: var(--mc-sugar); }
:root[data-theme] .t-sodium { --mc: var(--mc-sodium); }
:root[data-theme] .t-chol { --mc: var(--mc-chol); }

/* A food's picture, any size. */
:root[data-theme] .food-img {
  --fi-size: 48px;
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fi-size);
  height: var(--fi-size);
  overflow: hidden;
  border-radius: calc(var(--fi-size) * 0.3);
  background: var(--surface-3);
}
:root[data-theme] .food-img.is-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:root[data-theme] .food-img.is-art {
  background: var(--fi-tone);
}
:root[data-theme="dark"] .food-img.is-art {
  background: color-mix(in srgb, var(--fi-tone) 18%, var(--surface-2));
}
:root[data-theme] .food-img-emoji {
  font-size: calc(var(--fi-size) * 0.56);
  line-height: 1;
}
:root[data-theme] .food-img.is-icon {
  --c: #ff8a3d;
  background: color-mix(in srgb, var(--c) 16%, var(--surface-1));
  color: var(--c);
  font-size: calc(var(--fi-size) * 0.42);
}
:root[data-theme] .food-img.is-icon.tone-snack { --c: #e0568c; }
:root[data-theme] .food-img.is-icon.tone-breakfast { --c: #ff9f2e; }
:root[data-theme] .food-img.is-icon.tone-lunch { --c: #2fb35a; }
:root[data-theme] .food-img.is-icon.tone-tea { --c: #c9782f; }
:root[data-theme] .food-img.is-icon.tone-dinner { --c: #5b6ad0; }
:root[data-theme] .food-img.is-icon.tone-bar { --c: #af52de; }
:root[data-theme] .food-img.is-icon.tone-drink { --c: #2d9fd8; }

/* Picture picker (in the bottom sheet) */
:root[data-theme] .ip-tabs {
  display: flex;
  flex-direction: row;
  gap: 2px;
  margin-bottom: 14px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}
:root[data-theme] .ip-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-subtle);
  font-size: 13px;
  font-weight: 700;
}
:root[data-theme] .ip-tab.is-on {
  background: var(--surface-1);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(28, 20, 40, 0.1);
}
:root[data-theme] .ip-pro {
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #f5b73b, #ff7a8a);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
:root[data-theme] .ip-label {
  margin: 4px 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-subtle);
}
:root[data-theme] .ip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
:root[data-theme] .ip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 2px 7px;
  border: 2px solid transparent;
  border-radius: 18px;
  background: transparent;
  color: var(--ink-subtle);
  font-size: 11px;
  font-weight: 600;
}
:root[data-theme] .ip-item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .ip-item.is-on {
  border-color: var(--accent-vivid);
  background: var(--accent-soft);
  color: var(--accent);
}
:root[data-theme] .ip-upload {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
:root[data-theme] .ip-current {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
:root[data-theme] .ip-remove {
  border: none;
  background: none;
  color: var(--danger, #e5484d);
  font-size: 13px;
  font-weight: 700;
}
:root[data-theme] .ip-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 26px 16px;
  border: 2px dashed color-mix(in srgb, var(--accent-vivid) 40%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
  color: var(--ink);
  text-align: center;
}
:root[data-theme] .ip-drop .bi {
  margin-bottom: 4px;
  font-size: 28px;
  color: var(--accent-vivid);
}
:root[data-theme] .ip-drop b {
  font-size: 15px;
}
:root[data-theme] .ip-drop span {
  font-size: 12px;
  color: var(--ink-subtle);
}
:root[data-theme] .ip-error {
  margin: 0;
  color: var(--danger, #e5484d);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
:root[data-theme] .ip-spin,
:root[data-theme] .fd-spin {
  display: inline-block;
  animation: fd-spin 0.9s linear infinite;
}
@keyframes fd-spin { to { transform: rotate(360deg); } }
:root[data-theme] .ip-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px 8px;
  text-align: center;
}
:root[data-theme] .ip-locked-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 6px;
  border-radius: 22px;
  background: linear-gradient(145deg, #f5b73b, #ff7a8a);
  color: #fff;
  font-size: 28px;
  box-shadow: 0 12px 24px -12px rgba(245, 120, 80, 0.6);
}
:root[data-theme] .ip-locked b {
  font-size: 16px;
  color: var(--ink);
}
:root[data-theme] .ip-locked p {
  max-width: 300px;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-subtle);
}
:root[data-theme] .ip-go-pro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--mbn-disc);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

/* The page */
:root[data-theme] .fd-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
:root[data-theme] .fd-card {
  padding: 14px;
  border-radius: 22px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .fd-hero-top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}
:root[data-theme] .fd-titles {
  flex: 1;
  min-width: 0;
}
:root[data-theme] .fd-name {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
:root[data-theme] .fd-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
:root[data-theme] .fd-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  padding: 0 10px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-subtle);
  font-size: 11.5px;
  font-weight: 700;
}
:root[data-theme] .fd-chip.is-on {
  background: var(--accent-soft);
  color: var(--accent);
}
:root[data-theme] .fd-kcal {
  flex: none;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  background: var(--mbn-disc);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
:root[data-theme] .fd-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-subtle);
}
:root[data-theme] .fd-qty {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-subtle);
}
:root[data-theme] .fd-qty-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
:root[data-theme] .fd-qty-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .fd-stepper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
:root[data-theme] .fd-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--line-subtle);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--ink);
  font-size: 14px;
}
:root[data-theme] .fd-step:disabled {
  opacity: 0.4;
}
:root[data-theme] .fd-qty-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--surface-3);
}
:root[data-theme] .fd-qty-input input {
  width: 46px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-align: right;
  outline: none;
  -moz-appearance: textfield;
}
:root[data-theme] .fd-qty-input input::-webkit-inner-spin-button,
:root[data-theme] .fd-qty-input input::-webkit-outer-spin-button,
:root[data-theme] .fd-nbox input::-webkit-inner-spin-button,
:root[data-theme] .fd-nbox input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
:root[data-theme] .fd-qty-input span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-faint);
}

/* Macro rings */
:root[data-theme] .fd-rings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
:root[data-theme] .fd-ring-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
}
:root[data-theme] .fd-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: conic-gradient(var(--mc) calc(var(--p) * 1%), var(--surface-3) 0);
}
:root[data-theme] .fd-ring::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--surface-1);
}
:root[data-theme] .fd-ring b {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .fd-ring-lbl {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .fd-ring-sub {
  font-size: 11px;
  color: var(--ink-subtle);
}

/* Nutrition facts bars */
:root[data-theme] .fd-head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
:root[data-theme] .fd-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .fd-head span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .fd-bar {
  margin-top: 11px;
}
:root[data-theme] .fd-bar-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .fd-bar-top span:last-child {
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .fd-bar-top b {
  color: var(--ink);
}
:root[data-theme] .fd-bar-track {
  height: 7px;
  margin-top: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
:root[data-theme] .fd-bar-track span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--mc);
  transition: width var(--dur-3) var(--ease-out);
}
:root[data-theme] .fd-hist {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
:root[data-theme] .fd-hist-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
}
:root[data-theme] .fd-hist b {
  display: block;
  font-size: 14px;
  color: var(--ink);
}
:root[data-theme] .fd-hist span {
  font-size: 12.5px;
  color: var(--ink-subtle);
}

/* The action bar — rides above the bottom nav while the page scrolls. */
:root[data-theme] .fd-foot {
  position: sticky;
  bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 4px;
  padding-top: 14px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--canvas) 0%, transparent), var(--canvas) 45%);
}
@media (min-width: 992px) {
  :root[data-theme] .fd-foot {
    bottom: 16px;
  }
}
:root[data-theme] .fd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 48px;
  padding: 0 18px;
  border: none;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
:root[data-theme] .fd-btn:disabled {
  opacity: 0.6;
}
:root[data-theme] .fd-btn.is-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--accent-vivid);
  color: #fff;
  box-shadow: 0 10px 20px -10px var(--accent-vivid);
}
:root[data-theme] .fd-btn.is-ghost {
  background: var(--surface-1);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .fd-btn.is-danger {
  background: var(--surface-1);
  color: var(--danger, #e5484d);
  box-shadow: var(--shadow-card);
}

/* Edit mode */
:root[data-theme] .fd-live {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 22px;
  background: var(--mbn-disc);
  color: #fff;
}
:root[data-theme] .fd-live-art {
  position: relative;
  flex: none;
  padding: 0;
  border: none;
  border-radius: 20px;
  background: none;
}
:root[data-theme] .fd-live-art .food-img {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}
:root[data-theme] .fd-live-cam {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--mbn-disc);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--mbn-disc);
  font-size: 12px;
}
:root[data-theme] .fd-live-body {
  flex: 1;
  min-width: 0;
}
:root[data-theme] .fd-live-kcal {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}
:root[data-theme] .fd-live-kcal small {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.75;
}
:root[data-theme] .fd-split {
  display: flex;
  flex-direction: row;
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
}
:root[data-theme] .fd-split span {
  display: block;
  height: 100%;
  background: var(--mc);
  transition: width var(--dur-2) var(--ease-out);
}
:root[data-theme] .fd-split-legend {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
:root[data-theme] .fd-split-legend span::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--mc);
}
:root[data-theme] .fd-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
:root[data-theme] .fd-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--line-subtle);
  border-radius: 14px;
  background: var(--surface-1);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  outline: none;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
:root[data-theme] .fd-input:focus {
  border-color: var(--accent-vivid);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-vivid) 14%, transparent);
}
:root[data-theme] .fd-input.is-big {
  height: 52px;
  font-size: 19px;
  font-weight: 800;
}
:root[data-theme] .fd-input.is-invalid,
:root[data-theme] .fd-nbox.is-invalid {
  border-color: var(--danger, #e5484d);
}
:root[data-theme] .fd-chips.is-pick .fd-chip {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1.5px var(--line-subtle);
}
:root[data-theme] .fd-chips.is-pick .fd-chip.is-on {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent-vivid);
}
:root[data-theme] .fd-chips.is-pick .fd-chip.is-add {
  color: var(--accent);
}
:root[data-theme] .fd-serving {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
:root[data-theme] .fd-serving .fd-input {
  width: 96px;
  flex: none;
}
:root[data-theme] .fd-seg {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}
:root[data-theme] .fd-seg button {
  flex: 1;
  height: 36px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-subtle);
  font-size: 13px;
  font-weight: 700;
}
:root[data-theme] .fd-seg button.is-on {
  background: var(--surface-1);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(28, 20, 40, 0.1);
}
:root[data-theme] .fd-nrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 0;
  border-top: 1px solid var(--line-subtle);
}
:root[data-theme] .fd-head + .fd-nrow {
  border-top: none;
}
:root[data-theme] .fd-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mc);
}
:root[data-theme] .fd-nname {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .fd-nname em {
  margin-left: 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--accent);
}
:root[data-theme] .fd-nbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: 104px;
  height: 38px;
  padding: 0 10px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--surface-3);
}
:root[data-theme] .fd-nbox:focus-within {
  border-color: var(--accent-vivid);
  background: var(--surface-1);
}
:root[data-theme] .fd-nbox input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-align: right;
  outline: none;
  -moz-appearance: textfield;
}
:root[data-theme] .fd-nbox u {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink-faint);
}
:root[data-theme] .fd-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
:root[data-theme] .fd-ai {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--accent-vivid) 35%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface-1));
}
:root[data-theme] .fd-ai-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--accent-vivid);
  color: #fff;
  font-size: 17px;
}
:root[data-theme] .fd-ai-body {
  flex: 1;
  min-width: 0;
}
:root[data-theme] .fd-ai-body b {
  display: block;
  font-size: 14.5px;
  color: var(--ink);
}
:root[data-theme] .fd-ai-body > span {
  display: block;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--ink-subtle);
}
:root[data-theme] .fd-ai-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
:root[data-theme] .fd-ai-row .fd-input {
  height: 42px;
  font-size: 14px;
}
:root[data-theme] .fd-ai-go {
  flex: none;
  min-width: 64px;
  height: 42px;
  padding: 0 16px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--accent-vivid);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
:root[data-theme] .fd-ai-go:disabled {
  opacity: 0.6;
}

/* My Foods rows — each opens the food's own page. */
:root[data-theme] .fdb-list {
  display: flex;
  flex-direction: column;
}
:root[data-theme] .fdb-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line-subtle);
  color: var(--ink);
  text-decoration: none;
}
:root[data-theme] .fdb-row:first-child {
  border-top: none;
}
:root[data-theme] .fdb-row:active {
  opacity: 0.7;
}
:root[data-theme] .fdb-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
:root[data-theme] .fdb-name {
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .fdb-sub {
  overflow: hidden;
  font-size: 11.5px;
  color: var(--ink-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .fdb-kcal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}
:root[data-theme] .fdb-kcal b {
  font-size: 15px;
  font-weight: 800;
}
:root[data-theme] .fdb-kcal span {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-faint);
}
:root[data-theme] .fdb-chev {
  font-size: 12px;
  color: var(--ink-faint);
}

/* The food's picture and "See details" in the Add Food sheet. */
:root[data-theme] .afs-details {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: -2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
:root[data-theme] .afs-details .bi {
  font-size: 11px;
}
:root[data-theme] .afs-item {
  gap: 12px;
}
/* A logged item that came from a saved food links to its page. */
:root[data-theme] .meal-card-items .fe-link {
  display: block;
  color: var(--ink);
  text-decoration: none;
}
:root[data-theme] .meal-card-items .fe-link:hover {
  color: var(--accent);
}

/* ═══════════════ DAY COUNTERS — gauge, macro chips, nutrient bars ═══════════════
   Design refs: the green meal-planner kit (half-circle gauge, filling macro
   chips) and NutriPam's "Calories Analysis" bars. */
:root[data-theme] .content-area .dc {
  padding: 16px 14px 14px;
}
:root[data-theme] .dc-gauge {
  position: relative;
  max-width: 320px;
  margin: 0 auto;
}
:root[data-theme] .dc-gauge svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
:root[data-theme] .dc-track,
:root[data-theme] .dc-fill {
  fill: none;
  stroke-width: 16;
  stroke-linecap: round;
}
:root[data-theme] .dc-track {
  stroke: var(--surface-3);
}
:root[data-theme] .dc-fill {
  stroke: var(--mc-kcal);
  transition: stroke-dashoffset 0.8s var(--ease-out);
}
:root[data-theme] .dc-fill.is-over {
  stroke: var(--danger, #e5484d);
}
:root[data-theme] .dc-mid {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}
:root[data-theme] .dc-mid b {
  display: block;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--ink);
}
:root[data-theme] .dc-mid span {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .dc-side {
  position: absolute;
  bottom: -46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  line-height: 1.15;
  text-align: center;
}
:root[data-theme] .dc-side.is-l { left: -14px; }
:root[data-theme] .dc-side.is-r { right: -14px; }
:root[data-theme] .dc-side .bi {
  font-size: 14px;
  color: var(--mc-carbs);
}
:root[data-theme] .dc-side.is-r .bi {
  color: #ff8a3d;
}
:root[data-theme] .dc-side b {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .dc-side span {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .dc-side.is-over b,
:root[data-theme] .dc-side.is-over .bi {
  color: var(--danger, #e5484d);
}
:root[data-theme] .dc-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 58px;
}
:root[data-theme] .dc-chip {
  position: relative;
  overflow: hidden;
  padding: 9px 4px;
  border-radius: 14px;
  background: var(--surface-3);
  text-align: center;
}
/* The chip fills from the left as the macro is eaten. */
:root[data-theme] .dc-chip::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 1%);
  background: color-mix(in srgb, var(--mc) 26%, transparent);
  transition: width 0.6s var(--ease-out);
}
:root[data-theme] .dc-chip.is-over::before {
  background: color-mix(in srgb, var(--danger, #e5484d) 20%, transparent);
}
:root[data-theme] .dc-chip span,
:root[data-theme] .dc-chip b {
  position: relative;
  display: block;
}
:root[data-theme] .dc-chip span {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-subtle);
}
:root[data-theme] .dc-chip b {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .dc-chip b small {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-faint);
}

/* Nutrient bars */
:root[data-theme] .content-area .nt-bars {
  padding: 16px;
}
:root[data-theme] .nt-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
:root[data-theme] .nt-head .nutrition-today-title {
  margin: 0;
}
:root[data-theme] .nt-row {
  margin-top: 12px;
}
:root[data-theme] .nt-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
:root[data-theme] .nt-name {
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .nt-val {
  font-weight: 600;
  color: var(--ink-subtle);
  white-space: nowrap;
}
:root[data-theme] .nt-val b {
  color: var(--ink);
}
:root[data-theme] .nt-track {
  position: relative;
  height: 8px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}
:root[data-theme] .nt-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--mc);
  transition: width 0.6s var(--ease-out);
}
:root[data-theme] .nt-row.status-over .nt-fill {
  background: var(--danger, #e5484d);
}
:root[data-theme] .nt-row.status-over .nt-val b {
  color: var(--danger, #e5484d);
}
/* Where "enough" starts on a range nutrient. */
:root[data-theme] .nt-min {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 35%, transparent);
}

/* ═══════════════ ACTIVITIES — "Daily routine" habit screen ═══════════════
   Design ref: the habit set (routine list on a line of tick circles, the New
   habit sheet, pill bars for the week). Each habit carries its own colour. */
:root[data-theme] .content-area .ac-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}
:root[data-theme] .ac-hero-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
:root[data-theme] .ac-hero-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent);
}
:root[data-theme] .ac-hero-num {
  margin-top: 2px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--ink);
}
:root[data-theme] .ac-hero-num small {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-subtle);
}
:root[data-theme] .ac-hero-note {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-subtle);
}
:root[data-theme] .ac-ring {
  position: relative;
  flex: none;
  width: 76px;
  height: 76px;
}
:root[data-theme] .ac-ring svg {
  width: 100%;
  height: 100%;
}
:root[data-theme] .ac-ring-track,
:root[data-theme] .ac-ring-fill {
  fill: none;
  stroke-width: 8;
}
:root[data-theme] .ac-ring-track {
  stroke: var(--surface-3);
}
:root[data-theme] .ac-ring-fill {
  stroke: var(--accent-vivid);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s var(--ease-out);
}
:root[data-theme] .ac-ring span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

/* Section heads */
:root[data-theme] .ac-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
:root[data-theme] .ac-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink);
}
:root[data-theme] .ac-head-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
:root[data-theme] .ac-head-note {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .ac-new {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--accent-vivid);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 14px -8px var(--accent-vivid);
}

/* The routine: tick circles on a dotted line, a card per habit. */
:root[data-theme] .ac-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
:root[data-theme] .ac-list::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 13px;
  border-left: 2px dashed color-mix(in srgb, var(--ink) 14%, transparent);
}
:root[data-theme] .ac-item {
  --hb: #7a4c96;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
:root[data-theme] .ac-tick {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: var(--r-pill);
  background: var(--canvas);
  color: transparent;
  font-size: 15px;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
:root[data-theme] .ac-item.is-done .ac-tick {
  border-color: var(--accent-vivid);
  background: var(--accent-vivid);
  color: #fff;
}
:root[data-theme] .ac-item.is-done .ac-tick i {
  animation: ac-pop 0.35s var(--ease-out);
}
@keyframes ac-pop {
  0% { transform: scale(0.4); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
:root[data-theme] .ac-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 8px 12px 12px;
  border-radius: 20px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out);
}
:root[data-theme] .ac-card:active {
  transform: scale(0.985);
}
:root[data-theme] .ac-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--hb) 16%, var(--surface-1));
  color: var(--hb);
  font-size: 19px;
}
:root[data-theme] .ac-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
:root[data-theme] .ac-name {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .ac-item.is-done .ac-name {
  color: var(--ink-subtle);
}
:root[data-theme] .ac-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .ac-sub .bi-fire {
  color: #ff7a2f;
}
:root[data-theme] .ac-sub .bi-lightning-charge-fill {
  color: var(--accent);
}
:root[data-theme] .ac-edit {
  flex: none;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-faint);
  font-size: 16px;
}
:root[data-theme] .ac-edit:hover {
  background: var(--surface-3);
  color: var(--ink);
}
:root[data-theme] .ac-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 26px 16px;
  border: 2px dashed color-mix(in srgb, var(--accent-vivid) 35%, transparent);
  border-radius: 22px;
  background: var(--surface-1);
  color: var(--ink);
  text-align: center;
}
:root[data-theme] .ac-empty .bi {
  font-size: 28px;
  color: var(--accent-vivid);
}
:root[data-theme] .ac-empty span {
  font-size: 13px;
  color: var(--ink-subtle);
}

/* This week — a pill bar per habit (ref screen 3). */
:root[data-theme] .content-area .ac-week {
  padding: 16px;
}
:root[data-theme] .ac-bars {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -16px;
  padding: 2px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
:root[data-theme] .ac-bars::-webkit-scrollbar {
  display: none;
}
:root[data-theme] .ac-bar {
  /* min-width:0 matters: without it a long habit name sets the column's
     width and that one bar comes out far wider than the rest. */
  flex: 0 0 58px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
:root[data-theme] .ac-bar-pill {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 150px;
  overflow: hidden;
  border-radius: 32px;
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--hb) 10%, var(--surface-3)) 0 6px,
    var(--surface-3) 6px 12px
  );
}
:root[data-theme] .ac-bar-fill {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: max(46px, calc(var(--p) * 100%));
  padding-bottom: 12px;
  border-radius: 32px;
  background: var(--hb);
  transition: height 0.6s var(--ease-out);
}
:root[data-theme] .ac-bar-fill b {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}
:root[data-theme] .ac-bar[style*='--p: 0;'] .ac-bar-fill,
:root[data-theme] .ac-bar[style*='--p:0;'] .ac-bar-fill {
  background: color-mix(in srgb, var(--hb) 35%, var(--surface-3));
}
:root[data-theme] .ac-bar-ico {
  margin-top: 2px;
  font-size: 15px;
  color: var(--hb);
}
:root[data-theme] .ac-bar-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-subtle);
  text-align: center;
  overflow-wrap: anywhere;
}

/* New habit / edit habit sheet */
:root[data-theme] .hb-art {
  --hb: #7a4c96;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: 2px auto 16px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--hb) 16%, var(--surface-1));
  color: var(--hb);
  font-size: 38px;
  transform: rotate(-4deg);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
:root[data-theme] .hb-label {
  display: block;
  margin: 14px 0 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
:root[data-theme] .hb-auto {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
}
:root[data-theme] .hb-icons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
:root[data-theme] .hb-icon {
  --hb: var(--ink-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border: none;
  border-radius: 16px;
  background: var(--surface-3);
  color: var(--ink-subtle);
  font-size: 19px;
}
:root[data-theme] .hb-icon.is-on {
  background: color-mix(in srgb, var(--hb) 16%, var(--surface-1));
  color: var(--hb);
  box-shadow: inset 0 0 0 2px var(--hb);
}
:root[data-theme] .hb-colors {
  display: flex;
  flex-direction: row;
  gap: 12px;
}
:root[data-theme] .hb-color {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 4px transparent;
}
:root[data-theme] .hb-color.is-on {
  box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 5px var(--ink);
}
:root[data-theme] .hb-color.is-custom input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
:root[data-theme] .hb-color.is-custom .bi {
  color: #fff;
  font-size: 14px;
  pointer-events: none;
}
:root[data-theme] .hb-manage {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line-subtle);
}
:root[data-theme] .hb-move,
:root[data-theme] .hb-delete {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
:root[data-theme] .hb-move:disabled {
  opacity: 0.4;
}
:root[data-theme] .hb-delete {
  margin-left: auto;
  background: color-mix(in srgb, var(--danger, #e5484d) 12%, transparent);
  color: var(--danger, #e5484d);
}

/* ═══════════════ AVATAR BUILDER — Duolingo's "Create Avatar" ═══════════════
   A pinned live preview with an icon tab per part; every choice below is a
   tile of the user's own avatar wearing it. */
:root[data-theme] .avb {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* No viewport unit here either — this one guessed the header's height and
     any error in that guess became empty canvas under the last row of tiles.
     A short tab is simply a short page now. */
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
:root[data-theme] .avb-panel {
  flex: 1;
}
:root[data-theme] .avb-stage {
  position: sticky;
  top: var(--hdr-h, 106px);
  z-index: 4;
  margin: 0 calc(var(--sp-4) * -1);
  padding: 0 var(--sp-4) 8px;
  background: var(--canvas);
}
:root[data-theme] .avb-preview {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 208px;
  overflow: hidden;
  border-radius: 26px;
  background: var(--avb-bg, var(--surface-3));
  box-shadow: var(--shadow-card);
  transition: background var(--dur-2) var(--ease-out);
}
/* The circle frame is drawn on a square canvas and the others on 264×280, so
   the drawing sets its own width from a fixed height — forcing both sides
   would stretch one of them. */
:root[data-theme] .avb-figure {
  display: block;
  height: 200px;
}
:root[data-theme] .avb-figure svg {
  display: block;
  width: auto;
  height: 100%;
}
:root[data-theme] .avb-shuffle,
:root[data-theme] .avb-done {
  position: absolute;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 800;
}
/* Shuffle: a round button tucked into the preview's lower corner. */
:root[data-theme] .avb-shuffle {
  top: auto;
  right: 12px;
  bottom: 12px;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  color: var(--ink);
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(28, 20, 40, 0.12);
}
/* Female / Male switch, top-left of the preview. */
:root[data-theme] .avb-style {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: row;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-1) 85%, transparent);
  box-shadow: 0 2px 8px rgba(28, 20, 40, 0.1);
}
:root[data-theme] .avb-style button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 11px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-subtle);
  font-size: 12px;
  font-weight: 800;
}
:root[data-theme] .avb-style button.is-on {
  background: var(--mbn-disc);
  color: #fff;
}
:root[data-theme] .avb-done {
  right: 12px;
  background: var(--accent-vivid);
  color: #fff;
  box-shadow: 0 6px 14px -8px var(--accent-vivid);
}
:root[data-theme] .avb-done:disabled {
  opacity: 0.7;
}

/* One icon tab per part, underlined when chosen. */
:root[data-theme] .avb-tabs {
  display: flex;
  flex-direction: row;
  gap: 2px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line-subtle);
}
:root[data-theme] .avb-tabs::-webkit-scrollbar {
  display: none;
}
:root[data-theme] .avb-tab {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 58px;
  padding: 6px 6px 9px;
  border: none;
  background: transparent;
  color: var(--ink-faint);
}
:root[data-theme] .avb-tab .bi {
  font-size: 21px;
}
:root[data-theme] .avb-tab span {
  font-size: 11px;
  font-weight: 700;
}
:root[data-theme] .avb-tab.is-on {
  color: var(--accent);
}
:root[data-theme] .avb-tab.is-on::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent-vivid);
}

/* The choices */
:root[data-theme] .avb-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
:root[data-theme] .avb-label {
  margin-bottom: 9px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .avb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (min-width: 520px) {
  :root[data-theme] .avb-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
}
@media (min-width: 760px) {
  :root[data-theme] .avb-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
/* Four to a row leaves less width, so the caption gets its own line. */
:root[data-theme] .avb-tile + .avb-tile,
:root[data-theme] .avb-grid .avb-tile {
  border-radius: 18px;
}
/* Colours sit in one sideways row of smaller tiles. */
:root[data-theme] .avb-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin: 0 calc(var(--sp-4) * -1);
  padding: 2px var(--sp-4) 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
:root[data-theme] .avb-row::-webkit-scrollbar {
  display: none;
}
:root[data-theme] .avb-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 20px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
:root[data-theme] .avb-tile:active {
  transform: scale(0.96);
}
:root[data-theme] .avb-tile.is-small {
  flex: 0 0 78px;
  width: 78px;
  border-radius: 18px;
}
:root[data-theme] .avb-tile.is-on {
  border-color: var(--accent-vivid);
  background: var(--accent-soft);
}
:root[data-theme] .avb-tile-fig {
  display: block;
  width: 100%;
  height: 100%;
}
:root[data-theme] .avb-tile-fig svg {
  display: block;
  width: 100%;
  height: 100%;
}
:root[data-theme] .avb-dot {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--surface-1);
  border-radius: var(--r-pill);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
:root[data-theme] .avb-check {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--accent-vivid);
  color: #fff;
  font-size: 12px;
}
:root[data-theme] .avb-foot {
  position: sticky;
  bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  padding-top: 12px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--canvas) 0%, transparent), var(--canvas) 45%);
}
@media (min-width: 992px) {
  :root[data-theme] .avb-foot {
    bottom: 16px;
  }
}

/* The first step: Female or Male, required. */
:root[data-theme] .avb-choose {
  gap: 18px;
  padding-top: 6px;
}
:root[data-theme] .avb-choose-head {
  text-align: center;
}
:root[data-theme] .avb-choose-head h2 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--ink);
}
:root[data-theme] .avb-choose-head p {
  max-width: 300px;
  margin: 0 auto;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-subtle);
}
:root[data-theme] .avb-choose-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
:root[data-theme] .avb-choose-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 10px 14px;
  border: 2px solid transparent;
  border-radius: 24px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
:root[data-theme] .avb-choose-card:hover {
  border-color: color-mix(in srgb, var(--accent-vivid) 45%, transparent);
}
:root[data-theme] .avb-choose-card:active {
  transform: scale(0.97);
  border-color: var(--accent-vivid);
}
:root[data-theme] .avb-choose-fig {
  display: block;
  width: 100%;
  max-width: 150px;
}
:root[data-theme] .avb-choose-fig svg {
  display: block;
  width: 100%;
  height: auto;
}
:root[data-theme] .avb-choose-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--mbn-disc);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

/* ═══════════════ PROGRESS — the Wellness set ═══════════════
   A big goal ring over three small rings on a soft gradient, a period-tabbed
   bar chart with a goal line, and breakdown tiles. */
:root[data-theme] .pg-ring {
  display: block;
}
:root[data-theme] .pg-ring-track,
:root[data-theme] .pg-ring-fill {
  fill: none;
}
:root[data-theme] .pg-ring-track {
  stroke: color-mix(in srgb, var(--ink) 8%, transparent);
}
:root[data-theme] .pg-ring-fill {
  stroke: var(--rc, var(--accent-vivid));
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s var(--ease-out);
}
:root[data-theme] .pg-ring.t-goal { --rc: var(--accent-vivid); }
:root[data-theme] .pg-ring.t-lost { --rc: #7dd35c; }
:root[data-theme] .pg-ring.t-consist { --rc: #4aa8e8; }
:root[data-theme] .pg-ring.t-habits { --rc: #ef8a8a; }

:root[data-theme] .pg-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 14px 18px;
  border-radius: 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-vivid) 14%, var(--surface-1)) 0%, color-mix(in srgb, #ff9ec4 12%, var(--surface-1)) 100%);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .pg-big {
  position: relative;
  width: 184px;
  height: 184px;
}
:root[data-theme] .pg-big-mid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
:root[data-theme] .pg-big-mid .bi {
  font-size: 20px;
  color: var(--accent-vivid);
}
:root[data-theme] .pg-big-mid b {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--ink);
}
:root[data-theme] .pg-big-mid span {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .pg-hero-line {
  margin: 10px 0 18px;
  font-size: 14px;
  color: var(--ink-subtle);
}
:root[data-theme] .pg-hero-line b {
  color: var(--ink);
}
:root[data-theme] .pg-minis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}
:root[data-theme] .pg-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
:root[data-theme] .pg-mini-ring {
  position: relative;
  margin-bottom: 6px;
}
:root[data-theme] .pg-mini-ring .bi {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--ink-subtle);
}
:root[data-theme] .pg-mini b {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .pg-mini b small {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-faint);
}
:root[data-theme] .pg-mini span {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-subtle);
}

/* Weight trend */
:root[data-theme] .content-area .pg-trend {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 14px 12px;
  text-align: center;
}
:root[data-theme] .pg-tabs {
  display: flex;
  flex-direction: row;
  gap: 6px;
  width: 100%;
  margin-bottom: 16px;
}
:root[data-theme] .pg-tabs button {
  flex: 1;
  height: 38px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
:root[data-theme] .pg-tabs button.is-on {
  background: var(--accent-vivid);
  color: #fff;
  box-shadow: 0 6px 14px -8px var(--accent-vivid);
}
:root[data-theme] .pg-trend-num {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--ink);
}
:root[data-theme] .pg-trend-num small {
  font-size: 18px;
  letter-spacing: 0;
  color: var(--ink-subtle);
}
:root[data-theme] .pg-badge {
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, #7dd35c 24%, var(--surface-1));
  color: #3f7a24;
  font-size: 12px;
  font-weight: 700;
}
:root[data-theme="dark"] .pg-badge {
  color: #a8e58b;
}
:root[data-theme] .pg-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 8px 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .pg-delta.is-good .bi {
  color: #3fae5a;
}
:root[data-theme] .pg-delta.is-off .bi {
  color: #e5774d;
}
:root[data-theme] .pg-chart {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
}
:root[data-theme] .pg-plot {
  position: relative;
  flex: 1;
  height: 190px;
}
:root[data-theme] .pg-plot::before {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;
  border-top: 1px solid var(--line-subtle);
  border-bottom: 1px solid var(--line-subtle);
}
:root[data-theme] .pg-plot::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid var(--line-subtle);
}
:root[data-theme] .pg-goal {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  border-top: 2px dashed color-mix(in srgb, var(--accent-vivid) 60%, transparent);
  pointer-events: none;
}
:root[data-theme] .pg-goal span {
  position: absolute;
  left: 0;
  bottom: 3px;
  box-shadow: 0 1px 4px rgba(28, 20, 40, 0.12);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 800;
}
:root[data-theme] .pg-bars {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  align-items: end;
  gap: 6px;
  height: 100%;
}
:root[data-theme] .pg-bar {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
}
:root[data-theme] .pg-bar-fill {
  display: block;
  width: min(100%, 30px);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-vivid) 16%, var(--surface-3));
  transition: height 0.5s var(--ease-out), background var(--dur-2) var(--ease-out);
}
:root[data-theme] .pg-bar.is-on .pg-bar-fill {
  background: var(--accent-vivid);
}
:root[data-theme] .pg-bar.is-empty .pg-bar-fill {
  background: transparent;
  border: 2px dashed var(--line-subtle);
}
:root[data-theme] .pg-tip {
  position: absolute;
  left: 50%;
  z-index: 3;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--surface-1);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  transform: translateX(-50%);
}
:root[data-theme] .pg-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 190px;
  margin-top: -7px;
  padding-bottom: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  text-align: left;
}
:root[data-theme] .pg-labels {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: 6px;
  width: calc(100% - 34px);
  align-self: flex-start;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-faint);
}
:root[data-theme] .pg-labels span {
  overflow: hidden;
  white-space: nowrap;
}
:root[data-theme] .pg-labels span.is-on {
  color: var(--accent);
}
:root[data-theme] .pg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 0 8px;
}
:root[data-theme] .pg-empty .bi {
  font-size: 30px;
  color: var(--accent-vivid);
}
:root[data-theme] .pg-empty p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-subtle);
}
:root[data-theme] .pg-empty-cta {
  margin-top: 4px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--accent-vivid);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

/* Breakdown tiles */
:root[data-theme] .pg-h2 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink);
}
:root[data-theme] .pg-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
:root[data-theme] .pg-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 20px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .pg-tile-ico {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  font-size: 16px;
}
:root[data-theme] .pg-tile-ico.t-a { background: color-mix(in srgb, var(--accent-vivid) 16%, var(--surface-1)); color: var(--accent-vivid); }
:root[data-theme] .pg-tile-ico.t-b { background: color-mix(in srgb, #4aa8e8 18%, var(--surface-1)); color: #3a8fd0; }
:root[data-theme] .pg-tile-ico.t-c { background: color-mix(in srgb, #ef8a8a 20%, var(--surface-1)); color: #e06a6a; }
:root[data-theme] .pg-tile-ico.t-d { background: color-mix(in srgb, #f5b73b 22%, var(--surface-1)); color: #c98b12; }
:root[data-theme] .pg-tile-lbl {
  padding-right: 38px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .pg-tile b {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .pg-tile b small {
  font-size: 13px;
  color: var(--ink-faint);
}

/* Goal timeline */
:root[data-theme] .content-area .pg-timeline {
  padding: 16px;
}
:root[data-theme] .pg-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
:root[data-theme] .pg-steps::before {
  content: '';
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 15px;
  border-left: 2px dashed color-mix(in srgb, var(--ink) 14%, transparent);
}
:root[data-theme] .pg-steps li {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
:root[data-theme] .pg-step-dot {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--ink-faint);
  font-size: 14px;
}
:root[data-theme] .pg-steps li.is-past .pg-step-dot {
  border-color: var(--accent-vivid);
  background: var(--accent-vivid);
  color: #fff;
}
:root[data-theme] .pg-step-body {
  display: flex;
  flex-direction: column;
}
:root[data-theme] .pg-step-body b {
  font-size: 14.5px;
  color: var(--ink);
}
:root[data-theme] .pg-step-body span {
  font-size: 12px;
  color: var(--ink-subtle);
}

/* Activity heatmap */
:root[data-theme] .content-area .pg-heat {
  padding: 16px;
}
:root[data-theme] .pg-heat-head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
:root[data-theme] .pg-heat-head span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-subtle);
}
:root[data-theme] .pg-heat-head .bi {
  color: #ff7a2f;
}
:root[data-theme] .pg-heat-grid {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 4px;
}
:root[data-theme] .pg-heat-cell {
  display: inline-block;
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  background: var(--surface-3);
}
:root[data-theme] .pg-heat-cell.l1 { background: color-mix(in srgb, var(--accent-vivid) 30%, var(--surface-3)); }
:root[data-theme] .pg-heat-cell.l2 { background: color-mix(in srgb, var(--accent-vivid) 60%, var(--surface-3)); }
:root[data-theme] .pg-heat-cell.l3 { background: var(--accent-vivid); }
:root[data-theme] .pg-heat-legend {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-faint);
}
:root[data-theme] .pg-heat-legend .pg-heat-cell {
  width: 12px;
}

/* ═══════════════ AI INSIGHTS — "Your Wellness" score cards ═══════════════ */
:root[data-theme] .ins-h2 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink);
}
:root[data-theme] .ins-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:root[data-theme] .ins-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 18px;
  border-radius: 22px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .ins-card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
:root[data-theme] .ins-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
:root[data-theme] .ins-big {
  margin: 4px 0 2px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--ink);
}
:root[data-theme] .ins-big small {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-subtle);
}
:root[data-theme] .ins-big.is-muted {
  color: var(--ink-faint);
}
:root[data-theme] .ins-card-sub {
  font-size: 12.5px;
  color: var(--ink-subtle);
}
/* Mini bars (food per day) */
:root[data-theme] .ins-bars {
  flex: none;
  display: grid;
  grid-template-columns: repeat(7, 14px);
  gap: 5px;
  height: 84px;
}
:root[data-theme] .ins-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
:root[data-theme] .ins-bar > span {
  display: block;
  width: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-vivid) 18%, var(--surface-3));
}
:root[data-theme] .ins-bar.is-today > span {
  background: var(--accent-vivid);
}
:root[data-theme] .ins-bar i {
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  color: var(--ink-faint);
}
/* Rings */
:root[data-theme] .ins-ring {
  position: relative;
  flex: none;
  width: 80px;
  height: 80px;
}
:root[data-theme] .ins-ring svg {
  width: 100%;
  height: 100%;
}
:root[data-theme] .ins-ring-track,
:root[data-theme] .ins-ring-fill {
  fill: none;
  stroke-width: 8;
}
:root[data-theme] .ins-ring-track {
  stroke: var(--surface-3);
}
:root[data-theme] .ins-ring-fill {
  stroke: var(--rc);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s var(--ease-out);
}
:root[data-theme] .ins-ring.t-water { --rc: #4aa8e8; }
:root[data-theme] .ins-ring.t-habits { --rc: #f59a52; }
:root[data-theme] .ins-ring-mid {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--rc);
}
:root[data-theme] .ins-emoji {
  font-size: 30px;
  line-height: 1;
}
:root[data-theme] .ins-trend {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--surface-3);
  color: var(--ink-faint);
  font-size: 26px;
}
:root[data-theme] .ins-trend.is-good {
  background: color-mix(in srgb, #3fae5a 16%, var(--surface-1));
  color: #3fae5a;
}
:root[data-theme] .ins-trend.is-off {
  background: color-mix(in srgb, #e5774d 16%, var(--surface-1));
  color: #e5774d;
}

/* Weekly check-in */
:root[data-theme] .ins-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
:root[data-theme] .ins-head .ins-h2 {
  margin: 0;
}
:root[data-theme] .ins-run {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--accent-vivid);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 14px -8px var(--accent-vivid);
}
:root[data-theme] .ins-run:disabled {
  opacity: 0.75;
}
:root[data-theme] .ins-latest {
  padding: 16px 18px;
  border-radius: 22px;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    linear-gradient(135deg, var(--accent-vivid), #ff9ec4) border-box;
  border: 2px solid transparent;
  box-shadow: var(--shadow-card);
}
:root[data-theme] .ins-latest-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
:root[data-theme] .ins-new {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
:root[data-theme] .ins-range {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .ins-text p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
:root[data-theme] .ins-meta {
  font-size: 11.5px;
  color: var(--ink-faint);
}
:root[data-theme] .ins-older {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
:root[data-theme] .ins-past {
  border-radius: 18px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .ins-past summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
:root[data-theme] .ins-past summary::-webkit-details-marker {
  display: none;
}
:root[data-theme] .ins-past-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}
:root[data-theme] .ins-past-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
:root[data-theme] .ins-past-body b {
  font-size: 14px;
  color: var(--ink);
}
:root[data-theme] .ins-past-body span {
  overflow: hidden;
  font-size: 12px;
  color: var(--ink-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .ins-past-chev {
  color: var(--ink-faint);
  transition: transform var(--dur-2) var(--ease-out);
}
:root[data-theme] .ins-past[open] .ins-past-chev {
  transform: rotate(180deg);
}
:root[data-theme] .ins-past .ins-text {
  padding: 0 16px 8px;
}
:root[data-theme] .ins-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 24px 16px;
  border-radius: 22px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
  text-align: center;
}
:root[data-theme] .ins-empty-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 6px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 28px;
}
:root[data-theme] .ins-empty p {
  max-width: 280px;
  margin: 0;
  font-size: 13px;
  color: var(--ink-subtle);
}
:root[data-theme] .ins-how {
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--surface-3);
}
:root[data-theme] .ins-how summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-subtle);
  list-style: none;
}
:root[data-theme] .ins-how summary::-webkit-details-marker {
  display: none;
}
:root[data-theme] .ins-how p {
  margin: 10px 0 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-subtle);
}

/* ═══════════════ PROFILE — settings list with a stats row ═══════════════
   Design ref: the "Profile setting" / "Edit profile" pair. Your card, three
   stats, then grouped rows that open their own pages. */
:root[data-theme] .pf-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .pf-av,
:root[data-theme] .pf-edit-av {
  position: relative;
  flex: none;
  display: block;
  width: 74px;
  height: 74px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
}
:root[data-theme] .pf-edit-av {
  width: 104px;
  height: 104px;
  margin: 4px auto 6px;
}
:root[data-theme] .pf-av img,
:root[data-theme] .pf-edit-av img {
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  object-fit: cover;
}
:root[data-theme] .pf-av-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  color: var(--accent);
  font-size: 26px;
  font-weight: 800;
}
:root[data-theme] .pf-av-cam {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 3px solid var(--surface-1);
  border-radius: var(--r-pill);
  background: var(--mbn-disc);
  color: #fff;
  font-size: 12px;
}
:root[data-theme] .pf-edit-av .pf-av-cam {
  width: 34px;
  height: 34px;
  font-size: 14px;
}
:root[data-theme] .pf-who {
  flex: 1;
  min-width: 0;
}
:root[data-theme] .pf-name {
  margin: 0;
  overflow: hidden;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .pf-email {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--ink-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .pf-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
:root[data-theme] .pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-subtle);
  font-size: 11.5px;
  font-weight: 700;
}
:root[data-theme] .pf-chip.is-pro {
  background: linear-gradient(135deg, #f5b73b, #ff7a8a);
  color: #fff;
}
:root[data-theme] .pf-chip.is-ok {
  background: var(--success-bg);
  color: var(--success);
}
:root[data-theme] .pf-chip.is-warn {
  background: color-mix(in srgb, #f5b73b 20%, var(--surface-1));
  color: #a9770b;
}
:root[data-theme] .pf-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
:root[data-theme] .pf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  border-radius: 18px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .pf-stat b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .pf-stat .bi-fire { color: #ff7a2f; }
:root[data-theme] .pf-stat .bi-coin { color: var(--coin); }
:root[data-theme] .pf-stat span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-subtle);
}

/* Grouped rows */
:root[data-theme] .pf-group-title {
  margin: 0 0 8px 4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
:root[data-theme] .pf-rows {
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .pf-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: none;
  border-top: 1px solid var(--line-subtle);
  background: transparent;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
}
:root[data-theme] .pf-rows > .pf-row:first-child {
  border-top: none;
}
:root[data-theme] .pf-row:active {
  background: var(--surface-3);
}
:root[data-theme] .pf-row-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 17px;
}
:root[data-theme] .pf-row-ico.t-b { background: color-mix(in srgb, #4aa8e8 16%, var(--surface-1)); color: #3a8fd0; }
:root[data-theme] .pf-row-ico.t-c { background: color-mix(in srgb, #f5b73b 20%, var(--surface-1)); color: #c98b12; }
:root[data-theme] .pf-row-ico.t-d { background: color-mix(in srgb, #ff7a8a 18%, var(--surface-1)); color: #e06a7a; }
:root[data-theme] .pf-row-ico.t-warn { background: color-mix(in srgb, #f5b73b 22%, var(--surface-1)); color: #a9770b; }
:root[data-theme] .pf-row-ico.t-danger { background: color-mix(in srgb, var(--danger, #e5484d) 12%, var(--surface-1)); color: var(--danger, #e5484d); }
:root[data-theme] .pf-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
:root[data-theme] .pf-row-body b {
  font-size: 14.5px;
  font-weight: 700;
}
:root[data-theme] .pf-row-body span {
  overflow: hidden;
  font-size: 12px;
  color: var(--ink-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .pf-row-chev {
  flex: none;
  font-size: 12px;
  color: var(--ink-faint);
}
:root[data-theme] .pf-row.pf-danger b {
  color: var(--danger, #e5484d);
}
:root[data-theme] .pf-switch {
  flex: none;
}
:root[data-theme] .pf-since {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
}

/* ═══════════════ DISCOVER — search first ═══════════════ */
:root[data-theme] .dv-search {
  padding: 14px;
  border-radius: 24px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .dv-modes {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
:root[data-theme] .dv-modes button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-subtle);
  font-size: 12.5px;
  font-weight: 700;
}
:root[data-theme] .dv-modes button.is-on {
  background: var(--accent-vivid);
  color: #fff;
}
:root[data-theme] .dv-left {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
:root[data-theme] .dv-left.is-out {
  color: var(--danger, #e5484d);
}
:root[data-theme] .dv-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 6px 0 14px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}
:root[data-theme] .dv-field > .bi {
  color: var(--ink-faint);
}
:root[data-theme] .dv-field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  outline: none;
}
:root[data-theme] .dv-go {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--accent-vivid);
  color: #fff;
  font-size: 17px;
}
:root[data-theme] .dv-go:disabled {
  opacity: 0.7;
}
:root[data-theme] .dv-sources {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 10px;
}
:root[data-theme] .dv-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1.5px solid var(--line-subtle);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--ink-subtle);
  font-size: 12.5px;
  font-weight: 700;
}
:root[data-theme] .dv-source.is-on {
  border-color: var(--accent-vivid);
  background: var(--accent-soft);
  color: var(--accent);
}
:root[data-theme] .dv-examples {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
:root[data-theme] .dv-examples button {
  height: 30px;
  padding: 0 12px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-subtle);
  font-size: 12px;
  font-weight: 600;
}
:root[data-theme] .dv-note {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-faint);
}
:root[data-theme] .dv-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding: 26px 14px;
  border: 2px dashed color-mix(in srgb, var(--accent-vivid) 38%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  color: var(--ink);
  text-align: center;
}
:root[data-theme] .dv-drop .bi {
  margin-bottom: 4px;
  font-size: 26px;
  color: var(--accent-vivid);
}
:root[data-theme] .dv-drop span {
  font-size: 12px;
  color: var(--ink-subtle);
}
:root[data-theme] .dv-photo img {
  display: block;
  width: 100%;
  max-height: 220px;
  border-radius: 18px;
  object-fit: cover;
}
:root[data-theme] .dv-photo-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 10px;
}
:root[data-theme] .dv-retake {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
:root[data-theme] .dv-go-wide {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--accent-vivid);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
:root[data-theme] .dv-out {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, #f5b73b 18%, var(--surface-1));
  color: #96690a;
  font-size: 13px;
  font-weight: 600;
}
:root[data-theme] .dv-result {
  padding: 14px 16px;
  border-radius: 22px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .dv-result-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
:root[data-theme] .dv-result-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .dv-result .fd-split {
  background: var(--surface-3);
}
:root[data-theme] .dv-result .fd-split-legend {
  color: var(--ink-subtle);
}

/* ═══════════════ REMINDERS — the day as a timeline ═══════════════
   Design refs: "Today reminders" (time column, tinted cards) and
   "Set Reminder" (time + repeat days), the latter as a sheet. */
:root[data-theme] .rm-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
:root[data-theme] .rm-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink);
}
:root[data-theme] .rm-sub {
  font-size: 12.5px;
  color: var(--ink-subtle);
}
:root[data-theme] .rm-head-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
:root[data-theme] .rm-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--accent-vivid);
  color: #fff;
  font-size: 17px;
  box-shadow: 0 6px 14px -8px var(--accent-vivid);
}
:root[data-theme] .rm-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
:root[data-theme] .rm-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
}
:root[data-theme] .rm-when {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  width: 52px;
  padding-top: 2px;
  line-height: 1.1;
}
:root[data-theme] .rm-when b {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .rm-when small {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-faint);
}
:root[data-theme] .rm-card {
  --rt: var(--accent-vivid);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-left: 4px solid var(--rt);
  border-radius: 18px;
  background: color-mix(in srgb, var(--rt) 10%, var(--surface-1));
  cursor: pointer;
}
:root[data-theme] .rm-card.t-water { --rt: #4aa8e8; }
:root[data-theme] .rm-card.t-weight { --rt: #a06ce0; }
:root[data-theme] .rm-card.t-food { --rt: #ff8a3d; }
:root[data-theme] .rm-card.t-move { --rt: #3fae5a; }
:root[data-theme] .rm-card.t-sleep { --rt: #6a6ae0; }
:root[data-theme] .rm-card.t-meds { --rt: #e06a8a; }
:root[data-theme] .rm-card.t-plain { --rt: var(--accent-vivid); }
:root[data-theme] .rm-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--rt) 22%, var(--surface-1));
  color: var(--rt);
  font-size: 16px;
}
:root[data-theme] .rm-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
:root[data-theme] .rm-label {
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .rm-days {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .rm-row.is-off .rm-card {
  background: var(--surface-3);
  border-left-color: var(--line-subtle);
}
:root[data-theme] .rm-row.is-off .rm-ico {
  background: var(--surface-1);
  color: var(--ink-faint);
}
:root[data-theme] .rm-row.is-off .rm-label {
  color: var(--ink-subtle);
  text-decoration: line-through;
}
:root[data-theme] .rm-row.is-off .rm-when b {
  color: var(--ink-faint);
}
:root[data-theme] .rm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding: 26px 16px;
  border: 2px dashed color-mix(in srgb, var(--accent-vivid) 35%, transparent);
  border-radius: 22px;
  background: var(--surface-1);
  color: var(--ink);
  text-align: center;
}
:root[data-theme] .rm-empty .bi {
  margin-bottom: 4px;
  font-size: 26px;
  color: var(--accent-vivid);
}
:root[data-theme] .rm-empty span {
  font-size: 12.5px;
  color: var(--ink-subtle);
}
/* The sheet */
:root[data-theme] .rm-sheet-art {
  --rt: var(--accent-vivid);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: 2px auto 4px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--rt) 16%, var(--surface-1));
  color: var(--rt);
  font-size: 36px;
}
:root[data-theme] .rm-sheet-art.t-water { --rt: #4aa8e8; }
:root[data-theme] .rm-sheet-art.t-weight { --rt: #a06ce0; }
:root[data-theme] .rm-sheet-art.t-food { --rt: #ff8a3d; }
:root[data-theme] .rm-sheet-art.t-move { --rt: #3fae5a; }
:root[data-theme] .rm-sheet-art.t-sleep { --rt: #6a6ae0; }
:root[data-theme] .rm-sheet-art.t-meds { --rt: #e06a8a; }
:root[data-theme] .rm-time-input {
  width: 100%;
  font-size: 18px;
  font-weight: 800;
}
:root[data-theme] .rm-days-pick {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
:root[data-theme] .rm-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--line-subtle);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--ink-subtle);
  font-size: 13px;
  font-weight: 800;
}
:root[data-theme] .rm-day.is-all {
  width: auto;
  padding: 0 14px;
  font-size: 12.5px;
}
:root[data-theme] .rm-day.is-on {
  border-color: var(--accent-vivid);
  background: var(--accent-vivid);
  color: #fff;
}
:root[data-theme] .rm-optional {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-faint);
}

/* ═══════════════ ONBOARDING — one question per screen ═══════════════
   Design ref: the step-question set (progress segments, a chapter pill, one
   big question, chips or the ruler, one Continue). */
:root[data-theme] .ob {
  display: flex;
  flex-direction: column;
  /* .auth-body is a flex row, so without this the screen sized itself to its
     widest child — the ruler — and pushed the progress bar, the question and
     the button off the right edge of the phone. */
  /* Pinned to the viewport rather than measured against it: inset:0 is the one
     full-screen box every mobile browser agrees on, so the screen is never
     taller than what you can see and the page itself never scrolls. The
     question area below scrolls on its own when a screen is short, which keeps
     the progress bar and the button in place. */
  position: fixed;
  inset: 0;
  min-width: 0;
  padding: max(12px, env(safe-area-inset-top)) var(--sp-4) max(16px, env(safe-area-inset-bottom));
  background: var(--canvas);
}
:root[data-theme] .ob-top {
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 4px 0 18px;
}
:root[data-theme] .ob-back {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
:root[data-theme] .ob-back:disabled {
  opacity: 0.35;
}
:root[data-theme] .ob-bars {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 4px;
}
:root[data-theme] .ob-bars span {
  flex: 1;
  height: 5px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  transition: background var(--dur-2) var(--ease-out);
}
:root[data-theme] .ob-bars span.is-done {
  background: var(--accent-vivid);
}
:root[data-theme] .ob-skip-all {
  flex: none;
  border: none;
  background: none;
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 700;
}
:root[data-theme] .ob-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
:root[data-theme] .ob-chapter {
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
  color: var(--ink-subtle);
  font-size: 12.5px;
  font-weight: 700;
}
:root[data-theme] .ob-q {
  max-width: 320px;
  margin: 18px 0 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.6px;
  color: var(--ink);
}
:root[data-theme] .ob-hint {
  max-width: 300px;
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-subtle);
}
:root[data-theme] .ob-answer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-width: min(420px, 100%);
  margin: 26px 0 0;
}
:root[data-theme] .ob-hello img {
  display: block;
  width: min(180px, 52vw);
  /* Shelly gives up height first on a short screen, so the welcome and avatar
     screens still fit without scrolling at all. */
  max-height: 30svh;
  object-fit: contain;
  margin: 0 auto;
}
:root[data-theme] .ob-avatar-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px auto 0;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
  color: var(--accent);
  font-size: 14.5px;
  font-weight: 800;
  text-decoration: none;
}
:root[data-theme] .ob-input {
  width: 100%;
  height: 60px;
  padding: 0 18px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  outline: none;
}
:root[data-theme] .ob-input:focus {
  border-color: var(--accent-vivid);
}
:root[data-theme] .ob-pills {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:root[data-theme] .ob-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 700;
  text-align: left;
}
:root[data-theme] .ob-pill .bi {
  color: var(--accent);
}
:root[data-theme] .ob-pill.is-on {
  border-color: var(--accent-vivid);
  background: var(--accent-soft);
  color: var(--accent);
}
:root[data-theme] .ob-error {
  margin: 14px 0 0;
  color: var(--danger, #e5484d);
  font-size: 13.5px;
  font-weight: 600;
}
:root[data-theme] .ob-foot {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
}
:root[data-theme] .ob-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  height: 56px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--mbn-disc);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 12px 24px -14px var(--mbn-disc);
}
:root[data-theme] .ob-cta:disabled {
  opacity: 0.6;
}
:root[data-theme] .ob-skip-one {
  border: none;
  background: none;
  color: var(--ink-subtle);
  font-size: 13.5px;
  font-weight: 700;
}
/* The plan on the last screen */
:root[data-theme] .ob-plan {
  width: 100%;
  padding: 18px;
  border-radius: 24px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .ob-plan-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-subtle);
}
:root[data-theme] .ob-plan-hero b {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--accent);
}
:root[data-theme] .ob-plan-hero span {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-subtle);
}
:root[data-theme] .ob-plan-rows {
  display: flex;
  flex-direction: column;
}
:root[data-theme] .ob-plan-rows > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-subtle);
  font-size: 13.5px;
}
:root[data-theme] .ob-plan-rows > div:last-child {
  border-bottom: none;
}
:root[data-theme] .ob-plan-rows span {
  color: var(--ink-subtle);
}
:root[data-theme] .ob-plan-rows b {
  font-weight: 800;
  color: var(--ink);
}
:root[data-theme] .ob-plan-note {
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-subtle);
  text-align: left;
}
:root[data-theme] .ob-plan-note.is-aggressive {
  color: #b0521f;
}

/* ── Fixes ───────────────────────────────────────────────────────────── */

/* The checklist label kept a 32px minimum height from the older sheets, so
   its 17.5px line sat at the top of the box and read as higher than the
   tick beside it. Centre the line inside whatever height the row has. */
:root[data-theme] .content-area .check-row .check-label {
  display: flex;
  align-items: center;
  min-height: 0;
}
:root[data-theme] .content-area .check-row {
  align-items: center;
}

/* A masked password is a row of dots — at body size they read as specks.
   Only once something is typed, so the placeholder keeps its own size. */
:root[data-theme] input[type='password']:not(:placeholder-shown) {
  font-size: 19px;
  letter-spacing: 0.16em;
}

/* ═══════════════ APP FEEL ═══════════════
   The things that make a web page feel like a website on a phone: the grey
   tap flash, the 300ms delay, double-tap zoom, the browser's rubber-band, iOS
   zooming into small inputs, and text selecting when you meant to tap. */
:root[data-theme] html,
:root[data-theme] body {
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}
/* No scrollbar, anywhere. An app scrolls without one — the bar is what gives
   a phone screen away as a web page, and on desktop it reserved a grey gutter
   down the side of the canvas. Scrolling itself is untouched: wheel, drag,
   keyboard and momentum all behave exactly as before, only the indicator is
   gone. */
:root[data-theme],
:root[data-theme] body,
:root[data-theme] * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
:root[data-theme]::-webkit-scrollbar,
:root[data-theme] body::-webkit-scrollbar,
:root[data-theme] *::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
:root[data-theme] button,
:root[data-theme] a,
:root[data-theme] label,
:root[data-theme] summary,
:root[data-theme] [role='button'],
:root[data-theme] [role='tab'],
:root[data-theme] .check-row,
:root[data-theme] .ac-card,
:root[data-theme] .rm-card,
:root[data-theme] .date-chip {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Anything you might actually want to copy stays selectable. */
:root[data-theme] input,
:root[data-theme] textarea,
:root[data-theme] .ins-text,
:root[data-theme] .fd-note,
:root[data-theme] .rwd-code b {
  -webkit-user-select: text;
  user-select: text;
}
/* Under 16px, iOS zooms the page when a field takes focus. */
@media (max-width: 991px) {
  :root[data-theme] input,
  :root[data-theme] select,
  :root[data-theme] textarea,
  :root[data-theme] .form-control-custom,
  :root[data-theme] .fd-input,
  :root[data-theme] .ob-input {
    font-size: max(16px, 1em);
  }
}
/* Sideways strips keep iOS momentum and stop at their own edges. */
:root[data-theme] .snav-row,
:root[data-theme] .ac-bars,
:root[data-theme] .avb-row,
:root[data-theme] .avb-tabs,
:root[data-theme] .stk-miles,
:root[data-theme] .rwd-tabs,
:root[data-theme] .date-strip,
:root[data-theme] .afs-tabs {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
/* Each screen arrives instead of blinking into place. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme] .content-area {
    animation: ab-page-in 0.24s var(--ease-out) both;
  }
}
@keyframes ab-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
/* A press should answer immediately, the way a native control does. */
:root[data-theme] .pf-row:active,
:root[data-theme] .fdb-row:active,
:root[data-theme] .rm-card:active,
:root[data-theme] .ins-card:active,
:root[data-theme] .pg-tile:active,
:root[data-theme] .rwd-tile:active,
:root[data-theme] .meal-card-add:active,
:root[data-theme] .ob-pill:active {
  transform: scale(0.985);
}
:root[data-theme] .pf-row,
:root[data-theme] .fdb-row,
:root[data-theme] .rm-card,
:root[data-theme] .ins-card,
:root[data-theme] .pg-tile,
:root[data-theme] .rwd-tile,
:root[data-theme] .ob-pill {
  transition: transform 0.12s var(--ease-out), background-color 0.18s var(--ease-out);
}

/* A framed drawing inside a square tile keeps its own proportions. */
:root[data-theme] .avb-tile-fig svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ═══════════════ STREAK CELEBRATION ═══════════════
   The first open of a new day, full screen: the flame, the run, the week.
   Pinned with inset:0 rather than sized in viewport units — the same reason
   the onboarding screen is (see §"A page is exactly as tall as what's on it"). */
:root[data-theme] .stkc {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1080);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background:
    radial-gradient(70% 50% at 50% 28%, color-mix(in srgb, var(--accent-vivid) 26%, transparent), transparent 70%),
    color-mix(in srgb, var(--canvas) 92%, #2a1430);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: stkc-in 260ms var(--ease-out) both;
  overscroll-behavior: contain;
}
:root[data-theme] .stkc.is-leaving {
  animation: stkc-out 240ms var(--ease-out) both;
}
:root[data-theme] .stkc-sheet {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 22px 22px;
  border-radius: 30px;
  background: var(--surface-1);
  box-shadow: 0 32px 70px -28px rgba(15, 17, 19, 0.55);
  animation: stkc-rise 340ms var(--ease-out) both 60ms;
}
/* The warmth behind the flame, breathing. */
:root[data-theme] .stkc-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  width: 280px;
  height: 280px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-vivid) 32%, transparent), transparent 65%);
  pointer-events: none;
  animation: stkc-breathe 3.4s ease-in-out infinite;
}
:root[data-theme] .stkc-flame {
  position: relative;
  z-index: 1;
}
:root[data-theme] .stkc-flame img {
  display: block;
  width: 156px;
  height: 156px;
  filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--accent-vivid) 42%, transparent));
  animation: stkc-flare 620ms var(--ease-out) both 120ms;
}
:root[data-theme] .stkc-num {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  font-size: 68px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2.4px;
  color: var(--ink);
  animation: stkc-rise 420ms var(--ease-out) both 200ms;
}
:root[data-theme] .stkc-unit {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--ink);
}
:root[data-theme] .stkc-title {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--ink);
}
:root[data-theme] .stkc-body {
  margin: 8px 0 0;
  max-width: 270px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-subtle);
}
/* The week, Monday to Sunday: one circle per day, the day's letter inside it
   until the day is kept, when it becomes a tick. */
:root[data-theme] .stkc-week {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
:root[data-theme] .stkc-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 700;
}
:root[data-theme] .stkc-day.is-on {
  background: var(--accent-vivid);
  color: #fff;
  font-size: 16px;
}
/* Today wears a halo whether or not it has been kept yet. */
:root[data-theme] .stkc-day.is-today {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-vivid) 18%, transparent);
}
:root[data-theme] .stkc-day.is-today:not(.is-on) {
  background: color-mix(in srgb, var(--accent-vivid) 16%, var(--surface-3));
  color: var(--accent);
}
:root[data-theme] .stkc-day.is-future {
  opacity: 0.55;
}
:root[data-theme] .stkc-best {
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
}
:root[data-theme] .stkc-best b {
  color: var(--ink-subtle);
}
:root[data-theme] .stkc-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  margin-top: 18px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--mbn-disc);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
:root[data-theme] .stkc-link {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
/* A milestone day gets a warmer sheet. */
:root[data-theme] .stkc.is-surprise .stkc-sheet {
  background:
    radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--accent-vivid) 22%, transparent), transparent 70%),
    var(--surface-1);
}

@keyframes stkc-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes stkc-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes stkc-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes stkc-flare {
  0% { opacity: 0; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes stkc-breathe {
  0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .stkc,
  :root[data-theme] .stkc-sheet,
  :root[data-theme] .stkc-num,
  :root[data-theme] .stkc-flame img,
  :root[data-theme] .stkc-glow {
    animation: none;
  }
}


/* ═══════════════ SIDEBAR GROUPS ═══════════════
   One group open at a time (the sidebar owns which), and a group holding the
   current page says so even while it's closed. */

/* The list slides rather than appearing: display:none can't be animated, so
   the rows are laid out with grid and the row's height is what moves. */
:root[data-theme] .sidebar-nav .nav-group-items {
  display: grid !important;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 240ms var(--ease-out), opacity 180ms linear;
  opacity: 0;
}
:root[data-theme] .sidebar-nav .nav-group.open .nav-group-items {
  grid-template-rows: 1fr;
  opacity: 1;
}
/* grid's implicit row is the thing being sized, so the links need a wrapper
   that can be clipped — min-height:0 lets it collapse to nothing. */
:root[data-theme] .sidebar-nav .nav-group-items > * {
  min-height: 0;
}
/* A closed group has to measure exactly what a plain link measures — 43px.
   Two things were adding to it: the flex gap between the header and the list,
   which applied even with nothing below it, and the list's own top padding,
   which the collapsed grid row couldn't take back. Both now live inside the
   part that collapses, so a closed group is just its header. */
:root[data-theme] .sidebar-nav .nav-group {
  gap: 0;
}
:root[data-theme] .sidebar-nav .nav-group-inner {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 0;
  transition: padding-top 240ms var(--ease-out);
}
:root[data-theme] .sidebar-nav .nav-group.open .nav-group-inner {
  padding-top: 0.3rem;
}
/* A closed group whose page you're on: a quiet accent dot, not the full pill
   that belongs to the page's own link. */
:root[data-theme] .sidebar-nav .nav-group-header.is-current {
  color: var(--accent) !important;
  font-weight: 600;
}
:root[data-theme] .sidebar-nav .nav-group-header.is-current i:first-child {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
}
:root[data-theme] .sidebar-nav .nav-group.open .nav-group-header.is-current {
  color: var(--rail-ink) !important;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .sidebar-nav .nav-group-items {
    transition: none;
  }
}

/* ═══════════════ FRIENDS + LEADERBOARD ═══════════════
   Their own section now. Adding someone leads the Friends screen — it is what
   people come here to do. */
:root[data-theme] .frn,
:root[data-theme] .lbd {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
:root[data-theme] .frn-add {
  padding: 18px 16px 14px;
  border-radius: 24px;
  background:
    radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--accent-vivid) 18%, transparent), transparent 70%),
    var(--surface-1);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .frn-add-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
}
:root[data-theme] .frn-add-title .bi {
  color: var(--accent);
}
:root[data-theme] .frn-add-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
:root[data-theme] .frn-add-row .form-control-custom {
  flex: 1;
  min-width: 0;
}
:root[data-theme] .frn-add-row .btn {
  flex: none;
}
:root[data-theme] .frn-add-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-subtle);
}
:root[data-theme] .frn-add-note b {
  color: var(--accent);
}
/* The leaderboard's way back to adding people. */
:root[data-theme] .lbd-cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}
:root[data-theme] .lbd-cta > .bi:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-vivid) 12%, transparent);
  color: var(--accent);
  font-size: 17px;
}
:root[data-theme] .lbd-cta span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
:root[data-theme] .lbd-cta b {
  font-size: 14px;
  color: var(--ink);
}
:root[data-theme] .lbd-cta small {
  font-size: 12px;
  color: var(--ink-subtle);
}
:root[data-theme] .lbd-cta > .bi:last-child {
  color: var(--ink-faint);
}
:root[data-theme] .rwd-board.is-busy {
  opacity: 0.55;
  transition: opacity var(--dur-2) var(--ease-out);
}

/* ── Who matches what you typed, under the Add field ── */
:root[data-theme] .frn-sugg {
  margin-top: 10px;
  border-radius: 16px;
  background: var(--surface-3);
  overflow: hidden;
}
:root[data-theme] .frn-sugg-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-subtle);
}
:root[data-theme] .frn-sugg-row:last-child {
  border-bottom: none;
}
/* Their own face, on the left. */
:root[data-theme] .frn-sugg-face {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent-vivid) 14%, transparent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
/* Rounded on the image itself, not just clipped by the circle around it: iOS
   doesn't reliably clip a child against a rounded parent once the row is
   composited, which left the avatar showing square corners on a real phone.
   The solid fill matters too — an avatar SVG is a circle on a transparent
   canvas, so without it the tint behind shows as a ring around the face.
   Same construction as the topbar avatar, which has always rendered right. */
:root[data-theme] .frn-sugg-face img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-1);
}
:root[data-theme] .frn-sugg-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
:root[data-theme] .frn-sugg-who b {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .frn-sugg-who small {
  font-size: 11.5px;
  color: var(--ink-subtle);
}
:root[data-theme] .frn-sugg-state {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-faint);
}
:root[data-theme] .frn-sugg-empty {
  padding: 14px 12px;
  font-size: 12.5px;
  text-align: center;
  color: var(--ink-subtle);
}

/* ── The global board: your people, marked out in the crowd ── */
:root[data-theme] .rwd-rank.is-friend {
  background: color-mix(in srgb, var(--accent-vivid) 7%, transparent);
}
:root[data-theme] .rwd-friend-tag {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent-vivid) 16%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
:root[data-theme] .rwd-rank .rwd-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-1);
}
:root[data-theme] .lbd-lock {
  margin-left: 5px;
  font-size: 9px;
  opacity: 0.7;
}
:root[data-theme] .lbd-note {
  margin: 12px 0 0;
  font-size: 11.5px;
  text-align: center;
  color: var(--ink-faint);
}
/* Everyone's board, behind Pro. */
:root[data-theme] .lbd-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 12px 6px;
}
:root[data-theme] .lbd-locked-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-vivid) 12%, transparent);
  color: var(--accent);
  font-size: 25px;
}
:root[data-theme] .lbd-locked h3 {
  margin: 12px 0 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
}
:root[data-theme] .lbd-locked p {
  max-width: 290px;
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-subtle);
}
:root[data-theme] .lbd-locked-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  background: var(--mbn-disc);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
/* A friend on the podium, marked the same way as one in the list. */
:root[data-theme] .rwd-seat.is-friend .rwd-seat-avatar {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-vivid) 45%, transparent);
}
:root[data-theme] .rwd-seat-friend {
  margin-left: 4px;
  font-size: 10px;
  color: var(--accent);
}


/* ═══════════════ REMINDERS — flatten the nesting ═══════════════
   The check-in blocks were a white card with a shadow sitting inside another
   white card with a shadow, and the fields below them made a third. Stacked
   shadows are what make a layout look cheap: the eye reads three floating
   planes where there is only one idea.

   One card per idea. Inside it, rows are flat — a hairline between them does
   the separating, the way the food log and the profile list already do it. */
:root[data-theme] .rm-page .card-section {
  padding: 16px 16px 14px;
  border-radius: 22px;
}
:root[data-theme] .rm-page .checkin-card {
  padding: 12px 0;
  border: none;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
}
:root[data-theme] .rm-page .checkin-card + .checkin-card {
  border-top: 1px solid var(--line-subtle);
}
/* The icon keeps its tint — that's the page's only colour, and it reads as
   part of the row rather than as a raised chip. */
:root[data-theme] .rm-page .checkin-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  box-shadow: none;
  font-size: 17px;
}
:root[data-theme] .rm-page .checkin-note {
  margin-bottom: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-subtle);
}
/* The time fields under a switched-on check-in: inset, not raised. */
:root[data-theme] .rm-page .checkin-slot,
:root[data-theme] .rm-page .row > [class^='col'] > .form-control-custom {
  background: var(--surface-3);
  box-shadow: none;
}
:root[data-theme] .rm-page .section-label {
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
}
:root[data-theme] .rm-page .section-label .bi {
  color: var(--accent);
}
/* The notification banner is a notice, not a third card competing with them. */
:root[data-theme] .rm-page .rm-notice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent-vivid) 8%, var(--surface-1));
  box-shadow: none;
}

/* ═══════════════ FORM FIELDS — never wider than what holds them ═══════════════
   Two separate things push a field out of its box on a phone, and both are
   invisible on a desktop browser:

   1. A field inside a flex row is a flex item, and a flex item's default
      `min-width: auto` means "never shrink below my content". A field with a
      long value, or a native control with a wide minimum, then pushes the row
      open and out of the screen.

   2. iOS draws date and time inputs with its own native control, which carries
      a minimum width of its own — `width: 100%` cannot shrink it. Handing the
      sizing back to CSS with `appearance: none` can; the picker still opens on
      tap, only the chrome is ours. */
:root[data-theme] input,
:root[data-theme] select,
:root[data-theme] textarea {
  max-width: 100%;
  min-width: 0;
}
:root[data-theme] input[type='time'],
:root[data-theme] input[type='date'],
:root[data-theme] input[type='datetime-local'],
:root[data-theme] input[type='month'],
:root[data-theme] input[type='week'] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
/* No `width: 100%` in the rule above. `appearance: none` is what frees the
   field from iOS's minimum; forcing a width as well reached past the visible
   fields and blew up the 1×1 hidden <input type="date"> behind the date
   selector to the full page width, which is what pushed the Daily Log sideways.
   The fields that should fill their row already say so themselves. */
:root[data-theme] .form-control-custom[type='time'],
:root[data-theme] .form-control-custom[type='date'],
:root[data-theme] .fd-input[type='time'],
:root[data-theme] .fd-input[type='date'] {
  width: 100%;
}
/* The rows those fields sit in have to be willing to shrink too. */
:root[data-theme] .rwd-inline,
:root[data-theme] .frn-add-row,
:root[data-theme] .fd-row,
:root[data-theme] .rm-page .row > [class^='col'] {
  min-width: 0;
}
:root[data-theme] .rwd-inline > *,
:root[data-theme] .frn-add-row > * {
  min-width: 0;
}

/* A dialog owns the screen: the tab bar steps out while one is open, rather
   than sitting over the sheet's buttons (they land at the same height on a
   phone). Browsers without :has() keep the bar behind the scrim, which is
   still tappable-safe — the overlay is above it. */
:root[data-theme] body:has(.ab-modal-overlay) .mbn-dock,
:root[data-theme] body:has(.stkc) .mbn-dock {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out);
}

/* Nothing scrolls the page sideways. `clip` rather than `hidden`: it stops the
   sideways scroll without turning the page into a scroll container, which
   would break every `position: sticky` in the app. A genuinely wide thing —
   the ruler, the date strip, a tab row — still scrolls inside its own box. */
:root[data-theme],
:root[data-theme] body,
:root[data-theme] .main-content {
  overflow-x: clip;
}

/* ═══════════════ ADMIN — the model bar ═══════════════
   What the app is calling, and the way to change it, on one line at the top of
   the panel. It is read far more often than it is changed, so the fields live
   behind the button rather than sitting open. */
:root[data-theme] .adm-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 18px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
:root[data-theme] .adm-top-now {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
:root[data-theme] .adm-top-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
:root[data-theme] .adm-top-now b {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .adm-top-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--mbn-disc);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}
/* The two models the confirmation is about to make live. */
:root[data-theme] .adm-confirm-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  border-radius: 14px;
  background: var(--surface-3);
  overflow: hidden;
}
:root[data-theme] .adm-confirm-list li {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
}
:root[data-theme] .adm-confirm-list li + li {
  border-top: 1px solid var(--line-subtle);
}
:root[data-theme] .adm-confirm-list span {
  flex: none;
  width: 52px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-faint);
}
:root[data-theme] .adm-confirm-list b {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ── The AI model screen ── */
:root[data-theme] .aim {
  max-width: 560px;
  margin-inline: auto;
}
:root[data-theme] .aim-now {
  margin-bottom: 14px;
  border-radius: 18px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
:root[data-theme] .aim-now-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  padding: 11px 14px;
}
:root[data-theme] .aim-now-row + .aim-now-row {
  border-top: 1px solid var(--line-subtle);
}
:root[data-theme] .aim-now-row > span {
  flex: none;
  width: 52px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-faint);
}
:root[data-theme] .aim-now-row > b {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}
:root[data-theme] .aim-now-row > em {
  flex: none;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  color: var(--ink-faint);
}
/* The suggestions, as chips — tapping one fills the field. */
:root[data-theme] .aim-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
:root[data-theme] .aim-pick {
  padding: 6px 11px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-subtle);
  font-size: 11.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
:root[data-theme] .aim-pick.is-on {
  border-color: var(--accent-vivid);
  background: color-mix(in srgb, var(--accent-vivid) 12%, transparent);
  color: var(--accent);
}
:root[data-theme] .aim-note {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-faint);
}
:root[data-theme] .aim-foot .btn {
  width: 100%;
}
:root[data-theme] .aim-list-note {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-faint);
}
:root[data-theme] .aim-list-note.is-bad {
  color: var(--mc-kcal, #e0568c);
}
:root[data-theme] .aim-list-note code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--surface-3);
  font-size: 11px;
}
:root[data-theme] .aim-test {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 13px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-subtle);
  font-size: 12px;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .aim-list-note.is-good {
  color: #2fb35a;
}


/* ── Sign in with a provider ───────────────────────────────────────────
   Under the form, after a labelled rule. Only the providers this server has
   credentials for are rendered, so there is never a button that can't work. */
:root[data-theme] .auth-social {
  margin-top: 18px;
}
:root[data-theme] .auth-or {
  position: relative;
  margin: 0 0 14px;
  text-align: center;
}
:root[data-theme] .auth-or::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
:root[data-theme] .auth-or span {
  position: relative;
  padding: 0 12px;
  background: var(--surface-1);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
}
:root[data-theme] .auth-social-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* With a provider row to follow it, the form stops stretching the gap above
   the submit button: the button belongs with the fields it submits, and the
   space left over goes underneath the lot. */
:root[data-theme] .auth-form:has(.auth-social) > .card-section,
:root[data-theme] .auth-form:has(.auth-social) form {
  flex: none;
}
:root[data-theme] .auth-social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 140ms var(--ease-out), transform 140ms var(--ease-out),
    box-shadow 140ms var(--ease-out);
}
:root[data-theme] .auth-social-btn:hover {
  border-color: color-mix(in srgb, var(--accent-vivid) 40%, var(--line));
  box-shadow: 0 6px 18px -12px rgba(15, 17, 19, 0.5);
}
:root[data-theme] .auth-social-btn:active {
  transform: translateY(1px);
}
:root[data-theme] .auth-social-mark {
  display: flex;
  align-items: center;
}
/* On a phone the button says what it does; the mark alone is a guessing game
   at thumb size. */
:root[data-theme] .auth-social-label {
  font-size: 15px;
}

/* Apple's mark is a silhouette: it has to invert with the theme. */
:root[data-theme] .auth-social-btn.is-apple .auth-social-mark {
  color: var(--ink);
}

/* ── Desktop: the form on the left, the picture on the right ───────────
   Below 992px the screen stays as it is — a phone layout in a phone-shaped
   frame. From here the same two sections turn into a landscape panel: the
   card takes the left half, and .auth-side becomes the showcase on the
   right. The DOM order doesn't change; `order` does the swap. */
@media (min-width: 992px) {
  :root[data-theme] .auth-stage {
    width: min(1100px, calc(100vw - 72px));
    height: min(720px, calc(100dvh - 72px));
    flex-direction: row;
    gap: 16px;
    padding: 16px;
    background: var(--surface-1);
    border-radius: 32px;
  }

  /* Top-left of the picture panel. */
  :root[data-theme] .auth-wrapper .auth-brand {
    flex: none;
    margin-bottom: 4px;
  }
  :root[data-theme] .auth-wrapper .auth-brand img {
    width: 30px;
    height: 30px;
  }
  :root[data-theme] .auth-wrapper .auth-brand span {
    font-size: 17px;
  }

  /* Left: the form, vertically centred with room to breathe. */
  :root[data-theme] .auth-wrapper .auth-card {
    order: 1;
    flex: 1 1 46%;
    justify-content: center;
    margin: 0;
    padding: 28px clamp(28px, 4vw, 52px);
    border-radius: 24px;
    box-shadow: none;
    background: transparent;
    /* A short window, or a long form, scrolls rather than spilling out. */
    overflow-y: auto;
    scrollbar-width: none;
  }
  :root[data-theme] .auth-wrapper .auth-card::-webkit-scrollbar {
    display: none;
  }
  :root[data-theme] .auth-wrapper .auth-card > * {
    max-width: 380px;
  }
  :root[data-theme] .auth-form {
    flex: none;
    min-height: 0;
    overflow: visible;
  }

  /* Right: the picture. The hero keeps its own layout inside it. */
  :root[data-theme] .auth-side {
    order: 2;
    flex: 1 1 54%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 34px;
    border-radius: 24px;
    background:
      radial-gradient(90% 60% at 20% 8%, color-mix(in srgb, var(--accent-vivid) 26%, var(--surface-1)) 0%, transparent 64%),
      radial-gradient(70% 50% at 92% 92%, color-mix(in srgb, var(--brand-lime) 22%, var(--surface-1)) 0%, transparent 62%),
      linear-gradient(160deg, color-mix(in srgb, var(--accent-vivid) 14%, var(--surface-1)) 0%, var(--canvas) 100%);
  }
  :root[data-theme] .auth-hero {
    position: relative;
    top: auto;
    bottom: auto;
    flex: 1;
    max-width: none;
    margin: 0;
  }
  :root[data-theme] .auth-shelly-box {
    width: 240px;
    max-height: none;
    height: 100%;
    align-items: center;
  }
  :root[data-theme] .auth-bubble {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }
  :root[data-theme] .auth-bubble {
    display: flex;
  }
  :root[data-theme] .auth-bubble.b1 { top: 8%; left: 10%; }
  :root[data-theme] .auth-bubble.b2 { top: 4%; right: 12%; }
  :root[data-theme] .auth-bubble.b3 { top: 28%; left: 2%; }
  :root[data-theme] .auth-bubble.b4 { top: 24%; right: 2%; }
  :root[data-theme] .auth-bubble.b5 { top: 52%; left: 4%; }
  :root[data-theme] .auth-bubble.b6 { top: 49%; right: 4%; }
  :root[data-theme] .auth-bubble.b7 { top: 74%; left: 12%; }
  :root[data-theme] .auth-bubble.b8 { top: 77%; right: 10%; }

  /* Side by side, marks only: there is a headline beside them doing the
     explaining, and three named buttons in a column would tower. */
  :root[data-theme] .auth-social {
    margin-top: 14px;
  }
  :root[data-theme] .auth-social-row {
    flex-direction: row;
  }
  /* Four fields, a button and a provider row have to share one landscape
     card: a couple of pixels off each gap is the difference between fitting
     and scrolling. */
  :root[data-theme] .auth-form form > .mb-3 {
    margin-bottom: 9px !important;
  }
  :root[data-theme] .auth-social-btn {
    min-height: 44px;
  }
  :root[data-theme] .auth-social-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The line under the picture, as in the reference. */
  :root[data-theme] .auth-showcase {
    flex: none;
    text-align: center;
    max-width: 420px;
    margin: 18px auto 0;
  }
  :root[data-theme] .auth-showcase h2 {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--hdr-plum);
  }
  :root[data-theme] .auth-showcase p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-muted);
  }
}
/* The showcase copy is for the wide layout only. */
@media (max-width: 991.98px) {
  :root[data-theme] .auth-showcase {
    display: none;
  }
}


/* ── The welcome screen's two choices ──────────────────────────────────
   One filled button and one outlined, stacked: a phone reads a column of
   full-width buttons faster than a row, and the outlined one is plainly the
   quieter of the two without being hard to find. */
:root[data-theme] .auth-choice {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
:root[data-theme] .auth-choice .auth-submit {
  /* It is an anchor, not a button: the link styles have to be answered or it
     arrives underlined and ranged left inside the pill. */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-decoration: none;
}
:root[data-theme] .auth-choice-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 1.5px solid color-mix(in srgb, var(--accent-vivid) 28%, var(--line));
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
:root[data-theme] .auth-choice-alt:hover {
  border-color: var(--accent-vivid);
  background: color-mix(in srgb, var(--accent-vivid) 7%, transparent);
  color: var(--accent);
}


/* ── Two shapes of auth screen ─────────────────────────────────────────
   The welcome screen is one colourful sheet — mascot, question, two answers,
   no white panel cutting it in half. Every screen after it is the opposite:
   plain white, no mascot, one job. Which is which is told by the presence of
   the choice block, so no route names are baked into the stylesheet. */
@media (max-width: 991.98px) {
  /* ── Welcome: colour, edge to edge ── */
  /* The wash runs the whole height here. Elsewhere it fades into the canvas
     behind a white sheet; with no sheet there is nothing to fade into. */
  :root[data-theme] .auth-wrapper:has(.auth-choice) .auth-stage {
    background:
      radial-gradient(90% 46% at 14% 2%, color-mix(in srgb, var(--accent-vivid) 28%, var(--surface-1)) 0%, transparent 62%),
      radial-gradient(70% 40% at 96% 12%, color-mix(in srgb, var(--brand-lime) 24%, var(--surface-1)) 0%, transparent 60%),
      linear-gradient(180deg, color-mix(in srgb, var(--accent-vivid) 14%, var(--surface-1)) 0%, color-mix(in srgb, var(--accent-vivid) 9%, var(--canvas)) 100%);
  }
  :root[data-theme] .auth-wrapper:has(.auth-choice) .auth-card {
    flex: none;
    margin: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 22px max(26px, env(safe-area-inset-bottom));
  }
  /* A column, so the picture can take the room the sheet used to have. The
     hero is absolutely positioned by default; here it becomes a flex child,
     which means it needs a height of its own before the mascot — sized at
     100% of it — has anything to be 100% of. */
  :root[data-theme] .auth-wrapper:has(.auth-choice) .auth-side {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: auto;
    min-height: 0;
    padding-bottom: 6px;
  }
  /* Capped and centred: left to fill a tall screen the ring of icons drifts
     apart and the mascot sinks to the bottom of it. */
  :root[data-theme] .auth-wrapper:has(.auth-choice) .auth-hero {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    flex: 1;
    width: 100%;
    max-width: 330px;
    max-height: 430px;
    min-height: 0;
    margin: auto;
  }
  :root[data-theme] .auth-wrapper:has(.auth-choice) .auth-shelly-box {
    top: 50%;
    bottom: auto;
    height: auto;
    width: 216px;
    max-height: none;
    transform: translate(-50%, -50%);
    align-items: center;
  }
  /* A tighter ring around it. */
  :root[data-theme] .auth-wrapper:has(.auth-choice) .auth-bubble.b1 { top: 4%; left: 8%; }
  :root[data-theme] .auth-wrapper:has(.auth-choice) .auth-bubble.b2 { top: 1%; right: 10%; }
  :root[data-theme] .auth-wrapper:has(.auth-choice) .auth-bubble.b3 { top: 26%; left: -2%; }
  :root[data-theme] .auth-wrapper:has(.auth-choice) .auth-bubble.b4 { top: 22%; right: -2%; }
  :root[data-theme] .auth-wrapper:has(.auth-choice) .auth-bubble.b5 { top: 55%; left: -3%; }
  :root[data-theme] .auth-wrapper:has(.auth-choice) .auth-bubble.b6 { top: 52%; right: -3%; }
  :root[data-theme] .auth-wrapper:has(.auth-choice) .auth-bubble.b7 { top: 80%; left: 8%; }
  :root[data-theme] .auth-wrapper:has(.auth-choice) .auth-bubble.b8 { top: 83%; right: 9%; }
  :root[data-theme] .auth-wrapper:has(.auth-choice) .auth-bubble {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
  :root[data-theme] .auth-wrapper:has(.auth-choice) .auth-head {
    padding: 8px 0 6px;
  }
  :root[data-theme] .auth-wrapper:has(.auth-choice) .auth-form {
    flex: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  /* ── Form screens: white, and only the form ──
     The card is a column that scrolls. The title and fields sit in the middle
     of it via auto margins — which centre the group when there is room and
     collapse to nothing when there isn't, so a long form is never clipped the
     way `justify-content: center` would clip it. The button stays put at the
     bottom while those fields scroll behind it. */
  :root[data-theme] .auth-wrapper:not(:has(.auth-choice)) .auth-side {
    display: none;
  }
  :root[data-theme] .auth-wrapper:not(:has(.auth-choice)) .auth-card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    scrollbar-width: none;
    /* When the browser scrolls a focused field into view it stops short of
       the pinned button, instead of parking the field underneath it. */
    scroll-padding-bottom: 84px;
    /* Room for the back button, which is pinned to the card, not the title. */
    padding: calc(max(18px, var(--sa-top, 0px)) + 52px) 22px
      max(18px, env(safe-area-inset-bottom));
  }
  :root[data-theme] .auth-wrapper:not(:has(.auth-choice)) .auth-card::-webkit-scrollbar {
    display: none;
  }

  /* The arrow belongs to the screen, so it stays at the top while the content
     it sits above moves to the middle. */
  :root[data-theme] .auth-wrapper:not(:has(.auth-choice)) .auth-head {
    position: static;
    text-align: left;
    padding-top: 0;
    margin-top: auto;
  }
  :root[data-theme] .auth-wrapper:not(:has(.auth-choice)) .auth-head .auth-title {
    padding: 0;
  }
  :root[data-theme] .auth-wrapper:not(:has(.auth-choice)) .auth-back {
    top: max(18px, var(--sa-top, 0px));
    left: 22px;
  }

  /* …and the other half of the centring. */
  :root[data-theme] .auth-wrapper:not(:has(.auth-choice)) .auth-form {
    flex: none;
    min-height: 0;
    margin-bottom: auto;
    overflow: visible;
  }

  /* The submit button holds its place at the foot of the screen while the
     fields pass behind it.
     The backdrop is a spread shadow rather than a ::before: a pseudo-element
     with a negative z-index paints above its own parent's background, not
     below it, so it hid the button's green fill and its white label. An outer
     shadow paints behind the element, which is what's wanted — and it reaches
     to the card's edges so nothing peeks past the sides as it scrolls under. */
  :root[data-theme] .auth-wrapper:not(:has(.auth-choice)) .auth-submit {
    position: sticky;
    bottom: 0;
    z-index: 2;
    /* Offset down by exactly the spread, so the backdrop reaches the card's
       edges and the space below, but never rises over the field above it —
       which is where "Forgot password?" lives. */
    box-shadow: 0 22px 0 22px var(--surface-1);
  }
}