/* ==========================================================
   Pastors Network — Mobile (phone user agents only)
   Gate: body.pn-mobile-ua.pn-page-reset — set server-side in
   pn_add_page_reset_class(). No width media queries in this file.
   Loads last. Every rule here may use !important because the
   legacy blocks it overrides already do.
   ========================================================== */

/* MOBILE-BUILD-1 (7 Sep 2026). The three values below were MEASURED, not
   chosen, on build 2026.0906.2106 under an emulated Samsung S23 Ultra
   (412 x 915, Android Chrome UA):
     GUTTER = 12px  GORDON'S CALL (7 Sep 2026): the dashboard's own value.
                    Measured, the greeting card sat at 36 because the theme's
                    <article> wrapper adds 24 to .pn-mob-layout's 12; the 24
                    is theme padding, not the gutter, and is zeroed below.
     BAND   = 24px  BookBuy's .hero top: the same <article> carries 12px of
                    top padding and .pn-wrap carries 12px.
     NAV    = 87px  #pn-bottom-nav's rendered height.
   The ancestor walk found ONE wrapper the brief's lists did not name —
   the theme's <article class="page"> (post-N) — and on PN-Local a bare
   div.container directly under #page-container. Both are zeroed below so
   the plugin wrapper is the only element carrying the gutter and the band. */

/* MOBILE-BUILD-1.6 (Gordon, 7 Sep 2026): every builder-chain selector below is
   scoped to #main-content. Unscoped, .et_pb_section/.et_pb_row/.et_pb_column
   reached the Divi Theme Builder FOOTER, which is built from the same classes:
   in landscape (915px, wider than the 768px footer-hiding query) the footer was
   painted grey and its logo column stretched to full width. The footer is not
   hidden here on purpose: that would conceal the symptom and leave an over-broad
   rule for Builds 2 and 3 to build on. */

/* B1.2 PAGE GROUND. One colour, the desktop colour, on the body and on every
   theme wrapper between the body and .pn-wrap. */
body.pn-mobile-ua.pn-page-reset,
body.pn-mobile-ua.pn-page-reset #page-container,
body.pn-mobile-ua.pn-page-reset #et-main-area,
body.pn-mobile-ua.pn-page-reset #main-content,
body.pn-mobile-ua.pn-page-reset #page-container .container,
body.pn-mobile-ua.pn-page-reset article.page,
body.pn-mobile-ua.pn-page-reset .entry-content,
body.pn-mobile-ua.pn-page-reset .et-l--post,
body.pn-mobile-ua.pn-page-reset #main-content .et_builder_inner_content,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_section,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_row,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_column,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_module,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_code_inner,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_text_inner,
body.pn-mobile-ua.pn-page-reset .pn-wrap,
body.pn-mobile-ua.pn-page-reset .pn-wrap.pn-dashboard,
body.pn-mobile-ua.pn-page-reset .pn-dashboard,
body.pn-mobile-ua.pn-page-reset .pn-mob-layout {
    background: #f4f5f7 !important;
    background-color: #f4f5f7 !important;
}

/* B1.3 ONE WIDTH. The theme chain goes full-bleed with no side margin or
   padding; the plugin wrapper carries the only gutter, 12px, the dashboard's
   own value (Gordon, 7 Sep 2026; measured 36 = 12 + 24 theme padding). */
body.pn-mobile-ua.pn-page-reset #et-main-area,
body.pn-mobile-ua.pn-page-reset #main-content,
body.pn-mobile-ua.pn-page-reset #page-container .container,
body.pn-mobile-ua.pn-page-reset article.page,
body.pn-mobile-ua.pn-page-reset .entry-content,
body.pn-mobile-ua.pn-page-reset .et-l--post,
body.pn-mobile-ua.pn-page-reset #main-content .et_builder_inner_content,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_section,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_row,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_column,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_module,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_code_inner,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_text_inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.pn-mobile-ua.pn-page-reset .pn-wrap:not(.pn-dashboard) {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
}
/* The dashboard's gutter lives on its inner layout element (that is where
   GUTTER was measured), so the wrapper stays at padding 0 and the inner
   element is pinned to the same value. */
