:root {
  --bg: #f4f7f3;
  --card: #fff;
  --ink: #183024;
  --muted: #5c6d63;
  --line: #cfd9d2;
  --accent: #176b45;
  --accent-dark: #0f4f33;
  --soft: #e5f3eb;
  --warning: #fff3d8;
  --danger: #9c2f2f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); }
body { margin: 0; min-width: 0; }
button, input, select, textarea { font: inherit; font-size: 16px; }
button, a, input, select, textarea, summary { touch-action: manipulation; }
.page { width: min(100%, 46rem); margin: 0 auto; padding: 1rem 1rem 8rem; }
.hero { padding: 2rem 0 1rem; }
h1, h2, p { overflow-wrap: anywhere; }
h1 { margin: .2rem 0; line-height: 1.1; }
.eyebrow { margin: 0; color: var(--accent); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.person-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
.person-card { min-height: 6.5rem; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; border: 2px solid var(--line); border-radius: 1rem; background: var(--card); color: var(--ink); text-decoration: none; font-size: 1.5rem; font-weight: 800; box-shadow: 0 4px 14px rgb(20 50 30 / 8%); }
.person-card--recent { border-color: var(--accent); }
.person-card small { color: var(--accent); font-size: .75rem; }
.prepare-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.prepare-links a, .summary-filters a { min-height: 44px; display: inline-flex; align-items: center; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--accent-dark); font-weight: 750; text-decoration: none; }
.planner-header { position: sticky; z-index: 10; top: 0; display: flex; justify-content: space-between; gap: 1rem; margin: -1rem -1rem 1rem; padding: .8rem 1rem; background: rgb(244 247 243 / 96%); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.planner-header h1 { font-size: 1.8rem; }
.change-person { display: inline-flex; min-height: 44px; align-items: center; color: var(--accent-dark); font-weight: 700; }
.week-range { margin: .25rem 0 0; color: var(--muted); font-weight: 650; }
.person-badge { flex: 0 0 3rem; width: 3rem; height: 3rem; display: grid; place-items: center; align-self: center; border-radius: 50%; background: var(--accent); color: white; font-size: 1.4rem; font-weight: 800; }
.notice { padding: 1rem; margin: 1rem 0; border-radius: .8rem; background: var(--soft); border: 1px solid var(--accent); }
.notice--error { background: #fff0f0; border-color: var(--danger); color: #661d1d; }
.notice h2 { margin-top: 0; font-size: 1.1rem; }
.copy-tools { display: grid; gap: .65rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: white; }
.copy-tools h2, .copy-tools p { margin: 0; }
.secondary-button, .copy-day-button { min-height: 44px; border: 1px solid var(--accent); border-radius: .7rem; background: white; color: var(--accent-dark); font-weight: 800; }
.copy-day-button { width: 100%; margin-top: 1rem; }
.include-notes { min-height: 44px; display: flex; align-items: center; gap: .5rem; }
.include-notes input { width: 1.25rem; height: 1.25rem; }
.copy-message { min-height: 1.3rem; color: var(--accent-dark); font-weight: 700; }
.day-stack { display: grid; gap: 1rem; }
.day-card { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 4px 16px rgb(20 50 30 / 7%); overflow: hidden; }
.day-card summary { min-height: 64px; cursor: pointer; padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; }
.day-card summary::-webkit-details-marker { display: none; }
.day-card summary span:first-child { display: grid; }
.day-card summary small { color: var(--muted); margin-top: .15rem; }
.state-pill { padding: .35rem .6rem; border-radius: 999px; background: var(--soft); font-size: .75rem; font-weight: 800; text-align: center; }
.day-content { padding: 0 1rem 1rem; border-top: 1px solid var(--line); }
fieldset { min-width: 0; margin: 1rem 0; padding: 0; border: 0; }
legend, label > span:first-child { display: block; margin-bottom: .45rem; font-weight: 800; }
.decision-group, .main-toggle { display: grid; gap: .55rem; }
.choice { min-height: 48px; display: flex; align-items: center; gap: .65rem; padding: .65rem; border: 1px solid var(--line); border-radius: .7rem; background: white; }
.choice input, .food-chip input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; accent-color: var(--accent); }
.choice span { margin: 0; display: grid; }
.choice small { color: var(--muted); font-weight: 500; }
.choice--nothing { background: var(--warning); }
.choice--no-main { background: #eef4ff; }
.category { padding-top: .3rem; border-top: 1px solid var(--line); }
.food-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.food-chip { min-height: 44px; max-width: 100%; display: flex; align-items: center; gap: .45rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: #fafcfb; }
.food-chip:has(input:checked) { border-color: var(--accent); background: var(--soft); }
.food-chip span { overflow-wrap: anywhere; }
.empty-foods { margin: .2rem 0; color: var(--muted); font-size: .9rem; }
.new-food { display: grid; margin-top: .75rem; }
input[type="text"], input:not([type]), select, textarea { width: 100%; min-height: 48px; padding: .7rem; border: 1px solid #9caca2; border-radius: .65rem; background: white; color: var(--ink); }
textarea { resize: vertical; }
.notes-field { display: grid; margin: 1rem 0; }
.notes-field > small { justify-self: end; color: var(--muted); }
.destructive-note { padding: .8rem; background: var(--warning); border-radius: .6rem; color: #5d3b00; }
.nothing-section label { display: grid; margin-top: 1rem; }
.review-panel { margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: white; }
.review-panel h2 { margin-top: 0; }
.review-panel ul { padding-left: 1.25rem; }
.save-bar { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; gap: .25rem; padding: .75rem max(1rem, calc((100vw - 46rem) / 2 + 1rem)); background: white; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgb(20 50 30 / 10%); }
.primary-button { min-height: 52px; border: 0; border-radius: .75rem; background: var(--accent); color: white; font-weight: 850; }
.primary-button:hover, .primary-button:focus-visible { background: var(--accent-dark); }
.save-bar small { text-align: center; color: var(--muted); }
:focus-visible { outline: 3px solid #e19b28; outline-offset: 2px; }
[hidden] { display: none !important; }
.error-page { margin-top: 3rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: white; }
.error-page small { display: block; margin-top: 1rem; color: var(--muted); }
.primary-link { min-height: 48px; display: inline-flex; align-items: center; margin-top: 1rem; padding: .7rem 1rem; border-radius: .7rem; background: var(--accent); color: white; font-weight: 800; text-decoration: none; }
.privacy-note { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.prep-hero { padding-bottom: .25rem; }
.weekend-hint { padding: .7rem; background: var(--warning); border-radius: .6rem; }
.prep-grid, .week-prep, .summary-grid { display: grid; gap: 1rem; }
.prep-person, .prep-day-card, .grocery-summary { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: white; }
.prep-person h2, .prep-day-card > h2 { margin-top: 0; }
.prep-day-card > h2 { display: flex; justify-content: space-between; gap: .5rem; }
.prep-day-card > h2 small { color: var(--muted); }
.prep-day-card .prep-person { margin-top: .75rem; box-shadow: none; }
.prep-state { font-weight: 850; color: var(--accent-dark); }
.prep-state--missing { color: var(--danger); }
.prep-state--nothing { color: #755000; }
.packing-list { margin: 0; }
.packing-list div { display: grid; grid-template-columns: minmax(6rem, .45fr) 1fr; gap: .6rem; padding: .4rem 0; border-top: 1px solid var(--line); }
.packing-list dt { font-weight: 800; }
.packing-list dd { margin: 0; overflow-wrap: anywhere; }
.prep-notes { margin-top: .3rem; padding-top: .65rem !important; }
.grocery-summary { margin-top: 1rem; }
.summary-heading { display: grid; gap: .75rem; }
.summary-heading h2 { margin-top: .2rem; }
.summary-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.summary-grid article { min-width: 0; padding: .8rem; border-radius: .7rem; background: var(--bg); }
.summary-grid h3 { margin-top: 0; }
.summary-grid ul { margin: 0; padding: 0; list-style: none; }
.summary-grid li { display: flex; justify-content: space-between; gap: .75rem; padding: .4rem 0; border-top: 1px solid var(--line); }
.summary-grid li span { overflow-wrap: anywhere; }
.summary-grid li strong { white-space: nowrap; }

@media (min-width: 42rem) {
  .person-grid { grid-template-columns: repeat(3, 1fr); }
  .person-card { flex-direction: column; justify-content: center; text-align: center; }
  .decision-group { grid-template-columns: repeat(3, 1fr); }
  .copy-tools { grid-template-columns: 1fr auto; align-items: center; }
  .copy-tools .include-notes, .copy-tools .copy-message { grid-column: 1 / -1; }
  .prep-grid { grid-template-columns: repeat(3, 1fr); }
  .week-prep { grid-template-columns: repeat(2, 1fr); }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
}