:root {
  --bg: #e2dcf0;
  --panel: #f3effa;
  --panel-alt: #ece5f6;
  --border: #cdc0e8;
  --track: #cdc0e8;
  --accent: #3fbf75;
  --accent-dark: #2f9c5d;
  --amber: #f5a623;
  --amber-dark: #d68910;
  --danger: #e4574b;
  --orange: #f4801f;
  --fat-color: #f4801f;
  --protein-color: #3b82f6;
  --carbs-color: #8b5cf6;
  --exercise-color: #f4801f;
  --resting-color: #64748b;
  --tef-color: #0891b2;
  --text: #262a3d;
  --muted: #7a8092;
  --shadow: 0 1px 2px rgba(24, 28, 47, 0.04), 0 4px 12px rgba(24, 28, 47, 0.06);
}

:root[data-theme="dark"] {
  --bg: #1c1a24;
  --panel: #262330;
  --panel-alt: #2e2a3b;
  --border: #3d3850;
  --track: #3d3850;
  --accent: #4ade80;
  --accent-dark: #22c55e;
  --amber: #fbbf24;
  --amber-dark: #f59e0b;
  --danger: #f87171;
  --orange: #fb923c;
  --fat-color: #fb923c;
  --protein-color: #60a5fa;
  --carbs-color: #a78bfa;
  --exercise-color: #fb923c;
  --resting-color: #94a3b8;
  --tef-color: #22d3ee;
  --text: #ece9f4;
  --muted: #9791a8;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

html {
  overscroll-behavior: none;
  touch-action: pan-y;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
  margin: 0;
  overscroll-behavior: none;
  touch-action: pan-y;
}

nav {
  padding: 10px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Tabs + settings gear share one row (brand logo removed entirely) --
   nav-links shrinks/scrolls first so the gear always stays put on the
   right, never pushed off or wrapped onto its own line. */
.nav-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-links {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
  touch-action: pan-x;
}

.nav-links::-webkit-scrollbar { display: none; }

nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

nav a:hover { color: var(--accent-dark); }

.nav-links a {
  color: var(--amber);
  font-size: 0.78rem;
  padding: 6px 8px;
}

.nav-links a.active {
  color: var(--amber-dark);
  background: var(--panel-alt);
}

.nav-settings {
  flex-shrink: 0;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: normal;
}

main {
  max-width: 680px;
  margin: 0 auto;
  padding: 10px 24px 64px;
}

/* nav.js keeps every visited page alive as a sibling panel inside <main>
   (see its own top comment) so switching between them is instant -- only
   one is ever visible. [hidden] alone is enough (the UA stylesheet already
   sets display:none for it), !important guards against anything else in
   this file accidentally giving .page-panel its own display value later. */
.page-panel[hidden] { display: none !important; }

h1 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin: 32px 0 12px;
}

.muted { color: var(--muted); font-size: 0.85rem; }

.report-subtitle { text-align: center; font-size: 0.78rem; margin-top: 0; }
.success { color: var(--accent-dark); font-weight: 600; }

.save-indicator {
  display: inline-block;
  color: var(--accent-dark);
  font-weight: 600;
  font-size: 0.82rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.save-indicator.show { opacity: 1; }
.error { color: var(--danger); font-weight: 600; }
.warning-text { color: var(--amber); font-weight: 600; font-size: 0.85rem; }
.warning-text:empty { display: none; }

.allergy-warning {
  color: var(--danger);
  font-weight: 700;
  background: rgba(228, 87, 75, 0.12);
  border: 1px solid var(--danger);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 14px 0;
}

.allergy-icon { color: var(--danger); margin-left: 4px; }
.no-nutrition-icon {
  color: var(--amber);
  margin-left: 4px;
  border: 1px solid var(--amber);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  line-height: 1;
}

form {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* A form with multiple full-width sections (settings-rows, a weekday picker,
   a submit button) needs to stack vertically — the default flex-wrap above is
   for small single-line forms, and only "happens" to stack wider ones because
   their rows are usually too wide to fit two side by side. A form with any
   narrower block (e.g. .weekday-section) doesn't get that accidental save, so
   it needs to opt out of flex layout explicitly instead. */
.stacked-form {
  display: block;
}

select, input[type="text"], input[type="number"], input[type="file"] {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
}

select:focus, input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15);
}

input[type="text"] { flex: 1; min-width: 200px; }

a {
  color: var(--amber);
  text-decoration: none;
}

button {
  background: var(--amber);
  color: #1a1408;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

button:hover { background: var(--amber-dark); }
button:active { transform: scale(0.98); }

.secondary-btn {
  display: inline-block;
  background: transparent;
  color: var(--amber-dark);
  border: 1.5px solid var(--amber);
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  margin-bottom: 12px;
}

.secondary-btn:hover { background: rgba(245, 166, 35, 0.1); }

/* Auth forms (login/signup): default form flex layout stretches the submit
   button to match the height of the label+input columns beside it, making it
   look oversized next to everything else on the page. Align it to the bottom
   of the row instead, and trim its padding so it reads as a normal button. */
.auth-form {
  align-items: flex-end;
}

.auth-form button[type="submit"] {
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 8px;
}

.auth-alt-btn {
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 8px;
}

.bar-track {
  background: var(--track);
  border-radius: 999px;
  height: 22px;
  overflow: hidden;
}

.bar-fill {
  background: var(--accent);
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.dots { display: flex; gap: 10px; margin: 12px 0; }

.dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--track);
  border: 1px solid var(--border);
  display: inline-block;
}

.dot.filled { background: var(--accent); border-color: var(--accent-dark); }

.stat-row {
  display: grid;
  grid-template-columns: 170px 1fr 50px;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.stat-count { color: var(--muted); text-align: right; font-weight: 600; }

ul { padding-left: 20px; }
li { margin-bottom: 10px; white-space: pre-line; }

.search-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  font-size: 0.85rem;
}

.search-result-info { flex: 1; min-width: 0; }
.search-result-info strong { font-weight: 700; }
.search-result-info .muted { font-size: 0.78rem; }

a.search-result,
button.search-result {
  color: inherit;
  text-decoration: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
a.search-result:hover,
button.search-result:hover { border-color: var(--accent); }

.search-result-chevron { color: var(--muted); font-size: 1.2rem; flex-shrink: 0; }

.search-result-form {
  margin-top: 0;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.search-result-form input[type="text"] { min-width: 140px; }

.custom-food-form input[type="number"] {
  width: 120px;
}

.interaction-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}

.interaction-card.synergy { border-left: 4px solid var(--accent); }
.interaction-card.opposition { border-left: 4px solid var(--danger); }
.interaction-header { font-weight: 700; margin-bottom: 8px; }

.bloodwork-status {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.bloodwork-status.low,
.bloodwork-status.high {
  color: var(--danger);
  background: rgba(228, 87, 75, 0.12);
}

.bloodwork-status.borderline {
  color: var(--amber-dark);
  background: rgba(245, 166, 35, 0.14);
}

.bloodwork-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.bloodwork-stat-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  border-left: 4px solid var(--border);
}

.bloodwork-stat-card.in-range { border-left-color: var(--accent); }
.bloodwork-stat-card.borderline { border-left-color: var(--amber); }
.bloodwork-stat-card.out-of-range { border-left-color: var(--danger); }

.bloodwork-stat-label { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.bloodwork-stat-num { font-size: 1.5rem; font-weight: 800; }

.bloodwork-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.bloodwork-category-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}

.bloodwork-category-name { font-weight: 700; margin-bottom: 2px; }

.bloodwork-category-proportion {
  height: 6px;
  border-radius: 4px;
  background: rgba(228, 87, 75, 0.25);
  margin-top: 8px;
  overflow: hidden;
}

.bloodwork-category-fill { height: 100%; background: var(--accent); }

.bloodwork-category-heading {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin: 20px 0 8px;
}

.bloodwork-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.bloodwork-value { font-size: 1.1rem; font-weight: 700; }
.bloodwork-trend { color: var(--muted); font-size: 0.78rem; }
.bloodwork-ref-text { margin: 8px 0 0; font-size: 0.78rem; }
.bloodwork-history { margin-top: 10px; }
.bloodwork-single-delete { margin-top: 6px; display: flex; justify-content: flex-end; }

.bloodwork-back-link {
  display: inline-block;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.bloodwork-scan-btn {
  display: block;
  text-align: center;
  background: var(--amber);
  color: #1a1408;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 12px;
}

.bloodwork-scan-btn:hover { background: var(--amber-dark); }

.bloodwork-manual-entry {
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 16px;
}

.bloodwork-manual-entry summary {
  cursor: pointer;
  padding: 10px 0;
  font-weight: 600;
  color: var(--muted);
}

.bloodwork-manual-entry[open] summary { margin-bottom: 4px; }

.bloodwork-range-note {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 10px 0 16px;
}

.bloodwork-disclaimer {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
}

.bloodwork-overview {
  margin-bottom: 16px;
  line-height: 1.5;
}

.bloodwork-bar {
  position: relative;
  height: 10px;
  border-radius: 6px;
  background: rgba(228, 87, 75, 0.12);
  margin: 8px 0 12px;
}

.bloodwork-bar-range {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(63, 191, 117, 0.35);
  border-radius: 6px;
}

.bloodwork-bar-marker {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 16px;
  background: var(--text);
  border-radius: 2px;
  transform: translateX(-2px);
}

.bloodwork-scan-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px 4px;
  margin-bottom: 12px;
  position: relative;
}

.bloodwork-scan-include {
  position: absolute;
  top: 12px;
  right: 16px;
}

.settings-row {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.settings-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.settings-row select,
.settings-row input {
  min-width: 100px;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.settings-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-btn {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

/* Settings-only snugging pass -- same "too bulky" complaint the food log
   page already got fixed for, scoped here rather than on the shared bare
   selectors above so other pages using the same h2/form/settings-row/
   settings-btn building blocks aren't affected. */
.settings-page h2 { margin: 0 0 10px; font-size: 0.8rem; }
.settings-page .settings-section,
.settings-page .advanced-settings-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px 16px;
  margin-bottom: 14px;
}
.settings-info-box {
  color: var(--text);
  background: var(--panel-alt);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 14px;
  font-size: 0.85rem;
  line-height: 1.4;
}
.settings-page .settings-row { gap: 14px; margin-top: 10px; }
.settings-page .settings-row label { gap: 4px; font-size: 0.8rem; }
.settings-page .settings-row select,
.settings-page .settings-row input { padding: 6px 10px; font-size: 0.82rem; }
.settings-page .settings-btn-group { gap: 6px; }
.settings-page .settings-btn { padding: 6px 13px; font-size: 0.82rem; }
.settings-page form { gap: 10px; margin-top: 6px; }
.settings-page .toggle-switch { width: 40px; height: 22px; }
.settings-page .toggle-switch::after { width: 16px; height: 16px; }
.settings-page .toggle-switch.on::after { transform: translateX(18px); }
.settings-page .secondary-btn {
  padding: 8px 16px;
  font-size: 0.82rem;
  border-radius: 999px;
}

.settings-btn:hover:not(.selected) { background: var(--border); }

.settings-btn.selected {
  background: var(--amber);
  border-color: var(--amber);
  color: #1a1408;
}

/* On/off settings get a real sliding switch instead of a two-button pair --
   closer to how every other app represents a single boolean, and steers
   clear of the green "selected" pill look entirely for these. */
.toggle-switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #4a4560;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.toggle-switch.on { background: var(--amber); }
.toggle-switch.on::after { transform: translateX(20px); }

.settings-row label.toggle-row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.target-category-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  margin-bottom: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
}

.target-category-row:hover { border-color: var(--accent); }

.target-category-row-name { font-weight: 700; }

.target-category-row-chevron { color: var(--muted); font-size: 1.2rem; }

.target-row {
  display: grid;
  grid-template-columns: 1fr 130px 130px;
  align-items: end;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.target-row:last-child { border-bottom: none; }

.target-row-label {
  font-size: 0.88rem;
  font-weight: 600;
  padding-bottom: 8px;
}

.target-row-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.target-row-field input { width: 100%; }

@media (max-width: 560px) {
  .target-row {
    grid-template-columns: 1fr 1fr;
  }
  .target-row-label {
    grid-column: 1 / -1;
    padding-bottom: 2px;
  }
}

.nutrient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}

.today-summary {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.split-ring-wrap:first-child { justify-self: start; }
.split-ring-wrap:last-child { justify-self: end; }

.today-summary-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.quick-actions-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.quick-barcode-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  color: #e8c874;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quick-barcode-btn svg { width: 20px; height: 20px; }

#fab-add svg { width: 36px; height: 36px; stroke-width: 2.5; }

.macro-meter {
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  margin-bottom: 24px;
  gap: 8px;
}

.macro-meter .nutrient-tile {
  padding: 10px 12px;
}

.macro-meter .nutrient-tile-label {
  font-size: 0.72rem;
  margin-bottom: 4px;
}

.macro-meter .nutrient-bar {
  height: 6px;
}

.macro-meter .nutrient-tile-pct {
  font-size: 0.72rem;
  margin-top: 4px;
}

.split-ring-wrap {
  display: flex;
  flex-shrink: 0;
}

.split-ring {
  --ring-size: 96px;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.split-ring:hover,
.split-ring:focus,
.split-ring:active {
  background: var(--panel);
}

.split-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.split-ring-empty {
  background:
    radial-gradient(closest-side, var(--panel) 80%, transparent 81% 100%),
    var(--track);
  padding: 4px;
  text-align: center;
}

.split-ring-value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.split-ring-label {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1px;
}

.split-ring-empty .split-ring-label {
  font-size: 0.52rem;
  margin-top: 0;
}

.net-kcal-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--panel);
  border-radius: 999px;
  padding: 8px 16px;
  margin: 0 0 14px;
  font-size: 0.8rem;
  font-weight: 700;
}

.net-kcal-pill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.net-kcal-pill.net-deficit { color: var(--accent); }
.net-kcal-pill.net-surplus { color: var(--danger); }

.quick-voice-btn {
  position: relative;
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a3f4b, #17191f);
  color: #e8c874;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.quick-voice-btn svg {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
}

.quick-voice-btn.recording {
  background: var(--danger);
  animation: mic-recording-scale 1.1s ease-in-out infinite;
}

.quick-voice-btn.recording::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  border: 2px solid var(--danger);
  animation: mic-recording-ring 1.1s ease-out infinite;
}

@keyframes mic-recording-scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes mic-recording-ring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Fired the instant recording stops, so it's never ambiguous whether the
   button "heard" you finish speaking -- a distinct beat between the red
   recording pulse and whatever happens next (page navigating away on a
   match, or the shake below on no match). */
.quick-voice-btn.confirmed {
  animation: mic-confirm-pulse 0.3s ease;
}

.quick-voice-btn.no-match {
  animation: mic-error-shake 0.4s ease;
}

@keyframes mic-confirm-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); background: var(--amber); }
  100% { transform: scale(1); }
}

