/*
 * EEP Mobile Polish v1.19.1
 *
 * Cross-cutting mobile + PWA fixes applied to every page that links it.
 * Targets phones (<=860 px) with a coarse pointer (touch). Desktop
 * styling is unaffected.
 *
 * Loaded from: dashboard, workspace, free-tools, account, all /tools/*,
 * and the main public marketing surfaces. Keeps the file tiny so it can
 * inline efficiently in the future if needed.
 *
 * v1.33.0 — entire file wrapped in `@layer legacy { ... }` so v3 layered
 * rules win the cascade. See css/eep-app.css for the layer order.
 */

@layer legacy {

/* ─── PWA — safe areas, scrollbars, touch behaviour ─── */
html {
  /* Respect notches/cutouts on iPhone X+ / Android edge displays */
  padding-left:  env(safe-area-inset-left,  0);
  padding-right: env(safe-area-inset-right, 0);

  /* v1.20.0: prevent anchor-scroll from landing under the sticky header.
     The public site uses a 66 px header, /tools/* uses 60 px, and the
     in-app shell uses a 54 px fixed topbar. 84 px clears the tallest +
     gives breathing room. The exact-mode rules below tune it further. */
  scroll-padding-top: 84px;
  scroll-behavior: smooth;
}

/* Anchored sections (id-targets) leave space above on jump-to.
   Without this, `<h2 id="features">` etc. land flush against the
   sticky header, hiding the title. */
[id]:not(html):not(body) {
  scroll-margin-top: 84px;
}

/* /tools/* pages — 60 px header → 76 px scroll padding */
html:has(.pub-header) { scroll-padding-top: 76px; }
html:has(.pub-header) [id]:not(html):not(body) { scroll-margin-top: 76px; }

/* In-app shell — 54 px fixed topbar → 70 px scroll padding */
.eep-app-mode { scroll-padding-top: 70px; }
.eep-app-mode [id]:not(html):not(body) { scroll-margin-top: 70px; }

/* v1.20.0: defensive body padding for pages that render content
   directly under a sticky header without a hero (account, settings,
   docs). The `.has-sticky-top` class can be opted in by pages that
   need it; we also catch the common pattern automatically below. */
body.has-sticky-top { padding-top: 8px; }

/* The auth shell already sets `padding-top: 54px` on body via inline
   adapter CSS. Make sure the marketing hero/breadcrumb does not get
   margin-collapsed into negative space. */
.pub-header + section,
.pub-header + main,
.pub-header + div,
.site-header + section,
.site-header + main,
.site-header + div { margin-top: 0; }
body {
  /* Disable browser double-tap zoom — keep pinch-zoom on canvases */
  touch-action: manipulation;
  /* Smooth momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  /* Hide the awkward "select all" callout on long-press for non-text UI */
  -webkit-tap-highlight-color: rgba(11, 94, 215, 0.10);
}

/* ─── Touch-pointer specific rules (phones + most tablets) ─── */
@media (pointer: coarse) {

  /* Min touch target 44 px (Apple HIG / Material) — applies broadly */
  button,
  .btn,
  .nav-cta,
  a.btn,
  a.nav-cta,
  a.pub-btn-try,
  a.pub-login,
  .tab-btn,
  .ft-tile,
  .ws-card,
  .qc-tile,
  .qc-card,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
  }

  /* Form inputs MUST be 16px+ or iOS will auto-zoom on focus */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Tables — let them scroll inside their parent instead of breaking layout */
  .table-wrap,
  .ws-card-body,
  .tool-card,
  .compare-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── Phone width breakpoint ─── */
@media (max-width: 860px) {

  /* Single-column grids — calculator tiles, dashboard stats, etc. */
  .ft-grid {
    grid-template-columns: 1fr !important;
  }
  .ws-grid,
  .stats-grid,
  .quick-calc-grid,
  .tool-cats,
  .feature-grid {
    grid-template-columns: 1fr !important;
  }

  /* Dashboard project list + right sidebar stack vertically */
  .dashboard-grid,
  .dash-body,
  .right-stack-2col,
  .right-stack-3col {
    grid-template-columns: 1fr !important;
  }

  /* Most "two columns side by side" inside cards → stack on phone */
  .form-row-2,
  .field-row,
  .ab-fields,
  .sld-form-fields {
    grid-template-columns: 1fr !important;
  }

  /* Hero text: ease the clamp() so very small phones don't wrap weirdly */
  .hero h1,
  .tool-hero h1 {
    font-size: clamp(22px, 6vw, 28px) !important;
    letter-spacing: -0.03em !important;
  }

  /* Public marketing nav — collapse the right-side links into a compact
     row. The mobile-nav.js drawer takes over for full nav. */
  .pub-nav-right > a:not(.pub-btn-try):not(.pub-login):not(.nav-cta) {
    display: none !important;
  }

  /* Pad the main container in from screen edge */
  .container,
  .pub-container {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  /* Tool hero — tighten paddings on mobile */
  .tool-hero,
  .hero.tool-hero {
    padding: 28px 0 24px !important;
  }
  .hero {
    padding: 32px 0 28px !important;
  }

  /* Tables inside any card — let them scroll horizontally rather than
     break the card. Combined with the touch-coarse rule above. */
  table {
    min-width: max-content;
  }

  /* Sticky tab bars sometimes sit under the topbar — lift them */
  .tab-bar-wrap {
    top: 0 !important;
  }
  .eep-app-mode .tab-bar-wrap {
    top: 54px !important;
  }

  /* SLD studio collapses to single column at this breakpoint — give it
     full viewport width. */
  .sld-studio-wrap {
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 0 24px !important;
  }

  /* Auth-shell content offset: sidebar is off-canvas on phones, but app-
     shell-adapter sets body padding-left: 228px unconditionally before
     its mobile media query. Override here so the page actually fills
     the viewport on phones.

     v1.36.19 — fixed the descendant-selector bug. `.eep-app-mode body`
     is a no-op because `.eep-app-mode` is stamped on `<body>` ITSELF
     and that selector requires an ANCESTOR with the class. The
     symptom (Persian-user-reported, mobile section): "سایدبار و
     داشبورد در حالت موبایل پر از ایرادات هست" — the body kept its
     228/240-px left padding on phones, so the off-canvas sidebar
     opened OVER content that was already pushed 240 px right. */
  body.eep-app-mode {
    padding-left: 0 !important;
  }
  body.eep-app-mode .eep-shell-topbar {
    left: 0 !important;
    padding: 0 12px !important;
  }
  body.eep-app-mode .eep-shell-crumb {
    font-size: 11px !important;
  }
  /* Hide non-essential topbar chips on phone */
  body.eep-app-mode .eep-shell-beta {
    display: none !important;
  }

  /* Modal dialogs: full width on phone with padding */
  .modal,
  .eep-save-card,
  .sld-welcome,
  .sld-form,
  .sld-tpl-grid {
    width: 100% !important;
    max-width: 100% !important;
  }
  .sld-tpl-grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer columns stack */
  .footer-grid,
  .pub-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

/* ─── Very narrow phones (<=420 px) ─── */
@media (max-width: 420px) {
  body { font-size: 14px; }
  .pub-brand-sub,
  .brand-subtitle { display: none !important; }
  .pub-brand-div,
  .brand-divider  { display: none !important; }
  .footer-cert-row { gap: 4px !important; }
  .pub-nav, .nav { height: 54px !important; }
}

/* ─── Standalone PWA mode (installed to home screen) ─── */
@media (display-mode: standalone) {
  /* Bottom safe-area for footers / sticky bars */
  body { padding-bottom: env(safe-area-inset-bottom, 0); }
  /* Top safe-area for fixed headers (iOS notch) */
  .site-header,
  .pub-header,
  .eep-shell-topbar {
    padding-top: env(safe-area-inset-top, 0) !important;
  }
}

/* ─── Reduce motion for users who request it ─── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

} /* end @layer legacy — v1.33.0 */