/* ==========================================================================
   Tempo Shell — navigation scaffold (top bar · sub-nav · pillar tab bar).
   Loaded AFTER css/styles.css so pillar tokens and shell chrome override
   the legacy Stopwatch-only top bar.

   Design reference: docs/TEMPO-PLAN.md §10/§11 and the handoff bundle
   at tempo/Tempo Shell.html (six shippable artboards).
   ========================================================================== */

/* ---------- Pillar tokens ------------------------------------------------- */
:root {
  --productivity-accent:      #007aff;
  --productivity-accent-dim:  #0a2a5e;
  --wellness-accent:          #30d158;
  --wellness-accent-dim:      #0a3d1a;

  /* Default active accent — overridden per pillar below */
  --active-accent:      var(--productivity-accent);
  --active-accent-dim:  var(--productivity-accent-dim);
  --active-accent-tint: color-mix(in srgb, var(--active-accent) 12%, transparent);
  --active-accent-glow: color-mix(in srgb, var(--active-accent) 22%, transparent);

  --tempo-tabbar-h: 56px;
  --tempo-topbar-h: 52px;
  --tempo-subnav-h: 44px;
}

[data-pillar="productivity"] {
  --active-accent:      var(--productivity-accent);
  --active-accent-dim:  var(--productivity-accent-dim);
  --active-accent-tint: color-mix(in srgb, var(--productivity-accent) 12%, transparent);
  --active-accent-glow: color-mix(in srgb, var(--productivity-accent) 22%, transparent);
}
[data-pillar="wellness"] {
  --active-accent:      var(--wellness-accent);
  --active-accent-dim:  var(--wellness-accent-dim);
  --active-accent-tint: color-mix(in srgb, var(--wellness-accent) 12%, transparent);
  --active-accent-glow: color-mix(in srgb, var(--wellness-accent) 22%, transparent);
}

/* ---------- Hide the legacy Stopwatch top bar ---------------------------- */
/* The shell markup in index.html still carries the old .top-bar for git
   diff readability. We neutralize it here rather than delete, so the
   rebrand can be reverted by removing this one stylesheet. */
#app > .top-bar { display: none; }

/* ---------- App container tweaks ----------------------------------------- */
/* Reserve space for the sticky bottom tab bar so the last element of the
   content isn't eaten by it. env() + fallback covers Android and iOS Safari. */
#app {
  padding-bottom: calc(
    var(--tempo-tabbar-h) + env(safe-area-inset-bottom, 16px) + 8px
  );
}

/* ---------- Shared base layer (E-polish follow-up, finding E25) ---------- */
/* The app had 44 bespoke `*-card` selectors and 17 `*-empty` ones, each
   re-declaring the same surface chrome. These two base classes capture the
   DOMINANT convention so card/empty families can `extend` (carry the base
   class in markup + keep only family-specific props) rather than redefine.
   CSS-first + opt-in incrementally — adopting families: .med-card,
   .mindful-pattern-card, .exercise-recent-empty, .wcook-recent-empty.
   The rest opt in over time; the base values match their current chrome so
   adoption is a zero-visual-change edit. */
.tempo-card {
  padding: 16px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 14px;
}
.tempo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 24px 16px;
  color: var(--text-secondary);
  border: 1px dashed var(--separator);
  border-radius: 14px;
}

/* ---------- Top bar ------------------------------------------------------ */
.tempo-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* F-pwa: lift below the notch/status bar on iOS standalone. With
     apple-mobile-web-app-status-bar-style=black-translucent the WebView
     extends under the status bar, so the wordmark + icons would otherwise
     render under the clock. env() falls back to 0 in browsers / non-notched
     devices, preserving the original 12px top padding. */
  padding: calc(12px + env(safe-area-inset-top, 0px)) 4px 6px;
  min-height: var(--tempo-topbar-h);
  /* Sit above the pillar content but below any overlays. */
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
}

.tempo-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.tempo-wordmark svg { color: var(--active-accent); }