@keyframes mic-error-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.macro-tile {
  font-family: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  color: var(--text);
}

.macro-tile:hover {
  box-shadow: 0 2px 4px rgba(24, 28, 47, 0.08), 0 6px 16px rgba(24, 28, 47, 0.12);
}

/* Macro identity colors — fat/protein/carbs get a fixed color (not the usual
   tier good/mid/low) so they're recognizable by color across the Today page
   and the Daily Report, independent of progress toward goal. */
.nutrient-tile[data-key="fat"] .bar-fill { background: var(--fat-color); }
.nutrient-tile[data-key="fat"] .nutrient-tile-label { color: var(--fat-color); }
.nutrient-tile[data-key="protein"] .bar-fill { background: var(--protein-color); }
.nutrient-tile[data-key="protein"] .nutrient-tile-label { color: var(--protein-color); }
.nutrient-tile[data-key="carbs"] .bar-fill { background: var(--carbs-color); }
.nutrient-tile[data-key="carbs"] .nutrient-tile-label { color: var(--carbs-color); }
.nutrient-tile[data-key="kcal"] .bar-fill { background: var(--accent); }

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.category-chip {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.category-chip:hover:not(.active) { background: var(--border); }

.category-chip.active {
  background: var(--amber);
  border-color: var(--amber);
  color: #1a1408;
}

.suggestions-empty {
  margin: 0;
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--muted);
}

