/* Talíř — enamel plate & canteen menu. Cobalt rim on white enamel; macro colours from food:
   paprika (protein), grain (carbs), olive (fat). */
:root {
  color-scheme: light dark;
  --paper: #eef2f8; --enamel: #ffffff; --ink: #14203b; --muted: #56627c; --line: #d5dcea;
  --cobalt: #1d3f94; --cobalt-hover: #2a53bd; --cobalt-soft: #e4eaf8; --on-cobalt: #ffffff;
  --p: #c4302b; --c: #b98300; --f: #3a7f55;
  --warn-bg: #fff2d4; --warn: #6e4600;
  --gA-bg: #dff0e5; --gA: #1f6b3f; --gB-bg: #e4eaf8; --gB: #1d3f94; --gD-bg: #fde4dc; --gD: #9a2c12;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --rail: 300px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e1628; --enamel: #16203a; --ink: #e9edf6; --muted: #9ba7c2; --line: #2a3656;
    --cobalt: #8fb0ff; --cobalt-hover: #b3c9ff; --cobalt-soft: #1e2b4f; --on-cobalt: #0e1628;
    --p: #ff7d72; --c: #f0c14b; --f: #72cf96;
    --warn-bg: #3a2c12; --warn: #ffd58a;
    --gA-bg: #173524; --gA: #8fe0ad; --gB-bg: #1e2b4f; --gB: #b3c9ff; --gD-bg: #43201a; --gD: #ffb4a0;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.55 var(--body);
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, legend, .brand { font-family: var(--display); text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 12px; }
h2 { font-size: 1.35rem; font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
h3 { font-size: 1.15rem; font-weight: 700; margin: 0; }
p { margin: 0 0 12px; }
small, .hint, .note { color: var(--muted); }
.hint { font-size: .9rem; margin: 0 0 10px; }
.note { font-size: .9rem; max-width: 68ch; }
.lede { color: var(--muted); max-width: 64ch; margin-bottom: 24px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; border-radius: 6px; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--cobalt); color: var(--on-cobalt); padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* ---------- Shell ---------- */
.app { min-height: 100vh; }
main { padding: 24px 16px 48px; width: 100%; min-width: 0; }
/* Every step uses the full width of the window (no max-width). */

main:focus { outline: none; }
.rail { background: var(--enamel); border-bottom: 1px solid var(--line); padding: 12px 16px 0; }
.rail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; }
.brand svg { width: 28px; height: 28px; fill: var(--enamel); stroke: var(--cobalt); stroke-width: 5; }
.tagline { color: var(--muted); font-size: .95rem; margin: 8px 0 4px; max-width: 52ch; }
body:not([data-step="1"]) .tagline { display: none; }

.lang { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; padding: 2px; }
.lang button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: .85rem; min-height: 36px; }
.lang button[aria-pressed="true"] { background: var(--cobalt); color: var(--on-cobalt); }

/* Steps: a real sequence, so numbered. Phone: compact row, only the current label shows. */
.steps { list-style: none; margin: 0; padding: 10px 0; display: flex; gap: 6px; }
.steps li { flex: 0 0 auto; }
.steps button { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 8px 4px 4px; border-radius: 999px; min-height: 44px; color: var(--muted); }
.steps .num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); font-weight: 700; font-variant-numeric: tabular-nums; background: var(--enamel); }
.steps .done .num { border-color: var(--cobalt); color: var(--cobalt); }
.steps [aria-current] { color: var(--ink); font-weight: 700; }
.steps [aria-current] .num { background: var(--cobalt); border-color: var(--cobalt); color: var(--on-cobalt); }
.steps button:disabled { cursor: default; opacity: .55; }
.steps button:not(:disabled):not([aria-current]):hover .num { border-color: var(--cobalt); }
.steps button:not([aria-current]) .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.summary { display: none; }


