@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;0,700;1,500&family=Karla:wght@400;500;600;700&display=swap');

:root {
  --green: #2f6f4f;
  --green-dark: #1f4d36;
  --green-deep: #142d21;
  --green-tint: #eef3ee;
  --gold: #b8863d;
  --cream: #f6f1e7;
  --card: #fdfbf5;
  --ink: #222b24;
  --muted: #5c6b62;
  --border: #e3ddce;
  --shadow: 0 1px 2px rgba(20, 45, 33, 0.04), 0 10px 28px rgba(20, 45, 33, 0.07);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Karla", -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  font-size: 16px;
}

h1, h2, h3 {
  font-family: "Lora", Georgia, serif;
  color: var(--green-dark);
  text-wrap: balance;
}

/* ---- Shell / width ------------------------------------------------- */

.wrap {
  max-width: min(1180px, 94vw);
  margin: 0 auto;
  padding: 40px 0 90px;
}

.wrap.narrow { max-width: min(640px, 94vw); }

/* ---- Fixed page-background photo/collage, blurs as the page scrolls -- */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  filter: blur(0px);
  transition: filter 0.2s ease-out;
  will-change: filter;
}
.page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(246, 241, 231, 0.74);
}
.page-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-bg.collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
}
@media (max-width: 600px) {
  .page-bg.collage {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

.nav {
  position: relative;
  background: linear-gradient(120deg, var(--green-deep) 0%, var(--green-dark) 55%, var(--green) 100%);
  color: var(--cream);
}
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 24px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(20, 45, 33, 0.16), rgba(20, 45, 33, 0));
}
.nav-inner {
  position: relative;
  max-width: min(1180px, 94vw);
  margin: 0 auto;
  padding: 18px 0;
  font-family: "Lora", Georgia, serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-inner a { color: var(--cream); text-decoration: none; }
.nav-right-cluster {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-login-link {
  font-family: "Karla", sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}
.nav-login-link:hover { background: rgba(255, 255, 255, 0.1); }
/* EN / ES sat 2px apart with 8px of side padding, so the two pills read as
   one blob and the active one's background ran straight into its
   neighbour. The gap has to clear the pill background, not just the
   glyphs. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}
.lang-switch a { padding: 5px 12px; border-radius: 999px; opacity: 0.55; }
.lang-switch a.active { opacity: 1; background: rgba(255, 255, 255, 0.15); }
.lang-switch a:hover { opacity: 1; }
@media (max-width: 600px) {
  /* The cluster drops out of absolute positioning here and becomes a flex
     sibling of the logo. Without wrapping it sat on the logo's line and
     the EN pill ran straight into the wordmark — width:100% forces it onto
     its own row, which is what the margin-top always assumed. */
  .nav-inner { flex-wrap: wrap; gap: 4px 14px; }
  .nav-right-cluster {
    position: static;
    transform: none;
    margin-top: 8px;
    justify-content: center;
    width: 100%;
  }
  .nav-login-link { padding: 5px 12px; font-size: 0.8rem; }
}

/* ---- Account menu dropdown, top-left of nav (logged-in pages only) --- */
.account-menu {
  position: relative;
  font-family: "Karla", sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
}
.account-menu summary {
  cursor: pointer;
  list-style: none;
  color: var(--cream);
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
}
.account-menu summary::-webkit-details-marker,
.account-menu summary::marker { display: none; content: ""; }
.account-menu[open] summary { background: rgba(255, 255, 255, 0.1); }
.account-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  min-width: 190px;
  overflow: hidden;
  z-index: 20;
}
.account-menu-panel a {
  display: block;
  padding: 10px 14px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.88rem;
}
.account-menu-panel a:hover { background: var(--green-tint); }
.account-menu-panel a + a { border-top: 1px solid var(--border); }

/* ---- Simple centered message (signup confirmation, etc.) ------------ */

.hero h1 { font-size: 2.1rem; margin-bottom: 12px; }
.hero p { font-size: 1.05rem; color: var(--muted); max-width: 46ch; margin: 0 auto 24px; }

/* ---- Hero (landing page) -------------------------------------------- */

.hero-grid {
  padding: 48px 0 16px;
}

.hero-copy h1 {
  font-size: 2.9rem;
  line-height: 1.08;
  margin: 0 0 18px;
}

.hero-copy p {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 26px;
}

