/* Dinner menu — mobile-first styles.
   Design goals: very large, high-contrast text; big tap targets;
   Hindi first, English second; works on a 360px-wide phone.

   LOOK ("Ink & Tomato", chosen 2026-09-17): white paper, hairline rules, black primary
   button, tomato red used sparingly (numbers, active states, small labels), serif display
   type for dish names (Fraunces for Latin, Tiro Devanagari Hindi for Hindi), clean sans body
   (Inter + Noto Sans Devanagari).

   THEMES: colours live in CSS variables. :root is the "ink" theme; [data-theme="…"] blocks
   at the bottom override variables only. js/app.js sets <html data-theme> (DEFAULT_THEME,
   or ?theme=NAME in the URL, remembered per phone). */

:root {
  --bg: #ffffff;
  --card: #ffffff;
  --ink: #0b0b0b;
  --ink-2: #333333;          /* secondary text */
  --muted: #737373;
  --line: #e6e6e6;
  --line-strong: #0b0b0b;    /* rules under section titles */

  --header-bg: #ffffff;
  --header-fg: #0b0b0b;

  --primary: #0b0b0b;        /* main button */
  --primary-fg: #ffffff;
  --accent: #d1291c;         /* tomato: numbers, active, labels */
  --accent-soft: #fdeceb;

  --tag-fg: #0b0b0b;
  --done: #1e7b3c;
  --tabs-bg: #ffffff;

  --radius: 10px;
  --radius-lg: 14px;
  --shadow: none;
  --tabs-h: 64px;

  --font-body: "Inter", "Noto Sans Devanagari", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Kohinoor Devanagari", "Mangal", sans-serif;
  --font-display: "Fraunces", "Tiro Devanagari Hindi", "Noto Serif Devanagari", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.45;
  padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.caps { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(12px + env(safe-area-inset-top)) 18px 12px;
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--font-display); font-weight: 600; font-size: 20px; display: flex; gap: 8px; align-items: center; }
.brand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.lang-btn {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--header-fg) 30%, transparent);
  color: var(--header-fg); border-radius: 999px;
  padding: 6px 14px; font-weight: 600; font-size: 13px; letter-spacing: 0.02em;
  min-height: 36px;
}
.lang-btn:active { background: color-mix(in srgb, var(--header-fg) 8%, transparent); }

/* ---------- layout ---------- */
main { padding: 20px 18px 24px; max-width: 640px; margin: 0 auto; }

.eyebrow { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 6px; }
.eyebrow strong { color: var(--ink); }
h1 { font-family: var(--font-display); font-weight: 600; font-size: 30px; margin: 0 0 16px; line-height: 1.15; letter-spacing: -0.015em; }
h2 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  margin: 28px 0 0; padding-bottom: 10px; border-bottom: 1.5px solid var(--line-strong);
  display: flex; align-items: center; gap: 8px;
}
h2 .sub { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--muted); margin-left: auto; }
.sub { color: var(--muted); font-size: 16px; font-weight: 400; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px;
}

/* ---------- today hero ---------- */
.hero {
  text-align: center; padding: 28px 20px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  position: relative;
}
.hero .emoji {
  width: 112px; height: 112px; margin: 0 auto 14px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 60px; line-height: 1;
}
.hero .name-hi { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1.15; margin: 0; letter-spacing: -0.015em; }
.hero .name-en { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 18px; color: var(--muted); margin: 8px 0 16px; }

