/* ========================================================================== 
   Family Central Orientation Layout v8
   --------------------------------------------------------------------------
   This file intentionally loads last.

   LANDSCAPE:
     One-screen kiosk layout. Calendar left; quick links/menu/whiteboard right;
     chores across the bottom.

   PORTRAIT:
     Scrollable phone/tablet layout. The reference portrait image is treated as
     a long scrolled screenshot, so cards are stacked with natural/min heights
     instead of being forced to fit into the visible viewport.

   WEEKLY MENU:
     JavaScript renders a 14-day strip: current Sunday-Saturday followed by
     next Sunday-Saturday. CSS shows exactly three cards. JS scrolls the strip
     so today is the left-most visible card; previous current-week days are
     hidden to the left and the following days are hidden to the right.

   LANDSCAPE WIDTH BEHAVIOR:
     Standard landscape fills the viewport. Wide/short landscape screens are
     capped at a 16:9 working area and centered only after the viewport is wider than 17:9.
     Exact 16:9 screens such as 1280x720 use the standard landscape layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared reset / old-layout override
   -------------------------------------------------------------------------- */
html,
body {
  min-width: 0;
}

body.dashboard-page {
  margin: 0;
}

.dashboard-page .summary-strip {
  display: none !important;
}

.dashboard-page .app-shell {
  max-width: none !important;
  box-sizing: border-box;
}

.dashboard-page .dashboard-main {
  min-width: 0;
  min-height: 0;
}

.dashboard-page .card-grid {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.dashboard-page .card-grid > [data-card="calendar"]   { grid-area: calendar; }
.dashboard-page .card-grid > [data-card="quicklinks"] { grid-area: quicklinks; }
.dashboard-page .card-grid > [data-card="menu"]       { grid-area: menu; }
.dashboard-page .card-grid > [data-card="whiteboard"] { grid-area: whiteboard; }
.dashboard-page .card-grid > [data-card="chores"]     { grid-area: chores; }

.dashboard-page .card-grid > .card {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--fc-card-radius) !important;
}

.dashboard-page .card-grid .card__header {
  flex: 0 0 auto;
  min-height: var(--fc-header-min) !important;
  height: auto !important;
  padding: var(--fc-header-y) var(--fc-header-x) !important;
  gap: var(--fc-gap-sm) !important;
  align-items: center !important;
}

.dashboard-page .card-grid .card__body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  padding: var(--fc-body-pad) !important;
  box-sizing: border-box;
}

.dashboard-page .card-grid .card__title {
  margin: 0;
  font-size: var(--fc-title) !important;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.dashboard-page .card-grid .card__header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: var(--fc-gap-xs) !important;
  max-width: 58% !important;
}

.dashboard-page .card-grid,
.dashboard-page .card-grid p,
.dashboard-page .card-grid li,
.dashboard-page .card-grid .muted,
.dashboard-page .card-grid .empty-state,
.dashboard-page .card-grid .loading-state,
.dashboard-page .card-grid input,
.dashboard-page .card-grid select,
.dashboard-page .card-grid textarea {
  font-size: var(--fc-text) !important;
  line-height: 1.15;
}

.dashboard-page .card-grid .btn,
.dashboard-page .card-grid .btn-soft,
.dashboard-page .card-grid .btn-mini {
  width: auto !important;
  min-height: 0 !important;
  padding: var(--fc-btn-y) var(--fc-btn-x) !important;
  border-radius: 999px !important;
  font-size: var(--fc-small) !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.dashboard-page .card-grid .icon-btn {
  width: var(--fc-icon) !important;
  height: var(--fc-icon) !important;
  min-width: var(--fc-icon) !important;
  min-height: var(--fc-icon) !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: var(--fc-icon-font) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* --------------------------------------------------------------------------
   Quick links
   -------------------------------------------------------------------------- */
.dashboard-page .card--quicklinks .card__body {
  padding: var(--fc-quick-body-pad) !important;
  overflow: hidden;
}

.dashboard-page .quick-links-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex !important;
}

.dashboard-page .quick-links-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: var(--fc-quick-gap) !important;
  align-items: center !important;
}

.dashboard-page .quick-link-tile {
  width: 100% !important;
  height: var(--fc-quick-tile) !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: var(--fc-quick-tile-pad) !important;
  gap: var(--fc-quick-label-gap) !important;
  border-radius: var(--fc-tiny-radius) !important;
}

.dashboard-page .quick-link-icon {
  width: var(--fc-quick-icon) !important;
  height: var(--fc-quick-icon) !important;
  min-width: var(--fc-quick-icon) !important;
  min-height: var(--fc-quick-icon) !important;
  font-size: var(--fc-quick-icon-font) !important;
  border-radius: var(--fc-mini-radius) !important;
}

.dashboard-page .quick-link-label,
.dashboard-page .quick-link-tile__title,
.dashboard-page .quick-link-tile__sub {
  font-size: var(--fc-quick-label) !important;
  line-height: 1.02 !important;
}

/* --------------------------------------------------------------------------
   Calendar
   -------------------------------------------------------------------------- */
.dashboard-page .calendar-shell {
  height: 100%;
  min-height: 0;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: var(--fc-calendar-gap) !important;
  align-items: stretch !important;
}

.dashboard-page .calendar-mini-month,
.dashboard-page .day-summary-panel {
  min-width: 0;
  min-height: 0;
  border-radius: var(--fc-inner-radius) !important;
  padding: var(--fc-calendar-pad) !important;
}

.dashboard-page .calendar-mini-month {
  overflow: hidden !important;
}

.dashboard-page .day-summary-panel {
  overflow: auto !important;
}

.dashboard-page .calendar-month-header,
.dashboard-page .calendar-month-headline {
  gap: var(--fc-calendar-small-gap) !important;
  margin-bottom: var(--fc-calendar-small-gap) !important;
  align-items: center !important;
}

