/* Profile surface polish 1102.  Keep these final, route-scoped rules after
   the legacy profile cascade so layout is owned by one predictable layer. */

/* The section navigator is a native dialog.  Anchor the open sheet to the
   viewport rather than the document flow so a long footer can never cover it. */
@media (max-width: 700px) {
  body.profile-page #profileSectionNavDialog[open] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 3000 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100vw !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }

  body.profile-page #profileSectionNavDialog[open] .profile-section-nav-sheet {
    width: 100% !important;
    max-width: 560px !important;
    max-height: calc(100dvh - var(--site-header-height, 70px) - 20px) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}

/* Give the profile gallery a deliberate ending instead of letting its last
   tile touch the next surface or the page footer. */
body.profile-page #profileContent > #profileGallery {
  margin-block-end: 24px !important;
}

/* Only the numeric value carries urgency color; the explanatory labels stay
   neutral and readable. */
body.profile-page #profileMaintenance .maintenance-summary > span > b {
  color: #315563 !important;
  font: 900 1.45rem/1 Rubik, Assistant, Arial, sans-serif !important;
}
body.profile-page #profileMaintenance .maintenance-summary > .is-overdue > b {
  color: #c34d42 !important;
}
body.profile-page #profileMaintenance .maintenance-summary > .is-today > b {
  color: #d9782b !important;
}
body.profile-page #profileMaintenance .maintenance-summary > .is-soon > b {
  color: #3e776a !important;
}

/* Let the coffee/Greek tile remain visible through every supporting profile
   section.  The identity card itself is intentionally structural, while the
   journey keeps its dark brand surface with a slightly stronger alpha. */
body.profile-page #profileContent > .profile-card:not(.profile-identity-card) {
  background: rgba(255, 253, 249, .62) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.05) !important;
  backdrop-filter: blur(16px) saturate(1.05) !important;
}
body.profile-page #profileContent > #profileCoffeeJourney {
  background: rgba(18, 42, 53, .72) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.06) !important;
  backdrop-filter: blur(14px) saturate(1.06) !important;
}

@media (max-width: 700px) {
  body.profile-page #profileContent > #profileGallery {
    margin-block-end: 20px !important;
  }

  body.profile-page #profileContent > .profile-card:not(.profile-identity-card) {
    background: rgba(255, 253, 249, .58) !important;
  }

  body.profile-page #profileContent > #profileCoffeeJourney {
    background: rgba(18, 42, 53, .68) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.profile-page #profileSectionNavDialog[open] .profile-section-nav-sheet {
    animation: none !important;
  }
}