.breakdown-item { margin-bottom: 7px; }

.breakdown-item-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  margin-bottom: 2px;
}

.breakdown-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breakdown-item-amount {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  white-space: nowrap;
}

.breakdown-bar { height: 4px; }

.nutrient-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--shadow);
}

a.nutrient-tile {
  display: block;
  color: inherit;
  text-decoration: none;
}

a.nutrient-tile:hover { border-color: var(--accent); }

a.detail-nutrient-row {
  display: flex;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
}

a.detail-nutrient-row:hover { background: var(--panel-alt); }

.detail-nutrient-row-current { font-weight: 700; }

.detail-nutrient-row-parent { font-weight: 700; }

.detail-nutrient-row-child {
  padding: 4px 0 4px 20px;
  font-size: 0.82rem;
  color: var(--muted);
  border-bottom: none;
  position: relative;
}

.detail-nutrient-row-child::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--border);
}

.pairing-list { margin-bottom: 8px; }

.pairing-item {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.pairing-item:last-child { border-bottom: none; }

.pairing-item-label {
  font-weight: 700;
  text-decoration: none;
}

.pairing-item-label:hover { text-decoration: underline; }

.pairing-item-label.pairing-good { color: var(--accent); }
.pairing-item-label.pairing-avoid { color: var(--danger); }
.pairing-item-label.pairing-balance { color: var(--amber); }

.detail-group-title.pairing-good {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.detail-group-title.pairing-avoid {
  color: var(--danger);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.detail-group-title.pairing-balance {
  color: var(--amber);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.pairing-item-reason {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  color: var(--muted);
}

.nutrient-tile-label {
  font-size: 0.74rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.nutrient-tile-pct {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 600;
  margin-top: 4px;
  text-align: left;
}

.nutrient-bar { height: 6px; }

.bar-fill.tier-low { background: var(--danger); }
.bar-fill.tier-mid { background: var(--amber); }
.bar-fill.tier-good { background: var(--accent); }
.bar-fill.tier-over { background: var(--danger); }

.meal-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 8px;
  box-shadow: var(--shadow);
}

.meal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.meal-card-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}

.meal-card-totals {
  text-align: right;
  line-height: 1.3;
}

.meal-card-kcal {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--amber);
}

.meal-card-macros {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
}

.meal-card-macros [data-key="fat"] { color: var(--fat-color); }
.meal-card-macros [data-key="protein"] { color: var(--protein-color); }
.meal-card-macros [data-key="carbs"] { color: var(--carbs-color); }

.meal-card-add {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--amber);
  border: 1px solid var(--amber);
  color: #1a1408;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.meal-item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.meal-item-list li {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
  white-space: normal;
}

.meal-item-list li:last-child { border-bottom: none; }

.meal-item-delete-reveal {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.meal-item-swipe-wrap.swiped .meal-item-delete-reveal {
  opacity: 1;
  pointer-events: auto;
}

.meal-item-delete-reveal-form { margin: 0; display: flex; }

.meal-item-delete-reveal-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 10px;
  padding: 0;
  margin: 0;
  background: var(--danger);
  color: #ffffff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.meal-item-swipe-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  background: var(--panel);
  touch-action: pan-y;
  transition: transform 0.2s ease;
}

.meal-item-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  white-space: normal;
  line-height: 1.2;
  color: inherit;
  text-decoration: none;
}