.tempo-topbar-actions {
  display: inline-flex;
  gap: 2px;
}
.tempo-iconbtn {
  background: none;
  border: none;
  color: var(--text-secondary);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-color, 150ms) ease,
              background-color var(--dur-color, 150ms) ease;
}
.tempo-iconbtn:hover { color: var(--text); }
.tempo-iconbtn:active { background: var(--btn-bg); }

/* ---------- Sub-nav (horizontal scrollable segmented strip) -------------- */
.tempo-subnav {
  position: sticky;
  top: var(--tempo-topbar-h);
  z-index: 9;
  background: var(--bg);
  padding: 2px 0 8px;
}
.tempo-subnav-scroll {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.tempo-subnav-scroll::-webkit-scrollbar { display: none; }

/* The sub-nav button also carries .mode-tab so existing JS in app.js
   (`document.querySelectorAll('.mode-tab')`) still wires up correctly,
   but the visual comes from here — NOT from the legacy .mode-tab rule. */
.tempo-subnav-scroll .mode-tab,
.tempo-subnav-scroll .tempo-subnav-btn {
  flex: 0 0 auto;
  background: none;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: -0.1px;
  scroll-snap-align: start;
  transition: background-color var(--dur-color, 150ms) ease,
              color var(--dur-color, 150ms) ease,
              border-color var(--dur-color, 150ms) ease;
}
.tempo-subnav-scroll .mode-tab.mode-tab-active,
.tempo-subnav-scroll .tempo-subnav-btn.is-active {
  background: var(--btn-bg);
  color: var(--text);
  border-color: var(--btn-border);
  /* Kill the legacy filled-pill look from styles.css so Tempo's outlined
     chip wins inside the sub-nav. Same selector specificity as the
     legacy rule; order of stylesheets makes this rule last-wins. */
  font-weight: 500;
}

/* Pillar-specific sub-nav visibility: only the active pillar's buttons
   render. Set via data-pillar on .tempo-subnav. */
.tempo-subnav [data-subnav-for] { display: none; }
.tempo-subnav[data-pillar="timers"]    [data-subnav-for="timers"]    { display: contents; }
.tempo-subnav[data-pillar="wellness"]  [data-subnav-for="wellness"]  { display: contents; }
.tempo-subnav[data-pillar="rhythm"]    [data-subnav-for="rhythm"]    { display: contents; }
.tempo-subnav[data-pillar="analytics"] [data-subnav-for="analytics"] { display: contents; }

/* Hide whole sub-nav when the active pillar has no sub-items. */
.tempo-subnav[data-empty="true"] { display: none; }

/* ---------- Pillar content switching ------------------------------------- */
/* The Timers pillar wraps the existing Stopwatch/Timer/etc UI; the other
   pillars show placeholder surfaces. Switching happens by toggling
   [data-active] on each pillar region. */
.tempo-pillar { display: none; }
.tempo-pillar[data-active="true"] { display: contents; }

.tempo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 16px 32px;
  text-align: center;
  color: var(--text-secondary);
  min-height: 360px;
}
/* The class rule above out-specifies the UA default for [hidden] —
   restore the hide behaviour so non-active Wellness sub placeholders
   stay collapsed. */
.tempo-placeholder[hidden] { display: none; }
.tempo-placeholder-mark {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--separator);
  color: var(--active-accent);
  background: var(--active-accent-tint);
}
.tempo-placeholder-title {
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.tempo-placeholder-body {
  max-width: 320px;
  line-height: 1.5;
  font-size: 0.9rem;
}
.tempo-placeholder-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--active-accent);
  background: var(--active-accent-tint);
  border: 1px solid var(--active-accent-dim);
  padding: 10px 18px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tempo-placeholder-cta:hover { filter: brightness(1.15); }

