/* Shared responsive flow contract.
   Default desktop remains an app-like cockpit. When width or height is constrained,
   normal panels keep natural height and the app/page becomes the vertical scroll owner.
   Internal scrolling is reserved for explicit data surfaces such as weekly calendars. */

@media (max-width: 980px), (max-height: 760px) {
  body:is(.home-mode,.planning-mode,.actuals-mode,.team-mode,.restaurant-mode,.employee-schedule-mode,.employee-time-mode) {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body:is(.home-mode,.planning-mode,.actuals-mode,.team-mode,.restaurant-mode,.employee-schedule-mode,.employee-time-mode) .app-frame {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body:is(.home-mode,.planning-mode,.actuals-mode,.team-mode,.restaurant-mode,.employee-schedule-mode,.employee-time-mode) .app-shell {
    height: auto;
    max-height: none;
    min-height: calc(100dvh - var(--rst-topbar-h));
    overflow: visible;
  }

  body:is(.home-mode,.planning-mode,.actuals-mode,.team-mode,.restaurant-mode,.employee-schedule-mode,.employee-time-mode) .page.active,
  .rs-page-root,
  .rs-page-shell,
  .rs-page-board {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .rs-page-root,
  .rs-page-shell {
    min-height: 0;
  }

  .rs-page-board:not(.rs-weekly-board) {
    flex: 0 0 auto;
  }

  .rs-workbench-grid,
  .rs-workbench-grid--single,
  .rs-workbench-shell,
  .rs-workbench-body,
  .rs-workbench-layout,
  .rs-workbench-list,
  .rs-workbench-detail,
  .rs-workbench-detail-stack,
  .rs-tab-panel {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .rs-workbench-shell,
  .rs-workbench-body {
    grid-template-rows: auto auto;
  }

  .rs-workbench-layout {
    align-items: start;
    grid-auto-rows: max-content;
  }

  .rs-workbench-list-scroll,
  .rs-compact-list,
  .rs-workbench-detail > form {
    max-height: none;
    height: auto;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .rs-section-grid,
  .rs-section-stack,
  .rs-section-split {
    align-items: start;
    grid-auto-rows: max-content;
  }

  .rs-section-surface,
  .rs-card {
    min-height: auto;
  }

  .home-board,
  .home-cockpit-grid,
  .home-side-stack,
  .home-card,
  .home-live-list,
  .restaurant-tab-panel,
  .restaurant-operations-panel {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .home-cockpit-grid,
  .home-side-stack {
    align-items: start;
  }

  .home-live-card,
  .home-actions-card,
  .home-week-card,
  .home-quick-card {
    grid-template-rows: auto;
  }
}

/* ---- Migrated responsive layout rules (Pass 2: ownership-centralized) ----
   Off-ladder widths snapped to the canonical ladder (1180 / 980 / 760 / 520 / h760).
   Workbench stack now owned by workbench-layout.css; metric-card by metrics.css. */

@media (max-width: 1180px) {
  /* shared grid toolbar — from controls.css */
  .rs-grid-toolbar { grid-template-columns: 1fr; }
  .rs-grid-toolbar__title,
  .rs-grid-toolbar__leading,
  .rs-grid-toolbar__center,
  .rs-grid-toolbar__actions { justify-content: flex-start; }
  /* tab bar — from tabs.css */
  .rs-tab-bar { align-items: stretch; flex-direction: column; }
  .rs-action-row { justify-content: flex-start; }
  /* setup guide — from setup-readiness.css (was 1100) */
  .rs-setup-guide__head,
  .rs-setup-guide .rs-setup-step-list { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  /* section grids — from section-primitives.css */
  .rs-section-grid,
  .rs-section-grid--three,
  .rs-section-split { grid-template-columns: minmax(0,1fr); }
  /* home cockpit single column — from home.css */
  body.home-mode .home-page.active { overflow: auto; }
  .home-cockpit-grid { grid-template-columns: 1fr; }
  .home-side-stack { grid-template-rows: auto auto; }
  /* module header — from module-header.css (was 900) */
  .rs-module-header { padding-right: 18px; }
  /* restaurant coverage rows — from restaurant-coverage.css (was 900) */
  .restaurant-zone-identity-row,
  .restaurant-zone-time-list,
  .restaurant-service-row,
  .restaurant-coverage-head,
  .restaurant-coverage-row { grid-template-columns: minmax(0,1fr); }
  /* decorative module scene shrinks — from shell.css (was 900) */
  body.has-app-chrome:is(.home-mode,.planning-mode,.actuals-mode,.team-mode,.restaurant-mode,.employee-schedule-mode,.employee-time-mode) .app-frame::after {
    --module-scene-size: 188px;
    --module-scene-position: right 0 top;
  }
}

@media (max-width: 760px) {
  /* dialog actions wrap — from dialog-card.css */
  .rs-dialog-card__actions { flex-wrap: wrap; }
  /* actuals correction grid — from modules/actuals.css */
  .actuals-correction-grid { grid-template-columns: 1fr; }
  /* entity header reflow — from entity-header.css (was 680) */
  .rs-entity-header { flex-wrap: wrap; min-height: auto; gap: 10px; }
  .rs-entity-actions { justify-content: flex-start; }
  /* decorative module scene hidden — from shell.css (was 720) */
  body.has-app-chrome:is(.home-mode,.planning-mode,.actuals-mode,.team-mode,.restaurant-mode,.employee-schedule-mode,.employee-time-mode) .app-frame::after {
    --module-scene-size: 0px;
  }
}

/* Calendar width/density is owned by layouts/weekly-grid.css. */


/* Calendar pages keep their wide grid contained inside the calendar viewport.
   The protected weekly table must not define the width of the page/header/metrics. */
.planning-mode :is(.rs-page-root,.rs-page-shell,.rs-page-board,.rs-page-metrics),
.actuals-mode :is(.rs-page-root,.rs-page-shell,.rs-page-board,.rs-page-metrics) {
  max-width: 100%;
  min-width: 0;
}

.planning-mode .rs-weekly-board,
.actuals-mode .rs-weekly-board {
  contain: inline-size;
}