/*
 * Shared mobile hardening layer.
 *
 * Page-specific styles still own the visual language. This final layer only
 * enforces small-screen safety: no page-level horizontal overflow, usable
 * touch targets, single-column forms, contained tables and viewport-safe
 * dialogs. Keep it last in every production HTML document.
 */

html {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: clip;
}

img,
video,
canvas,
iframe {
  max-width: 100%;
}

button,
input,
select,
textarea {
  min-width: 0;
  max-width: 100%;
}

pre,
code,
kbd,
samp,
a,
p,
li,
dd,
dt,
th,
td {
  overflow-wrap: anywhere;
}

:where(
  .wrap,
  .community-wrap,
  .community-post-wrap,
  .support-wrap,
  .account-app,
  .auth-shell,
  .portal-shell,
  .portal-main,
  #portalContent,
  .portal-card,
  .data-card,
  .content-card,
  .stall-card,
  .tool-card,
  .support-workspace,
  .support-thread-shell,
  .commercial-panel,
  .pd-shell
) {
  min-width: 0;
}

:where(
  .portal-table-wrap,
  .city-interest-list-content,
  .processing-queue-table-wrap,
  .community-mod-queue-table-wrap,
  .commercial-table-wrap,
  .admin-import-preview,
  .table-scroll
) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 680px) {
  /* Prevent iOS from zooming into form fields and keep controls comfortably tappable. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    min-height: 44px;
    font-size: 16px !important;
  }

  :where(
    .button,
    .text-button,
    .secondary-button,
    .primary-button,
    .community-button,
    .support-button,
    .menu-toggle,
    .community-menu-toggle,
    .support-menu-toggle,
    .quiet-button,
    .workspace-link,
    .portal-nav-toggle,
    .portal-sidebar-close,
    .dialog-close button,
    summary
  ) {
    min-height: 44px;
  }

  input[type="file"] {
    width: 100%;
    min-height: 48px;
  }

  input[type="file"]::file-selector-button {
    min-height: 44px;
    margin-right: 10px;
    padding-inline: 12px;
  }

  /* Shared actions must wrap rather than force the viewport wider. */
  :where(
    .actions,
    .button-row,
    .row-actions,
    .toolbar-actions,
    .module-toolbar,
    .notification-actions,
    .list-actions,
    .form-actions,
    .dialog-actions,
    .community-feed-toolbar,
    .support-thread-actions
  ) {
    max-width: 100%;
    flex-wrap: wrap;
  }

  /* Dialogs use the viewport as their only scrolling boundary on phones. */
  dialog,
  .workflow-dialog,
  .processing-detail-dialog,
  .community-mod-dialog,
  .commercial-centered-dialog,
  .city-interest-detail-dialog,
  .support-dialog,
  .support-staff-decision-dialog,
  .metric-definition-dialog,
  .reservation-dialog {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 16px) !important;
    margin: auto !important;
  }

  :where(
    .workflow-dialog-body,
    .processing-detail-body,
    .community-mod-dialog-body,
    .commercial-dialog-body,
    .city-interest-detail-dialog-body,
    .reservation-dialog-body
  ) {
    min-width: 0;
    overscroll-behavior: contain;
  }

  /* A three-column account summary is useful on tablet, but must shrink on phone. */
  .account-summary {
    width: 100%;
    min-width: 0;
  }

  .consumer-nav-shell {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .account-app {
    margin-bottom: calc(100px + env(safe-area-inset-bottom));
  }

  .portal-sidebar {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .portal-nav-backdrop {
    bottom: env(safe-area-inset-bottom);
  }

  .portal-top,
  .public-header-inner,
  .community-header-inner,
  .support-header-inner,
  .account-header {
    padding-top: env(safe-area-inset-top);
  }

  .portal-table-wrap,
  .city-interest-list-content,
  .processing-queue-table-wrap,
  .community-mod-queue-table-wrap {
    scrollbar-width: thin;
  }
}

@media (max-width: 430px) {
  :where(.wrap, .community-wrap, .community-post-wrap, .support-wrap) {
    width: calc(100% - 24px);
  }

  .portal-shell,
  .auth-shell,
  .account-app,
  .account-header {
    width: calc(100% - 20px);
  }

  .portal-main {
    padding: 20px 12px calc(28px + env(safe-area-inset-bottom));
  }

  .portal-top {
    min-height: 64px;
    padding-inline: 12px;
  }

  .portal-top .brand,
  .account-brand,
  .brand,
  .community-brand,
  .support-brand {
    min-width: 0;
  }

  .portal-top .brand > span:last-child,
  .account-brand > span:last-child,
  .public-header .brand > span:last-child,
  .community-brand > span:last-child,
  .support-brand > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .public-header-inner,
  .community-header-inner,
  .support-header-inner {
    gap: 6px;
  }

  .account-entry-link,
  .community-account-entry,
  .support-account-entry {
    min-width: 68px;
    padding-inline: 6px;
  }

  .toolbar,
  #cityFilters,
  .city-hero-filters,
  .admin-filter-form,
  .compact-list-filter,
  .city-interest-filter,
  .commercial-sales-search,
  .support-staff-toolbar form {
    grid-template-columns: 1fr !important;
  }

  :where(
    .toolbar-actions,
    .compact-list-filter-actions,
    .city-interest-filter-actions,
    .commercial-form-actions,
    .capability-config-form-actions,
    .pd-form-actions
  ) {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
  }

  :where(
    .toolbar-actions,
    .compact-list-filter-actions,
    .city-interest-filter-actions,
    .commercial-form-actions,
    .capability-config-form-actions,
    .pd-form-actions
  ) > :where(.button, .text-button, button, a) {
    width: 100%;
  }

  .portal-pagination,
  .processing-pagination,
  .city-interest-pagination,
  .commercial-pager,
  .pd-pager,
  .account-pagination,
  .content-pagination,
  .pagination {
    max-width: 100%;
    gap: 6px;
  }

  .portal-pagination :where(.button, button),
  .city-interest-pagination :where(.button, button),
  .account-pagination :where(.button, button),
  .content-pagination :where(.button, button) {
    min-width: 0;
    padding-inline: 10px;
  }

  .dashboard-task-grid,
  .dashboard-status-grid,
  .dashboard-business-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-compact-metrics,
  .admin-stats,
  .command-center-metrics,
  .record-grid.compact-worklist-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .compact-worklist-overview > article { min-height: 0; padding: 12px; }
  .compact-worklist-overview strong { font-size: 24px; }
  .compact-worklist-overview small { font-size: 11px; line-height: 1.45; }
  [data-content-review-filter] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  [data-content-review-filter] .compact-list-filter-actions { align-self: end; display: flex; gap: 6px; }
  [data-content-review-filter] .compact-list-filter-actions .button { min-width: 0; padding-inline: 8px; }
  .commerce-pagination { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
  .commerce-pagination .button { width: auto; min-width: 0; min-height: 44px; padding-inline: 10px; }
  .commerce-pagination > span { min-width: 0; font-size: 11px; overflow-wrap: anywhere; }

  /* Long histories belong to the page on a phone; avoid nested vertical scroll panes. */
  .account-city-record-history,
  .community-my-post-list,
  #communityOpeningInterestList,
  .admin-import-preview .portal-table-wrap {
    max-height: none;
  }

  .account-city-record-history > header {
    position: static;
  }

  .support-hero-rules > div,
  .city-interest-record dl div,
  .workflow-facts,
  .live-detail-facts,
  .commercial-facts,
  .pd-record dl {
    grid-template-columns: 1fr !important;
  }

  .community-selected-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .community-selected-media :where(img, video),
  .account-city-record-preview :where(img, video) {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
}

@media (max-width: 360px) {
  .portal-top .brand > span:last-child,
  .account-brand > span:last-child,
  .public-header .brand > span:last-child,
  .community-brand > span:last-child,
  .support-brand > span:last-child {
    display: none;
  }

  .portal-top > div,
  .account-header-actions {
    gap: 5px;
  }

  .auth-card,
  .auth-welcome {
    padding-inline: 18px;
  }

  .auth-mode-tabs button {
    padding-inline: 4px;
    font-size: 12px;
  }

  .account-summary,
  .impact-metrics,
  .commerce-account-states,
  body[data-page="cities"] .city-coverage-summary {
    grid-template-columns: 1fr !important;
  }

  .account-summary > div,
  body[data-page="cities"] .city-coverage-summary > article {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line, #ded8ca);
  }

  .account-summary > div:last-child,
  body[data-page="cities"] .city-coverage-summary > article:last-child {
    border-bottom: 0;
  }

  body[data-page="cities"] .city-hero-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="cities"] .city-hero-proof > article {
    border-right: 1px solid var(--line, #ded8ca);
    border-bottom: 0;
  }

  body[data-page="cities"] .city-hero-proof > article:last-child {
    border-right: 0;
  }

  .portal-sidebar {
    width: calc(100vw - 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.captain-form-progress { flex: 0 0 auto; margin: 0; padding: 10px 24px; border-bottom: 1px solid #ded8cc; background: #edf3ec; color: #124a35; font-size: 13px; font-weight: 800; }
.captain-step-actions { display: flex; justify-content: flex-end; gap: 8px; }
.captain-step-actions [hidden], .captain-form-section[hidden] { display: none !important; }
.captain-step-actions .button { min-width: 100px; }
.captain-form-section legend:focus-visible { outline: 2px solid #0b5b3c; outline-offset: 4px; }

body[data-nearby-live-availability="empty"] :is(#nearbyFeatureEmpty, .nearby-discovery-controls, #nearbyHighlights, .nearby-statusbar, .nearby-workspace, #nearbySupplyNotice, .nearby-location-actions, .nearby-privacy-note) { display: none; }
body[data-nearby-live-availability="empty"] .nearby-discovery-hero-grid { grid-template-columns: minmax(0, 1fr); }
body[data-nearby-live-availability="empty"] .nearby-discovery-hero-copy { max-width: 760px; }

@media (max-width: 980px) {
  :is(.menu-toggle, .community-menu-toggle) { width: 44px; height: 44px; min-width: 44px; min-height: 44px; place-items: center; justify-self: end; padding: 0; border: 1px solid #d9d5ca; border-radius: 50%; background: #fffdf7; color: #16231b; font-size: 22px; }
  .menu-toggle { display: inline-grid; }
}

@media (max-width: 760px) {
  :is(.public-header-inner, .community-header-inner) { min-height: 68px; height: auto; grid-template-columns: minmax(0, 1fr) 44px auto; gap: 8px; }
  :is(.public-header-actions, .community-header-actions) { grid-column: 3; }
  :is(.menu-toggle, .community-menu-toggle) { grid-column: 2; }
  :is(.public-navigation, .community-navigation) { grid-column: 1 / -1; }
  .city-hub-subnav { top: 68px; }
  .city-hub-subnav-inner { min-height: 54px; }
  .city-hub-subnav a { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px; padding: 8px 4px; }
  .city-hub-subnav a > i { width: 24px; height: 24px; font-size: 14px; }
  .city-hub-subnav a strong { font-size: 12px; }
  .city-hub-subnav a small { display: none; }
  .captain-form-footer { gap: 8px; }
  .captain-form-progress { padding: 9px 14px; }
  .captain-step-actions .button { flex: 1; width: auto; min-width: 0; }
}