/* Styles owned by the planning lot. Use tokens from app.css only (no hardcoded colors/spacings). */

/*
 * Lot-local components (built on app.css tokens):
 *  .ptoolbar / .pweeknav   week switcher + actions
 *  .pweek / .pday / .pslot calendar (mobile: day list, >= 1024px: 7-column grid)
 *  .ppanel / .ppicker      recipe library (side panel, picker sheet)
 *  .pactions / .pconflict  slot actions sheet, leftovers conflict dialog
 *  .pbalance               weekly balance tiles
 *  .pmonth                 month view
 *  .hhero / .hmeal / .hweek home dashboard
 */

/* ------------------------------------------------------------------------ */
/* Toolbar & week switcher                                                  */
/* ------------------------------------------------------------------------ */
.ptoolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.pweeknav {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.pweeknav__label {
  min-width: 8.5rem;
  font-size: var(--font-size-subhead);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.ptoolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.pview-switch {
  min-width: 12rem;
}

.pbanner {
  position: sticky;
  top: calc(var(--safe-top) + var(--control-height) + var(--spacing-sm));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--font-size-subhead);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-md);
  animation: pop-in var(--transition-spring);
}

.pbanner svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
}

.pbanner .btn--plain {
  color: inherit;
}

/* ------------------------------------------------------------------------ */
/* Layout: board + side panel                                               */
/* ------------------------------------------------------------------------ */
.playout {
  display: grid;
  gap: var(--spacing-lg);
}

.pboard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-width: 0;
}

.pboard > .section {
  margin-bottom: 0;
}

.ppanel {
  display: none;
}

@media (min-width: 1280px) {
  .playout {
    grid-template-columns: minmax(0, 1fr) 15.5rem;
    align-items: start;
  }

  .ppanel {
    position: sticky;
    top: calc(var(--control-height) + var(--spacing-lg));
    display: block;
  }
}

.ppanel__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-height: calc(100dvh - var(--control-height) - var(--spacing-2xl));
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.ppanel__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.ppanel__list {
  flex: 1 1 auto;
  min-height: 10rem;
  margin-inline: calc(-1 * var(--spacing-xs));
  padding-inline: var(--spacing-xs);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ppanel .list {
  box-shadow: none;
  background: var(--color-surface-2);
}

.ppanel__hint {
  line-height: 1.8;
}

/* ------------------------------------------------------------------------ */
/* Week: mobile day list                                                    */
/* ------------------------------------------------------------------------ */
.pweek {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  touch-action: pan-y;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.pweek.is-leaving-left {
  opacity: 0.4;
  transform: translateX(calc(-1 * var(--spacing-2xl)));
}

.pweek.is-leaving-right {
  opacity: 0.4;
  transform: translateX(var(--spacing-2xl));
}

.pweek__labels,
.pday__weekday,
.pday__num {
  display: none;
}

.pday {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  scroll-margin-top: calc(var(--control-height) + var(--spacing-xl));
}

.pday__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: var(--control-height-sm);
  padding: 0 var(--spacing-xs);
}

.pday__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-title3);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-title);
}

.pday.is-today .pday__title {
  color: var(--color-primary);
}

.pday__slots {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.pday.is-today .pday__slots {
  box-shadow: 0 0 0 var(--spacing-2xs) var(--color-primary), var(--shadow-md);
}

@media (min-width: 640px) and (max-width: 1023px) {
  .pweek {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-lg) var(--spacing-md);
  }
}

/* ------------------------------------------------------------------------ */
/* Slot (one meal)                                                          */
/* ------------------------------------------------------------------------ */
.pslot {
  --slot-accent: var(--color-dinner);
  --slot-soft: var(--color-indigo-soft);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  min-height: 4.5rem;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) calc(var(--spacing-md) + var(--spacing-2xs));
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-spring), opacity var(--transition-base);
}

.pslot--lunch {
  --slot-accent: var(--color-lunch);
  --slot-soft: var(--color-orange-soft);
}

.pslot::after {
  content: "";
  position: absolute;
  top: var(--spacing-sm);
  bottom: var(--spacing-sm);
  left: 0;
  width: 0.1875rem;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--slot-accent);
}

.pslot--empty::after {
  opacity: 0.35;
}

.pslot + .pslot::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: calc(var(--spacing-md) * 2 + 3.25rem);
  border-top: 0.5px solid var(--color-separator);
}

@media (hover: hover) {
  .pslot:hover {
    background: var(--color-fill);
  }
}

.pslot:active {
  background: var(--color-fill-strong);
}

.pslot:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--spacing-2xs) var(--color-primary);
}