.meal-item-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  line-height: 1.2;
}

.meal-item-subrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin-top: 1px;
  line-height: 1.2;
}

.meal-item-quantity {
  color: var(--muted);
  font-size: 0.72rem;
}

.meal-item-kcal {
  flex-shrink: 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
}

@media (hover: none) and (pointer: coarse) {
  .delete-entry-form { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .meal-item-delete-reveal { display: none; }
}

.entry-detail-trigger { cursor: pointer; border-radius: 8px; }
.entry-detail-trigger:hover { background: var(--panel-alt); }

.macro-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 1px;
  line-height: 1;
}

:root[data-macro-badges="off"] .macro-badges { display: none; }
:root[data-meal-totals="off"] .meal-card-totals { display: none; }

.advanced-settings-section { display: none; }
:root[data-advanced-settings="on"] .advanced-settings-section { display: block; }

.macro-badge {
  display: inline-block;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 5px;
  font-size: 0.6rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--muted);
}

.macro-badge[data-key="fat"] { color: var(--fat-color); }
.macro-badge[data-key="protein"] { color: var(--protein-color); }
.macro-badge[data-key="carbs"] { color: var(--carbs-color); }

.detail-group { margin-bottom: 18px; }

.detail-group-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.detail-nutrient-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.88rem;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}

