/* Layout only. Width-driven reflow preserves forms/session on fold and unfold.
   No device sniffing, new scripts, remote resources or hidden permission controls. */
@media screen {
  html { scroll-padding-block: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-bottom, 0px)); }
  :where(img, video) { max-inline-size: 100%; }
  :where(dialog, [role="dialog"]) {
    box-sizing: border-box;
    max-inline-size: calc(100vw - 24px) !important;
    max-block-size: calc(100vh - 24px);
    max-block-size: calc(100dvh - 24px) !important;
    overflow: auto;
    overscroll-behavior: contain;
  }
}
@media screen and (max-width: 1049px) {
  :where(main, section, article, aside, form, header, footer, nav, div) { min-inline-size: 0; }
  :where(.workspace, .container, .page, .page-grid, .work-grid, .staff-grid, .content-grid, .simple-grid, .login-wrap, .login-card) { max-inline-size: 100%; box-sizing: border-box; }
  :where(.table-wrap, .table-scroll, .table-container, .payroll-table-wrap, .expense-table-wrap) {
    max-inline-size: 100% !important; min-inline-size: 0; overflow-x: auto; overscroll-behavior-x: contain;
  }
  :where(input, select, textarea) { max-inline-size: 100%; box-sizing: border-box; }
  :where(textarea) { resize: vertical; }
  :where(.top-actions, .header-actions, .toolbar, .filter-row, .filters, .form-actions) { flex-wrap: wrap; }
  :where(.login-screen, .login-wrap, .hub-access-gate) {
    padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
    padding-block: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-bottom, 0px));
  }
  /* The old 980px gate breakpoint leaves a 981–1049px gap. */
  .page-hub .hub-access-layout { grid-template-columns: minmax(0, 1fr); inline-size: min(720px, 100%); }
  .page-hub .hub-access-card { min-inline-size: 0; max-inline-size: 100%; }
  .corporate-site .corp-header-inner { flex-wrap: wrap; gap: 12px 20px; }
  .corporate-site .corp-header nav { flex-basis: 100%; flex-wrap: wrap; justify-content: center; gap: 6px 22px; order: 3; }
  .corporate-site .corp-header-actions { margin-inline-start: auto; }
  .corporate-site .corp-hero { gap: clamp(24px, 4vw, 48px); }
  .corporate-site .corp-wrap { inline-size: min(1200px, calc(100% - max(36px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) + 24px))); }
}
@media screen and (max-width: 600px) {
  html body :is(.page-grid, .work-grid, .staff-grid, .content-grid, .simple-grid) { grid-template-columns: minmax(0, 1fr); }
  html body :is(.input-grid.three, .input-grid.two, .form-grid, .corp-two-fields) { grid-template-columns: minmax(0, 1fr); }
  :where(.login-card) { min-inline-size: 0; inline-size: min(100%, 440px); }
  .corporate-site .corp-header nav { justify-content: flex-start; }
  .corporate-site .corp-header nav a { white-space: normal; }
  .corporate-site .corp-service-copy p { font-size: 13px; }
  .corporate-site .mobile-dock { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
}
/* Touch controls remain usable on the unfolded display, not just phone widths. */
@media screen and (pointer: coarse) and (max-width: 1100px) {
  :where(button, [role="button"], input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]), select) { min-block-size: 44px !important; }
  :where(input, select, textarea) { font-size: max(16px, 1em) !important; }
  :where(input[type="checkbox"], input[type="radio"]) { scroll-margin: 24px; }
  :where(nav a, .corp-track, .corp-theme, .dialog-close) { min-block-size: 44px; align-content: center; }
}
@media screen and (max-height: 540px) and (pointer: coarse) {
  :where(.login-screen, .login-wrap, .hub-access-gate) { align-items: start; overflow-y: auto; }
  :where(.hub-access-gate) { min-block-size: 100%; }
}