.pslot.is-past {
  opacity: 0.62;
}

.pslot__media {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--slot-soft);
  color: var(--slot-accent);
}

.pslot__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.pslot__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, var(--slot-soft), var(--color-primary-soft));
  font-size: var(--font-size-title2);
}

.pslot__icon {
  display: grid;
  place-items: center;
}

.pslot__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.pslot--empty .pslot__media {
  border: 1.5px dashed var(--color-separator);
  background: transparent;
  color: var(--color-text-tertiary);
}

.pslot--off .pslot__media {
  background: var(--color-fill);
  color: var(--color-text-secondary);
}

.pslot__badge {
  display: none;
}

.pslot__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}

.pslot__meal {
  color: var(--slot-accent);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pslot__title {
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
}

.pslot__title--empty {
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-regular);
}

.pslot__meta {
  color: var(--color-text-secondary);
  font-size: var(--font-size-footnote);
}

.pslot--leftover .pslot__title {
  font-weight: var(--font-weight-medium);
}

.pslot--leftover .pslot__meta {
  color: var(--color-teal);
  font-weight: var(--font-weight-medium);
}

.pslot--off .pslot__title {
  color: var(--color-text-secondary);
}

.pslot.is-pending {
  pointer-events: none;
  animation: pslot-pulse 900ms ease-in-out infinite;
}

.pslot.is-drop-target {
  background: var(--color-primary-soft);
  box-shadow: inset 0 0 0 var(--spacing-2xs) var(--color-primary);
}

.pslot.is-drag-source {
  opacity: 0.4;
}

.pslot.is-move-source {
  outline: var(--spacing-2xs) dashed var(--color-primary);
  outline-offset: calc(-1 * var(--spacing-xs));
}

.is-picking-slot .pslot {
  cursor: copy;
}

.is-picking-slot .pslot:not(.is-move-source) .pslot__media {
  box-shadow: 0 0 0 var(--spacing-2xs) var(--color-primary-soft);
}

.pslot[draggable="true"] {
  cursor: grab;
}

@keyframes pslot-pulse {
  50% { opacity: 0.45; }
}

/* ------------------------------------------------------------------------ */
/* Week: desktop calendar grid                                              */
/* ------------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .pweek {
    display: grid;
    grid-template-columns: 1.5rem repeat(7, minmax(0, 1fr));
    grid-template-rows: auto minmax(11.5rem, auto) minmax(11.5rem, auto);
    gap: var(--spacing-sm);
    touch-action: auto;
  }

  .pweek__labels {
    display: grid;
    grid-row: 1 / span 3;
    grid-template-rows: subgrid;
  }

  .pweek__label {
    align-self: center;
    justify-self: center;
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .pweek__label--lunch {
    color: var(--color-lunch);
  }

  .pweek__label--dinner {
    color: var(--color-dinner);
  }

  .pday {
    display: grid;
    grid-row: 1 / span 3;
    grid-template-rows: subgrid;
    gap: var(--spacing-sm);
  }

  .pday__title,
  .pday__today {
    display: none;
  }

  .pday__header {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .pday__weekday {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .pday__num {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    font-family: var(--font-family-rounded);
    font-size: var(--font-size-title3);
    font-weight: var(--font-weight-semibold);
  }

  .pday.is-today .pday__weekday {
    color: var(--color-primary);
  }

  .pday.is-today .pday__num {
    background: var(--color-primary);
    color: var(--color-on-primary);
  }

  .pday__slots {
    display: contents;
  }

  .pslot {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  .pslot + .pslot::before {
    display: none;
  }

  .pslot::after {
    top: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: 0.1875rem;
    border-radius: 0;
  }

  @media (hover: hover) {
    .pslot:hover {
      background: var(--color-surface);
      box-shadow: var(--shadow-md);
      transform: translateY(-1px);
    }
  }

  .pslot:focus-visible {
    box-shadow: 0 0 0 var(--spacing-2xs) var(--color-primary), var(--shadow-md);
  }

  .pday.is-today .pslot:not(.pslot--empty) {
    box-shadow: 0 0 0 1px var(--color-primary-soft), var(--shadow-sm);
  }

  .pslot__media {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 0;
  }

  .pslot__badge {
    position: absolute;
    bottom: var(--spacing-xs);
    left: var(--spacing-xs);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2xs);
    padding: var(--spacing-2xs) var(--spacing-xs);
    border-radius: var(--radius-pill);
    background: var(--color-material);
    color: var(--color-teal);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    -webkit-backdrop-filter: var(--blur-material);
    backdrop-filter: var(--blur-material);
  }

  .pslot__badge svg {
    width: 0.8rem;
    height: 0.8rem;
  }

  .pslot--leftover .pslot__media img {
    filter: saturate(0.8);
  }

  .pslot__body {
    flex: 1 1 auto;
    gap: var(--spacing-2xs);
    padding: var(--spacing-sm);
  }

  .pslot__title {
    font-size: var(--font-size-footnote);
  }

  .pslot__meta {
    font-size: var(--font-size-caption);
  }

  .pslot--empty {
    border: 1.5px dashed var(--color-separator);
    background: transparent;
    box-shadow: none;
  }

  .pslot--empty .pslot__media {
    flex: 1 1 auto;
    aspect-ratio: auto;
    border: 0;
  }

  .pslot--empty .pslot__body {
    flex: none;
    align-items: center;
  }

  .pslot--empty .pslot__meal {
    display: none;
  }

  @media (hover: hover) {
    .pslot--empty:hover {
      border-color: var(--slot-accent);
      background: var(--slot-soft);
      box-shadow: none;
      color: var(--slot-accent);
    }

    .pslot--empty:hover .pslot__media,
    .pslot--empty:hover .pslot__title--empty {
      color: var(--slot-accent);
    }
  }

  .pslot--empty.is-drop-target {
    border-color: var(--color-primary);
  }

  .pslot--off {
    background: var(--color-surface-2);
  }

  .pslot--off .pslot__media {
    flex: 1 1 auto;
    aspect-ratio: auto;
    background: transparent;
  }
}

/* ------------------------------------------------------------------------ */
/* Empty week                                                               */
/* ------------------------------------------------------------------------ */
.pempty {
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.pempty__actions {
  justify-content: center;
  margin-top: var(--spacing-sm);
}

/* ------------------------------------------------------------------------ */
/* Weekly balance                                                           */
/* ------------------------------------------------------------------------ */
.pbalance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm);
}

