/* BALELE v3 Phase 5.6 Step 1: page isolation guardrails.
   This file is intentionally small. It prevents architecture drift while later page redesigns happen. */
body.balele-ui-v56.balele-page-home .balele-site-header { position: sticky; }
body.balele-ui-v56.balele-page-my-wall .balele-my-wall-page,
body.balele-ui-v56.balele-page-member-wall .balele-member-wall-page { isolation: isolate; }
@media (max-width: 768px) {
  body.balele-ui-v56 .balele-toolball,
  body.balele-ui-v56 .balele-home-toolball { display: none !important; }
  body.balele-ui-v56 .balele-pin-modal,
  body.balele-ui-v56 [data-balele-pin-modal] { z-index: var(--ba-z-modal); }
}

/* Phase 5.6 Step 2: Mobile Home Wall + Modal Refactor
   Scope: mobile only. Do not force desktop visual style onto mobile. */
@media (max-width: 768px) {
  body.balele-page-home {
    overflow: hidden !important;
    background: #f5f7fb !important;
  }

  body.balele-page-home .balele-home-page {
    height: calc(100dvh - var(--ba-header-h-mobile)) !important;
    padding-top: 0 !important;
    overflow: hidden !important;
  }

  body.balele-page-home .balele-wall-section {
    height: 100% !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 30% 18%, rgba(255,255,255,.86), transparent 34%),
      linear-gradient(180deg, #eef3f8 0%, #f8fafc 100%) !important;
  }

  body.balele-page-home .balele-home-intro,
  body.balele-page-home .balele-toolball {
    display: none !important;
  }

  body.balele-page-home .balele-wall-viewport {
    inset: 0 !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  body.balele-page-home .balele-wall-viewport.is-pinching,
  body.balele-page-home .balele-wall-viewport.is-dragging {
    cursor: grabbing !important;
  }

  body.balele-page-home .balele-wall-canvas {
    transform-origin: 0 0 !important;
    will-change: transform !important;
  }

  body.balele-page-home .balele-pin {
    width: 104px !important;
    height: 104px !important;
    padding: 8px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.78) !important;
    border-color: rgba(255,255,255,.9) !important;
    box-shadow: 0 18px 34px rgba(34, 40, 50, .18) !important;
  }

  body.balele-page-home .balele-pin img {
    filter: drop-shadow(0 7px 10px rgba(0,0,0,.16)) !important;
  }

  body.balele-modal-open {
    overflow: hidden !important;
  }

  body.balele-page-home .balele-pin-modal {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    padding: 0 !important;
    z-index: 10000 !important;
  }

  body.balele-page-home .balele-pin-modal[hidden] {
    display: none !important;
  }

  body.balele-page-home .balele-pin-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(8, 8, 12, .52) !important;
    backdrop-filter: blur(10px) !important;
  }

  body.balele-page-home .balele-pin-modal-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: min(86dvh, 760px) !important;
    max-height: min(86dvh, 760px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 14px !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 34px 18px calc(24px + env(safe-area-inset-bottom)) !important;
    border-radius: 30px 30px 0 0 !important;
    background: rgba(255,255,255,.96) !important;
    color: #15151f !important;
    box-shadow: 0 -18px 50px rgba(15,18,28,.28) !important;
  }

  body.balele-page-home .balele-pin-modal-panel::before {
    content: '' !important;
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    width: 44px !important;
    height: 5px !important;
    border-radius: 99px !important;
    transform: translateX(-50%) !important;
    background: rgba(20,20,30,.22) !important;
  }

  body.balele-page-home .balele-pin-modal-close {
    position: fixed !important;
    top: auto !important;
    right: 16px !important;
    bottom: calc(min(86dvh, 760px) - 52px) !important;
    z-index: 10002 !important;
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.94) !important;
    color: #111 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  body.balele-page-home .balele-pin-modal-media {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 12px !important;
    border-radius: 24px !important;
    background: #f4f5fb !important;
    overflow: visible !important;
  }

  body.balele-page-home .balele-modal-main-image-wrap {
    min-height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #fff !important;
  }

  body.balele-page-home #balele-modal-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  body.balele-page-home .balele-modal-gallery {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
    max-height: 72px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
  }

  body.balele-page-home .balele-modal-gallery-thumb {
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 14px !important;
  }

  body.balele-page-home .balele-pin-modal-content {
    display: block !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.balele-page-home .balele-modal-scroll-main {
    overflow: visible !important;
    padding: 0 !important;
  }

  body.balele-page-home .balele-pin-modal-content h2 {
    margin: 2px 46px 12px 0 !important;
    font-size: 26px !important;
    line-height: 1.08 !important;
    color: #111827 !important;
  }

  body.balele-page-home .balele-modal-final .balele-modal-section {
    margin: 12px 0 !important;
    padding: 14px !important;
    border-radius: 20px !important;
    background: #f7f7fb !important;
  }

  body.balele-page-home .balele-tax-row {
    grid-template-columns: 82px minmax(0,1fr) !important;
    font-size: 14px !important;
  }

  body.balele-page-home .balele-modal-owner-section .balele-modal-owner-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.balele-page-home .balele-modal-owner-actions,
  body.balele-page-home .balele-modal-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  body.balele-page-home .balele-modal-actions button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }

  body.balele-page-home .balele-modal-comments {
    margin-top: 12px !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  body.balele-page-home .balele-modal-comments-list {
    max-height: 128px !important;
  }
}

