/* =========================================================
   BALELE v3 Phase 5.6 Step 9E
   Desktop Visual Alignment Foundation

   Contract: BALELE Dual Layout UI Contract v2.0
   Scope:
   - Desktop layout/visual shell only.
   - Mobile App-like layouts remain untouched.
   - No balele-core, REST, database, upload, search, wall position,
     interaction, edit/delete/category/visibility logic changes.
   ========================================================= */
@media (min-width: 769px) {
  body.balele-ui-v56 {
    --ba-desktop-header-h: 72px;
    --ba-desktop-shell-bg: #fff8ef;
    --ba-desktop-ink: #201916;
    --ba-desktop-muted: rgba(32, 25, 22, .62);
    --ba-desktop-line: rgba(73, 50, 31, .10);
    --ba-desktop-card: rgba(255, 255, 255, .82);
    --ba-desktop-shadow: 0 18px 54px rgba(68, 45, 24, .10);
  }

  /* Desktop header: website-style navigation, not mobile app nav. */
  body.balele-ui-v56 .balele-site-header {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    z-index: var(--ba-z-header) !important;
    height: var(--ba-desktop-header-h) !important;
    min-height: var(--ba-desktop-header-h) !important;
    padding: 0 clamp(24px, 3.2vw, 56px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: var(--ba-desktop-ink) !important;
    background: linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,250,244,.90)) !important;
    border-bottom: 1px solid var(--ba-desktop-line) !important;
    box-shadow: 0 10px 30px rgba(61, 41, 24, .06) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
  }

  body.balele-ui-v56 .balele-site-header > .balele-brand {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: var(--ba-desktop-ink) !important;
    text-decoration: none !important;
  }

  body.balele-ui-v56 .balele-brand-mark {
    width: 36px !important;
    height: 36px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #ffd75b, #f4a900) !important;
    color: #1a1512 !important;
    font-weight: 950 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 10px 22px rgba(117, 80, 20, .14) !important;
  }

  body.balele-ui-v56 .balele-brand-text {
    color: var(--ba-desktop-ink) !important;
    font-size: 18px !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
  }

  body.balele-ui-v56 .balele-brand-subtitle {
    color: var(--ba-desktop-muted) !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
    line-height: 1.05 !important;
  }

  body.balele-ui-v56 .balele-desktop-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  body.balele-ui-v56 .balele-desktop-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    color: rgba(32, 25, 22, .74) !important;
    text-decoration: none !important;
    opacity: 1 !important;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
  }

  body.balele-ui-v56 .balele-desktop-nav a:hover,
  body.balele-ui-v56 .balele-desktop-nav a:focus-visible,
  body.balele-ui-v56 .balele-desktop-nav a.is-active {
    color: var(--ba-desktop-ink) !important;
    background: rgba(43, 33, 24, .075) !important;
  }

  body.balele-ui-v56 .balele-desktop-nav a[href*="/submit-pin"] {
    color: #fff !important;
    background: #2b2118 !important;
    box-shadow: 0 12px 24px rgba(43, 33, 24, .13) !important;
  }

  body.balele-ui-v56 .balele-desktop-nav a[href*="/submit-pin"]:hover,
  body.balele-ui-v56 .balele-desktop-nav a[href*="/submit-pin"]:focus-visible,
  body.balele-ui-v56 .balele-desktop-nav a[href*="/submit-pin"].is-active {
    color: #fff !important;
    background: #1f1712 !important;
    transform: translateY(-1px) !important;
  }

  /* Desktop Home keeps the immersive wall, but uses BALELE warm/light brand shell. */
  body.balele-ui-v56.balele-page-home {
    background: linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%) !important;
    color: var(--ba-desktop-ink) !important;
  }

  body.balele-ui-v56.balele-page-home .balele-home-page {
    height: calc(100vh - var(--ba-desktop-header-h)) !important;
    min-height: 620px !important;
    padding-top: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%) !important;
  }

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

  body.balele-ui-v56.balele-page-home .balele-home-intro {
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(73, 50, 31, .10) !important;
    color: var(--ba-desktop-ink) !important;
    box-shadow: var(--ba-desktop-shadow) !important;
  }

  body.balele-ui-v56.balele-page-home .balele-home-intro h1 {
    color: var(--ba-desktop-ink) !important;
  }

  body.balele-ui-v56.balele-page-home .balele-home-intro p:last-child {
    color: var(--ba-desktop-muted) !important;
  }

  body.balele-ui-v56.balele-page-home .balele-toolball {
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(73, 50, 31, .10) !important;
    box-shadow: var(--ba-desktop-shadow) !important;
  }

  body.balele-ui-v56.balele-page-home .balele-toolball button {
    background: rgba(43, 33, 24, .07) !important;
    color: rgba(43, 33, 24, .72) !important;
  }

  body.balele-ui-v56.balele-page-home .balele-toolball button:hover {
    background: #2b2118 !important;
    color: #fff !important;
  }

  body.balele-ui-v56.balele-page-home .balele-toolball input {
    color: #2b2118 !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(73, 50, 31, .08) !important;
  }

  body.balele-ui-v56.balele-page-home .balele-pin {
    background: rgba(255,255,255,.74) !important;
    border-color: rgba(255,255,255,.9) !important;
    box-shadow: 0 18px 38px rgba(34, 40, 50, .16) !important;
  }

  body.balele-ui-v56.balele-page-home .balele-pin:hover {
    box-shadow: 0 24px 54px rgba(79, 65, 175, .14) !important;
  }

  /* Content pages share a calmer desktop canvas without becoming mobile layout. */
  body.balele-ui-v56.balele-page-account .balele-account-page,
  body.balele-ui-v56.balele-page-my-pins .balele-my-pins-page,
  body.balele-ui-v56.balele-page-submit-pin .balele-submit-pin-page,
  body.balele-ui-v56.balele-page-my-wall .balele-my-wall-page,
  body.balele-ui-v56.balele-page-member-wall .balele-member-wall-page,
  body.balele-ui-v56.balele-page-taxonomy .balele-taxonomy-page {
    padding-top: 34px !important;
  }

  body.balele-ui-v56.balele-page-submit-pin .balele-submit-pin-page {
    padding-top: 56px !important;
  }

  body.balele-ui-v56 .balele-account-hero,
  body.balele-ui-v56 .balele-account-stat-card,
  body.balele-ui-v56 .balele-account-panel,
  body.balele-ui-v56 .balele-my-pins-toolbar,
  body.balele-ui-v56 .balele-my-pins-card,
  body.balele-ui-v56 .balele-submit-card {
    border-color: rgba(73, 50, 31, .10) !important;
    box-shadow: var(--ba-desktop-shadow) !important;
  }

  /* Modal safety remains desktop centered. */
  body.balele-ui-v56 .balele-pin-modal {
    z-index: var(--ba-z-modal) !important;
  }

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