.price-tag {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-deep) 100%);
  border: 1px solid var(--green-deep);
  color: var(--cream);
  padding: 11px 22px 11px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 26px;
  box-shadow: 0 10px 28px rgba(20, 45, 33, 0.28), 0 0 0 4px var(--green-tint);
  animation: price-tag-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.price-tag .amount {
  font-family: "Lora", serif;
  font-size: 1.7em;
  font-weight: 800;
  color: var(--gold-bright, #e0aa4e);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
.price-tag::after {
  /* A small "sale sticker" accent so the badge reads as a price worth
     noticing, not just a label — a plain pill blended into the hero copy
     and didn't earn a second look. */
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  background: var(--gold, #b8863d);
  border: 2px solid var(--cream);
  border-radius: 50%;
}
@keyframes price-tag-in {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .price-tag { animation: none; }
}

.btn {
  display: inline-block;
  background: var(--green);
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 10px;
  font-family: "Karla", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(47, 111, 79, 0.28);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(31, 77, 54, 0.32); }
.btn:active { transform: translateY(0); }

.how-it-works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 64px;
}

.step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 22px;
  box-shadow: var(--shadow);
}

.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-dark);
  font-family: "Lora", serif;
  font-weight: 700;
  margin-bottom: 14px;
}

.step h3 { margin: 6px 0 8px; font-size: 1.08rem; }
.step p { margin: 0; font-size: 0.94rem; color: var(--muted); }

/* ---- Forms ------------------------------------------------------------ */

form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow);
}

.field { margin-bottom: 22px; }

.field label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.field .hint {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 8px;
}

input[type="text"],
input[type="number"],
select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-family: "Karla", sans-serif;
  font-size: 1rem;
  background: #fffdfa;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-tint);
}

.row { display: flex; gap: 12px; }
.row .field { flex: 1; }

.checkbox-group { display: flex; flex-wrap: wrap; gap: 14px; }
.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.checkbox-group input { accent-color: var(--green); }

.submit-row { text-align: center; margin-top: 8px; }

/* Two-column shell for the questionnaire: form + a reassurance rail */
.form-shell {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: start;
}
.form-aside {
  background: var(--green-deep);
  color: #e8efe9;
  border-radius: 16px;
  padding: 30px 26px;
  position: sticky;
  top: 28px;
}
.form-aside h3 {
  color: white;
  font-size: 1.15rem;
  margin: 0 0 14px;
}
.form-aside ul { margin: 0; padding-left: 20px; }
.form-aside li { margin-bottom: 12px; font-size: 0.94rem; color: #cfe0d4; }
.form-aside li strong { color: white; }
.aside-announcement {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---- Content cards ------------------------------------------------- */

.summary-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

.nutrition-toggle {
  cursor: pointer;
  font-weight: 700;
  color: var(--green-dark);
  font-size: 0.9rem;
  margin-top: 12px;
}
.nutrition-toggle::-webkit-details-marker { display: none; }
.nutrition-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.nutrition-subhead {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  margin: 16px 0 8px;
}
.nutrition-subhead:first-child { margin-top: 0; }
.nutrition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px 18px;
}
.nutrition-grid div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.86rem;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
  font-variant-numeric: tabular-nums;
}
.nutrition-note {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 14px;
  line-height: 1.5;
}

/* Single column: meals first, then daily target / pantry / shopping list
   below them (all in .app-side) — not a sidebar. A shopping list makes
   more sense read after the meals that produced it than squeezed beside
   them in a narrow column. */
.app-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.app-main { min-width: 0; }
.app-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.meal-nutrition-toggle {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-top: 8px;
}
.meal-nutrition-toggle::-webkit-details-marker { display: none; }
.meal-nutrition-unavailable {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: italic;
  margin-top: 8px;
}

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

.day-card summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Lora", serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--green-dark);
}
.day-card summary::-webkit-details-marker { display: none; }
.day-card summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--green);
  margin-left: 12px;
}
.day-card[open] summary::after { content: "\2212"; }

.day-card .day-meta {
  font-family: "Karla", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-left: auto;
  margin-right: 12px;
}

.day-card .day-body { margin-top: 16px; }

.meal {
  border-top: 1px solid var(--border);
  padding: 16px 0;
}
.meal:first-of-type { border-top: none; padding-top: 4px; }

.meal .slot {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-weight: 700;
}

.meal h3 { margin: 5px 0 6px; font-size: 1.12rem; }