/* =========================================================
   BALELE v3 Phase 5.6 Step 6
   Mobile Header Offset + Shared Modal Boundary Fix
   Scope: UI architecture layer only. No REST/CPT/database changes.
   Goal: stop mobile header from covering content pages and make Pin Modal
   use the same bottom-sheet boundary on Home / My Wall / Public Wall.
   ========================================================= */
@media (max-width: 768px) {
  /* Content pages use a normal-flow mobile header, not a floating overlay.
     This prevents My Wall / My Pins / My Account content from sliding under it. */
  body.balele-ui-v56:not(.balele-page-home) .balele-site-header {
    position: relative !important;
    top: auto !important;
    min-height: var(--ba-header-h-mobile) !important;
    z-index: var(--ba-z-header) !important;
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid rgba(35,20,15,.06) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
    backdrop-filter: blur(18px) saturate(1.1) !important;
  }

  body.balele-ui-v56:not(.balele-page-home) .balele-mobile-header {
    min-height: var(--ba-header-h-mobile) !important;
  }

  /* Mobile page top spacing, scoped per page type. */
  body.balele-ui-v56.balele-page-account .balele-account-page {
    padding-top: 18px !important;
    padding-bottom: calc(var(--ba-tabbar-h-mobile) + env(safe-area-inset-bottom) + 34px) !important;
  }

  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-page {
    padding-top: 18px !important;
    padding-bottom: calc(var(--ba-tabbar-h-mobile) + env(safe-area-inset-bottom) + 34px) !important;
  }

  body.balele-ui-v56.balele-page-submit-pin .balele-submit-pin-page {
    padding-top: 28px !important;
    padding-bottom: calc(var(--ba-tabbar-h-mobile) + env(safe-area-inset-bottom) + 34px) !important;
  }

  body.balele-ui-v56.balele-page-my-wall .balele-my-wall-header,
  body.balele-ui-v56.balele-page-member-wall .balele-member-wall-hero {
    padding-top: 18px !important;
    margin-top: 0 !important;
  }

  body.balele-ui-v56.balele-page-my-wall .balele-my-wall-title h1,
  body.balele-ui-v56.balele-page-member-wall .balele-member-wall-title h1,
  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-hero h1,
  body.balele-ui-v56.balele-page-account .balele-account-hero h1 {
    overflow: visible !important;
  }

  /* When a pin modal is open, wall controls/tabs must stay behind it. */
  body.balele-ui-v56.balele-modal-open .ba-my-wall-categories,
  body.balele-ui-v56.balele-modal-open .ba-my-wall-category-tabs,
  body.balele-ui-v56.balele-modal-open .balele-my-wall-actions,
  body.balele-ui-v56.balele-modal-open .balele-my-wall-tabs,
  body.balele-ui-v56.balele-modal-open .balele-member-wall-tabs,
  body.balele-ui-v56.balele-modal-open .balele-member-wall-actions,
  body.balele-ui-v56.balele-modal-open .balele-site-header {
    pointer-events: none !important;
  }

  body.balele-ui-v56.balele-modal-open .ba-my-wall-categories,
  body.balele-ui-v56.balele-modal-open .ba-my-wall-category-tabs,
  body.balele-ui-v56.balele-modal-open .balele-member-wall-tabs {
    visibility: hidden !important;
  }

  /* Shared mobile Pin Modal: bottom-sheet for Home, My Wall and Public Wall.
     This intentionally overrides old full-screen / centered modal rules on mobile only. */
  body.balele-ui-v56 .balele-pin-modal {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
  }

  body.balele-ui-v56 .balele-pin-modal[hidden] {
    display: none !important;
  }

  body.balele-ui-v56 .balele-pin-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    background: rgba(8, 8, 12, .52) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
  }

  body.balele-ui-v56 .balele-pin-modal-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: none !important;
    height: min(86dvh, 760px) !important;
    max-height: min(86dvh, 760px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 14px !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 34px 18px calc(24px + env(safe-area-inset-bottom)) !important;
    border-radius: 30px 30px 0 0 !important;
    background: rgba(255,255,255,.97) !important;
    color: #15151f !important;
    box-shadow: 0 -18px 50px rgba(15,18,28,.28) !important;
  }

  body.balele-ui-v56 .balele-pin-modal-panel::before {
    content: '' !important;
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    width: 44px !important;
    height: 5px !important;
    border-radius: 99px !important;
    transform: translateX(-50%) !important;
    background: rgba(20,20,30,.22) !important;
  }

  body.balele-ui-v56 .balele-pin-modal-close {
    position: fixed !important;
    top: auto !important;
    right: 16px !important;
    bottom: calc(min(86dvh, 760px) - 52px) !important;
    z-index: 10002 !important;
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.94) !important;
    color: #111 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  body.balele-ui-v56 .balele-pin-modal-media {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 12px !important;
    border-radius: 24px !important;
    background: #f4f5fb !important;
    overflow: visible !important;
  }

  body.balele-ui-v56 .balele-modal-main-image-wrap {
    min-height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #fff !important;
  }

  body.balele-ui-v56 #balele-modal-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  body.balele-ui-v56 .balele-modal-gallery {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
    max-height: 72px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
  }

  body.balele-ui-v56 .balele-modal-gallery-thumb {
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 14px !important;
  }

  body.balele-ui-v56 .balele-pin-modal-content {
    display: block !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.balele-ui-v56 .balele-modal-scroll-main {
    overflow: visible !important;
    padding: 0 !important;
  }

  body.balele-ui-v56 .balele-pin-modal-content h2 {
    margin: 2px 46px 12px 0 !important;
    font-size: 26px !important;
    line-height: 1.08 !important;
    color: #111827 !important;
  }

  body.balele-ui-v56 .balele-modal-final .balele-modal-section {
    margin: 12px 0 !important;
    padding: 14px !important;
    border-radius: 20px !important;
    background: #f7f7fb !important;
  }

  body.balele-ui-v56 .balele-tax-row {
    grid-template-columns: 82px minmax(0,1fr) !important;
    font-size: 14px !important;
  }

  body.balele-ui-v56 .balele-modal-owner-section .balele-modal-owner-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.balele-ui-v56 .balele-modal-owner-actions,
  body.balele-ui-v56 .balele-modal-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  body.balele-ui-v56 .balele-modal-actions button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }

  body.balele-ui-v56 .balele-modal-comments {
    margin-top: 12px !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  body.balele-ui-v56 .balele-modal-comments-list {
    max-height: 128px !important;
  }
}

