/* ═══════════════════════════════════════════════════════════════════════════
   Addy Bite — Component layer
   Re-skins the app's component vocabulary on the new tokens. The markup and
   class names are untouched; only the visual language changes.

   Selector weight note: several rules carry a `:root[data-theme]` prefix.
   That is deliberate — the legacy sheets style the same components under
   `:root[data-theme="dark"]` with hardcoded colours, and these have to win.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1 · SHELL — sidebar
   A flat rail rather than the old purple gradient. It stays dark in both
   themes so the app has a constant spine, the way a native title bar does.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Width is left to the legacy sheet, which narrows the rail into a drawer
   below 992px — overriding it here would pin the drawer open on mobile. */
:root[data-theme] .sidebar {
  background: var(--rail);
  border-right: 1px solid var(--rail-line);
  box-shadow: none;
  padding: 0;
}

:root[data-theme] .sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  padding: 0 var(--sp-4);
  margin: 0;
  border-bottom: 1px solid var(--rail-line);
  background: transparent;
}
:root[data-theme] .brand-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  box-shadow: none;
  border: none;
  flex: none;
}
.brand-textwrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
:root[data-theme] .brand-text {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: -0.25px;
  color: var(--rail-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  white-space: nowrap;
}
:root[data-theme] .brand-tagline {
  font-size: var(--t-2xs);
  line-height: 1.2;
  color: var(--rail-ink-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav {
  padding: var(--sp-3) var(--sp-2);
  gap: 1px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
}

/* Section headers are taxonomy, not content: small, tracked out, quiet. */
:root[data-theme] .nav-section-label {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--rail-ink-subtle);
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
  margin: 0;
}
.sidebar-nav > .nav-section-label:first-child {
  padding-top: var(--sp-1);
}

:root[data-theme] .sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 7px var(--sp-3);
  margin: 0;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--rail-ink-subtle);
  font-size: var(--t-sm);
  font-weight: 450;
  letter-spacing: -0.05px;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}
:root[data-theme] .sidebar-nav .nav-link i {
  font-size: 15px;
  width: 16px;
  text-align: center;
  flex: none;
  opacity: 0.85;
  color: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
}
:root[data-theme] .sidebar-nav .nav-link:hover {
  background: var(--rail-hover);
  color: var(--rail-ink);
  transform: none;
}
:root[data-theme] .sidebar-nav .nav-link.active {
  background: var(--rail-hover);
  color: var(--rail-ink);
  font-weight: 550;
  box-shadow: none;
}
:root[data-theme] .sidebar-nav .nav-link.active i {
  color: var(--accent);
  opacity: 1;
  -webkit-text-fill-color: var(--accent);
}

.nav-group-chevron {
  margin-left: auto;
  font-size: 10px !important;
  width: auto !important;
  opacity: 0.5 !important;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav-group-items {
  padding-left: 0;
}
:root[data-theme] .nav-group-items .nav-sublink {
  padding-left: calc(var(--sp-3) + 16px + var(--sp-3));
  font-size: var(--t-sm);
}
:root[data-theme] .nav-group-items .nav-sublink i {
  display: none;
}
/* A sublink's active marker is a rule in the indent channel — quieter than a
   filled pill, and it reads as "inside" the group. */
:root[data-theme] .nav-group-items {
  position: relative;
}
:root[data-theme] .nav-group-items::before {
  content: '';
  position: absolute;
  left: calc(var(--sp-3) + 7px);
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--rail-line);
}

/* Version + premium card */
:root[data-theme] .sidebar-version {
  font-size: var(--t-2xs);
  color: var(--rail-ink-subtle);
  opacity: 0.6;
  padding: 0 var(--sp-4) var(--sp-2);
  text-align: left;
  background: none;
  border: none;
}

:root[data-theme] .sidebar-premium-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-2) var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--rail-hover);
  border: 1px solid var(--rail-line);
  color: var(--rail-ink);
  text-decoration: none;
  box-shadow: none;
  transition: border-color var(--dur-1) var(--ease-out);
}
:root[data-theme] .sidebar-premium-card:hover {
  border-color: var(--accent);
}
:root[data-theme] .spc-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  font-size: 13px;
}
:root[data-theme] .spc-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
:root[data-theme] .spc-text strong {
  font-size: var(--t-sm);
  font-weight: 550;
  color: var(--rail-ink);
}
:root[data-theme] .spc-text small {
  font-size: var(--t-2xs);
  color: var(--rail-ink-subtle);
}
:root[data-theme] .spc-arrow {
  margin-left: auto;
  color: var(--rail-ink-subtle);
  font-size: 11px;
}

:root[data-theme] .sidebar-profile {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin: 0;
  border-top: 1px solid var(--rail-line);
  border-radius: 0;
  background: transparent;
  transition: background var(--dur-1) var(--ease-out);
}
:root[data-theme] .sidebar-profile:hover {
  background: var(--rail-hover);
}
:root[data-theme] .profile-avatar {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: var(--t-2xs);
  font-weight: 600;
  border: none;
  box-shadow: none;
}
/* These two also appear on the Profile page header, so the rail's ink is
   scoped to the rail and the page keeps normal document ink. */
:root[data-theme] .profile-name {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.05px;
}
:root[data-theme] .profile-sub {
  font-size: var(--t-xs);
  color: var(--ink-subtle);
}
:root[data-theme] .sidebar .profile-name {
  font-size: var(--t-sm);
  color: var(--rail-ink);
}
:root[data-theme] .sidebar .profile-sub {
  font-size: var(--t-2xs);
  color: var(--rail-ink-subtle);
}
:root[data-theme] .sidebar-profile-chev {
  margin-left: auto;
  color: var(--rail-ink-subtle);
  font-size: 11px;
}

:root[data-theme] .sidebar-close-btn,
:root[data-theme] .sidebar-collapse-btn {
  background: transparent;
  border: none;
  color: var(--rail-ink-subtle);
  border-radius: var(--r-sm);
}
:root[data-theme] .sidebar-close-btn:hover,
:root[data-theme] .sidebar-collapse-btn:hover {
  background: var(--rail-hover);
  color: var(--rail-ink);
}

.sidebar-overlay {
  background: var(--scrim);
  backdrop-filter: blur(2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 · SHELL — topbar, content, bottom nav
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme] .main-content {
  background: var(--canvas);
}

:root[data-theme] .topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--topbar-h);
  background: color-mix(in srgb, var(--canvas) 82%, transparent) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  padding: max(var(--sp-2), env(safe-area-inset-top)) var(--sp-6) var(--sp-2);
  padding-left: max(var(--sp-6), env(safe-area-inset-left));
  padding-right: max(var(--sp-6), env(safe-area-inset-right));
  box-shadow: none;
}
:root[data-theme] .topbar-title {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: var(--t-h3-ls);
  color: var(--ink);
}
:root[data-theme] .topbar-date {
  font-size: var(--t-xs);
  color: var(--ink-subtle);
  letter-spacing: 0;
}

