/* ==========================================================================
   polish-mobile.css — Post-V3 mobile/polish override layer (STREAM B)
   --------------------------------------------------------------------------
   CSS-ONLY overrides for site/dashboard.html. Loaded AFTER the in-page
   <style> block, so equal-specificity rules here win on cascade order.

   Structure:
     1. Global safe fixes (all widths — small, behavior-only, brand-neutral)
     2. @media (max-width: 720px) — iPhone-first layout polish (390px target)
     3. prefers-reduced-motion

   Constraints honored:
     - No desktop layout changes (everything structural is under the 720px query)
     - No functionality hidden or disabled — only reflowed
     - No new fonts / no external assets ($0, offline-safe)
     - Brand untouched (colors, dark header, radii all inherited)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. GLOBAL SAFE FIXES — apply at every width
   ------------------------------------------------------------------------- */

/* 1a. Prevent page-level horizontal scroll without breaking position:sticky.
      overflow-x:clip (unlike hidden) does not create a scroll container,
      so the sticky .topbar keeps working. */
html { overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }

/* 1b. iOS auto-zoom guard: any focusable text control must be >= 16px,
      otherwise Safari zooms the viewport on focus. This is behavior-only
      (no visual redesign) so it is safe at all widths. */
select#bizSelect,
.field input, .field textarea,
.appr-note,
.chk-notes,
.ffield input[type="text"], .ffield select, .ffield textarea,
.inline-form input,
.inline-form-row input, .inline-form-row select,
.leadsearch { font-size: 16px; }

/* 1c. Anchor offset under the sticky header.
      .topbar (brand row + .viewnav row) is position:sticky top:0, so in-page
      jumps to a section must not park the section title under it. */
section.card, .dsec, #sec-hero { scroll-margin-top: 170px; }

/* 1d. Smooth anchor transitions are declared in the base stylesheet
      (html{scroll-behavior:smooth}); keep it, and make keyboard focus not
      hide targets behind the sticky header either. */
