/*
 * iPhone top-of-page clearance and standard Info modal navigation.
 * The older iOS-specific rule forcibly sets .app-container padding-top: 0.
 * These selectors intentionally exceed its specificity, so the reserved
 * space actually exists inside the active scrolling element on iPhone.
 */

/* Compact safe-area clearance for the actual iPhone scroll viewport.
 * Do not stack a large fixed margin above the tab's own heading padding:
 * leave a small gap below the Dynamic Island/status bar. The 35px minimum
 * handles browsers that report a zero safe-area inset. */
:root {
    --lbrank-visible-top-clearance: max(
        35px,
        calc(env(safe-area-inset-top, 0px) + 16px)
    );
}
body .app-container,
html.ios-webkit body .app-container,
html.ios-standalone-pwa body .app-container {
    padding-top: var(--lbrank-visible-top-clearance) !important;
    scroll-padding-top: var(--lbrank-visible-top-clearance) !important;
}

/* Keep only a small consistent breathing gap within each tab. */
#rank-tab .rank-container,
#graph-tab .graph-container,
#finance-tab .finance-container,
#badges-tab .badges-container,
#legend-tab .legend-container,
#info-tab .info-hub-container,
#settings-tab .settings-container {
    padding-top: 4px !important;
}

/* Stop overscroll rubber-banding above a header; the user can still scroll
 * every page normally, and the bottom navigation keeps its own clearance. */
body .app-container {
    overscroll-behavior-y: contain;
}

/* Standardize the same Back icon shape used by every other Info detail.
 * Dashboard and Home Compare both apply .life-dashboard-open; an old
 * gradient rule changed only those two pages to a filled/glowing square. */
#infoDetailModal.life-dashboard-open .info-detail-close {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(var(--theme-primary-rgb, 0,212,255), .22) !important;
    border-radius: 14px !important;
    background: rgba(var(--theme-background-rgb, 23,81,143), .10) !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--theme-primary,#00D4FF) !important;
    -webkit-text-fill-color: var(--theme-primary,#00D4FF) !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-shadow: none !important;
}
#infoDetailModal.life-dashboard-open .info-detail-close:active {
    background: rgba(var(--theme-primary-rgb,0,212,255),.11) !important;
}
#infoDetailModal.life-dashboard-open .info-detail-close:focus-visible {
    outline: 2px solid var(--theme-primary,#00D4FF) !important;
    outline-offset: 2px !important;
}

/* Modal pages are fixed to the viewport, not in the tab scroll container;
 * reserve their own top safe area above the shared Info toolbar. */
#infoDetailModal.show {
    padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 12px)) !important;
}

/* No visible Details action in Progress personal records. All six metrics
 * are now rendered directly, in the same open two-column presentation. */
#graph-tab .personal-records-section .personal-records-details-btn {
    display: none !important;
}
#graph-tab .personal-records-section .personal-records-heading {
    justify-content: flex-start !important;
}