/* Centred and capped: past ~1160px the extra width only stretches tables and
   lengthens the eye's travel, so the column stays put and the page breathes
   either side of it. */
:root[data-theme] .content-area {
  padding: var(--sp-6);
  padding-bottom: calc(var(--sp-10) + env(safe-area-inset-bottom));
  max-width: calc(var(--content-max) + var(--sp-6) * 2);
  width: 100%;
  margin-inline: auto;
}

/* Topbar chips — pill affordances that stay quiet until they matter. */
:root[data-theme] .topbar-streak,
:root[data-theme] .topbar-points,
:root[data-theme] .topbar-premium,
:root[data-theme] .api-usage-badge {
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: var(--t-xs);
  font-weight: 500;
  box-shadow: none;
}
:root[data-theme] .topbar-profile {
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line);
  box-shadow: none;
}
:root[data-theme] .topbar-profile:hover,
:root[data-theme] .topbar-premium:hover {
  background: var(--surface-4);
  border-color: var(--line-strong);
  transform: none;
}
:root[data-theme] .api-usage-badge.at-limit {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger-ink);
}

/* Bottom navigation */
:root[data-theme] body .mobile-bottom-nav {
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: none;
}
:root[data-theme] .mbn-item {
  color: var(--ink-faint);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0;
}
:root[data-theme] .mbn-item.active,
:root[data-theme] .mbn-item.active i,
:root[data-theme] .mbn-item.mbn-going,
:root[data-theme] .mbn-item.mbn-going i {
  color: var(--accent);
}
:root[data-theme] .mbn-primary .mbn-fab {
  background: var(--accent);
  color: var(--accent-ink);
  border: 3px solid var(--canvas);
  box-shadow: var(--shadow-md);
  width: 46px;
  height: 46px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3 · SURFACES
   Depth is a surface step plus a hairline. Shadows are reserved for things
   that genuinely float above the page — menus, sheets, the FAB.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme] .card-section,
:root[data-theme] .ai-insight-card,
:root[data-theme] .health-alert-card,
:root[data-theme] .progress-stat-card,
:root[data-theme] .stat-card,
:root[data-theme] .mini-stat,
:root[data-theme] .food-db-card,
:root[data-theme] .steps-card-section,
:root[data-theme] .add-food-panel,
:root[data-theme] .checkin-card,
:root[data-theme] .nutrient-card,
:root[data-theme] .test-card,
:root[data-theme] .bmi-card,
:root[data-theme] .upcoming-reminder-card,
:root[data-theme] .welcome-card,
:root[data-theme] .insight-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root[data-theme] .card-section {
  padding: var(--sp-5);
}

/* Nested cards drop to the sunken surface so hierarchy reads without a
   second border weight. */
:root[data-theme] .card-section .card-section,
:root[data-theme] .card-section .inner-card,
:root[data-theme] .inner-card {
  background: var(--surface-2);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-lg);
  box-shadow: none;
}

:root[data-theme] .section-label {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: var(--t-h3-ls);
  color: var(--ink);
}

/* The gradient decorations the old sheets painted on hero cards. */
:root[data-theme] .welcome-card::before,
:root[data-theme] .ai-insight-card::before {
  display: none;
}
:root[data-theme] .welcome-card,
:root[data-theme] .welcome-card.wc-morning,
:root[data-theme] .welcome-card.wc-afternoon,
:root[data-theme] .welcome-card.wc-evening,
:root[data-theme] .welcome-card.wc-night {
  background: var(--surface-1) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
:root[data-theme] .welcome-hello {
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: var(--t-h2-ls);
  color: var(--ink);
}
:root[data-theme] .welcome-message {
  color: var(--ink-subtle);
  font-size: var(--t-body);
}
:root[data-theme] .welcome-icon {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-lg);
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4 · BUTTONS
   One primary voice per screen: a solid accent fill. Everything else is a
   hairline or a ghost, so the eye finds the action without being shouted at.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme] .btn,
:root[data-theme] .btn-plum,
:root[data-theme] .btn-accent,
:root[data-theme] .btn-coral,
:root[data-theme] .btn-ghost,
:root[data-theme] .btn-ghost-danger,
:root[data-theme] .btn-plum-outline,
:root[data-theme] .btn-outline-accent,
:root[data-theme] .btn-outline-plum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.05px;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: none;
  transition:
    background var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    opacity var(--dur-1) var(--ease-out);
}
:root[data-theme] .btn:active,
:root[data-theme] .btn-plum:active,
:root[data-theme] .btn-accent:active {
  transform: none;
}