.dashboard-page .calendar-month-title,
.dashboard-page .calendar-month-subtitle,
.dashboard-page .mini-heading,
.dashboard-page .day-summary-section__title {
  font-size: var(--fc-calendar-heading) !important;
  line-height: 1.08 !important;
}

.dashboard-page .calendar-month-actions {
  gap: var(--fc-calendar-small-gap) !important;
  flex-wrap: nowrap !important;
}

.dashboard-page .calendar-weather-switch__btn,
.dashboard-page .js-calendar-open-overlay,
.dashboard-page .js-calendar-toggle-weeks,
.dashboard-page .js-calendar-prev-month,
.dashboard-page .js-calendar-next-month {
  min-height: 0 !important;
  padding: var(--fc-calendar-btn-y) var(--fc-calendar-btn-x) !important;
  border-radius: 999px !important;
  font-size: var(--fc-calendar-btn-text) !important;
  line-height: 1 !important;
}

.dashboard-page .calendar-weekdays,
.dashboard-page .calendar-mini-month__grid {
  gap: var(--fc-calendar-cell-gap) !important;
}

.dashboard-page .calendar-weekdays {
  margin-bottom: var(--fc-calendar-cell-gap) !important;
}

.dashboard-page .calendar-weekday {
  padding: 0 !important;
  font-size: var(--fc-calendar-small) !important;
  line-height: 1.1 !important;
}

.dashboard-page .calendar-day,
.dashboard-page .calendar-day--empty {
  min-height: 0 !important;
  border-radius: var(--fc-calendar-day-radius) !important;
  padding: var(--fc-calendar-day-pad) !important;
  overflow: hidden !important;
}

.dashboard-page .calendar-day__num {
  font-size: var(--fc-calendar-day-num) !important;
  line-height: 1 !important;
}

.dashboard-page .calendar-day__weather-icon {
  font-size: var(--fc-calendar-weather-icon) !important;
  line-height: 1 !important;
}

.dashboard-page .calendar-day__weather-temps {
  font-size: var(--fc-calendar-weather-text) !important;
  line-height: 1 !important;
}

.dashboard-page .calendar-day__weather {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.12em !important;
  min-width: 0 !important;
  flex-direction: column !important;
}

.dashboard-page .calendar-day__weather-icon,
.dashboard-page .calendar-day__weather-temps {
  flex: 0 0 auto !important;
}

.dashboard-page .calendar-day__dots {
  gap: var(--fc-dot-gap) !important;
  min-height: 0 !important;
}

.dashboard-page .dot {
  width: var(--fc-dot) !important;
  height: var(--fc-dot) !important;
}

.dashboard-page .day-summary-section {
  gap: var(--fc-summary-gap) !important;
  margin-top: var(--fc-summary-gap) !important;
}

.dashboard-page .day-event-row,
.dashboard-page .event-row {
  gap: var(--fc-summary-gap) !important;
}

.dashboard-page .event-dot {
  width: var(--fc-event-dot) !important;
  height: var(--fc-event-dot) !important;
}

.dashboard-page .event-time,
.dashboard-page .event-title,
.dashboard-page .event-source-label {
  font-size: var(--fc-event-text) !important;
}

/* --------------------------------------------------------------------------
   Weekly menu
   -------------------------------------------------------------------------- */
.dashboard-page .menu-dashboard-strip,
.dashboard-page .menu-preview {
  height: 100%;
  min-height: 0;
}

.dashboard-page .menu-preview {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: none !important;
  grid-auto-columns: calc((100% - (2 * var(--fc-menu-gap))) / 3) !important;
  gap: var(--fc-menu-gap) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.dashboard-page .menu-day {
  height: auto !important;
  min-height: 0 !important;
  flex: initial !important;
  padding: var(--fc-menu-pad) !important;
  border-radius: var(--fc-inner-radius) !important;
  gap: var(--fc-menu-inner-gap) !important;
  overflow: hidden !important;
  scroll-snap-align: start;
}

.dashboard-page .menu-day h3 {
  margin: 0 0 var(--fc-menu-title-gap) !important;
  font-size: var(--fc-menu-title) !important;
  line-height: 1.05 !important;
}

.dashboard-page .meal-entry {
  margin-top: var(--fc-menu-inner-gap) !important;
  gap: var(--fc-menu-chip-gap) !important;
}

.dashboard-page .meal-chip {
  min-height: 0 !important;
  padding: var(--fc-menu-chip-y) var(--fc-menu-chip-x) !important;
  border-radius: var(--fc-menu-chip-radius) !important;
  gap: 0 !important;
}

.dashboard-page .meal-chip__main,
.dashboard-page .meal-chip__text,
.dashboard-page .meal-chip .muted,
.dashboard-page .recipe-pill-btn {
  font-size: var(--fc-menu-text) !important;
  line-height: 1.08 !important;
}


/* v8 menu strip details */
.dashboard-page .menu-preview {
  scroll-padding-left: 0 !important;
}

.dashboard-page .menu-day[data-week-offset="1"] h3::after {
  content: "";
}

/* --------------------------------------------------------------------------
   Whiteboard
   -------------------------------------------------------------------------- */
.dashboard-page .shared-whiteboard {
  height: 100%;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--fc-white-gap) !important;
}

.dashboard-page .shared-whiteboard__head {
  flex: 0 0 auto;
  min-width: 0;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--fc-white-gap) !important;
}

.dashboard-page .shared-whiteboard__toolbar {
  width: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--fc-white-tool-gap) !important;
  min-width: 0;
}

.dashboard-page .shared-whiteboard__toolbar > * {
  width: auto !important;
}

.dashboard-page .whiteboard-color-group,
.dashboard-page .whiteboard-swatches {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--fc-white-tool-gap) !important;
}

.dashboard-page .whiteboard-control {
  width: auto !important;
  min-height: 0 !important;
  padding: 0 var(--fc-white-control-x) !important;
  border-radius: 999px !important;
  font-size: var(--fc-white-text) !important;
  line-height: 1 !important;
}

