:root {
  --bg: oklch(97% 0.014 95);
  --card-bg: oklch(99% 0.006 90);
  --color-text: oklch(23% 0.03 150);
  --color-text-muted: oklch(48% 0.025 130);
  --primary: oklch(30% 0.05 155);
  --primary-deep: oklch(23% 0.045 155);
  --primary-ink: oklch(97% 0.012 90);
  --color-accent: oklch(74% 0.12 78);
  --color-accent-fg: oklch(24% 0.05 75);
  --color-border: oklch(90% 0.015 100 / 55%);
  --chip-neutral-bg: oklch(93% 0.018 100);

  --color-chip-notstarted-bg: oklch(93% 0.018 100);
  --color-chip-notstarted-fg: oklch(45% 0.02 110);
  --color-chip-progress-bg: oklch(90% 0.08 85);
  --color-chip-progress-fg: oklch(38% 0.09 80);
  --color-chip-trigger-bg: oklch(91% 0.06 25);
  --color-chip-trigger-fg: oklch(42% 0.14 25);
  --color-chip-tolerated-bg: oklch(90% 0.08 150);
  --color-chip-tolerated-fg: oklch(34% 0.1 150);

  --group-fructans: oklch(70% 0.1 80);
  --group-gos: oklch(68% 0.1 35);
  --group-lactose: oklch(68% 0.09 235);
  --group-fructose: oklch(68% 0.11 355);
  --group-sorbitol: oklch(68% 0.1 195);
  --group-mannitol: oklch(66% 0.1 300);

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* legacy aliases kept for any lingering references */
  --color-bg: var(--bg);
  --color-header-bg: var(--primary);
  --color-header-fg: var(--primary-ink);
  --color-card-bg: var(--card-bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(19% 0.02 155);
    --card-bg: oklch(24% 0.028 155);
    --color-text: oklch(92% 0.015 95);
    --color-text-muted: oklch(68% 0.02 130);
    --primary: oklch(27% 0.045 155);
    --primary-deep: oklch(18% 0.035 155);
    --primary-ink: oklch(95% 0.012 90);
    --color-accent: oklch(78% 0.13 78);
    --color-accent-fg: oklch(20% 0.05 75);
    --color-border: oklch(100% 0 0 / 8%);
    --chip-neutral-bg: oklch(30% 0.02 100);

    --color-chip-notstarted-bg: oklch(30% 0.02 100);
    --color-chip-notstarted-fg: oklch(75% 0.02 100);
    --color-chip-progress-bg: oklch(32% 0.06 85);
    --color-chip-progress-fg: oklch(80% 0.09 85);
    --color-chip-trigger-bg: oklch(30% 0.07 25);
    --color-chip-trigger-fg: oklch(78% 0.1 25);
    --color-chip-tolerated-bg: oklch(28% 0.06 150);
    --color-chip-tolerated-fg: oklch(75% 0.09 150);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--color-text);
  padding-bottom: 4.75rem;
}

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

svg { display: block; }

/* ---------- App header ---------- */

.app-header {
  display: none;
}

.app-header.is-overview {
  display: block;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-deep) 100%);
  padding: 1.6rem 1.25rem 1.4rem;
}

.header-leaf {
  position: absolute;
  top: -2.2rem;
  right: -2.6rem;
  opacity: 0.14;
  fill: none;
  stroke: var(--primary-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.header-inner { position: relative; }

.app-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--primary-ink);
}

.app-subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: oklch(97% 0.01 90 / 78%);
}

.header-progress { margin-top: 1.1rem; }

.header-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.66rem;
  color: oklch(97% 0.01 90 / 85%);
  margin-bottom: 0.4rem;
}
.header-progress-labels span:first-child { font-weight: 600; }

.header-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: oklch(97% 0.01 90 / 16%);
  overflow: hidden;
  display: flex;
}
.header-progress-fill.tolerated { background: var(--color-chip-tolerated-bg); height: 100%; }
.header-progress-fill.trigger { background: var(--color-chip-trigger-bg); height: 100%; }

/* ---------- Layout ---------- */

#app { max-width: 480px; margin: 0 auto; padding: 0 0.75rem 2.5rem; }