/* Primary */
:root[data-theme] .btn-plum,
:root[data-theme] .btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}
:root[data-theme] .btn-plum:hover,
:root[data-theme] .btn-accent:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
  box-shadow: none;
}
:root[data-theme] .btn-plum:active,
:root[data-theme] .btn-accent:active {
  background: var(--accent-press);
  border-color: var(--accent-press);
}
:root[data-theme] .btn-plum:disabled,
:root[data-theme] .btn-accent:disabled,
:root[data-theme] .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Secondary — a hairline on the raised surface */
:root[data-theme] .btn-plum-outline,
:root[data-theme] .btn-outline-accent,
:root[data-theme] .btn-outline-plum {
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
:root[data-theme] .btn-plum-outline:hover,
:root[data-theme] .btn-outline-accent:hover,
:root[data-theme] .btn-outline-plum:hover {
  background: var(--surface-3);
  border-color: var(--line-strong);
  color: var(--ink);
}

/* Ghost */
:root[data-theme] .btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-muted);
}
:root[data-theme] .btn-ghost:hover {
  background: var(--surface-3);
  color: var(--ink);
}
:root[data-theme] .btn-ghost-danger {
  background: transparent;
  border: 1px solid transparent;
  color: var(--danger);
}
:root[data-theme] .btn-ghost-danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Destructive */
:root[data-theme] .btn-coral {
  background: var(--danger);
  border: 1px solid var(--danger);
  color: #fff;
}
:root[data-theme] .btn-coral:hover {
  background: color-mix(in srgb, var(--danger) 85%, #000);
  border-color: color-mix(in srgb, var(--danger) 85%, #000);
}

/* Bootstrap escapees */
:root[data-theme] .btn-sm {
  min-height: 30px;
  padding: 5px 10px;
  font-size: var(--t-xs);
  border-radius: var(--r-sm);
}
:root[data-theme] .btn-lg {
  min-height: 44px;
  padding: 11px 20px;
  font-size: var(--t-body);
}

/* Floating action button — one of the few things that truly floats. */
:root[data-theme] .log-fab,
:root[data-theme] .water-fab {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  box-shadow: var(--shadow-lg);
  border-radius: var(--r-pill);
}
:root[data-theme] .log-fab:hover,
:root[data-theme] .water-fab:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5 · FORMS
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme] .form-control-custom,
:root[data-theme] .form-select,
:root[data-theme] .dock-input,
:root[data-theme] .form-control {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.4;
  box-shadow: none;
  transition:
    border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
:root[data-theme] .form-control-custom::placeholder,
:root[data-theme] .dock-input::placeholder,
:root[data-theme] .form-control::placeholder {
  color: var(--ink-faint);
}
:root[data-theme] .form-control-custom:focus,
:root[data-theme] .form-select:focus,
:root[data-theme] .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
  outline: none;
  background: var(--surface-1);
}
:root[data-theme] .form-control-custom.is-readonly {
  background: var(--surface-3);
  color: var(--ink-subtle);
}
:root[data-theme] .form-control-custom.is-invalid {
  border-color: var(--danger);
}
:root[data-theme] .form-label-custom {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-subtle);
  margin-bottom: var(--sp-2);
}
:root[data-theme] .field-error {
  color: var(--danger);
  font-size: var(--t-xs);
}
:root[data-theme] .input-group-custom {
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  overflow: hidden;
}
:root[data-theme] .input-group-custom .form-control-custom {
  border: none;
  background: transparent;
}
:root[data-theme] .input-group-custom .unit-sel {
  background: var(--surface-3);
  border: none;
  border-left: 1px solid var(--line);
  color: var(--ink-subtle);
  font-size: var(--t-xs);
}

/* Search boxes */
:root[data-theme] .afp-search-box {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
}
:root[data-theme] .afp-search-box .afp-search-clear {
  background: var(--surface-4);
  color: var(--ink-subtle);
  border-radius: var(--r-pill);
}

/* Toggles */
:root[data-theme] .reminder-switch-track {
  background: var(--line-strong);
  border-radius: var(--r-pill);
}
:root[data-theme] .reminder-switch input:checked + .reminder-switch-track {
  background: var(--accent);
}
:root[data-theme] .reminder-switch-track::before {
  background: #fff;
  box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · SEGMENTED CONTROLS, TABS, CHIPS
   The selected segment takes a solid accent fill, the same treatment as the
   selected date chip — one "this is the current thing" signal across the app.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme] .section-tabs,
:root[data-theme] .discover-mode-switch,
:root[data-theme] .fp-tabs {
  background: var(--surface-3);
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg);
  padding: 3px;
  gap: 3px;
}
:root[data-theme] .section-tabs .section-tab,
:root[data-theme] .discover-mode-switch .discover-mode-btn,
:root[data-theme] .fp-tabs .fp-tab {
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--ink-subtle);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.05px;
  box-shadow: none;
  transition:
    background var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}
:root[data-theme] .section-tabs .section-tab:hover,
:root[data-theme] .discover-mode-switch .discover-mode-btn:hover,
:root[data-theme] .fp-tabs .fp-tab:hover {
  color: var(--ink);
}
:root[data-theme] .section-tabs .section-tab.active,
:root[data-theme] .discover-mode-switch .discover-mode-btn.active,
:root[data-theme] .fp-tabs .fp-tab.active {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: none;
  box-shadow: none !important;
}

/* Pills and chips */
:root[data-theme] .fp-pill,
:root[data-theme] .fp-pill-recent,
:root[data-theme] .fp-pill-food,
:root[data-theme] .day-chip,
:root[data-theme] .macro-pill,
:root[data-theme] .av-chip {
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink-muted);
  font-size: var(--t-sm);
  font-weight: 450;
  box-shadow: none;
  transition:
    background var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}
:root[data-theme] .fp-pill:hover,
:root[data-theme] .fp-pill-recent:hover,
:root[data-theme] .av-chip:hover {
  background: var(--surface-3);
  border-color: var(--line-strong);
  color: var(--ink);
  transform: none;
}
:root[data-theme] .fp-pill.active,
:root[data-theme] .fp-pill-food.active,
:root[data-theme] .day-chip.active,
:root[data-theme] .day-chip:has(.day-chip-input:checked),
:root[data-theme] .av-chip.is-on {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
  font-weight: 550;
}

/* Macro pills keep their semantic hue but at chip weight. */
:root[data-theme] .macro-p {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}
:root[data-theme] .macro-c {
  background: var(--warning-bg);
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
  color: var(--warning-ink);
}
:root[data-theme] .macro-f {
  background: var(--success-bg);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  color: var(--success-ink);
}

/* Bootstrap badge */
:root[data-theme] .badge {
  border-radius: var(--r-sm);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.1px;
  padding: 3px 7px;
}
:root[data-theme] .badge.bg-secondary {
  background: var(--surface-4) !important;
  color: var(--ink-muted);
}
:root[data-theme] .badge-ok,
:root[data-theme] .badge-new {
  background: var(--success-bg);
  color: var(--success-ink);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}
:root[data-theme] .badge-high {
  background: var(--danger-bg);
  color: var(--danger-ink);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}
:root[data-theme] .count-badge {
  background: var(--surface-4);
  color: var(--ink-subtle);
  border-radius: var(--r-pill);
  font-size: var(--t-2xs);
  font-weight: 500;
}