.detail-nutrient-row:last-child { border-bottom: none; }

.meal-item-time {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1.2;
  flex-shrink: 0;
}

.meal-item-name {
  flex: 1;
  font-weight: 700;
  font-size: 0.84rem;
  line-height: 1.2;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.delete-entry-form { flex-shrink: 0; margin: 0; }

.delete-entry-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--muted);
  line-height: 1;
  padding: 5px;
  border-radius: 6px;
  cursor: pointer;
}

.delete-entry-btn svg { width: 15px; height: 15px; }

.delete-entry-btn:hover { color: var(--danger); background: rgba(228, 87, 75, 0.1); }

.meal-empty { margin: 0; }

.meal-card-subtitle { margin: -4px 0 14px; }

.fab-spacer { height: 90px; }

.suggestions-dropdown {
  display: none;
  margin: -12px 0 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel);
}

.suggestions-dropdown.open { display: block; }

.pick-results { margin-top: 10px; }

.suggestion-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 6px 14px;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: var(--panel-alt); }

.combo-badge {
  display: inline-block;
  background: var(--amber);
  color: #1a1408;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 999px;
  margin-right: 8px;
}

/* Shared by log_photo.html and log_barcode.html's in-page camera views.
   max-height keeps the video short enough that the shutter/controls below it
   are always visible without scrolling -- confirmed live (2026-08-10) as a
   real problem when the video was left unconstrained. */