/* =========================================================
   BALELE v3 Phase 5.6 Step 9A-1
   Desktop Account Header + Primary Button Safety Fix

   Contract: BALELE Dual Layout UI Contract v2.0
   Scope:
   - Desktop UI boundary only.
   - Keeps mobile My Account redesign intact.
   - Does not touch balele-core, REST, database, Pin Wall, search,
     submit, edit, delete, category, or visibility logic.
   ========================================================= */
@media (min-width: 769px) {
  /* The legacy Home wall stylesheet still defines .balele-site-header as fixed.
     On content pages that makes the desktop header cover the first row of content.
     Content pages should use the desktop header in normal document flow. */
  body.balele-ui-v56:not(.balele-page-home) .balele-site-header {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    height: var(--ba-header-h-desktop) !important;
    min-height: var(--ba-header-h-desktop) !important;
  }

  /* Guardrail: primary account CTA must always keep readable white text
     even when older global link color rules are loaded later. */
  body.balele-ui-v56.balele-page-account .balele-account-button--primary,
  body.balele-ui-v56.balele-page-account .balele-account-button--primary:visited,
  body.balele-ui-v56.balele-page-account .balele-account-button--primary:hover,
  body.balele-ui-v56.balele-page-account .balele-account-button--primary:focus {
    background: #2b2118 !important;
    color: #ffffff !important;
  }
}