.dashboard-page .whiteboard-control span {
  padding: var(--fc-white-control-y) var(--fc-white-label-x) !important;
  font-size: var(--fc-white-text) !important;
  line-height: 1 !important;
}

.dashboard-page .whiteboard-control input[type="color"] {
  width: var(--fc-white-color) !important;
  height: var(--fc-white-color) !important;
  min-width: var(--fc-white-color) !important;
  min-height: 0 !important;
  padding: var(--fc-white-color-pad) !important;
  border-radius: 999px !important;
}

.dashboard-page .whiteboard-swatch {
  width: var(--fc-white-swatch) !important;
  height: var(--fc-white-swatch) !important;
  min-width: var(--fc-white-swatch) !important;
  min-height: var(--fc-white-swatch) !important;
  border-width: 1px !important;
  flex: 0 0 var(--fc-white-swatch) !important;
}

.dashboard-page .whiteboard-control input[type="range"] {
  width: var(--fc-white-range) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: var(--fc-white-range-height) !important;
}

.dashboard-page .whiteboard-control--size strong {
  min-width: var(--fc-white-strong) !important;
  font-size: var(--fc-white-text) !important;
}

.dashboard-page .shared-whiteboard__stage {
  flex: 1 1 auto;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding: var(--fc-white-stage-pad) !important;
  border-radius: var(--fc-inner-radius) !important;
}

.dashboard-page .shared-whiteboard__canvas {
  width: 100% !important;
  height: 100% !important;
}

/* --------------------------------------------------------------------------
   Chores
   -------------------------------------------------------------------------- */
.dashboard-page .child-chore-columns {
  width: 100%;
  min-height: 0;
  gap: var(--fc-chore-gap) !important;
}

.dashboard-page .child-chore-panel {
  min-width: 0;
  min-height: 0;
  padding: var(--fc-chore-pad) !important;
  border-radius: var(--fc-inner-radius) !important;
  overflow: hidden !important;
}

.dashboard-page .child-chore-panel__head {
  min-width: 0;
  margin: 0 0 var(--fc-chore-head-gap) 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}

.dashboard-page .child-chore-panel__head img,
.dashboard-page .child-chore-panel__head [aria-label][title] {
  width: var(--fc-avatar) !important;
  height: var(--fc-avatar) !important;
  min-width: var(--fc-avatar) !important;
  flex-basis: var(--fc-avatar) !important;
}

.dashboard-page .child-badge {
  min-height: 0 !important;
  padding: var(--fc-badge-y) var(--fc-badge-x) !important;
  border-radius: 999px !important;
  font-size: var(--fc-badge-text) !important;
  line-height: 1 !important;
}

.dashboard-page .task-list {
  min-height: 0;
  gap: var(--fc-task-gap) !important;
  overflow: auto !important;
}

.dashboard-page .task-row {
  min-height: 0 !important;
  padding: var(--fc-task-y) var(--fc-task-x) !important;
  border-radius: var(--fc-task-radius) !important;
  gap: var(--fc-task-gap) !important;
  align-items: center !important;
}

.dashboard-page .task-row input[type="checkbox"] {
  width: var(--fc-check) !important;
  height: var(--fc-check) !important;
  min-width: var(--fc-check) !important;
  min-height: 0 !important;
  margin: 0 var(--fc-check-gap) 0 0 !important;
  flex: 0 0 var(--fc-check) !important;
}

.dashboard-page .task-row__text,
.dashboard-page .task-row .muted {
  font-size: var(--fc-task-text) !important;
  line-height: 1.08 !important;
}

/* ========================================================================
   LANDSCAPE: one-screen kiosk layout
   ======================================================================== */