/* Date strip */
:root[data-theme] .date-select {
  background: transparent;
  border: none;
  box-shadow: none;
}
:root[data-theme] .date-chip {
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--line);
  box-shadow: none;
}
:root[data-theme] .date-chip-dow {
  font-size: var(--t-2xs);
  color: var(--ink-faint);
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
}
:root[data-theme] .date-chip-day {
  font-family: var(--font-mono);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
}
:root[data-theme] .date-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
}
:root[data-theme] .date-chip.is-active .date-chip-dow,
:root[data-theme] .date-chip.is-active .date-chip-day,
:root[data-theme] .date-chip.is-active .date-chip-mon {
  color: var(--accent-ink);
}
:root[data-theme] .date-nav-btn {
  background: var(--surface-1);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  border-radius: var(--r-md);
  box-shadow: none;
}
:root[data-theme] .date-nav-btn:hover {
  background: var(--surface-3);
  color: var(--ink);
}
:root[data-theme] .date-trigger-btn {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7 · DATA DISPLAY
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme] .stat-card,
:root[data-theme] .progress-stat-card,
:root[data-theme] .mini-stat {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
}
:root[data-theme] .stat-label,
:root[data-theme] .psc-label,
:root[data-theme] .ms-label,
:root[data-theme] .nutrient-target,
:root[data-theme] .cal-label {
  font-size: var(--t-xs);
  font-weight: 450;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-subtle);
}
:root[data-theme] .stat-value,
:root[data-theme] .psc-val,
:root[data-theme] .ms-val,
:root[data-theme] .nutrient-value,
:root[data-theme] .cal-num {
  color: var(--ink);
  font-weight: 550;
}
:root[data-theme] .stat-unit {
  color: var(--ink-faint);
  font-weight: 450;
  font-size: 0.7em;
}
:root[data-theme] .stat-icon,
:root[data-theme] .psc-icon,
:root[data-theme] .fdc-icon,
:root[data-theme] .vts-icon,
:root[data-theme] .activity-row-icon,
:root[data-theme] .upcoming-reminder-icon,
:root[data-theme] .steps-card-icon {
  background: var(--accent-soft);
  color: var(--accent);
  border: none;
  border-radius: var(--r-md);
  box-shadow: none;
}
:root[data-theme] .stat-icon i,
:root[data-theme] .psc-icon i {
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: var(--accent);
}

/* Progress bars — a single track treatment everywhere. */
:root[data-theme] .progress-bar,
:root[data-theme] .nutrient-bar,
:root[data-theme] .steps-card-bar,
:root[data-theme] .tc-bar,
:root[data-theme] .bmi-scale-bar,
:root[data-theme] .journey-progress {
  background: var(--surface-4);
  border-radius: var(--r-pill);
  overflow: hidden;
}
:root[data-theme] .nutrient-bar-fill,
:root[data-theme] .steps-card-bar-fill {
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width var(--dur-3) var(--ease-out);
}
:root[data-theme] .nutrient-card.status-good .nutrient-bar-fill,
:root[data-theme] .steps-card-section.status-good .steps-card-bar-fill {
  background: var(--success);
}
:root[data-theme] .nutrient-card.status-over .nutrient-bar-fill {
  background: var(--danger);
}
:root[data-theme] .nutrient-card.status-under .nutrient-bar-fill,
:root[data-theme] .steps-card-section.status-mid .steps-card-bar-fill {
  background: var(--warning);
}
:root[data-theme] .steps-card-section.status-low .steps-card-bar-fill {
  background: var(--ink-faint);
}
/* Status is carried by the bar and the readout, not by tinting the whole
   card — a coloured card at this density becomes noise. */
:root[data-theme] .nutrient-card.status-good,
:root[data-theme] .nutrient-card.status-under,
:root[data-theme] .nutrient-card.status-over,
:root[data-theme] .steps-card-section.status-low,
:root[data-theme] .steps-card-section.status-mid,
:root[data-theme] .steps-card-section.status-good {
  background: var(--surface-1);
  border-color: var(--line);
}

/* Tables */
:root[data-theme] .week-table,
:root[data-theme] .admin-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-sm);
}
:root[data-theme] .week-table th,
:root[data-theme] .admin-table th {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  color: var(--ink-faint);
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-3);
}
:root[data-theme] .week-table td,
:root[data-theme] .admin-table td {
  border-bottom: 1px solid var(--line-subtle);
  padding: var(--sp-3);
  color: var(--ink-muted);
}
:root[data-theme] .week-table tr.today-row {
  background: var(--accent-softer);
}

/* List rows */
:root[data-theme] .food-entry,
:root[data-theme] .reminder-row,
:root[data-theme] .activity-row,
:root[data-theme] .report-history-row,
:root[data-theme] .food-row {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-subtle);
  border-radius: 0;
  box-shadow: none;
  transition: background var(--dur-1) var(--ease-out);
}
:root[data-theme] .food-entry:hover,
:root[data-theme] .report-history-row:hover {
  background: var(--surface-2);
}
:root[data-theme] .fe-name,
:root[data-theme] .food-name,
:root[data-theme] .reminder-label {
  font-size: var(--t-body);
  font-weight: 450;
  color: var(--ink);
}
:root[data-theme] .fe-macros,
:root[data-theme] .food-macros,
:root[data-theme] .reminder-days,
:root[data-theme] .reminder-sub {
  font-size: var(--t-xs);
  color: var(--ink-subtle);
}
:root[data-theme] .food-category-label,
:root[data-theme] .food-cat-header,
:root[data-theme] .afp-subhead,
:root[data-theme] .av-group-label {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Macro chips inside food cards */
:root[data-theme] .macro-chip,
:root[data-theme] .fdc-macro {
  background: var(--surface-3);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  font-size: var(--t-2xs);
  font-weight: 450;
}

/* Heat map */
:root[data-theme] .heat-cell {
  border-radius: var(--r-xs);
}
:root[data-theme] .heat-cell.level-0 {
  background: var(--surface-4);
}
:root[data-theme] .heat-cell.level-1 {
  background: color-mix(in srgb, var(--accent) 30%, var(--surface-2));
}
:root[data-theme] .heat-cell.level-2 {
  background: color-mix(in srgb, var(--accent) 60%, var(--surface-2));
}
:root[data-theme] .heat-cell.level-3 {
  background: var(--accent);
}

/* Timeline */
:root[data-theme] .timeline-item:not(:last-child)::before {
  background: var(--line);
}
:root[data-theme] .tl-dot {
  background: var(--accent);
  border: 2px solid var(--surface-1);
  box-shadow: none;
}
:root[data-theme] .timeline-item.future .tl-dot {
  background: var(--line-strong);
}
:root[data-theme] .tl-date {
  font-size: var(--t-2xs);
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Lab results */
:root[data-theme] .tc-status.red,
:root[data-theme] .tc-bar-fill.red {
  background: var(--danger);
  color: #fff;
}
:root[data-theme] .tc-status.orange,
:root[data-theme] .tc-bar-fill.orange {
  background: var(--warning);
  color: #fff;
}
:root[data-theme] .tc-status.green,
:root[data-theme] .tc-bar-fill.green {
  background: var(--success);
  color: #fff;
}
:root[data-theme] .test-card.red-border {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
:root[data-theme] .test-card.orange-border {
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
}
:root[data-theme] .test-card.green-border {
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
}

/* Charts */
:root[data-theme] .chart-box,
:root[data-theme] .chart-box-lg {
  background: transparent;
  border: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8 · CHECKLISTS & ACTIVITY
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme] .check-row {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: none;
  transition:
    background var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}
:root[data-theme] .check-row:hover {
  border-color: var(--line-strong);
  transform: none;
}
:root[data-theme] .check-row.checked {
  background: var(--accent-softer);
  border-color: var(--accent-line);
}
:root[data-theme] .check-box {
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: transparent;
}
:root[data-theme] .check-row.checked .check-box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
:root[data-theme] .check-label {
  font-size: var(--t-body);
  font-weight: 450;
  color: var(--ink);
}
:root[data-theme] .check-status {
  font-size: var(--t-xs);
  color: var(--ink-subtle);
}
:root[data-theme] .activity-item {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: none;
}
:root[data-theme] .activity-item.done,
:root[data-theme] .activity-item.done.coral,
:root[data-theme] .activity-item.done.mauve,
:root[data-theme] .activity-item.done.yellow {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
:root[data-theme] .check-badge {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9 · FEEDBACK — empty, error, loading
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme] .empty-state,
:root[data-theme] .empty-hero,
:root[data-theme] .food-empty,
:root[data-theme] .food-empty-day,
:root[data-theme] .fp-empty {
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-xl);
  color: var(--ink-subtle);
  box-shadow: none;
}
:root[data-theme] .empty-state > i:first-child,
:root[data-theme] .empty-hero-icon {
  color: var(--ink-faint);
  background: var(--surface-3);
  border: none;
  box-shadow: none;
}
:root[data-theme] .empty-state > i:first-child::after {
  display: none;
}
:root[data-theme] .empty-hero-title {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: var(--t-h3-ls);
  color: var(--ink);
}
:root[data-theme] .empty-hero-text,
:root[data-theme] .empty-state p {
  font-size: var(--t-body);
  color: var(--ink-subtle);
}
:root[data-theme] .empty-state .es-cta {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--r-md);
  box-shadow: none;
  font-weight: 500;
  font-size: var(--t-sm);
}

/* Alerts */
:root[data-theme] .alert,
:root[data-theme] .alert-info-custom,
:root[data-theme] .alert-success-custom,
:root[data-theme] .alert-storage-warning {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  font-size: var(--t-sm);
  box-shadow: none;
}
:root[data-theme] .alert-success-custom {
  background: var(--success-bg);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  color: var(--success-ink);
}
:root[data-theme] .alert-info-custom {
  background: var(--accent-softer);
  border-color: var(--accent-line);
  color: var(--ink-muted);
}
:root[data-theme] .alert-storage-warning {
  background: var(--warning-bg);
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
  color: var(--warning-ink);
}
:root[data-theme] .health-alert-card,
:root[data-theme] .health-alert-card.coral,
:root[data-theme] .health-alert-card.mauve,
:root[data-theme] .health-alert-card.yellow {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warning);
}

/* Skeletons */
:root[data-theme] .ab-skeleton,
:root[data-theme] .skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton) 25%,
    var(--skeleton-shine) 37%,
    var(--skeleton) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--r-sm);
}