.group-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: none;
  display: inline-block;
}
.group-dot.group-fructans { background: var(--group-fructans); }
.group-dot.group-gos { background: var(--group-gos); }
.group-dot.group-lactose { background: var(--group-lactose); }
.group-dot.group-fructose { background: var(--group-fructose); }
.group-dot.group-sorbitol { background: var(--group-sorbitol); }
.group-dot.group-mannitol { background: var(--group-mannitol); }

.group-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 700;
  padding: 1.1rem 0.25rem 0.5rem;
}

.screen-intro {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0.35rem 0 1rem;
}

h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.55rem;
  margin: 1.1rem 0 0;
}

/* ---------- Challenge cards ---------- */

.challenge-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--card-bg);
  border-radius: 16px;
  padding: 0.85rem 0.9rem;
  margin-bottom: 0.55rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 30, 20, 0.05), 0 1px 0 rgba(20, 30, 20, 0.02);
}
.challenge-name { font-size: 0.92rem; font-weight: 700; }
.challenge-sub { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 0.15rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
}
.chip svg { flex: none; }
.chip.status-not-started { background: var(--color-chip-notstarted-bg); color: var(--color-chip-notstarted-fg); }
.chip.status-in-progress,
.chip.status-retry-in-progress { background: var(--color-chip-progress-bg); color: var(--color-chip-progress-fg); }
.chip.status-trigger,
.chip.status-retried-still-reacts { background: var(--color-chip-trigger-bg); color: var(--color-chip-trigger-fg); }
.chip.status-tolerated,
.chip.status-retried-tolerated { background: var(--color-chip-tolerated-bg); color: var(--color-chip-tolerated-fg); }

/* ---------- Challenge detail ---------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 1rem 0 0;
}

.detail-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 0.85rem;
}
.detail-title-row h2 { margin: 0; }

.day-stepper {
  display: flex;
  align-items: center;
  margin: 1.4rem 0 0.4rem;
}
.step-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.step-line { flex: 1; height: 2px; background: var(--color-border); margin: 0 4px 20px; }
.step-circle {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
}
.step-done { background: var(--color-chip-tolerated-bg); color: var(--color-chip-tolerated-fg); }
.step-reacted { background: var(--color-chip-trigger-bg); color: var(--color-chip-trigger-fg); }
.step-current {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  box-shadow: 0 0 0 4px oklch(74% 0.12 78 / 25%);
}
.step-locked { background: var(--chip-neutral-bg); color: var(--color-text-muted); }
.step-line.step-line-done { background: var(--color-chip-tolerated-bg); }
.step-label { font-size: 0.62rem; font-weight: 700; color: var(--color-text-muted); text-align: center; }

.food-option-picker { display: flex; gap: 0.5rem; margin: 1rem 0; flex-wrap: wrap; }
.food-option-btn {
  flex: 1 1 auto;
  min-width: 5rem;
  text-align: center;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.65rem 0.4rem;
  border-radius: 10px;
  background: var(--chip-neutral-bg);
  color: var(--color-chip-notstarted-fg);
  border: none;
  cursor: pointer;
}

.day-card {
  border-radius: 18px;
  margin-bottom: 0.7rem;
  padding: 0.95rem 1rem;
  background: var(--card-bg);
  box-shadow: 0 1px 2px rgba(20, 30, 20, 0.05), 0 1px 0 rgba(20, 30, 20, 0.02);
}
.day-card.locked { opacity: 0.55; box-shadow: none; }
.day-card.active {
  box-shadow: 0 2px 10px rgba(30, 40, 30, 0.07), 0 0 0 1.5px oklch(74% 0.12 78 / 40%);
}
.day-card-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
.day-title { font-size: 0.88rem; font-weight: 700; }
.day-qty { font-size: 0.75rem; color: var(--color-text-muted); }

.locked-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.severity-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.severity-picker { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.severity-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  font-family: inherit;
  font-size: 0.63rem;
  font-weight: 700;
  padding: 0.55rem 0.2rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: var(--chip-neutral-bg);
  color: var(--color-chip-notstarted-fg);
}
.severity-btn.selected.severity-none { background: var(--color-chip-tolerated-bg); color: var(--color-chip-tolerated-fg); }
.severity-btn.selected.severity-mild,
.severity-btn.selected.severity-moderate,
.severity-btn.selected.severity-severe { background: var(--color-chip-trigger-bg); color: var(--color-chip-trigger-fg); }

.notes-input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: oklch(97% 0.01 95);
  color: inherit;
  font-size: 0.8rem;
  padding: 0.55rem 0.65rem;
  font-family: inherit;
  margin-bottom: 0.4rem;
}
@media (prefers-color-scheme: dark) {
  .notes-input { background: oklch(28% 0.02 155); }
}

.retry-btn, .action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
  background: var(--color-accent);
  color: var(--color-accent-fg);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.75rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}

.retry-form {
  border-radius: 18px;
  background: var(--primary);
  padding: 1.15rem 1.1rem 1.25rem;
  margin-top: 0.5rem;
}
.retry-form-intro h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--primary-ink);
  margin: 0 0 0.2rem;
}
.retry-form-intro p {
  font-size: 0.72rem;
  line-height: 1.5;
  color: oklch(97% 0.01 90 / 75%);
  margin: 0 0 0.9rem;
}
.retry-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: oklch(97% 0.01 90 / 70%);
  margin-bottom: 0.35rem;
}
.retry-form .notes-input {
  background: oklch(97% 0.01 90 / 12%);
  border: none;
  color: var(--primary-ink);
  margin-bottom: 0.85rem;
}
.retry-day-inputs { display: flex; gap: 8px; }
.retry-day-inputs .notes-input { flex: 1; min-width: 0; text-align: center; }
.retry-form .retry-btn { margin-top: 0.3rem; }

.stopped-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--color-chip-trigger-bg);
  color: var(--color-chip-trigger-fg);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-top: 0.4rem;
}

/* ---------- Bottom nav ---------- */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.6rem 0.5rem 0.85rem;
  background: color-mix(in oklch, var(--card-bg) 96%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--color-border);
}
.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0.4rem 1rem;
  border-radius: 14px;
  text-decoration: none;
  color: var(--color-text-muted);
}
.bottom-nav a svg { stroke: currentColor; }
.nav-label { font-size: 0.66rem; font-weight: 600; }
.bottom-nav a.active { background: var(--color-chip-progress-bg); color: var(--color-chip-progress-fg); }
.bottom-nav a.active .nav-label { font-weight: 700; }

