/* Mobile-first stylesheet for the SBR Review UI.
 *
 * Design constraints:
 *   - 44pt minimum tap targets per Apple HIG
 *   - System fonts; no web font load
 *   - Safe-area insets for notch / home-indicator
 *   - Dark mode follows system preference
 *   - Sticky save bar at the bottom
 *   - Looks reasonable up to 720px (then maxes out)
 */

:root {
  --bg: #f5f5f7;
  --fg: #1a1a1a;
  --muted: #555;
  --accent: #0a66c2;
  --accent-fg: #ffffff;
  --border: #e2e2e2;
  --card-bg: #ffffff;
  --card-edge: #ececec;
  --section-bg: transparent;
  --readonly-bg: #fafafa;
  --warning: #b25400;
  --processed: #0a8a40;
  --bar-bg: rgba(255, 255, 255, 0.95);
  --bar-edge: #d8d8da;
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161618;
    --fg: #f0f0f0;
    --muted: #aaa;
    --accent: #4ea3ff;
    --accent-fg: #06121f;
    --border: #2c2c2e;
    --card-bg: #1f1f22;
    --card-edge: #34343a;
    --readonly-bg: #1a1a1c;
    --warning: #ffb86c;
    --processed: #66cc99;
    --bar-bg: rgba(28, 28, 30, 0.96);
    --bar-edge: #3a3a3c;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  /* Reserve space for the sticky save bar so content isn't covered. */
  padding-bottom: calc(var(--safe-bottom) + 96px);
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 16px) 16px 24px;
}

/* ---------------- Header ---------------- */

.rev-header h1 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
}

.rev-date {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.rev-jump {
  margin-top: 12px;
  font-size: 14px;
}

.rev-jump summary {
  cursor: pointer;
  color: var(--accent);
  padding: 6px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.rev-jump ul {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}

.rev-jump li a {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  color: var(--accent);
  text-decoration: none;
  border-radius: 8px;
  min-height: 44px;
}

.rev-jump li a:active {
  background: var(--border);
}

/* ---------------- Section blocks ---------------- */

.section {
  margin-top: 28px;
}

.section-heading {
  margin: 0 4px 12px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}

.section-readonly {
  background: var(--readonly-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
}

.section-readonly p { margin: 0 0 12px; }
.section-readonly p:last-child { margin: 0; }

.section-readonly pre {
  background: transparent;
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

/* GFM tables — wrap in horizontal-scroll container for narrow phone widths. */
.md-table-scroll {
  margin: 8px 0 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.md-table {
  border-collapse: collapse;
  /* `width: auto` (not 100%) lets the table grow past the container so the
   * horizontal-scroll wrapper engages on narrow viewports.  Combined with
   * per-cell `min-width`, multi-column tables overflow predictably and stay
   * readable instead of squeezing long columns to a one-char vertical strip. */
  width: auto;
  min-width: 100%;
  font-size: 14px;
  line-height: 1.4;
}

.md-table th,
.md-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
  /* Each cell holds its own minimum width so a 5-col table on a 390px phone
   * exceeds viewport width and triggers horizontal scroll. */
  min-width: 96px;
}

/* Allow a "Notes"-style trailing column to grow when there's slack. */
.md-table td:last-child,
.md-table th:last-child {
  min-width: 140px;
}

.md-table th {
  font-weight: 600;
  background: var(--readonly-bg);
  color: var(--fg);
  border-bottom-width: 2px;
}

.md-table tbody tr:last-child td {
  border-bottom: none;
}

/* Subtle alternating row tint for scannability. */
.md-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}

/* Sticky first column: keep the row-identifier visible while the user
 * horizontally scrolls a wide table. Background is opaque so the scrolling
 * cells underneath don't bleed through. A right-side shadow gives a subtle
 * affordance that there's content scrolling beneath. */
.md-table th:first-child,
.md-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  /* Opaque card-color base; the alternating-row tint applies separately to
   * tbody td:first-child(:nth-child(even)) below for visual consistency. */
  background: var(--card-bg);
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.12);
}

.md-table thead th:first-child {
  /* Header pin stays above body cells when both scroll directions interact. */
  z-index: 3;
  background: var(--readonly-bg);
}

.md-table tbody tr:nth-child(even) td:first-child {
  background: color-mix(in srgb, var(--fg) 3%, var(--card-bg));
}

.md-table code {
  font-size: 0.85em;
  white-space: nowrap;
}

.section-empty {
  color: var(--muted);
  font-style: italic;
  padding: 12px 4px;
}

.section-status {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 8px;
}

.section-status.processed {
  background: var(--processed);
  color: var(--accent-fg);
}

/* ---------------- Cards (per actionable item) ---------------- */

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.card.checked {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--card-bg));
}