body.pn-mobile-ua.pn-page-reset .pn-dashboard .pn-mob-layout {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* B1.4 ONE BAND ABOVE THE BANNER. 24px is BookBuy's value measured on
   7 Sep 2026. The theme chain contributes nothing; the wrapper carries it all. */
body.pn-mobile-ua.pn-page-reset #et-main-area,
body.pn-mobile-ua.pn-page-reset #main-content,
body.pn-mobile-ua.pn-page-reset #page-container .container,
body.pn-mobile-ua.pn-page-reset article.page,
body.pn-mobile-ua.pn-page-reset .entry-content,
body.pn-mobile-ua.pn-page-reset .et-l--post,
body.pn-mobile-ua.pn-page-reset #main-content .et_builder_inner_content,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_section,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_row,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_column,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_module,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_code_inner,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_text_inner {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.pn-mobile-ua.pn-page-reset .pn-wrap:not(.pn-dashboard) {
    padding-top: 24px !important;
}
body.pn-mobile-ua.pn-page-reset .pn-dashboard .pn-mob-layout {
    padding-top: 24px !important;
}
body.pn-mobile-ua.pn-page-reset .hero {
    margin-top: 0 !important;
}

/* B1.5 NAV CLEARANCE, ONCE. 87px measured on 7 Sep 2026. Previously reserved on
   body AND #page-container, stacking to ~172px, then the wrapper added 64px and
   the theme's <article> another 96px. */
body.pn-mobile-ua.pn-page-reset {
    padding-bottom: calc(87px + 12px) !important;
}
/* The whole chain under the body reserves nothing. On LIVE the builder row
   (.et_pb_row) carries 12px of bottom padding that PN-Local, which renders no
   builder chain, never showed; found by the live AFTER run on 7 Sep 2026. */
body.pn-mobile-ua.pn-page-reset #page-container,
body.pn-mobile-ua.pn-page-reset #page-container .container,
body.pn-mobile-ua.pn-page-reset article.page,
body.pn-mobile-ua.pn-page-reset #et-main-area,
body.pn-mobile-ua.pn-page-reset #main-content,
body.pn-mobile-ua.pn-page-reset .entry-content,
body.pn-mobile-ua.pn-page-reset .et-l--post,
body.pn-mobile-ua.pn-page-reset #main-content .et_builder_inner_content,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_section,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_row,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_column,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_module,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_code_inner,
body.pn-mobile-ua.pn-page-reset #main-content .et_pb_text_inner {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
body.pn-mobile-ua.pn-page-reset .pn-wrap,
body.pn-mobile-ua.pn-page-reset .pn-wrap.pn-dashboard {
    padding-bottom: 16px !important;
}
/* Found by the ancestor walk on 7 Sep 2026, on live and on PN-Local alike: the
   theme holds #page-container to the viewport height (min-height 915px on the
   S23), so a page shorter than the screen scrolled by exactly the body's nav
   reserve — 99px of empty grey under the dashboard and every short module.
   The body paints the ground, so the container needs no minimum. */
body.pn-mobile-ua.pn-page-reset #page-container {
    min-height: 0 !important;
}

/* ===================================================================== */
/* MOBILE BUILD 2 — hero and navigation (7 Sep 2026)                     */
/* ===================================================================== */

/* B2.2 HERO. Cog top-right on the title line; primary action alone under the
   title; trail reduced to a back link on child pages and nothing on top-level
   pages; description two lines, height reserved. The current-page span is
   .crumb__cur (see module-ui.php). */