.camera-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.camera-video-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 45vh;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.camera-video-wrap video,
.camera-video-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A moving highlighted line over the live feed (or the captured photo while
   waiting on identification) -- pure visual feedback that something is
   actively happening, since a plain static video/photo with no motion reads
   as "is this even working?" otherwise. */
.camera-scan-line {
  position: absolute;
  left: 4%;
  right: 4%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  box-shadow: 0 0 8px 2px var(--amber);
  animation: camera-scan-move 1.8s ease-in-out infinite;
}

@keyframes camera-scan-move {
  0% { top: 4%; }
  50% { top: 94%; }
  100% { top: 4%; }
}

/* Grid, not flex space-between -- the shutter button needs to sit on the
   row's true center regardless of how wide the Cancel button's text makes
   it, which a fixed-width spacer can't guarantee (confirmed live
   2026-08-10: Cancel was wider than the spacer, visibly pulling the shutter
   off-center). The middle grid column is centered on the row no matter what
   the outer columns contain. */
.camera-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: 400px;
}

.camera-controls > :first-child { justify-self: start; }
.camera-controls > .camera-shutter-btn { justify-self: center; }
.camera-controls-spacer { justify-self: end; }

.camera-shutter-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--amber);
  color: #1a1408;
  border: 3px solid var(--panel);
  box-shadow: 0 0 0 2px var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.camera-shutter-btn:active { transform: scale(0.94); }
.camera-shutter-btn svg { width: 22px; height: 22px; }

.combo-ingredient-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.combo-ingredient-list li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.combo-ingredient-list li:last-child { border-bottom: none; }

.fab-add {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--amber);
  color: #1a1408;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  border: none;
  box-shadow: 0 6px 20px rgba(24, 28, 47, 0.28);
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;
}

.fab-add:hover { background: var(--amber-dark); }
.fab-add:active { transform: translateX(-50%) scale(0.96); }

.add-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 35, 0.45);
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}

.add-sheet-overlay.open { display: flex; }

.center-sheet-overlay { align-items: center; padding: 20px; }
.center-sheet-overlay .add-sheet { border-radius: 20px; max-height: 80vh; }

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  flex-shrink: 0;
}

.add-sheet {
  background: var(--panel);
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: 20px 22px 32px;
  box-shadow: 0 -6px 24px rgba(24, 28, 47, 0.2);
}

.add-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.add-sheet-header strong { font-size: 1.1rem; }

.add-sheet-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.add-sheet-meal-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 16px;
}

.add-sheet-meal-label select { width: 100%; }

