/* Mobile layer: the prototypes were authored desktop-only. Loaded last on
   every page; only applies at phone/small-tablet widths. */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  img, svg, video, canvas, iframe { max-width: 100%; }
  input, select, textarea, button { max-width: 100%; }

  /* App shell: sidebar becomes an off-canvas drawer (toggled by mobile.js) */
  .app { grid-template-columns: minmax(0, 1fr) !important; }
  .app > aside.side {
    position: fixed !important; inset: 0 auto 0 0; z-index: 60;
    width: min(84vw, 300px); height: 100dvh; overflow-y: auto;
    transform: translateX(-100%); transition: transform var(--motion-base, 220ms) var(--ease-out, ease);
  }
  .app.nav-open > aside.side { transform: none; box-shadow: 0 0 0 100vmax oklch(0 0 0 / 0.32); }
  .m-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; margin-right: 8px; border-radius: var(--r-2, 6px);
    border: 1px solid var(--border, #ddd); background: var(--bg, #fff); color: var(--ink, #111); cursor: pointer;
  }
  .m-nav-toggle.floating { position: fixed; left: 12px; bottom: 12px; z-index: 55; width: 44px; height: 44px; }

  /* Multi-pane layouts stack */
  .app > *, .layout > *, .shell > *, .wrap > * { min-width: 0; }
  .layout, .row-2-1, .row-2, .row-3, .r2, .r3, .body, .hero, .do-dont, .principles,
  .program-summary, .program-weeks, .working-row, .client-row, .reading, .field-row,
  .field-row.thirds, .shell, .grid:not(.grid-wrap > .grid), .wrap, .two-col, .split, .cols, .columns, .main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  aside, .inbox, .context, .inspector, .lib, .rail, .summary-rail, .queue, .list-pane, .sec-nav, .summary {
    width: auto !important; min-width: 0 !important; max-width: 100% !important;
    position: static !important; height: auto !important; max-height: none !important;
  }
  .app > aside.side { position: fixed !important; height: 100dvh !important; width: min(84vw, 300px) !important; }

  /* Metric rows: two-up */
  .kpi-row, .kpis, .kpi-strip, .stats, .stats-grid, .macros {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .kpi, .stat { min-width: 0 !important; }

  /* Toolbars and headers wrap instead of running off-screen */
  .topbar, .topbar-right, .main-header, .page-head, .head, .actions, .hero-actions, .crumbs,
  .time-filter, .row, .nav-r, .nav-left, .nav-right, .cat-pills, .week-nav, .filters, .toolbar,
  .tabs, .meta, .nav-links, .ftr, .nav-bar { flex-wrap: wrap; row-gap: 8px; }
  .crumbs, .crumbs * { white-space: normal; overflow-wrap: anywhere; }

  /* Tables scroll inside their card */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Comfortable gutters */
  .main-body, .content, .page, .container, .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  h1 { overflow-wrap: anywhere; }

  /* QR ticket: fixed 13x13 code must shrink with the card */
  .qr-card { min-width: 0; max-width: 100%; }
  .qr-card .row-top { flex-wrap: wrap; gap: 8px; }
  .qr-canvas { grid-template-columns: repeat(13, minmax(0, 1fr)) !important; grid-template-rows: repeat(13, minmax(0, 1fr)) !important; }

  /* Single-card pages (onboarding steps, empty states, auth): the page grid
     track must not grow to the card's content width */
  body { grid-template-columns: minmax(0, 1fr); }
  body:has(> .card) { padding: 16px !important; }
  body > .card { max-width: 100% !important; padding: 28px 20px !important; }

  /* Brand: wordmark specimens */
  .wordmark-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .wm { font-size: clamp(22px, 7vw, 30px) !important; }

  /* Booking stepper and provider amenities */
  .stepper { flex-wrap: wrap; row-gap: 10px; }
  .stepper .step { flex: none; }
  .amen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .amen svg { flex: none; }

  /* Every real overflow above is fixed at the source; this only absorbs
     invisible layout slack (margins, decorative bleed) so the page can't
     be dragged sideways. */
  html, body { overflow-x: clip; }

  /* Fixed-height top bars grow when their contents wrap */
  .topbar, .topbar-inner { height: auto !important; min-height: 56px; }
  .app .topbar { padding-top: 8px; padding-bottom: 8px; padding-left: 16px !important; padding-right: 16px !important; }
  .topbar-inner { flex-wrap: wrap; padding: 10px 16px !important; row-gap: 6px; }
  .topbar-inner > .nav-links {
    order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; margin: 0 -10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .topbar-inner > .nav-links::-webkit-scrollbar { display: none; }
  .topbar-inner > .nav-links a { white-space: nowrap; }

  /* Side-by-side card rows and option pickers stack */
  .section-head { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .row-1-2, .row-2-1, .row-1-1, .row-1-3, .row-3-1, .format-row { grid-template-columns: minmax(0, 1fr) !important; }

  /* Wide desktop gutters and oversized metric values */
  .stage, .sub-shell { padding-left: 16px !important; padding-right: 16px !important; }
  .kpi .v, .stat .v { font-size: clamp(18px, 5vw, 26px) !important; white-space: nowrap; }
  .kpi .v small, .stat .v small { display: block; margin: 4px 0 0 !important; }

  /* Week calendars keep their seven columns and scroll sideways as one unit */
  :has(> .days-row) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .days-row, .grid-wrap { min-width: 680px; }
  .cal-head { flex-wrap: wrap; row-gap: 10px; padding-left: 16px !important; padding-right: 16px !important; }
  .cal-head > :first-child { flex: 1 0 100%; }
  .cal-head > :first-child, .cal-head > :first-child * { overflow-wrap: normal; white-space: nowrap; }

  /* Hub header: intro and fact card stack */
  .top { flex-direction: column; gap: 24px !important; }
  .top > * { min-width: 0 !important; width: 100%; }
  .top h1 { font-size: clamp(40px, 11vw, 56px) !important; }
}

/* Tablet tier: the multi-pane desktop layouts don't fit below ~1100px, but
   metric rows and content grids still do — so only the structure changes. */
@media (min-width: 761px) and (max-width: 1100px) {
  .app { grid-template-columns: minmax(0, 1fr) !important; }
  .app > *, .layout > *, .shell > *, .wrap > * { min-width: 0; }
  .app > aside.side {
    position: fixed !important; inset: 0 auto 0 0; z-index: 60;
    width: 300px !important; height: 100dvh !important; overflow-y: auto;
    transform: translateX(-100%); transition: transform var(--motion-base, 220ms) var(--ease-out, ease);
  }
  .app.nav-open > aside.side { transform: none; box-shadow: 0 0 0 100vmax oklch(0 0 0 / 0.32); }
  .m-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; margin-right: 8px; border-radius: var(--r-2, 6px);
    border: 1px solid var(--border, #ddd); background: var(--bg, #fff); color: var(--ink, #111); cursor: pointer;
  }
  .m-nav-toggle.floating { position: fixed; left: 12px; bottom: 12px; z-index: 55; width: 44px; height: 44px; }
  .layout, .shell, .wrap { grid-template-columns: minmax(0, 1fr) !important; }
  .inbox, .context, .inspector, .lib, .rail, .summary-rail, .queue, .list-pane {
    width: auto !important; max-width: 100% !important; position: static !important; height: auto !important; max-height: none !important;
  }
  .topbar, .topbar-right, .main-header, .actions, .hero-actions, .time-filter, .nav-r, .week-nav, .toolbar, .filters { flex-wrap: wrap; row-gap: 8px; }
  table { display: block; max-width: 100%; overflow-x: auto; }
  .topbar { height: auto !important; min-height: 56px; }
  html, body { overflow-x: clip; }
}
@media (min-width: 761px) { .m-nav-toggle.desktop-hidden { display: none; } }

@media (max-width: 760px) {
  .info-row, .pager, .danger-row { flex-wrap: wrap; row-gap: 8px; }
  .pager .meta { white-space: nowrap; }
  .danger-row > .body { flex: 1 1 200px; }
}