body.pn-mobile-ua.pn-page-reset .hero {
    position: relative !important;
    padding: 16px !important;
}
body.pn-mobile-ua.pn-page-reset .hero .crumb__root,
body.pn-mobile-ua.pn-page-reset .hero .crumb__sep,
body.pn-mobile-ua.pn-page-reset .hero .crumb__cur {
    display: none !important;
}
body.pn-mobile-ua.pn-page-reset .hero .crumb:not(:has(.crumb__parent)) {
    display: none !important;
}
body.pn-mobile-ua.pn-page-reset .hero .crumb__parent::before {
    content: "\2039\00a0";   /* ‹ and a non-breaking space */
}
body.pn-mobile-ua.pn-page-reset .hero .crumb__parent {
    display: inline-block !important;
    min-height: 44px !important;
    line-height: 44px !important;
    margin: -12px 0 -6px -8px !important;
    padding: 0 8px !important;
}
body.pn-mobile-ua.pn-page-reset .hero-top {
    display: block !important;
}
body.pn-mobile-ua.pn-page-reset .hero-top h1 {
    padding-right: 56px !important;   /* room for the cog */
}
body.pn-mobile-ua.pn-page-reset .hbtns {
    display: flex !important;
    width: auto !important;
    justify-content: flex-start !important;
    margin-top: 12px !important;
    min-height: 44px !important;   /* the button row is reserved even when a module has no primary action (Operations before set-up) */
}
body.pn-mobile-ua.pn-page-reset .hbtns .menuwrap {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
}
body.pn-mobile-ua.pn-page-reset .hero .crumb:has(.crumb__parent) ~ .hero-top .menuwrap {
    top: 44px !important;   /* child pages: the cog sits level with the title, below the back link */
}
body.pn-mobile-ua.pn-page-reset .hero .pop {
    right: 0 !important;
}
/* B2.2c CHILD HERO COLLAPSES (Gordon, 7 Sep 2026, from member-profile.png: a
   deliberate departure from the brief's "child = top-level + one line"). A
   child page never gains a primary button, and the two hero types are never
   seen together, so the reserved button row and the empty description slot
   were 83px of navy under the title. A child hero's height comes from what it
   contains: the back link and the title. Top-level heroes keep their reserve.
   A child page that does carry a description keeps it (only :empty collapses). */
body.pn-mobile-ua.pn-page-reset .hero .crumb:has(.crumb__parent) ~ .hero-top .hbtns {
    min-height: 0 !important;
    margin-top: 0 !important;
}
body.pn-mobile-ua.pn-page-reset .hero .crumb:has(.crumb__parent) ~ .hero-desc:empty {
    display: none !important;
    min-height: 0 !important;
    margin-top: 0 !important;
}
body.pn-mobile-ua.pn-page-reset .hero-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.45 !important;
    min-height: calc(2 * 1.45em) !important;
    margin-top: 12px !important;
}

/* B2.3 BOTTOM NAV. The first item (Dashboard) is pinned to the left edge and
   the strip fades at the right while there is more to scroll. */