/* Toasts */
:root[data-theme] .ab-toast,
:root[data-theme] .metric-toast {
  background: var(--surface-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  font-size: var(--t-sm);
}
:root[data-theme] .ab-toast-success .ab-toast-ico {
  color: var(--success);
}
:root[data-theme] .ab-toast-error .ab-toast-ico {
  color: var(--danger);
}
:root[data-theme] .ab-toast-action {
  color: var(--accent);
  font-weight: 500;
}

/* Sync badges */
:root[data-theme] .sync-badge {
  background: var(--surface-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink-muted);
  font-size: var(--t-xs);
  box-shadow: var(--shadow-md);
}
:root[data-theme] .sync-badge.state-synced,
:root[data-theme] .inline-sync.synced {
  color: var(--success);
}
:root[data-theme] .sync-badge.state-failed,
:root[data-theme] .inline-sync.failed {
  color: var(--danger);
}

/* ═══════════════════════════════════════════════════════════════════════════
   10 · OVERLAYS — modals, sheets, popovers
   These genuinely float, so they take the one real shadow in the system.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme] .ab-modal-overlay,
:root[data-theme] .cf-overlay,
:root[data-theme] .water-popup-overlay {
  background: var(--scrim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
:root[data-theme] .ab-modal,
:root[data-theme] .cf-sheet,
:root[data-theme] .water-popup {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
}
:root[data-theme] .ab-modal-head,
:root[data-theme] .cf-title {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: var(--t-h3-ls);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
:root[data-theme] .ab-modal-foot {
  border-top: 1px solid var(--line);
}
:root[data-theme] .ab-modal-close {
  background: transparent;
  border: none;
  color: var(--ink-subtle);
  border-radius: var(--r-sm);
}
:root[data-theme] .ab-modal-close:hover {
  background: var(--surface-4);
  color: var(--ink);
}
:root[data-theme] .cf-msg {
  color: var(--ink-subtle);
  font-size: var(--t-body);
}
:root[data-theme] .cf-btn {
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 500;
  min-height: 38px;
}
:root[data-theme] .cf-cancel {
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
:root[data-theme] .cf-cancel:hover {
  background: var(--surface-4);
}
:root[data-theme] .cf-ok {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--accent-ink);
}
:root[data-theme] .cf-btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

/* Pagination */
:root[data-theme] .ab-page-btn {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  font-size: var(--t-sm);
  min-width: 32px;
  min-height: 32px;
}
:root[data-theme] .ab-page-btn:hover:not(:disabled) {
  background: var(--surface-3);
  color: var(--ink);
}
:root[data-theme] .ab-page-btn.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Accordions */
:root[data-theme] .afp-accordion .accordion-item {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
:root[data-theme] .afp-accordion .accordion-button,
:root[data-theme] .afp-accordion .accordion-button:not(.collapsed) {
  background: transparent;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 500;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11 · AUTH & ONBOARDING
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme] .auth-body {
  background: var(--canvas) !important;
}
:root[data-theme] .auth-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-md);
  padding: var(--sp-8);
}
:root[data-theme] .auth-brand span {
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: var(--t-h2-ls);
  color: var(--ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}
:root[data-theme] .auth-footer-link {
  font-size: var(--t-sm);
  color: var(--ink-subtle);
}

/* Accent picker swatches */
:root[data-theme] .accent-swatch {
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  box-shadow: none;
}
:root[data-theme] .accent-swatch.is-on {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--surface-1) inset;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12 · LEGACY DARK-MODE CORRECTIONS
   The old sheets hardcode a purple-black palette under
   `:root[data-theme="dark"]`. These rules out-specify it so the new surface
   ladder holds in dark mode too.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme][data-accent] .form-control-custom,