.card-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.card-checkbox {
  /* Larger native checkbox; iOS Safari respects this for tap targets. */
  width: 28px;
  height: 28px;
  margin: 4px 0 0;
  accent-color: var(--accent);
  flex: 0 0 28px;
}

/* Wrap the checkbox in a tap-grow label so the entire row toggles. */
.card-checkbox-label {
  display: flex;
  align-items: flex-start;
  flex: 1 1 auto;
  cursor: pointer;
  min-height: 44px;
  gap: 12px;
}

.card-text {
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 1.45;
  word-break: break-word;
}

.card-text strong { font-weight: 600; }
.card-text em { font-style: italic; color: var(--muted); }

.project-card {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--card-edge));
}

.weekly-card {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--card-edge));
}

.project-original {
  margin-top: 4px;
}

.field-label {
  display: block;
  margin: 12px 0 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.card-input {
  margin-top: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  background: var(--bg);
  color: var(--fg);
  resize: vertical;
}

.field-label + .card-input {
  margin-top: 0;
}

.card-input.single-line {
  resize: none;
}

.card-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.card-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

.card-meta code {
  background: var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  font-size: 0.85em;
}

/* ---------------- Sticky save bar ---------------- */

.save-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px calc(var(--safe-bottom) + 12px);
  background: var(--bar-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--bar-edge);
  display: flex;
  gap: 10px;
  z-index: 50;
}

.save-bar button {
  flex: 1 1 0;
  min-height: 50px;
  border-radius: 12px;
  border: 1px solid var(--accent);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 120ms ease, transform 80ms ease;
}

.save-bar .btn-secondary {
  background: var(--card-bg);
  color: var(--accent);
}

.save-bar .btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
}

.save-bar button:active {
  transform: scale(0.98);
}

.save-bar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------------- Toast (save status feedback) ---------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 80px);
  transform: translateX(-50%) translateY(20px);
  background: var(--fg);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 60;
  max-width: 80%;
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.error {
  background: #c62828;
  color: #fff;
}

/* ---------------- Misc ---------------- */

a { color: var(--accent); }

code {
  background: var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  font-size: 0.9em;
}

.skip-meta {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
}

/* ── Skip reason quick-select chips ────────────────────────────────── */

.skip-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 6px;
}