@media (min-width: 960px) {
  .app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }
  .rail { position: sticky; top: 0; height: 100vh; overflow-y: auto; border-bottom: 0; border-right: 1px solid var(--line); padding: 32px 28px; display: flex; flex-direction: column; gap: 20px; }
  .rail .tagline, body:not([data-step="1"]) .tagline { display: block; margin: 0; }
  main { padding: 48px 56px 64px; }
  .steps { flex-direction: column; gap: 2px; padding: 0; }
  .steps button { width: 100%; padding: 6px 10px 6px 6px; border-radius: 12px; }
  .steps button:not(:disabled):hover { background: var(--cobalt-soft); }
  .steps button:not([aria-current]) .label { position: static; width: auto; height: auto; clip-path: none; }
  body[data-step="5"] .summary { display: none !important; }
  .summary:not([hidden]) { display: grid; justify-items: start; gap: 10px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
  .summary-title { margin: 0; font-weight: 700; }
  .summary-diet { margin: 0; color: var(--muted); }
}

/* ---------- Form ---------- */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-size: 1.15rem; font-weight: 700; padding: 0; margin-bottom: 6px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 24px; font-weight: 600; min-width: 0; }
.field small { font-weight: 400; }
.field .hint { font-weight: 400; margin: 0; }
.narrow { max-width: 240px; }
input[type=number], select {
  width: 100%; min-height: 48px; padding: 10px 12px; font-size: 1rem;
  background: var(--enamel); color: var(--ink); border: 1.5px solid var(--line); border-radius: 10px;
}
input[type=number]:hover, select:hover { border-color: var(--muted); }
input::placeholder { color: var(--muted); opacity: .7; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.row3.optional { align-items: start; }
@media (max-width: 639px) { .row3.optional { grid-template-columns: 1fr; } .row3.optional input { max-width: 240px; } } /* long labels + hints need the full width on phones */

.segmented { align-self: flex-start; display: inline-flex; background: var(--enamel); border: 1.5px solid var(--line); border-radius: 12px; padding: 3px; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: block; padding: 10px 22px; border-radius: 9px; font-weight: 600; min-width: 96px; text-align: center; }
.segmented input:checked + span { background: var(--cobalt); color: var(--on-cobalt); }
.segmented input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 2px; }

.choices { display: grid; gap: 8px; }
.choices label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--enamel); border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 400; }
.choices label:hover { border-color: var(--muted); }
.choices label:has(:checked) { border-color: var(--cobalt); background: var(--cobalt-soft); }
.choices input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cobalt); flex: none; }
.choices b { display: block; font-weight: 700; }
.choices small { display: block; font-size: .9rem; }
@media (min-width: 640px) { .choices { grid-template-columns: 1fr 1fr; } }

.session { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px; gap: 10px; align-items: end; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.session .field { margin: 0; font-weight: 400; font-size: .9rem; }
.session .field:first-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .session { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 48px; } .session .field:first-child { grid-column: auto; } }
.remove { width: 48px; height: 48px; border: 1.5px solid var(--line); background: var(--enamel); border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
.remove:hover { color: var(--p); border-color: var(--p); }
.remove svg, .swap svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.add { align-self: flex-start; border: 0; background: none; color: var(--cobalt); font-weight: 700; padding: 10px 0; min-height: 44px; }
.add:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Buttons & action bar ---------- */
.primary {
  background: var(--cobalt); color: var(--on-cobalt); border: 0; border-radius: 12px;
  min-height: 52px; padding: 0 26px; font-family: var(--display); font-weight: 700; font-size: 1.08rem;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18);
}
.primary:hover { background: var(--cobalt-hover); }
.ghost { background: none; border: 1.5px solid var(--line); border-radius: 10px; min-height: 44px; padding: 0 16px; font-weight: 600; }
.ghost:hover { border-color: var(--cobalt); color: var(--cobalt); }
.actions { display: flex; align-items: center; justify-content: flex-start; gap: 16px; margin-top: 28px; }
.count { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 959px) {
  .actions {
    position: sticky; bottom: 0; z-index: 5; margin: 28px -16px 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
  }
  .actions .primary { flex: 1; }
}

.warn { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 12px 16px; margin: 12px 0; max-width: 68ch; }