/* ---------- Settings drawer (consolidates sound/theme/presets/log/focus) */
.tempo-settings-drawer {
  position: absolute;
  top: calc(var(--tempo-topbar-h) - 2px);
  right: 4px;
  z-index: 20;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 12px;
  padding: 6px;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* The item list grew past one screen (Tempo Coach + BFRB Support + Cloud
     Sync + Todoist). With no height cap the drawer ran off the bottom of the
     viewport, behind the fixed tab bar (z-index 100 > 20), leaving the
     Todoist connect control unreachable. Bound it to the space between the
     top bar and the tab bar and scroll the overflow. dvh tracks the live
     viewport (mobile-Safari URL bar shrink); the vh line is the fallback for
     engines without dvh so the cap still applies. */
  max-height: calc(100vh - var(--tempo-topbar-h) - var(--tempo-tabbar-h) - env(safe-area-inset-bottom, 0px) - 16px);
  max-height: calc(100dvh - var(--tempo-topbar-h) - var(--tempo-tabbar-h) - env(safe-area-inset-bottom, 0px) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.tempo-settings-drawer.hidden { display: none; }
/* The PWA install banner is JS-injected with app.prepend() (js/app.js), so when
   it shows it consumes ~56px at the top of #app and pushes the absolutely-
   positioned drawer down by that much — enough to run the drawer's tail behind
   the fixed tab bar again. Tighten the cap while the banner exists. It only ever
   injects for not-yet-installed mobile-web visitors: the native iOS app and
   installed/standalone PWAs skip it (Platform.isNative + standalone guards), so
   this never fires there. :has() unsupported ⇒ harmless fallback to the base
   cap (controls stay reachable, the tail just tucks under). */
#app:has(> .install-banner) .tempo-settings-drawer {
  max-height: calc(100vh - var(--tempo-topbar-h) - var(--tempo-tabbar-h) - env(safe-area-inset-bottom, 0px) - 84px);
  max-height: calc(100dvh - var(--tempo-topbar-h) - var(--tempo-tabbar-h) - env(safe-area-inset-bottom, 0px) - 84px);
}
.tempo-settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tempo-settings-item:hover { background: rgba(255, 255, 255, 0.05); }
.tempo-settings-item-icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tempo-settings-item-label { flex: 1; }
.tempo-settings-item-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ---------- Bottom tab bar (sticky pillar nav) --------------------------- */
.tempo-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--tempo-tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--separator);
  display: flex;
  align-items: stretch;
  z-index: 100;
}
.tempo-tab {
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2px;
  padding: 6px 2px 8px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-color, 150ms) ease;
}
.tempo-tab:hover { color: var(--text); }
.tempo-tab[aria-current="page"] { color: var(--active-accent); }

/* Active tab indicator — 2px underline (NEVER a filled pill). */
.tempo-tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--active-accent);
}

/* Tab icon intrinsic sizing */
.tempo-tab svg { width: 22px; height: 22px; flex-shrink: 0; }

/* ---------- Desktop sidebar (>= 768 px) ---------------------------------- */
/* Per the design spec: on desktop the bottom tab bar moves to a left
   sidebar; the 2-px pillar indicator rotates to a vertical line on the
   row's left edge. Container grows 420 → 720. Secondary actions
   (History, Settings) sit at the sidebar footer. */
@media (min-width: 768px) {
  #app {
    padding-left: 240px;
    padding-bottom: 32px;
    max-width: none;
  }

  .tempo-topbar,
  .tempo-subnav {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Wrap the content column. #app already has max-width 720 at this bp. */
  .tempo-topbar,
  .tempo-subnav,
  #timer-display,
  #offset-area,
  #vibrate-area,
  #alert-area,
  #controls,
  #pomodoro-area,
  #pomodoro-lists,
  #flow-area,
  #interval-area,
  #cooking-area,
  #seq-mode-area,
  #sequence-area,
  #timer-set-area,
  #instance-cards,
  #lap-stats,
  #lap-chart,
  #lap-section,
  #export-area,
  .tempo-pillar-placeholder {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Show sidebar, hide bottom tabbar */
  .tempo-tabbar {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: 220px;
    height: 100vh;
    padding: 16px 12px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    border-top: none;
    border-right: 0.5px solid var(--separator);
    background: color-mix(in srgb, var(--bg) 98%, transparent);
  }

  /* Desktop brand at the top of the sidebar */
  .tempo-tabbar::before {
    content: "Tempo";
    display: flex;
    align-items: center;
    padding: 4px 10px 16px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--text);
  }

  .tempo-tab {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    text-align: left;
  }
  .tempo-tab[aria-current="page"] {
    background: var(--active-accent-tint);
  }
  .tempo-tab[aria-current="page"]::after {
    left: 0;
    bottom: 10px;
    top: 10px;
    width: 2px;
    height: auto;
    transform: none;
  }
  .tempo-tab svg { width: 18px; height: 18px; }
}