@media (min-width: 768px) {
  .pbalance {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-md);
  }
}

.pbalance__tile {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.pbalance__tile .ring {
  --ring-size: 2.75rem;
  --ring-thickness: 0.3rem;
  flex: none;
}

.pbalance__tile .ring > * {
  font-size: 0.6875rem;
}

.pbalance__tile .stat {
  min-width: 0;
}

.pbalance__tile .stat__label {
  line-height: 1.25;
}

.pbalance__icon {
  --tile-color: var(--color-primary);
  --tile-soft: var(--color-primary-soft);
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--tile-soft);
  color: var(--tile-color);
}

.pbalance__icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.pbalance__icon--teal { --tile-color: var(--color-teal); --tile-soft: var(--color-teal-soft); }
.pbalance__icon--green { --tile-color: var(--color-green); --tile-soft: var(--color-green-soft); }
.pbalance__icon--orange { --tile-color: var(--color-orange); --tile-soft: var(--color-orange-soft); }

.pbalance__footnote {
  grid-column: 1 / -1;
  padding: 0 var(--spacing-xs);
  color: var(--color-text-secondary);
  font-size: var(--font-size-footnote);
}

/* ------------------------------------------------------------------------ */
/* Recipe picker (sheet + panel)                                            */
/* ------------------------------------------------------------------------ */
.ppicker__target {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-subhead);
  font-weight: var(--font-weight-semibold);
}

.ppicker__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--color-dinner);
}

.ppicker__dot[data-type="lunch"] {
  background: var(--color-lunch);
}

.ppicker__search {
  position: sticky;
  top: calc(-1 * var(--spacing-sm));
  z-index: 1;
  margin-bottom: var(--spacing-md);
  padding-block: var(--spacing-xs);
  background: var(--color-bg);
}

.ppicker {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ppicker[busy] {
  opacity: 0.6;
  transition: opacity var(--transition-base);
}

.ppicker__list {
  margin-bottom: var(--spacing-md);
}

.ppicker .list-label {
  margin-top: var(--spacing-xs);
}

.ppicker__none {
  padding: var(--spacing-sm) var(--spacing-md);
}

.ppick__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, var(--color-orange-soft), var(--color-primary-soft));
  font-size: var(--font-size-title3);
}

.ppick__add {
  display: grid;
  flex: none;
  color: var(--color-primary);
}

.ppick__add svg {
  width: 1.5rem;
  height: 1.5rem;
}

.ppick[draggable="true"] {
  cursor: grab;
}

.ppick:active {
  background: var(--color-fill-strong);
}

.ppick--express .list-row__title {
  color: var(--color-primary);
}

.ppanel .ppick {
  --list-inset: var(--spacing-sm);
  gap: var(--spacing-sm);
  min-height: var(--control-height);
  padding: var(--spacing-xs) var(--spacing-sm);
}