body.pn-mobile-ua.pn-page-reset .pn-bottom-nav__item:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    box-shadow: 4px 0 8px -4px rgba(38, 60, 107, .18) !important;
}
body.pn-mobile-ua.pn-page-reset .pn-bottom-nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent) !important;
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent) !important;
}
body.pn-mobile-ua.pn-page-reset .pn-bottom-nav.pn-scroll-end {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* B2.4 ONE SCROLL CUE. Any strip that scrolls sideways fades at the right
   edge until it is scrolled to the end. Strip containers on 1522: nine
   class="tabs" (one of them also pn-members__tabs) and #pnProfileTabs.pn-tabs.
   Filter pill rows are Build 3. */
body.pn-mobile-ua.pn-page-reset .tabs,
body.pn-mobile-ua.pn-page-reset .pn-tabs,
body.pn-mobile-ua.pn-page-reset .pn-members__tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent) !important;
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent) !important;
}
body.pn-mobile-ua.pn-page-reset .tabs::-webkit-scrollbar,
body.pn-mobile-ua.pn-page-reset .pn-tabs::-webkit-scrollbar { display: none !important; }
body.pn-mobile-ua.pn-page-reset .tabs.pn-scroll-end,
body.pn-mobile-ua.pn-page-reset .pn-tabs.pn-scroll-end,
body.pn-mobile-ua.pn-page-reset .pn-members__tabs.pn-scroll-end {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* ==========================================================
   MOBILE-BUILD-3 (7 Sep 2026) — components and cleanup.
   ========================================================== */

/* B3.1 FILTERS. Search on its own line; pills on one line that scrolls and
   fades (the same cue as the tab strips, B2.4); each select on its own
   full-width line beneath. */
body.pn-mobile-ua.pn-page-reset .searchrow { flex-wrap: wrap !important; gap: 8px !important; }
body.pn-mobile-ua.pn-page-reset .searchrow .search { flex: 1 1 100% !important; min-width: 0 !important; }
body.pn-mobile-ua.pn-page-reset .searchrow .filts {
    display: flex !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent) !important;
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent) !important;
    padding-bottom: 2px !important;   /* so a focus ring is not clipped */
}
body.pn-mobile-ua.pn-page-reset .searchrow .filts::-webkit-scrollbar { display: none !important; }
body.pn-mobile-ua.pn-page-reset .searchrow .filts.pn-scroll-end { -webkit-mask-image: none !important; mask-image: none !important; }
body.pn-mobile-ua.pn-page-reset .searchrow .filts .filt { flex: 0 0 auto !important; white-space: nowrap !important; }
body.pn-mobile-ua.pn-page-reset .searchrow select { flex: 1 1 100% !important; }

/* B3.2 CARD MENU. The ... button is pinned top-right of the row; the rest of
   the right-hand block wraps under the text, left-aligned. The button sits in
   a .menuwrap on every module (measured on 1743); the bare case is covered
   too. The pop menu keeps opening under the button, inside the screen. */
body.pn-mobile-ua.pn-page-reset .row { position: relative !important; padding-right: 52px !important; }
body.pn-mobile-ua.pn-page-reset .row .rright { width: 100% !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 8px !important; margin: 8px 0 0 !important; }
body.pn-mobile-ua.pn-page-reset .row .rright > .dotsbtn,
body.pn-mobile-ua.pn-page-reset .row .rright > .menuwrap,
body.pn-mobile-ua.pn-page-reset .row .rright > .pn-action-menu {
    position: absolute !important; top: 4px !important; right: 4px !important; margin: 0 !important;
}
body.pn-mobile-ua.pn-page-reset .row .rright > .menuwrap .dotsbtn { position: static !important; }
body.pn-mobile-ua.pn-page-reset .row .rright > .menuwrap .pop { right: 0 !important; left: auto !important; }
/* The nine modules on .pn-action-menu (Notes, Operations, Compliance, Directory,
   Library, Ask for Help, Processes, QR codes): same pin, dropdown opens leftwards. */
body.pn-mobile-ua.pn-page-reset .row .rright > .pn-action-menu .pn-action-menu__dropdown { right: 0 !important; left: auto !important; }

/* B3.11 TYPE FLOOR. Nothing under 12px on a phone. The two smallest tokens
   lift; the hard-coded sizes measured on 1743 are lifted by component. */