@media (orientation: landscape) {
  html {
    overflow: hidden !important;
  }

  body.dashboard-page {
    width: 100vw;
    height: 100dvh;
    overflow: hidden !important;
  }

  .dashboard-page {
    --fc-page-pad: clamp(3px, 0.45vw, 8px);
    --fc-gap: clamp(5px, 0.72vw, 8px);
    --fc-gap-sm: clamp(4px, 0.6vw, 8px);
    --fc-gap-xs: clamp(3px, 0.45vw, 6px);
    --fc-card-radius: clamp(12px, 1.35vw, 22px);
    --fc-inner-radius: clamp(8px, 1.05vw, 16px);
    --fc-tiny-radius: clamp(4px, 0.55vw, 7px);
    --fc-mini-radius: clamp(4px, 0.55vw, 7px);

    --fc-title: clamp(15px, 1.42vw, 20px);
    --fc-text: clamp(8px, 0.82vw, 12px);
    --fc-small: clamp(7px, 0.72vw, 10px);
    --fc-header-min: clamp(21px, 3.2vh, 34px);
    --fc-header-y: clamp(2px, 0.48vw, 5px);
    --fc-header-x: clamp(7px, 1.15vw, 15px);
    --fc-body-pad: clamp(5px, 0.72vw, 9px);
    --fc-icon: clamp(17px, 1.95vw, 27px);
    --fc-icon-font: clamp(9px, 1vw, 14px);
    --fc-btn-y: clamp(2px, 0.32vw, 5px);
    --fc-btn-x: clamp(5px, 0.65vw, 10px);

    --fc-quick-body-pad: clamp(4px, 0.62vw, 8px) clamp(8px, 1.1vw, 14px);
    --fc-quick-gap: clamp(8px, 1.8vw, 26px);
    --fc-quick-tile: clamp(27px, 5.1vh, 42px);
    --fc-quick-tile-pad: clamp(3px, 0.42vw, 6px);
    --fc-quick-label-gap: clamp(2px, 0.25vw, 4px);
    --fc-quick-icon: clamp(14px, 2.1vh, 22px);
    --fc-quick-icon-font: clamp(8px, 1vh, 12px);
    --fc-quick-label: clamp(6px, 0.66vw, 9px);

    --fc-calendar-gap: clamp(5px, 0.72vw, 9px);
    --fc-calendar-pad: clamp(5px, 0.75vw, 10px);
    --fc-calendar-small-gap: clamp(2px, 0.5vw, 7px);
    --fc-calendar-heading: clamp(11px, 1.12vw, 15px);
    --fc-calendar-btn-y: clamp(2px, 0.32vw, 4px);
    --fc-calendar-btn-x: clamp(5px, 0.68vw, 9px);
    --fc-calendar-btn-text: clamp(7px, 0.68vw, 10px);
    --fc-calendar-cell-gap: clamp(2px, 0.4vw, 5px);
    --fc-calendar-day-radius: clamp(6px, 0.9vw, 11px);
    --fc-calendar-day-pad: clamp(3px, 0.5vw, 6px);
    --fc-calendar-small: clamp(8px, 0.78vw, 11px);
    --fc-calendar-day-num: clamp(10px, 1.02vw, 15px);
    --fc-calendar-weather-icon: clamp(14px, 1.45vw, 21px);
    --fc-calendar-weather-text: clamp(8px, 0.8vw, 12px);
    --fc-dot: clamp(4px, 0.55vw, 7px);
    --fc-dot-gap: clamp(1px, 0.25vw, 4px);
    --fc-summary-gap: clamp(3px, 0.45vw, 6px);
    --fc-event-dot: clamp(5px, 0.7vw, 9px);
    --fc-event-text: clamp(9px, 0.9vw, 13px);

    --fc-menu-gap: clamp(5px, 0.75vw, 9px);
    --fc-menu-pad: clamp(5px, 0.75vw, 10px);
    --fc-menu-inner-gap: clamp(1px, 0.28vw, 4px);
    --fc-menu-title-gap: clamp(1px, 0.3vw, 4px);
    --fc-menu-title: clamp(13px, 1.25vw, 18px);
    --fc-menu-text: clamp(9px, 0.83vw, 12px);
    --fc-menu-chip-gap: 1px;
    --fc-menu-chip-y: clamp(2px, 0.26vw, 4px);
    --fc-menu-chip-x: clamp(5px, 0.62vw, 9px);
    --fc-menu-chip-radius: clamp(4px, 0.65vw, 8px);

    --fc-white-gap: clamp(4px, 0.55vw, 7px);
    --fc-white-tool-gap: clamp(3px, 0.45vw, 6px);
    --fc-white-text: clamp(6px, 0.62vw, 9px);
    --fc-white-control-x: clamp(4px, 0.58vw, 8px);
    --fc-white-control-y: clamp(1px, 0.22vw, 3px);
    --fc-white-label-x: clamp(1px, 0.25vw, 3px);
    --fc-white-color: clamp(14px, 2.3vh, 20px);
    --fc-white-color-pad: 1px;
    --fc-white-swatch: clamp(9px, 1.55vh, 13px);
    --fc-white-range: clamp(48px, 8vw, 92px);
    --fc-white-range-height: clamp(10px, 1.6vh, 16px);
    --fc-white-strong: clamp(8px, 1vw, 14px);
    --fc-white-stage-pad: clamp(4px, 0.55vw, 8px);

    --fc-chore-gap: clamp(5px, 0.85vw, 12px);
    --fc-chore-pad: clamp(5px, 0.75vw, 10px);
    --fc-chore-head-gap: clamp(3px, 0.45vw, 7px);
    --fc-avatar: clamp(26px, 5vh, 40px);
    --fc-badge-y: clamp(2px, 0.35vw, 5px);
    --fc-badge-x: clamp(6px, 0.7vw, 10px);
    --fc-badge-text: clamp(7px, 0.66vw, 10px);
    --fc-task-gap: clamp(2px, 0.36vw, 5px);
    --fc-task-y: clamp(2px, 0.32vw, 5px);
    --fc-task-x: clamp(4px, 0.55vw, 8px);
    --fc-task-radius: clamp(6px, 0.8vw, 10px);
    --fc-check: clamp(12px, 2.05vh, 17px);
    --fc-check-gap: clamp(3px, 0.45vw, 7px);
    --fc-task-text: clamp(7px, 0.66vw, 10px);
  }

  .dashboard-page .app-viewport {
    width: 100vw;
    height: 100dvh;
    min-height: 0 !important;
    padding: var(--fc-page-pad) !important;
    overflow: hidden !important;
    box-sizing: border-box;
  }

  .dashboard-page .app-shell,
  .dashboard-page .dashboard-main {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
  }

  .dashboard-page .card-grid {
    width: 100%;
    height: 100%;
    display: grid !important;
    grid-template-areas:
      "calendar quicklinks"
      "calendar menu"
      "calendar whiteboard"
      "chores chores";
    grid-template-columns: minmax(0, 46.2%) minmax(0, 53.8%);
    grid-template-rows: 14.2% 25.4% 30.4% minmax(0, 26.6%);
    gap: var(--fc-gap) !important;
    align-items: stretch;
    overflow: hidden;
  }

  .dashboard-page .card-grid > .card {
    width: auto !important;
    height: auto !important;
  }

  .dashboard-page .card-grid .card__body {
    overflow: hidden !important;
  }

  .dashboard-page .child-chore-columns {
    height: 100%;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: stretch;
  }

  .dashboard-page .child-chore-panel {
    display: flex !important;
    flex-direction: column;
  }

  .dashboard-page .shared-whiteboard__head,
  .dashboard-page .shared-whiteboard__toolbar,
  .dashboard-page .whiteboard-color-group,
  .dashboard-page .whiteboard-swatches {
    flex-wrap: nowrap !important;
  }
}

/* ========================================================================
   PORTRAIT: scrollable stacked layout
   ======================================================================== */