:focus-visible { scroll-margin-top: 170px; outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   2. MOBILE LAYOUT — @media (max-width: 720px), iPhone 390px primary target
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {

  /* ----- 2a. Header + view nav --------------------------------------------
     .viewnav lives INSIDE the sticky header, so it is already sticky.
     Make the tab row a comfortable horizontal scroll rail with snap and
     no clipped tabs. */
  .viewnav-inner {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .vtabs {
    scroll-snap-type: x proximity;
    scroll-padding-left: max(12px, env(safe-area-inset-left));
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .vtab {
    scroll-snap-align: start;
    flex: none;                 /* tabs never shrink into each other */
    min-height: 44px;           /* 44px tap target (base was 40px) */
    padding: 10px 16px;
  }
  .resetbtn { min-height: 44px; flex: none; }

  /* Keep the business picker from squeezing the header rows */
  .bizpick { flex: 1 1 100%; }
  select#bizSelect { max-width: 100%; min-width: 0; width: 100%; }
  .refreshbtn { min-height: 44px; }

  /* ----- 2b. Section rhythm on phone --------------------------------------
     Slightly tighter card padding and rhythm so 390px reads as one calm
     column, without touching the desktop 18px/18px rhythm. */
  .wrap {
    padding: 14px 12px calc(90px + env(safe-area-inset-bottom));
  }
  section.card { padding: 16px 14px; margin-bottom: 14px; }
  .sec-head { flex-wrap: wrap; }
  .sec-title { font-size: 18px; }

  /* ----- 2c. Tap targets (>= 44px) ----------------------------------------
     Every interactive element a thumb can reach during a demo. */
  .xbtn { width: 44px; height: 44px; }                 /* modal close (was 42px) */
  .mini-tab { min-height: 44px; }                      /* scope mini tabs (42px) */
  .disc-chip { min-height: 44px; }                     /* discovery chips (40px) */
  .btn-mini { min-height: 44px; }                      /* entity actions (40px) */
  .seg button { min-height: 44px; padding: 8px 16px; } /* checklist segments (36px) */
  .checkopt { min-height: 44px; padding: 10px 16px; }  /* checklist pills (~36px) */
  .schedpill, .modebadge { min-height: 44px; display: inline-flex; align-items: center; }
  .dot {                                                   /* pres dots: 12px visual, */
    width: 44px; height: 44px; padding: 16px;             /* 44px hit area */
    background-clip: content-box;                        /* dot stays 12px */
  }
  .pbtn { min-height: 44px; }

  /* ----- 2d. Tables scroll inside their own containers --------------------
     table.tbl becomes a block-level horizontal scroller so the page itself
     never scrolls sideways. Table semantics for assistive tech are kept
     (rows/cells still render via anonymous table boxes). */
  table.tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -4px; margin-right: -4px;    /* reclaim card padding edge */
    padding-left: 4px; padding-right: 4px;
  }
  table.tbl th, table.tbl td { white-space: nowrap; }

  /* ----- 2e. leadModal (and #v3Modal) — comfortable full-sheet ------------
     Base is already a bottom sheet (align-items:flex-end). Make it taller,
     respect the home-indicator safe area, and keep the header pinned while
     .modal-body scrolls internally (already the case via flex column). */
  .modal-bg { padding: 0; }
  .modal {
    max-height: 94dvh;
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-head {
    position: sticky; top: 0;                /* belt-and-braces: header never scrolls away */
    background: #fff;
    z-index: 1;
    padding: 14px 16px;
  }
  .modal-body {
    padding: 16px;
    overscroll-behavior: contain;            /* stop scroll chaining to the page behind */
  }
  .modal-actions .btn,
  .modal-actions .btn-ghost,
  .modal-actions .btn-danger { flex: 1 1 100%; }   /* stacked full-width actions on phone */

  /* ----- 2f. Long text — never break the layout --------------------------- */
  .ent-name, .lead-name, .modal-name, .opp-title,
  .chk-text, .tl-title, .pres-title {
    overflow-wrap: anywhere;                 /* long unbroken strings wrap instead of overflowing */
  }
  .ent-top { min-width: 0; }
  .ent-name { min-width: 0; }
  .kv-list .kv { min-width: 0; }
  .kv-list .kv b { text-align: right; overflow-wrap: anywhere; }

  /* ----- 2g. Hero / stat grids — stay one calm column set ----------------- */
  .hero { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-card { padding: 16px 14px; min-width: 0; }
  .hero-num { font-size: 36px; }
  .statgrid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat { padding: 10px 8px; min-width: 0; }
  .stat .v { font-size: 17px; overflow-wrap: anywhere; }
  .stat .l { font-size: 11.5px; }

  /* ----- 2h. Blueprint flow nodes — wrap instead of squeezing -------------- */
  .bp-flow { flex-wrap: wrap; }
  .bp-node { flex: 1 1 100px; min-width: 0; }

  /* ----- 2i. Discovery / demo forms — breathing room ---------------------- */
  .dsec-body { padding: 12px 14px; }
  .dsec-foot { padding: 12px 14px; }
  .disc-actions .btn, .disc-actions .btn-ghost,
  .disc-actions .btn-danger { flex: 1 1 100%; }

  /* ----- 2j. Toast — above the home indicator ----------------------------- */
  .toast {
    bottom: calc(24px + env(safe-area-inset-bottom));
    max-width: 92vw;
    text-align: center;
  }

  /* ----- 2k. Presentation screens (demo mode) ------------------------------
     pres-btn already 52px; tighten title scale slightly for 390px. */
  .pres { padding: 20px 16px; }
  .pres-title { font-size: 26px; }
  .pres-body { font-size: 16px; }
  .pres-nav { flex-wrap: wrap; }

  /* ----- 2l. Phase 5: slim sticky header + tappable tabs (Tony's iPhone) ----
     The full .topbar (brand + mode toggle + business picker + updated line +
     scheduler/mode pills + refresh + tab row) is position:sticky and eats
     ~3/4 of a 390px viewport, so content below is unreachable without long
     scrolling. Fix: dissolve the header box (display:contents) so the header
     rows scroll away with the page, and pin ONLY the tab row (.viewnav) via
     its own position:sticky. Backgrounds are re-applied to the surviving
     rows; inheritance (color) is unaffected by display:contents. */
  .topbar { display: contents; }
  .topbar-inner {
    background: linear-gradient(180deg, var(--navy), var(--navy-2));
    padding: 10px 12px;
    gap: 8px;
  }
  .present .topbar-inner { background: linear-gradient(180deg, #0b2b23, #0f4234); }
  .viewnav {
    position: sticky;
    top: 0;
    z-index: 60;
    box-shadow: 0 2px 12px rgba(10, 20, 40, .25);
  }
  /* Compact the (now scrolling, non-sticky) header rows on phone. */
  .brand { font-size: 15px; }
  .brand small { display: none; }
  .updated { display: none; }
  /* Anchor offset matches the slim sticky tab row (~60px), not the old tall
     header (170px). */
  section.card, .dsec, #sec-hero { scroll-margin-top: 76px; }
  :focus-visible { scroll-margin-top: 76px; }

  /* ----- 2m. Phase 5: every tab looks tappable (Tony's iPhone) -------------
     Inactive .vtab rendered as bare text, indistinguishable from words.
     Give every tab a visible pill; keep the active tab strongest. 44px
     targets already set in 2a. */
  .vtab {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .30);
    color: #fff;
  }
  .vtab:hover { background: rgba(255, 255, 255, .20); }
  .vtab.active {
    background: #fff;
    color: var(--navy);
    border-color: #fff;
  }
  .present .vtab { border-color: rgba(255, 217, 122, .35); }
  .present .vtab.active { background: #ffd97a; color: #0b2b23; border-color: #ffd97a; }
}

/* ---------------------------------------------------------------------------
   3. Reduced motion — respect the OS setting
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .prog > div { transition: none; }
  .btn:active, .btn-approve:active, .btn-reject:active,
  .btn-mini:active, .refreshbtn:active { transform: none; }
}