.add-sheet-meal-locked {
  margin: 0 0 16px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.add-sheet-quick {
  margin-top: 0;
  margin-bottom: 18px;
}

.mic-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--panel-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.mic-btn svg { width: 20px; height: 20px; }

.mic-btn:hover { background: var(--panel-alt); color: var(--accent-dark); }

.mic-btn.recording {
  background: var(--danger);
  color: #ffffff;
  border-color: var(--danger);
  animation: mic-recording-pulse 1.1s ease-in-out infinite;
}

@keyframes mic-recording-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.add-sheet-links {
  display: flex;
  flex-direction: column;
}

.add-sheet-links a {
  color: var(--amber-dark);
  text-decoration: none;
  font-weight: 600;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.add-sheet-links a:last-child { border-bottom: none; }
.add-sheet-links a:hover { text-decoration: underline; }

#timezone-search { width: 100%; margin-bottom: 4px; }

.timezone-list {
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.timezone-list-region {
  position: sticky;
  top: 0;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: var(--panel-alt);
}

.timezone-list-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.timezone-list-item:hover { background: var(--panel-alt); }

.timezone-list-region.hidden,
.timezone-list-item.hidden { display: none; }

.date-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.back-btn:hover { background: var(--text); color: #ffffff; border-color: var(--text); }

.date-nav h1,
.repeat-items-header h1 {
  font-size: 0.9rem;
  margin: 0;
}

.repeat-items-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 8px;
}

.repeat-items-header h1 { grid-column: 2; text-align: center; }
.repeat-items-header .secondary-btn {
  grid-column: 3;
  justify-self: end;
  font-size: 0.8rem;
  padding: 6px 12px;
  margin-bottom: 0;
}

.repeat-items-explainer,
.metrics-explainer {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
}

.repeat-items-count { margin: 18px 0 14px; }

.repeat-item-list { list-style: none; padding: 0; margin: 0; }

.repeat-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.repeat-items-page > .repeat-item-row {
  padding: 10px 0;
}



.repeat-item-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
}

.repeat-item-name {
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}

.repeat-item-meta {
  font-size: 0.72rem;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.repeat-item-row.disabled .repeat-item-name,
.repeat-item-row.disabled .repeat-item-meta { color: var(--muted); }

.tag-list { list-style: none; padding: 0; margin: 0 0 14px; }

.tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.tag-row:last-child { border-bottom: none; }

.tag-add-form {
  display: flex;
  gap: 10px;
}

.tag-add-form button {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.repeat-item-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.repeat-item-toggle {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  border: none;
  background: var(--border);
  position: relative;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.repeat-item-toggle.on { background: var(--amber); }

.repeat-item-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.15s ease;
}

.repeat-item-toggle.on::after { transform: translateX(14px); }

.weekday-section {
  margin: 20px 0;
}

.weekday-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.weekday-section-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.text-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-dark);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
}

.text-link-btn:hover,
.text-link-btn:active { background: none; }

.weekday-toggle-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.weekday-toggle {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--amber);
  background: transparent;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

/* The generic `button:hover`/`button:active` rules (higher specificity than
   a bare class -- see the note on .text-link-btn below) otherwise paint
   every circle var(--amber-dark) the instant it's touched, on top of
   whatever .selected already set -- on a touchscreen that hover state can
   stay "stuck" after tap (no real pointer to move away), which is what
   made every circle look permanently gold regardless of selection state
   (reported live, 2026-08-11). Pinning both states' hover/active explicitly
   is what actually fixes it, not just reordering rules. */
.weekday-toggle:hover,
.weekday-toggle:active { background: transparent; }

.weekday-toggle.selected {
  background: var(--amber);
  border-color: var(--amber);
  color: #1a1408;
}

.weekday-toggle.selected:hover,
.weekday-toggle.selected:active { background: var(--amber); }

.time-picker-display {
  width: 100%;
  text-align: left;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}

.time-picker-fields {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

.time-picker-box {
  width: 72px;
  height: 64px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  font-family: inherit;
}

.time-picker-colon { font-size: 1.8rem; font-weight: 700; color: var(--muted); }

.time-picker-ampm {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.time-picker-ampm button {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-alt);
  color: var(--text);
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 600;
}

.time-picker-ampm button.selected { background: var(--amber); border-color: var(--amber); color: #1a1408; }

.time-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 600px) {
  nav { padding: 14px 18px; gap: 14px; }
  main { padding: 6px 16px 48px; }
  h1 { font-size: 1.35rem; }
  .search-result { flex-direction: column; align-items: stretch; }
  .search-result-form { flex-wrap: wrap; }
}

.weight-stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
}

.metrics-page h1 { margin-bottom: 12px; }
.metrics-page h3 { margin: 14px 0 6px; font-size: 0.8rem; }

.metrics-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px 14px;
  margin-bottom: 12px;
}

.metrics-section h2 { margin: 0 0 8px; }

.metrics-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.metrics-chart-box { position: relative; margin-bottom: 4px; }

.metrics-chart {
  width: 100%;
  height: 108px;
  display: block;
}

.metrics-chart-gridline { stroke: var(--border); stroke-width: 0.5; vector-effect: non-scaling-stroke; }

.metrics-chart-rate {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text);
  pointer-events: none;
}

.metrics-chart-dates {
  position: absolute;
  bottom: 4px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--muted);
  pointer-events: none;
}

.metrics-manual-entry { margin-top: 10px; }

.metrics-manual-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
  row-gap: 8px;
}

.metrics-manual-row input[type="number"] {
  width: 90px;
  padding: 6px 8px;
  font-size: 0.9rem;
}

.metrics-manual-row button {
  padding: 7px 14px;
  font-size: 0.85rem;
}

.metrics-history-list {
  height: 132px;
  overflow-y: auto;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}

.metrics-history-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 2px;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border);
}