@media (orientation: portrait) {
  html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.dashboard-page {
    width: 100%;
    min-height: 100dvh;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .dashboard-page {
    --fc-page-pad: clamp(4px, 1.2vw, 9px);
    --fc-gap: clamp(7px, 1.8vw, 12px);
    --fc-gap-sm: clamp(4px, 1.2vw, 8px);
    --fc-gap-xs: clamp(3px, 0.95vw, 7px);
    --fc-card-radius: clamp(10px, 3vw, 22px);
    --fc-inner-radius: clamp(7px, 2.1vw, 15px);
    --fc-tiny-radius: clamp(4px, 1.1vw, 8px);
    --fc-mini-radius: clamp(3px, 1vw, 7px);

    --fc-title: clamp(13px, 3.65vw, 20px);
    --fc-text: clamp(8px, 2vw, 13px);
    --fc-small: clamp(7px, 1.7vw, 11px);
    --fc-header-min: clamp(20px, 5.2vw, 36px);
    --fc-header-y: clamp(3px, 1vw, 6px);
    --fc-header-x: clamp(6px, 1.8vw, 13px);
    --fc-body-pad: clamp(6px, 1.65vw, 11px);
    --fc-icon: clamp(16px, 4vw, 26px);
    --fc-icon-font: clamp(8px, 2vw, 13px);
    --fc-btn-y: clamp(3px, 0.9vw, 5px);
    --fc-btn-x: clamp(5px, 1.55vw, 9px);

    --fc-quick-body-pad: clamp(5px, 1.6vw, 10px) clamp(8px, 2.5vw, 16px);
    --fc-quick-gap: clamp(7px, 3.6vw, 28px);
    --fc-quick-tile: clamp(30px, 8.5vw, 54px);
    --fc-quick-tile-pad: clamp(3px, 1vw, 6px);
    --fc-quick-label-gap: clamp(2px, 0.8vw, 5px);
    --fc-quick-icon: clamp(13px, 3.6vw, 23px);
    --fc-quick-icon-font: clamp(7px, 1.8vw, 12px);
    --fc-quick-label: clamp(6px, 1.45vw, 10px);

    --fc-calendar-gap: clamp(6px, 1.5vw, 10px);
    --fc-calendar-pad: clamp(7px, 1.8vw, 12px);
    --fc-calendar-small-gap: clamp(3px, 1vw, 7px);
    --fc-calendar-heading: clamp(10px, 2.7vw, 15px);
    --fc-calendar-btn-y: clamp(2px, 0.8vw, 5px);
    --fc-calendar-btn-x: clamp(4px, 1.2vw, 8px);
    --fc-calendar-btn-text: clamp(6px, 1.45vw, 10px);
    --fc-calendar-cell-gap: clamp(3px, 0.85vw, 5px);
    --fc-calendar-day-radius: clamp(6px, 1.6vw, 10px);
    --fc-calendar-day-pad: clamp(3px, 1vw, 5px);
    --fc-calendar-small: clamp(7px, 1.75vw, 11px);
    --fc-calendar-day-num: clamp(9px, 2.25vw, 14px);
    --fc-calendar-weather-icon: clamp(12px, 3.25vw, 19px);
    --fc-calendar-weather-text: clamp(7px, 1.75vw, 11px);
    --fc-dot: clamp(3px, 1vw, 6px);
    --fc-dot-gap: 2px;
    --fc-summary-gap: clamp(3px, 1vw, 7px);
    --fc-event-dot: clamp(5px, 1.45vw, 8px);
    --fc-event-text: clamp(8px, 2vw, 13px);

    --fc-menu-gap: clamp(4px, 1.1vw, 8px);
    --fc-menu-pad: clamp(5px, 1.35vw, 9px);
    --fc-menu-inner-gap: clamp(1px, 0.75vw, 4px);
    --fc-menu-title-gap: clamp(1px, 0.7vw, 4px);
    --fc-menu-title: clamp(11px, 2.75vw, 17px);
    --fc-menu-text: clamp(8px, 1.85vw, 12px);
    --fc-menu-chip-gap: 1px;
    --fc-menu-chip-y: clamp(1px, 0.55vw, 3px);
    --fc-menu-chip-x: clamp(3px, 1vw, 6px);
    --fc-menu-chip-radius: clamp(4px, 1.2vw, 8px);

    --fc-white-gap: clamp(5px, 1.25vw, 8px);
    --fc-white-tool-gap: clamp(4px, 1vw, 7px);
    --fc-white-text: clamp(6px, 1.55vw, 10px);
    --fc-white-control-x: clamp(4px, 1.3vw, 8px);
    --fc-white-control-y: clamp(2px, 0.75vw, 4px);
    --fc-white-label-x: clamp(1px, 0.7vw, 4px);
    --fc-white-color: clamp(16px, 4vw, 24px);
    --fc-white-color-pad: 2px;
    --fc-white-swatch: clamp(10px, 2.8vw, 16px);
    --fc-white-range: clamp(48px, 18vw, 100px);
    --fc-white-range-height: clamp(10px, 2.6vw, 16px);
    --fc-white-strong: clamp(8px, 2.1vw, 15px);
    --fc-white-stage-pad: clamp(4px, 1.2vw, 8px);

    --fc-chore-gap: clamp(4px, 1.15vw, 8px);
    --fc-chore-pad: clamp(4px, 1.3vw, 8px);
    --fc-chore-head-gap: 0;
    --fc-avatar: clamp(22px, 6.2vw, 38px);
    --fc-badge-y: clamp(2px, 0.75vw, 5px);
    --fc-badge-x: clamp(6px, 1.6vw, 10px);
    --fc-badge-text: clamp(6px, 1.45vw, 10px);
    --fc-task-gap: clamp(2px, 0.75vw, 5px);
    --fc-task-y: clamp(2px, 0.8vw, 5px);
    --fc-task-x: clamp(4px, 1.2vw, 7px);
    --fc-task-radius: clamp(6px, 1.6vw, 10px);
    --fc-check: clamp(10px, 3vw, 16px);
    --fc-check-gap: clamp(3px, 0.9vw, 6px);
    --fc-task-text: clamp(6px, 1.45vw, 10px);
  }

  .dashboard-page .app-viewport {
    width: 100%;
    min-height: 100dvh;
    height: auto !important;
    padding: var(--fc-page-pad) !important;
    overflow: visible !important;
    box-sizing: border-box;
  }

  .dashboard-page .app-shell,
  .dashboard-page .dashboard-main {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .dashboard-page .card-grid {
    width: 100%;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--fc-gap) !important;
    overflow: visible !important;
  }

  .dashboard-page .card-grid > .card {
    width: 100% !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }

  .dashboard-page .card-grid .card__body {
    overflow: hidden !important;
  }

  .dashboard-page .card-grid > [data-card="quicklinks"] { order: 1 !important; min-height: clamp(72px, 19vw, 110px) !important; }
  .dashboard-page .card-grid > [data-card="calendar"]   { order: 2 !important; min-height: clamp(255px, 76vw, 440px) !important; }
  .dashboard-page .card-grid > [data-card="menu"]       { order: 3 !important; min-height: clamp(150px, 40vw, 255px) !important; }
  .dashboard-page .card-grid > [data-card="chores"]     { order: 4 !important; min-height: 0 !important; }
  .dashboard-page .card-grid > [data-card="whiteboard"] { order: 5 !important; min-height: clamp(220px, 56vw, 340px) !important; }

  .dashboard-page .calendar-shell {
    grid-template-rows: auto minmax(100px, 1fr) !important;
  }

  .dashboard-page .menu-preview {
    grid-template-columns: none !important;
    grid-auto-columns: calc((100% - (2 * var(--fc-menu-gap))) / 3) !important;
  }

  .dashboard-page .child-chore-columns {
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
  }

  .dashboard-page .child-chore-panel {
    min-height: clamp(36px, 10vw, 52px) !important;
    display: grid !important;
    grid-template-columns: minmax(86px, 32%) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: var(--fc-chore-gap) !important;
  }

  .dashboard-page .child-chore-panel__head {
    margin: 0 !important;
  }

  .dashboard-page .child-chore-panel__head > div {
    gap: var(--fc-chore-gap) !important;
  }

  .dashboard-page .task-list {
    display: grid !important;
    align-content: center !important;
  }

  .dashboard-page .task-list:empty {
    display: none !important;
  }

  .dashboard-page .shared-whiteboard__head {
    flex-wrap: wrap !important;
    align-content: start !important;
  }

  .dashboard-page .shared-whiteboard__toolbar {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
  }

  .dashboard-page .whiteboard-color-group,
  .dashboard-page .whiteboard-swatches {
    flex-wrap: nowrap !important;
  }
}


/* ========================================================================
   LANDSCAPE-WIDE / SHORT: cap the working area at 16:9
   ------------------------------------------------------------------------
   This is the third layout behavior. It is still the normal landscape card
   arrangement, but the app stops stretching wider than 16:9. This fixes
   phone-landscape and other wide/short viewports where VW-based scaling makes
   the dashboard too wide for the available height.
   ======================================================================== */
@media (orientation: landscape) and (min-aspect-ratio: 17 / 9) {
  .dashboard-page .app-viewport {
    display: grid !important;
    place-items: center !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .dashboard-page .app-shell,
  .dashboard-page .dashboard-main {
    height: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto !important;
  }

  .dashboard-page .card-grid {
    width: 100% !important;
    height: 100% !important;
  }
}

/* Height-led scaling for wide/short landscape screens.
   These variables intentionally use dvh more than vw. */
@media (orientation: landscape) and (min-aspect-ratio: 17 / 9) {
  .dashboard-page {
    --fc-page-pad: clamp(3px, 1.05dvh, 7px);
    --fc-gap: clamp(4px, 1.45dvh, 8px);
    --fc-gap-sm: clamp(3px, 1.15dvh, 7px);
    --fc-gap-xs: clamp(2px, 0.9dvh, 5px);
    --fc-card-radius: clamp(10px, 3.7dvh, 20px);
    --fc-inner-radius: clamp(7px, 2.65dvh, 15px);
    --fc-tiny-radius: clamp(4px, 1.15dvh, 7px);
    --fc-mini-radius: clamp(4px, 1.15dvh, 7px);

    --fc-title: clamp(13px, 3.65dvh, 19px);
    --fc-text: clamp(8px, 2.08dvh, 12px);
    --fc-small: clamp(7px, 1.78dvh, 10px);
    --fc-header-min: clamp(20px, 6.8dvh, 32px);
    --fc-header-y: clamp(2px, 1dvh, 5px);
    --fc-header-x: clamp(6px, 2.5dvh, 13px);
    --fc-body-pad: clamp(4px, 1.65dvh, 9px);
    --fc-icon: clamp(16px, 5.3dvh, 26px);
    --fc-icon-font: clamp(8px, 2.55dvh, 13px);
    --fc-btn-y: clamp(2px, 0.82dvh, 4px);
    --fc-btn-x: clamp(5px, 1.9dvh, 9px);

    --fc-quick-body-pad: clamp(4px, 1.45dvh, 8px) clamp(7px, 2.6dvh, 13px);
    --fc-quick-gap: clamp(7px, 4.2dvh, 22px);
    --fc-quick-tile: clamp(25px, 7.7dvh, 40px);
    --fc-quick-tile-pad: clamp(2px, 1dvh, 5px);
    --fc-quick-label-gap: clamp(1px, 0.65dvh, 4px);
    --fc-quick-icon: clamp(13px, 4.1dvh, 21px);
    --fc-quick-icon-font: clamp(7px, 2.15dvh, 11px);
    --fc-quick-label: clamp(6px, 1.58dvh, 9px);

    --fc-calendar-gap: clamp(4px, 1.6dvh, 8px);
    --fc-calendar-pad: clamp(4px, 1.7dvh, 9px);
    --fc-calendar-small-gap: clamp(2px, 1.05dvh, 6px);
    --fc-calendar-heading: clamp(10px, 2.72dvh, 14px);
    --fc-calendar-btn-y: clamp(1px, 0.78dvh, 4px);
    --fc-calendar-btn-x: clamp(4px, 1.75dvh, 8px);
    --fc-calendar-btn-text: clamp(7px, 1.62dvh, 9px);
    --fc-calendar-cell-gap: clamp(2px, 0.95dvh, 5px);
    --fc-calendar-day-radius: clamp(5px, 2.1dvh, 10px);
    --fc-calendar-day-pad: clamp(2px, 1.05dvh, 5px);
    --fc-calendar-small: clamp(7px, 1.82dvh, 10px);
    --fc-calendar-day-num: clamp(9px, 2.45dvh, 14px);
    --fc-calendar-weather-icon: clamp(13px, 3.6dvh, 20px);
    --fc-calendar-weather-text: clamp(7px, 1.9dvh, 11px);
    --fc-dot: clamp(3px, 1.25dvh, 6px);
    --fc-dot-gap: clamp(1px, 0.55dvh, 3px);
    --fc-summary-gap: clamp(3px, 1.05dvh, 6px);
    --fc-event-dot: clamp(5px, 1.65dvh, 8px);
    --fc-event-text: clamp(8px, 2.05dvh, 12px);

    --fc-menu-gap: clamp(4px, 1.65dvh, 8px);
    --fc-menu-pad: clamp(4px, 1.7dvh, 9px);
    --fc-menu-inner-gap: clamp(1px, 0.7dvh, 4px);
    --fc-menu-title-gap: clamp(1px, 0.72dvh, 4px);
    --fc-menu-title: clamp(11px, 3dvh, 16px);
    --fc-menu-text: clamp(8px, 2dvh, 11px);
    --fc-menu-chip-gap: 1px;
    --fc-menu-chip-y: clamp(1px, 0.55dvh, 3px);
    --fc-menu-chip-x: clamp(3px, 1.45dvh, 7px);
    --fc-menu-chip-radius: clamp(4px, 1.45dvh, 7px);

    --fc-white-gap: clamp(3px, 1.22dvh, 6px);
    --fc-white-tool-gap: clamp(2px, 1dvh, 5px);
    --fc-white-text: clamp(6px, 1.45dvh, 9px);
    --fc-white-control-x: clamp(4px, 1.55dvh, 8px);
    --fc-white-control-y: clamp(1px, 0.52dvh, 3px);
    --fc-white-label-x: clamp(1px, 0.58dvh, 3px);
    --fc-white-color: clamp(13px, 4.1dvh, 19px);
    --fc-white-color-pad: 1px;
    --fc-white-swatch: clamp(8px, 2.65dvh, 13px);
    --fc-white-range: clamp(44px, 15dvh, 88px);
    --fc-white-range-height: clamp(9px, 2.4dvh, 15px);
    --fc-white-strong: clamp(8px, 2.35dvh, 13px);
    --fc-white-stage-pad: clamp(3px, 1.25dvh, 7px);

    --fc-chore-gap: clamp(4px, 1.75dvh, 9px);
    --fc-chore-pad: clamp(4px, 1.7dvh, 8px);
    --fc-chore-head-gap: clamp(2px, 1dvh, 6px);
    --fc-avatar: clamp(23px, 8.2dvh, 36px);
    --fc-badge-y: clamp(2px, 0.9dvh, 4px);
    --fc-badge-x: clamp(5px, 1.8dvh, 9px);
    --fc-badge-text: clamp(6px, 1.6dvh, 9px);
    --fc-task-gap: clamp(2px, 0.85dvh, 4px);
    --fc-task-y: clamp(2px, 0.75dvh, 4px);
    --fc-task-x: clamp(3px, 1.25dvh, 7px);
    --fc-task-radius: clamp(5px, 1.85dvh, 9px);
    --fc-check: clamp(11px, 3.35dvh, 16px);
    --fc-check-gap: clamp(2px, 1.1dvh, 6px);
    --fc-task-text: clamp(7px, 1.65dvh, 9px);
  }
}

/* Extra compact tuning for very short landscape devices. */
@media (orientation: landscape) and (max-height: 500px) {
  .dashboard-page .card-grid {
    grid-template-rows: 13.5% 25.8% 30.7% minmax(0, 26.4%) !important;
  }

  .dashboard-page .calendar-shell {
    gap: var(--fc-calendar-gap) !important;
  }

  .dashboard-page .card-grid .card__header {
    padding-top: max(2px, calc(var(--fc-header-y) * 0.75)) !important;
    padding-bottom: max(2px, calc(var(--fc-header-y) * 0.75)) !important;
  }

  .dashboard-page .shared-whiteboard__toolbar {
    gap: max(2px, calc(var(--fc-white-tool-gap) * 0.75)) !important;
  }
}


/* ========================================================================
   v8 ULTRA-WIDE COMPACT SCALE FIX
   ------------------------------------------------------------------------
   The 1280x720 reference should stay visually like the standard landscape
   layout. Only landscape screens wider than 17:9 get the capped shell and the
   compact height-led variables below.

   The key change from v7 is that the compact mode removes the large pixel
   minimums that were preventing fonts/icons/cards from shrinking on screens
   like 882x411. Values still have small safety minimums, but they are low
   enough that the whole 16:9 working area can scale down proportionally.
   ======================================================================== */
@media (orientation: landscape) and (min-aspect-ratio: 17 / 9) {
  .dashboard-page {
    --fc-page-pad: max(2px, 0.9dvh);
    --fc-gap: max(3px, 1.05dvh);
    --fc-gap-sm: max(2px, 0.85dvh);
    --fc-gap-xs: max(2px, 0.65dvh);

    --fc-card-radius: max(8px, 2.8dvh);
    --fc-inner-radius: max(6px, 2.05dvh);
    --fc-tiny-radius: max(3px, 0.9dvh);
    --fc-mini-radius: max(3px, 0.9dvh);

    --fc-title: max(10px, 2.55dvh);
    --fc-text: max(6px, 1.45dvh);
    --fc-small: max(5px, 1.22dvh);
    --fc-header-min: max(17px, 5.2dvh);
    --fc-header-y: max(1px, 0.55dvh);
    --fc-header-x: max(4px, 1.65dvh);
    --fc-body-pad: max(3px, 1.15dvh);
    --fc-icon: max(13px, 3.85dvh);
    --fc-icon-font: max(7px, 1.9dvh);
    --fc-btn-y: max(1px, 0.55dvh);
    --fc-btn-x: max(3px, 1.35dvh);

    --fc-quick-body-pad: max(3px, 1dvh) max(5px, 1.8dvh);
    --fc-quick-gap: max(5px, 3dvh);
    --fc-quick-tile: max(21px, 6.1dvh);
    --fc-quick-tile-pad: max(1px, 0.65dvh);
    --fc-quick-label-gap: max(1px, 0.42dvh);
    --fc-quick-icon: max(10px, 3dvh);
    --fc-quick-icon-font: max(6px, 1.55dvh);
    --fc-quick-label: max(5px, 1.12dvh);

    --fc-calendar-gap: max(3px, 1.05dvh);
    --fc-calendar-pad: max(3px, 1.12dvh);
    --fc-calendar-small-gap: max(1px, 0.7dvh);
    --fc-calendar-heading: max(8px, 1.9dvh);
    --fc-calendar-btn-y: max(1px, 0.44dvh);
    --fc-calendar-btn-x: max(3px, 1.15dvh);
    --fc-calendar-btn-text: max(5px, 1.12dvh);
    --fc-calendar-cell-gap: max(1px, 0.62dvh);
    --fc-calendar-day-radius: max(4px, 1.45dvh);
    --fc-calendar-day-pad: max(1px, 0.62dvh);
    --fc-calendar-small: max(5px, 1.18dvh);
    --fc-calendar-day-num: max(7px, 1.72dvh);
    --fc-calendar-weather-icon: max(10px, 2.55dvh);
    --fc-calendar-weather-text: max(5px, 1.25dvh);
    --fc-dot: max(2px, 0.72dvh);
    --fc-dot-gap: max(1px, 0.32dvh);
    --fc-summary-gap: max(2px, 0.74dvh);
    --fc-event-dot: max(3px, 1.1dvh);
    --fc-event-text: max(6px, 1.42dvh);

    --fc-menu-gap: max(3px, 1.05dvh);
    --fc-menu-pad: max(3px, 1.12dvh);
    --fc-menu-inner-gap: max(1px, 0.45dvh);
    --fc-menu-title-gap: max(1px, 0.45dvh);
    --fc-menu-title: max(8px, 2dvh);
    --fc-menu-text: max(6px, 1.38dvh);
    --fc-menu-chip-gap: 1px;
    --fc-menu-chip-y: max(1px, 0.34dvh);
    --fc-menu-chip-x: max(2px, 0.9dvh);
    --fc-menu-chip-radius: max(3px, 1dvh);

    --fc-white-gap: max(2px, 0.78dvh);
    --fc-white-tool-gap: max(2px, 0.64dvh);
    --fc-white-text: max(5px, 1.02dvh);
    --fc-white-control-x: max(3px, 1.08dvh);
    --fc-white-control-y: max(1px, 0.36dvh);
    --fc-white-label-x: max(1px, 0.4dvh);
    --fc-white-color: max(11px, 2.85dvh);
    --fc-white-color-pad: 1px;
    --fc-white-swatch: max(7px, 1.86dvh);
    --fc-white-range: max(36px, 10.6dvh);
    --fc-white-range-height: max(8px, 1.65dvh);
    --fc-white-strong: max(6px, 1.55dvh);
    --fc-white-stage-pad: max(2px, 0.78dvh);

    --fc-chore-gap: max(3px, 1.18dvh);
    --fc-chore-pad: max(3px, 1.08dvh);
    --fc-chore-head-gap: max(1px, 0.65dvh);
    --fc-avatar: max(18px, 5.65dvh);
    --fc-badge-y: max(1px, 0.5dvh);
    --fc-badge-x: max(4px, 1.2dvh);
    --fc-badge-text: max(5px, 1.12dvh);
    --fc-task-gap: max(1px, 0.55dvh);
    --fc-task-y: max(1px, 0.48dvh);
    --fc-task-x: max(2px, 0.88dvh);
    --fc-task-radius: max(4px, 1.3dvh);
    --fc-check: max(9px, 2.3dvh);
    --fc-check-gap: max(2px, 0.75dvh);
    --fc-task-text: max(5px, 1.12dvh);
  }

  .dashboard-page .card-grid {
    grid-template-columns: minmax(0, 46.2%) minmax(0, 53.8%) !important;
    grid-template-rows: 14.2% 25.4% 30.4% minmax(0, 26.6%) !important;
  }

  .dashboard-page .card-grid .card__header {
    padding-top: var(--fc-header-y) !important;
    padding-bottom: var(--fc-header-y) !important;
  }

  .dashboard-page .calendar-mini-month,
  .dashboard-page .day-summary-panel,
  .dashboard-page .menu-day,
  .dashboard-page .child-chore-panel,
  .dashboard-page .shared-whiteboard__stage {
    padding: var(--fc-body-pad) !important;
  }

  .dashboard-page .child-chore-panel {
    overflow: hidden !important;
  }

  .dashboard-page .child-chore-panel__head {
    flex: 0 0 auto !important;
  }

  .dashboard-page .task-list {
    overflow: hidden !important;
  }

  .dashboard-page .calendar-day__weather {
    transform: none !important;
  }
}


/* v9: menu meal text opens recipe card when linked. The old recipe button is intentionally hidden if stale markup remains cached. */
.dashboard-page [data-card="menu"] .meal-chip__recipe-wrap,
.dashboard-page [data-card="menu"] .recipe-pill-btn {
  display: none !important;
}

.dashboard-page [data-card="menu"] .meal-chip--has-recipe .meal-chip__main {
  cursor: pointer;
}

.dashboard-page [data-card="menu"] .meal-chip--has-recipe .meal-chip__text {
  text-decoration: none;
}

.dashboard-page [data-card="menu"] .meal-chip--has-recipe:hover .meal-chip__text {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}