/* Mobile-only corrections. Loaded last so it settles the earlier mobile rules. */

@media(max-width:620px){

  /* ---- Shell lock: zero sideways scroll on mobile ------------------------------------
     Android can still pan a few dozen px even with overflow-x:clip when transforms /
     max-content descendants expand scrollable overflow. Use hidden + overscroll lock,
     and clip the hero (logo translate) + Account content so nothing escapes. */
  html,body{
    overflow-x:hidden!important;
    overscroll-behavior-x:none!important;
    max-width:100%!important;
    width:100%!important;
    position:relative!important;
  }
  .wrap{
    max-width:100%!important;
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }
  .hero{
    overflow-x:clip!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* ---- Bottom tabs: stop 100vw + centered-transform from widening the page ----------
     Old rule: width:calc(100vw - 18px); left:50%; transform:translateX(-50%).
     100vw ignores parent padding and often exceeds the usable width by ~6–24px. */
  .tabs{
    left:max(9px,env(safe-area-inset-left))!important;
    right:max(9px,env(safe-area-inset-right))!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
    box-sizing:border-box!important;
  }

  /* ---- Suggested-price strip: max-content column was leaving a few px of sideways scroll -- */
  .topProjectStrip{
    grid-template-columns:minmax(0,1fr) auto!important;
    max-width:100%!important;
    min-width:0!important;
    width:100%!important;
    box-sizing:border-box!important;
  }
  .topProjectStrip .stripPrice{
    min-width:0!important;
    max-width:100%!important;
  }
  .topEstimatedProfit{
    white-space:normal!important;
  }
  .heroUtilityActions{
    max-width:calc(100% - 24px)!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  /* Pro+/renew badge: only two lines — title, then date (no wrap cram). */
  .heroUtilityActions .heroRenewDate,
  #headerRenewDate.heroRenewDate{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:2px!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    margin-top:8px!important;
    padding:7px 10px!important;
    text-align:left!important;
    box-sizing:border-box!important;
  }
  .heroUtilityActions .heroRenewDate span,
  .heroUtilityActions .heroRenewDate time,
  .heroUtilityActions .heroRenewDate strong,
  #headerRenewDate.heroRenewDate span,
  #headerRenewDate.heroRenewDate time,
  #headerRenewDate.heroRenewDate strong{
    display:block!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    line-height:1.2!important;
    max-width:100%!important;
  }

  /* ---- Toasts were rendering off-screen --------------------------------------------- */
  #toast.toast{
    left:12px!important;
    right:12px!important;
    transform:none!important;
    margin:0!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    bottom:max(132px,calc(env(safe-area-inset-bottom) + 120px))!important;
    z-index:2147483600!important;
  }

  /* ---- Logo: same spot signed-in and signed-out ------------------------------------
     Keep the account chip out of document flow so “Remember me” can’t shove the logo
     when signed out. Transform matches the current signed-in placement. */
  .hero .accountIndicator,
  #headerAccountIndicator.accountIndicator{
    position:absolute!important;
    top:12px!important;
    right:12px!important;
    left:auto!important;
    bottom:auto!important;
    margin:0!important;
    z-index:20!important;
  }
  body .appLogo,
  body.signed-in .appLogo,
  body.signed-out .appLogo{
    transform:translateY(-26px)!important; /* was translate(-5%,..): the 5% left nudge mis-centred the logo, which made every page read as shifted right */
    margin-top:0!important;
    margin-bottom:-20px!important;
  }
  body .hero,
  body.signed-in .hero,
  body.signed-out .hero{
    padding-top:140px!important;
  }

  /* ---- Account page: Pro+ signed-in overflow ----------------------------------------
     Unique to Account when signed in: Change Plan button (nowrap price line),
     planLifecycle Manage Billing strip, hero actions, integration card.
     Those raise document.scrollWidth; docks pin to the wide layout viewport. */
  #account.accountPage{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
    touch-action:pan-y!important;
  }
  /* Contain every Account card so nested nowrap can't widen the page. */
  #account.accountPage > *,
  #account.accountPage .card,
  #account.accountPage .accountPageHero,
  #account.accountPage .accountPlanCard,
  #account.accountPage .accountPagePlanCard,
  #account.accountPage .accountIntegrationCard,
  #account.accountPage .accountManagePanel,
  #account.accountPage .accountDataControls,
  #account.accountPage .legalLinksCard,
  #account.accountPage .workflowDashboardBar,
  #account.accountPage .planLifecycle{
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }
  #account.accountPage .accountPlanCard,
  #account.accountPage .accountPagePlanCard{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #account.accountPage .accountPlanCard .planLifecycle,
  #account.accountPage .accountPagePlanCard .planLifecycle,
  #account.accountPage .accountPlanCard .accountStorageProgress,
  #account.accountPage .accountPagePlanCard .accountStorageProgress,
  #account.accountPage .accountPlanCard > .btn,
  #account.accountPage .accountPagePlanCard > .btn,
  #account.accountPage .accountPlanIcon{
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  #account.accountPage .accountPlanIcon{
    width:68px!important;
    height:68px!important;
    margin:0 auto!important;
  }
  #account.accountPage .accountPlanDetails,
  #account.accountPage .accountPageIdentity,
  #account.accountPage .accountPageIdentity h1,
  #account.accountPage .accountPageIdentity p,
  #account.accountPage .accountIntegrationCard > div,
  #account.accountPage [data-current-plan-limits],
  #account.accountPage [data-current-plan-name]{
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  #account.accountPage .accountPlanCard > .btn,
  #account.accountPage .accountPlanCard > .btn b,
  #account.accountPage .accountPlanCard > .btn small,
  #account.accountPage .accountPagePlanCard > .btn,
  #account.accountPage .accountPagePlanCard > .btn b,
  #account.accountPage .accountPagePlanCard > .btn small,
  #account.accountPage .accountPageHeroActions .btn,
  #account.accountPage .accountIntegrationCard > .btn,
  #account.accountPage [data-manage-billing],
  #account.accountPage .planManageBilling{
    white-space:normal!important;
    min-width:0!important;
    max-width:100%!important;
  }
  #account.accountPage .accountPageHero{
    grid-template-columns:auto minmax(0,1fr)!important;
  }
  #account.accountPage .accountPageHeroActions{
    grid-column:1 / -1!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
  }
  #account.accountPage .accountIntegrationCard{
    grid-template-columns:auto minmax(0,1fr)!important;
  }
  #account.accountPage .accountIntegrationCard > .btn{
    grid-column:1 / -1!important;
    width:100%!important;
  }
  #account.accountPage .legalLinksCard{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
  }
  #account.accountPage .legalLinkActions{
    flex-wrap:wrap!important;
    min-width:0!important;
  }
  #account.accountPage .accountDataControls .actions,
  #account.accountPage .accountAppData .actions,
  #account.accountPage .accountManagePanel .actions{
    grid-template-columns:minmax(0,1fr)!important;
  }
  /* Last few px: any leftover nowrap / max-content inside Account. */
  #account.accountPage .btn,
  #account.accountPage button,
  #account.accountPage .line,
  #account.accountPage .line strong,
  #account.accountPage .accountStorageProgressHeader,
  #account.accountPage .accountStorageProgressHeader strong{
    min-width:0!important;
    max-width:100%!important;
  }
  #account.accountPage .workflowDashboardBar{
    grid-template-columns:auto minmax(0,1fr) auto auto!important;
    overflow:hidden!important;
  }
  #account.accountPage .workflowSpark{display:none!important}

  /* ---- Manage Billing / Auto-Renew --------------------------------------------------- */
  .planLifecycle{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:12px!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  .planLifecycle > div,
  .planLifecycle small,
  .planLifecycle strong{
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
  .planLifecycle label,
  .planLifecycle .planManageBilling,
  .planLifecycle [data-manage-billing],
  .planLifecycleControls .planManageBilling,
  .planLifecycleControls [data-manage-billing],
  .planLifecycleControls .autoRenewToggle{
    white-space:normal!important;
    min-width:0!important;
  }
  .planLifecycleControls{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    flex-wrap:wrap!important;
  }
  .planLifecycleControls .planManageBilling,
  .planLifecycleControls [data-manage-billing],
  .planLifecycle .planManageBilling,
  .planLifecycle [data-manage-billing]{
    flex:1 1 auto!important;
    width:100%!important;
    margin:0!important;
  }
  .planLifecycleControls .autoRenewToggle{
    flex:0 1 auto!important;
    margin:0!important;
  }

  /* ---- Floating docks stay in the *visual* phone frame ------------------------------
     Prefer inset anchoring over 100dvw caps. JS also pins to visualViewport when the
     layout is still wider than the screen (Android chrome / Brave). */
  #floatingActionDock,
  .completePrintDock{
    position:fixed!important;
    right:max(12px,env(safe-area-inset-right))!important;
    left:auto!important;
    width:auto!important;
    max-width:calc(100% - 24px)!important;
    transform:none!important;
    box-sizing:border-box!important;
  }
  .completePrintDock{
    width:auto!important;
    max-width:min(var(--dock-width,100%),calc(100% - 24px))!important;
  }
  /* Tip bubble must not contribute width while hidden (opacity:0 still expands some engines). */
  .completePrintInfo::after{
    content:none!important;
  }
  .completePrintInfo:hover::after,
  .completePrintInfo:focus-visible::after{
    content:attr(data-tip)!important;
    position:fixed!important;
    right:12px!important;
    bottom:68px!important;
    width:min(280px,calc(100% - 24px))!important;
  }

  /* ---- Dialogs / popups -------------------------------------------------------------- */
  .accountPlanBackdrop,
  .accountProfileBackdrop,
  .planLimitBackdrop,
  .simulatedCheckoutBackdrop,
  .completePrintOverlay,
  .themedDialogBackdrop,
  .integrationBackdrop,
  .lockedArchiveBackdrop,
  .planEnabledBackdrop{
    width:100%!important;
    max-width:100%!important;
    padding:8px!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }
  .accountPlanDialog,
  .accountProfileDialog,
  .planLimitDialog,
  .simulatedCheckoutDialog,
  .completePrintModal,
  .themedDialog,
  .aiAnalysisDialog,
  .integrationDialog,
  .planEnabledDialog,
  .lockedArchiveDialog{
    width:min(100%,calc(100% - 16px))!important;
    max-width:calc(100% - 16px)!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .supportChatPanel{
    left:8px!important;
    right:8px!important;
    width:auto!important;
    max-width:calc(100% - 16px)!important;
  }
  .planBestValue{
    top:10px!important;
    right:10px!important;
    left:auto!important;
    width:auto!important;
    max-width:calc(100% - 20px)!important;
    padding:5px 10px!important;
    transform:none!important;
    border-radius:999px!important;
    text-align:center;
  }
  .planCompareCard,
  .accountPlanScroll,
  .accountProfileScroll,
  .simulatedCheckoutScroll,
  .completePrintModal,
  .themedDialog,
  .aiAnalysisDialog{
    overflow-x:hidden!important;
  }
  .completePrintRow,
  .planCompareCard li,
  .simulatedCheckoutBody li{
    min-width:0!important;
  }

  /* ---- Legal documents --------------------------------------------------------------- */
  .legalBackdrop{
    padding:0!important;
    place-items:stretch!important;
  }
  .legalDialog{
    width:100%!important;
    max-width:100%!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
  }
  .legalDialog>*{min-width:0}

  /* ---- Workflow dashboard bar: no title overlap when expanded on phones ------------
     Desktop uses absolute reveal over taller min-height. On touch, that lands on top of
     “Workflow & Business Dashboard”. Stack the reveal on its own row instead. */
  /* Always-expanded Pro Workspace card (no hover growth). Keep .is-open for Close Dashboard only. */
  .workflowDashboardBar,
  .workflowDashboardBar:hover,
  .workflowDashboardBar:focus-visible,
  .workflowDashboardBar:focus,
  .workflowDashboardBar.is-open{
    min-height:0!important;
    height:auto!important;
    align-items:center!important;
    padding-bottom:12px!important;
    grid-template-columns:auto minmax(0,1fr) auto auto!important;
    transform:none!important;
  }
  .workflowDashboardBar .workflowReveal,
  .workflowDashboardBar:hover .workflowReveal,
  .workflowDashboardBar:focus-visible .workflowReveal,
  .workflowDashboardBar:focus .workflowReveal,
  .workflowDashboardBar.is-open .workflowReveal{
    position:static!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    grid-column:1 / -1!important;
    width:100%!important;
    margin-top:10px!important;
    opacity:1!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
  }
  .workflowDashboardBar .workflowReveal>span:first-child,
  .workflowDashboardBar:hover .workflowReveal>span:first-child,
  .workflowDashboardBar:focus-visible .workflowReveal>span:first-child,
  .workflowDashboardBar:focus .workflowReveal>span:first-child,
  .workflowDashboardBar.is-open .workflowReveal>span:first-child{
    flex-wrap:wrap!important;
    gap:4px 6px!important;
    line-height:1.35!important;
  }
  .workflowDashboardBar .workflowBarTitle{
    min-width:0!important;
  }
  .workflowDashboardBar .workflowBarTitle strong{
    display:block!important;
    white-space:normal!important;
    line-height:1.2!important;
  }

  /* ---- themedSelect menus (Application Font / Currency / etc.): vertical pan only ----
     Menus portal to body. Long option lists need overflow-y + touch-action:pan-y so the
     shell's overflow-x:hidden / dock touchmove does not swallow vertical scrolling.
     Scoped to the menu itself — Account horizontal lock stays intact. */
  body > .themedSelectMenu{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:3px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    overscroll-behavior:contain!important;
    max-height:min(56vh,380px)!important;
  }
  body > .themedSelectMenu .themedSelectOption{
    flex:0 0 auto!important;
    touch-action:pan-y!important;
  }
}

/* Desktop: keep logo centered horizontally — only the mobile block above may shift it left. */
@media(min-width:621px){
  body .appLogo{
    transform:translateY(22px)!important;
  }
}

/* ---- Shell lock for large phones and phones in landscape ---------------------------
   The lock above only runs at <=620px, so a phone turned sideways (or a large
   phone) fell through it: the layout viewport could grow wider than the screen,
   and because the page centres inside that wider layout the whole thing reads as
   shifted to the right. Gated on pointer:coarse so desktop windows at these
   widths are untouched. */
@media (max-width:900px) and (pointer:coarse){
  html,body{
    overflow-x:hidden!important;
    overscroll-behavior-x:none!important;
    max-width:100%!important;
    width:100%!important;
  }
  .wrap{
    max-width:100%!important;
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  /* 100vw ignores the scrollbar/visual-viewport delta and is the usual culprit. */
  .tabs{
    left:max(9px,env(safe-area-inset-left))!important;
    right:max(9px,env(safe-area-inset-right))!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
    box-sizing:border-box!important;
  }
}

/* ---- Logo centring -----------------------------------------------------------------
   The logo was set wider than .hero's content box and anchored left with
   margin-right:-32px, so it overflowed to the right; a transform:translate(-5%)
   was then used to drag it back. That compensation never matched the real
   overflow across screen widths, so the logo sat off-centre and the whole page
   read as shifted. Make it fit and centre honestly instead. */
@media (max-width:900px){
  body .appLogo,
  body.signed-in .appLogo,
  body.signed-out .appLogo{
    width:min(360px,100%)!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}