/* EnsureLoc cumulative responsive-fit layer — 2026-09-08
   Presentation-only. No backend, auth, upload, storage, billing, or data logic. */

*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { width: 100%; max-width: 100%; min-width: 0; margin-left: 0; margin-right: 0; overflow-x: hidden; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
img, svg { object-fit: contain; }
button, input, select, textarea { max-width: 100%; font: inherit; }
input, select, textarea { min-width: 0; }
pre, code { max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; }
a, p, li, td, th, label, span { overflow-wrap: break-word; }

/* Keep primary page shells inside the viewport without redesigning them. */
main,
.page,
.page-shell,
.shell,
.container,
.wrap,
.wrapper,
.content,
.content-wrap,
.portal-shell,
.portal-main,
.portal-content,
.portal-wrap,
.auth-shell,
.auth-card,
.join-card,
.signin-card,
.card,
.panel,
.section-inner,
.hero-inner,
.nav-inner,
.footer-inner {
  min-width: 0;
  max-width: 100%;
}

/* Wide content should shrink to the available screen instead of forcing horizontal scroll. */
[style*="width:"][style*="px"],
[style*="max-width:"][style*="px"] { max-width: 100%; }

table { width: 100%; max-width: 100%; border-collapse: collapse; }
.table-wrap, .table-scroll, [class*="table-wrap"], [class*="table-scroll"] { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Dialogs, assistants, sheets and overlays must stay on-screen. */
dialog,
.modal,
.modal-card,
.dialog,
.dialog-card,
.sheet,
.drawer,
.popover,
.booker-panel,
.booker-chat,
.booker-window,
[class*="modal"],
[class*="dialog"] {
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px);
}

/* Responsive grid safety for public and portal cards. */
.grid,
.cards,
.card-grid,
.feature-grid,
.plan-grid,
.pricing-grid,
.portal-grid,
.record-grid,
[class*="-grid"] {
  min-width: 0;
}
.grid > *, .cards > *, .card-grid > *, .feature-grid > *, .plan-grid > *, .pricing-grid > *, .portal-grid > *, .record-grid > *, [class*="-grid"] > * { min-width: 0; }

/* Medium screens/tablets */
@media (max-width: 900px) {
  body { font-size: 16px; }
  main, .page, .page-shell, .shell, .container, .wrap, .wrapper, .content, .portal-shell, .portal-main, .portal-content {
    width: 100%;
  }
  .grid, .cards, .card-grid, .feature-grid, .plan-grid, .pricing-grid, .portal-grid, .record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .two-col, .two-column, .split, [class*="two-col"], [class*="two-column"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Phones */
@media (max-width: 640px) {
  body { width: 100%; min-width: 0; }
  main, section, header, footer, nav { max-width: 100vw; }

  main,
  .page,
  .page-shell,
  .shell,
  .container,
  .wrap,
  .wrapper,
  .content,
  .content-wrap,
  .portal-shell,
  .portal-main,
  .portal-content,
  .portal-wrap,
  .section-inner,
  .hero-inner {
    width: 100%;
    max-width: 100%;
  }

  .grid, .cards, .card-grid, .feature-grid, .plan-grid, .pricing-grid, .portal-grid, .record-grid,
  [class*="-grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Forms and actions stack cleanly without changing submit behavior. */
  form { width: 100%; max-width: 100%; }
  .field, .form-field, .form-group, .input-group, .control, .form-row { min-width: 0; max-width: 100%; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; }
  .actions, .form-actions, .button-row, .btn-row, .cta-row, .action-row {
    max-width: 100%;
    flex-wrap: wrap;
  }
  .actions > *, .form-actions > *, .button-row > *, .btn-row > *, .cta-row > *, .action-row > * { max-width: 100%; }

  /* Preserve desktop nav behavior but prevent nav content from escaping the viewport. */
  nav, .nav, .site-nav, .portal-nav, .nav-inner { width: 100%; max-width: 100%; }
  .nav-links, .portal-nav-links { max-width: 100%; }

  /* Tables remain usable on phones. */
  table { font-size: 0.94rem; }

  /* Booker/help widget stays clear of phone edges and bottom controls. */
  .booker-panel, .booker-chat, .booker-window, [class*="booker"][class*="panel"], [class*="booker"][class*="chat"] {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
  }

  /* Scanner editor stays fully visible on small screens. */
  .scanner-modal, .scanner-shell, .scanner-panel, .scanner-editor, [class*="scanner"] {
    max-width: 100%;
  }
  .scanner-modal, [class*="scanner-modal"] { max-width: 100vw !important; }
  .scanner-toolbar, .scanner-actions, [class*="scanner-toolbar"], [class*="scanner-actions"] { flex-wrap: wrap; }
}

/* Very small phones */
@media (max-width: 390px) {
  body { font-size: 15px; }
  button, .btn, a.btn, [role="button"] { max-width: 100%; }
  .card, .panel, .auth-card, .join-card, .signin-card { max-width: 100%; }
}