:root[data-theme][data-accent] .form-select,
:root[data-theme][data-accent] .dock-input {
  background: var(--surface-1);
  border-color: var(--line-strong);
  color: var(--ink);
}
:root[data-theme][data-accent] .form-control-custom::placeholder,
:root[data-theme][data-accent] .dock-input::placeholder {
  color: var(--ink-faint);
}
:root[data-theme][data-accent] .afp-search-box {
  background: var(--surface-2);
}
:root[data-theme][data-accent] .afp-search-box .afp-search-clear {
  background: var(--surface-4);
  color: var(--ink-subtle);
}
:root[data-theme][data-accent] .afp-accordion .accordion-item {
  background: var(--surface-2);
}
:root[data-theme][data-accent] .fp-ai-card .fp-ai-nut,
:root[data-theme][data-accent] .fp-ai-nut {
  background: var(--surface-3);
}
:root[data-theme][data-accent] .btn-plum,
:root[data-theme][data-accent] .btn-plum:hover,
:root[data-theme][data-accent] .btn-plum:active {
  color: var(--accent-ink);
}
:root[data-theme][data-accent] .food-entry {
  border-left-color: transparent !important;
  background: transparent;
}
:root[data-theme][data-accent] .date-chip:not(.is-active) {
  background: var(--surface-1);
  border-color: var(--line);
}
:root[data-theme][data-accent] .date-nav-btn {
  background: var(--surface-1);
  border-color: var(--line);
}
:root[data-theme][data-accent] .topbar {
  background: color-mix(in srgb, var(--canvas) 82%, transparent) !important;
  border-bottom-color: var(--line);
}
:root[data-theme][data-accent] body .mobile-bottom-nav {
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  border-top-color: var(--line);
}
:root[data-theme][data-accent] .welcome-card {
  border-color: var(--line) !important;
  box-shadow: none !important;
}
:root[data-theme][data-accent] .accordion-button::after {
  filter: none;
  opacity: 0.5;
}
:root[data-theme='dark'][data-accent] .accordion-button::after {
  filter: invert(1);
}

/* The sidebar is dark in both themes now, so the light-mode re-skin the old
   sheet applies has to be undone. */
:root[data-theme='light'] .sidebar,
:root[data-theme='light'] .sidebar-brand,
:root[data-theme='light'] .sidebar-premium-card {
  background: transparent;
  border-color: var(--rail-line);
}
:root[data-theme='light'] .sidebar {
  background: var(--rail);
}
:root[data-theme='light'] .sidebar-premium-card {
  background: var(--rail-hover);
}
:root[data-theme='light'] .brand-text,
:root[data-theme='light'] .sidebar .profile-name {
  color: var(--rail-ink);
}
:root[data-theme='light'] .brand-tagline,
:root[data-theme='light'] .nav-section-label,
:root[data-theme='light'] .sidebar-version,
:root[data-theme='light'] .sidebar .profile-sub,
:root[data-theme='light'] .sidebar-profile-chev,
:root[data-theme='light'] .sidebar-nav .nav-link {
  color: var(--rail-ink-subtle);
}
:root[data-theme='light'] .sidebar-nav .nav-link:hover,
:root[data-theme='light'] .sidebar-nav .nav-link.active {
  background: var(--rail-hover);
  color: var(--rail-ink);
}
:root[data-theme='light'] .sidebar-nav .nav-link.active i {
  color: var(--accent);
}
:root[data-theme='light'] .sidebar-close-btn,
:root[data-theme='light'] .sidebar-profile {
  color: var(--rail-ink-subtle);
  background: transparent;
}
:root[data-theme='light'] .sidebar-close-btn:hover {
  background: var(--rail-hover);
  color: var(--rail-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   13 · DASHBOARD HERO (the pc-* family)
   The one place the accent is allowed to fill a whole surface — it gives the
   dashboard a single focal point. Everything below it stays neutral.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme] {
  --radius-card: var(--r-xl);
}
:root[data-theme] .pc-hero {
  background: var(--accent-softer);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xl);
  box-shadow: none;
  padding: var(--sp-6);
}
:root[data-theme] .pc-greet b {
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: var(--t-h2-ls);
  color: var(--ink);
}
:root[data-theme] .pc-greet small {
  font-size: var(--t-xs);
  font-weight: 450;
  color: var(--ink-subtle);
}
:root[data-theme] .pc-tag {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--accent);
}
:root[data-theme] .pc-tag i {
  background: var(--surface-1);
  border-radius: var(--r-sm);
  color: var(--accent);
}
:root[data-theme] .pc-big {
  font-family: var(--font-mono);
  font-size: 46px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--ink);
}
:root[data-theme] .pc-big span {
  font-size: 22px;
  color: var(--ink-subtle);
}
:root[data-theme] .pc-sub,
:root[data-theme] .pc-sub2 {
  font-size: var(--t-xs);
  font-weight: 450;
  color: var(--ink-subtle);
}
:root[data-theme] .pc-sub {
  color: var(--accent);
}
/* The ring's track has to read as an empty groove, not as a hole punched in
   the card — it was inheriting the card surface, which is near-black on dark. */