body.pn-mobile-ua.pn-page-reset { --t6: 12px; --t5: 13px; }
body.pn-mobile-ua.pn-page-reset .pn-bottom-nav__item { font-size: 12px !important; }
body.pn-mobile-ua.pn-page-reset .tag,
body.pn-mobile-ua.pn-page-reset .type,
body.pn-mobile-ua.pn-page-reset .pill,
body.pn-mobile-ua.pn-page-reset .tab .tn,
body.pn-mobile-ua.pn-page-reset .filt__n,
body.pn-mobile-ua.pn-page-reset .pn-count,
body.pn-mobile-ua.pn-page-reset .hhead .hc,
body.pn-mobile-ua.pn-page-reset .pop .ghead,
body.pn-mobile-ua.pn-page-reset .pn-comp-expand,
body.pn-mobile-ua.pn-page-reset .pn-conn-state,
body.pn-mobile-ua.pn-page-reset .pn-directory-row__lead-role,
body.pn-mobile-ua.pn-page-reset .pn-directory-row__network,
body.pn-mobile-ua.pn-page-reset .pn-mob-statuscard__badge,
body.pn-mobile-ua.pn-page-reset .pn-mob-statuscard__preview,
body.pn-mobile-ua.pn-page-reset .pn-dash-greeting__secondary,
body.pn-mobile-ua.pn-page-reset .pn-optional,
body.pn-mobile-ua.pn-page-reset .pn-members__row-name span,
body.pn-mobile-ua.pn-page-reset .pn-qr-card p,
body.pn-mobile-ua.pn-page-reset .tile .dow,
body.pn-mobile-ua.pn-page-reset .tile .mo,
body.pn-mobile-ua.pn-page-reset .pn-prayer-card__visit-badge,
body.pn-mobile-ua.pn-page-reset .pn-pill,
body.pn-mobile-ua.pn-page-reset .pn-event-card__tag,
body.pn-mobile-ua.pn-page-reset .pn-event-card__commit-btn,
body.pn-mobile-ua.pn-page-reset .bs-listing-price-label,
body.pn-mobile-ua.pn-page-reset .bs-badge { font-size: 12px !important; }
/* Sizes written on the element (2,604 style attributes across the PHP): the
   attribute selector reaches every inline 9/10/11/11.5px on an app page. */
body.pn-mobile-ua.pn-page-reset .pn-wrap [style*="font-size:9px"],
body.pn-mobile-ua.pn-page-reset .pn-wrap [style*="font-size: 9px"],
body.pn-mobile-ua.pn-page-reset .pn-wrap [style*="font-size:10px"],
body.pn-mobile-ua.pn-page-reset .pn-wrap [style*="font-size: 10px"],
body.pn-mobile-ua.pn-page-reset .pn-wrap [style*="font-size:11px"],
body.pn-mobile-ua.pn-page-reset .pn-wrap [style*="font-size: 11px"],
body.pn-mobile-ua.pn-page-reset .pn-wrap [style*="font-size:11.5px"],
body.pn-mobile-ua.pn-page-reset .pn-wrap [style*="font-size: 11.5px"] { font-size: 12px !important; }

/* B3.12 MODALS. Every modal already stacks above the bottom nav (999999+ on
   1743); what ran under it was the CONTENT — 90vh centred in the whole
   screen. On the phone the content is centred in the space above the nav and
   capped so a tall modal scrolls inside itself. The roll-your-own overlays
   (Notes upgrade, Library scanner, onboarding, encouragement) stop at the nav. */
body.pn-mobile-ua.pn-page-reset .pn-modal__content {
    top: calc((100dvh - 87px) / 2) !important;
    max-height: calc(100dvh - 87px - 24px) !important;
    overflow-y: auto !important;
}
body.pn-mobile-ua.pn-page-reset #pnTeamsModal,
body.pn-mobile-ua.pn-page-reset #pnLibScanModal,
body.pn-mobile-ua.pn-page-reset .pn-onboard-overlay,
body.pn-mobile-ua.pn-page-reset .pn-enc-overlay {
    bottom: 87px !important; height: auto !important;
}
body.pn-mobile-ua.pn-page-reset #pnTeamsModal > div,
body.pn-mobile-ua.pn-page-reset #pnLibScanModal > div {
    max-height: calc(100dvh - 87px - 24px) !important; overflow-y: auto !important;
}
/* There is no bulk bar in the plugin: nothing prints class="bulkbar" and
   nothing sets body.selmode (grep, 7 Sep 2026). pn-shell.css's .bulkbar rule
   is dead; it is listed for the working list, not overridden here. */

/* B3.C CARRY-IN (Build 2 handover): the member profile showed two back links —
   the gold "← Members" pill under the hero AND the hero's own ‹ Members. One
   page, one link: the pill goes on the phone; desktop, which has no hero
   back link, keeps it. */
body.pn-mobile-ua.pn-page-reset .pn-member-profile__back { display: none !important; }