/* =========================================================
   BALELE v3 Phase 5.6 Step 9B-1
   Cross-device Modal Layer Boundary Fix

   Scope:
   - Theme UI layer only.
   - Fixes My Pin Wall category tabs floating over desktop modal.
   - Raises modal layer above all wall controls and restores reliable
     close-button click target.
   - No balele-core / REST / database / query changes.
   ========================================================= */
body.balele-ui-v56.balele-modal-open .ba-my-wall-categories,
body.balele-ui-v56.balele-modal-open .ba-my-wall-category-tabs,
body.balele-ui-v56.balele-modal-open .balele-my-wall-tabs,
body.balele-ui-v56.balele-modal-open .balele-my-wall-actions,
body.balele-ui-v56.balele-modal-open .balele-member-wall-tabs,
body.balele-ui-v56.balele-modal-open .balele-member-wall-actions {
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body.balele-ui-v56.balele-modal-open #balele-pin-modal,
body.balele-ui-v56.balele-modal-open .balele-pin-modal {
  z-index: 20000 !important;
  pointer-events: auto !important;
}

body.balele-ui-v56.balele-modal-open .balele-pin-modal-backdrop {
  pointer-events: auto !important;
}

body.balele-ui-v56.balele-modal-open .balele-pin-modal-panel {
  pointer-events: auto !important;
  z-index: 1 !important;
}

body.balele-ui-v56.balele-modal-open .balele-pin-modal-close {
  pointer-events: auto !important;
  z-index: 3 !important;
  cursor: pointer !important;
}

@media (min-width: 769px) {
  body.balele-ui-v56.balele-page-my-wall .balele-pin-modal,
  body.balele-ui-v56.balele-page-member-wall .balele-pin-modal,
  body.balele-ui-v56.balele-page-home .balele-pin-modal {
    z-index: 20000 !important;
  }

  body.balele-ui-v56.balele-page-my-wall .balele-pin-modal-close,
  body.balele-ui-v56.balele-page-member-wall .balele-pin-modal-close,
  body.balele-ui-v56.balele-page-home .balele-pin-modal-close {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
    border: 0 !important;
  }
}


/* =========================================================
   BALELE v3 Phase 6 Step 2A-1
   Modal Stack Hardening after Points Decorator integration
   ========================================================= */
body.balele-ui-v56.balele-modal-open .balele-pin-modal-backdrop {
  z-index: 0 !important;
}
body.balele-ui-v56.balele-modal-open .balele-pin-modal-panel {
  z-index: 2 !important;
  filter: none !important;
  -webkit-filter: none !important;
}
body.balele-ui-v56.balele-modal-open .balele-pin-modal-close {
  z-index: 4 !important;
  pointer-events: auto !important;
}

/* =========================================================
   BALELE v3 Phase 6 Step 2A-2
   Final modal stack safety for Home / My Wall / Public Wall.
   This prevents the backdrop from sitting above the dialog panel,
   which made the modal look greyed-out and unclickable.
   ========================================================= */
body.balele-ui-v56.balele-modal-open #balele-pin-modal,
body.balele-ui-v56.balele-modal-open .balele-pin-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: grid !important;
  place-items: center !important;
  isolation: isolate !important;
  pointer-events: auto !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}
body.balele-ui-v56 #balele-pin-modal[hidden],
body.balele-ui-v56 .balele-pin-modal[hidden] {
  display: none !important;
}
body.balele-ui-v56.balele-modal-open .balele-pin-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  filter: none !important;
  -webkit-filter: none !important;
}
body.balele-ui-v56.balele-modal-open .balele-pin-modal-panel {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  transform: translateZ(0) !important;
}
body.balele-ui-v56.balele-modal-open .balele-pin-modal-panel *,
body.balele-ui-v56.balele-modal-open .balele-pin-modal-close {
  filter: none !important;
  -webkit-filter: none !important;
}
body.balele-ui-v56.balele-modal-open .balele-pin-modal-close {
  z-index: 12 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}