/* MealCovered: warm, light kitchen look. Calm, uncluttered, large type, big tap targets.
   --navy is the main action color (herb green); --sky is the warm accent (tomato) for marks only.
   Always light: a meal planner should feel like a sunny kitchen, even when the phone is in dark mode. */
:root {
  --navy: #2F6B4F;
  --sky: #E8663D;
  --ink: #2B2420;
  --muted: #74675D;
  --line: #EFE9E1;
  --bg: #FDFBF7;
  --card: #ffffff;
  --ok: #1f7a4d;
  --warn: #8a5a00;
  --radius: 18px;
  --tap: max(52px, 2.9rem);
  color-scheme: light;
}
* { box-sizing: border-box; }
/* Text size: every size below is in rem, so the font size the server puts on <html> (meals/textsize.py
   SCALE: Normal 18px, Large 20px, Large ×2 22px, Large ×3 26px) scales all text and the tap targets.
   Classes on <html>: ts-<key>, ts-up (above Normal), ts-big (rows of buttons stack on small phones). */
html { -webkit-text-size-adjust: 100%; font-size: 112.5%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding-bottom: calc(max(84px, 3.1rem + 28px) + env(safe-area-inset-bottom));
}
a { color: var(--navy); }
img { max-width: 100%; display: block; }
h1 { font-size: 1.6rem; line-height: 1.2; margin: .2em 0 .5em; }
/* v34.5 MealCovered tagline: calm, herb green, never small. */
.tagline { color: var(--navy); font-weight: 650; font-size: 1.1rem; line-height: 1.3; margin: .4em 0 .1em; }
.tagline-h1 { color: var(--navy); }
.wordmark { width: min(300px, 80%); height: auto; margin: 0 0 .4em; }
h2 { font-size: 1.25rem; margin: 1.4em 0 .5em; }
h3 { font-size: 1.05rem; margin: 1em 0 .3em; }
p { margin: .4em 0 .9em; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.wrap { max-width: 720px; margin: 0 auto; padding: 16px 18px; }

.topbar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; max-width: 720px; margin: 0 auto; }
.topbar .brand { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); font-weight: 700;
  margin-right: auto; min-width: 0; }
.topbar .brand svg { width: 34px; height: 34px; }
.topbar .who { color: var(--muted); font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v33: the always-visible Aa (Text size) button, top right of every signed-in page. */
.topbar .ts-btn { flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: max(48px, 2.5rem); min-height: max(48px, 2.5rem); padding: 0 8px; border: 2px solid var(--navy);
  border-radius: 14px; color: var(--navy); background: var(--card); text-decoration: none; font-weight: 800;
  font-size: 1.05rem; line-height: 1; }
.topbar .ts-btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
@media (max-width: 480px) { html.ts-up .topbar .who { display: none; } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 14px 0; }
.card.flat { padding: 14px 16px; }
.tonight { padding: 0; overflow: hidden; }
.tonight img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.tonight .body { padding: 18px; }
.tonight .label { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--muted); font-weight: 700; }
.tonight h1 { margin: .15em 0 .3em; }