.skip-chip {
  min-height: 34px;
  padding: 5px 12px;
  border-radius: 17px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.skip-chip:active {
  background: color-mix(in srgb, var(--accent) 12%, var(--card-bg));
  border-color: var(--accent);
}

/* ── Skip history panel ─────────────────────────────────────────────── */

.skip-history {
  margin-top: 10px;
  font-size: 13px;
}

.skip-history summary {
  cursor: pointer;
  color: var(--accent);
  padding: 6px 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.skip-history summary::-webkit-details-marker { display: none; }

.skip-history-body {
  margin-top: 6px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.skip-history-item {
  display: flex;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}

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

.skip-history-date {
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  flex: 0 0 60px;
  padding-top: 1px;
}

.skip-history-reason {
  flex: 1;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}

.skip-history-reason.no-reason {
  color: var(--muted);
  font-style: italic;
}

/* ── CTA link buttons (for "Log workout" / "Add missed meal") ────────── */

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, opacity 0.12s;
}

.cta-btn:active { opacity: 0.7; }

.cta-bar {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Muted variant for "no workout logged" notice */
.cta-notice {
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}

/* ── Day rating section ─────────────────────────────────────────────── */

.rating-card {
  background: var(--card-bg);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  padding: 16px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.rating-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 12px;
}

.rating-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.rating-btn {
  min-height: 44px;
  min-width: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  flex: 1 1 auto;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.rating-btn:active { opacity: 0.7; }

.rating-btn.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.rating-sublabel {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 14px;
  padding: 0 2px;
}

.rating-reflection-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}

.rating-reflection {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  background: var(--bg);
  color: var(--fg);
  resize: vertical;
}

.rating-reflection:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ================================================================
   Log Meal PWA — meal-logger-specific styles
   All classes prefixed `lm-` to avoid collisions with review styles.
   ================================================================ */

.lm-page {
  padding-bottom: calc(var(--safe-bottom) + 120px);
}

/* ── Header ──────────────────────────────────────────────────────── */

.lm-header {
  margin-bottom: 20px;
  position: relative;
}

.lm-title {
  margin: 0 0 2px;
  font-size: 24px;
  font-weight: 700;
}

.lm-date {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.lm-header-links {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.lm-nav-link {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 2px;
  min-height: 44px;
  display: flex;
  align-items: flex-start;
}

/* ── Progress card ───────────────────────────────────────────────── */

.lm-progress-card {
  background: var(--card-bg);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.lm-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.lm-progress-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.lm-progress-nums {
  font-size: 18px;
  font-weight: 600;
}

.lm-progress-sep {
  color: var(--muted);
  font-weight: 400;
  font-size: 14px;
}

.lm-progress-bar-wrap {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.lm-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.4s ease, background 0.3s;
}

.lm-progress-bar.near { background: #f5a623; }
.lm-progress-bar.over { background: #d0021b; }

.lm-macro-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lm-macro-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--fg);
}

.lm-macro-label {
  font-weight: 700;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Section chrome ──────────────────────────────────────────────── */

.lm-section {
  margin-bottom: 18px;
}

.lm-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 8px;
}

/* ── Meal tabs ───────────────────────────────────────────────────── */

.lm-meal-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.lm-meal-tab {
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.lm-meal-tab:active { opacity: 0.7; }

.lm-meal-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

/* ── Search ──────────────────────────────────────────────────────── */

.lm-search-wrap {
  position: relative;
}

.lm-search-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--fg);
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}

.lm-search-input:focus {
  border-color: var(--accent);
}

.lm-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.lm-sr-item {
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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

.lm-sr-item:active,
.lm-sr-item:focus {
  background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
  outline: none;
}

.lm-sr-name {
  font-size: 15px;
  font-weight: 500;
}

.lm-sr-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.lm-sr-empty {
  padding: 14px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

/* ── Pending items ───────────────────────────────────────────────── */

.lm-pitem {
  background: var(--card-bg);
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  position: relative;
}

.lm-pitem-main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.lm-pitem-name {
  font-size: 15px;
  font-weight: 500;
  flex: 1;
}

.lm-pitem-est {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.lm-pitem-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--warning);
  color: #fff;
}

.lm-pitem-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lm-pitem-amount {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  outline: none;
  -webkit-appearance: none;
}

.lm-pitem-amount:focus { border-color: var(--accent); }

.lm-pitem-meas {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  outline: none;
  -webkit-appearance: none;
}

.lm-pitem-meas:focus { border-color: var(--accent); }

.lm-pitem-hint {
  font-size: 11px;
  color: var(--muted);
  flex: 1;
}

.lm-pitem-sub {
  font-size: 13px;
  color: var(--muted);
}

.lm-pitem-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.lm-pitem-remove:active { opacity: 0.6; }

/* ── Notes ───────────────────────────────────────────────────────── */

.lm-notes-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--fg);
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}

.lm-notes-input:focus { border-color: var(--accent); }

/* ── Ad-hoc form ─────────────────────────────────────────────────── */

.lm-adhoc-toggle {
  min-height: 44px;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.lm-adhoc-toggle:active { opacity: 0.7; }

.lm-adhoc-form {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-top: 8px;
}

.lm-adhoc-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  outline: none;
  margin-bottom: 10px;
  -webkit-appearance: none;
}

.lm-adhoc-input:focus { border-color: var(--accent); }

.lm-adhoc-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.lm-adhoc-cal {
  flex: 1;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  outline: none;
  -webkit-appearance: none;
}

.lm-adhoc-cal:focus { border-color: var(--accent); }

.lm-adhoc-add-btn {
  min-height: 44px;
  padding: 0 20px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lm-adhoc-add-btn:active { opacity: 0.8; }

.lm-adhoc-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 0;
}

/* ── Log button bar ──────────────────────────────────────────────── */

.lm-log-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px calc(var(--safe-bottom) + 12px);
  background: var(--bar-bg);
  border-top: 1px solid var(--bar-edge);
  z-index: 200;
}

.lm-log-btn {
  width: 100%;
  min-height: 50px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}

.lm-log-btn:disabled { opacity: 0.55; cursor: default; }
.lm-log-btn:active:not(:disabled) { opacity: 0.8; }

/* ── Toast ───────────────────────────────────────────────────────── */

.lm-toast {
  position: fixed;
  bottom: calc(var(--safe-bottom) + 80px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--fg);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 300;
  white-space: nowrap;
  max-width: calc(100vw - 48px);
  text-overflow: ellipsis;
  overflow: hidden;
}

.lm-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.lm-toast.ok  { background: var(--processed); color: #fff; }
.lm-toast.warn{ background: var(--warning); color: #fff; }
.lm-toast.err { background: #d0021b; color: #fff; }

/* ── Today's log body ────────────────────────────────────────────── */

.lm-today-log {
  margin-top: 24px;
}

.lm-log-body {
  background: var(--readonly-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
}

.lm-log-h {
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.lm-log-h:first-child { margin-top: 0; }

.lm-log-item {
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--border);
  margin-bottom: 4px;
}

.lm-log-p {
  margin: 4px 0;
}

.lm-log-spacer { height: 8px; }

.lm-log-empty {
  color: var(--muted);
  font-style: italic;
  margin: 0;
  padding: 4px 0;
}

.lm-log-err { color: var(--warning); }

/* ================================================================
   Foods Database page — all classes prefixed `fd-`
   ================================================================ */

.fd-page {
  padding-bottom: calc(var(--safe-bottom) + 40px);
}

/* ── Header ──────────────────────────────────────────────────────── */

.fd-header {
  margin-bottom: 20px;
}

.fd-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.fd-title {
  margin: 0 0 2px;
  font-size: 24px;
  font-weight: 700;
}

.fd-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.fd-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.fd-nav-link {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  padding: 8px 2px;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.fd-add-btn {
  min-height: 36px;
  padding: 6px 16px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.fd-add-btn:active { opacity: 0.8; }

.fd-search {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--fg);
  outline: none;
  -webkit-appearance: none;
  transition: border-color 0.15s;
}

.fd-search:focus { border-color: var(--accent); }

/* ── Add Food form ───────────────────────────────────────────────── */

.fd-add-form {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}

.fd-form-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}

.fd-form-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin: 16px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.fd-form-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fd-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fd-nutri-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fd-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}

.fd-req {
  color: var(--warning);
}

.fd-hint {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

.fd-input {
  min-height: 40px;
  padding: 8px 10px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  outline: none;
  -webkit-appearance: none;
  width: 100%;
}

.fd-input:focus { border-color: var(--accent); }

select.fd-input {
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}

.fd-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.fd-save-btn {
  flex: 1;
  min-height: 44px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fd-save-btn:disabled { opacity: 0.55; cursor: default; }
.fd-save-btn:active:not(:disabled) { opacity: 0.8; }

.fd-cancel-btn {
  min-height: 44px;
  padding: 0 20px;
  background: var(--border);
  color: var(--fg);
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fd-cancel-btn:active { opacity: 0.7; }

/* ── Food list ───────────────────────────────────────────────────── */

.fd-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fd-item {
  background: var(--card-bg);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}

.fd-item:active { background: color-mix(in srgb, var(--accent) 5%, var(--card-bg)); }

.fd-item-main {
  flex: 1;
  min-width: 0;
}

.fd-item-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fd-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.fd-item-cal {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.fd-item-serving {
  font-size: 12px;
  color: var(--muted);
}

.fd-item-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--border);
  color: var(--muted);
}

.fd-item-badge.incomplete {
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
}

.fd-item-macros {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.fd-item-edit {
  min-height: 36px;
  min-width: 48px;
  padding: 6px 12px;
  background: var(--border);
  color: var(--fg);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.fd-item-edit:active { opacity: 0.7; }

.fd-empty,
.fd-loading,
.fd-error {
  color: var(--muted);
  font-style: italic;
  padding: 16px 4px;
  text-align: center;
}

.fd-error { color: var(--warning); font-style: normal; }

/* ── Edit modal ──────────────────────────────────────────────────── */

.fd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 400;
  display: flex;
  align-items: flex-end;
  padding: 0;
}

.fd-modal-overlay[hidden] { display: none !important; }

.fd-modal {
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--safe-bottom) + 16px);
}

.fd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}

.fd-modal-title {
  font-size: 17px;
  font-weight: 700;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 12px;
}

.fd-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.fd-modal-body {
  padding: 16px 20px;
}

.fd-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 0;
  gap: 10px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.fd-modal-footer-right {
  display: flex;
  gap: 10px;
}

.fd-delete-btn {
  min-height: 44px;
  padding: 0 18px;
  background: none;
  color: #d0021b;
  border: 1px solid #d0021b;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fd-delete-btn:active { opacity: 0.7; }

/* ── Confirm delete bar ──────────────────────────────────────────── */

.fd-confirm-bar {
  background: color-mix(in srgb, #d0021b 10%, var(--card-bg));
  border-top: 1px solid color-mix(in srgb, #d0021b 30%, transparent);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fd-confirm-bar[hidden] { display: none !important; }

.fd-confirm-msg {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #d0021b;
}

.fd-confirm-yes {
  min-height: 40px;
  padding: 0 18px;
  background: #d0021b;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fd-confirm-yes:disabled { opacity: 0.55; }
.fd-confirm-yes:active:not(:disabled) { opacity: 0.8; }

.fd-confirm-no {
  min-height: 40px;
  padding: 0 16px;
  background: var(--border);
  color: var(--fg);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── Toast (same pattern as log-meal, scoped to fd-) ─────────────── */

.fd-toast {
  position: fixed;
  bottom: calc(var(--safe-bottom) + 24px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--fg);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 500;
  white-space: nowrap;
  max-width: calc(100vw - 48px);
  text-overflow: ellipsis;
  overflow: hidden;
}

.fd-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.fd-toast.ok   { background: var(--processed); color: #fff; }
.fd-toast.warn { background: var(--warning); color: #fff; }
.fd-toast.err  { background: #d0021b; color: #fff; }

/* ================================================================
   Log Workout PWA — all classes prefixed `wo-`
   ================================================================ */

.wo-page {
  padding-bottom: calc(var(--safe-bottom) + 120px);
}

.wo-header {
  margin-bottom: 20px;
  position: relative;
}

.wo-title {
  margin: 0 0 2px;
  font-size: 24px;
  font-weight: 700;
}

.wo-date {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.wo-nav-link {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 2px;
  min-height: 44px;
  display: flex;
  align-items: flex-start;
}

/* ── Summary card ────────────────────────────────────────────────── */

.wo-summary-card {
  background: var(--card-bg);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.wo-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.wo-summary-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  flex-shrink: 0;
}

.wo-summary-val {
  font-size: 15px;
  font-weight: 500;
  text-align: right;
}

/* ── Section chrome ──────────────────────────────────────────────── */

.wo-section {
  margin-bottom: 18px;
}

.wo-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 8px;
}

.wo-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}

/* ── Type picker ─────────────────────────────────────────────────── */

.wo-type-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wo-type-btn {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.wo-type-btn.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
}

.wo-type-btn:active { opacity: 0.7; }

.wo-type-icon { font-size: 28px; line-height: 1; }

.wo-type-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}

/* ── Chips (body parts / intensity) ─────────────────────────────── */

.wo-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wo-chip {
  min-height: 38px;
  padding: 6px 16px;
  border-radius: 19px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.wo-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.wo-chip:active { opacity: 0.7; }

/* ── Inputs ──────────────────────────────────────────────────────── */

.wo-duration-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wo-duration-input {
  width: 96px;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 20px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--fg);
  outline: none;
  text-align: center;
  -webkit-appearance: none;
}

.wo-duration-input:focus { border-color: var(--accent); }

.wo-duration-unit {
  font-size: 15px;
  color: var(--muted);
  font-weight: 500;
}

.wo-text-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--fg);
  outline: none;
  -webkit-appearance: none;
}

.wo-text-input:focus { border-color: var(--accent); }

.wo-notes-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--fg);
  outline: none;
  -webkit-appearance: none;
}

.wo-notes-input:focus { border-color: var(--accent); }

/* ── Log button bar ──────────────────────────────────────────────── */

.wo-log-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px calc(var(--safe-bottom) + 12px);
  background: var(--bar-bg);
  border-top: 1px solid var(--bar-edge);
  z-index: 200;
}

.wo-log-btn {
  width: 100%;
  min-height: 50px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}

.wo-log-btn:disabled { opacity: 0.55; cursor: default; }
.wo-log-btn:active:not(:disabled) { opacity: 0.8; }

/* ── Toast ───────────────────────────────────────────────────────── */

.wo-toast {
  position: fixed;
  bottom: calc(var(--safe-bottom) + 80px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--fg);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 300;
  white-space: nowrap;
  max-width: calc(100vw - 48px);
  text-overflow: ellipsis;
  overflow: hidden;
}

.wo-toast.show  { opacity: 1; transform: translateX(-50%) translateY(0); }
.wo-toast.ok    { background: var(--processed); color: #fff; }
.wo-toast.warn  { background: var(--warning); color: #fff; }
.wo-toast.err   { background: #d0021b; color: #fff; }

/* ── Today's log body ────────────────────────────────────────────── */

.wo-today-log { margin-top: 24px; }

.wo-log-body {
  background: var(--readonly-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
}

.wo-log-h {
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.wo-log-h:first-child { margin-top: 0; }
.wo-log-item { padding: 2px 0 2px 12px; border-left: 2px solid var(--border); margin-bottom: 4px; }
.wo-log-p    { margin: 4px 0; }
.wo-log-spacer { height: 8px; }
.wo-log-empty  { color: var(--muted); font-style: italic; margin: 0; }

/* ── form[hidden] fix ────────────────────────────────────────────── */
.wo-form[hidden] { display: none !important; }

/* ================================================================
   Body Measurements PWA — all classes prefixed `lb-`
   ================================================================ */

.lb-page {
  padding-bottom: calc(var(--safe-bottom) + 120px);
}

.lb-header {
  margin-bottom: 20px;
  position: relative;
}

.lb-title {
  margin: 0 0 2px;
  font-size: 24px;
  font-weight: 700;
}

.lb-date { margin: 0; font-size: 13px; color: var(--muted); }

.lb-nav-link {
  position: absolute;
  top: 0; right: 0;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 2px;
  min-height: 44px;
  display: flex;
  align-items: flex-start;
}

/* ── Latest card ─────────────────────────────────────────────────── */

.lb-latest-card {
  background: var(--card-bg);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.lb-latest-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 6px;
}

.lb-latest-main {
  font-size: 16px;
  font-weight: 600;
}

.lb-latest-when {
  font-size: 13px;
  color: var(--muted);
  margin-left: 6px;
}

/* ── Form card ───────────────────────────────────────────────────── */

.lb-form-card {
  background: var(--card-bg);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}

.lb-section { margin-bottom: 18px; }
.lb-section:last-child { margin-bottom: 0; }

.lb-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 8px;
}

.lb-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}

/* Date input */
.lb-date-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--fg);
  outline: none;
  -webkit-appearance: none;
}
.lb-date-input:focus { border-color: var(--accent); }

/* 3-column fields grid */
.lb-fields-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.lb-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-bottom: 6px;
}

.lb-field-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lb-field-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--fg);
  outline: none;
  text-align: center;
  -webkit-appearance: none;
}
.lb-field-input:focus { border-color: var(--accent); }

.lb-field-unit {
  font-size: 13px;
  color: var(--muted);
  flex-shrink: 0;
}

/* ── Save bar ─────────────────────────────────────────────────────── */

.lb-save-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 12px 16px calc(var(--safe-bottom) + 12px);
  background: var(--bar-bg);
  border-top: 1px solid var(--bar-edge);
  z-index: 200;
}

.lb-save-btn {
  width: 100%;
  min-height: 50px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.lb-save-btn:disabled       { opacity: 0.55; cursor: default; }
.lb-save-btn:active:not(:disabled) { opacity: 0.8; }

/* ── Toast ───────────────────────────────────────────────────────── */

.lb-toast {
  position: fixed;
  bottom: calc(var(--safe-bottom) + 80px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--fg);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 300;
  white-space: nowrap;
  max-width: calc(100vw - 48px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.lb-toast.ok   { background: var(--processed); color: #fff; }
.lb-toast.warn { background: var(--warning); color: #fff; }
.lb-toast.err  { background: #d0021b; color: #fff; }

/* ── Trend pills ─────────────────────────────────────────────────── */

.lb-trend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}

.lb-trend-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}
.lb-trend-pill.good    { background: color-mix(in srgb, #22c55e 15%, transparent); color: #16a34a; }
.lb-trend-pill.bad     { background: color-mix(in srgb, #ef4444 15%, transparent); color: #dc2626; }
.lb-trend-pill.neutral { background: var(--card-bg); color: var(--muted); border: 1px solid var(--border); }

.lb-trend-span {
  font-size: 12px;
  color: var(--muted);
}

/* ── History section ─────────────────────────────────────────────── */

.lb-history-section { margin-top: 24px; }

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

.lb-range-select {
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--fg);
  padding: 4px 8px;
  outline: none;
}

.lb-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.lb-table thead th {
  background: var(--card-bg);
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.lb-table tbody tr {
  border-bottom: 1px solid var(--border);
}
.lb-table tbody tr:last-child { border-bottom: none; }

.lb-table tbody tr.lb-row-today { background: color-mix(in srgb, var(--accent) 6%, var(--card-bg)); }

.lb-td-date, .lb-td-num, .lb-td-edit {
  padding: 10px 12px;
  white-space: nowrap;
}
.lb-td-date { font-size: 13px; }
.lb-td-num  { font-weight: 600; }

.lb-unit {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.lb-empty-cell {
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-style: italic;
}

.lb-edit-btn {
  font-size: 12px;
  font-family: inherit;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  min-height: 36px;
  -webkit-tap-highlight-color: transparent;
}

/* secondary macro row (SF / Fib / Sug / AS) */
.lm-macro-row-secondary {
  margin-top: 4px;
  opacity: 0.8;
}

.lm-macro-row-secondary .lm-macro-label {
  font-size: 10px;
}

.lm-macro-row-secondary .lm-macro-chip {
  font-size: 12px;
}

/* entry heading row with Edit button */
.lm-log-h-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.lm-entry-edit-btn {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 2px 10px;
  min-height: 28px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lm-entry-edit-btn:active { opacity: 0.6; }
.lm-entry-edit-btn:disabled { opacity: 0.4; cursor: default; }

/* ============================================================
   Tonight's Options (/meal-options) & Prep Meals (/prep-meals)
   ============================================================ */

.mo-page, .pm-page {
  padding: 16px;
  max-width: 600px;
  margin: 0 auto;
}

/* Header */
.mo-header { margin-bottom: 20px; }
.mo-title  { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.mo-subtitle { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.mo-header-links { display: flex; gap: 12px; }
.mo-nav-link {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 4px 12px;
}

/* Filter block */
.mo-filter-block {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.mo-filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Chip rows */
.mo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mo-chip {
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.mo-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Option / prep-meal cards */
.mo-card, .pm-card {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.mo-card-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.mo-card-info  { flex: 1; }
.mo-card-name  { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.mo-card-tags  { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.mo-card-notes { font-size: 12px; color: var(--muted); margin-top: 4px; }
.mo-card-actions { flex-shrink: 0; }

.mo-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}
.mo-tag-prep  { background: rgba(90,130,255,.15); color: var(--accent); }
.mo-tag-group { background: rgba(60,180,120,.15); color: #2e9e68; }

/* Log button */
.mo-log-btn {
  display: inline-block;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mo-log-btn:active { opacity: .75; }

/* Empty state */
.mo-empty {
  text-align: center;
  color: var(--muted);
  padding: 32px 0;
  font-size: 14px;
}

/* Add item form */
.mo-add-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 12px 20px;
  width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mo-add-form {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 16px;
  margin-top: 12px;
}
.mo-form-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}
.mo-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
  margin-top: 12px;
}
.mo-field-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 15px;
  font-family: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.mo-form-actions { display: flex; gap: 10px; margin-top: 16px; }
.mo-save-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 22px;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mo-save-btn:active  { opacity: .75; }
.mo-save-btn:disabled { opacity: .45; cursor: default; }
.mo-cancel-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 22px;
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Modal overlay */
.mo-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
  padding: 0 0 env(safe-area-inset-bottom);
}
.mo-modal-overlay[hidden] { display: none; }
.mo-modal {
  background: var(--card-bg);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 600px;
  padding: 0 0 20px;
  max-height: 90vh;
  overflow-y: auto;
}
.mo-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.mo-modal-title  { font-size: 17px; font-weight: 700; }
.mo-modal-close  {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  -webkit-tap-highlight-color: transparent;
}
.mo-modal-body   { padding: 16px 20px; }
.mo-modal-footer { padding: 8px 20px 0; }

/* Portion row */
.mo-portion-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}
.mo-portion-input {
  width: 80px;
  font-size: 22px;
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  padding: 8px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

/* Recipe info in modal */
.mo-recipe-info    { margin-bottom: 10px; }
.mo-recipe-batch   { margin: 2px 0; font-size: 14px; }
.mo-nutrition-preview {
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  margin-top: 6px;
}

/* ── Prep Meals page extras ── */
.pm-card-top  { margin-bottom: 10px; }
.pm-card-name { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.pm-meta      { font-size: 12px; color: var(--muted); margin-top: 4px; }
.pm-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.pm-detail-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pm-shop-check {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.pm-detail-panel {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.pm-ing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 10px;
}
.pm-ing-table td { padding: 4px 0; }
.pm-nutrition-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 12px;
}
.pm-shop-block {
  margin-top: 28px;
  background: var(--card-bg);
  border-radius: 14px;
  padding: 16px;
}
.pm-shop-title { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.pm-shop-note  { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.pm-shop-list  { padding-left: 18px; }
.pm-shop-list li { font-size: 14px; padding: 4px 0; }

/* Edit/Delete button */
.mo-edit-btn {
  display: inline-block;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  margin-top: 6px;
  -webkit-tap-highlight-color: transparent;
}
.mo-edit-btn:active { opacity: .7; }

.mo-delete-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 22px;
  background: transparent;
  color: #e05252;
  border: 1.5px solid #e05252;
  cursor: pointer;
  margin-left: auto;
  -webkit-tap-highlight-color: transparent;
}
.mo-delete-btn:active  { opacity: .7; }
.mo-delete-btn:disabled { opacity: .4; cursor: default; }

/* Taller edit modal (recipes have lots of fields) */
.pm-edit-modal-inner {
  max-height: 92vh;
}

/* Ingredient row */
.pm-ing-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.pm-ing-row .mo-field-input {
  margin: 0;
  padding: 8px 10px;
}
.pm-ing-food-id { flex: 1; }
.pm-ing-remove {
  font-size: 16px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.pm-add-ing-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
  -webkit-tap-highlight-color: transparent;
}

/* ── Food Search Widget (food-search.js) ── */
.fs-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fs-input {
  flex: 1;
  font-size: 15px;
  font-family: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  min-width: 0;
}
.fs-input:focus { outline: none; border-color: var(--accent); }
.fs-clear {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.fs-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 300;
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.fs-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.fs-item:last-child { border-bottom: none; }
.fs-item:active, .fs-item:focus { background: rgba(90,130,255,.1); outline: none; }
.fs-item-name { font-size: 14px; font-weight: 600; }
.fs-item-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.fs-empty { padding: 12px 14px; font-size: 13px; color: var(--muted); }

/* Ingredient row food-search sizing */
.pm-ing-food-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}
.pm-ing-food-wrap .fs-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  padding: 8px 10px;
}
.pm-ing-qty { width: 70px; flex-shrink: 0; }
.pm-ing-unit { width: 60px; flex-shrink: 0; }

/* ── Foods DB: Tonight's Options section ── */
.fd-tonight-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  margin: 6px 0;
}
.fd-tonight-toggle a { color: var(--accent); }

.fd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.fd-chip {
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.fd-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Food card: actions column */
.fd-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.fd-tonight-btn {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 15px;
  padding: 4px 10px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.fd-tonight-btn.active {
  opacity: 1;
  border-color: var(--accent);
}
.fd-tonight-btn:disabled { cursor: default; }

.mo-remove-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mo-remove-btn:active { opacity: .6; }

/* ── Batch status badges ─────────────────────────────────────────────── */
.pm-batch-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  margin-top: 6px;
  letter-spacing: .02em;
}
.pm-batch-active   { background: #d4edda; color: #155724; }
.pm-batch-depleted { background: #f8d7da; color: #721c24; }
.pm-batch-none     { background: var(--surface2, #f0f0f0); color: var(--muted); }

/* ── Batch action buttons ────────────────────────────────────────────── */
.pm-start-batch-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  border: none;
  background: var(--accent, #2563eb);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pm-start-batch-btn:active { opacity: .75; }

.pm-deplete-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid #c82333;
  background: transparent;
  color: #c82333;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pm-deplete-btn:active { opacity: .7; }

/* ── Batch pill (in Tonight's Options cards) ─────────────────────────── */
.mo-batch-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  padding: 1px 7px;
  border-radius: 20px;
  background: #d4edda;
  color: #155724;
  vertical-align: middle;
  margin-left: 6px;
}
.mo-card-batch {
  border-left: 3px solid #28a745;
}

/* ── Simple Recipe pill + card (in Tonight's Options) ────────────────── */
.mo-simple-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  padding: 1px 7px;
  border-radius: 20px;
  background: #cce5ff;
  color: #004085;
  vertical-align: middle;
  margin-left: 6px;
}
.mo-card-simple {
  border-left: 3px solid #2563eb;
}

/* ── Simple Recipe card (on /simple-recipes page) ────────────────────── */
.sr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.sr-card-top { margin-bottom: 10px; }
.sr-card-name { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.sr-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sr-tonight-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sr-tonight-btn.active {
  border-color: #2563eb;
  color: #2563eb;
  background: #eff6ff;
}
.sr-tonight-btn:active { opacity: .7; }
.sr-ing-row-wrap { margin-bottom: 10px; }
.sr-ing-hint {
  font-size: 11px;
  color: var(--muted);
  padding-left: 4px;
  margin-top: 2px;
  min-height: 14px;
}