/* ---------- Plate ---------- */
.plate { position: relative; margin: 0; width: var(--size); height: var(--size); flex: none; }
.plate.lg { --size: 220px; } .plate.md { --size: 150px; } .plate.sm { --size: 128px; }
.plate svg { width: 100%; height: 100%; display: block; }
.plate .rim { fill: var(--enamel); stroke: var(--cobalt); stroke-width: 4; }
.plate .well { fill: none; stroke: var(--line); stroke-width: 1; }
.plate .arc { fill: none; stroke-width: 9; }
.plate .arc.p { stroke: var(--p); } .plate .arc.c { stroke: var(--c); } .plate .arc.f { stroke: var(--f); }
.plate figcaption { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.plate figcaption b { font-family: var(--display); font-weight: 800; font-size: calc(var(--size) * .17); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.plate figcaption span { color: var(--muted); font-size: calc(var(--size) * .075); margin-top: 4px; }
.plate g { transform: rotate(-90deg); transform-origin: 50px 50px; } /* start arcs at 12 o’clock */
.plate.lg g { animation: plate-in .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes plate-in { from { opacity: 0; transform: rotate(-190deg); } }
@media (prefers-reduced-motion: reduce) { .plate.lg g { animation: none; } }

/* ---------- Step 2 ---------- */
.energy { display: grid; justify-items: center; gap: 24px; margin: 20px 0 28px; }
.facts { margin: 0; width: 100%; display: grid; gap: 0; }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; text-align: right; }
.facts dd b { display: block; font-family: var(--display); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.facts dd small { font-size: .85rem; }
.facts .lead dd b { font-size: 1.8rem; color: var(--cobalt); }
.facts .bmi dt, .facts .bmi dd b { color: var(--muted); } /* BMI is the weakest measure, so it is shown quieter */
.facts .bmi dd b { font-size: 1.05rem; }
@media (min-width: 640px) { .energy { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 40px; } }
.split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; }
.split i, .legend i { background: var(--cobalt); }
.split .neat, .legend .neat { background: color-mix(in srgb, var(--cobalt) 55%, var(--paper)); }
.split .ex, .legend .ex { background: color-mix(in srgb, var(--cobalt) 25%, var(--paper)); }
.plate-wrap { display: grid; justify-items: center; gap: 12px; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 10px 0 20px; color: var(--muted); font-size: .92rem; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.legend b { color: var(--ink); font-variant-numeric: tabular-nums; }
.how { margin-top: 8px; max-width: 68ch; }
.how summary { cursor: pointer; font-weight: 700; color: var(--cobalt); min-height: 44px; display: flex; align-items: center; }
.how p { color: var(--muted); }
.how b { color: var(--ink); }

/* ---------- Chips (macros) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: .8rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1.5px solid currentColor; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip.p { color: var(--p); } .chip.c { color: var(--c); } .chip.f { color: var(--f); }

/* ---------- Step 3 ---------- */
.diets { display: grid; gap: 12px; margin-bottom: 20px; }
@media (min-width: 720px) { .diets { grid-template-columns: 1fr 1fr; } }
.diet {
  display: flex; flex-direction: column; gap: 12px; padding: 18px;
  background: var(--enamel); border: 1.5px solid var(--line); border-radius: 14px; color: var(--ink);
}
.diet.chosen { border: 2px solid var(--cobalt); padding: 17.5px; background: var(--cobalt-soft); }
.diet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.diet-name { font-family: var(--display); font-size: 1.2rem; font-weight: 700; line-height: 1.2; margin: 0; }
.diet-sum { font-size: .95rem; margin: 0; }
.procon { display: grid; gap: 12px; font-size: .9rem; }
.procon h3 { font-size: .95rem; margin: 0 0 4px; }
.procon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.procon li { display: grid; grid-template-columns: 1.2em minmax(0, 1fr); color: var(--muted); }
.pros li::before { content: "+"; font-weight: 800; color: var(--gA); }
.cons li::before { content: "−"; font-weight: 800; color: var(--gD); }
.pick { margin-top: auto; min-height: 48px; border-radius: 10px; border: 1.5px solid var(--cobalt); background: none; color: var(--cobalt); font-family: var(--display); font-weight: 700; font-size: 1rem; }
.pick:hover { background: var(--cobalt-soft); }
.pick[aria-pressed="true"] { background: var(--cobalt); color: var(--on-cobalt); }
.grade { font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.gA { background: var(--gA-bg); color: var(--gA); } .gB { background: var(--gB-bg); color: var(--gB); }
.gC, .gD { background: var(--gD-bg); color: var(--gD); }

/* ---------- Allergy & dislike filter (step 4) ---------- */
.filters { margin: 0 0 28px; padding: 18px 20px; background: var(--enamel); border: 1.5px solid var(--line); border-radius: 14px; }
.filters h2 { font-size: 1.15rem; margin-bottom: 10px; }
.filters legend { font-size: .95rem; margin-bottom: 8px; }
.filters details { margin-top: 14px; }
.filters summary { cursor: pointer; font-weight: 700; color: var(--cobalt); min-height: 44px; display: flex; align-items: center; }
.filters .hint { margin: 12px 0 0; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; display: inline-flex; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); font-size: .92rem; }
.pill:hover span { border-color: var(--muted); }
.pill input:checked + span { background: var(--gD-bg); border-color: var(--gD); color: var(--gD); font-weight: 700; text-decoration: line-through; }
.pill input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 2px; }

/* ---------- Step 4 ---------- */
.meal-group { margin-bottom: 28px; }
.meal-group legend { font-size: 1.3rem; margin-bottom: 10px; }
.meals { display: grid; gap: 8px; }
@media (min-width: 720px) { .meals { grid-template-columns: 1fr 1fr; } }
.meal { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--enamel); border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; }
.meal:hover { border-color: var(--muted); }
.meal:has(:checked) { border-color: var(--cobalt); background: var(--cobalt-soft); }
.meal input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--cobalt); flex: none; }
.meal-body { display: grid; gap: 4px; min-width: 0; }
.meal-body b { font-weight: 700; line-height: 1.3; }
.meal-meta, .cz { color: var(--muted); font-size: .88rem; }
.cz { display: block; font-weight: 400; }
.src { color: var(--cobalt); font-size: .88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.src:hover { color: var(--cobalt-hover); }
.tag-dessert { display: inline-block; font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--gD-bg); color: var(--gD); vertical-align: 1px; }
.pm .src { display: inline-block; margin-top: 4px; padding: 6px 0; }