/* ---------- Accessibility + reduced motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tempo-tabbar,
  .tempo-iconbtn,
  .tempo-subnav-scroll .mode-tab,
  .tempo-tab {
    transition: none;
  }
}

/* ---------- Light theme tweaks ------------------------------------------- */
/* The existing @media (prefers-color-scheme: light) in styles.css already
   swaps the base palette. Tempo tabs inherit via --active-accent so they
   behave correctly; we only need to soften the sub-nav background. */
@media (prefers-color-scheme: light) {
  .tempo-tabbar {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
  }
}

/* ---------- Wellness › Meds surface -------------------------------------- */
/* Reuses --active-accent tokens so it picks up the wellness-green palette
   automatically when data-pillar="wellness" is active on the app root. */

.meds-surface {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 16px 96px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.meds-surface[hidden] { display: none; }

.meds-surface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.meds-surface-heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.meds-surface-icon {
  color: var(--active-accent);
}
.meds-surface-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin: 0;
}

.meds-add-btn {
  color: var(--active-accent);
  background: var(--active-accent-tint);
  border: 1px solid var(--active-accent-dim);
  padding: 8px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.meds-add-btn:hover { filter: brightness(1.15); }
.meds-add-btn[hidden] { display: none; }

/* Empty state */
.meds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--text-secondary);
  border: 1px dashed var(--separator);
  border-radius: 14px;
}
.meds-empty[hidden] { display: none; }
.meds-empty-mark { font-size: 2rem; }
.meds-empty-title {
  color: var(--text);
  font-weight: 600;
  margin: 4px 0 0;
}
.meds-empty-body {
  max-width: 320px;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* Add/Edit form */
.meds-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 14px;
}
.meds-form[hidden] { display: none; }
.meds-form-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.meds-form-row { display: flex; flex-direction: column; gap: 6px; }
.meds-form-row[hidden] { display: none; }
.meds-form-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.meds-form-label > span { padding-left: 2px; }
.meds-form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  padding-left: 2px;
}
.meds-form-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--active-accent);
  flex-shrink: 0;
  cursor: pointer;
}
.meds-form-label input,
.meds-form-label select {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 10px 12px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--separator);
  border-radius: 10px;
  outline: none;
}
.meds-form-label input:focus,
.meds-form-label select:focus {
  border-color: var(--active-accent);
  box-shadow: 0 0 0 3px var(--active-accent-glow);
}
.med-input-invalid {
  border-color: var(--red, #ff453a) !important;
  animation: medShake 0.25s ease-in-out;
}
@keyframes medShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.meds-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.meds-btn {
  flex: 1;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid transparent;
}
.meds-btn-primary {
  color: var(--active-accent);
  background: var(--active-accent-tint);
  border-color: var(--active-accent-dim);
}
.meds-btn-primary:hover { filter: brightness(1.15); }
.meds-btn-ghost {
  color: var(--text-secondary);
  background: transparent;
  border-color: var(--separator);
}
.meds-btn-ghost:hover { color: var(--text); }

/* List / cards */
.meds-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.med-card {
  /* surface chrome (padding/bg/border/radius) from .tempo-card base */
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.med-card-flash {
  animation: medCardFlash 0.6s ease-out;
}
@keyframes medCardFlash {
  0%   { background: var(--active-accent-tint); }
  100% { background: var(--btn-bg); }
}

.med-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.med-card-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.med-card-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.med-card-dose {
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.med-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.med-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 1.05rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.med-icon-btn:hover {
  color: var(--text);
  background: var(--separator);
}

/* "Today" status — primary line of each card. Color depends on kind. */
.med-card-status {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.med-status-done      { color: var(--active-accent); }
.med-status-partial   { color: var(--amber); }
.med-status-none      { color: var(--text-secondary); font-weight: 500; font-size: 1.1rem; }
.med-status-asneeded  { color: var(--text); font-weight: 500; font-size: 1.1rem; }

.med-card-last {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  min-height: 1em;
}

.med-card-buttons {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.med-btn {
  flex: 1;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid transparent;
}
.med-btn-primary {
  color: var(--active-accent);
  background: var(--active-accent-tint);
  border-color: var(--active-accent-dim);
}
.med-btn-primary:hover { filter: brightness(1.15); }
.med-btn-secondary {
  color: var(--text);
  background: var(--btn-bg);
  border-color: var(--btn-border);
}
.med-btn-secondary:hover { border-color: var(--active-accent); }
.med-btn-ghost {
  color: var(--text-secondary);
  background: transparent;
  border-color: var(--separator);
}
.med-btn-ghost:hover { color: var(--text); }

/* Offset input (reveals below the card buttons) */
.med-offset {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--separator);
  border-radius: 10px;
}
.med-offset[hidden] { display: none; }
.med-offset-row {
  display: flex;
  gap: 8px;
}
.med-offset-row label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.med-offset-row input {
  font-family: inherit;
  font-size: 1rem;
  padding: 8px 10px;
  background: var(--btn-bg);
  color: var(--text);
  border: 1px solid var(--separator);
  border-radius: 8px;
  outline: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
  width: 100%;
  box-sizing: border-box;
}
.med-offset-row input:focus {
  border-color: var(--active-accent);
  box-shadow: 0 0 0 3px var(--active-accent-glow);
}
.med-offset-actions {
  display: flex;
  gap: 8px;
}

/* Prescription supply — prominent "doses remaining" badge. Sits near the top
   of the card (above the today-status) so it reads as the headline number. */
.med-supply {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--active-accent-tint);
  border: 1px solid var(--active-accent-dim);
  border-radius: 12px;
}
.med-supply[hidden] { display: none; }
/* count + meta keep their baseline relationship; the stepper centers beside. */
.med-supply-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
/* Vertical -1 / +1 steppers for manually correcting the remaining count. */
.med-supply-stepper {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}
.med-supply-step {
  font-family: inherit;
  font-size: 0.62rem;
  line-height: 1;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--separator);
  border-radius: 7px;
  width: 34px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.08s ease, border-color 0.15s ease, color 0.15s ease;
}
.med-supply-step:hover {
  color: var(--active-accent);
  border-color: var(--active-accent);
}
.med-supply-step:active { transform: scale(0.88); }
.med-supply-step:disabled { opacity: 0.3; cursor: default; }
.med-supply-step:disabled:active { transform: none; }
.med-supply-count {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--active-accent);
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.med-supply-count strong {
  font-size: 2rem;
  font-weight: 700;
  margin-right: 2px;
}
.med-supply-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: right;
}
.med-supply-low {
  background: var(--amber-tint);
  border-color: color-mix(in srgb, var(--amber) 35%, transparent);
}
.med-supply-low .med-supply-count { color: var(--amber); }
.med-supply-empty {
  background: rgba(255, 69, 58, 0.12);
  border-color: rgba(255, 69, 58, 0.4);
}
.med-supply-empty .med-supply-count { color: #ff453a; }

/* "New prescription" trigger — subtle dashed button below the log actions. */
.med-supply-reset {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px dashed var(--separator);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.med-supply-reset:hover {
  color: var(--text);
  border-color: var(--active-accent);
}

.med-supply-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--separator);
  border-radius: 10px;
}
.med-supply-input[hidden] { display: none; }
.med-supply-input-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.med-supply-input-label input {
  font-family: inherit;
  font-size: 1rem;
  padding: 8px 10px;
  background: var(--btn-bg);
  color: var(--text);
  border: 1px solid var(--separator);
  border-radius: 8px;
  outline: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
  width: 100%;
  box-sizing: border-box;
}
.med-supply-input-label input:focus {
  border-color: var(--active-accent);
  box-shadow: 0 0 0 3px var(--active-accent-glow);
}
.med-supply-input-actions {
  display: flex;
  gap: 8px;
}

/* Wellness pillar uses its own accent for the whole meds surface via the
   token system. No explicit [data-pillar="wellness"] rules needed here —
   tempo-nav sets data-pillar on body/app and the tokens at top of this
   file remap --active-accent. */
/* ---------- Wellness › Exercise surface ---------------------------------- */
/* Launcher for workout presets. Tapping a preset applies it to the existing
   Interval engine (js/interval.js) and routes to Timers › Interval so the
   existing Interval UI runs the workout. No second engine. */

.exercise-surface {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 16px 96px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.exercise-surface[hidden] { display: none; }

.exercise-surface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.exercise-surface-heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.exercise-surface-icon { color: var(--active-accent); }
.exercise-surface-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin: 0;
}

.exercise-custom-btn {
  color: var(--active-accent);
  background: var(--active-accent-tint);
  border: 1px solid var(--active-accent-dim);
  padding: 8px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.exercise-custom-btn:hover { filter: brightness(1.15); }

.exercise-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exercise-section-title {
  font-size: 0.78rem;
  /* E-polish follow-up: crisp dashboard heading (matches .analytics-card-header)
     — was text-secondary @ implicit full opacity, barely legible. */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.82;
  margin: 0 2px;
}

/* Preset grid — two columns on mobile, three on wider viewports */
.exercise-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 520px) {
  .exercise-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.exercise-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 14px;
  font-family: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  min-height: 128px;
}
.exercise-card:hover {
  border-color: var(--active-accent);
  background: color-mix(in srgb, var(--active-accent-tint) 40%, var(--btn-bg));
}
.exercise-card:active { transform: scale(0.98); }
.exercise-card-emoji {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 2px;
}
.exercise-card-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.exercise-card-summary {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.35;
}
.exercise-card-total {
  margin-top: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--active-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Recent Activity */
.exercise-recent {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
}
.exercise-recent-loading {
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 8px 2px;
}
/* .exercise-recent-empty — boxed empty-state chrome from .tempo-empty base. */
.exercise-recent-empty p { margin: 0; font-size: 0.88rem; line-height: 1.4; }
.exercise-recent-empty-mark { font-size: 1.4rem; }

.exercise-recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 12px;
}
.exercise-recent-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exercise-recent-row-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exercise-recent-row-when {
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.exercise-recent-row-duration {
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}
/* ---------- Wellness › Mindful surface ---------------------------------- */
/* Breathing exercises + meditation-timer launch. Breathing uses a pure
   CSS transition on a single .mindful-circle — the JS sets a per-step
   transition duration and a scale target, the browser tweens. */

.mindful-surface {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px 16px 96px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.mindful-surface[hidden] { display: none; }

.mindful-surface-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.mindful-surface-heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mindful-surface-icon { color: var(--active-accent); }
.mindful-surface-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin: 0;
}

.mindful-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mindful-section-title {
  font-size: 0.78rem;
  /* E-polish follow-up: crisp dashboard heading (see .exercise-section-title). */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.82;
  margin: 0 2px;
}

/* Breathing pattern cards */
.mindful-patterns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mindful-patterns[hidden] { display: none; }

.mindful-pattern-card {
  /* surface chrome (padding/bg/border/radius) from .tempo-card base */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  min-height: 78px;
}
.mindful-pattern-card:hover {
  border-color: var(--active-accent);
  background: color-mix(in srgb, var(--active-accent-tint) 40%, var(--btn-bg));
}
.mindful-pattern-card:active { transform: scale(0.98); }
.mindful-pattern-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.mindful-pattern-summary {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Breathing runner */
.mindful-runner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 20px 16px 24px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 18px;
}
.mindful-runner[hidden] { display: none; }

.mindful-runner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 0.8rem;
}
.mindful-runner-name {
  font-weight: 600;
  color: var(--text);
}

.mindful-circle-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 12px auto 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mindful-circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--active-accent) 28%, transparent) 0%,
    color-mix(in srgb, var(--active-accent) 6%, transparent) 60%,
    transparent 100%
  );
  border: 2px solid var(--active-accent);
  transform: scale(0.5);
  transition: transform 0.25s ease-in-out;
  will-change: transform;
  /* Soft glow that tracks the circle's scale */
  box-shadow: 0 0 40px color-mix(in srgb, var(--active-accent) 24%, transparent);
}
.mindful-circle-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  pointer-events: none;
}
.mindful-phase-label {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.mindful-phase-count {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Meditation preset grid */
.mindful-med-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 360px) {
  .mindful-med-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mindful-med-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 12px;
  font-family: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  min-height: 72px;
}
.mindful-med-card:hover {
  border-color: var(--active-accent);
  background: color-mix(in srgb, var(--active-accent-tint) 40%, var(--btn-bg));
}
.mindful-med-card:active { transform: scale(0.98); }
.mindful-med-duration {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--active-accent);
  font-variant-numeric: tabular-nums;
}
.mindful-med-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* NSDR (Restore) card — full-width variant of the meditation card. */
.mindful-nsdr-card {
  width: 100%;
  gap: 4px;
}
.mindful-nsdr-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text);
}
.mindful-nsdr-source {
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.mindful-nsdr-cta {
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--active-accent);
}

