/* Loaded after the feature styles. Real layout boxes, not overlapping pseudo hit areas. */
@media (pointer: coarse) {
  /* Never resize Shopping checks or turn historical span.check marks into controls. */
  .chore > button.check[data-complete],
  .chore > button.check[data-uncomplete],
  .today-shell .kid-column .chore > button.check[data-complete],
  .today-shell .kid-column .chore > button.check[data-uncomplete] {
    --check-size: 44px;
    margin: 0;
    align-self: center;
  }
  .chore > div { min-width: 0; overflow-wrap: anywhere; }
  .kid-column .kid-link,
  .responsibility-order-row button.text-button,
  .sidebar-bottom button,
  .board-agenda button.icon-button,
  .board-calendar button.icon-button,
  .selected-agenda button.icon-button {
    min-width: 44px;
    min-height: 44px;
  }
  .responsibility-order-row > div { display: flex; flex-wrap: wrap; gap: 8px; }

  /* Seven 44px columns need 308px of actual space. Narrow phones can scroll
     this grid locally; no target extends across the adjacent date's box. */
  .month-grid {
    grid-template-columns: repeat(7, minmax(44px, 1fr));
    overflow-x: auto;
  }
  .month-grid button[data-date],
  .today-shell .month-grid button[data-date],
  .kid-home-calendar .month-grid button[data-date] {
    min-width: 44px;
    min-height: 44px;
    height: auto;
  }
  .month-title { flex-wrap: wrap; }
  .today-shell .month-title { flex-wrap: wrap; }
  .month-title button,
  .full-month .calendar-date,
  .full-month .calendar-event {
    min-width: 44px;
    min-height: 44px;
  }
  .month-title > div { flex-wrap: wrap; }

  .meal-calendar.meal-month {
    grid-template-columns: repeat(7, minmax(90px, 1fr));
    overflow-x: auto;
  }
  .meal-calendar button[data-meal-action],
  .meal-month .planned-meal > button:first-child,
  .recipe-tile button[data-meal-action] {
    min-width: 44px;
    min-height: 44px;
  }
  /* The month view intentionally hides its secondary Move links; keep that
     hierarchy and enlarge only the visible primary Plan/Open control. */
  .planned-meal .meal-move { margin-left: 0; margin-right: 8px; }
  .meal-month .planned-meal > button:first-child {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Nook styles reset button padding and set 36/40px heights. Scope these
     overrides to the Nook, preserving its 48/56px quick-reading controls. */
  .reading-nook button,
  .reading-nook .rn-btn,
  .reading-nook .rn-btn.rn-small,
  .reading-nook .rn-spine,
  .reading-nook .rn-seg button,
  .reading-nook summary,
  .reading-nook .rn-basis summary,
  .reading-nook .rn-searchbox input {
    min-width: 44px;
    min-height: 44px;
  }
  .reading-nook .rn-btn.rn-log-primary,
  .reading-nook .rn-quick-log > .rn-actions .rn-btn { min-height: 48px; }
  .reading-nook .rn-stepper .rn-btn { min-height: 56px; }
  .reading-nook.rn-form .rn-check { min-height: 44px; }
  .reading-nook .rn-choice > span { min-width: 44px; }
  .reading-nook .rn-rating-choices .rn-choice-row { flex-wrap: wrap; }
}

@media (pointer: coarse) and (min-width: 740px) {
  .today-shell .family-board { grid-template-columns: 342px minmax(0, 1fr); }
  /* Move the stars below the title rather than squeeze a fixed metric column
     between a full-size check and the edge of a narrow child card. */
  .today-shell .kid-column .chore:has(> button.check) {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
  }
  .today-shell .kid-column .chore:has(> button.check) .stars {
    grid-column: 2;
    margin: 0;
    padding: 0;
  }
}

@media (pointer: coarse) and (min-width: 740px) and (max-width: 1000px) {
  /* Portrait: keep all child columns readable instead of a 342px calendar
     squeezing three responsibility columns into the remaining width. */
  .today-shell .family-board { grid-template-columns: minmax(0, 1fr); }
  .today-shell .board-calendar-stack { grid-column: 1; grid-row: auto; }
  .today-shell .board-jobs { grid-column: 1; grid-row: auto; }
}

/* Detail artwork is content, not a decorative tile crop. Natural aspect ratio
   works for existing wide photos and future portrait photos at every size. */
.recipe-detail-header .recipe-hero {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}