/* ---------- Step 5 ---------- */
.plan-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 24px; align-items: center; margin-bottom: 24px; }
.plan-head h1 { margin-bottom: 2px; }
.plan-head h2 { color: var(--muted); font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.plan-head p { margin: 0 0 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-head .print { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 639px) { .plan-head .plate { --size: 112px; } .plan-head .print { display: none; } }
@media (min-width: 640px) { .plan-head { grid-template-columns: auto minmax(0, 1fr) auto; } .plan-head .print { grid-column: auto; align-self: start; } }

.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line); margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.tabs [role=tab] { flex: 1 0 auto; min-width: 44px; min-height: 48px; padding: 0 10px; border: 0; background: none; border-bottom: 3px solid transparent; margin-bottom: -2px; font-weight: 700; color: var(--muted); }
.tabs [role=tab]:hover { color: var(--ink); }
.tabs [aria-selected="true"] { color: var(--cobalt); border-bottom-color: var(--cobalt); }
.tabs .long { display: none; }
@media (min-width: 720px) { .tabs .long { display: inline; } .tabs .short { display: none; } }

.day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 16px 0 4px; }
.day-kcal { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.day-head .chips { flex-basis: 100%; }

/* Canteen menu: name ..... kcal */
.menu { list-style: none; margin: 0; padding: 0; }
.pm { padding: 16px 0; border-bottom: 1px solid var(--line); }
.pm-line { display: grid; grid-template-columns: minmax(0, max-content) minmax(12px, 1fr) auto auto auto; align-items: center; gap: 0 8px; }
.ate { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--enamel); font-size: .85rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.ate input { width: 18px; height: 18px; margin: 0; accent-color: var(--f); }
.ate:has(:checked) { border-color: var(--f); color: var(--f); background: color-mix(in srgb, var(--f) 10%, var(--enamel)); }
.day-eaten { font-weight: 700; color: var(--f); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .ate span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* phones: checkbox only, label stays for screen readers */
.pm-slot { grid-column: 1 / -1; color: var(--muted); font-size: .88rem; margin-bottom: 2px; }
.pm-name { font-family: var(--display); font-size: 1.12rem; font-weight: 700; line-height: 1.25; min-width: 0; }
.leader { border-bottom: 2px dotted var(--line); align-self: end; margin-bottom: 7px; }
.pm-kcal { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.swap { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 10px; background: var(--enamel); color: var(--cobalt); }
.swap:hover { border-color: var(--cobalt); }
.ingredients { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 3px; font-size: .95rem; }
.ingredients li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; }
.ingredients .cz { display: inline; margin-left: 4px; }
.amt { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.method { margin-top: 10px; }
.method summary { cursor: pointer; font-weight: 700; color: var(--cobalt); min-height: 44px; display: flex; align-items: center; width: fit-content; }
.steps-list { margin: 4px 0 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: .95rem; max-width: 68ch; }
.steps-list li::marker { color: var(--cobalt); font-weight: 700; }

/* ---------- Weight log (adaptive target) ---------- */
.weightlog { margin-top: 32px; padding: 20px; background: var(--enamel); border: 1.5px solid var(--line); border-radius: 14px; }
.weightlog h2 { margin-bottom: 4px; }
.log-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: end; margin-top: 12px; }
.log-form .field { margin: 0; font-size: .9rem; }
.log-form input[type=date] { width: 100%; min-height: 48px; padding: 10px 12px; font-size: 1rem; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); border-radius: 10px; }
.log-form .ghost { min-height: 48px; border-color: var(--cobalt); color: var(--cobalt); }
@media (min-width: 720px) { .log-form { grid-template-columns: 1.2fr 1fr 1fr auto; } }
.adaptive { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--cobalt-soft); max-width: 80ch; }
.weight-chart { display: block; width: 100%; max-width: 900px; height: auto; margin-top: 14px; } /* keeps the aspect ratio so dots stay round */
.weight-chart circle { fill: var(--cobalt); }
.weight-chart line { stroke: var(--p); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.log-list { list-style: none; margin: 12px 0 0; padding: 0; }
.log-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 44px; gap: 12px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.log-list small { color: var(--muted); }
.log-list .remove { width: 40px; height: 40px; }

.shop, .next { margin-top: 40px; }
.shop table { width: 100%; border-collapse: collapse; }
.shop td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.shop td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.tick { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.tick input { width: 22px; height: 22px; accent-color: var(--cobalt); flex: none; margin: 0; }
.tick .cz { display: inline; margin-left: 4px; }
tr.got .tick span { text-decoration: line-through; color: var(--muted); }
.next p { max-width: 68ch; }

footer { color: var(--muted); font-size: .85rem; margin-top: 64px; padding-top: 16px; border-top: 1px solid var(--line); } /* full-width fine print under every step */

/* ---------- Wide screens: use the width instead of one narrow column ---------- */
@media (min-width: 1200px) {
  main { padding: 48px 64px 64px; }
  .form-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; align-items: start; }
  .form-cols .choices { grid-template-columns: 1fr; } /* one option per row keeps both columns about the same height */
  #profile .note, #profile .actions { max-width: none; }
  #s2:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); column-gap: 64px; align-content: start; }
  #s2 > * { grid-column: 1; }
  #s2 > .how { grid-column: 2; grid-row: 1 / span 8; margin: 0; padding: 20px 24px; background: var(--enamel); border: 1.5px solid var(--line); border-radius: 14px; align-self: start; }
  #s2 > .how summary { min-height: 0; margin-bottom: 8px; }
  .plate.lg { --size: 260px; }
  .diets { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .meals { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  #s5:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 64px; align-items: start; }
  .plan-side { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 24px; background: var(--enamel); border: 1.5px solid var(--line); border-radius: 14px; overscroll-behavior: contain; }
  .plan-side .shop { margin-top: 0; }
  .plan-side .next { margin-top: 28px; }
}

@media print {
  .rail, .tabs, button, .actions, #s1, #s2, #s3, #s4, footer, #nudge, .fast, .tick input { display: none !important; }
  body { background: #fff; color: #000; }
  .app { display: block; }
  main { padding: 0; max-width: none; }
  .day[hidden] { display: block !important; }
  #s5:not([hidden]) { display: block; }
  .plan-side { position: static; max-height: none; overflow: visible; border: 0; padding: 0; }
  .day { break-inside: avoid; }
}

/* Weigh-in reminder (calendar file), nudge banner and install button */
.reminder { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin-top: 16px; padding-top: 16px; border-top: 1.5px dashed var(--line); }
.reminder .field { margin: 0; font-size: .9rem; }
.reminder input[type=time] { min-height: 48px; padding: 10px 12px; font-size: 1rem; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); border-radius: 10px; }
.reminder .ics-link { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; color: var(--cobalt); border-color: var(--cobalt); }
.reminder .hint { flex-basis: 100%; margin: 0; color: var(--muted); font-size: .85rem; }
.nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 20px; padding: 12px 12px 12px 18px; background: var(--enamel); border: 1.5px solid var(--cobalt); border-radius: 14px; font-weight: 600; }
.nudge[hidden] { display: none; }
.nudge span { flex: 1 1 14em; }
.nudge .primary { min-height: 44px; }
.install { width: 100%; margin-top: 12px; }
.install[hidden] { display: none; }
.install-hint { margin: 12px 0 0; color: var(--muted); font-size: .9rem; }
.install-hint[hidden] { display: none; }
/* The app is for phones: computers with a mouse never see the install button or hint */
@media (hover: hover) and (pointer: fine) { .install, .install-hint { display: none; } }

/* Diet quality per day: fibre, sugars, salt, saturated fat. Warnings reuse the amber warn colours. */
.nutri { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; padding: 0; font-size: .85rem; }
.nutri li { display: flex; align-items: baseline; gap: 5px; padding: 4px 10px; border: 1.5px solid var(--line); border-radius: 999px; font-variant-numeric: tabular-nums; }
.nutri li small { color: var(--muted); }
.nutri li.warn { margin: 0; max-width: none; padding: 4px 10px; border-color: transparent; }
.nutri li.warn small { color: inherit; font-weight: 600; }

/* Intermittent fasting controls in the plan header; meal times in the menu */
.fast { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin-top: 12px; }
.fast .field { margin: 0; font-size: .9rem; }
.fast select, .fast input[type=time] { min-height: 44px; padding: 8px 12px; font-size: 1rem; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); border-radius: 10px; }
.fast-status { flex-basis: 100%; margin: 0; font-weight: 600; color: var(--warn); }
.fast-status.open { color: var(--f); }
.fast .hint { flex-basis: 100%; margin: 0; color: var(--muted); font-size: .85rem; max-width: 80ch; }
.pm-time { font-variant-numeric: tabular-nums; font-weight: 700; margin-right: 6px; color: var(--ink); }

/* Weekly check-in card on the energy step */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.checkin { margin: 0 0 24px; padding: 18px 20px; background: var(--enamel); border: 2px solid var(--cobalt); border-radius: 14px; }
.checkin h2 { margin: 0 0 8px; }
.checkin ul { margin: 0 0 10px; padding-left: 1.2em; color: var(--muted); }
.ci-target { font-size: 1.15rem; margin: 0 0 14px; font-variant-numeric: tabular-nums; }
.ci-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Your data: backup / restore / report, above the fine print */
.data-tools { margin-bottom: 20px; color: var(--ink); font-size: 1rem; }
.data-tools h2 { font-size: 1.1rem; margin: 0 0 4px; }
.data-tools .hint { color: var(--muted); font-size: .9rem; margin: 0 0 12px; max-width: 80ch; }
.data-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.data-actions .ghost { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); cursor: pointer; }
.data-actions .file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.data-actions .file:focus-within { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.warn-text { color: var(--warn); font-weight: 600; margin: 8px 0 0; }
.warn-text:empty { display: none; }

/* Printed report: the energy step (without forms) followed by the plan */
@media print {
  body.report #s2 { display: block !important; }
  body.report #s5 { display: block !important; break-before: page; }
  body.report #s2 :is(.log-form, .reminder, .checkin, .how, .log-list .remove) { display: none !important; }
}

/* Premium label: gold outline so it reads as "extra", not as a warning */
.tag-premium { display: inline-flex; align-items: center; padding: 1px 8px; border: 1.5px solid var(--c); border-radius: 999px; color: var(--warn); font-size: .72rem; font-weight: 700; letter-spacing: .02em; vertical-align: middle; white-space: nowrap; }
.nutri li.tag-premium { padding: 1px 8px; border-color: var(--c); }
#reportBtn[hidden] + .tag-premium { display: none; }
.data-actions .tag-premium { align-self: center; }

/* Health questions on the profile step */
.health .checks { display: grid; gap: 8px; }
.health .checks label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; background: var(--enamel); border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; }
.health .checks label:has(input:checked) { border-color: var(--cobalt); }
.health .checks input { width: 20px; height: 20px; flex: none; accent-color: var(--cobalt); }
.warn a { color: inherit; font-weight: 700; }
@media (min-width: 1200px) { .health .checks { grid-template-columns: 1fr 1fr; } }