/* Shared buttons */
.mindful-btn {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid transparent;
  align-self: center;
}
.mindful-btn-ghost {
  color: var(--text-secondary);
  background: transparent;
  border-color: var(--separator);
  min-width: 120px;
}
.mindful-btn-ghost:hover { color: var(--text); border-color: var(--text-secondary); }

/* Reduced motion: freeze the breathing circle. The phase label/count still
   update, giving the user the timing without the animation. */
@media (prefers-reduced-motion: reduce) {
  .mindful-circle { transition: none !important; }
}

/* ---------- Wellness › Cooking surface ----------------------------------- */
/* Quick-launch grid for cooking presets. Tapping a card spins up a named
   timer in Timers › Cook (js/cooking-ui.js) and routes there. Recent
   Activity reads History filtered by type='cooking'. */

.wcook-surface {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 16px 96px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.wcook-surface[hidden] { display: none; }

.wcook-surface-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wcook-surface-heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.wcook-surface-icon { color: var(--active-accent); }
.wcook-surface-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin: 0;
}

.wcook-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wcook-section-title {
  font-size: 0.78rem;
  /* E-polish follow-up: crisp dashboard heading (see .exercise-section-title). */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.82;
  margin: 0 2px;
}

.wcook-cap-notice {
  padding: 10px 14px;
  background: color-mix(in srgb, var(--amber) 14%, var(--btn-bg));
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.85rem;
}
.wcook-cap-notice[hidden] { display: none; }

/* Preset grid — two columns on mobile, four on wider viewports */
.wcook-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 520px) {
  .wcook-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.wcook-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 14px;
  font-family: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  min-height: 102px;
}
.wcook-card:hover {
  border-color: var(--active-accent);
  background: color-mix(in srgb, var(--active-accent-tint) 40%, var(--btn-bg));
}
.wcook-card:active { transform: scale(0.98); }
.wcook-card-emoji {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 2px;
}
.wcook-card-name {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.wcook-card-duration {
  margin-top: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--active-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Recent Activity */
.wcook-recent {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
}
.wcook-recent-loading {
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 8px 2px;
}
/* .wcook-recent-empty — boxed empty-state chrome from .tempo-empty base. */
.wcook-recent-empty p { margin: 0; font-size: 0.88rem; line-height: 1.4; }
.wcook-recent-empty-mark { font-size: 1.4rem; }

.wcook-recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 12px;
}
.wcook-recent-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wcook-recent-row-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wcook-recent-row-when {
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.wcook-recent-row-duration {
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}