.macros {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.ingredients {
  font-size: 0.92rem;
  margin-bottom: 8px;
}

/* Shown in place of a recipe whose content couldn't be re-fetched. Quiet
   on purpose — the plan is fine, one card's text is missing, and an alarm
   would overstate it. */
.recipe-unavailable {
  font-size: 0.9rem;
  color: var(--muted);
  background: var(--green-tint);
  border-left: 3px solid var(--border);
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.steps {
  font-size: 0.92rem;
  padding-left: 18px;
  color: var(--ink);
}

.grocery-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: var(--shadow);
}

.grocery-section { margin-bottom: 18px; }
.grocery-section:last-of-type { margin-bottom: 0; }

.grocery-section-title {
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  color: var(--green);
  font-weight: 700;
  margin: 0 0 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 7px;
}

.grocery-list {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.grocery-list li {
  font-size: 0.92rem;
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px dashed var(--border);
}
.grocery-list li:last-child { border-bottom: none; }

/* An editable row stacks instead: the item line, then its edit controls
   directly underneath it. Squeezing the controls into the right-hand
   column left them nearly unusable on a phone. */
.grocery-list li.grocery-row {
  display: block;
  padding: 7px 0;
}
.grocery-row-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.grocery-package-note {
  color: var(--muted);
  font-weight: 400;
}
/* The gap between what you have to buy and what the recipes use — the
   whole reason the pantry exists, so it sits under the item rather than
   being crammed into the row. */
.grocery-row-note {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
  padding-right: 60px;
}
.grocery-row-right {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.grocery-edit-btn {
  background: none;
  border: none;
  padding: 2px 0;
  font: inherit;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
}
.grocery-edit-btn[aria-expanded="true"] { color: var(--green-dark); }

.grocery-edit-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel-tint, rgba(47, 111, 79, 0.06));
}
/* Beats the display:flex above, which would otherwise keep a panel
   visible even while grocery-list.js has it marked hidden. */
.grocery-edit-panel[hidden] { display: none; }
.grocery-edit-panel form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0;
  padding: 0;
  min-width: 0;
  background: none;
  border: none;
  box-shadow: none;
}
.grocery-edit-panel input {
  padding: 8px;
  font-size: 0.9rem;
  min-width: 0;
}
.grocery-edit-panel input[name="quantity"] { width: 5rem; }
.grocery-edit-panel input[name="unit"] { width: 6rem; }
.grocery-edit-panel .btn {
  padding: 8px 14px;
  font-size: 0.8rem;
  box-shadow: none;
}
.grocery-edit-panel .btn-remove { background: #a3402f; }
/* "I have this" is the common action, so it reads as the primary one and
   Update drops back to a quiet outline. */
.grocery-edit-panel .btn-secondary {
  background: transparent;
  color: var(--green-dark);
  border: 1px solid var(--border);
}
.grocery-edit-panel .btn-secondary:hover { background: var(--green-tint); }
.grocery-edit-panel .grocery-have { flex: 1 1 100%; }

/* Dim the list while an edit is in flight, so a tap visibly registers
   even though the page itself never reloads. */
#grocery-card.is-updating { opacity: 0.6; }
#grocery-card.is-updating .grocery-list { pointer-events: none; }

@media (max-width: 560px) {
  .grocery-edit-panel { gap: 10px; }
  .grocery-edit-panel .grocery-update { flex: 1 1 100%; }
  .grocery-edit-panel input[name="quantity"],
  .grocery-edit-panel input[name="unit"] { flex: 1 1 0; width: auto; }
  .grocery-edit-panel .btn { padding: 10px 14px; }
}

.shop-links {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.shop-links .label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
}
.shop-links .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-links a {
  display: inline-block;
  background: var(--green-tint);
  border: 1px solid #cfe0d2;
  color: var(--green-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.shop-links a:hover { background: #dcebe0; }

.total-line {
  font-family: "Lora", serif;
  font-weight: 700;
  font-size: 1.15rem;
  margin-top: 14px;
  font-variant-numeric: tabular-nums;
}

.warning {
  background: #fbf1de;
  border: 1px solid #e6c88a;
  color: #7a5210;
  border-radius: 10px;
  padding: 13px 15px;
  margin-top: 10px;
  font-size: 0.9rem;
}

.back-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--green);
  text-decoration: none;
  font-weight: 700;
}
.back-link:hover { text-decoration: underline; }

.legal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 36px;
  font-size: 0.95rem;
  box-shadow: var(--shadow);
}
.legal-card h1 { font-size: 1.5rem; margin-top: 0; }
.legal-card h2 { font-size: 1.1rem; margin-top: 28px; }
.legal-card ul, .legal-card ol { padding-left: 22px; }
.legal-card li { margin-bottom: 6px; }
.legal-card p { color: var(--ink); }
.legal-card strong { color: var(--green-dark); }

.site-footer {
  max-width: min(1180px, 94vw);
  margin: 24px auto 0;
  padding: 0 0 40px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}
.site-footer a { color: var(--muted); text-decoration: underline; }
.site-footer a:hover { color: var(--green-dark); }
.site-footer .footer-divider { margin: 0 10px; opacity: 0.5; }

.agree-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 16px 0;
  text-align: left;
}
.agree-row input { margin-top: 3px; accent-color: var(--green); flex-shrink: 0; width: auto; }
.agree-row a { color: var(--green-dark); font-weight: 600; }