:root[data-theme] .pc-ring-track {
  stroke: color-mix(in srgb, var(--ink) 9%, transparent);
}
:root[data-theme] .pc-ring-fill {
  stroke: var(--accent);
}
:root[data-theme] .pc-ring-mid b {
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
:root[data-theme] .pc-ring-mid small {
  font-size: var(--t-2xs);
  font-weight: 450;
  color: var(--ink-subtle);
}
:root[data-theme] .pc-stat,
:root[data-theme] .pc-steps {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: none;
}
:root[data-theme] .pc-stat-h span,
:root[data-theme] .pc-steps-top span {
  font-size: var(--t-xs);
  font-weight: 450;
  color: var(--ink-subtle);
}
:root[data-theme] .pc-stat-n,
:root[data-theme] .pc-steps-top b {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
:root[data-theme] .pc-stat-n i,
:root[data-theme] .pc-steps-top b i {
  color: var(--ink-faint);
  font-weight: 450;
}
:root[data-theme] .pc-chip,
:root[data-theme] .pc-steps-ico {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-md);
}
:root[data-theme] .pc-delta {
  font-size: var(--t-xs);
  font-weight: 450;
  color: var(--ink-subtle);
}
:root[data-theme] .pc-delta.good {
  color: var(--success);
}
:root[data-theme] .pc-steps-bar {
  background: var(--surface-4);
}
:root[data-theme] .pc-steps-fill {
  background: var(--accent);
}
:root[data-theme] .pc-steps-done {
  background: var(--success-bg);
  color: var(--success);
}

/* ═══════════════════════════════════════════════════════════════════════════
   14 · ACTIVITY TILES
   ═══════════════════════════════════════════════════════════════════════════ */
/* A lone activity used to stretch to half the card. Capping the tile keeps
   one, three or five of them looking deliberate instead of stranded. */
:root[data-theme] .activity-checklist {
  justify-content: flex-start;
}
:root[data-theme] .activity-checklist > .check-row {
  flex: 0 1 calc(50% - 0.3rem);
  max-width: 190px;
}
/* The icon chip is an icon chip, not a checkbox — it keeps its circle. */
:root[data-theme] .check-row .check-box {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--surface-3);
  color: var(--ink-subtle);
  font-size: 1.15rem;
  box-shadow: none;
}
:root[data-theme] .check-row:hover .check-box {
  background: var(--accent-soft);
  color: var(--accent);
}
:root[data-theme] .check-row.checked .check-box {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}
:root[data-theme] .check-mark {
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
}
:root[data-theme] .check-row.checked .check-mark {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
:root[data-theme] .check-label {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   15 · REMINDER ROWS
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme] .upcoming-reminder-card {
  background: var(--surface-2);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-lg);
  box-shadow: none;
}
:root[data-theme] .upcoming-reminder-label,
:root[data-theme] .upcoming-reminder-title {
  font-size: var(--t-body);
  font-weight: 450;
  color: var(--ink);
}
:root[data-theme] .upcoming-reminder-time {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
}
:root[data-theme] .upcoming-reminder-day {
  font-size: var(--t-2xs);
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  color: var(--ink-faint);
}
:root[data-theme] .reminder-time {
  font-family: var(--font-mono);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   16 · NUTRIENT CATEGORICAL PALETTE
   Nutrients need to be told apart at a glance, which is a *categorical* job —
   the old sheet borrowed the semantic reds and ambers for it, so half the
   macros ended up looking like warnings. These eight hues are chosen to stay
   distinguishable and to read as labels, not as status.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme] {
  --nut-calories: #f0803c;
  --nut-protein: #6366f1;
  --nut-carbs: #d4a017;
  --nut-fat: #c2569a;
  --nut-fiber: #3f9e6a;
  --nut-sugar: #e06b8b;
  --nut-sodium: #4d9ec7;
  --nut-cholesterol: #8b7cd8;
}
:root[data-theme='dark'] {
  --nut-calories: #f59e5c;
  --nut-protein: #8b8ef5;
  --nut-carbs: #e5b93f;
  --nut-fat: #d879b1;
  --nut-fiber: #5cbe89;
  --nut-sugar: #f08aa6;
  --nut-sodium: #6fb8dd;
  --nut-cholesterol: #a79af0;
}

:root[data-theme] .mini-stat.calories {
  border-top: 2px solid var(--nut-calories);
}
:root[data-theme] .mini-stat.protein {
  border-top: 2px solid var(--nut-protein);
}
:root[data-theme] .mini-stat.carbs {
  border-top: 2px solid var(--nut-carbs);
}
:root[data-theme] .mini-stat.fat {
  border-top: 2px solid var(--nut-fat);
}
:root[data-theme] .mini-stat.fiber {
  border-top: 2px solid var(--nut-fiber);
}
:root[data-theme] .mini-stat.sugar {
  border-top: 2px solid var(--nut-sugar);
}
:root[data-theme] .mini-stat.sodium {
  border-top: 2px solid var(--nut-sodium);
}
:root[data-theme] .mini-stat.cholesterol {
  border-top: 2px solid var(--nut-cholesterol);
}

:root[data-theme] .macro-chip.cal {
  background: color-mix(in srgb, var(--nut-calories) 14%, transparent);
  color: var(--nut-calories);
}
:root[data-theme] .macro-chip.prot {
  background: color-mix(in srgb, var(--nut-protein) 14%, transparent);
  color: var(--nut-protein);
}
:root[data-theme] .macro-chip.carb {
  background: color-mix(in srgb, var(--nut-carbs) 16%, transparent);
  color: var(--nut-carbs);
}
:root[data-theme] .macro-chip.fat {
  background: color-mix(in srgb, var(--nut-fat) 14%, transparent);
  color: var(--nut-fat);
}
:root[data-theme] .macro-chip.fiber {
  background: color-mix(in srgb, var(--nut-fiber) 14%, transparent);
  color: var(--nut-fiber);
}
:root[data-theme] .macro-chip.chol {
  background: color-mix(in srgb, var(--nut-cholesterol) 14%, transparent);
  color: var(--nut-cholesterol);
}
:root[data-theme] .macro-chip {
  border: none;
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════════════════════
   17 · DECORATIVE-COLOUR CORRECTIONS
   A handful of places used the old palette's coral for emphasis rather than
   for danger. Now that coral maps to the danger role, those read as errors —
   so they get neutral or accent ink instead.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme] .tl-weight {
  font-family: var(--font-mono);
  color: var(--ink-muted);
}
:root[data-theme] .tl-actual {
  color: var(--accent);
  font-weight: 500;
}
:root[data-theme] .bmi-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
:root[data-theme] .bmi-card.current {
  background: var(--accent-softer);
  border-color: var(--accent-line);
}
:root[data-theme] .bmi-label {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--t-eyebrow-ls);
  color: var(--ink-faint);
}
:root[data-theme] .bmi-cat {
  font-size: var(--t-xs);
  color: var(--ink-subtle);
}
:root[data-theme] .bmi-marker {
  background: var(--ink);
}
:root[data-theme] .vitals-activity-delta.up {
  color: var(--success);
}
:root[data-theme] .vitals-activity-delta.down {
  color: var(--ink-subtle);
}
:root[data-theme] .hac-tips li::before {
  color: var(--warning);
}