.ppanel .list-row__thumb {
  --thumb-size: 2.25rem;
}

.ppanel .ppick__add {
  display: none;
}

.ppicker__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.ppicker__skeleton .skeleton {
  height: 3.5rem;
  border-radius: var(--radius-md);
}

/* ------------------------------------------------------------------------ */
/* Slot actions sheet & conflict dialog                                     */
/* ------------------------------------------------------------------------ */
.pactions__hero {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xs) 0;
}

.pactions__thumb {
  display: grid;
  flex: none;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-indigo-soft);
  color: var(--color-dinner);
  font-size: var(--font-size-title1);
}

.pactions__hero--lunch .pactions__thumb {
  background: var(--color-orange-soft);
  color: var(--color-lunch);
}

.pactions__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pactions__thumb svg {
  width: 1.75rem;
  height: 1.75rem;
}

.pactions .stepper form {
  display: contents;
}

.pactions__status .segmented > button {
  min-height: var(--control-height-sm);
}

.pactions__status .segmented svg {
  width: 1rem;
  height: 1rem;
}

.pactions__status .list-footer {
  margin-top: var(--spacing-xs);
}

.pconflict .sheet__body {
  padding-top: var(--spacing-lg);
}

.pconflict__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--color-teal-soft);
  color: var(--color-teal);
}

.pconflict__icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.pconflict .list-footer {
  margin-top: var(--spacing-xs);
}

@media (min-width: 768px) {
  .pconflict {
    width: min(26rem, calc(100% - 4rem));
  }
}

.pdup__row {
  cursor: pointer;
}

.pdup__row .check {
  flex: none;
}

.pdup__replace {
  display: block;
  cursor: pointer;
}

/* ------------------------------------------------------------------------ */
/* Month view                                                               */
/* ------------------------------------------------------------------------ */
.pmonth__legend {
  display: flex;
  gap: var(--spacing-md);
}

.pmonth__legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.pdot {
  display: inline-block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.pdot--lunch { background: var(--color-lunch); }
.pdot--dinner { background: var(--color-dinner); }
.pdot--leftover { box-shadow: inset 0 0 0 1.5px var(--color-teal); }
.pdot--off { background: var(--color-text-tertiary); }

.pmonth {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.pmonth__head,
.pmonth__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.pmonth__head {
  padding: var(--spacing-sm) 0;
  border-bottom: 0.5px solid var(--color-separator);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  text-transform: uppercase;
}

.pmonth__week + .pmonth__week {
  border-top: 0.5px solid var(--color-separator);
}

.pmonth__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
  min-height: 4.5rem;
  padding: var(--spacing-xs) var(--spacing-2xs);
  color: inherit;
  transition: background var(--transition-fast);
}

.pmonth__day + .pmonth__day {
  border-left: 0.5px solid var(--color-separator);
}

.pmonth__day:hover {
  background: var(--color-fill);
  text-decoration: none;
}

.pmonth__day.is-outside {
  opacity: 0.38;
}

.pmonth__day.is-past:not(.is-outside) .pmonth__meals {
  opacity: 0.7;
}

.pmonth__num {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-family: var(--font-family-rounded);
  font-size: var(--font-size-subhead);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.pmonth__day.is-today .pmonth__num {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.pmonth__meals {
  display: flex;
  gap: var(--spacing-2xs);
  justify-content: center;
}

.pmonth__meal {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
}

.pmonth__meal.is-empty,
.pmonth__title {
  display: none;
}

.pmonth__thumb {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  object-fit: cover;
}

.pmonth__meal--lunch .pmonth__thumb {
  box-shadow: 0 0 0 1.5px var(--color-lunch);
}

.pmonth__meal--dinner .pmonth__thumb {
  box-shadow: 0 0 0 1.5px var(--color-dinner);
}

@media (max-width: 767px) {
  .pmonth__thumb {
    width: 0.5rem;
    height: 0.5rem;
  }
}

@media (min-width: 768px) {
  .pmonth__day {
    align-items: stretch;
    min-height: 6.75rem;
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .pmonth__num {
    align-self: flex-end;
  }

  .pmonth__meals {
    flex-direction: column;
    justify-content: flex-start;
  }

  .pmonth__title {
    display: block;
    font-size: var(--font-size-caption);
  }

  .pmonth__meal.is-off .pmonth__title,
  .pmonth__meal.is-leftover .pmonth__title {
    color: var(--color-text-secondary);
  }
}

/* ------------------------------------------------------------------------ */
/* Home dashboard                                                           */
/* ------------------------------------------------------------------------ */
.home {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.home > .section {
  margin-bottom: 0;
}

.hhero {
  position: relative;
  display: flex;
  min-height: 16rem;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(155deg, var(--color-indigo), var(--color-purple));
  color: var(--color-surface);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-lg);
}

@media (prefers-color-scheme: dark) {
  .hhero {
    color: var(--color-text);
  }
}

.hhero--photo {
  background: var(--color-surface-2);
}

.hhero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, var(--color-backdrop), transparent 70%),
    linear-gradient(to top, var(--color-backdrop), transparent 45%);
}

.hhero--photo,
.hhero--photo .chip--glass {
  color: var(--color-on-primary);
}

@media (prefers-color-scheme: dark) {
  .hhero--photo,
  .hhero--photo .chip--glass {
    color: var(--color-text);
  }
}

.hhero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hhero:not(.hhero--photo) {
  flex-direction: column;
}

.hhero__emoji {
  align-self: flex-end;
  margin: calc(-1 * var(--spacing-xs)) 0 var(--spacing-sm);
  font-size: calc(var(--font-size-hero) * 1.5);
  line-height: 1;
  filter: drop-shadow(var(--shadow-lg));
}

.hhero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-width: 40rem;
  margin-top: auto;
}

.hhero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.9;
}