.delete-data-row {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.delete-data-row summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
  list-style: none;
}
.delete-data-row summary::-webkit-details-marker { display: none; }
.delete-data-row .confirm { margin-top: 12px; }

@media (max-width: 980px) {
  .form-shell { grid-template-columns: 1fr; }
  .form-aside { position: static; }
}

@media (max-width: 600px) {
  .wrap, .nav-inner { max-width: 92vw; padding-left: 0; padding-right: 0; }
  .wrap { padding-top: 24px; padding-bottom: 70px; }
  .how-it-works { grid-template-columns: 1fr; }
  .row { flex-direction: column; }
  .hero-copy h1 { font-size: 2.1rem; }
  form { padding: 20px; }
}

/* ---- Schedule: prep banner, view toggle, calendar --------------------- */

.prep-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, var(--green-deep), var(--green-dark) 70%, var(--green));
  color: var(--cream);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow);
}
.prep-banner-day { display: flex; flex-direction: column; line-height: 1.25; }
.prep-banner-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.75;
}
.prep-banner-day strong { font-family: "Lora", Georgia, serif; font-size: 1.35rem; }
.prep-banner-copy {
  font-size: 0.92rem;
  opacity: 0.9;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  padding-left: 18px;
}
@media (max-width: 620px) {
  .prep-banner-copy { border-left: none; padding-left: 0; }
}

.view-toggle {
  display: inline-flex;
  background: var(--green-tint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 18px;
}
.view-toggle button {
  border: none;
  background: none;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--muted);
  padding: 8px 20px;
  border-radius: 999px;
  cursor: pointer;
}
.view-toggle button[aria-selected="true"] {
  background: var(--card);
  color: var(--green-dark);
  box-shadow: 0 1px 3px rgba(20, 45, 33, 0.12);
}

/* The week at a glance. auto-fit rather than a fixed 7 columns because
   days_per_week is 3-7, and it collapses to two columns on a phone
   without a separate breakpoint. */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.cal-day {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 12px 10px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cal-day:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cal-day.is-past { opacity: 0.55; }
.cal-day.is-today { border-color: var(--green); box-shadow: 0 0 0 2px rgba(47, 111, 79, 0.18); }
.cal-dow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--green);
  font-weight: 700;
}
.cal-date { font-family: "Lora", Georgia, serif; font-size: 1.05rem; color: var(--green-dark); }
.cal-badge {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 2px 7px;
  border-radius: 999px;
  margin-top: 3px;
}
.cal-meals { list-style: none; margin: 8px 0 0; padding: 0; }
.cal-meals li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 2px 0;
}

/* Recipe colour coding. The point isn't decoration — a repeated meal-prep
   recipe is otherwise four identical lines of text, and the colour is what
   lets someone read the rhythm of their week at a glance. Assigned by
   order of first appearance (see app.py's _recipe_indexes), so adjacent
   recipes never collide. */
.rc-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rc, var(--green));
  transform: translateY(-1px);
}
.rc-0 { --rc: #2f6f4f; }
.rc-1 { --rc: #b8863d; }
.rc-2 { --rc: #7a5ea8; }
.rc-3 { --rc: #c1603f; }
.rc-4 { --rc: #3d7f96; }
.rc-5 { --rc: #8a9440; }
.rc-6 { --rc: #a3456b; }
.rc-7 { --rc: #55606e; }

.recipe-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 5px solid var(--rc, var(--green));
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.recipe-card.is-flash { animation: rc-flash 1.2s ease; }
@keyframes rc-flash {
  0%, 100% { box-shadow: var(--shadow); }
  30% { box-shadow: 0 0 0 3px var(--rc, var(--green)); }
}
.recipe-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.recipe-head h3 { margin: 2px 0 6px; }
.recipe-batch { text-align: right; font-size: 0.8rem; }
.recipe-servings {
  display: block;
  font-weight: 700;
  color: var(--rc, var(--green));
}
.recipe-days { color: var(--muted); }
.recipe-days em { font-style: normal; font-weight: 600; }
@media (max-width: 560px) {
  .recipe-batch { text-align: left; }
}

.see-recipe {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-dark);
  text-decoration: none;
  padding: 6px 0;
}
.see-recipe:hover { text-decoration: underline; }

.day-card.is-today > summary { color: var(--green-dark); }
.day-date { color: var(--muted); font-weight: 400; }

/* Locked days in the free preview. The meals genuinely aren't in the
   markup (results.html slices days[1:] and only ever emits a count) —
   these bars are placeholders standing in for them, so the week has a
   visible shape without any locked content reaching the browser. */
.locked-week {
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 14px;
}
.cal-day.is-locked { pointer-events: none; background: var(--green-tint); }
.cal-day.is-locked .cal-date { color: var(--muted); }
.rc-dot.rc-locked { background: var(--border); }
.cal-blur {
  display: inline-block;
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: var(--border);
}

/* ---- Pantry staples checklist (intake) -------------------------------- */
/* A grid rather than a list: eighteen checkboxes stacked vertically reads
   as a wall of work, which is the opposite of what this step is for. */
/* 132px, not 150: at a 375px viewport the card's padding leaves ~295px, and
   two 150px columns plus the gap needed 312 — so it collapsed to a single
   column and turned eighteen staples into a long scroll. */
.staples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 6px 10px;
  margin-top: 4px;
}
.staple {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 0.92rem;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: var(--card);
  margin: 0;
}
.staple:hover { border-color: var(--green); }
.staple input { margin: 0; flex: 0 0 auto; }
.staple:has(input:checked) {
  background: var(--green-tint);
  border-color: var(--green);
  font-weight: 600;
}

/* Sits directly above the total, where someone reads the number and
   decides whether they can afford the week. */
.budget-disclaimer {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 14px;
}

/* ---- Staple groups (collapsible) ------------------------------------- */
.staple-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.staple-group {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--card);
}
.staple-group > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 11px 14px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--green-dark);
  list-style: none;
}
.staple-group > summary::-webkit-details-marker { display: none; }
.staple-group > summary::after {
  content: "+";
  font-weight: 700;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
}
.staple-group[open] > summary::after { content: "\2212"; }
.staple-group[open] > summary { border-bottom: 1px solid var(--border); }
.staple-group.has-picks > summary { color: var(--green); }
.staple-group-count {
  margin-left: auto;
  margin-right: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--green-tint);
  border-radius: 999px;
  padding: 2px 9px;
}
.staple-group.has-picks .staple-group-count { color: #fff; background: var(--green); }
.staple-group .staples-grid { padding: 10px 12px 12px; margin-top: 0; }

/* Signup plan picker. Radios rather than a <select> so all three prices
   are visible at once — the saving is the reason to pick a longer term,
   and a dropdown hides it behind a tap. */
.plan-picker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.plan-option {
  flex: 1 1 150px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
}
/* :has() lets the whole card show selection, not just the dot. Browsers
   without it still work — the radio itself is visible and checked. */
.plan-option:has(input:checked) {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green);
}
.plan-body { display: flex; flex-direction: column; }
.plan-name { font-weight: 600; }
.plan-price { font-size: 1.3rem; font-weight: 700; color: var(--green-dark); }
.plan-meta { font-size: 0.8rem; color: var(--muted); }
.plan-save { font-size: 0.82rem; font-weight: 600; color: var(--gold); margin-top: 4px; }

/* Stated before the customer reaches Stripe, not after. A card is taken
   up front, so saying so here is the honest place. */
.trial-banner {
  background: var(--green-tint);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 0.92rem;
  color: var(--ink);
}
.plan-then { font-size: 0.85rem; font-weight: 500; color: var(--muted); }