.metrics-history-date { color: var(--muted); }

.metrics-history-value { font-weight: 600; }

.metrics-explainer { margin-top: 8px; line-height: 1.4; }

.metrics-bodyfat-ai {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.metrics-bodyfat-ai span { font-size: 0.72rem; color: var(--muted); font-weight: 600; }

.metrics-bodyfat-ai a,
.metrics-bodyfat-ai button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}

.metrics-bodyfat-ai svg { width: 16px; height: 16px; }

.metrics-period-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.metrics-period-btn {
  flex: 1;
  text-align: center;
  padding: 6px;
  border-radius: 999px;
  background: var(--panel-alt);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.metrics-period-btn.selected { background: var(--amber); color: #1a1408; }

.metrics-balance-chart { margin-bottom: 12px; }

.metrics-balance-svg { width: 100%; height: 90px; display: block; }

.metrics-bar-surplus { fill: var(--danger); }
.metrics-bar-deficit { fill: var(--accent); }

.metrics-balance-labels {
  display: flex;
  margin-top: 4px;
  font-size: 0.68rem;
  color: var(--muted);
}

.metrics-balance-labels span { flex: 1; text-align: center; }

.metrics-maintenance-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.metrics-maintenance-card .muted { font-size: 0.72rem; margin: 2px 0 0; }

.metrics-maintenance-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--amber);
  white-space: nowrap;
}

.metrics-maintenance-value span { font-size: 0.68rem; color: var(--muted); font-weight: 600; }

/* The neighboring day's prefetched preview panel, dragged in tandem with
   .main during a date swipe (see index.html/micronutrients.html) -- position/
   size/padding are set inline per-drag to match main's live rect exactly,
   this just covers what stays constant. Missing this rule entirely was the
   cause of the drag "clipping weirdly": no overflow:hidden let content spill
   outside its bounds, no z-index/background let it fight with the page
   underneath, no pointer-events:none let it intercept the drag itself. */
.swipe-preview {
  position: fixed;
  overflow: hidden;
  z-index: 40;
  background: var(--bg);
  pointer-events: none;
  display: none;
  box-sizing: border-box;
}

/* Swiping to another day used to be an abrupt instant page swap -- a
   cross-document view transition slides the old day out and the new one in
   instead. Purely additive: browsers without support (this rule itself is
   the feature-detection) just keep the plain instant navigation, no JS
   fallback needed. Direction comes from a sessionStorage hint the swipe
   handler sets (see index.html) and layout.html's early script reads into
   data-nav-direction before first paint. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
  animation-timing-function: ease-out;
}

:root[data-nav-direction="next"]::view-transition-old(root) { animation-name: slide-out-left; }
:root[data-nav-direction="next"]::view-transition-new(root) { animation-name: slide-in-right; }
:root[data-nav-direction="prev"]::view-transition-old(root) { animation-name: slide-out-right; }
:root[data-nav-direction="prev"]::view-transition-new(root) { animation-name: slide-in-left; }

/* Lifts the nav bar into its own transition group so it's excluded from the
   root snapshot above -- without this it slides with the rest of the page
   during the post-release transition, even though the drag itself (see
   index.html's touchmove handler) already correctly leaves it untouched.
   Matches how a native app's persistent chrome behaves: the tab bar doesn't
   move, only the content underneath it does. */
nav { view-transition-name: nav-bar; }
::view-transition-old(nav-bar),
::view-transition-new(nav-bar) {
  animation: none;
}

/* --swipe-exit-pct is set by the swipe handler (index.html/micronutrients.html)
   right before navigating, to wherever the drag actually released -- these
   used to always start from a fixed 30% regardless of how far the drag went,
   which is what made the handoff from the JS-driven drag to this transition
   visibly clip/jump instead of reading as one continuous motion. */
@keyframes slide-out-left {
  from { transform: translateX(var(--swipe-exit-pct, 0%)); }
  to { transform: translateX(-100%); opacity: 0; }
}
@keyframes slide-in-right {
  from { transform: translateX(calc(100% + var(--swipe-exit-pct, 0%))); opacity: 0; }
  to { transform: translateX(0); }
}
@keyframes slide-out-right {
  from { transform: translateX(var(--swipe-exit-pct, 0%)); }
  to { transform: translateX(100%); opacity: 0; }
}
@keyframes slide-in-left {
  from { transform: translateX(calc(-100% + var(--swipe-exit-pct, 0%))); opacity: 0; }
  to { transform: translateX(0); }
}