/* macros: four quiet stat cells separated by hairlines */
.macros {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: 4px;
}
.macros span {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px; border-left: 1px solid var(--line);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.macros span:first-child { border-left: 0; }
.macros b { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.tags { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px; padding: 4px 10px;
}
.tag.tag-v { color: var(--done); border-color: color-mix(in srgb, var(--done) 40%, transparent); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; margin-top: 20px;
  background: var(--primary); color: var(--primary-fg); border: 0; border-radius: var(--radius);
  font-size: 18px; font-weight: 600; cursor: pointer; letter-spacing: 0.01em;
}
.btn:active { opacity: 0.85; }
.btn.secondary { background: var(--card); color: var(--ink); border: 1px solid var(--ink); }
.btn.secondary:active { background: var(--accent-soft); }
.btn.small { min-height: 46px; font-size: 15px; margin-top: 10px; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { margin-top: 10px; }

/* ---------- week strip ---------- */
.week-title { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.week-title h2 { margin-top: 20px; flex: 1; }
.week-title a { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 20px 0 0 14px; padding-bottom: 10px; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 12px; }
.day {
  padding: 10px 2px 8px; text-align: center; border-radius: 8px;
  border: 1px solid transparent;
}
.day .d { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.day .e { font-size: 24px; line-height: 1.4; }
.day.today { border-color: var(--ink); }
.day.today .d { color: var(--accent); }

/* ---------- recipe page ---------- */
.back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 14px; min-height: 36px;
}
.rhead { display: flex; gap: 16px; align-items: center; }
.rhead .emoji {
  flex: none; width: 72px; height: 72px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 6%, var(--card)); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 38px; line-height: 1;
}
.rhead h1 { margin: 0; font-size: 28px; }
.rhead .sub { display: block; font-family: var(--font-display); font-style: italic; font-size: 16px; }
.meta { margin: 18px 0 4px; }
.meta .tags { justify-content: flex-start; }

.speak {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; margin-top: 16px;
  background: var(--card); border: 1px solid var(--ink); color: var(--ink);
  border-radius: var(--radius); font-size: 16px; font-weight: 600; cursor: pointer;
}
.speak.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.ing { list-style: none; margin: 0; padding: 0; }
.ing li {
  display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.ing .ic { font-size: 24px; text-align: center; opacity: 0.95; }
.ing .q { font-weight: 700; font-size: 18px; color: var(--accent); font-variant-numeric: tabular-nums; }
.ing .n { font-size: 18px; }
.ing .n .sub { display: block; font-size: 14px; }
.ing li.group {
  display: block; padding: 18px 0 4px; border-bottom: 0;
  font-weight: 600; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
}
.ing li.opt .n, .ing li.opt .q { color: var(--muted); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start;
  padding: 18px 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.steps .num {
  counter-increment: step;
  font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.steps .num::before { content: counter(step, decimal-leading-zero); }
.steps .txt { font-size: 19px; line-height: 1.5; padding-top: 3px; }
.steps .txt .sub { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; }
.steps.has-audio li { grid-template-columns: 40px 1fr 44px; }
.play-step {
  width: 40px; height: 40px; border-radius: 50%; margin-top: 2px;
  border: 1px solid var(--ink); background: var(--card); color: var(--ink);
  font-size: 13px; cursor: pointer; padding: 0; padding-left: 2px;
}
.play-step:active { background: var(--accent-soft); }
.steps li.playing { background: var(--accent-soft); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: var(--radius); }
.steps li.playing .play-step { background: var(--accent); border-color: var(--accent); color: #fff; }
.steps li.done { opacity: 0.5; }
.steps li.done .num { color: var(--done); }
.steps li.done .num::before { content: "✓"; }
.steps li.done .txt { text-decoration: line-through; }
.hint { color: var(--muted); font-size: 14px; margin: 10px 0 0; }

details { margin-top: 14px; }
details summary {
  cursor: pointer; font-weight: 600; color: var(--muted); font-size: 14px;
  padding: 10px 0; min-height: 44px; display: flex; align-items: center;
}
details ul { padding-left: 20px; margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }
details li { margin-bottom: 6px; }

/* ---------- all recipes ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 12px 16px;
  text-align: center; min-height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.tile .e { font-size: 40px; line-height: 1.1; margin-bottom: 6px; }
.tile .t { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; }
.tile .s { font-size: 12px; color: var(--muted); }
.tile .s.macro { color: var(--accent); font-weight: 600; letter-spacing: 0.04em; margin-top: 4px; }

/* ---------- plan page ---------- */
.plan-row {
  display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.plan-row:last-of-type { border-bottom: 0; }
.plan-row label { font-weight: 600; }
.plan-row label .sub { display: block; font-weight: 400; font-size: 12px; }
select, input[type="date"] {
  width: 100%; min-height: 48px; font: inherit; font-size: 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px 10px;
  background: var(--card); color: var(--ink);
}
.note { background: var(--accent-soft); border-radius: var(--radius); padding: 12px 14px; font-size: 14px; color: var(--ink-2); margin-top: 12px; }
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom));
  transform: translateX(-50%); background: var(--ink); color: var(--bg);
  padding: 10px 18px; border-radius: 999px; font-size: 15px; z-index: 30; white-space: nowrap;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.toast.show { opacity: 1; }

table.tpl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tpl th, table.tpl td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tpl th { color: var(--muted); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.scroll-x { overflow-x: auto; }

/* ---------- bottom tabs ---------- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--tabs-bg); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(var(--tabs-h) + env(safe-area-inset-bottom));
}
.tabs a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  position: relative;
}
.tabs a .ico { font-size: 22px; line-height: 1; }
.tabs a.active { color: var(--ink); }
.tabs a.active::after { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--accent); }

/* ---------- misc ---------- */
.empty { text-align: center; color: var(--muted); padding: 40px 0; }
@media (min-width: 480px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   ALTERNATIVE THEMES — override variables only (structure stays)
   ============================================================ */
[data-theme="warm"] {
  --bg: #fff8f0; --card: #ffffff; --ink: #1f1300; --ink-2: #4a3a2a; --muted: #6b5a4a; --line: #f0e2d2; --line-strong: #1f1300;
  --header-bg: #c2410c; --header-fg: #ffffff;
  --primary: #c2410c; --primary-fg: #ffffff; --accent: #c2410c; --accent-soft: #ffedd5;
}
[data-theme="slate"] {
  --bg: #f3f3f1; --card: #ffffff; --ink: #111318; --ink-2: #3a3f47; --muted: #6b7078; --line: #e4e4e0; --line-strong: #111318;
  --header-bg: #14161b; --header-fg: #ffffff;
  --primary: #14161b; --primary-fg: #ffffff; --accent: #d98b0b; --accent-soft: #fdf0d5;
}
[data-theme="forest"] {
  --bg: #f6f7f2; --card: #ffffff; --ink: #101b13; --ink-2: #33433a; --muted: #5f6d62; --line: #e1e6dc; --line-strong: #101b13;
  --header-bg: #123f2a; --header-fg: #f3f7ee;
  --primary: #123f2a; --primary-fg: #ffffff; --accent: #1f8a4c; --accent-soft: #dff2e5;
}
[data-theme="midnight"] {
  --bg: #0f1420; --card: #151b29; --ink: #f2f4f8; --ink-2: #c7cfdd; --muted: #9aa4b5; --line: #263043; --line-strong: #f2f4f8;
  --header-bg: #0f1420; --header-fg: #f2f4f8;
  --primary: #f2f4f8; --primary-fg: #0f1420; --accent: #ff8a3d; --accent-soft: #2a2417;
  --done: #4cc47f; --tabs-bg: #0f1420;
}
[data-theme="midnight"] .toast { background: #f2f4f8; color: #0f1420; }
[data-theme="midnight"] .speak.on, [data-theme="midnight"] .steps li.playing .play-step { color: #0f1420; }