/* Invyt mobile layer: fluid layout for any phone width (tested at 360, 390 and 412 CSS px).
   Loaded last so it can refine the base styles without touching them. */
:root { --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-t: env(safe-area-inset-top, 0px); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { overflow-x: hidden; }
img, video, svg, canvas { max-width: 100%; }
img { height: auto; }
.brand img, .brand-footer img { height: auto; }
.page-shell, .app-content, .admin-content { min-width: 0; }
p, h1, h2, h3, li, td, th, dd { overflow-wrap: anywhere; }

/* Installed (standalone) app: respect notch and home indicator */
@media (display-mode: standalone) {
  body { padding-top: var(--safe-t); }
  .site-footer { padding-bottom: calc(24px + var(--safe-b)); }
}

@media (max-width: 820px) {
  /* Compact app bar: logo + account actions on one row, section links scroll below */
  .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand account" "nav nav"; align-items: center; gap: 4px 10px; padding: calc(8px + var(--safe-t)) max(14px, var(--safe-l)) 4px max(14px, var(--safe-l)); min-height: 0; }
  .site-header .brand { grid-area: brand; }
  .site-header .brand img { width: 128px; height: auto; max-height: 40px; }
  .site-header .account-nav { grid-area: account; gap: 6px; justify-self: end; }
  .site-header .primary-nav { grid-area: nav; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 0 14px; }
  .site-header .primary-nav::-webkit-scrollbar { display: none; }
  .primary-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; }
  .primary-nav a[aria-current="page"] { background: #ece8f9; }
  .account-nav a, .account-nav .nav-button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; font-size: 14px; }
  .account-nav .button-small { min-height: 40px; padding: 0 14px; }
  .nav-button { padding: 0 8px; }

  .page-shell { padding: 16px max(16px, var(--safe-l)) 40px max(16px, var(--safe-l)); min-height: 0; }
  h1 { font-size: clamp(28px, 8.2vw, 38px); line-height: 1.12; }
  h2 { font-size: clamp(21px, 6vw, 27px); }
  .page-heading { margin-bottom: 14px; }

  /* Tap targets and iOS no-zoom inputs */
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: 16px; min-height: 46px; max-width: 100%; }
  textarea { min-height: 96px; }
  .button, button.button, .text-button, .text-link, .tab, .settings-tabs a { min-height: 44px; }
  .button { display: inline-flex; align-items: center; justify-content: center; }
  .form-actions, .hero-actions, .button-row { flex-wrap: wrap; }
  .form-actions .button, .form-actions button { flex: 1 1 140px; }
  label { display: block; }

  /* Navigation inside the app becomes a swipeable pill bar */
  .app-sidebar, .admin-sidebar { position: sticky; top: 0; z-index: 20; flex-direction: row; gap: 4px; padding: 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; border-radius: 16px; }
  .app-sidebar::-webkit-scrollbar, .admin-sidebar::-webkit-scrollbar { display: none; }
  .app-sidebar a, .admin-sidebar a { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; min-height: 44px; padding: 0 14px; }
  .settings-tabs, .tabs { overflow-x: auto; scrollbar-width: none; }

  /* Wide data never pushes the page sideways */
  .table-scroll, .comparison-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .app-content table, .admin-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { white-space: normal; }

  /* Grids collapse to one or two comfortable columns */
  .pricing-grid, .manage-columns, .two-col, .feature-grid, .card-grid { grid-template-columns: minmax(0, 1fr); }
  .stats-grid, .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-panel, .form-panel, .settings-panel { padding: 18px; border-radius: 16px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-two { grid-column: auto; }

  /* Dialogs fit any screen height, including dynamic browser bars */
  dialog { max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
  .upgrade-dialog { width: min(440px, calc(100vw - 24px)); padding: 22px 18px calc(18px + var(--safe-b)); }
  .dialog-close { min-width: 44px; min-height: 44px; }

  .site-footer { padding: 28px max(16px, var(--safe-l)) calc(96px + var(--safe-b)); text-align: left; }
  .site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .site-footer nav a { display: inline-flex; align-items: center; min-height: 36px; }
}

/* Floating support buttons: clear of the home indicator, icon-only on phones */
.support-fab { right: max(16px, var(--safe-r)); bottom: calc(16px + var(--safe-b)); }
@media (max-width: 600px) {
  .support-fab { right: max(12px, var(--safe-r)); bottom: calc(12px + var(--safe-b)); gap: 8px; }
  .support-fab a { min-width: 48px; min-height: 48px; justify-content: center; }
  .support-mail span, .support-wa span { display: none; }
  .support-wa, .support-mail { padding: 12px; }
  .support-wa svg { width: 26px; height: 26px; }
  .support-mail svg { width: 20px; height: 20px; }
}

/* Very small phones (320-360px) */
@media (max-width: 360px) {
  .site-header .brand img { width: 108px; }
  .account-nav .nav-button { padding: 0 4px; }
  .stats-grid, .admin-stats { grid-template-columns: minmax(0, 1fr); }
  .page-shell { padding-left: 12px; padding-right: 12px; }
}

/* Short landscape phones */
@media (max-height: 480px) and (orientation: landscape) {
  .site-header { position: static; }
  .app-sidebar, .admin-sidebar { position: static; }
  .support-fab { display: none; }
}