.btn, button.btn, input[type=submit].btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 20px; border-radius: 14px; border: 2px solid var(--navy);
  background: transparent; color: var(--navy); font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
}
.btn.primary { background: var(--navy); color: #fff; }
.btn.block { width: 100%; }
.btn.quiet { border-color: var(--line); color: var(--ink); }
.btn.small { min-height: 40px; padding: 0 14px; font-size: .95rem; border-radius: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.actions form { margin: 0; }
.stack > * + * { margin-top: 10px; }

label { display: block; font-weight: 600; margin: 14px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url],
select, textarea {
  width: 100%; min-height: var(--tap); padding: 10px 14px; font: inherit; color: var(--ink);
  background: var(--card); border: 2px solid var(--line); border-radius: 12px;
}
textarea { min-height: 120px; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.check { display: flex; align-items: center; gap: 12px; font-weight: 500; min-height: var(--tap); margin: 0; }
.check input { width: 26px; height: 26px; }
.hint { color: var(--muted); font-size: .9rem; margin-top: 4px; }

.flash { background: #E7F2EA; color: #24543D; border-radius: 14px; padding: 12px 16px; margin: 10px 0; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.chip { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px;
        border: 2px solid var(--line); text-decoration: none; color: var(--ink); background: var(--card); font-weight: 550; }
.chip.on { border-color: var(--navy); background: var(--navy); color: #fff; }

details.filters { margin: 8px 0 14px; }
details.filters summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 650; cursor: pointer; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--ink); }
.tile img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: var(--line); }
.tile .t { padding: 10px 12px; font-weight: 600; line-height: 1.3; }
.tile .m { padding: 0 12px 12px; color: var(--muted); font-size: .85rem; }

.hero-img { width: 100%; border-radius: var(--radius); aspect-ratio: 4/3; object-fit: cover; background: var(--line); }
.facts { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); margin: 6px 0 10px; }
ul.clean { list-style: none; padding: 0; margin: 0; }
ul.clean li { padding: 12px 0; border-bottom: 1px solid var(--line); }
ol.steps li { margin: 0 0 12px; }
.note { background: #fff6e0; color: #5a3d00; border-radius: 12px; padding: 10px 14px; margin: 8px 0; }

.day { margin: 16px 0; }
.day h3 { display: flex; align-items: baseline; gap: 10px; }
.day h3 .tag { font-size: .8rem; font-weight: 600; color: var(--warn); }
.meal { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.meal img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; }
.meal .info { flex: 1; min-width: 0; }
.meal .slot { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.meal .name { font-weight: 600; display: block; text-decoration: none; color: var(--ink); }
.meal form { margin: 0; }

.list-item { display: flex; align-items: center; gap: 14px; min-height: var(--tap); padding: 6px 0; border-bottom: 1px solid var(--line); }
.list-item button.tick { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--navy); background: transparent; flex: none; cursor: pointer; font-size: 1.1rem; color: #fff; }
.list-item.done button.tick { background: var(--navy); }
.list-item.done .what { text-decoration: line-through; color: var(--muted); }
.list-item .what { flex: 1; }
.list-item .qty { color: var(--muted); font-size: .95rem; }

.vote { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vote input { position: absolute; opacity: 0; }
.vote label { margin: 0; min-height: 48px; padding: 0 16px; display: inline-flex; align-items: center; border: 2px solid var(--line); border-radius: 12px; font-weight: 600; cursor: pointer; }
.vote input:checked + label { border-color: var(--navy); background: var(--navy); color: #fff; }
.stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.stars input { position: absolute; opacity: 0; }
.stars label { margin: 0; font-size: 2rem; line-height: 1; color: #c5ccd6; cursor: pointer; padding: 2px; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: #f2a900; }
.starline { color: #c48a00; font-weight: 700; }
.review { padding: 12px 0; border-bottom: 1px solid var(--line); }
.review.hidden { opacity: .6; }

nav.bottom { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line);
  display: flex; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 10; }
nav.bottom a { flex: 1; min-width: 0; text-align: center; text-decoration: none; color: var(--muted); font-size: .8rem; font-weight: 600;
  line-height: 1.15; overflow-wrap: anywhere; min-height: max(56px, 3.1rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
nav.bottom a svg { width: 26px; height: 26px; }
nav.bottom a.on { color: var(--navy); }
.pager { display: flex; justify-content: space-between; margin: 18px 0; }
.empty { text-align: center; padding: 30px 10px; }
.copybox { display: flex; gap: 8px; }
.copybox input { flex: 1; }
.right { text-align: right; }
.sr { position: absolute; left: -9999px; }

/* Footer: quiet links and recipe-source credit. */
.site-footer { max-width: 720px; margin: 8px auto 0; padding: 8px 18px 20px; text-align: center; color: var(--muted); font-size: .85rem; }
.site-footer p { margin: .3em 0; }
.site-footer a { color: var(--muted); }

/* Terms and Privacy pages. */
.legal h2 { font-size: 1.15rem; }
.legal ul { padding-left: 1.2em; }
.legal li { margin: .3em 0; }
.legal .note { border-left: 4px solid var(--line); padding-left: 12px; }

/* Warm kitchen touches. */
h1, h2, h3, .topbar .brand { font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
h1 { color: #2B2420; }
.card, .tile { box-shadow: 0 1px 2px rgba(80, 55, 30, .06), 0 4px 14px rgba(80, 55, 30, .05); border-color: #F0E8DD; }
.tonight .label { color: var(--sky); }
.topbar { background: transparent; }
nav.bottom { background: #fffdf9; box-shadow: 0 -2px 12px rgba(80, 55, 30, .06); }
.btn.primary:hover { background: #275C43; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }

/* Back link for pages outside the bottom tabs (installed app has no browser back). */
a.back { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 2px; color: var(--muted);
  text-decoration: none; font-weight: 600; }
a.back:hover { color: var(--navy); }
.center { text-align: center; }
.quiet-day { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--line); }
.quiet-day form { margin: 0; }
.meal.skipped .name, .meal.skipped img { opacity: .55; }
.day-options form { margin: 8px 0 0; }
.day-row { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 8px 0; }
.day-row .day-pick { flex: 1; }
.inline-form form { display: inline; margin: 0; }
button.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--navy); text-decoration: underline;
  cursor: pointer; }
.meal .side { color: var(--muted); }
.meal .side a { margin-left: 4px; }
.times-form input[type=time] { min-height: 44px; }
.meal-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; flex: none; }
.meal-actions form { margin: 0; }
.meal-actions .btn { width: 100%; }
.meal-actions:empty { display: none; }

/* Quick deciders on a meal: summary, facts chips, dietary pills, family fit. */
.dish-summary { margin: 2px 0 8px; color: var(--ink); line-height: 1.45; }
.factchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; padding: 0; list-style: none; }
.factchips li { background: #F7F2EA; color: #4E443C; border-radius: 999px; padding: 4px 11px; font-size: .88rem; font-weight: 550; }
.dietpills { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; padding: 0; list-style: none; }
.dietpills li { background: #EAF3EC; color: #2F5A44; border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 600; }
.diet-hint { font-size: .78rem; color: var(--muted); margin: 2px 0 6px; }
.fitline { font-size: .92rem; margin: 6px 0 10px; }
.fitline.fits { color: var(--ok); }
.fitline.note, .fitline.dislike { color: var(--warn); }
.fitline.allergy { color: #a3361a; font-weight: 650; }
.morefacts { color: var(--muted); font-size: .88rem; margin: 2px 0 8px; }
.fiticon { display: inline-block; min-width: 1.1em; text-align: center; font-weight: 700; }
.fiticon.fits { color: var(--ok); } .fiticon.note, .fiticon.dislike { color: var(--warn); } .fiticon.allergy { color: #a3361a; }
.summary-edit summary { color: var(--muted); font-size: .85rem; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }

/* Gentle vote reminders. */
.banner { background: #FFF6E8; border: 1px solid #F3E2C4; border-radius: 16px; padding: 12px 14px; margin: 10px 0 14px;
  display: flex; gap: 10px; align-items: flex-start; }
.banner .b-body { flex: 1; }
.banner .b-title { font-weight: 650; margin: 0 0 2px; }
.banner .b-text { margin: 0; color: #5a4a3a; }
.banner .b-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.banner .x { background: none; border: 0; font: inherit; font-size: 1.3rem; color: var(--muted); min-width: 44px; min-height: 44px; cursor: pointer; }
.vote-line { margin: 0 0 12px; font-size: .95rem; }
.vote-line a { font-weight: 600; }
nav.bottom a { position: relative; }
nav.bottom a .dot { position: absolute; top: 6px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: var(--sky); }
.voted { color: var(--ok); font-size: .85rem; }

/* Recipes: Filters and time buttons, and the filters that are on. */
.filterbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; align-items: flex-start; }
.filterbar details.pop { position: relative; }
.filterbar details.pop[open] { flex-basis: 100%; }
.filterbar details.pop > summary { list-style: none; cursor: pointer; gap: 8px; }
.filterbar details.pop > summary::-webkit-details-marker { display: none; }
.filterbar .ico { width: 18px; height: 18px; }
.time-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.chip.mini { min-height: 44px; padding: 0 14px; font-size: .88rem; font-weight: 550; background: #F7F2EA; border-color: #F7F2EA; }
.chip.mini span { margin-left: 6px; color: var(--muted); }
.clear-all { min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; font-size: .9rem; }

/* Quick-glance badges: small, soft, never loud. */
.badges { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; margin: 4px 0 6px; }
.badges li { background: #FBEFE6; color: #7A4A2E; border-radius: 999px; padding: 2px 9px; font-size: .76rem; font-weight: 600; }
.tile .badges { padding: 0 12px; margin: 0 0 6px; }
.badge-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.chip.mini.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Hearts and collections. */
.tile { position: relative; }
.tile .tile-link { display: block; text-decoration: none; color: inherit; }
.heart-form { position: absolute; top: 8px; right: 8px; margin: 0; }
.heart { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 253, 249, .92); color: var(--sky);
  font-size: 1.35rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(80, 55, 30, .12); }
.heart.on { color: #d2452b; }
.recipe-hero { position: relative; }
.recipe-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.recipe-actions .heart-form { position: static; }
.collection-list label.check { border-bottom: 1px solid var(--line); }

/* Taste guess: six calm bars. */
.taste { margin: 10px 0 14px; }
.taste h3 { font-size: .95rem; margin: 0 0 6px; }
.taste .row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; margin: 3px 0; font-size: .85rem; color: var(--muted); }
.taste .bar { height: 8px; background: #F3EDE4; border-radius: 99px; overflow: hidden; }
.taste .bar span { display: block; height: 100%; background: #E9A27F; border-radius: 99px; }

/* Healthier on a budget. */
.budgetline { margin: 6px 0 12px; }
.budgetline p { margin: 0 0 4px; }
.budgetline .bar { height: 8px; background: #F3EDE4; border-radius: 99px; overflow: hidden; }
.budgetline .bar span { display: block; height: 100%; background: #9CC3A8; border-radius: 99px; }
.budgetline .bar.over span { background: #E9A27F; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 10px; }
.win { background: #EEF6EF; color: #24543D; border-radius: 14px; padding: 10px 14px; margin: 8px 0 12px; }
.rescue-link { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; font-size: .92rem; color: var(--muted); text-decoration: none; }
.rescue-link strong { color: var(--navy); margin-left: 4px; }

/* Segmented choice (budget type). Fields for the chosen type only, where :has() works. */
.seg-wrap { border: 0; padding: 0; margin: 0; }
.seg { display: inline-flex; flex-wrap: wrap; background: #F7F2EA; border-radius: 14px; padding: 4px; gap: 4px; margin: 4px 0 8px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { margin: 0; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 10px; font-weight: 600; cursor: pointer; color: var(--ink); }
.seg input:checked + label { background: var(--card); color: var(--navy); box-shadow: 0 1px 3px rgba(80, 55, 30, .12); }
.seg input:focus-visible + label { outline: 3px solid var(--sky); outline-offset: 2px; }
.seg-wrap:has(#mode-range:checked) .amount-fields, .seg-wrap:has(#mode-amount:checked) .range-fields,
.seg-wrap:has(#mode-none:checked) .mode-fields { display: none; }

/* Tastes: quiz, For you reasons, swap choices */
.why { padding: 0 12px 6px; color: var(--navy); font-size: .84rem; font-weight: 600; line-height: 1.3; }
.meal .why { padding: 2px 0 4px; }
.t-title { font-weight: 650; margin: 0 0 4px; }
.taste-offer .actions, .not-feeling .chips { margin-top: 8px; }
.not-feeling .chips { padding-bottom: 2px; }
.quiz-step { margin: 4px 0 6px; }
.quiz-bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.quiz-bar span { display: block; height: 100%; background: var(--navy); border-radius: 999px; }
.pick-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 6px; }
.pick { margin: 0; position: relative; font-weight: 550; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick span { min-height: 48px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px;
             border: 2px solid var(--line); background: var(--card); cursor: pointer; }
.pick input:checked + span { border-color: var(--navy); background: var(--navy); color: #fff; }
.pick input:focus-visible + span, .vote input:focus-visible + label { outline: 3px solid var(--sky); outline-offset: 2px; }
.dish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 10px 0; }
.dish { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 0 0 12px; margin: 0; overflow: hidden; min-width: 0; }
.dish img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--line); }
.dish .d-title { float: left; width: 100%; padding: 10px 12px 6px; font-weight: 600; line-height: 1.3; }
.dish .d-vote { clear: both; padding: 0 10px; gap: 6px; }
.dish .d-vote label { min-height: 44px; padding: 0 10px; font-size: .92rem; }
.quiz-actions { margin-top: 18px; }
.quiz-skip { margin: 14px 0 0; text-align: center; }
.linklike { background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 8px; }
.row-split { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Taste quiz: choices use a soft tint so the green Next button stands alone */
.taste-quiz .pick input:checked + span,
.taste-quiz .vote input:checked + label { background: #E6F0EA; color: #1F4A36; border-color: var(--navy); }
.taste-quiz .pick input:checked + span::before,
.taste-quiz .vote input:checked + label::before { content: "✓ "; font-weight: 700; }
.quiz-nav { position: sticky; bottom: calc(max(70px, 3.1rem + 14px) + env(safe-area-inset-bottom)); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 20px -16px 0; padding: 12px 16px; background: #fff;
  border-top: 1px solid var(--line); box-shadow: 0 -6px 16px rgba(0,0,0,.06); }
.quiz-next { min-width: 60%; min-height: 54px; font-size: 1.1rem; box-shadow: 0 4px 12px rgba(47,107,79,.35); }
.quiz-back { min-height: 48px; display: inline-flex; align-items: center; padding: 0 8px; font-weight: 600; color: var(--ink); text-decoration: none; }

/* Recipe page: photos, fact tiles, titled steps, tips, cook mode */
.collage { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
.collage a { display: block; position: relative; min-height: 0; background: var(--line); }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage .c-side { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; min-height: 0; }
.collage .c-side:has(a:only-child) { grid-template-rows: 1fr; }
.c-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(43,36,32,.45); color: #fff; font-weight: 700; font-size: 1.2rem; }
.facttiles { list-style: none; padding: 0; margin: 12px 0 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.facttiles li { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ft-icon { font-size: 1.3rem; line-height: 1.2; }
.ft-big { font-weight: 700; color: var(--navy); line-height: 1.2; }
.ft-small { font-size: .8rem; color: var(--muted); }
.compact-facts .badges, .compact-facts .factchips { margin: 4px 0; }
.compact-facts .factchips li { font-size: .8rem; padding: 3px 9px; }
.unitnote { font-size: .85rem; color: var(--muted); margin: 14px 0 -6px; }
ul.ing-list { padding-left: 1.2em; margin: 0; }
ul.ing-list li { padding: 6px 0; }
ul.ing-list li::marker { color: var(--sky); }
.howto-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 1.4em 0 .4em; }
.howto-head h2 { margin: 0; }
ol.howto { list-style: none; padding: 0; margin: 0; }
ol.howto > li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
ol.howto > li:last-child { border-bottom: 0; }
.howto-n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.howto-body { flex: 1; min-width: 0; }
.howto-body p { margin: 2px 0 0; }
.howto-photo { flex: 0 0 auto; order: -1; }
.howto-photo img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; background: var(--line); }
ol.howto > li.howto-section { display: block; font-weight: 700; color: var(--muted); border-bottom: 0; padding: 16px 0 0; }
.tips { background: #F7F2EA; border-radius: var(--radius); padding: 4px 16px 10px; margin: 18px 0; }
.tips h2 { margin: .7em 0 .3em; }
.tips ul { margin: 0; padding-left: 1.1em; }
.tips li { padding: 4px 0; }
dialog.zoom { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 92vh; }
dialog.zoom::backdrop { background: rgba(20,16,14,.8); }
dialog.zoom img { max-width: 96vw; max-height: 86vh; border-radius: 12px; }
dialog.zoom .zoom-close { margin: 0 0 6px auto; display: block; background: #fff; }
.cook { max-width: 640px; margin: 0 auto; }
.cook-top { margin: 0 0 8px; }
.cook-progress { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.cook-progress span { display: block; height: 100%; background: var(--navy); }
.cook-count { color: var(--muted); margin: 18px 0 0; font-weight: 600; }
.cook-title { font-size: 1.9rem; margin: .1em 0 .4em; }
.cook-text { font-size: 1.45rem; line-height: 1.5; }
.cook-photo { width: 100%; border-radius: var(--radius); aspect-ratio: 4/3; object-fit: cover; margin: 6px 0 12px; }
.cook-nav { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin: 28px 0 10px; }
.cook-nav .btn { min-height: 60px; font-size: 1.15rem; }
.step-edit { border-top: 1px solid var(--line); padding: 10px 0; }
.step-edit-n { margin: 0 0 4px; font-weight: 600; color: var(--muted); }
.step-edit textarea { min-height: 80px; }
.photo-picks { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 8px; }
.photo-pick { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.photo-pick img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
fieldset.plain { border: 0; padding: 0; margin: 12px 0; }
label.choice { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
label.choice input { width: 22px; height: 22px; accent-color: var(--navy); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; font-weight: 400; }
input.switch { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 54px; height: 32px; border-radius: 999px; background: #D9D1C7; position: relative; cursor: pointer; transition: background .15s; margin: 0; }
input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s; }
input.switch:checked { background: var(--navy); }
input.switch:checked::after { left: 25px; }
input.switch:focus-visible { outline: 3px solid rgba(47,107,79,.35); outline-offset: 2px; }
.switch-row .small { line-height: 1.45; display: inline-block; margin-top: 2px; }

/* Kitchen (Pantry and fridge): search, place pills, grouped and collapsible lists, edit sheet. */
[hidden] { display: none !important; }
.kitchen-sub { margin-top: -6px; }
.kitchen-tools { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 6px 0 2px; }
.kitchen-search { position: relative; margin: 0; }
.kitchen-search input[type=search] { padding-right: 52px; border-radius: 999px; }
.kitchen-search input[type=search]::-webkit-search-cancel-button { display: none; }
.kitchen-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px; text-decoration: none;
  color: var(--muted); font-size: 1.5rem; line-height: 1; }
.kitchen-clear:hover, .kitchen-clear:focus-visible { background: #F7F2EA; color: var(--ink); }
.kitchen-pills { margin-top: 8px; }
.kitchen-none { text-align: center; }
.kitchen-none p { margin: 0 0 10px; }
.kitchen-note p:last-child { margin-bottom: 0; }
.kitchen-qty { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kitchen-qty input { flex: 1 1 160px; min-width: 0; }
.kitchen { margin: 8px 0 18px; }
details.kloc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin: 12px 0; padding: 0 14px; }
details.kloc > summary, details.kcat > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
details.kloc > summary::-webkit-details-marker, details.kcat > summary::-webkit-details-marker { display: none; }
details.kloc > summary { min-height: var(--tap); font-weight: 700; font-size: 1.1rem; }
details.kloc > summary::before, details.kcat > summary::before { content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
details[open].kloc > summary::before, details[open].kcat > summary::before { transform: rotate(45deg); }
details.kcat { border-top: 1px solid var(--line); }
details.kcat > summary { min-height: 46px; font-size: .92rem; font-weight: 650; color: var(--muted); }
.kcount { margin-left: auto; min-width: 28px; padding: 0 8px; border-radius: 999px; background: #F7F2EA; color: var(--muted);
  font-size: .85rem; font-weight: 650; text-align: center; }
.kitems { list-style: none; margin: 0 0 8px; padding: 0; }
.kitems li { display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px dashed var(--line); }
.kitems li:first-child { border-top: 0; }
.kitems li form { margin: 0; }
.kname { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; padding: 10px 0; overflow-wrap: anywhere; }
.kname:first-letter { text-transform: uppercase; }
.kitems li.flash-hit { background: #FFF4EC; border-radius: 10px; }
.kitchen-add summary { font-weight: 650; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.wrapchips { flex-wrap: wrap; overflow: visible; }
fieldset.kplace { border: 0; padding: 0; margin: 10px 0 0; }
fieldset.kplace legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.chip.radio { cursor: pointer; margin: 0; font-weight: 550; position: relative; }
.chip.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip.radio:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip.radio:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 2px; }
dialog.sheet { border: 0; border-radius: 22px 22px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); margin: auto auto 0;
  width: 100%; max-width: 560px; background: var(--card); color: var(--ink); }
dialog.sheet::backdrop { background: rgba(43,36,32,.35); }
dialog.sheet h2 { margin: 0 0 4px; }
dialog.sheet h2:first-letter { text-transform: uppercase; }


/* Steppers: Family size (Account) and Serves on a recipe. */
.stepper { display: flex; align-items: center; gap: 8px; max-width: 220px; }
.stepper input[type=number] { text-align: center; font-weight: 700; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-btn { flex: none; width: 48px; height: 48px; border-radius: 999px; border: 2px solid var(--line); background: var(--card);
  color: var(--navy); font: inherit; font-size: 1.5rem; line-height: 1; display: inline-flex; align-items: center;
  justify-content: center; text-decoration: none; cursor: pointer; }
.step-btn.off { opacity: .35; pointer-events: none; }
.small-check { font-size: .95rem; }
.serves { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; }
.serves-n { min-width: 96px; text-align: center; }
.serves-note { margin-top: 2px; }

/* "✓ You have this": what the kitchen already has, on recipes, Let's cook and the list. */
.ing-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ing-head h2 { margin-right: auto; }
.have-sum { font-size: .85rem; color: #24543D; background: #E7F2EA; border-radius: 999px; padding: 2px 10px; }
.ing-list li::after { content: ""; display: block; clear: both; }
.ing-list .have { float: right; margin: 2px 0 0 8px; }
/* v29: a prep note sits under the food, smaller and grey ("finely diced"), never part of the name */
.ing-list .ing-note { display: block; font-size: .88em; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.have { font-size: .78rem; font-weight: 600; color: #24543D; background: #E7F2EA;
  border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.already-have summary { font-weight: 650; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px; }
.already-have .have { margin-left: 0; }

/* Button groups, app-wide: side by side at equal widths when the labels fit at 320px (.btnrow,
   2 or 3 across), otherwise full width and stacked (.btnstack). Never ragged content-width buttons. */
.btnrow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.btnrow > form { margin: 0; display: flex; min-width: 0; }
.btnrow .btn, .btnrow > form > .btn { width: 100%; min-width: 0; padding: 0 6px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-size: clamp(.68rem, 3.5vw, .95rem); letter-spacing: -.005em; }
.btnrow .btn.small { min-height: 44px; }
.btnstack { display: grid; gap: 10px; margin-top: 12px; }
.btnstack > form { margin: 0; }
.btnstack .btn, .btnstack > form > .btn { width: 100%; }
/* Tonight: Swap it / We ate this / We ate out, one row of three down to 320px. */
.btnrow.trio { grid-auto-flow: unset; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.btnrow.trio .btn { padding: 0 3px; min-height: 48px; font-size: clamp(.66rem, 3.4vw, .95rem); }

/* Portions: "about 4½ portions ⓘ", the leftovers toggle, and "How was the amount?" */
abbr.info { text-decoration: none; color: var(--muted); cursor: help; font-size: .85em; }
.extra-form { margin: 2px 0 0; text-align: center; }
.extra-form .linkish { color: var(--muted); }
.extra-form .linkish[aria-pressed="true"] { color: var(--navy); }
fieldset.amount-q { border: 0; padding: 0; margin: 16px 0 4px; }
fieldset.amount-q legend { font-weight: 650; margin-bottom: 8px; padding: 0; }
.vote-stack { flex-direction: column; align-items: stretch; }
.vote-stack label { width: 100%; }
.btnrow.review-actions { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.btnrow > details > summary.btn { width: 100%; list-style: none; }
.btnrow > details > summary.btn::-webkit-details-marker { display: none; }
.btnrow.review-actions > details[open] { grid-column: 1 / -1; }

/* Recipes: For you · Saved · Cook from what I have. One row; scrolls sideways if it can't fit. */
.mode-pills { flex-wrap: wrap; overflow: visible; }
.mode-pills .chip { white-space: nowrap; font-size: clamp(.82rem, 3.9vw, 1rem); padding: 0 13px; }
.pill-note { margin: -4px 0 8px; }
.tile .have-line { margin: 0 12px 4px; }
.tile .need { margin: 0 12px 8px; font-size: .8rem; color: var(--muted); line-height: 1.3; }

/* ======================================================================
   Design system (v15). One look across every page: tokens, page header,
   section title, card, row list, buttons, pills, inputs. Calm and soft.
   Placed last so these shared rules win over older one-off styles.
   ====================================================================== */
:root {
  --cream: #FBF6EE;           /* soft fill for icon tiles, pills, quiet surfaces */
  --line-soft: #F2ECE3;
  --navy-press: #275C43;
  --sky-soft: #FDEDE6;
  --green-soft: #E9F2EC;
  /* spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 28px; --s7: 36px;
  /* radii */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  --radius: var(--r-lg);
  /* shadows */
  --shadow-1: 0 1px 2px rgba(80, 55, 30, .05), 0 4px 16px rgba(80, 55, 30, .05);
  --shadow-2: 0 2px 6px rgba(80, 55, 30, .07), 0 10px 28px rgba(80, 55, 30, .07);
  /* type scale */
  --t-xs: .78rem; --t-sm: .9rem; --t-md: 1rem; --t-lg: 1.15rem; --t-xl: 1.45rem; --t-2xl: 1.85rem;
  --font-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body { line-height: 1.5; }
.wrap { padding: var(--s4) var(--s4) var(--s6); }

/* Page header and headings */
h1 { font-size: var(--t-2xl); font-weight: 750; letter-spacing: -.01em; margin: var(--s2) 0 var(--s4); }
h2 { font-size: var(--t-lg); font-weight: 700; margin: var(--s6) 0 var(--s3); }
h3 { font-size: var(--t-md); font-weight: 700; }
.page-head { margin: var(--s2) 0 var(--s4); }
.page-head h1 { margin: 0; }
.page-head p { margin: var(--s1) 0 0; color: var(--muted); }
.section-title, .wrap > h2 { font-family: var(--font-round); }
.section-title { font-size: var(--t-xs); font-weight: 750; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: var(--s6) var(--s2) var(--s2); }

/* Card */
.card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: var(--s5); margin: var(--s4) 0; }
.card.flat { padding: var(--s4) var(--s5); }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* Row list: iOS-style grouped rows. Whole row tappable, ≥ 56px, soft pressed state. */
ul.rows { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
ul.rows > li { margin: 0; padding: 0; border: 0; }
ul.rows > li + li { border-top: 1px solid var(--line-soft); }
ul.rows > li > form { margin: 0; }
.row { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 60px; padding: 10px var(--s4);
  color: var(--ink); text-decoration: none; background: transparent; border: 0; font: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .12s ease; }
.row:hover { background: #FFFCF7; }
.row:active { background: var(--cream); }
.row:focus-visible { outline: 3px solid var(--sky); outline-offset: -3px; }
.row-ico { flex: none; width: 36px; height: 36px; border-radius: var(--r-sm); display: inline-flex; align-items: center;
  justify-content: center; font-size: 1.1rem; line-height: 1; background: var(--cream); }
.row-ico svg { width: 20px; height: 20px; }
.tone-green { background: var(--green-soft); color: var(--navy); }
.tone-tomato { background: var(--sky-soft); color: var(--sky); }
.tone-butter { background: #FFF4D9; color: #8a5a00; }
.tone-sky { background: #E8F1F7; color: #2F5E7A; }
.tone-stone { background: #F3EEE7; color: var(--muted); }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row-label { font-weight: 650; line-height: 1.3; }
.row-sub { color: var(--muted); font-size: var(--t-sm); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; }
.row-chev { flex: none; color: #C3B8AC; font-size: 1.5rem; line-height: 1; margin-left: var(--s1); }
.row-end { flex: none; color: var(--muted); font-size: var(--t-sm); }
.row-danger .row-label { color: #B4471F; }
.group-quiet ul.rows { box-shadow: none; background: transparent; }
.group-quiet .row { min-height: 52px; }
.group-quiet .row-label { font-weight: 550; color: var(--muted); }

/* Household header card on More */
.hh-card { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s4) var(--s4) var(--s5);
  background: linear-gradient(135deg, #FFFFFF 0%, var(--cream) 100%); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; min-height: 76px; }
.hh-card:active { background: var(--cream); }
.hh-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hh-name { font-family: var(--font-round); font-weight: 750; font-size: var(--t-lg); line-height: 1.25; }
.avatars { display: flex; flex: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 750; letter-spacing: .02em; background: var(--green-soft); color: var(--navy);
  border: 2px solid #fff; margin-left: -8px; }
.avatar:first-child { margin-left: 0; }
.avatar.kid { background: var(--sky-soft); color: #B4471F; }
.avatar.more { background: #F3EEE7; color: var(--muted); }
@media (max-width: 360px) { .avatars .avatar:nth-child(n+4):not(.more) { display: none; } }

/* Simple lists (ul.clean): softer separators, no heavy underlines */
ul.clean li { border-bottom-color: var(--line-soft); }
ul.clean li:last-child { border-bottom: 0; }
.card ul.clean li:first-child { padding-top: 4px; }
.card ul.clean li:last-child { padding-bottom: 4px; }

/* Links: in-text links stay underlined for clarity, but softly. */
a { text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(47, 107, 79, .35); }
a:hover { text-decoration-color: currentColor; }

/* Buttons */
.btn, button.btn, input[type=submit].btn { border-radius: var(--r-md); font-weight: 650;
  transition: background-color .12s ease, border-color .12s ease, transform .06s ease; }
.btn:active { transform: scale(.985); }
.btn.primary { box-shadow: 0 1px 2px rgba(47, 107, 79, .25); }
.btn.primary:hover { background: var(--navy-press); border-color: var(--navy-press); }
.btn.quiet { background: var(--card); border-color: var(--line); }
.btn.quiet:hover { background: #FFFCF7; }
.btn.small { border-radius: var(--r-sm); }

/* Pills and chips */
.chip { border-color: var(--line); }
.chip:hover { border-color: #DCCFBF; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--cream); color: #4E443C; font-size: var(--t-xs); font-weight: 650; }
.pill.green { background: var(--green-soft); color: #2F5A44; }
.pill.tomato { background: var(--sky-soft); color: #B4471F; }

/* Inputs */
label { font-size: var(--t-sm); font-weight: 650; color: #4E443C; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url],
input[type=time], input[type=date], select, textarea { border-radius: var(--r-md); border: 1.5px solid #E6DED3;
  background: #fff; transition: border-color .12s ease, box-shadow .12s ease; }
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus,
input[type=search]:focus, input[type=url]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(47, 107, 79, .15); }
.hint { line-height: 1.45; }

/* Flash and notes */
.flash { border-radius: var(--r-md); border: 1px solid #D5E8DB; }
.note { border-radius: var(--r-md); }

/* Back link and bottom bar */
a.back { font-size: var(--t-sm); }
nav.bottom { border-top-color: var(--line-soft); }
nav.bottom a.on svg { stroke-width: 2.4; }

/* Footer */
.site-footer { padding-bottom: var(--s6); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ---- Design system, applied app-wide (v15, part 2) ---- */
.mt { margin-top: var(--s5); }
.row.static { cursor: default; }
.row.static:hover, .row.static:active { background: transparent; }
.avatar.solo { margin-left: 0; width: 38px; height: 38px; font-size: .85rem; flex: none; border: 0; }
.wrap > p.muted:first-of-type { margin-top: 0; }
.quiet-link { color: var(--muted); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 12px; border-radius: var(--r-pill); background: var(--cream); }
.quiet-link:hover { color: var(--navy); }

/* Week header: arrows either side of the dates */
.week-head { display: flex; align-items: center; gap: var(--s2); margin: var(--s1) 0 var(--s2); }
.week-head h1 { flex: 1; text-align: center; margin: 0; font-size: var(--t-lg); }
.week-head .btn.small { width: 44px; padding: 0; font-size: 1.3rem; }

/* Day cards on the Week page */
.day.card h3 { margin-top: 0; flex-wrap: wrap; row-gap: 2px; }
.day h3 .tag { background: #FFF4D9; color: #8a5a00; border-radius: var(--r-pill); padding: 1px 9px; font-size: var(--t-xs); }
.meal { border-top-color: var(--line-soft); }
.meal img { border-radius: var(--r-md); }

/* Expandable cards (family members, pantry places): a soft chevron instead of the browser's triangle */
details.card > summary, details.kloc > summary { list-style: none; cursor: pointer; position: relative; padding-right: 28px;
  min-height: 44px; }
details.card > summary::-webkit-details-marker, details.kloc > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: "›"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  color: #C3B8AC; font-size: 1.5rem; line-height: 1; transition: transform .15s ease; }
details.card[open] > summary::after { transform: translateY(-50%) rotate(90deg); }
details.card[open] > summary { margin-bottom: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line-soft); }
details.kloc { border-color: var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.merge-ask { border-color: #F3E2C4; background: #FFFBF3; }

/* Settings choices (Measurements) and segmented controls */
label.choice { border-bottom-color: var(--line-soft); min-height: 52px; }
label.choice:last-of-type { border-bottom: 0; }
.seg { background: var(--cream); border-radius: var(--r-md); }
.seg label { border-radius: var(--r-sm); }
.switch-row { border-top: 1px solid var(--line-soft); }

/* Lists and list items (shopping list, waste, reviews) */
.list-item { border-bottom-color: var(--line-soft); }
.review { border-bottom-color: var(--line-soft); }
.list-item button.tick { border-radius: var(--r-sm); }

/* Tiles */
.tile { border-radius: var(--r-lg); border-color: var(--line-soft); box-shadow: var(--shadow-1); transition: box-shadow .15s ease; }
.tile:hover { box-shadow: var(--shadow-2); }
.tile .t { font-weight: 650; }

/* Banners and budget line pick up the soft radius */
.banner { border-radius: var(--r-lg); }

/* ---- On the side (v16): the planned side gets its own card under the main meal ---- */
.side-pill-line { margin: -2px 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.side-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 12px; border-radius: var(--r-pill);
  background: var(--green-soft); color: #2F5A44; font-weight: 700; font-size: var(--t-sm); text-decoration: none;
  border: 1px solid #D5E8DB; }
.side-pill:hover { background: #DDEEE3; }
.side-pill.small-pill { min-height: 26px; padding: 1px 10px; font-size: var(--t-xs); }
.side-pill-who { font-size: var(--t-xs); font-weight: 650; color: #8a5a00; background: #FFF4D9; border-radius: var(--r-pill);
  padding: 1px 9px; }
.meal .side { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 3px 0; }
.side-card { scroll-margin-top: 12px; }
/* v34.2: "Added side, not part of the recipe." on the side card and side-only grocery lines (em: Text size scales it) */
.side-note { display: block; font-size: .92em; color: #574B42; line-height: 1.4; margin: 2px 0 6px; }
.side-note a { font-weight: 700; display: inline-block; min-height: 48px; line-height: 48px; }
.side-kicker { font-family: var(--font-round); font-size: var(--t-xs); font-weight: 750; text-transform: uppercase;
  letter-spacing: .08em; color: var(--sky); margin: 0 0 2px; }
.side-card .side-name { margin: 0 0 var(--s2); font-size: var(--t-xl); }
.side-card h3 { margin: var(--s4) 0 var(--s2); }
.side-card .ing-head h3 { margin: 0; }
.side-card .ing-head { margin-top: var(--s4); }
.side-who { margin: var(--s3) 0 0; padding: 8px 12px; border-radius: var(--r-md); background: #FFF4D9; color: #6b4600;
  font-weight: 650; }
.side-who.mine { background: var(--green-soft); color: #2F5A44; }
ol.side-steps { padding-left: 1.3em; margin: 0; }
ol.side-steps li { padding: 4px 0; }
.side-undo { margin: 6px 0 0; text-align: center; }
.side-others { margin-top: var(--s4); }
.side-others > summary { cursor: pointer; color: var(--navy); font-weight: 650; min-height: 44px; display: flex;
  align-items: center; list-style: none; }
.side-others > summary::-webkit-details-marker { display: none; }
.side-others > summary::after { content: "›"; margin-left: 6px; color: #C3B8AC; font-size: 1.3rem; transition: transform .15s ease; }
.side-others[open] > summary::after { transform: rotate(90deg); }
.side-others ul.rows { box-shadow: none; }
.side-others .row-end { color: var(--navy); font-weight: 650; }
.side-add { margin: var(--s4) 0; }
.cook-side { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-soft); }
.cook-side-toggle { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: var(--r-md);
  background: var(--cream); color: var(--ink); text-decoration: none; font-size: 1.1rem; }
.cs-box { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--navy); display: inline-flex;
  align-items: center; justify-content: center; color: #fff; font-weight: 800; }
.cook-side-toggle[aria-checked="true"] .cs-box { background: var(--navy); }
.cook-side-head { margin: var(--s4) 0 var(--s2); }
.cook-side-tag { color: var(--sky); }

/* Week rows: the text column takes the room and wraps; the action column stays narrow (buttons only). */
.meal .info { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.meal .name, .meal .slot, .meal .small { overflow-wrap: anywhere; }
.meal-actions { flex: 0 0 auto; max-width: 42%; }
.meal-actions .btn { white-space: nowrap; }
.pending-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 2px; padding: 6px 10px;
  border-radius: 12px; background: #FFF4D9; color: #6b4a00; font-size: var(--t-xs, .8rem); line-height: 1.35; }
.pending-chip span { min-width: 0; overflow-wrap: anywhere; }
.pending-chip form { margin: 0; }
.pending-chip .linkish { color: #6b4a00; font-weight: 650; min-height: 32px; }
.idea-inline { margin: 8px 0 2px; padding: 8px 10px; border-radius: 12px; background: #FDEEE7; }
.idea-inline p { margin: 0; overflow-wrap: anywhere; }
.idea-inline .btnrow { margin-top: 6px; }
.ideas .idea + .idea { margin-top: 12px; }
.ideas .idea .btnrow { margin-top: 4px; }
/* Tonight, owner: a family idea waiting for a yes. Bold so it can't be missed. */
.idea-card { border: 2px solid var(--sky); background: #FFF7F2; margin: 6px 0 14px; }
.idea-card p { margin: 0 0 2px; overflow-wrap: anywhere; }
.idea-kicker { color: #B4471F; font-weight: 750; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.idea-title { font-size: 1.2rem; font-weight: 750; color: var(--ink); }
.idea-result { overflow-wrap: anywhere; }
/* Week tab: a count instead of a dot when something is waiting. */
nav.bottom a .count-badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--sky); color: #fff; font-size: .7rem; font-weight: 750; line-height: 18px; }

/* Shopping list: the estimated bill, and what to buy in packs. */
.bill { margin: 4px 0 12px; }
.list-item .need { margin-top: 1px; font-weight: 400; overflow-wrap: anywhere; line-height: 1.35; }
.list-item .what { min-width: 0; }
/* Why we're buying it: each meal's amount, then a quiet "+2 more". */
.list-item .src-more { display: inline; }
.list-item .src-more summary { display: inline; cursor: pointer; list-style: none; text-decoration: underline dotted; text-underline-offset: 2px; }
.list-item .src-more summary::-webkit-details-marker { display: none; }
.list-item .src-more[open] summary { display: none; }
.list-item .src-more .src-rest { display: inline; }
.pack-edit { margin: 0 0 6px 48px; }
.pack-edit .copybox { margin-top: 6px; }
.pack-edit input[type=number] { max-width: 6rem; }

/* The can't-miss vote card (family members) and its strip on Week. */
.vote-card { border: 2px solid var(--sky); background: #FFF3EC; margin: 6px 0 14px; }
.vote-card-title { font-size: 1.2rem; font-weight: 750; margin: 0 0 4px; color: #8E3414; overflow-wrap: anywhere; }
.vote-card .btn.block { margin-top: 10px; min-height: 52px; font-size: 1.05rem; }
.vote-later { text-align: center; margin-top: 8px; }
.vote-later .linkish { color: var(--muted); min-height: 36px; }
.vote-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; padding: 12px 14px;
  border-radius: 14px; background: #FFF3EC; border: 2px solid var(--sky); color: #8E3414; text-decoration: none; }
.vote-strip span { flex: 1 1 auto; min-width: 0; font-weight: 650; overflow-wrap: anywhere; }
.vote-strip strong { flex: 0 0 auto; }
.vote-summary { display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 4px 0 12px; padding: 10px 14px;
  border-radius: 14px; background: var(--card, #fff); border: 1px solid #E6DED2; color: inherit; text-decoration: none; }
.vote-summary span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.vote-summary .go { flex: 0 0 auto; font-size: 1.3rem; color: var(--muted, #6B6157); }
.who-voted { color: #3F5B45; margin: 4px 0; overflow-wrap: anywhere; }
.vote-one .btnstack { margin-top: 12px; }

/* Help tips (meals/tips.py): one calm, soft-tinted line per screen; × hides it ("Got it"). */
.help-tip { display: flex; align-items: flex-start; gap: 10px; background: var(--green-soft); border: 1px solid #DCEADF;
  border-radius: var(--r-md); padding: 10px 4px 10px 12px; margin: 10px 0 12px; color: #24543D; }
.help-tip .tip-ico { flex: none; font-size: 1.05rem; line-height: 1.5; }
.help-tip .tip-text { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--t-sm); line-height: 1.45; overflow-wrap: anywhere; }
.help-tip form { flex: none; margin: -8px 0 -8px 0; }
.help-tip .tip-x { background: none; border: 0; font: inherit; font-size: 1.25rem; line-height: 1; color: #5E7F6C;
  min-width: 44px; min-height: 44px; cursor: pointer; border-radius: var(--r-sm); }
.help-tip .tip-x:focus-visible { outline: 3px solid rgba(47,107,79,.35); outline-offset: -3px; }
.help-tip.gone { display: none; }
.cook .help-tip { margin-top: 4px; }
.tips-card { padding-top: 2px; padding-bottom: 8px; }
.tips-card .switch-row { border-top: 0; }
.tips-card .switch-row .info { flex: 1 1 auto; min-width: 0; }
.tips-card form { margin: 0; }
.tips-reset { padding: 4px 0 6px; }
.tips-reset .linkish { min-height: 40px; }


/* ---- v22: Text size, Cook around, Show me other recipes, Voice ---- */
/* Tap targets grow with the text (never under 48px). */
.chip, .chip.mini, a.back, .btn.small, .btnrow .btn.small, .seg label, .clear-all, .linklike, .rescue-link,
.summary-edit summary, .kitchen-add summary, .already-have summary, .side-others > summary, .dish .d-vote label,
.times-form input[type=time], .quiz-back, details.kcat > summary { min-height: max(48px, 2.7rem); }
.banner .x { min-width: max(44px, 2.5rem); min-height: max(44px, 2.5rem); }
.heart { min-width: max(48px, 2.7rem); min-height: max(48px, 2.7rem); }
/* Bigger text on small phones: rows of buttons stack full width instead of cutting words off.
   ts-up = any size above Normal; ts-big = Large ×2 and up (meals/textsize.py SCALE). */
@media (max-width: 400px) {
  html.ts-big .btnrow, html.ts-big .btnrow.trio, html.ts-big .btnrow.review-actions { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  html.ts-big .grid2, html.ts-big .grid3, html.ts-big .mode-grid { grid-template-columns: minmax(0, 1fr); }
  html.ts-big .recipe-grid { grid-template-columns: minmax(0, 1fr); }
  /* Bottom tabs: labels as big as fit five across (never smaller than Normal's), icons stay. */
  html.ts-big nav.bottom a { font-size: min(.8rem, 4.3vw); }
}
@media (max-width: 340px) {
  html.ts-up .btnrow, html.ts-up .btnrow.trio, html.ts-up .btnrow.review-actions { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  html.ts-up .grid2 { grid-template-columns: minmax(0, 1fr); }
  html.ts-up nav.bottom a { font-size: min(.8rem, 4.3vw); }
}
html.ts-up .btnrow .btn { white-space: normal; line-height: 1.2; padding: 6px 8px; }
html.ts-up .mode-pills { flex-wrap: wrap; }
html.ts-up .mode-pills .chip { font-size: .95rem; white-space: normal; }
html.ts-big .meal-actions .btn { white-space: normal; line-height: 1.2; }
html.ts-up h1, html.ts-up h2 { overflow-wrap: anywhere; }
html.ts-up .wrap { overflow-x: clip; }  /* a last guard: never a sideways scroll */
.copybox input { min-width: 0; }
.wrap, .card, .tile, .row-text, .info { min-width: 0; overflow-wrap: break-word; }

/* Text size choices (page and Aa sheet): one full-width button per size, each name at its real size. */
.ts-lead { margin-top: 0; }
.ts-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 8px 0 16px; }
.ts-opt { min-height: max(64px, 3.4rem); display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 2px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit;
  font-weight: 700; cursor: pointer; padding: 8px 16px; min-width: 0; width: 100%; text-align: left; }
.ts-opt .ts-name { line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
.ts-opt .ts-check { flex: none; font-size: 1.3rem; color: var(--navy); min-width: 1.2em; text-align: right; }
.ts-opt.on { border-color: var(--navy); color: var(--navy); background: #EEF3F8; box-shadow: 0 1px 3px rgba(80, 55, 30, .12); }
.ts-opt:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.ts-ico { font-weight: 800; font-size: .95rem; }
/* The Aa sheet (a <dialog>), from the bottom on phones. */
dialog.ts-sheet { border: 0; border-radius: 20px 20px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; margin: auto auto 0; background: var(--bg); color: var(--ink); }
dialog.ts-sheet::backdrop { background: rgba(43, 36, 32, .45); }
dialog.ts-sheet h2 { margin-top: 0; }
.ts-sheet-tip { margin: 0 0 12px; }
@media (prefers-reduced-motion: no-preference) {
  dialog.ts-sheet[open] { animation: ts-up .18s ease-out; }
  @keyframes ts-up { from { transform: translateY(16px); opacity: .6; } to { transform: none; opacity: 1; } }
}
/* The one-time "Is the text easy to read?" card on Tonight. */
.ts-prompt { border-color: var(--navy); }
.ts-prompt-title { font-weight: 750; font-size: 1.15rem; margin: 0 0 .3em; }
.ts-prompt-title span { display: inline-block; min-width: 1.8em; font-weight: 800; color: var(--navy); }
.ts-prompt-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }

/* "How this works": one tap away, closed by default. */
details.how { margin: 10px 0; }
details.how > summary { cursor: pointer; color: var(--navy); font-weight: 650; min-height: max(48px, 2.7rem);
  display: flex; align-items: center; }
details.how p { margin: 4px 0 8px; }
.control-tips { margin: 6px 0 10px; padding-left: 1.1em; }
.control-tips li { margin: 6px 0; }

/* Cook around */
.cook-around { margin: 4px 0 12px; }
.cook-around .section-title { margin: 6px 0 6px; }
.cook-around .chips { padding-bottom: 6px; }
.cook-around .chip { white-space: normal; }
.more-chips > summary { cursor: pointer; color: var(--navy); font-weight: 650; min-height: max(48px, 2.7rem); display: flex; align-items: center; }
.around-note { margin: 4px 0 8px; }

/* Show me other recipes */
.others-form { margin: 18px 0 8px; }
.others-btn { min-height: max(56px, 3.1rem); font-size: 1.05rem; }
.others-note { margin: 14px 0 0; }

/* Voice: a big microphone next to the box (or full width). */
.search-row { display: flex; gap: 8px; align-items: stretch; }
.search-row input { flex: 1; min-width: 0; }
.mic-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: var(--tap); min-height: var(--tap); border-radius: 14px; border: 2px solid var(--navy);
  background: var(--card); color: var(--navy); font: inherit; font-weight: 650; cursor: pointer; padding: 0 12px; }
.mic-btn[hidden] { display: none; }
.mic-btn.wide { width: 100%; margin: 8px 0 4px; }
.mic-btn .mic-ico { width: 1.4em; height: 1.4em; }
.mic-btn.listening { background: var(--sky); border-color: var(--sky); color: #fff; }
.mic-btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .mic-btn.listening { animation: mic-pulse 1.4s ease-in-out infinite; }
  @keyframes mic-pulse { 50% { box-shadow: 0 0 0 8px rgba(232, 102, 61, .18); } }
}
.voice-status { margin: 4px 0 8px; color: #4E443C; }

/* Store links (v23): product photo, chosen size, other stores. */
.store-thumb { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 10px; object-fit: contain; background: #fff;
  border: 1px solid #ECE5DA; }
.list-item.has-thumb { gap: 10px; }
.store-pick { margin: -4px 0 8px 48px; color: var(--muted, #6B6157); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.store-pick .quiet-link, .store-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 6px; }
.tag.soft { background: #F3EEE6; color: #5B5148; border-radius: 999px; padding: 2px 10px; font-size: .8rem; }
.other-stores h2 { display: flex; align-items: center; gap: 8px; }
.other-stores .kitems li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.store-food .store-opt { border-top: 1px solid #ECE5DA; padding: 10px 0; }
.store-food .store-opt-head { display: flex; gap: 12px; align-items: flex-start; }
.store-food .store-opt-head p { margin: 0 0 4px; overflow-wrap: anywhere; }
.link-form label { display: flex; flex-direction: column; gap: 4px; }
.link-form input { min-height: 48px; }
.price-src { color: var(--muted, #6B6157); }
.ai-offer { border: 1px dashed #D9C6A8; background: #FFFBF4; }
.tag.ai { background: #F6EBD9; color: #6B4E22; border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.ai-badge-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }

/* People who ask their phone for less motion get none (build standards, v23). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.faq h3 { font-size: 1.02rem; margin: 14px 0 4px; }
.faq p { margin: 0 0 6px; }

/* v24: one part per store on the shopping list; store picker */
.store-sec.multi { margin-top: 18px; padding-top: 6px; border-top: 2px solid var(--line); }
.store-head { display: flex; align-items: center; gap: 8px; }
.aisle-head { font-size: 1rem; color: var(--muted); margin: 14px 0 6px; }
.store-note { margin: 4px 0 10px; }
.stores-form select { min-height: 52px; }
.left-after .left-list { list-style: none; padding: 0; margin: 8px 0 0; }
.left-after .left-list li { padding: 10px 0; border-top: 1px solid var(--line); }
.left-after .left-list li:first-child { border-top: 0; }
.left-after .left-text { font-weight: 600; }
.useup-ideas { margin-top: 6px; }
.useup-why { color: var(--green, #2F6B4F); }

/* v25: Plan My Week (start screen, three questions, swap "things to buy" lines) */
.usual-form { margin: 0 0 6px; }
.usual-btn, .mode-btn { flex-direction: column; justify-content: center; gap: 2px; white-space: normal; text-align: center; line-height: 1.2; }
.usual-btn { min-height: 84px; }
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 14px; }
.mode-grid > form { margin: 0; display: flex; min-width: 0; }
.mode-btn { width: 100%; min-height: 104px; padding: 10px 8px; position: relative; }
.mode-btn.last { background: #EEF3F0; }
.mode-name { font-size: 1.15rem; font-weight: 700; }
.mode-sub { font-size: .92rem; font-weight: 500; opacity: .85; }
.mode-last { font-size: .8rem; font-weight: 600; color: var(--muted); }
.btn.primary .mode-sub { opacity: .95; }
.ask-step { margin: 10px 0 4px; }
.ask-q { font-size: 1.45rem; margin: 4px 0 6px; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.matter-list { display: grid; gap: 6px; margin: 6px 0 4px; }
.big-check { min-height: 52px; font-size: 1.05rem; border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; }
.big-check:has(input:checked) { border-color: var(--navy); }
.ask-day { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 12px 0 6px; }
.ask-day legend { padding: 0; font-size: 1.05rem; }
.time-chips { padding-bottom: 6px; }
.eat-count { display: flex; align-items: center; gap: 12px; min-height: var(--tap); margin: 0; }
.eat-count select { width: 110px; }
.extra-line { font-weight: 600; font-size: .95rem; }
.extra-line.none { color: var(--green, #2F6B4F); }
.more-choices > summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.savings-line { margin: 6px 0 10px; }

/* v26: Search my sources ("From your recipe sites" on the Recipes page) */
.from-sites { margin-top: 28px; }
.from-sites-h { font-size: 1.3rem; margin: 0 0 8px; }
.from-sites .site-name { font-size: 1.1rem; margin: 18px 0 8px; }
.from-sites .tile-link { min-height: 48px; }

/* v27: "Recipe may not match" note and the small "Something's wrong" link (collapsed). */
.match-note { color: var(--muted); }
.report-recipe { margin: 4px 0 18px; }
.report-recipe > summary { color: var(--muted); font-size: .9rem; cursor: pointer; min-height: max(48px, 2.7rem); display: flex; align-items: center; }
.report-choices { border: 0; padding: 0; margin: 6px 0 10px; display: grid; gap: 4px; }
.report-choices label.check { min-height: max(48px, 2.7rem); display: flex; align-items: center; gap: 10px; }
.voice-row { display: flex; gap: 8px; align-items: flex-start; }
.voice-row textarea { flex: 1; }
/* v28: "Adapted from <Site>" credit under a recipe card (outside the card link) */
.tile .tile-credit { margin: -6px 12px 12px; font-size: .85rem; color: var(--muted); line-height: 1.35; }
.tile .tile-credit a { color: inherit; text-decoration: underline; display: inline-block; min-height: 24px; }
.side-photo { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; background: var(--line); }

/* v29: "From your recipe sites" loading you can't miss: calm spinner, dark text, each site's
   status, placeholder cards. Reduced motion: a still hourglass and still grey cards. */
.fs-looking, .fs-done { color: var(--ink); font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; }
.fs-spinner { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--navy); }
.fs-spinner.small { width: 16px; height: 16px; border-width: 2px; }
.fs-still-icon { display: none; }
.fs-site-list { list-style: none; padding: 0; margin: 0 0 10px; color: var(--ink); }
.fs-site-list li { padding: 3px 0; }
.fs-site-list .fs-st { color: #4E443C; }
.fs-site-list li.done .fs-st { color: var(--ok); font-weight: 600; }
.fs-slow { color: var(--ink); margin: 0 0 10px; }
.fs-ghost { min-height: 220px; padding: 0 0 12px; }
.fs-ghost-img { aspect-ratio: 1 / 1; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--line-soft); }
.fs-ghost-line { height: 12px; margin: 12px 12px 0; border-radius: 6px; background: var(--line-soft); }
.fs-ghost-line.short { width: 55%; }
.fs-top-note { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 14px; margin: 4px 0 8px;
  border-radius: var(--r-pill); background: var(--cream); color: var(--ink); text-decoration: none; font-weight: 600; }
.fs-top-note:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.fs-top-note.done .fs-spinner, .fs-top-note.done .fs-still-icon { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .fs-spinner { animation: fs-spin 1.1s linear infinite; }
  @keyframes fs-spin { to { transform: rotate(360deg); } }
  .fs-ghost-img, .fs-ghost-line { background: linear-gradient(90deg, var(--line-soft) 25%, var(--cream) 50%, var(--line-soft) 75%);
    background-size: 200% 100%; animation: fs-shimmer 1.6s ease-in-out infinite; }
  @keyframes fs-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .fs-spinner { display: none; }
  .fs-still-icon { display: inline; }
}

/* v30: password box with Show / Hide; reset-link button under a person */
.passbox { display: flex; gap: 8px; align-items: stretch; }
.passbox input { flex: 1; min-width: 0; }
.passbox .passtoggle { min-height: 48px; min-width: 76px; flex: none; }
.reset-form { margin: 4px 0 12px; }
.reset-form .btn { min-height: 48px; }
/* v30: backups warning (Admin) */
.warn-card { border: 2px solid var(--warn); background: #FFF7E6; }
.warn-line { color: var(--warn); font-weight: 600; margin: 4px 0 10px; }
.warn-line a { color: inherit; }
.big-line { font-size: 1.1rem; }

/* v31: step amounts follow servings */
.steps-scaled-note { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .just-scaled { animation: just-scaled 1.2s ease-out 1; }
  @keyframes just-scaled { from { background: #FFF1C9; } to { background: transparent; } }
}

/* v32: recipe page order - photo, title, quick facts, then Ingredients right away. */
.recipe-hero { aspect-ratio: 16/9; max-height: 360px; }
.hero-img.recipe-hero { height: auto; }
@media (max-width: 600px) { .recipe-hero { max-height: 34vh; } }
h1.recipe-title { margin: 10px 0 6px; }
.recipe-title + .facttiles, .facttiles { margin: 8px 0 6px; }
.facttiles { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
.facttiles li { padding: 6px 4px; border-radius: 12px; }
.ft-icon { font-size: 1.1rem; }
.recipe-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 0; }
.ing-section .ing-head h2 { margin-top: 14px; }
/* "How many people?": one clear card, big equal buttons, the number large */
.serves-card { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 6px 0 12px; }
.serves-h { margin: 0 0 8px; font-size: 1.05rem; }
.serves-card .serves { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: center; margin: 0; }
.serves-card .step-btn { width: 100%; height: 56px; min-height: 48px; border-radius: 14px; font-size: 1.8rem; font-weight: 700; }
.serves-card .serves-n { min-width: 0; text-align: center; font-size: 2rem; line-height: 1; color: var(--navy); }
.serves-card .serves-n strong { font-weight: 800; }
.serves-note { font-size: .9rem; color: var(--muted); margin: 8px 0 0; }
.serves-card details.how { margin-top: 4px; }
/* Taste guess: small, below the steps, closed until opened */
.taste-sec { margin: 18px 0 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.taste-sec > summary { cursor: pointer; font-weight: 700; min-height: 48px; display: flex; align-items: center; }
.taste-sec .taste { margin: 2px 0 8px; }
.taste-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; margin: 1px 0; font-size: .85rem; color: var(--muted); line-height: 1.3; }
.taste-row .bar { height: 6px; background: #F3EDE4; border-radius: 99px; overflow: hidden; }
.taste-row .bar span { display: block; height: 100%; background: #E9A27F; border-radius: 99px; }
.about-dish h2 { margin-top: 18px; }
.taste-sec > summary, .ing-group > summary { list-style: none; gap: 10px; }
.taste-sec > summary::-webkit-details-marker, .ing-group > summary::-webkit-details-marker { display: none; }
.taste-sec > summary::before, .ing-group > summary::before { content: "›"; flex: none; font-size: 1.4rem; line-height: 1; color: var(--navy); transition: transform .15s; }
.taste-sec[open] > summary::before, .ing-group[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .taste-sec > summary::before, .ing-group > summary::before { transition: none; } }
/* v32 ingredient groups: the Main ingredient first; spices as one short line you can open.
   v34.2: the main is a normal line under its own "Main ingredient" header (no peach box, no tag). */
.ing-group-h { font-size: .95rem; color: var(--muted); margin: 12px 0 4px; font-weight: 700; }
/* v34.2 Shopping tip under a vague ingredient: one calm line, rem/em so Text size scales it, AAA (8:1) */
.ing-list .ing-tip, .list-item .ing-tip { display: block; flex-basis: 100%; font-size: .88em; color: #574B42; line-height: 1.4; margin-top: 2px; clear: both; }
.ing-tip-label { font-weight: 700; }
.ing-group { margin: 12px 0 4px; border-top: 1px solid var(--line); padding-top: 4px; }
.ing-group > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; line-height: 1.4; }
.spice-preview { color: var(--muted); font-weight: 400; }
.ing-group[open] .spice-preview { display: none; }
/* v34 Who can plan meals (Family page): one row per person, a big On/Off button */
.planner-list { list-style: none; margin: 8px 0 0; padding: 0; }
.planner-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.planner-name { display: flex; flex-direction: column; min-width: 0; flex: 1 1 10em; overflow-wrap: anywhere; }
.planner-row form { margin: 0; flex: 0 0 auto; }
.switch-btn { min-width: 6em; min-height: 48px; }
/* v34 Share a recipe: the Share button by the heart, the Share card, a family idea on Tonight */
.recipe-actions .share-jump { min-height: 48px; padding: 0 16px; width: auto; }
.share-sec h2 { margin: 0 0 8px; }
.share-sec form { margin: 0 0 10px; }
.share-sec input[type="text"] { margin-bottom: 10px; }
.share-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: start; }
.share-card .share-photo img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; display: block; }
.share-card .btnrow, .share-card > p { grid-column: 1 / -1; }
.share-note { font-style: italic; margin: 4px 0 0; overflow-wrap: anywhere; }
.share-status-title { margin: 0 0 6px; overflow-wrap: anywhere; }
.share-answers { list-style: none; margin: 0 0 10px; padding: 0; }
.share-answers li { padding: 2px 0; }
.ideas-me > summary { cursor: pointer; min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; }
.ideas-me .recipe-grid { margin-top: 10px; }
@media (max-width: 360px) { .share-card { grid-template-columns: minmax(0, 1fr); } .share-card .share-photo img { width: 100%; height: 140px; } }
html.ts-big .share-card { grid-template-columns: minmax(0, 1fr); }
html.ts-big .share-card .share-photo img { width: 100%; height: 160px; }
.bbq-chip { margin: 2px 0 8px; display: inline-flex; }
.share-card .btnrow .btn { font-size: 1rem; min-height: 52px; }

/* v34.3 Skip this day: a calm "Skipped · No dinner planned" row with Add a meal / Undo (48px targets) */
.skipped-day .name { font-weight: 500; }
.skip-actions { margin-top: 10px; }
.skip-actions .btn, .day-option-btns .btn.small { min-height: max(48px, 2.75rem); }
.skip-note { margin: 6px 0 0; color: var(--ink); }
.time-chips .chip.no-dinner { border-style: dashed; }

/* v34.3 Start the week over: also at the bottom of Week, in today's Day options and on Tonight */
.start-over-foot { margin-top: 18px; }
.start-over-foot .btn, .start-over-tonight { min-height: var(--tap); }
.start-over-tonight { margin-top: 12px; }
.start-over-text { font-size: 1.1rem; line-height: 1.4; }
.day-options .btn.block { margin-top: 8px; }

/* v34.3 Use what's in my fridge: a big, clear toggle right under the four ways to plan */
.mode-form { margin: 0 0 14px; }
.fridge-toggle { min-height: 72px; padding: 12px 14px; border: 2px solid var(--navy); border-radius: 14px; gap: 14px; position: relative; }
.fridge-toggle input { width: 28px; height: 28px; flex: none; }
.fridge-toggle.on, .fridge-toggle:has(input:checked) { background: #EEF3F0; }
.fridge-text { display: flex; flex-direction: column; gap: 2px; }
.fridge-name { font-weight: 650; font-size: 1.1rem; }
.fridge-toggle .mode-last { position: static; margin-left: auto; }
.fridge-all { margin: 10px 0 12px; }
.fridge-chips .chip { min-height: 48px; }
.fridge-uses { color: var(--ink); margin-top: 2px; }

/* v35 free public recipe pages (/recipes, /recipes/<slug>, /recipes/category/<slug>): big type, 48px+ taps,
   AAA text colors (#2B2420 / #3F352E on the cream page), no hover-only info. */
.pub { font-size: 1rem; }
.pub-lead { font-size: 1.1rem; color: #3F352E; margin: 0 0 12px; }
.pub-note, .pub-count { color: #3F352E; font-size: .95rem; }
.pub-crumbs { font-size: .95rem; color: #3F352E; margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pub-crumbs a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; }
.pub-search { display: flex; gap: 8px; margin: 12px 0; }
.pub-search input { flex: 1; min-height: 52px; font-size: 1rem; padding: 0 14px; border: 2px solid #5E544C; border-radius: 14px; color: var(--ink); background: #fff; }
.pub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.pub-chip { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--navy);
  color: var(--navy); background: #fff; font-weight: 650; text-decoration: none; }
.pub-chip.on { background: var(--navy); color: #fff; }
.pub-grid { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pub-tile a { display: block; color: var(--ink); text-decoration: none; min-height: 48px; }
.pub-tile img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; background: var(--line); }
.pub-tile .t { display: block; padding: 10px 12px 2px; font-weight: 650; line-height: 1.3; }
.pub-tile .m { display: block; padding: 0 12px 12px; color: #3F352E; font-size: .9rem; }
.pub-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pub-actions .btn { min-height: 52px; }
.pub-invite { display: none; border: 2px solid var(--navy); }
.pub-invite:target { display: block; }
.pub-close { display: inline-flex; align-items: center; min-height: 48px; margin-top: 6px; font-weight: 600; }
.pub-copy { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.pub-copy label { width: 100%; font-weight: 600; }
.pub-copy input { flex: 1; min-width: 0; min-height: 52px; padding: 0 12px; border: 2px solid #5E544C; border-radius: 14px; font-size: .95rem; }
.pub-social a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; font-weight: 650; }
.pub-faq h3 { font-size: 1.05rem; margin: 14px 0 4px; }
.pub-faq p { margin: 0 0 6px; color: var(--ink); }
.pub-credit { margin-top: 20px; }
.ts-pub { position: relative; margin-left: auto; }
.ts-pub summary { list-style: none; cursor: pointer; }
.ts-pub summary::-webkit-details-marker { display: none; }
.ts-pub-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: #fff; border: 2px solid var(--line);
  border-radius: 14px; padding: 8px; display: grid; gap: 6px; min-width: 210px; box-shadow: 0 4px 14px rgba(80, 55, 30, .12); }
.ts-pub-menu .ts-opt { min-height: 52px; text-align: left; padding: 0 14px; border-radius: 12px; border: 2px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.ts-pub-menu .ts-opt.on { border-color: var(--navy); }
/* v35 AAA on public pages: links and the main button one shade darker (#24543D on cream is over 8:1). */
.pub a:not(.btn):not(.pub-chip) { color: #24543D; }
.pub .btn.primary, .pub .pub-chip.on { background: #24543D; border-color: #24543D; color: #fff; }
.pub .btn.quiet, .pub .pub-chip { color: #24543D; border-color: #24543D; }
.pub-page { --muted: #3F352E; }   /* v35: every muted line on the free recipe pages reads at AAA (11:1) */
.pub-page .site-footer, .pub-page .site-footer a { color: #3F352E; }
.pub-page .howto-n { background: #24543D; }