/* ---------- Food reference ---------- */

.reference-group {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 1.1rem 1.1rem 1.2rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 1px 2px rgba(20, 30, 20, 0.05), 0 1px 0 rgba(20, 30, 20, 0.02);
}
.reference-group h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 0.1rem;
}
.reference-sub {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin: 0.85rem 0 0.5rem;
}
.reference-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.reference-chip {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: var(--chip-neutral-bg);
  color: var(--color-text);
}
.reference-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 0.9rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: var(--color-chip-progress-bg);
}
.reference-note svg { flex: none; margin-top: 1px; stroke: var(--color-chip-progress-fg); }
.reference-note p { font-size: 0.7rem; line-height: 1.5; color: var(--color-chip-progress-fg); margin: 0; }

/* ---------- Tips ---------- */

.tip-card {
  display: flex;
  gap: 14px;
  background: var(--card-bg);
  border-radius: 16px;
  padding: 0.95rem 1.05rem;
  margin-bottom: 0.6rem;
  box-shadow: 0 1px 2px rgba(20, 30, 20, 0.05), 0 1px 0 rgba(20, 30, 20, 0.02);
}
.tip-index {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--color-chip-tolerated-bg);
  color: var(--color-chip-tolerated-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
}
.tip-card h3 { font-size: 0.85rem; margin: 0 0 0.3rem; }
.tip-card p { font-size: 0.76rem; line-height: 1.5; color: var(--color-text-muted); margin: 0; }

/* ---------- Export ---------- */

.export-output {
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.7;
  background: oklch(20% 0.02 155);
  color: oklch(88% 0.01 95);
  border-radius: 16px;
  padding: 1rem 1.05rem;
  margin-top: 1rem;
  box-shadow: 0 4px 18px rgba(15, 25, 15, 0.18);
}

/* ---------- Install hint ---------- */

.install-hint {
  background: var(--color-chip-progress-bg);
  color: var(--color-chip-progress-fg);
  border-radius: 12px;
  padding: 0.65rem 0.85rem;
  font-size: 0.76rem;
  margin: 0.85rem 0;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
}
.install-hint button { border: none; background: transparent; color: inherit; font-weight: 700; cursor: pointer; font-size: 0.85rem; }