/* Privacy notice page: plain document, left-aligned, readable line length */
.doc { padding: 32px 16px 64px; }
@media (min-width: 720px) { .doc { padding: 48px 48px 80px; } }
.doc section + section { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.doc h2 { font-size: 1.15rem; margin: 28px 0 6px; }
.doc p { max-width: 80ch; line-height: 1.6; }
.doc a { color: var(--cobalt); }
@media (min-width: 1400px) {
  .doc { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; align-items: start; }
  .doc > p:first-child { grid-column: 1 / -1; }
  .doc section + section { margin-top: 0; padding: 0 0 0 64px; border-top: 0; border-left: 1px solid var(--line); }
}

/* Own meals and ingredients (meals step) */
.own { margin: 0 0 24px; padding: 16px 20px; background: var(--enamel); border: 1.5px solid var(--line); border-radius: 14px; }
.own > summary, .own-food > summary { cursor: pointer; font-weight: 700; color: var(--cobalt); min-height: 44px; display: flex; align-items: center; }
.own[open] > summary { margin-bottom: 12px; }
.own form { display: grid; gap: 14px; }
.own .field { margin: 0; }
.own input, .own select, .own textarea { width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 1rem; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); border-radius: 10px; }
.own textarea { min-height: 88px; resize: vertical; }
.own-head { display: grid; gap: 12px; }
@media (min-width: 720px) { .own-head { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.own fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.own legend { font-weight: 600; margin-bottom: 6px; }
.own-items { display: grid; gap: 8px; }
.own-item { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto 48px; gap: 8px; align-items: center; }
.own-item .remove { width: 48px; }
.own-total { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 1.5em; }
.own .primary { justify-self: start; }
.own-food { margin-top: 18px; padding-top: 12px; border-top: 1.5px dashed var(--line); }
.food-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; }
.food-ok { margin: 0; color: var(--f); font-weight: 600; }
.food-ok:empty { display: none; }
.tag-own { display: inline-flex; padding: 1px 8px; border: 1.5px solid var(--cobalt); border-radius: 999px; color: var(--cobalt); font-size: .72rem; font-weight: 700; vertical-align: middle; }
.own-actions { display: flex; gap: 8px; margin-top: 8px; }
.own-actions .ghost { min-height: 40px; padding: 0 12px; }
.own .add { justify-self: start; }
@media (max-width: 599px) { .own-item { grid-template-columns: minmax(0, 1fr) auto 48px; } .own-item [name=food] { grid-column: 1 / -1; } }

/* Label scan in the own-ingredient form */
.scan { display: grid; gap: 6px; justify-items: start; }
.scan-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border-color: var(--cobalt); color: var(--cobalt); }
.scan-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.scan-btn:focus-within { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.scan-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.scan .hint { margin: 0; }
.scan-msg { margin: 0; font-weight: 600; color: var(--ink); }
.scan-msg:empty { display: none; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }