/* ========================================
   Plan my week — Backyard Blue
   A week of day chips, what is planned for the chosen day, and
   suggestion cards tinted from their video. Search floats at the
   bottom of the page.
   ======================================== */
.plan-week-picker {
  max-width: 1088px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) calc(var(--space-sm) * 18);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  color: var(--color-ink);
}

.plan-week-picker [hidden] { display: none !important; }

.plan-week-picker :is(button, input, summary, a):focus-visible {
  outline: 2px solid var(--ui-focus-outline);
  outline-offset: 2px;
}

.plan-kitchen-rules {
  max-width: 1088px;
  margin: var(--space-md) auto calc(var(--space-md) * -1);
  padding: 0 var(--space-lg);
  text-align: right;
}

.plan-kitchen-rules a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-heeler-dark);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
}

/* ── Heading ──────────────────────────── */
.plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-sm-md);
  row-gap: var(--space-xs);
}

.plan-head h1 {
  margin: 0;
  font-weight: var(--weight-semibold);
  font-size: var(--text-display);
  line-height: normal;
  font-family: var(--font-display);
}

.plan-head p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-body);
}

/* ── Day chips ────────────────────────── */
.plan-week-picker-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-sm-md);
}

.plan-week-picker-day {
  position: relative;
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-cream-dark);
  color: var(--color-ink);
  font: inherit;
  cursor: pointer;
  transition: background-color 160ms ease, transform 120ms ease;
}

.plan-week-picker-dow { font-weight: var(--weight-semibold); font-size: var(--text-title); line-height: var(--leading-display); font-family: var(--font-display); }

.plan-week-picker-date {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  line-height: var(--leading-title);
  opacity: 0.8;
}

.plan-week-picker-date strong { font-weight: inherit; }

/* Planned days get a dot; the count stays for assistive tech. */
.plan-week-picker-day i {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  overflow: hidden;
  border-radius: var(--radius-round);
  background: var(--color-ink-soft);
  color: transparent;
  font-size: 0;
}

.plan-week-picker-day.is-selected {
  background: var(--color-heeler);
  color: var(--color-paper);
}

.plan-week-picker-day.is-selected i { background: var(--color-paper); }
.plan-week-picker-day:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .plan-week-picker-day:not(.is-selected):hover { background: var(--color-hover); }
}

/* ── Planned and suggested ────────────── */
.plan-week-picker-notebook {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.plan-week-picker-planned-day,
.plan-week-suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.plan-week-picker-planned-day h2,
.plan-week-suggestions > h2 {
  margin: 0;
  font-weight: var(--weight-semibold);
  font-size: var(--text-headline);
  line-height: normal;
  font-family: var(--font-display);
}

.plan-week-picker-planned-list,
.plan-week-search-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-sm-md);
}

.plan-week-picker-planned-card,
.plan-week-search-result {
  position: relative;
  min-width: 0;
}

.plan-week-picker-planned-link {
  display: block;
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
}

.plan-day-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-sm-md);
  padding: var(--space-sm-md) var(--space-md) var(--space-sm-md) var(--space-sm-md);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
}

.plan-day-empty__art { flex: 0 0 auto; }

.plan-day-empty__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.plan-day-empty .plan-day-empty__title {
  margin: 0;
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  line-height: var(--leading-label);
  font-family: var(--font-display);
}

.plan-day-empty .plan-day-empty__body {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.plan-week-picker-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-ink-soft);
}

.plan-week-picker-empty h3 {
  margin: 0;
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  line-height: var(--leading-label);
  font-family: var(--font-display);
}

.plan-week-picker-empty p {
  margin: var(--space-2xs) 0 var(--space-sm);
  font-size: var(--text-body);
}

.plan-week-suggestion-day { display: flex; flex-direction: column; gap: var(--space-sm); }
.plan-week-suggestion-day h3 { margin: 0; font-weight: var(--weight-medium); font-size: var(--text-body); line-height: var(--leading-label); font-family: var(--font-display); color: var(--color-ink-soft); }

/* ── Recipe card: a colour from the video, the photo on the right ── */
.recipe-preview {
  --preview-tone: var(--color-cream-dark);
  --preview-ink: var(--color-ink);
  --preview-muted: var(--color-ink-soft);
  --preview-accent: var(--color-heeler);
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 72px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--preview-tone);
  color: var(--preview-ink);
}

.recipe-preview__media {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
}

.recipe-preview:not(.has-preview) .recipe-preview__media { display: none; }

.recipe-preview__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recipe-preview[data-thumbnail-tint-state="loading"] .recipe-preview__media img { opacity: 0; }

/* Flat Rule exception (DESIGN.md): a busy left photo edge fades into the card tone over 56px, eased. */
.recipe-preview[data-thumbnail-edge="busy"] .recipe-preview__media img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / 0.028) 5.6px, rgb(0 0 0 / 0.104) 11.2px, rgb(0 0 0 / 0.216) 16.8px, rgb(0 0 0 / 0.352) 22.4px, rgb(0 0 0 / 0.5) 28px, rgb(0 0 0 / 0.648) 33.6px, rgb(0 0 0 / 0.784) 39.2px, rgb(0 0 0 / 0.896) 44.8px, rgb(0 0 0 / 0.972) 50.4px, rgb(0 0 0) 56px);
  mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / 0.028) 5.6px, rgb(0 0 0 / 0.104) 11.2px, rgb(0 0 0 / 0.216) 16.8px, rgb(0 0 0 / 0.352) 22.4px, rgb(0 0 0 / 0.5) 28px, rgb(0 0 0 / 0.648) 33.6px, rgb(0 0 0 / 0.784) 39.2px, rgb(0 0 0 / 0.896) 44.8px, rgb(0 0 0 / 0.972) 50.4px, rgb(0 0 0) 56px);
}

/* Flat Rule: the photo sits beside the tone, not under the text. */
.recipe-preview.has-preview .recipe-preview__copy { max-width: 60%; }

.recipe-preview__copy {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-sm-md) var(--space-md);
}

.recipe-preview__title {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--preview-ink);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  line-height: var(--leading-label);
  font-family: var(--font-display);
}

.recipe-preview__ingredients { display: none; }

/* Suggestion cards end in a round add button drawn in the card's own ink. */
.plan-week-search-choice {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.plan-week-search-choice .recipe-preview__copy { padding-right: calc(var(--space-sm) * 8); }

button.plan-week-search-choice .recipe-preview::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--preview-ink);
  border-radius: var(--radius-round);
  background: var(--preview-tone);
  transform: translateY(-50%);
}

button.plan-week-search-choice .recipe-preview::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 50%;
  right: 25px;
  width: 18px;
  height: 18px;
  background: var(--preview-ink);
  transform: translateY(-50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

button.plan-week-search-choice[aria-pressed="true"] .recipe-preview::after {
  border-color: var(--color-ink);
  background: var(--color-heeler);
}

button.plan-week-search-choice[aria-pressed="true"] .recipe-preview::before {
  background: var(--color-paper);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.plan-week-search-choice[aria-pressed="true"] .recipe-preview { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.plan-week-search-choice:disabled { cursor: progress; opacity: 0.6; }
.plan-week-picker-planned-check { display: none; }

.plan-week-search-note {
  position: absolute;
  z-index: 5;
  top: -9px;
  left: 14px;
  padding: var(--space-2xs) var(--space-sm-md);
  border: var(--line);
  border-radius: var(--radius-sm);
  background: var(--color-cream-dark);
  color: var(--color-ink);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-family: var(--font-body);
}

.plan-week-search-note--scenario { border-color: var(--line-color); background: var(--color-cream-dark); }

/* Board: suggestion chips carry only the title and the add button. */
.plan-week-suggestions .plan-week-search-note { display: none; }

@media (hover: hover) and (pointer: fine) {
  .plan-week-search-choice:hover .recipe-preview,
  .plan-week-picker-planned-link:hover .recipe-preview { filter: brightness(1.04); }
}

.plan-week-suggestions .plan-week-search-results { padding: 0; }

/* ── Suggestion chips: one neutral line after the label ── */
.plan-week-picker-notebook .plan-week-suggestions {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-sm);
}

/* The chips flow as siblings of the label, so they start on its line and wrap like text. */
.plan-week-picker-notebook .plan-week-suggestions .plan-week-search-results,
.plan-week-picker-notebook .plan-week-suggestions .plan-week-search-list { display: contents; }

.plan-week-picker-notebook .plan-week-suggestions .plan-week-picker-empty,
.plan-week-picker-notebook .plan-week-suggestions .plan-week-search-footer { flex-basis: 100%; }

.plan-week-picker-notebook .plan-week-suggestions .plan-week-picker-empty { margin-top: var(--space-sm); }

.plan-week-picker-notebook .plan-week-suggestions .plan-week-search-result {
  max-width: 100%;
  min-width: 0;
}

.plan-week-picker-notebook .plan-week-suggestions .plan-week-search-choice {
  display: flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  min-height: 44px;
}

/* The thumbnail tint sets --preview-* inline, so the chip names its colours directly. */
.plan-week-picker-notebook .plan-week-suggestions .recipe-preview {
  min-height: 0;
  border-radius: var(--radius-control);
  background: var(--color-hover);
  color: var(--color-ink);
}

@media (hover: hover) and (pointer: fine) {
  .plan-week-picker-notebook .plan-week-suggestions .plan-week-search-choice:hover .recipe-preview { outline: var(--line); }
}

.plan-week-picker-notebook .plan-week-suggestions .recipe-preview__media { display: none; }

.plan-week-picker-notebook .plan-week-suggestions .recipe-preview.has-preview .recipe-preview__copy { max-width: none; }

.plan-week-picker-notebook .plan-week-suggestions .recipe-preview__copy { padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-sm-md); }

.plan-week-picker-notebook .plan-week-suggestions .recipe-preview__title {
  display: block;
  -webkit-line-clamp: none;
  overflow: hidden;
  color: var(--color-ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.plan-week-picker-notebook .plan-week-suggestions .recipe-preview::after { content: none; }

.plan-week-picker-notebook .plan-week-suggestions .recipe-preview::before {
  position: static;
  order: 1;
  flex: none;
  width: 18px;
  height: 18px;
  margin-right: var(--space-sm-md);
  background: var(--color-ink);
  transform: none;
}

.plan-week-search-footer {
  display: flex;
  justify-content: flex-end;
}

.plan-week-search-inner {
  display: flex;
  align-items: center;
  gap: var(--space-sm-md);
}

.plan-week-suggestions .plan-week-search-footer span { display: none; }

.plan-week-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-lg);
  border: var(--line);
  border-radius: var(--radius-control);
  background: var(--color-heeler);
  color: var(--color-paper);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  line-height: var(--leading-display);
  font-family: var(--font-display);
  cursor: pointer;
}

.plan-week-primary:disabled { background: var(--color-ink-faint); cursor: default; }

.plan-week-quiet {
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-heeler-dark);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  line-height: var(--leading-display);
  font-family: var(--font-display);
  cursor: pointer;
}

.plan-week-picker-updating {
  display: grid;
  place-items: center;
  min-height: 40dvh;
  margin: 0;
  color: var(--color-ink-soft);
  font-weight: var(--weight-semibold);
  font-size: var(--text-title);
  line-height: var(--leading-label);
  font-family: var(--font-display);
  text-align: center;
}

/* ── Search bar at the bottom ─────────── */
.plan-week-bottom-search {
  position: fixed;
  z-index: var(--z-navbar);
  left: calc(24px + env(safe-area-inset-left, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.plan-week-picker-search-shell {
  position: relative;
  max-width: 749px;
  margin: 0 auto;
}

/* The launch takes the room Preferences leaves, so a long label never covers it. */
.plan-week-bottom-search .plan-week-picker-search-shell {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-inline-end: var(--space-sm);
  pointer-events: auto;
  border: var(--line);
  border-radius: var(--radius-control);
  background: var(--color-paper);
}

.plan-week-search-launch {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-sm-md);
  min-width: 0;
  min-height: 56px;
  padding-block: var(--space-sm);
  padding-inline: var(--space-lg) 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink-soft);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: normal;
  font-family: var(--font-body);
  text-align: left;
  cursor: text;
}

.plan-week-search-launch-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-week-search-launch svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--color-ink);
  stroke-width: 2.4;
}

.plan-week-bottom-preferences,
.plan-week-picker-preferences summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-md);
  border: var(--line);
  border-radius: var(--radius-control);
  background: var(--color-hover);
  color: var(--color-ink);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-body);
  line-height: var(--leading-display);
  font-family: var(--font-body);
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
}

.plan-week-picker-preferences summary::-webkit-details-marker { display: none; }

.plan-week-bottom-preferences {
  flex: 0 0 auto;
}

/* ── Search dialog ────────────────────── */
body:has(.plan-week-search[open]) { overflow: hidden; }

.plan-week-search {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-cream);
  color: var(--color-ink);
}

.plan-week-search[open] {
  display: flex;
  flex-direction: column;
  animation: plan-week-search-open 220ms var(--ease-out-soft);
}

.plan-week-search .plan-week-search-inner {
  display: block;
  max-width: 1040px;
  margin: 0 auto;
}

.plan-week-search-top {
  flex-shrink: 0;
  padding: var(--space-md) var(--space-lg) 0;
  border-bottom: 1.5px solid var(--color-border);
  background: var(--color-hover);
}

.plan-week-search-heading,
.plan-week-review-heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm-md);
  margin-bottom: var(--space-md);
}

.plan-week-search-heading h2,
.plan-week-review-heading h2 {
  flex: 1;
  margin: 0;
  font-weight: var(--weight-semibold);
  font-size: var(--text-headline);
  line-height: var(--leading-title);
  font-family: var(--font-display);
}

.plan-week-search-back {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--line);
  border-radius: var(--radius-round);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
}

.plan-week-search-back svg { width: 20px; height: 20px; stroke-width: 2.4; }

.plan-week-search-date {
  color: var(--color-ink-soft);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
}

.plan-week-search .plan-week-picker-search-shell {
  max-width: none;
  margin-bottom: var(--space-sm);
}

.plan-week-search .plan-week-picker-search-shell > input {
  width: 100%;
  min-height: 56px;
  padding: 0 calc(var(--space-sm) * 20) 0 var(--space-lg);
  border: var(--line);
  border-radius: var(--radius-control);
  background: var(--color-paper);
  color: var(--color-ink);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: normal;
  font-family: var(--font-body);
}

.plan-week-search .plan-week-picker-search-shell > input::placeholder { color: var(--color-ink-soft); }

.plan-week-picker-preferences {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

.plan-week-picker-preferences-form,
.plan-week-picker-common-policy {
  position: absolute;
  right: 0;
  display: grid;
  gap: var(--space-sm-md);
  width: min(320px, calc(100vw - 32px));
  max-height: calc(100dvh - 170px);
  overflow-y: auto;
  margin-top: var(--space-sm-md);
  padding: var(--space-md);
  border: var(--line);
  border-radius: var(--radius-xl);
  background: var(--color-paper);
}

.plan-week-picker-preferences--read-only {
  position: static;
  transform: none;
}

.plan-week-picker-preferences--read-only .plan-week-picker-common-policy {
  position: static;
  width: auto;
}

.plan-week-picker-common-policy p { margin: 0; overflow-wrap: anywhere; }

.plan-week-picker-preference-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.plan-week-picker-preference-group legend {
  margin-bottom: var(--space-sm);
  padding: 0;
  font-weight: var(--weight-extrabold);
  font-size: var(--text-body);
  line-height: var(--leading-label);
  font-family: var(--font-body);
}

.plan-week-picker-preference-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.plan-week-picker-preference-options .profile-planning-option { max-width: 100%; min-height: 44px; }
.plan-week-picker-preference-options .profile-planning-option span { overflow-wrap: anywhere; }

.plan-week-picker-ingredient-field {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
  font-weight: var(--weight-bold);
  font-size: var(--text-body);
  line-height: var(--leading-label);
  font-family: var(--font-body);
}

.plan-week-picker-preferences-form input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding-inline: var(--space-md);
  border: var(--line);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-ink);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-family: var(--font-body);
}

.plan-week-picker-preferences-form input[type="text"]::placeholder { color: var(--color-ink-soft); }

.plan-week-search-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 48px;
  font-size: var(--text-body);
}

.plan-week-search-caption p { margin: 0; }

.plan-week-picker-recent {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-heeler-dark);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.plan-week-search .plan-week-search-results {
  /* Keep card badges and add controls below the header's preferences layer. */
  isolation: isolate;
  flex: 1;
  min-height: 0;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.plan-week-search .plan-week-search-list {
  max-width: 1040px;
  margin: 0 auto;
}

.plan-week-search .plan-week-search-footer {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-lg) max(var(--space-sm), env(safe-area-inset-bottom));
  border-top: var(--line);
  background: var(--color-paper);
}

.plan-week-search .plan-week-search-footer .plan-week-search-inner {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

/* ── Review dialog ────────────────────── */
.plan-week-review {
  width: calc(100% - 32px);
  max-width: 600px;
  max-height: 90dvh;
  padding: var(--space-lg);
  overflow-y: auto;
  border: var(--line);
  border-radius: var(--radius-xl);
  background: var(--color-paper);
  color: var(--color-ink);
}

.plan-week-review::backdrop { background: color-mix(in srgb, var(--color-ink) 38%, transparent); }
.plan-week-review .plan-week-picker-days { gap: var(--space-xs); margin: var(--space-md) 0; }
.plan-week-review .plan-week-picker-day { border-radius: var(--radius-md); }
.plan-week-review .plan-week-picker-dow { font-size: var(--text-body); }
.plan-week-review .plan-week-picker-month { display: none; }
.plan-week-review > p { margin: 0; color: var(--color-ink-soft); font-size: var(--text-body); }
.plan-week-review-list { display: grid; gap: var(--space-sm-md); margin: var(--space-md) 0; }
.plan-week-review-item { display: flex; align-items: center; gap: var(--space-sm); }
.plan-week-review-item .recipe-preview { flex: 1; }
.plan-week-review > .plan-week-primary { width: 100%; }
.plan-week-review .plan-week-error { color: var(--color-tomato-ink); }

/* ── Toast ────────────────────────────── */
.plan-week-toast {
  position: fixed;
  z-index: var(--z-plan-toast);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--space-sm-md);
  width: max-content;
  max-width: calc(100% - 24px);
  padding: var(--space-sm-md) var(--space-md);
  border: var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  transform: translateX(-50%);
}

@keyframes plan-week-search-open {
  from { opacity: 0.6; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* ── Phone ────────────────────────────── */
@media (max-width: 760px) {
  .plan-week-picker { padding: var(--space-md) var(--space-md) calc(var(--space-sm) * 18); }
  .plan-head h1 { font-size: var(--text-display-phone); }
  .plan-kitchen-rules { padding: 0 var(--space-md); }
}

@media (max-width: 767px) {
  /* Float above the tab bar. */
  .plan-week-bottom-search {
    bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  }

  .plan-week-toast { bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 600px) {
  .plan-week-picker > .plan-week-picker-days {
    gap: var(--space-xs);
    margin: 0 calc(var(--space-md) * -1);
    padding: 0 var(--space-sm);
  }

  .plan-week-picker-day {
    min-height: 62px;
    border-radius: var(--radius-md);
  }

  .plan-week-picker-dow { font-size: var(--text-body); }

  .plan-week-picker-date {
    font-weight: var(--weight-semibold);
    font-size: var(--text-body);
    line-height: var(--leading-title);
    font-family: var(--font-display);
    opacity: 1;
  }

  .plan-week-picker-month { display: none; }

  .plan-week-picker-day i {
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
  }

  .plan-week-picker-planned-list,
  .plan-week-search-list { grid-template-columns: minmax(0, 1fr); }

  .plan-week-search-launch svg { width: 16px; height: 16px; }
  .plan-week-search-top,
  .plan-week-search .plan-week-search-results { padding-inline: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  .plan-week-search[open] { animation: none; }
  .plan-week-picker-day,
  .plan-week-picker-day:active { transition: none; transform: none; }
}