.hhero__eyebrow svg {
  width: 1rem;
  height: 1rem;
}

.hhero__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-title1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-title);
}

.hhero__text {
  font-size: var(--font-size-subhead);
  opacity: 0.88;
}

.hhero__chips,
.hhero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.hhero__actions {
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

.hhero__btn {
  background: var(--color-surface);
  color: var(--color-text);
}

.hhero__btn:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.hhero__btn--ghost {
  background: var(--color-material);
  -webkit-backdrop-filter: var(--blur-material);
  backdrop-filter: var(--blur-material);
}

@media (min-width: 768px) {
  .hhero {
    min-height: 21rem;
    padding: var(--spacing-xl);
  }

  .hhero__title {
    font-size: var(--font-size-large-title);
  }
}

.hmeals {
  display: grid;
  gap: var(--spacing-sm);
}

@media (min-width: 768px) {
  .hmeals {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--spacing-md);
  }
}

.hmeal {
  --slot-accent: var(--color-dinner);
  --slot-soft: var(--color-indigo-soft);
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
}

.hmeal--lunch {
  --slot-accent: var(--color-lunch);
  --slot-soft: var(--color-orange-soft);
}

.hmeal__thumb {
  display: grid;
  flex: none;
  place-items: center;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--slot-soft);
  color: var(--slot-accent);
  font-size: var(--font-size-title2);
}

.hmeal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hmeal__thumb svg {
  width: 1.5rem;
  height: 1.5rem;
}

.hmeal__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-2xs);
  min-width: 0;
}

.hmeal__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--slot-accent);
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hmeal__chip {
  text-transform: none;
  letter-spacing: 0;
}

.hmeal__title {
  font-weight: var(--font-weight-semibold);
}

.hmeal__meta {
  color: var(--color-text-secondary);
  font-size: var(--font-size-footnote);
}

.hweek {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--spacing-xs);
}

@media (min-width: 768px) {
  .hweek {
    gap: var(--spacing-sm);
  }
}

.hweek__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
  padding: var(--spacing-sm) var(--spacing-2xs);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: inherit;
  transition: transform var(--transition-spring);
}

.hweek__day:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.hweek__day.is-today {
  box-shadow: 0 0 0 var(--spacing-2xs) var(--color-primary), var(--shadow-sm);
}

.hweek__day.is-past {
  opacity: 0.6;
}

.hweek__name {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.hweek__num {
  font-family: var(--font-family-rounded);
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-bold);
}

.hweek__day.is-today .hweek__num,
.hweek__day.is-today .hweek__name {
  color: var(--color-primary);
}

.hweek__meals {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

.hweek__meal {
  --meal-color: var(--color-dinner);
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--meal-color);
  box-shadow: inset 0 0 0 var(--spacing-2xs) var(--meal-color);
}

.hweek__meal--lunch {
  --meal-color: var(--color-lunch);
}

.hweek__meal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hweek__meal.is-empty {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color-separator);
}

.hweek__meal.is-leftover {
  background: transparent;
  box-shadow: inset 0 0 0 var(--spacing-2xs) var(--color-teal);
}

.hweek__meal.is-off {
  background: var(--color-fill-strong);
  box-shadow: none;
}

@media (min-width: 768px) {
  .hweek__meal {
    width: 2.5rem;
    height: 2.5rem;
  }
}