/* Sprint 6636-540 — Advisionr system-wide mobile layout layer.
 * Desktop invariant: every rule in this file is scoped to <= 900px.
 * Purpose: responsive shell/navigation, cards/forms, tables, modals, dashboards,
 * admin workspaces and standalone documents without changing desktop behavior.
 */

@media (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html, body { max-width: 100%; overflow-x: hidden; }
  body { min-width: 0; }
  img, video, iframe { max-width: 100%; height: auto; }
  canvas { max-width: 100%; }
  pre { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
  code { overflow-wrap: anywhere; }

  /* App shell: mobile becomes an off-canvas navigation layout. */
  .app-shell { display: block !important; width: 100% !important; min-width: 0 !important; }
  .app-main { width: 100% !important; min-width: 0 !important; margin: 0 !important; grid-column: auto !important; }
  .app-content { width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 18px 14px 42px !important; }
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(320px, 88vw) !important;
    max-width: 88vw !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    z-index: 70 !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }
  .sidebar-head { position: sticky; top: 0; z-index: 2; }
  .sidebar-collapse-toggle { display: none !important; }
  .sidebar-overlay { position: fixed !important; inset: 0 !important; z-index: 65 !important; }
  body.sidebar-open { overflow: hidden !important; touch-action: none; }
  body.sidebar-open .sidebar { touch-action: pan-y; }
  .sidebar-close, .menu-toggle { min-width: 44px; min-height: 44px; }
  .sidebar nav a, .sidebar .side-nav a, .sidebar-logout button { min-height: 44px; }

  /* Top bar remains usable with long localized/admin controls. */
  .app-top {
    position: sticky !important;
    top: 0;
    z-index: 50;
    width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: 64px;
    padding: 8px 12px !important;
    gap: 8px !important;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
  }
  .app-top .menu-toggle { flex: 0 0 44px; }
  .app-top .top-actions {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    gap: 7px !important;
    justify-content: flex-end;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding: 2px 0;
  }
  .app-top .top-actions::-webkit-scrollbar { display: none; }
  .app-top .top-actions > * { flex: 0 0 auto; }
  .language-switcher-app, .language-switcher-app select { max-width: 164px !important; min-width: 132px !important; width: auto !important; }
  .feature-request-top-link { min-height: 42px; }
  .avatar { flex: 0 0 auto; }

  /* Shared page headers and action bars. */
  .app-body :is(.dashboard-hero,.project-hero,.recommendation-hero,.section-head,.page-head,.page-header,.card-head,.panel-head,.toolbar,.filter-bar,.filters,.header-row) {
    min-width: 0;
    max-width: 100%;
  }
  .app-body :is(.dashboard-hero,.project-hero,.recommendation-hero,.page-head,.page-header,.card-head,.panel-head,.toolbar,.filter-bar,.filters,.header-row) {
    flex-wrap: wrap !important;
  }
  .app-body :is(.top-actions,.page-actions,.dashboard-hero-actions,.recommendation-actions,.table-actions,.revenue-actions,.inline-actions,.form-actions) {
    max-width: 100%;
    flex-wrap: wrap !important;
  }
  .app-body h1 { overflow-wrap: anywhere; }
  .app-body h2, .app-body h3, .app-body p, .app-body small, .app-body label { max-width: 100%; }

  /* Forms: full usable width and iOS-safe input sizing. */
  .app-body :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
    max-width: 100% !important;
    font-size: 16px;
  }
  .app-body textarea { resize: vertical; }
  .app-body :is(.form-grid,.security-actions,.recovery-grid,.voice-speed-panel,.benefit-row) { min-width: 0; }
  .app-body .form-grid > *, .app-body fieldset { min-width: 0; }
  .app-body fieldset { max-width: 100%; }

  /* Horizontal navigation remains discoverable instead of clipping. */
  .app-body :is(.settings-nav,.admin-settings-nav,.tabs,.tab-list,.subnav,.secondary-nav) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .app-body :is(.tabs,.tab-list,.subnav,.secondary-nav) > * { flex: 0 0 auto; white-space: nowrap; }

  /* Admin/back-office layouts. */
  body.app-body :is(.settings-layout,.admin-workspace-layout,.sales-admin-layout) {
    grid-template-columns: minmax(0,1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 16px !important;
  }
  body.app-body :is(.settings-content,.admin-workspace-content,.sales-admin-content) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body.app-body .admin-settings-nav { position: static !important; width: 100% !important; min-width: 0 !important; max-width: none !important; }
  body.app-body .sales-admin-nav { position: static !important; max-width: 100%; }

  /* Tables preserve all information via touch scroll rather than clipping columns. */
  .app-body :is(.table-card,.table-wrap,.table-container,.responsive-table,.ga-table-wrap,.sc-table-wrap) {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .app-body :is(.table-wrap,.table-container,.responsive-table,.ga-table-wrap,.sc-table-wrap) {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .app-body table:not(.mobile-no-scroll) {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }
  .app-body table:not(.mobile-no-scroll) > :is(thead,tbody,tfoot) { min-width: 620px; }
  .app-body table :is(th,td) { max-width: 360px; overflow-wrap: anywhere; }
  .app-body .table-actions { justify-content: flex-start !important; }

  /* Dashboards/charts: never force the viewport wider than the device. */
  .app-body :is(.chart-card,.dashboard-card,.metric-card,.kpi-card,.widget-card,.universal-dashboard-card) { min-width: 0; max-width: 100%; }
  .app-body :is(.chart-wrap,.chart-container,.dashboard-chart,.meta-dash-chart,.ga-chart) { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
  .app-body :is(.chart-wrap,.chart-container,.dashboard-chart,.meta-dash-chart,.ga-chart) canvas { min-width: 0 !important; max-width: 100%; }

  /* Side panels are no longer sticky on a narrow viewport. */
  .app-body :is(.sticky-action-card,.gca-side-card,.cb-side,.aside-sticky) { position: static !important; top: auto !important; width: 100% !important; max-width: none !important; }

  /* Dialogs and overlays fit within the visual viewport. */
  .app-body :is(.modal,.ocac-modal,.approval-modal,.universal-dashboard-modal,.talk-update-modal) { padding: 10px !important; }
  .app-body :is(.modal-card,.modal-dialog,.ocac-modal-card,.approval-modal-card,.universal-dashboard-modal-card,.talk-update-dialog,.talk-update-dialog-106) {
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow: auto !important;
    margin: auto !important;
  }

  /* Public website/mobile navigation. */
  .marketing-header .nav-wrap { min-width: 0; }
  .mobile-nav { max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain; }
  .mobile-nav a { min-height: 44px; display: flex; align-items: center; }
  .mobile-nav .language-switcher, .mobile-nav .language-switcher select { width: 100% !important; max-width: none !important; }
  .marketing-body .page-shell, .marketing-body .section, .marketing-body .page-hero { max-width: 100%; }

  /* Standalone invoices/reports/credit notes share this stylesheet too. */
  .invoice, .sheet { max-width: calc(100vw - 20px) !important; }
  .actions { max-width: calc(100vw - 20px) !important; padding-inline: 4px; }
}

@media (max-width: 640px) {
  .app-content { padding: 14px 10px 34px !important; }
  .app-top { min-height: 60px; padding: 7px 9px !important; }
  .app-body h1 { font-size: clamp(24px, 8vw, 31px) !important; line-height: 1.12; }
  .app-body h2 { font-size: clamp(20px, 6vw, 26px); }

  /* Common multi-column constructs collapse only on phones. */
  .app-body :is(.metric-grid,.metric-grid-four,.kpi-grid,.stats-grid,.project-grid,.check-grid,.choice-grid,.form-grid,.detail-grid,.insight-strip,.voice-grid,.gca-source-grid,.gca-choice-grid,.gca-compact-grid,.gca-more-grid,.gca-channel-grid,.gca-pmax-grid,.gca-intelligence-grid,.gca-preflight-grid,.ocac-proof-grid,.ocac-change-list,.ocac-guided-detail-grid) {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .app-body :is(.card,.panel,.settings-card,.admin-control-card,.form-card,.table-card) { max-width: 100%; }
  .app-body :is(.form-actions,.wizard-actions,.modal-actions,.approval-modal-actions,.universal-dashboard-modal-actions,.cookie-consent-modal-actions) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .app-body :is(.form-actions,.wizard-actions,.modal-actions,.approval-modal-actions,.universal-dashboard-modal-actions) :is(.btn,button,a.btn) {
    width: 100% !important;
    min-width: 0 !important;
  }
  .app-body :is(.btn,button,input[type="button"],input[type="submit"]) { min-height: 44px; }
  .app-body :is(.top-actions,.table-actions) .btn { width: auto; }

  .app-body table:not(.mobile-no-scroll) > :is(thead,tbody,tfoot) { min-width: 560px; }
  .app-body table :is(th,td) { padding: 10px 9px; }

  /* Cards with desktop inline flex layouts stack safely. */
  .app-body :is(.dashboard-hero,.project-hero,.recommendation-hero,.voice-save-bar,.gca-hero,.gca-submit-row,.gca-ai-canvas-head,.gca-guided-footer,.ocac-guided-footer) {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Public pages. */
  .container { width: min(100% - 24px, var(--container)) !important; }
  .marketing-header .nav-wrap { height: 68px; }
  .marketing-body .hero { padding-top: 52px; }
  .marketing-body .hero h1 { font-size: clamp(36px, 11vw, 48px) !important; }
  .marketing-body .hero-copy { font-size: 16px; }
  .marketing-body .hero-actions > * { width: 100%; }
  .marketing-body .cta-panel { padding: 24px 20px !important; }
  .marketing-body .section { padding-block: 58px; }
  .marketing-body .page-hero { padding: 58px 0 32px; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-grid > div:first-child { grid-column: auto !important; }

  /* Documents: readable without horizontal page overflow. */
  .invoice, .sheet { margin: 0 auto !important; padding: 20px 16px !important; box-shadow: none !important; }
  .invoice .head, .sheet .head { display: flex !important; flex-direction: column !important; gap: 18px !important; }
  .invoice .right, .sheet .right { text-align: left !important; }
  .invoice .grid { grid-template-columns: 1fr !important; gap: 20px !important; margin: 24px 0 !important; }
  .invoice .totals { width: 100% !important; }
  .invoice table, .sheet table { display: table; width: 100%; min-width: 0; font-size: 14px; }
  .invoice th, .invoice td, .sheet th, .sheet td { padding: 9px 7px !important; overflow-wrap: anywhere; }
  .actions button { min-height: 44px; }
}

@media (max-width: 420px) {
  .app-top .top-actions { max-width: calc(100vw - 60px); }
  .language-switcher-app, .language-switcher-app select { min-width: 118px !important; max-width: 140px !important; }
  .sidebar { width: min(300px, 92vw) !important; max-width: 92vw !important; }
  .app-body table:not(.mobile-no-scroll) > :is(thead,tbody,tfoot) { min-width: 520px; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-overlay, .mobile-nav, .app-top { transition: none !important; scroll-behavior: auto !important; }
}

/* Sprint 6636-541 — Mobile visual & interaction hardening.
 * Desktop invariant: all rules remain scoped to <= 900px.
 * Page-specific hardening for dashboard, Action Center, Google Ads,
 * Merchant/Product Feed, Campaign Architect, Settings and admin surfaces.
 */
@media (max-width: 900px) {
  /* Dashboard: prevent dense desktop grids and controls from squeezing. */
  .app-body .dashboard44-head { align-items: stretch !important; flex-direction: column !important; }
  .app-body .dashboard44-head > * { min-width: 0; max-width: 100%; }
  .app-body .dashboard44-range-switch { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .app-body .dashboard44-range-switch a { flex: 1 0 auto; min-height: 42px; }
  .app-body .dashboard44-kpis,
  .app-body .dashboard45-widget-grid,
  .app-body .agency545-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .app-body .dashboard44-grid { grid-template-columns: minmax(0,1fr) !important; }
  .app-body .dashboard45-widget-chart { grid-column: span 2 !important; }
  .app-body .dashboard44-chart-head { flex-wrap: wrap; }
  .app-body .dashboard44-legend { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .app-body .dashboard44-legend > * { flex: 0 0 auto; }
  .app-body .dashboard44-tooltip { max-width: min(280px, calc(100vw - 34px)); min-width: 0; white-space: normal; transform: translate(-50%,-105%); }
  .app-body .dashboard45-source-summary { flex-wrap: wrap; }
  .app-body .dashboard45-source-summary a { margin-left: 0; width: 100%; }
  .app-body .agency545-priority { min-width: 0; }

  /* Action Center: the two-column desktop review becomes one readable flow. */
  .app-body .ocac { width: 100%; max-width: 100%; }
  .app-body .ocac-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .app-body .ocac-head-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .app-body .ocac-head-actions > * { flex: 1 1 180px; min-height: 44px; }
  .app-body .ocac-intro,
  .app-body .ocac-empty,
  .app-body .ocac-step { grid-template-columns: minmax(0,1fr) !important; }
  .app-body .ocac-main { padding: 18px !important; min-width: 0; }
  .app-body .ocac-side { border-left: 0 !important; border-top: 1px solid #e5ecef; padding: 16px !important; }
  .app-body .ocac-impact-grid,
  .app-body .ocac-proof-grid { grid-template-columns: minmax(0,1fr) !important; }
  .app-body .ocac-change-list div { grid-template-columns: minmax(0,1fr) !important; gap: 4px; padding: 10px 0; }
  .app-body .ocac-change-list dt,
  .app-body .ocac-change-list dd { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .app-body .ocac-compact-summary,
  .app-body .ocac-compact-leading,
  .app-body .ocac-actions,
  .app-body .ocac-negative-selection-head,
  .app-body .ocac-negative-selection-item { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  .app-body .ocac-compact-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .app-body .ocac-actions { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .app-body .ocac-actions .ocac-btn { width: 100%; min-width: 0; min-height: 46px; }
  .app-body .ocac-rsa-fields { min-width: 0; }
  .app-body .ocac-rsa-fields input,
  .app-body .ocac-rsa-fields textarea { min-width: 0; width: 100%; }
  .app-body .ocac-history-lazy-body { max-width: 100%; overflow-x: hidden; }

  /* Google Ads overview: filters and charts remain useful without viewport overflow. */
  .app-body .ga28-shell,
  .app-body .uds-page { min-width: 0; max-width: 100%; }
  .app-body .ga28-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .app-body .ga28-kpis,
  .app-body .ga28-universal-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .app-body .ga28-chart-head { flex-wrap: wrap; gap: 10px; }
  .app-body .ga28-pills,
  .app-body .ga28-metric-toggles,
  .app-body .ga28-filter-periods { max-width: 100%; overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; padding-bottom: 3px; }
  .app-body :is(.ga28-pill,.ga28-metric-button,.ga28-filter-period-button) { flex: 0 0 auto; min-height: 42px; }
  .app-body .ga28-chart-body { min-width: 0; max-width: 100%; overflow-x: auto; }
  .app-body .ga543-feed-head,
  .app-body .ga543-feed-foot { flex-wrap: wrap; gap: 10px; }
  .app-body .ga543-feed-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .app-body .ga543-product-list { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .app-body .ga543-product-row { min-width: 620px; }

  /* Merchant / Product Feed: keep before-after edits and bulk controls touch-friendly. */
  .app-body .pf565,
  .app-body .pf-connect-empty { min-width: 0; max-width: 100%; }
  .app-body .pf-hero,
  .app-body .pf-panel-head,
  .app-body .pf-toolbar { flex-wrap: wrap; gap: 10px; }
  .app-body .pf-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .app-body .pf-hero-actions > * { flex: 1 1 170px; }
  .app-body .pf-kpis,
  .app-body .pf-technical-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .app-body .pf-improvement { min-width: 0; max-width: 100%; }
  .app-body .pf-before-after { grid-template-columns: minmax(0,1fr) !important; gap: 8px; }
  .app-body .pf-before-after .pf-arrow { transform: rotate(90deg); justify-self: center; }
  .app-body .pf-value { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .app-body .pf-manual-title-input { width: 100% !important; min-width: 0; }

  /* Campaign Architect: preserve a compact wizard and editable assets. */
  .app-body .gca-shell { max-width: 100% !important; min-width: 0; }
  .app-body .gca-start-layout { grid-template-columns: minmax(0,1fr) !important; }
  .app-body .gca-side-card { position: static !important; width: 100%; }
  .app-body .gca-steps { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .app-body .gca-section { padding: 20px 16px; }
  .app-body .gca-ai-command,
  .app-body .gca-expert-grid,
  .app-body .gca-preflight-grid { grid-template-columns: minmax(0,1fr) !important; }
  .app-body .gca-editable-row,
  .app-body .gca-sitelink-row,
  .app-body .gca-snippet-row,
  .app-body .gca-custom-row { min-width: 0; max-width: 100%; }
  .app-body .gca-inline-actions { flex-wrap: wrap; }
  .app-body .gca-toast { max-width: calc(100vw - 28px); }

  /* Settings/subscription: turn desktop side navigation and dense cards into a phone flow. */
  .app-body .account-settings { min-width: 0; max-width: 100%; }
  .app-body .settings-layout { grid-template-columns: minmax(0,1fr) !important; }
  .app-body .settings-nav { position: static !important; display: flex !important; width: 100%; gap: 6px; padding-bottom: 5px; }
  .app-body .settings-nav a { flex: 0 0 auto; white-space: nowrap; min-height: 42px; }
  .app-body .settings-content { min-width: 0; width: 100%; }
  .app-body :is(.subscription-top-grid,.subscription-extra-grid,.subscription-lifecycle-grid) { grid-template-columns: minmax(0,1fr) !important; }
  .app-body :is(.settings-inline-actions,.subscription-card-head,.capacity-preview-head,.notification-preference-head,.notification-preference-row) { flex-wrap: wrap; gap: 8px; }
  .app-body .subscription-addon-slider { width: 100%; }
  .app-body .capacity-preview-row { min-width: 0; }

  /* Admin/back office: large rows remain tappable and textual content wraps. */
  .app-body .admin-control-list { min-width: 0; }
  .app-body .admin-control-item { min-width: 0; gap: 12px; }
  .app-body .admin-control-item-copy { min-width: 0; overflow-wrap: anywhere; }
  .app-body .admin-control-arrow { flex: 0 0 auto; }
}

@media (max-width: 640px) {
  .app-body .dashboard44-kpis,
  .app-body .dashboard45-widget-grid,
  .app-body .agency545-grid,
  .app-body .ga28-kpis,
  .app-body .ga28-universal-grid,
  .app-body .ga28-filter-grid,
  .app-body .ga543-feed-grid,
  .app-body .pf-kpis,
  .app-body .pf-technical-grid { grid-template-columns: minmax(0,1fr) !important; }
  .app-body .dashboard45-widget-chart { grid-column: auto !important; }
  .app-body .dashboard44-chart { height: 240px; }
  .app-body .dashboard44-kpi { min-height: 132px; padding: 17px; }
  .app-body .agency545 { padding: 17px; }
  .app-body .agency545-priority { grid-template-columns: 30px minmax(0,1fr) !important; }
  .app-body .agency545-att { grid-column: 2; }

  .app-body .ocac-main { padding: 15px !important; }
  .app-body .ocac-intro,
  .app-body .ocac-empty { padding: 20px 16px !important; }
  .app-body .ocac-actions { grid-template-columns: minmax(0,1fr) !important; }
  .app-body .ocac-impact-grid { margin-block: 14px; }
  .app-body .ocac-modal-card { border-radius: 14px; }

  .app-body .ga28-filter-grid .uds-control,
  .app-body .ga28-data-sync-card { width: 100%; }
  .app-body .ga543-product-row { min-width: 560px; }

  .app-body .pf-hero-actions { flex-direction: column; }
  .app-body .pf-hero-actions > *,
  .app-body .pf-toolbar .btn,
  .app-body .pfOptimizationSubmit { width: 100% !important; }
  .app-body .pf-improvement { padding-inline: 14px !important; }

  .app-body .gca-steps { display: flex !important; gap: 8px; scroll-snap-type: x proximity; }
  .app-body .gca-steps .cb-step { flex: 0 0 auto; min-width: 154px; scroll-snap-align: start; }
  .app-body .gca-section-head { gap: 10px; }
  .app-body .gca-custom-row,
  .app-body .gca-editable-row,
  .app-body .gca-sitelink-row,
  .app-body .gca-snippet-row { grid-template-columns: minmax(0,1fr) !important; }
  .app-body .gca-remove-row,
  .app-body .gca-remove-editable { justify-self: end; min-width: 44px; min-height: 44px; }

  .app-body .settings-card { padding-inline: 15px !important; }
  .app-body .settings-inline-actions > .btn,
  .app-body .subscription-card-head > .btn { width: 100%; }
  .app-body .notification-preference-row { align-items: flex-start; }
}

@media (max-width: 420px) {
  .app-body .dashboard44-range-switch a { min-width: 54px; }
  .app-body .ocac-context-tag { max-width: 100%; overflow-wrap: anywhere; }
  .app-body .ga28-pills,
  .app-body .ga28-metric-toggles { margin-inline: -2px; }
  .app-body .gca-section { padding-inline: 13px; }
  .app-body .settings-nav { margin-inline: -2px; }
}

/* SPRINT6636542_ACTION_CENTER_IPHONE_REFINEMENT
 * iPhone-specific Action Center hardening. Desktop and tablet layouts remain unchanged.
 */
@media (max-width: 430px) {
  .app-body .content:has(.ocac) {
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: clip;
  }
  .app-body .ocac {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .app-body .ocac-head {
    margin-bottom: 14px;
    gap: 10px;
  }
  .app-body .ocac-head h1 {
    font-size: clamp(23px, 7vw, 27px);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
  .app-body .ocac-head p {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
  }
  .app-body .ocac-head-actions {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 7px;
  }
  .app-body .ocac-head-actions > * {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
  .app-body .ocac-learning,
  .app-body .ocac-list-intro,
  .app-body .ocac-empty,
  .app-body .ocac-history-collapsible {
    min-width: 0;
    max-width: 100%;
  }
  .app-body .ocac-learning {
    gap: 10px;
    padding: 13px !important;
  }
  .app-body .ocac-learning-icon {
    flex: 0 0 auto;
  }
  .app-body .ocac-learning > div:last-child {
    min-width: 0;
  }
  .app-body .ocac-learning p,
  .app-body .ocac-learning-types,
  .app-body .ocac-learning-types span {
    overflow-wrap: anywhere;
  }

  .app-body .ocac-impact-grid-direct {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px;
  }
  .app-body .ocac-impact-grid-direct > div {
    min-width: 0;
    padding: 11px 7px;
    text-align: center;
  }
  .app-body .ocac-impact-grid-direct strong {
    font-size: 18px;
    line-height: 1;
  }
  .app-body .ocac-impact-grid-direct span {
    font-size: 11px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .app-body .ocac-wizard,
  .app-body .ocac-compact-step,
  .app-body .ocac-step-expanded,
  .app-body .ocac-main {
    min-width: 0;
    max-width: 100%;
  }
  .app-body .ocac-compact-step {
    border-radius: 14px;
  }
  .app-body .ocac-compact-summary {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 9px !important;
    padding: 13px !important;
    align-items: start;
  }
  .app-body .ocac-compact-leading {
    display: grid !important;
    grid-template-columns: 28px minmax(0,1fr);
    gap: 9px;
    width: 100%;
  }
  .app-body .ocac-compact-leading > div {
    min-width: 0;
  }
  .app-body .ocac-compact-leading strong,
  .app-body .ocac-compact-leading small {
    display: block;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .app-body .ocac-compact-leading strong {
    font-size: 15px;
    line-height: 1.35;
  }
  .app-body .ocac-compact-leading small {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
  }
  .app-body .ocac-compact-tags {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    width: 100%;
    gap: 5px !important;
  }
  .app-body .ocac-context-tag {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: flex-start;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .app-body .ocac-open-improvement {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    width: 100%;
    padding: 10px 12px;
    text-align: center;
    white-space: normal;
  }

  .app-body .ocac-main {
    padding: 13px !important;
  }
  .app-body .ocac-main h2 {
    font-size: 20px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .app-body .ocac-platform {
    flex-wrap: wrap;
    min-width: 0;
    row-gap: 6px;
  }
  .app-body .ocac-platform > span,
  .app-body .ocac-platform > strong,
  .app-body .ocac-platform > small {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .app-body .ocac-platform small,
  .app-body .ocac-header-status {
    margin-left: 0 !important;
  }
  .app-body .ocac-block {
    margin-top: 14px;
    padding-top: 14px;
  }
  .app-body .ocac-block p,
  .app-body .ocac-proof-context,
  .app-body .ocac-proof-conclusion,
  .app-body .ocac-meaning p,
  .app-body .ocac-change-summary,
  .app-body .ocac-action-promise {
    overflow-wrap: anywhere;
  }
  .app-body .ocac-proof-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  .app-body .ocac-proof-grid > div {
    min-width: 0;
    padding: 9px !important;
  }
  .app-body .ocac-proof-grid span,
  .app-body .ocac-proof-grid strong {
    overflow-wrap: anywhere;
  }
  .app-body .ocac-change-hero {
    display: grid;
    grid-template-columns: 36px minmax(0,1fr);
    gap: 10px;
    padding: 12px !important;
  }
  .app-body .ocac-change-count {
    grid-column: 1 / -1;
    width: fit-content;
    max-width: 100%;
    margin: 0 !important;
    white-space: normal;
  }
  .app-body .ocac-change-list,
  .app-body .ocac-change-list div,
  .app-body .ocac-change-list dt,
  .app-body .ocac-change-list dd {
    min-width: 0;
    max-width: 100%;
  }
  .app-body .ocac-change-list dt,
  .app-body .ocac-change-list dd {
    padding: 9px 10px;
  }

  .app-body .ocac-negative-selection {
    padding: 12px !important;
  }
  .app-body .ocac-negative-selection-item {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    width: 100%;
  }
  .app-body .ocac-negative-term,
  .app-body .ocac-negative-term > div {
    min-width: 0;
  }
  .app-body .ocac-negative-term strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
  }
  .app-body .ocac-negative-item-actions {
    min-width: 0;
    justify-content: flex-end;
  }

  .app-body .ocac-rsa-diff,
  .app-body .ocac-rsa-diff > section,
  .app-body .ocac-rsa-fields,
  .app-body .ocac-rsa-fields li {
    min-width: 0;
    max-width: 100%;
  }
  .app-body .ocac-rsa-fields li {
    grid-template-columns: minmax(0,1fr) 44px !important;
    gap: 6px !important;
  }
  .app-body .ocac-rsa-refresh,
  .app-body .ocac-negative-remove {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .app-body .ocac-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 7px !important;
    padding: 10px 0 0 !important;
    margin-top: 10px;
    border-top: 1px solid #e5ecef;
    background: linear-gradient(to bottom,rgba(255,255,255,.94),#fff 16px);
  }
  .app-body .ocac-actions .ocac-btn {
    min-height: 48px;
    padding: 9px 10px;
    border-radius: 10px;
  }
  .app-body .ocac-actions .ocac-btn small {
    line-height: 1.25;
  }

  .app-body .ocac-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .app-body .ocac-modal-card {
    width: 100% !important;
    max-width: none !important;
    max-height: min(92dvh,760px) !important;
    padding: 20px 15px calc(16px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px 18px 0 0 !important;
    overscroll-behavior: contain;
  }
  .app-body .ocac-modal-close {
    width: 44px;
    height: 44px;
    right: 7px;
    top: 5px;
  }
  .app-body .ocac-modal-card h2 {
    margin-right: 42px;
    font-size: 20px;
  }
  .app-body .ocac-modal-actions {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 7px;
  }
  .app-body .ocac-modal-actions > * {
    width: 100%;
    min-height: 44px;
  }

  .app-body .ocac-history-collapsible > .ocac-section-head {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    min-height: 0;
  }
  .app-body .ocac-history-collapsible > .ocac-section-head .ocac-section-head-copy {
    min-width: 0;
  }
  .app-body .ocac-history-collapsible > .ocac-section-head h2,
  .app-body .ocac-history-collapsible > .ocac-section-head p {
    overflow-wrap: anywhere;
  }
  .app-body .ocac-history-collapsible > .ocac-section-head > .ocac-history-count {
    margin: 0 !important;
    align-self: center;
    font-size: 11px;
  }
  .app-body .ocac-history-step > .ocac-history-summary {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 7px;
    padding: 12px !important;
  }
  .app-body .ocac-history-step > .ocac-history-summary .ocac-history-status,
  .app-body .ocac-history-step > .ocac-history-summary .ocac-compact-tags {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
  }
  .app-body .ocac-history-expanded > .ocac-main {
    padding: 13px !important;
  }
  .app-body .ocac-history-expanded .ocac-history-expanded-meta-pair {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 390px) {
  .app-body .content:has(.ocac) {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .app-body .ocac-impact-grid-direct {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .app-body .ocac-impact-grid-direct > div {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    align-items: center;
    gap: 8px;
    text-align: left;
  }
  .app-body .ocac-impact-grid-direct span {
    margin-top: 0;
    font-size: 12px;
  }
  .app-body .ocac-proof-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .app-body .ocac-negative-selection-item {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .app-body .ocac-negative-item-actions {
    justify-content: space-between;
  }
  .app-body .ocac-history-collapsible > .ocac-section-head {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .app-body .ocac-history-collapsible > .ocac-section-head > .ocac-history-count {
    justify-self: start;
  }
}

/* Sprint 6636-665 — app mobile language switcher interaction closure.
 * The application header scroll container must not clip the language menu.
 * Keep the compact summary in the header; project the menu to the viewport.
 */
@media (max-width:900px){
  .app-top .language-switcher-app{position:relative!important;z-index:90!important;min-width:176px!important;max-width:196px!important;width:clamp(176px,34vw,196px)!important}
  .app-top .language-switcher-app > summary{width:100%!important;min-width:0!important;box-sizing:border-box!important;touch-action:manipulation!important}
  .app-top .language-switcher-app .language-switcher-current{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .app-top .language-switcher-app .language-switcher-menu{
    position:fixed!important;
    top:72px!important;
    right:64px!important;
    left:auto!important;
    width:min(280px,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
    max-height:calc(100dvh - 88px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    z-index:10000!important;
    box-sizing:border-box!important;
  }
  .app-top .language-switcher-app .language-switcher-menu a{min-height:48px!important;font-size:16px!important;touch-action:manipulation!important}
}
@media (max-width:420px){
  .app-top .language-switcher-app{min-width:148px!important;max-width:168px!important;width:clamp(148px,43vw,168px)!important}
  .app-top .language-switcher-app .language-switcher-menu{right:12px!important;width:calc(100vw - 24px)!important}
}

/* Sprint 6636-666 — locale integrity + native mobile selector.
 * The application header uses the browser-native select control on mobile.
 * This avoids clipping/touch bugs caused by a <details> menu inside the
 * horizontally scrollable top-actions container.
 */
.language-switcher-mobile-select{display:none}
@media (max-width:900px){
  .app-top .language-switcher-app.language-switcher-details{display:none!important}
  .app-top .language-switcher-mobile-select{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
    min-width:156px!important;
    max-width:196px!important;
    height:48px!important;
    margin:0!important;
  }
  .app-top .language-switcher-mobile-select .language-switcher-icon{
    position:absolute!important;left:14px!important;top:50%!important;transform:translateY(-50%)!important;
    width:19px!important;height:19px!important;color:#526579!important;pointer-events:none!important;z-index:2!important;
  }
  .app-top .language-switcher-mobile-select select{
    appearance:auto!important;-webkit-appearance:menulist!important;
    width:100%!important;min-width:0!important;max-width:none!important;height:48px!important;
    padding:0 12px 0 42px!important;border:1px solid #d7e1e9!important;border-radius:14px!important;
    background:#fff!important;color:#142033!important;font:800 16px/1.2 Manrope,Arial,sans-serif!important;
    text-transform:none!important;box-shadow:0 3px 10px rgba(15,23,42,.05)!important;
    touch-action:manipulation!important;cursor:pointer!important;
  }
  .app-top .language-switcher-mobile-select noscript button{min-height:48px}
}
@media (max-width:420px){
  .app-top .language-switcher-mobile-select{min-width:138px!important;max-width:160px!important}
}

/* Sprint 6636-667 — compact mobile language control.
 * iOS may render a visible native select label/menulist much larger than the
 * available app-header slot. The real select remains full-size and clickable,
 * but is transparent over our predictable compact visual button.
 */
@media (max-width:900px){
  .app-top .language-switcher-mobile-select{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 108px!important;
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
    height:46px!important;
    margin:0!important;
    padding:0 34px 0 38px!important;
    box-sizing:border-box!important;
    border:1px solid #d7e1e9!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 3px 10px rgba(15,23,42,.05)!important;
    overflow:hidden!important;
  }
  .app-top .language-switcher-mobile-select .language-switcher-icon{
    left:13px!important;top:50%!important;transform:translateY(-50%)!important;
    width:18px!important;height:18px!important;color:#526579!important;z-index:1!important;
  }
  .app-top .language-switcher-mobile-select .language-switcher-mobile-current{
    display:block!important;
    min-width:0!important;
    color:#142033!important;
    font:800 16px/1 Manrope,Arial,sans-serif!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
    text-align:center!important;
    pointer-events:none!important;
  }
  .app-top .language-switcher-mobile-select .language-switcher-mobile-chevron{
    position:absolute!important;
    right:14px!important;top:50%!important;
    width:9px!important;height:9px!important;
    border-right:2px solid #526579!important;
    border-bottom:2px solid #526579!important;
    transform:translateY(-68%) rotate(45deg)!important;
    pointer-events:none!important;
  }
  .app-top .language-switcher-mobile-select select{
    position:absolute!important;
    inset:0!important;
    z-index:3!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:inherit!important;
    opacity:0!important;
    background:transparent!important;
    color:transparent!important;
    appearance:auto!important;
    -webkit-appearance:menulist-button!important;
    font-size:16px!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
  }
  .app-top .language-switcher-mobile-select noscript{display:none!important}
}
@media (max-width:380px){
  .app-top .language-switcher-mobile-select{
    flex-basis:96px!important;width:96px!important;min-width:96px!important;max-width:96px!important;
    padding-left:34px!important;padding-right:30px!important;
  }
  .app-top .language-switcher-mobile-select .language-switcher-icon{left:11px!important;width:17px!important;height:17px!important}
  .app-top .language-switcher-mobile-select .language-switcher-mobile-chevron{right:11px!important}
}