/* ═══════════════════════════════════════════════════════════════════════════
   18 · CLASSES THE PORT INTRODUCED
   A few components were rebuilt with new class names that no stylesheet ever
   picked up — the reminder and activity rows were stacking into three lines
   because `.reminder-item` had no rule at all. They belong here rather than
   in the legacy sheets, since this is where their look is decided.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme] .reminder-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-subtle);
}
:root[data-theme] .reminder-list > .reminder-item:last-child {
  border-bottom: none;
}
:root[data-theme] .reminder-item.disabled {
  opacity: 0.5;
}
:root[data-theme] .reminder-item > .reminder-time {
  flex: none;
  min-width: 56px;
  padding: 3px var(--sp-2);
  text-align: center;
  font-size: var(--t-xs);
}
:root[data-theme] .reminder-item > .check-box {
  flex: none;
  width: 34px;
  height: 34px;
  font-size: 1rem;
}
:root[data-theme] .reminder-main {
  flex: 1;
  min-width: 0;
}
:root[data-theme] .reminder-main .reminder-label {
  font-size: var(--t-body);
  font-weight: 450;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-theme] .reminder-main .reminder-sub {
  font-size: var(--t-xs);
  color: var(--ink-subtle);
}
:root[data-theme] .reminder-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
  margin-left: auto;
}

/* Streak goal track */
:root[data-theme] .goal-step {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 1;
  min-width: 0;
}
:root[data-theme] .goal-step:first-child {
  flex: none;
}
:root[data-theme] .goal-dot {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink-subtle);
}
:root[data-theme] .goal-step.is-reached .goal-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
:root[data-theme] .goal-bar {
  background: var(--surface-4);
}
:root[data-theme] .goal-bar span {
  background: var(--accent);
}
:root[data-theme] .goal-dot-lg {
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink-subtle);
  font-family: var(--font-mono);
  font-weight: 500;
}
:root[data-theme] .goal-dot-lg.reached {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Axis labels under the BMI scale */
:root[data-theme] .bmi-labels,
:root[data-theme] .bmi-cat-labels {
  font-size: var(--t-2xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
:root[data-theme] .ai-insight-meta {
  color: var(--ink-faint);
  font-size: var(--t-xs);
}
:root[data-theme] .nutrient-name {
  letter-spacing: var(--t-eyebrow-ls);
}


/* ═══════════════════════════════════════════════════════════════════════════
   19 · RESPONSIVE
   The legacy sheet already collapses the rail into a drawer and tightens the
   gutters; these only re-state the values this layer changed.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  :root[data-theme] .sidebar {
    border-right: none;
  }
  :root[data-theme] .sidebar-brand {
    height: auto;
    min-height: 0;
    padding: max(var(--sp-4), env(safe-area-inset-top)) var(--sp-4) var(--sp-4);
  }
}

@media (max-width: 575.98px) {
  :root[data-theme] .content-area {
    padding: var(--sp-4);
    padding-bottom: calc(var(--sp-16) + env(safe-area-inset-bottom));
  }
  :root[data-theme] .topbar {
    padding: max(var(--sp-2), env(safe-area-inset-top)) var(--sp-4) var(--sp-2);
  }
  :root[data-theme] .topbar-title {
    font-size: var(--t-body);
  }
  :root[data-theme] .card-section {
    padding: var(--sp-4);
  }
  /* Two tiles per row on a phone, edge to edge — the desktop cap would leave
     a wide gutter on the right. */
  :root[data-theme] .activity-checklist > .check-row {
    max-width: none;
  }
  :root[data-theme] .pc-big {
    font-size: 38px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   20 · BOTTOM NAV DETAIL + NAV SHEET
   ═══════════════════════════════════════════════════════════════════════════ */
/* The active tab's icon sits in a soft chip; Home's is a solid accent disc.
   Both need to out-weigh the generic "active icon takes the accent" rule
   above, or the Home glyph ends up accent-on-accent and disappears. */
:root[data-theme] .mobile-bottom-nav .mbn-item.active i,
:root[data-theme] .mobile-bottom-nav .mbn-item.mbn-going i {
  background: var(--accent-soft);
  color: var(--accent);
}
:root[data-theme] .mobile-bottom-nav .mbn-item.mbn-home i {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}
:root[data-theme] .mobile-bottom-nav .mbn-item.mbn-home span {
  color: var(--accent);
  font-weight: 550;
}

:root[data-theme] .nav-sheet-backdrop {
  background: var(--scrim);
}
:root[data-theme] .nav-sheet-panel {
  background: var(--surface-1);
  border-top: 1px solid var(--line);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow: var(--shadow-pop);
}
:root[data-theme] .nav-sheet-grab {
  background: var(--line-strong);
}
:root[data-theme] .nav-sheet-title {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: var(--t-h3-ls);
  color: var(--ink);
}
:root[data-theme] .nav-sheet-x {
  background: var(--surface-3);
  color: var(--ink-subtle);
  border-radius: var(--r-pill);
}
:root[data-theme] .nav-sheet-item {
  border-radius: var(--r-md);
  color: var(--ink);
}
:root[data-theme] .nav-sheet-item .nsi-ico {
  background: var(--surface-3);
  color: var(--ink-subtle);
  border-radius: var(--r-md);
}
:root[data-theme] .nav-sheet-item .nsi-label {
  font-size: var(--t-body);
  font-weight: 450;
}
:root[data-theme] .nav-sheet-item.is-on {
  background: var(--accent-softer);
}
:root[data-theme] .nav-sheet-item.is-on .nsi-ico {
  background: var(--accent);
  color: var(--accent-ink);
}
:root[data-theme] .nav-sheet-item.is-on .nsi-label {
  color: var(--accent);
  font-weight: 550;
}
:root[data-theme] .nav-sheet-foot {
  border-top: 1px solid var(--line);
}
:root[data-theme] .nav-sheet-row {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 500;
}
:root[data-theme] .nav-sheet-danger {
  color: var(--danger);
}

/* Dashboard's own tab bar (This Week / Today's Food) */
:root[data-theme] .dash-tabbar {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 3px;
  gap: 3px;
}
:root[data-theme] .dash-tab {
  border-radius: var(--r-sm);
  color: var(--ink-subtle);
  font-size: var(--t-sm);
  font-weight: 500;
}
:root[data-theme] .dash-tab.is-on {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   21 · ADMIN TABLE
   The status badges were hardcoded light-mode greens and a danger red. On a
   37-row table that reads as a wall of errors — "unverified" and "pending"
   are ordinary states, so they get neutral and warning ink instead.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme] .admin-badge {
  border-radius: var(--r-sm);
  font-size: var(--t-2xs);
  font-weight: 500;
  padding: 2px 7px;
  border: 1px solid transparent;
}
:root[data-theme] .admin-badge-admin {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}
:root[data-theme] .admin-badge-premium {
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  border-color: color-mix(in srgb, var(--gold) 35%, transparent);
  color: var(--gold-deep);
}
:root[data-theme='dark'] .admin-badge-premium {
  color: var(--gold-light);
}
:root[data-theme] .admin-badge-free,
:root[data-theme] .admin-badge-pending {
  background: var(--surface-3);
  border-color: var(--line);
  color: var(--ink-subtle);
}
:root[data-theme] .admin-badge-verified,
:root[data-theme] .admin-badge-onboarded {
  background: var(--success-bg);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  color: var(--success-ink);
}
:root[data-theme] .admin-badge-unverified {
  background: var(--warning-bg);
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
  color: var(--warning-ink);
}
:root[data-theme] .admin-table tbody tr:hover td {
  background: var(--surface-2);
}