/* css/8-iphone.css
 * ══════════════════════════════════════════════════════════════════════════════
 * iPhone Safari Portrait — MVP Layout Tweaks
 * ══════════════════════════════════════════════════════════════════════════════
 *
 * SCOPE: Only fires on devices that match ALL THREE criteria:
 *   1. max-width: 430px   (iPhone 15 Pro Max is 430px; SE is 375px)
 *   2. hover: none         (no mouse)
 *   3. pointer: coarse     (finger, not stylus)
 *
 * These rules MUST NOT affect desktop or iPad layouts.
 * The file loads LAST so it can override prior breakpoints cleanly.
 *
 * Sections:
 *   A) Header — prevent crowding; ellipsis on long names
 *   B) Nav action bar ("tabs") — horizontal scroll, no wrap
 *   C) Canvas header — compact for narrow viewport
 *   D) Sidebar — bottom-sheet overlay, not inline
 *   E) Modals — max-height + internal scroll
 */

/* ── Global baseline: back button hidden everywhere except iPhone ──────────── */
.iphone-back-btn {
    display: none;
}

/* iPhone-only UI hooks should never appear on desktop/tablet */
.iphone-header-action-btn,
.iphone-header-cancel-btn,
.iphone-events-sheet-header,
.page-content-title {
    display: none;
}

/* iPhone theme lens picker should never appear on desktop/tablet */
.iphone-theme-lens-backdrop,
.iphone-theme-lens-sheet {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MASTER MEDIA QUERY — iPhone Portrait Only
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 430px) and (hover: none) and (pointer: coarse) {

    /* iOS-style bottom tab bar height (excluding safe area inset) */
    :root {
        /* Mobile-only global header removal */
        --app-header-height: 0px;
        /* Native iOS tab bar is ~49px tall (excluding safe-area). */
        --iphone-bottom-tabbar-height: 49px;
        --iphone-brandbar-height: 0px;
        /* Tuned constant: approximate height of the remaining canvas header row */
        --iphone-canvas-header-height: 72px;
        /* Compact utility rows inside the canvas (top + bottom) */
        --iphone-canvas-util-row-height: 32px;

        /* Canvas top utility header (iPhone-only) */
        --yrh-topbar-height: 44px;

        /* ── Bottom nav sizing tokens ───────────────── */
        /* Slightly larger bottom-nav icons for clarity */
        --bnav-icon-size: 31.6px;
        --bnav-icon-circle: 34.5px;
        --bnav-avatar-circle: 29.9px;
        --bnav-glyph-fill-size: calc(var(--bnav-icon-size) + 10px);
        --bnav-pill-h: 42px;
        --bnav-pill-w: 54px;
        --bnav-pill-max-w: 60px;
        --bnav-hit-area: 44px;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       A0b) CANVAS TOP UTILITY HEADER — fixed, safe-area aware (iPhone only)
       ─────────────────────────────────────────────────────────────────────────
       Toggle lives here: css/8-iphone.css (this file). Enabled only on iPhone
       viewport AND only when body.view-canvas is active.
    */

    body.view-canvas .yrh-topbar {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding-top: env(safe-area-inset-top, 0px);
        height: calc(env(safe-area-inset-top, 0px) + var(--yrh-topbar-height));
        box-sizing: border-box;
        background: var(--color-surface-1);
        z-index: var(--z-header);
    }

    body.view-canvas .yrh-topbar__row {
        position: relative;
        height: var(--yrh-topbar-height);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        box-sizing: border-box;
        border-bottom: 1px solid var(--color-border-lightest);
    }

    body.view-canvas .yrh-topbar__add {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 0;
        border: none;
        background: transparent;
        color: var(--color-text-tertiary);
        font-size: 26px;
        font-weight: 500;
        opacity: 0.78;
        margin-left: 6px;
        line-height: 1;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        top: -1px;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
    }

    body.view-canvas .yrh-topbar__add:active {
        transform: scale(0.98);
    }

    body.view-canvas .yrh-topbar__center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
        color: var(--color-text-secondary);
        opacity: 0.62;
        pointer-events: none;
        white-space: nowrap;
    }

    body.view-canvas .yrh-topbar__spacer {
        width: 44px;
        height: 44px;
    }

    /* Ensure Canvas content starts below the fixed topbar */
    body.view-canvas #canvas-page-container .main-content {
        padding-top: calc(env(safe-area-inset-top, 0px) + var(--yrh-topbar-height));
        box-sizing: border-box;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       A0) VIEWPORT SHELL — avoid iOS Safari 100vh phantom space
       ─────────────────────────────────────────────────────────────────────────
       Use 100dvh so the app fills the *visible* viewport when Safari's
       dynamic toolbars show/hide. Then let the header take natural height
       and make the main container flex to fill the rest.
       This removes the large gray bottom bar and prevents header clipping. */

    html,
    body {
        height: 100%;
    }

    body {
        /* Fallback chain: JS --vh (best on older iOS) → 100dvh (modern iOS) → 100vh */
        min-height: 100vh;
        min-height: calc(var(--vh, 1vh) * 100);
        min-height: 100dvh;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    /* When showing full-screen page-sheets (like Account), the document behind
       must never scroll/rubber-band. The page-sheet provides its own scroller. */
    body.view-account {
        overflow: hidden;
        overscroll-behavior: none;
    }

    .header {
        flex: 0 0 auto;
    }

    /* Canvas + Home containers should fill remaining viewport height */
    #home-page-container,
    #canvas-page-container {
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       A) HEADER — prevent long names from crowding icons off-screen
       ───────────────────────────────────────────────────────────────────────── */

    /* Tighten header padding for narrow viewport */
    .header {
        padding-left: var(--spacing-sm, 8px);
        padding-right: var(--spacing-sm, 8px);
        gap: 8px;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       A2) MOBILE-ONLY GLOBAL HEADER REMOVAL
       ─────────────────────────────────────────────────────────────────────────
       Objective: On iPhone, remove the global "You R Here" header entirely.
       - No visible brand banner
       - No reserved layout height
       - No safe-area padding coming from the header
       IMPORTANT: #app-buttons lives inside .header in index.html.
       We keep .header in the DOM (do NOT display:none) so fixed-positioned
       children like the bottom tab bar can continue to render.
    */

    .header {
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        gap: 0 !important;
        overflow: visible !important;
    }

    /* Hide the header's left cluster (logo + primary nav) completely on iPhone */
    .header-left-cluster {
        display: none !important;
    }

    #friend-view-main-header,
    #friend-view-main-header {
        display: none !important;
    }

    .header-buttons {
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Constrain the left cluster so it doesn't push buttons off-screen */
    .header-left-cluster {
        flex-shrink: 0;
    }

    /* Header buttons container: allow shrinking, clip if needed */
    .header-buttons {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
    }

    /* Canvas-only mode: hide the Home nav link on iPhone portrait.
       This gives more room in the header and avoids a view the user
       cannot meaningfully use on a 430px screen. */
    #nav-home {
        display: none !important;
    }

    /* Home / Canvas nav links: compact */
    .header-primary-nav {
        gap: 4px;
    }

    .header-nav-link {
        padding: 8px 2px;
        font-size: 0.85em;
    }

    /* Friend view name: single-line ellipsis, max 45% of header width */
    #friend-view-main-header {
        max-width: 45%;
        overflow: hidden;
    }

    #header-friend-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        font-size: 1em;
    }


    /* ─────────────────────────────────────────────────────────────────────────
       B) NAV ACTION BAR ("tabs") — horizontal scroll, no second line
       ─────────────────────────────────────────────────────────────────────────
       The .nav-action-bar holds library/account.
       On iPhone these can overflow. Make the row scrollable.            */

    .nav-action-bar {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
        flex-wrap: nowrap !important;
        scrollbar-width: none;               /* Firefox: hide scrollbar */
        scroll-snap-type: x proximity;       /* gentle snap */
        gap: 2px;
        /* Subtle edge fade to hint at scrollable content */
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6px, black calc(100% - 18px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 6px, black calc(100% - 18px), transparent 100%);
    }

    /* Hide scrollbar on WebKit (Safari) */
    .nav-action-bar::-webkit-scrollbar {
        display: none;
    }

    /* Each nav item: compact, comfortable tap target (≥44px tall) */
    .nav-action-item,
    #account-btn-wrapper,
    #signin-btn-wrapper {
        flex-shrink: 0;
        min-height: 44px;
        width: 50px;          /* narrower than desktop 60px */
        padding: 4px 2px;
        scroll-snap-align: start;
    }

    /* Smaller icon labels under nav items */
    .nav-action-item > span,
    #account-btn-text,
    #library-btn-text,
    #activity-btn-text {
        font-size: 0.65em;
    }

    /* Scale icon circles for bottom nav — derived from glyph size */
    #app-buttons .nav-action-item .account-icon-circle,
    #app-buttons #account-btn-wrapper .account-icon-circle {
        width: calc(var(--bnav-icon-size) + 12px) !important;
        height: calc(var(--bnav-icon-size) + 12px) !important;
        min-width: calc(var(--bnav-icon-size) + 12px) !important;
        min-height: calc(var(--bnav-icon-size) + 12px) !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* You/avatar circle: slightly smaller so the photo doesn't
       visually dominate the line-art home + account icons. */
    #app-buttons #you-icon-circle {
        width: calc(var(--bnav-icon-size) + 6px) !important;
        height: calc(var(--bnav-icon-size) + 6px) !important;
        min-width: calc(var(--bnav-icon-size) + 6px) !important;
        min-height: calc(var(--bnav-icon-size) + 6px) !important;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       B2) GLOBAL NAV → iOS BOTTOM TAB BAR (iPhone only)
       ─────────────────────────────────────────────────────────────────────────
       Reflows the existing #app-buttons row into a fixed bottom tab bar.
       No DOM changes; IDs/onclick handlers remain intact.
    */

    #app-buttons.nav-action-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-sidebar-popover);
        height: calc(var(--iphone-bottom-tabbar-height) + env(safe-area-inset-bottom, 0px));
        padding: 2px 10px calc(2px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        /* Solid white background — must never change per-route */
        background: #ffffff !important;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
        justify-content: space-around;
        align-items: center;
        gap: 0;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
        -webkit-tap-highlight-color: transparent;
        transform: translate3d(0, 0, 0);
    }

    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        #app-buttons.nav-action-bar {
            background: #ffffff !important;
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }
    }

    /* No dark-mode override — this app is light-mode only.
       System dark mode must NOT change the bottom nav background. */

    /* Bottom tab items: evenly distributed, tap-friendly */
    #app-buttons .nav-action-item,
    #app-buttons #account-btn-wrapper {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        min-height: 44px;
        padding: 4px 0;
        justify-content: center;
        overflow: visible;
        background: transparent;
        z-index: 1;
    }

    /* iOS Safari can “stick” :hover after tap; ensure no per-tab dark blocks */
    #app-buttons .nav-action-item,
    #app-buttons #account-btn-wrapper,
    #app-buttons .nav-action-item:hover,
    #app-buttons #account-btn-wrapper:hover,
    #app-buttons .nav-action-item:active,
    #app-buttons #account-btn-wrapper:active,
    #app-buttons .nav-action-item.is-active,
    #app-buttons #account-btn-wrapper.is-active {
        background: transparent !important;
        background-color: transparent !important;
    }

    /* Shared, persistent pill active indicator (slides to active tab) */
    #app-buttons .iphone-bottomnav-pill {
        position: absolute;
        left: 0;
        top: calc(var(--iphone-bottom-tabbar-height) / 2);
        height: var(--bnav-pill-h, 42px) !important;
        width: var(--bnav-pill-w, 54px);
        max-width: var(--bnav-pill-max-w, 60px) !important;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(0, 0, 0, 0.04);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transform: translate3d(0px, -50%, 0);
        pointer-events: none;
        z-index: 0;
        will-change: transform;
    }

    #app-buttons.bottomnav-pill-animate .iphone-bottomnav-pill {
        transition: transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
    }

    /* ── Wrapper-safe vertical centering correction ──────────────────────
       The iOS Capacitor wrapper (AppDelegate.swift) injects padding on
       #app-buttons.nav-action-bar with !important via WKUserScript.
       A higher-specificity selector is needed to override it so icons
       sit comfortably below the top border of the tab bar instead of
       hugging it.  The extra 10 px of bar height + 16 px of top padding
       push the icon centroids ~57 % down the visible bar — noticeably
       lower than dead-centre yet still well above the safe-area fill. */
    html body #app-buttons.nav-action-bar {
        height: calc(var(--iphone-bottom-tabbar-height) + 10px + env(safe-area-inset-bottom, 0px)) !important;
        padding-top: 16px !important;
    }

    html body #app-buttons .iphone-bottomnav-pill {
        top: calc(var(--iphone-bottom-tabbar-height) / 2 + 10px) !important;
    }

    /* Home + Account icons are inline SVGs (stroke: currentColor).
       Disable legacy mask-image pseudo-elements in the bottom tab bar. */
    #app-buttons #home-icon-circle::before,
    #app-buttons #home-icon-circle::after,
    #app-buttons #header-account-icon::before {
        content: none !important;
        display: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    /* Icon circle containers: flexbox centering (more reliable than
       position:absolute in WKWebView's compositor). */
    #app-buttons #home-icon-circle,
    #app-buttons #header-account-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: visible !important;
        background: none !important;
        background-image: none !important;
        color: #666;
    }

    /* iOS: SVG icons use flexbox centering (no absolute positioning).
       Colors are hardcoded hex values — never rely on currentColor or
       CSS custom properties inside WKWebView inline SVGs. */
    #app-buttons #home-icon-circle .bnav-icon,
    #app-buttons #header-account-icon .bnav-icon {
        position: static !important;
        inset: unset !important;
        top: unset !important;
        left: unset !important;
        transform: none !important;
        margin: 0 !important;
        width: var(--bnav-icon-size) !important;
        height: var(--bnav-icon-size) !important;
        min-width: var(--bnav-icon-size) !important;
        min-height: var(--bnav-icon-size) !important;
        display: block !important;
        overflow: visible !important;
        stroke: #666 !important;
        fill: none !important;
        flex-shrink: 0 !important;
    }

    /* Route-driven active state: hardcoded brand-blue hex */
    #app-buttons #home-btn-wrapper.is-active #home-icon-circle,
    #app-buttons #account-btn-wrapper.is-active #header-account-icon {
        color: #667eea;
    }

    #app-buttons #home-btn-wrapper.is-active #home-icon-circle .bnav-icon,
    #app-buttons #account-btn-wrapper.is-active #header-account-icon .bnav-icon {
        stroke: #667eea !important;
    }

    /* iOS Safari: enforce centering for You icon ::before (mask-image glyph) */
    #app-buttons #you-icon-circle::before {
        position: absolute !important;
        inset: unset !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        width: var(--bnav-icon-size) !important;
        height: var(--bnav-icon-size) !important;
        min-width: var(--bnav-icon-size) !important;
        min-height: var(--bnav-icon-size) !important;
        -webkit-mask-size: var(--bnav-icon-size) var(--bnav-icon-size) !important;
        mask-size: var(--bnav-icon-size) var(--bnav-icon-size) !important;
    }

    /* Active tab state (route-driven via JS .is-active): keep opacity constant.
       Visual indication is handled by pill + icon color. */
    #app-buttons .nav-action-item,
    #app-buttons #account-btn-wrapper,
    #app-buttons .nav-action-item.is-active,
    #app-buttons #account-btn-wrapper.is-active {
        opacity: 1;
    }

    /* Strip gray disc backgrounds from icon circles in bottom nav.
       The base .account-icon-circle has bg-color + border + SVG fallback
       that creates gray blobs behind every icon.
       EXCEPTION: #you-icon-circle keeps its background-image (user photo). */
    #app-buttons .account-icon-circle {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Remove fallback SVG on home + account icons (handled by inline SVGs now).
       Do NOT touch #you-icon-circle — its background-image is the user photo.
       Note: background is already cleared above with background: none !important. */


    /* Active icon styling: opacity-only (no color/glow/background changes) */

    /* Hide text labels under icons to save height */
    #app-buttons .nav-action-item > span,
    #app-buttons #account-btn-text {
        display: none;
    }

    /* Account tab: keep kebab accessible without consuming layout height */
    #app-buttons #account-btn-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: transparent;
    }

    #app-buttons #account-btn-wrapper .account-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #app-buttons #account-btn-wrapper .account-more {
        position: absolute;
        top: 2px;
        right: 6px;
        align-items: center;
        justify-content: center;
    }

    /* Account menu should open UPWARD from the bottom bar */
    #app-buttons #account-options-menu {
        top: auto;
        bottom: 100%;
        margin-top: 0;
        margin-bottom: 8px;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       C) CANVAS HEADER — compact for narrow viewport
       ───────────────────────────────────────────────────────────────────────── */

    .main-canvas-header {
        /* Safe-area handling is owned by the fixed top utility header above. */
        padding: 8px 10px 8px 10px;
        gap: 10px;
        min-width: 0;
        /* iPhone: headers should be white fill (no gray). */
        background: var(--color-surface-1);
    }

    /* Allow the timeline pill to consume remaining width in the canvas header */
    .main-canvas-header .canvas-header-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .main-canvas-header .canvas-header-right {
        /* Collapse to zero size & remove from flex flow so it can't cause
           padding asymmetry, BUT keep it in the render tree so the
           position:fixed #canvas-add-menu inside it can still appear. */
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        pointer-events: none !important;
    }

    /* iPhone: right header controls are floated/fixed elsewhere; prevent width reservation */
    .main-canvas-header #canvas-default-actions {
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: 0 !important;
        width: 0;
        gap: 0;
    }

    /* Profile selector: avatar-only on iPhone (keep tap target >= 44px) */
    .main-canvas-header .canvas-context-badge {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        gap: 0;
        justify-content: center;
        margin-right: 0;
        flex-shrink: 0;
        border-radius: 8px;
    }

    /* Hide the visible “You” label but keep it in the DOM (screen-reader friendly) */
    .main-canvas-header #canvas-context-label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

     /* Timeline picker pill: fill all remaining canvas-header width.
         Must override base inline-flex/fit-content AND the max-width caps
         set by the 900px / 1024px breakpoints (which iPhone also matches). */
    .main-canvas-header .timeline-picker-pill {
        position: relative;
        display: flex !important;
        flex: 1 1 0 !important;
        height: 44px;
        min-width: 0;
        width: 100% !important;
        max-width: none !important;
        background: var(--color-overlay-dark-03, rgba(0, 0, 0, 0.03));
        border: 1px solid var(--color-border-lightest);
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    /* Trigger fills the entire pill; right padding reserves space for caret btn */
    .main-canvas-header .timeline-picker-trigger {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 0 !important;
        max-width: none !important;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 100%;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    .main-canvas-header .timeline-picker-trigger-label {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── Timeline Location Back Button ── */
    .main-canvas-header .timeline-location-back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        height: 100%;
        flex-shrink: 0;
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        color: var(--color-text-primary);
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }
    .main-canvas-header .timeline-location-back-btn.is-hidden {
        display: none !important;
    }

    /* ── Caret (▾) button sits on the right ── */
    .main-canvas-header .timeline-caret-btn {
        position: relative !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        height: 100%;
        flex-shrink: 0;
        padding: 0;
        margin: 0;
        margin-right: 4px;
        font-size: 19px;
        line-height: 1;
        border-radius: 0;
        background: transparent;
        color: var(--color-text-primary, #333);
        border: none;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }
    .main-canvas-header .timeline-caret-btn.is-hidden {
        display: none !important;
    }

    /* ── Timeline Location State ──
       When pill has data-location-state="inside", change visual treatment */
    .main-canvas-header .timeline-picker-pill[data-location-state="inside"] {
        background: var(--color-overlay-dark-05);
        border-color: var(--color-border-strong, #bbb);
    }
    .main-canvas-header .timeline-picker-pill[data-location-state="inside"] .timeline-picker-trigger {
        padding-left: 4px;
        padding-right: 12px;
        pointer-events: none;
    }
    .main-canvas-header .timeline-picker-pill[data-location-state="inside"] .timeline-picker-trigger-label {
        font-weight: 600;
    }

    /* Ensure the visible timeline name gets maximum space before stack icons */
    .main-canvas-header .timeline-picker-trigger-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Canvas action buttons: tighter spacing */
    .canvas-header-right {
        gap: 4px;
    }

    #canvas-default-actions {
        gap: 4px;
    }

    /* iPhone: remove the hamburger icon from the canvas header.
       The year labels act as the drawer handles (existing behavior).
       Keep desktop untouched by scoping to this iPhone-only stylesheet. */
    #canvas-sidebar-toggle-btn {
        display: none !important;
    }

    /* Hide "add" text in canvas button — icon-only */
    .canvas-add-primary span {
        display: none;
    }

    .canvas-add-primary {
        padding: 0 8px;
        gap: 0;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       C3) CANVAS CONTROLS CLUSTER — Apple-ish left stack (iPhone Canvas)
       ─────────────────────────────────────────────────────────────────────────
       Uses existing buttons/handlers:
       - #canvas-sidebar-toggle-btn (toggleSidebar)
         - #canvas-reset-view-btn (resetView)
         NOTE: On iPhone we use a bottom-left “Reset view” pill inside the canvas
         to avoid header clutter and to play nicely with the bottom sheet.
    */

    :root {
        --iphone-canvas-control-size: 44px;
        --iphone-canvas-control-gap: 10px;
        --iphone-canvas-control-left: max(12px, env(safe-area-inset-left, 0px));
        /* Total stacked header height (global header + canvas header) on iPhone.
           Tuned constant; includes safe-area inset so the control cluster sits
           below the timeline pill row with a consistent gap. */
          /* "Top chrome" on iPhone: safe-area + brand bar + canvas header.
              Used to anchor the floating canvas control cluster below headers. */
          --iphone-canvas-top-chrome: calc(env(safe-area-inset-top, 0px) + var(--iphone-brandbar-height) + var(--iphone-canvas-header-height));
    }

    #canvas-sidebar-toggle-btn {
        position: fixed !important;
        left: var(--iphone-canvas-control-left) !important;
        width: var(--iphone-canvas-control-size) !important;
        height: var(--iphone-canvas-control-size) !important;
        min-width: var(--iphone-canvas-control-size) !important;
        min-height: var(--iphone-canvas-control-size) !important;
        padding: 0 !important;
        border-radius: var(--radius-full) !important;
        background: var(--color-bg-primary) !important;
        border: 1px solid var(--panel-border-subtle) !important;
        box-shadow: var(--shadow-md) !important;
        z-index: var(--z-sidebar-popover) !important;
        -webkit-tap-highlight-color: transparent;
    }

    #canvas-sidebar-toggle-btn {
        display: none !important;
        align-items: center;
        justify-content: center;
        top: calc(var(--iphone-canvas-top-chrome) + 8px) !important;
        bottom: auto !important;
    }

    /* Reset sits above the sidebar toggle */
    #canvas-reset-view-btn {
        /* iPhone: hide header reset icon; use the canvas pill instead */
        display: none !important;
    }

    #canvas-sidebar-toggle-btn svg {
        width: 22px;
        height: 22px;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       C3b) iPHONE “RESET VIEW” PILL — bottom-left (canvas-anchored)
       ───────────────────────────────────────────────────────────────────────── */

    /* Anchor absolute children to the canvas wrapper (not the viewport). */
    #canvas-wrapper {
        position: relative;
    }

    #iphone-reset-view-pill {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(10px + var(--iphone-bottom-tabbar-height) + env(safe-area-inset-bottom, 0px));
        height: 44px;
        min-height: 44px;
        padding: 0 12px;
        border: none;
        background: transparent;
        color: var(--color-text-secondary);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: translateX(-50%) translateY(2px);
        pointer-events: none;
        transition: opacity 160ms ease, transform 160ms ease;
        z-index: var(--z-sidebar-popover);
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
    }

    #iphone-reset-view-pill.is-visible {
        opacity: 0.78;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    /* Gentle press feedback */
    #iphone-reset-view-pill:active {
        transform: translateX(-50%) translateY(0) scale(0.98);
    }

    /* iPhone: retire the old bottom-right sidebar FAB (only one sidebar toggle) */

    /* ─────────────────────────────────────────────────────────────────────────
       C4) CREATE ACTION — Topbar + only (no bottom-right FAB on iPhone)
       ─────────────────────────────────────────────────────────────────────────
       NOTE: The topbar + reuses the existing create menu + handlers:
         - toggleCanvasAddMenu(event)
         - canvasAddMenu_addEvent()
         - canvasAddMenu_addTimeline()
    */

    /* iPhone: hide legacy bottom-right create affordances */
    #canvas-add-fab {
        display: none !important;
    }

    /* Keep the legacy canvas header Add button invisible on iPhone (avoid duplicate +).
       The menu itself is still reused and is positioned under the topbar. */
    #canvas-add-primary {
        display: none !important;
    }

    /* Re-anchor the existing create dropdown under the fixed topbar (left aligned). */
    #canvas-add-menu {
        position: fixed !important;
        top: calc(env(safe-area-inset-top, 0px) + var(--yrh-topbar-height) + 6px) !important;
        left: 10px !important;
        right: auto !important;
        bottom: auto !important;
        z-index: var(--z-sidebar-popover) !important;
        pointer-events: auto !important;  /* re-enable taps (parent is pointer-events:none) */
    }

    /* ─────────────────────────────────────────────────────────────────────────
       C5) iPHONE SELECT MODE STRIP — Cancel / Compare(count)
       ───────────────────────────────────────────────────────────────────────── */

    #iphone-select-strip {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--iphone-bottom-tabbar-height) + env(safe-area-inset-bottom, 0px));
        height: 44px;
        padding: 0 12px;
        box-sizing: border-box;
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: var(--color-bg-primary);
        border-top: 1px solid var(--panel-border-subtle);
        z-index: var(--z-sidebar-popover);
        -webkit-tap-highlight-color: transparent;
    }

    body.iphone-select-mode #iphone-select-strip {
        display: flex;
    }

    #iphone-select-strip button {
        height: 34px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid var(--panel-border-subtle);
        background: var(--color-bg-primary);
        color: var(--color-text-primary);
        font-size: 14px;
        font-weight: 600;
        line-height: 34px;
    }

    #iphone-select-strip button:disabled,
    #iphone-select-strip button[aria-disabled="true"] {
        opacity: 0.45;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       C2) MODAL TABS — horizontal scroll for tab rows inside modals
       ─────────────────────────────────────────────────────────────────────────
       Timeline modals have 6 tabs (details/notes/events/photos/documents/links)
       that overflow at 430px. Account modals have 2-3 tabs.
       Make all tab rows scrollable in a single line.                       */

    /* Timeline modal tabs: scrollable row, no wrap */
    .tm-edit-panel-tabs,
    #timelineModal .tm-edit-panel-tabs,
    #editTimelineModal .tm-edit-panel-tabs,
    #timelineInfoModal .tm-edit-panel-tabs {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        scrollbar-width: none;              /* Firefox: hide scrollbar */
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 2px !important;
        /* Subtle fade mask on right edge to hint at scrollability */
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8px, black calc(100% - 24px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 8px, black calc(100% - 24px), transparent 100%);
    }

    /* Hide scrollbar on WebKit (Safari) */
    .tm-edit-panel-tabs::-webkit-scrollbar,
    #timelineModal .tm-edit-panel-tabs::-webkit-scrollbar,
    #editTimelineModal .tm-edit-panel-tabs::-webkit-scrollbar,
    #timelineInfoModal .tm-edit-panel-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Tab buttons: keep flex-shrink 0 for scroll, comfortable tap target */
    .tm-tab-btn,
    #timelineModal .tm-tab-btn,
    #editTimelineModal .tm-tab-btn,
    #timelineInfoModal .tm-tab-btn {
        flex-shrink: 0 !important;
        min-height: 44px;
        padding: 10px 10px !important;
        font-size: 0.9rem !important;
        scroll-snap-align: start;
    }

    /* Account modal tabs: same scrollable treatment */
    .account-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
        padding-left: 12px;
        padding-right: 12px;
        gap: 4px;
    }

    .account-tabs::-webkit-scrollbar {
        display: none;
    }

    .account-tab-btn {
        flex-shrink: 0;
        min-height: 44px;
        white-space: nowrap;
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       D) SIDEBAR — Bottom-sheet overlay (does NOT push canvas)
       ─────────────────────────────────────────────────────────────────────────
       On iPhone the sidebar becomes a bottom-sheet that slides up from the
       bottom of the screen. Full width, rounded top corners, dimmed backdrop.
       The canvas layout stays unchanged (no reflow).
       Uses the existing .collapsed / :not(.collapsed) state classes.
       An init <script> in index.html adds .collapsed on iPhone so the
       sheet starts hidden.                                                  */

    /* Override the 768px breakpoint from 7-responsive.css — on iPhone the
       main-container stays row-reverse so the canvas fills the screen. */
    .main-container {
        flex-direction: row-reverse !important;
          /* Height is driven by the flex shell above; avoid 100vh math that
              can create phantom bottom space on iOS Safari. */
          flex: 1 1 auto;
          min-height: 0;
          height: auto !important;
    }

    /* Sidebar: bottom-sheet, full-width, slides up from bottom */
    .sidebar {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: 82vh !important;
        max-height: calc(var(--vh, 1vh) * 100 - env(safe-area-inset-top, 0px) - 12px) !important;
        z-index: 900 !important;    /* above canvas, below modals */
        border-left: none !important;
        border-top: none !important;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
        transform: translateY(0);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
                    visibility 0.28s ease !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    /* Drag-handle pill — real tappable <button>, also swipe-drag target */
    .sidebar::before {
        display: none !important;    /* replaced by .iphone-sheet-handle */
    }

    .iphone-sheet-handle {
        display: flex !important;    /* override inline display:none */
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 12px 0 8px;
        margin: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
        touch-action: none;          /* handle manages its own gestures */
    }

    /* When pull-search is hidden, the handle is the header→list separator */
    .sidebar:not(.iphone-pull-search-active) .iphone-sheet-handle {
        box-shadow: inset 0 -1px var(--color-overlay-dark-05);
    }

    /* When pull-search is pulling/visible, divider moves to the pull-search host */
    .sidebar.iphone-pull-search-active .iphone-sheet-handle {
        box-shadow: none;
    }

    .iphone-sheet-handle::after {
        content: '';
        display: block;
        width: 36px;
        height: 5px;
        background: rgba(128, 128, 128, 0.4);
        border-radius: 2.5px;
    }

    /* Disable CSS transition while user is dragging the sheet */
    .sidebar.iphone-sheet-dragging {
        transition: none !important;
    }

    /* When sidebar is collapsed → slide off-screen downward */
    .sidebar.collapsed {
        transform: translateY(100%) !important;
        visibility: hidden !important;
        width: 100vw !important;     /* keep sized so transform works */
        box-shadow: none;
    }

    /* Override desktop !important widths */
    .sidebar:not(.collapsed) {
        width: 100vw !important;
        min-width: 0 !important;
    }

    /* Sidebar header: compact, no shrink */
    .sidebar-header {
        position: relative;
        flex-shrink: 0;
        /* iPhone: headers should be white fill (no gray). */
        background: #ffffff !important;
    }

    /* iPhone: Events bottom-sheet header (mirrors timeline-picker-header) */
    .iphone-events-sheet-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: var(--panel-space-3, 12px);
        padding: var(--panel-space-4, 16px) var(--panel-space-6, 24px);
        background: #ffffff !important;
        border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
        flex-shrink: 0;
    }

    .iphone-events-sheet-title {
        font-size: var(--panel-font-title-size, 1.35em);
        font-weight: var(--panel-font-title-weight, 600);
        color: var(--panel-text, var(--color-text-primary));
        margin: 0;
        text-transform: lowercase;
        line-height: 1.2;
    }

    /* iPhone: Theme lens control (quiet text button on the right) */
    .iphone-theme-lens-btn {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 0;
        background: transparent;
        border: none;
        color: var(--color-text-muted);
        font-size: 0.92rem;
        font-weight: 500;
        text-transform: lowercase;
        letter-spacing: var(--letter-spacing-ui, 0.02em);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .iphone-theme-lens-btn:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 3px;
        border-radius: 8px;
    }

    .iphone-theme-lens-label {
        color: var(--color-text-secondary);
        font-weight: 500;
    }

    .iphone-theme-lens-caret {
        opacity: 0.7;
    }

    /* iPhone: Theme lens picker (second sheet) */
    .iphone-theme-lens-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 905; /* above sidebar + its backdrop */
        display: none;
        -webkit-tap-highlight-color: transparent;
    }

    .iphone-theme-lens-backdrop.is-open {
        display: block;
    }

    .iphone-theme-lens-sheet {
        --yrh-theme-lens-title-offset: 15px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 906;
        background: #ffffff;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
        transform: translateY(105%);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
        max-height: calc(var(--vh, 1vh) * 78);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .iphone-theme-lens-sheet.is-open {
        transform: translateY(0);
    }

    .iphone-theme-lens-sheet-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 12px var(--panel-space-6, 24px) 10px;
        border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
        flex-shrink: 0;
        position: relative;
    }

    .iphone-theme-lens-sheet-header-spacer {
        width: 52px;
        height: 1px;
        flex: 0 0 52px;
    }

    .iphone-theme-lens-sheet-title {
        position: absolute;
        left: 50%;
        transform: translateX(calc(-50% - var(--yrh-theme-lens-title-offset, 15px)));
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-text-primary);
        text-transform: none;
        letter-spacing: var(--letter-spacing-ui, 0.02em);
    }

    .iphone-theme-lens-sheet-btn {
        background: transparent;
        border: none;
        color: var(--color-primary);
        font-size: 0.95rem;
        font-weight: 600;
        text-transform: none;
        letter-spacing: var(--letter-spacing-ui, 0.02em);
        padding: 6px 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* Keep header layout stable: when Clear is hidden, reserve its space so
       the centered title never shifts.
       NOTE: .is-hidden is normally display:none !important globally. */
    #iphoneThemeLensClear {
        margin-left: auto;
        min-width: 52px;
        text-align: right;
    }

    #iphoneThemeLensClear.is-hidden {
        display: block !important;
        visibility: hidden;
        pointer-events: none;
    }

    .iphone-theme-lens-sheet-body {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .iphone-theme-lens-sheet-list {
        padding: 0;
    }

    /* Soften SelectionList selected state inside theme lens */
    .yrh-theme-lens-list .sl-row.sl-selected {
        background: var(--yrh-apple-row-active-bg, rgba(0, 0, 0, 0.10));
        box-shadow: none;
    }

    .yrh-theme-lens-list .sl-row .yrh-theme-lens-radio {
        min-width: 18px;
        text-align: right;
        color: var(--color-text-secondary);
        font-weight: 700;
        opacity: 0.85;
    }

    /* iPhone theme lens: disabled/unavailable options */
    .yrh-theme-lens-list button.sl-row:disabled,
    .yrh-theme-lens-list .sl-row.is-disabled {
        opacity: 0.42;
    }

    .yrh-theme-lens-list .sl-row.is-muted {
        opacity: 0.72;
    }

    /* Sidebar sort controls: no shrink */
    .sidebar-sort-controls {
        flex-shrink: 0;
    }

    /* iPhone exploration mode: no visible filter/sort controls in drawer header */
    .sidebar-sort-controls,
    #sidebarFilterPanel,
    .sidebar-sort-menu-wrap,
    #sidebar-filter-btn,
    #sidebar-sort-menu-btn,
    #sidebar-sort-menu {
        display: none !important;
    }

    /* Pull-down reveal search host (hidden at rest, inline above list) */
    .iphone-pull-search-host {
        --iphone-pull-search-reveal: 0px;
        max-height: var(--iphone-pull-search-reveal);
        overflow: hidden;
        opacity: 0;
        transition: max-height 160ms ease, opacity 140ms ease;
        padding: 0 var(--spacing-xl);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 0;
        /* Match bottom-sheet background (avoid transparent expansion area) */
        background: #ffffff;
        flex-shrink: 0;
    }

    .iphone-pull-search-host.is-pulling,
    .iphone-pull-search-host.is-visible {
        opacity: 1;
        /* When pull-search is visible, it becomes the header→list separator */
        box-shadow: inset 0 -1px var(--color-overlay-dark-05);
    }

    .iphone-pull-search-host .search-input-wrapper {
        width: 100%;
        flex: 0 0 100%;
        margin: 10px 0;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid rgba(120, 132, 152, 0.24);
        border-radius: 12px;
        box-shadow: none;
        box-sizing: border-box;
    }

    .iphone-pull-search-host #search-events {
        width: 100%;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        padding: 11px 38px 11px 12px;
        background: transparent;
        border: none;
        outline: none !important;
        box-shadow: none !important;
        font-size: 1rem;
        line-height: 1.2;
        color: var(--color-text-primary);
    }

    .iphone-pull-search-host #search-events:focus,
    .iphone-pull-search-host #search-events:focus-visible {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        -webkit-appearance: none;
        appearance: none;
    }

    .iphone-pull-search-host .search-clear-btn {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(120, 132, 152, 0.28);
        color: rgba(72, 82, 98, 0.9);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        padding: 0;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .iphone-pull-search-host .search-clear-btn:hover {
        color: var(--color-text-secondary);
    }

    /* Sidebar content: scrollable within sheet */
    .sidebar .sidebar-content {
        flex: 1 1 auto;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Close X button — HIDDEN on iPhone (handle is the close affordance) */
    .iphone-sidebar-close {
        display: none !important;
    }

    /* Toggle button: circular FAB at bottom-right */
    #sidebarToggleBtn {
        display: flex !important;    /* override .is-hidden */
        align-items: center;
        justify-content: center;
        position: fixed !important;
        top: auto !important;
        bottom: calc(16px + var(--iphone-bottom-tabbar-height) + env(safe-area-inset-bottom, 0px));
        right: 14px !important;
        transform: none !important;
        z-index: 901;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        opacity: 0.92;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
        font-size: 20px;
    }

    /* When sidebar is open, hide the FAB (user closes via X or backdrop) */
    .main-container:not(.sidebar-collapsed) #sidebarToggleBtn {
        display: none !important;
    }

    /* iPhone: always hide legacy bottom-right hamburger FAB */
    #sidebarToggleBtn {
        display: none !important;
    }

    /* Sidebar backdrop — dim overlay behind bottom sheet */
    .iphone-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 899;   /* just below sidebar */
        -webkit-tap-highlight-color: transparent;
    }

    .iphone-sidebar-backdrop.active {
        display: block;
    }

    /* Lock body scroll while sidebar is open */
    body.iphone-sidebar-open {
        overflow: hidden !important;
        touch-action: none;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       E) MODALS — prevent squashing; body scrolls, header stays
       ─────────────────────────────────────────────────────────────────────────
       Apply a safe max-height so modals don't overflow the viewport on
       iPhone. Internal content scrolls; header/footer remain pinned.     */

    /* IMPORTANT: Avoid global iPhone overrides for `.modal.show` / `.modal-content`.
       Some overlays use custom structures and can appear bottom-docked if these
       rules are too generic. Instead, target only timeline-related modals that
       should behave like centered cards on iPhone. */

    /* Timeline-related modals: enforce centered overlay on iPhone */
    #timelineModal.modal.show,
    #timelineInfoModal.modal.show,
    #editTimelineModal.modal.show,
    .timelines-manager-modal.modal.show {
        padding: 12px 3vw;
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        align-items: center;
        justify-content: center;
    }

    /* Timeline-related modal content: card sizing + internal scroll */
    #timelineModal .modal-content,
    #timelineInfoModal .modal-content,
    #editTimelineModal .modal-content,
    .timelines-manager-modal .modal-content {
        width: 94vw;
        max-width: 560px;
        max-height: calc(var(--vh, 1vh) * 100 - 80px) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 18px;
    }

    /* If these modals use c-modal-header/footer, pin them within the card */
    #timelineModal .modal-content .c-modal-header,
    #timelineInfoModal .modal-content .c-modal-header,
    #editTimelineModal .modal-content .c-modal-header,
    .timelines-manager-modal .modal-content .c-modal-header {
        position: sticky;
        top: 0;
        /* iPhone: header surfaces should be white fill. */
        background: var(--color-surface-1);
        z-index: 1;
        padding-bottom: 8px;
    }

    #timelineModal .modal-content .c-modal-footer,
    #timelineInfoModal .modal-content .c-modal-footer,
    #editTimelineModal .modal-content .c-modal-footer,
    .timelines-manager-modal .modal-content .c-modal-footer {
        position: sticky;
        bottom: 0;
        background: inherit;
        z-index: 1;
        padding-top: 8px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }


    /* ─────────────────────────────────────────────────────────────────────────
       Event Details Card overlay — the REAL "Add / Edit Event" modal on iPhone.
       Must mirror the same centering pattern used by the working timeline modals
       (overflow: hidden on the overlay prevents iOS Safari from scrolling the
       flex container to the bottom edge — the root cause of "bottom hugging").
       ───────────────────────────────────────────────────────────────────────── */
    #event-details-card-overlay.modal.show {
        position: fixed !important;
        inset: 0 !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        width: 100vw !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 3vw !important;
        padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        overflow: hidden !important;  /* overlay itself must not scroll */
        z-index: 1010 !important;     /* above sheet (900) + backdrop (899) */
    }

    #event-details-card-overlay .event-details-card {
        width: 94vw !important;
        max-width: 560px !important;
        min-height: 260px !important;
        /* Single dvh contract — supported on all target iOS versions (15.4+) */
        height: min(85dvh, calc(100dvh - 80px)) !important;
        max-height: min(85dvh, calc(100dvh - 80px)) !important;
        border-radius: 18px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        /* Neutralise GPU-layer hacks from desktop that create a containing block
           on iOS and interfere with position:fixed descendants */
        will-change: auto !important;
        transform: none !important;
        isolation: auto !important;
    }

    #event-details-card-overlay .c-modal-header {
        flex: 0 0 auto;
        position: relative;
        z-index: 2;
        /* iPhone: header surfaces should be white fill. */
        background: var(--color-surface-1);
    }

    /* Close button: 44×44 tap target, always reachable */
    #event-details-card-overlay .c-modal-close-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        z-index: 5 !important;
        pointer-events: auto !important;
    }

    #event-details-card-overlay #event-details-card-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Reflections tab: the thread area scrolls; avoid nested scroll containers. */
    #event-details-card-overlay[data-active-tab="notes"] #event-details-card-content {
        overflow: hidden !important;
    }

    #event-details-card-overlay .c-modal-footer {
        flex: 0 0 auto;
        position: relative;
        z-index: 2;
        background: inherit;
        align-items: center;
        /* Keep footer content vertically centered; add safe-area padding without
           collapsing the normal footer padding (prevents text/buttons hugging bottom). */
        padding-top: var(--panel-space-4, 16px);
        padding-bottom: calc(var(--panel-space-4, 16px) + env(safe-area-inset-bottom, 0px));
    }

    /* ─────────────────────────────────────────────────────────────────────────
       E2) TIMELINE PICKER — centered card, not full-screen
       ─────────────────────────────────────────────────────────────────────────
       The 768px breakpoint in 3-components.css makes the picker snap to the
       bottom edge à la action-sheet. On iPhone we want a centered card.     */

    .timeline-picker-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 3vw !important;
        padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .timeline-picker-content {
        width: 94vw !important;
        max-width: 560px !important;
        height: auto !important;
        max-height: calc(var(--vh, 1vh) * 100 - 80px) !important;
        border-radius: 18px !important;
    }

    /* Canvas timeline selection: bottom sheet (iPhone)
       Keep other timeline pickers as centered cards. */
    #timeline-picker-modal.timeline-picker-overlay {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    #timeline-picker-modal .timeline-picker-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 85vh !important;
        max-height: min(
            85vh,
            calc(var(--vh, 1vh) * 100 - env(safe-area-inset-top, 0px) - 8px)
        ) !important;
        border-radius: 18px 18px 0 0 !important;
        background: #ffffff !important;
        will-change: transform, opacity;
    }

    /* iPhone: match Events sheet motion (slide-up on open) */
    #timeline-picker-modal.timeline-picker-overlay:not(.is-hidden) .timeline-picker-content {
        animation: iphoneTimelinePickerSheetIn 280ms cubic-bezier(0.32, 0.72, 0, 1);
    }

    @keyframes iphoneTimelinePickerSheetIn {
        from {
            transform: translateY(100%);
            opacity: 0.98;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        #timeline-picker-modal.timeline-picker-overlay:not(.is-hidden) .timeline-picker-content {
            animation: none;
        }
    }

    /* iPhone: hide desktop-only close affordances */
    #timeline-picker-modal .timeline-picker-close {
        display: none !important;
    }
    #timeline-picker-modal .timeline-picker-sticky-footer .c-modal-footer-actions {
        display: none !important;
    }
    /* Remove extra right-padding the header reserved for the X button */
    #timeline-picker-modal .timeline-picker-header {
        padding-right: var(--panel-space-6, 24px) !important;
        /* iPhone: header surfaces should be white fill. */
        background: #ffffff !important;
    }

    /* Match the Events iPhone bottom-sheet handle (tap/drag target) */
    #timeline-picker-modal .timeline-picker-sheet-handle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 12px 0 8px;
        margin: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
        touch-action: none;
    }

    #timeline-picker-modal .timeline-picker-sheet-handle::after {
        content: '';
        display: block;
        width: 36px;
        height: 5px;
        background: rgba(128, 128, 128, 0.4);
        border-radius: 2.5px;
    }

    /* iPhone Safari can keep :hover “stuck” after tap.
       Ensure deselected rows never retain the gray hover tint. */
    @media (hover: none) and (pointer: coarse) {
        #timeline-picker-modal .timeline-picker-list .sl-row:hover:not(.sl-selected):not(.sl-disabled) {
            background: transparent !important;
        }
    }

    /* ─────────────────────────────────────────────────────────────────────────
       F) TIMELINE MANAGER MODAL — hero photo not clipped
       ─────────────────────────────────────────────────────────────────────────
       The hero photo (240×240 on desktop) is clipped on iPhone because the
       container is a fixed square with overflow: hidden + object-fit: cover.
       On iPhone we switch to object-fit: contain so the full image is visible,
       and cap the size to 180px so it doesn't dominate the modal.           */

    /* Info modal hero */
    #timelineInfoModal .timeline-details-hero-photo {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        overflow: visible;
    }

    #timelineInfoModal .timeline-details-hero-photo img {
        object-fit: contain;
        object-position: center;
        border-radius: 50%;
    }

    /* Create / Edit modal hero */
    #timelineModal .timeline-details-hero-photo,
    #editTimelineModal .timeline-details-hero-photo {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        overflow: visible;
    }

    #timelineModal .timeline-details-hero-photo img,
    #editTimelineModal .timeline-details-hero-photo img {
        object-fit: contain;
        object-position: center;
        border-radius: 50%;
    }

    /* Hero wrap: keep centered, constrain max height */
    #timelineInfoModal .timeline-details-hero-photo-wrap,
    #timelineModal .timeline-details-hero-photo-wrap,
    #editTimelineModal .timeline-details-hero-photo-wrap {
        max-height: 220px;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       G) MISC — small safe-area padding on main content
       ───────────────────────────────────────────────────────────────────────── */

    .main-content {
        /* Reserve space so the bottom tab bar never covers canvas UI */
        padding-bottom: calc(var(--iphone-bottom-tabbar-height) + env(safe-area-inset-bottom, 0px));
    }

    /* If Home is shown for any reason, reserve the same space */
    #home-page-container {
        padding-bottom: calc(var(--iphone-bottom-tabbar-height) + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    /* Prevent the year-filter toast from sitting under the tab bar */
    .year-filter-toast {
        bottom: calc(16px + var(--iphone-bottom-tabbar-height) + env(safe-area-inset-bottom, 0px));
    }

    /* ─────────────────────────────────────────────────────────────────────────
       CANVAS UTILITY ROWS — compact 32px strips at top & bottom of canvas
       ─────────────────────────────────────────────────────────────────────────
       These reposition existing overlay elements into fixed-height rows so
       event bubbles and callouts don't crowd the canvas edges.
       Top row:  time-from-now chip (center) + clear/reset buttons (right)
       Bottom row: reset-view pill (center)
    */

    /* ── Top utility row ──────────────────────────────────────────────────── */
    .time-from-now-chip {
        /* On iPhone this chip is absolute-positioned inside the canvas wrapper
           (already below the fixed headers). Adding safe-area inset here pushes
           it unnecessarily low and into event bubbles. */
        top: 4px !important;
        height: 24px !important;
        line-height: 24px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
    }

    /* Hide the old top-right clear on iPhone — we use the bottom contextual line */
    #clearSelectionBtn {
        display: none !important;
    }

    /* ── Bottom utility row ───────────────────────────────────────────────── */
    /* New bottom-centered contextual utility container */
    .iphone-contextual-utils {
        position: fixed;
        left: 50%;
        bottom: calc(16px + var(--iphone-bottom-tabbar-height) + env(safe-area-inset-bottom, 0px));
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-width: 180px; /* keeps horizontal stability */
        z-index: var(--z-sidebar-popover);

        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) translateY(2px);
        transition: opacity 160ms ease, transform 160ms ease;
    }

    .iphone-contextual-utils.is-visible {
        opacity: 0.95;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    .iphone-contextual-utils .iphone-contextual-btn {
        background: transparent !important;
        border: none !important;
        padding: 10px 8px !important; /* comfortable 44px tap area */
        min-height: 44px !important;
        line-height: 1 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--color-text-secondary);
        opacity: 0.8;
        cursor: pointer;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }

    /* Override legacy iPhone pill rules so Reset view renders inside the new container */
    .iphone-contextual-utils #iphone-reset-view-pill {
        position: static !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        opacity: 0.8 !important;
        pointer-events: auto !important;
        transition: none !important;
        line-height: 1 !important;
        height: auto !important;
        min-height: 44px !important;
        padding: 10px 8px !important;
    }

    .iphone-contextual-utils .iphone-contextual-sep {
        opacity: 0.8;
        font-size: 14px;
        color: var(--color-text-secondary);
    }

    .iphone-contextual-btn.is-hidden,
    .iphone-contextual-sep.is-hidden {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* Subtle micro-transition for Clear button visual feedback */
    .iphone-contextual-clear {
        transition: opacity 140ms linear, transform 80ms ease;
    }
    .iphone-contextual-clear:active { transform: scale(0.98); opacity: 0.7; }

    /* Keep event-focus button slightly above the tab bar if present */
    .event-focus-btn {
        bottom: 4px !important;
        height: 24px !important;
        line-height: 24px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
    }

    /* -----------------------------------------------------------------------
       F) PAGE-SHEET PROMOTION - Library / Account
       -----------------------------------------------------------------------
       When the body carries a view-* class the corresponding modal is
       re-presented as a full-screen page sheet (no dim, no card float).
       The micro brand-bar stays fixed at the top and the bottom tab bar
       stays fixed at the bottom - both remain fully interactive.

       --iphone-top-chrome-h  = safe-area-top + brand-bar (44 px)
       --iphone-bottom-nav-h  = tab-bar (56 px) + safe-area-bottom       */

    :root {
        --iphone-bottom-nav-h: calc(var(--iphone-bottom-tabbar-height) + 10px + env(safe-area-inset-bottom, 0px));
        --iphone-top-chrome-h: calc(env(safe-area-inset-top, 0px) + var(--iphone-brandbar-height));
    }

    /* --- F1  Chrome z-index lift ----------------------------------------
       Raise the header and tab bar ABOVE the modal overlay (z-modal-base
       = 1000) so they are never dimmed or blocked by page-sheet modals. */

    body.view-you     .header,
    body.view-library  .header,
    body.view-account  .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1010 !important;
        /* Give the header real height behind the safe area so it covers the
           notch/status-bar region with a solid background.  Without this the
           zero-height header is invisible and the canvas elements behind it
           bleed through the safe-area gap on You / Account pages. */
        height: env(safe-area-inset-top, 0px) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        /* Page-sheet destinations: ensure no gray/gradient header bleed-through. */
        background: var(--color-surface-1) !important;
        background-image: none !important;
    }

    /* In page-sheet views, ensure the kernel scrim can't dim the chrome.
       The scrim is still useful for true modals, but the You view should
       read as a destination page (like Account) with chrome always bright. */
    body.view-you .modal-kernel-overlay.modal-kernel-overlay--visible {
        top: var(--iphone-top-chrome-h) !important;
        bottom: var(--iphone-bottom-nav-h) !important;
        height: auto !important;
        background: transparent !important;
    }

    body.view-you     #app-buttons.nav-action-bar,
    body.view-library  #app-buttons.nav-action-bar,
    body.view-account  #app-buttons.nav-action-bar {
        z-index: 1010 !important;
    }

    /* --- F2  Overlay reset (no dim, pinned between chrome) --------------- */
    body.view-you     #youModal.modal.show,
    body.view-library  #libraryModal.modal.show,
    body.view-account  #accountModal.modal.show {
        background: transparent !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        animation: none !important;
        overflow: hidden !important;
        /* Pin the overlay between fixed chrome so it never covers them */
        top: var(--iphone-top-chrome-h) !important;
        bottom: var(--iphone-bottom-nav-h) !important;
        height: auto !important;
    }

    /* Account view: keep the overlay opaque so iOS rubber-banding never
       reveals canvas/background behind the page-sheet. */
    body.view-account #accountModal.modal.show {
        background: var(--panel-surface, var(--color-bg-primary)) !important;
    }

    /* --- F3  Card to page sheet ------------------------------------------ */
    body.view-you     #youModal .modal-content,
    body.view-library  #libraryModal .modal-content,
    body.view-account  #accountModal .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        position: relative !important;
    }

    /* You page: match account-modal layout — flat page, no modal padding */
    body.view-you #youModal .modal-content {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }

    body.view-you #youModal .you-modal-body {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        padding: var(--panel-space-6, 24px) !important;
    }

    /* --- F4  Internal scroll --------------------------------------------- */
    body.view-you     #youModal .c-modal-body--you,
    body.view-library  #libraryModal .c-modal-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Account uses the legacy sticky layout: fixed tabs + scrollable body.
       IMPORTANT: keep ONE scroll container only to avoid iOS “double scroll”
       and to make `position: sticky` work reliably for the Timelines header. */
    body.view-account #accountModal .c-modal-body--account {
        overflow: hidden !important;
        background: var(--panel-surface, var(--color-bg-primary)) !important;
    }

    body.view-account #accountModal .account-modal-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        background: var(--panel-surface, var(--color-bg-primary)) !important;
    }

    /* Timelines subpage: remove the generic Account body padding so the
       sticky segmented control can sit flush at the top (header-like). */
    body.view-account #accountModal.account-subpage-active .account-modal-body {
        padding: 0 !important;
    }

    /* Account → Library subpages reuse the Account modal header title.
       Ensure library headers render lowercase (events / timelines / artifacts). */
    body.view-account #accountModal.account-subpage-active #accountModalTitle,
    body.view-account #accountModal.account-artifacts-active #accountModalTitle {
        text-transform: lowercase !important;
    }

    /* Artifacts subpage: let content flow into the account-modal-body scroll container
       (same pattern as Events / Timelines — no nested scroll owner). */
    body.view-account #accountModal.account-artifacts-active #accountLibraryArtifactsScreens,
    body.view-account #accountModal.account-artifacts-active #accountArtifactsScreen {
        height: auto !important;
        min-height: 0 !important;
    }

    /* ── Hide the account modal footer on library subpages ──────────────
       The footer holds profile/membership buttons but renders as an empty
       padded white bar on library, timelines, events, artifacts sub-screens.
       Hide it entirely when on any library subpage.                         */
    body.view-account #accountModal.account-subpage-active .account-modal-footer {
        display: none !important;
    }

    /* Also hide it on the library hub tab (no buttons to show) */
    body.view-account #accountModal .account-modal-footer:has(.account-footer-profile:not(.active)):has(.account-footer-membership:not(.active)) {
        display: none !important;
    }

    /* Explicitly paint the Timelines screens so iOS overscroll can't reveal
       any underlying UI through transparent list rows. */
    body.view-account #accountModal.account-subpage-active .account-library-screens,
    body.view-account #accountModal.account-subpage-active .account-library-screen,
    body.view-account #accountModal.account-subpage-active .account-tl-list {
        background: var(--panel-surface, var(--color-bg-primary)) !important;
    }

    /* Account > Library > Artifacts: embedded Attachments Manager -
       flatten into account-modal-body scroll container (no nested scroll owner). */
    #accountModal .am-embedded-in-account {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /* Remove the nested attachments header row on iPhone Artifacts (Account header owns nav + filter). */
    #accountModal.account-artifacts-active .am-embedded-in-account .c-modal-header {
        display: none !important;
    }

    /* Let scroll body content flow naturally - account-modal-body is the scroll container. */
    #accountModal.account-artifacts-active .am-embedded-in-account .c-modal-scroll-body {
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    /* Override flex-based layout that needs a fixed-height ancestor — let content flow naturally. */
    #accountModal.account-artifacts-active .am-embedded-in-account .attachments-manager-table-container {
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #accountModal.account-artifacts-active .am-embedded-in-account .attachments-manager-table {
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        display: table !important;
    }

    #accountModal.account-artifacts-active .am-embedded-in-account .attachments-manager-table tbody {
        display: table-row-group !important;
        overflow: visible !important;
        padding-bottom: 24px !important;
    }

    /* iPhone Artifacts: hide table header — card-style rows instead */
    #accountModal.account-artifacts-active .am-embedded-in-account .attachments-manager-table thead {
        display: none !important;
    }

    #accountModal.account-artifacts-active .am-embedded-in-account .attachments-manager-table tbody tr {
        display: block !important;
        padding: 14px 12px !important;
        border-bottom: 1px solid var(--color-border-lighter) !important;
    }

    /* Hide separate data columns — metadata lives inside the name cell */
    #accountModal.account-artifacts-active .am-embedded-in-account .am-col-events,
    #accountModal.account-artifacts-active .am-embedded-in-account .am-col-timelines,
    #accountModal.account-artifacts-active .am-embedded-in-account .am-col-you,
    #accountModal.account-artifacts-active .am-embedded-in-account .am-col-size,
    #accountModal.account-artifacts-active .am-embedded-in-account .am-col-actions {
        display: none !important;
    }

    /* Name cell fills the row */
    #accountModal.account-artifacts-active .am-embedded-in-account td.am-col-name {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    /* Hide checkbox column — no multi-select on iPhone */
    #accountModal.account-artifacts-active .am-embedded-in-account th.am-col-checkbox,
    #accountModal.account-artifacts-active .am-embedded-in-account td.am-col-checkbox {
        display: none !important;
    }

    /* Hide checkbox — no multi-select on iPhone */
    #accountModal.account-artifacts-active .am-embedded-in-account .am-row-checkbox {
        display: none !important;
    }

    /* Show metadata lines beneath the artifact name */
    #accountModal.account-artifacts-active .am-embedded-in-account .am-name-meta {
        display: block !important;
    }

    /* Name text: allow wrapping */
    #accountModal.account-artifacts-active .am-embedded-in-account .am-name-primary {
        white-space: normal !important;
        word-break: break-word !important;
        font-weight: 500 !important;
    }

    /* Thumbnail + text layout */
    #accountModal.account-artifacts-active .am-embedded-in-account .am-name-wrap {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    #accountModal.account-artifacts-active .am-embedded-in-account .am-name-text {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    #accountModal .am-embedded-in-account .c-modal-header {
        border-radius: 0 !important;
    }

    /* Hide sticky footer entirely on iPhone Artifacts (no delete/clear/close/count) */
    #accountModal.account-artifacts-active .am-embedded-in-account .attachments-manager-sticky-footer {
        display: none !important;
    }

    /* Use Account header back/close; hide nested close button */
    #accountModal .am-embedded-in-account .c-modal-header-actions > .c-modal-close-btn {
        display: none !important;
    }

    #accountModal .am-embedded-in-account .am-header-search {
        display: none !important;
    }

    #accountModal .am-embedded-in-account #amFilterDrawer {
        display: none !important;
    }

    /* Enable iPhone-only pull-search host only in embedded Artifacts */
    #accountModal .am-embedded-in-account .am-iphone-only {
        display: block;
    }

    #accountModal .am-embedded-in-account #accountAmPullSearchHost {
        display: flex;
        padding: 0 12px;
        max-height: var(--iphone-pull-search-reveal, 0px);
        overflow: hidden;
        opacity: 0;
        box-sizing: border-box;
    }

    #accountModal .am-embedded-in-account #accountAmPullSearchHost.is-visible,
    #accountModal .am-embedded-in-account #accountAmPullSearchHost.is-pulling {
        opacity: 1;
        border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-lighter));
    }

    /* Match iPhone pull-search input styling for Artifacts */
    #accountModal .am-embedded-in-account .iphone-pull-search-host #accountAmSearchInput {
        width: 100%;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        padding: 11px 38px 11px 12px;
        background: transparent;
        border: none;
        outline: none !important;
        box-shadow: none !important;
        font-size: 1rem;
        line-height: 1.2;
        color: var(--color-text-primary);
    }

    #accountModal .am-embedded-in-account .iphone-pull-search-host #accountAmSearchInput:focus,
    #accountModal .am-embedded-in-account .iphone-pull-search-host #accountAmSearchInput:focus-visible {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Filter badge on the filter icon (shows active filter categories) */
    #accountModal .am-embedded-in-account #amFilterBtn .am-filter-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--color-primary);
        color: var(--color-text-inverse);
        border: 2px solid var(--color-bg-primary);
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        box-sizing: border-box;
    }

    #accountModal .am-embedded-in-account #amFilterBtn .am-filter-badge.is-hidden {
        display: none;
    }

    /* Bottom-sheet: artifacts filters */
    #accountModal .am-embedded-in-account .am-iphone-filter-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-bg-overlay);
        /* Below fixed chrome (#app-buttons/.header @ 1010), above page surface */
        z-index: 1004;
    }

    #accountModal .am-embedded-in-account .am-iphone-filter-backdrop.is-open {
        display: block;
    }

    #accountModal .am-embedded-in-account .am-iphone-filter-sheet {
        position: fixed;
        left: 0;
        right: 0;
        /* Extend behind the bottom menu so there's no separate white "bar".
           The sheet content gets bottom padding so chips stay above icons. */
        bottom: 0;
        /* Below fixed chrome (#app-buttons/.header @ 1010), above page surface */
        z-index: 1005;
        background: #ffffff;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
        transform: translateY(110%);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
        display: flex;
        flex-direction: column;
        /* Never allow the sheet to exceed available viewport */
        max-height: calc(100dvh - var(--iphone-top-chrome-h, 44px));
        overflow: hidden;
    }

    #accountModal .am-embedded-in-account .am-iphone-filter-sheet.is-open {
        transform: translateY(0);
    }

    #accountModal .am-embedded-in-account .am-iphone-filter-sheet.iphone-sheet-dragging {
        transition: none !important;
    }

    #accountModal .am-embedded-in-account .am-iphone-filter-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 0 4px;
        margin: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
        touch-action: none;
        /* Stretch across the header but don't push clear off-screen */
        flex: 1 1 auto;
        min-width: 0;
    }

    #accountModal .am-embedded-in-account .am-iphone-filter-handle::after {
        content: '';
        display: block;
        width: 36px;
        height: 5px;
        background: rgba(128, 128, 128, 0.4);
        border-radius: 2.5px;
    }

    #accountModal .am-embedded-in-account .am-iphone-filter-body {
        /* Keep chips comfortably above the fixed bottom menu.
           Visible breathing room above icons = 12px. */
        padding: 4px 16px calc(var(--iphone-bottom-nav-h, 56px) + 12px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }

    #accountModal .am-embedded-in-account .am-iphone-filter-section {
        margin-bottom: 12px;
    }

    #accountModal .am-embedded-in-account .am-iphone-filter-title {
        font-size: 0.78em;
        font-weight: 700;
        color: var(--color-text-muted);
        text-transform: lowercase;
        margin-bottom: 8px;
    }

    #accountModal .am-embedded-in-account .am-iphone-filter-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    #accountModal .am-embedded-in-account .am-iphone-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid var(--color-border-light);
        background: var(--color-bg-secondary);
        color: var(--color-text-primary);
        font-size: 0.9em;
        font-weight: 600;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    #accountModal .am-embedded-in-account .am-iphone-chip.is-active,
    #accountModal .am-embedded-in-account .am-iphone-chip[aria-pressed="true"] {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-text-inverse);
    }

    #accountModal .am-embedded-in-account .am-iphone-advanced-toggle {
        width: 100%;
        text-align: left;
        border: 1px solid var(--color-border-light);
        background: var(--color-bg-primary);
        color: var(--color-text-primary);
        border-radius: 12px;
        padding: 12px 12px;
        font-weight: 700;
        text-transform: lowercase;
        margin: 8px 0 10px;
    }

    #accountModal .am-embedded-in-account .am-iphone-advanced-panel {
        padding: 0 0 2px;
    }

    /* Sheet header: drag-handle (centered) + clear link (right-pinned) */
    #accountModal .am-embedded-in-account .am-iphone-filter-sheet-header {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        padding: 0 12px 0 0;
        background: #ffffff;
    }

    #accountModal .am-embedded-in-account .am-iphone-filter-clear-link {
        flex-shrink: 0;
        background: none;
        border: none;
        color: var(--color-primary);
        font-size: 0.85rem;
        font-weight: 500;
        padding: 8px 4px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
    }

    /* --- F4b  Hide canvas topbar on non-canvas views -------------------- */
    body.view-you     .yrh-topbar,
    body.view-library  .yrh-topbar,
    body.view-account  .yrh-topbar {
        display: none !important;
    }

    /* --- F5  Modal header padding (no extra safe-area needed now) -------- */
    body.view-you     #youModal .c-modal-header,
    body.view-library  #libraryModal .c-modal-header,
    body.view-account  #accountModal .c-modal-header {
        padding-top: 12px !important;
    }

    /* --- F6  Ghost-interaction prevention -------------------------------- */
    body.view-you     #canvas-page-container,
    body.view-library  #canvas-page-container,
    body.view-account  #canvas-page-container {
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* --- F7  Hide close-X on page-sheet views --------------------------- */
    body.view-you     #youModal .c-modal-close-btn,
    body.view-library  #libraryModal .c-modal-close-btn,
    body.view-account  #accountModal #accountModalCloseBtn {
        display: none !important;
    }

    /* --- F8  LIBRARY TABS - replaces launcher list on iPhone ------------ */

    /* Hidden by default (desktop keeps the launcher list) */
    .library-tabs {
        display: none;
    }

    /* --- F8b  YOU TABS — page-view override for iPhone */

    body.view-you #youModal .you-tabs {
        display: flex !important;
        justify-content: flex-start;
        gap: 1px;
        margin: 0;
        padding: 0 var(--panel-space-6, 24px);
        border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-light));
        /* iPhone: headers should be pure white (no gray). */
        background: var(--color-surface-1) !important;
        flex-shrink: 0;
        width: 100%;
        box-sizing: border-box;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    /* iPhone: You + Account page-sheet headers should be pure white. */
    body.view-you #youModal .c-modal-header,
    body.view-account #accountModal .c-modal-header,
    body.view-account #accountModal .account-tabs {
        background: var(--color-surface-1) !important;
        background-image: none !important;
    }

    body.view-you #youModal .you-tabs::-webkit-scrollbar {
        display: none;
    }

    .you-tab-btn {
        white-space: nowrap;
        min-height: 44px;
        text-transform: lowercase;
    }

    /* Shown on iPhone library page view */
    body.view-library #libraryModal .library-tabs {
        display: flex !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
        padding: 0 12px;
        gap: 4px;
        border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-light));
        background: var(--panel-surface, var(--color-bg-primary));
        position: sticky;
        top: 0;
        z-index: 2;
    }

    body.view-library #libraryModal .library-tabs::-webkit-scrollbar {
        display: none;
    }

    .library-tab-btn {
        background: transparent;
        border: none;
        padding: 10px 12px;
        font-size: 0.9rem;
        font-weight: var(--font-weight-semibold);
        color: var(--panel-text-muted, var(--color-text-muted));
        cursor: pointer;
        border-bottom: 3px solid transparent;
        border-radius: var(--panel-radius-sm, 6px) var(--panel-radius-sm, 6px) 0 0;
        transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
        flex-shrink: 0;
        min-height: 44px;
        white-space: nowrap;
    }

    .library-tab-btn:hover {
        color: var(--panel-text, var(--color-text-primary));
        background: var(--panel-surface-muted, var(--color-surface-4));
    }

    .library-tab-btn.active {
        color: var(--panel-text, var(--color-text-primary));
        border-bottom-color: var(--panel-accent, var(--color-primary));
    }

    /* Hide launcher list when library is in page-tab view */
    body.view-library #libraryModal .library-launcher-list {
        display: none !important;
    }

    /* --- F9  LIBRARY MANAGER PAGE-SHEETS --------------------------------
       When a library tab is active, the corresponding manager modal is
       shown as a page-sheet that tiles below the library header + tabs.
       Both the brand bar (top) and the bottom tab bar stay visible.    */

    :root {
        --iphone-library-chrome-h: 96px;
    }

    body.view-library #timelineLibraryModal.modal.show,
    body.view-library #eventManagerModal.modal.show,
    body.view-library #userDocumentsModal.modal.show {
        background: transparent !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        animation: none !important;
        overflow: hidden !important;
        top: calc(var(--iphone-top-chrome-h) + var(--iphone-library-chrome-h)) !important;
        bottom: var(--iphone-bottom-nav-h) !important;
        height: auto !important;
    }

    body.view-library #timelineLibraryModal .modal-content,
    body.view-library #eventManagerModal .modal-content,
    body.view-library #userDocumentsModal .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        position: relative !important;
    }

    /* Hide manager close-X when embedded in library page */
    body.view-library #timelineLibraryModal .c-modal-close-btn,
    body.view-library #eventManagerModal .c-modal-close-btn,
    body.view-library #userDocumentsModal .c-modal-close-btn {
        display: none !important;
    }

    /* Hide manager title text (tab row already labels the section) */
    body.view-library #timelineLibraryModal .c-modal-title-container,
    body.view-library #eventManagerModal .c-modal-title-container,
    body.view-library #userDocumentsModal .c-modal-title-container {
        display: none !important;
    }

    /* Internal scroll for manager bodies within library page */
    body.view-library #timelineLibraryModal .c-modal-scroll-body,
    body.view-library #timelineLibraryModal .tl-timeline-list,
    body.view-library #eventManagerModal .c-modal-scroll-body,
    body.view-library #eventManagerModal .em-event-list-container,
    body.view-library #userDocumentsModal .c-modal-scroll-body,
    body.view-library #userDocumentsModal .am-table-wrapper {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Ghost-interaction: block canvas when a library manager is visible */
    body.view-library #canvas-page-container {
        pointer-events: none !important;
    }

    /* --- F10  Hide "close" button in library manager footers ------------ */
    body.view-library #timelineLibraryModal .c-modal-footer-actions,
    body.view-library #eventManagerModal .c-modal-footer-actions,
    body.view-library #userDocumentsModal .c-modal-footer-actions {
        display: none !important;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       ARTIFACTS / ATTACHMENTS LIBRARY — iPhone table layout
       Pattern: name on top, other columns below name (taller rows).
       Keep all columns sortable via a horizontal sort bar.
       ───────────────────────────────────────────────────────────────────────── */

    /* Render the table header as a horizontal scrollable sort bar */
    #userDocumentsModal .attachments-manager-table thead {
        display: block !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-light));
    }

    #userDocumentsModal .attachments-manager-table thead tr {
        display: flex !important;
        width: max-content !important;
        gap: 8px;
        padding: 8px 10px;
    }

    #userDocumentsModal .attachments-manager-table thead th {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        border: 1px solid var(--panel-border-subtle, var(--color-border-light));
        border-radius: 999px;
        padding: 8px 10px;
        background: var(--panel-surface, var(--color-bg-primary));
        white-space: nowrap;
    }

    /* Collapse body rows to the name column; show meta lines under the name */
    #userDocumentsModal .attachments-manager-table tbody td.am-col-events,
    #userDocumentsModal .attachments-manager-table tbody td.am-col-timelines,
    #userDocumentsModal .attachments-manager-table tbody td.am-col-you,
    #userDocumentsModal .attachments-manager-table tbody td.am-col-size {
        display: none !important;
    }

    #userDocumentsModal .am-col-name {
        width: 100% !important;
        min-width: 0 !important;
    }

    #userDocumentsModal .am-name-meta {
        display: block !important;
    }

    #userDocumentsModal .am-name-meta-line {
        margin-top: 5px;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       EVENT DETAILS CARD — ABOUT TAB (narrative)
       Tighten spacing ABOVE description so artifacts stay visible.
       iPhone-only. No DOM / modal mechanics changes.
       ───────────────────────────────────────────────────────────────────────── */

    /* Reduce overall vertical rhythm inside About so the modal body
       doesn’t overflow and trigger the iOS scrollbar in the common
       “empty description” case. */
    #event-details-card-overlay .edc-about-view {
        gap: 12px;
    }

    .edc-about-view--narrative .event-about-content {
        gap: 10px;
    }

    /* Date + themes should read as one header cluster.
       Only pull themes upward when it is the first meta line (no duration line above).
       Otherwise it will collide with duration on small screens. */
    .edc-about-view--narrative .edc-about-meta-right > .edc-about-themes-line:first-child {
        margin-top: -10px;
    }

    /* Reduce themes → description spacing (keep readable separation) */
    .edc-about-view--narrative .edc-about-description-card--view,
    .edc-about-view--narrative .edc-about-description-card--fixed {
        margin-top: 4px;
    }

    /* Event edit/create: ThemePicker tray should show ~3 rows on iPhone
       (desktop defaults to ~2 rows via base EDC override). */
    #event-details-card-overlay .edc-about-themes-picker .tag-picker-tray {
        --edc-theme-tray-rows: 3;
        --edc-theme-tray-pad: 10px;
        --edc-theme-tray-gap: 6px;
        --edc-theme-tray-row: 30px;
    }

    /* iPhone-only: keep artifacts strip closer to description */
    .edc-about-view--narrative .edc-about-thumbs-wrap {
        margin-top: 4px;
    }

    /* Edit/create About layout (non-narrative): reduce spacing between rows */
    #event-details-card-overlay .edc-about-view:not(.edc-about-view--narrative) .event-about-content {
        gap: 12px;
    }

    #event-details-card-overlay .edc-about-view .event-card-detail-row {
        gap: 7px;
    }

    /* Biggest vertical footprint: the description card.
       Slightly smaller on iPhone to keep the modal from scrolling. */
    #event-details-card-overlay .edc-about-description-card {
        padding: 14px;
    }

    #event-details-card-overlay .edc-about-description-card--view,
    #event-details-card-overlay .edc-about-description-card--fixed {
        height: clamp(210px, 26vh, 230px);
    }

    /* EVENT DETAILS CARD — TIMELINES TAB
       Keep row separators clear of the iOS overlay scrollbar. */
    #event-details-card-overlay .edc-timelines-tab {
        --edc-scrollbar-gutter: 12px;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       ACCOUNT → LIBRARY → TIMELINES (MOBILE SCREENS)
       ───────────────────────────────────────────────────────────────────────── */

    /* When navigating inside Library (timelines list/detail), hide Account tabs
       to make it feel like a dedicated screen with standard back nav. */
    #accountModal.account-subpage-active .account-tabs {
        display: none !important;
    }

    .account-library-screens {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    }

    .account-library-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--panel-border-subtle);
        background: var(--color-bg-primary);
        position: sticky;
        top: 0;
        z-index: 5;
    }

    /* iPhone Events Library: allow segmented + pull-search to stack vertically */
    #accountEventsListScreen .account-library-toolbar-stack,
    #accountTimelinesListScreen .account-library-toolbar-stack {
        width: 100%;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    /* Reuse existing iPhone pull-search host styling, but align to toolbar padding */
    #accountEventsListScreen .account-ev-pull-search-host,
    #accountTimelinesListScreen .account-tl-pull-search-host {
        padding: 0;
    }

    /* Match iPhone pull-search input styling (scoped to Events/Timelines Library to avoid global changes) */
    #accountEventsListScreen .iphone-pull-search-host #accountEvSearchInput,
    #accountTimelinesListScreen .iphone-pull-search-host #accountTlSearchInput {
        width: 100%;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        padding: 11px 38px 11px 12px;
        background: transparent;
        border: none;
        outline: none !important;
        box-shadow: none !important;
        font-size: 1rem;
        line-height: 1.2;
        color: var(--color-text-primary);
    }

    #accountEventsListScreen .iphone-pull-search-host #accountEvSearchInput:focus,
    #accountEventsListScreen .iphone-pull-search-host #accountEvSearchInput:focus-visible,
    #accountTimelinesListScreen .iphone-pull-search-host #accountTlSearchInput:focus,
    #accountTimelinesListScreen .iphone-pull-search-host #accountTlSearchInput:focus-visible {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        -webkit-appearance: none;
        appearance: none;
    }

    .account-library-toolbar .account-tl-browse {
        width: 100%;
        justify-content: stretch;
    }

    .account-library-toolbar .account-tl-browse .edc-segmented-btn {
        flex: 1 1 0;
        text-align: center;
    }

    .account-tl-list {
        padding: 0;
        margin: 0;
    }

    .account-tl-list .sl-row {
        min-height: 72px;
        align-items: stretch;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* Avoid a double-thick divider at rest:
       - toolbar draws a bottom divider
       - SelectionList rows draw a top divider (including the first)
       Keep only the toolbar divider. */
    .account-tl-list .sl-row:first-child,
    .account-tl-list .sl-row:first-of-type {
        border-top: none;
    }

    /* SelectionList rows use border-top separators; add a closing divider so
       the final visible row doesn't look "open" at the bottom. */
    .account-tl-list .sl-row:last-child,
    .account-tl-list .sl-row:last-of-type {
        border-bottom: 1px solid var(--color-border-lighter, rgba(0, 0, 0, 0.08));
    }

    .account-tl-list .sl-main {
        justify-content: center;
    }

    /* Allow metadata line to wrap instead of truncating */
    .account-tl-list .sl-subtitle {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
    }

    .account-tl-detail-actions {
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    }

    /* ─────────────────────────────────────────────────────────────────────────
       G) IPHONE BACK BUTTON — iOS-style "< canvas" chevron
       ─────────────────────────────────────────────────────────────────────────
       Hidden by default (desktop). Shown on iPhone for page-sheet modals.
       ───────────────────────────────────────────────────────────────────────── */

    /* Base back-button style (shared across all promoted modals) */
    .iphone-back-btn {
        display: flex;
        align-items: center;
        gap: 0;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px 8px;
        margin: 0;
        color: var(--color-text-tertiary, #9aa0a6);
        font-size: 0;
        font-weight: 400;
        line-height: 1;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        border-radius: 8px;
        min-height: 36px;
        flex-shrink: 0;
    }

    .iphone-back-btn svg {
        width: 8px;
        height: 14px;
        flex-shrink: 0;
    }

    .iphone-back-btn:active {
        opacity: 0.5;
    }

    /* iPhone cancel button (left side of header, shown in edit mode) */
    .iphone-header-cancel-btn {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px 8px;
        margin: 0;
        margin-right: 12px;
        min-width: 44px;
        min-height: 44px;
        font-size: 15px;
        font-weight: 400;
        color: var(--color-text-secondary);
        -webkit-tap-highlight-color: transparent;
        border-radius: 8px;
        white-space: nowrap;
    }

    .iphone-header-cancel-btn:active { opacity: 0.6; }

    /* Mobile: minimal top bar + title-as-content (Events/Timelines)
       - Header shows only: back chevron (left) + single action (right)
       - Title renders as content below header divider
    */

    .iphone-header-action-btn {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px 8px;
        margin: 0;
        min-width: 44px;
        min-height: 44px;
        font-size: 15px;
        font-weight: 400;
        color: var(--color-text-secondary);
        -webkit-tap-highlight-color: transparent;
        border-radius: 8px;
        white-space: nowrap;
    }

    .iphone-header-action-btn:active { opacity: 0.6; }

    .page-content-title {
        display: block;
        padding: 10px 16px 8px;
        border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-light));
        color: var(--color-text-primary);
        font-size: 20px;
        font-weight: 600;
        line-height: 1.2;
        word-break: break-word;
    }

    /* Timeline iPhone: show stacked start/end (or no/events) left of name */
    .tlm-content-title-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .tlm-content-range {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        line-height: 1.05;
        color: var(--color-text-tertiary);
        font-weight: 400;
        font-size: 14px;
        flex: 0 0 auto;
        min-width: 44px;
    }

    .tlm-content-range-start,
    .tlm-content-range-end {
        color: inherit;
        font: inherit;
    }

    .tlm-content-name {
        color: inherit;
        font: inherit;
        min-width: 0;
    }

    .page-content-title-input {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: inherit;
        font: inherit;
        padding: 0;
        margin: 0;
    }

    /* Timeline name inputs have their own bordered field styling in 3-components.css.
       On mobile title-as-content, force them to match the event title input style. */
    #timelineModal #timelineModalContentTitle .timeline-modal-name-input,
    #editTimelineModal #editTimelineModalContentTitle .timeline-modal-name-input {
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        color: inherit !important;
        text-align: left !important;
    }

    #timelineModal #timelineModalContentTitle .timeline-modal-name-input:focus,
    #editTimelineModal #editTimelineModalContentTitle .timeline-modal-name-input:focus {
        border: none !important;
        background: transparent !important;
        outline: none !important;
    }

    /* Apply minimal top bar to Event + Timeline full-page sheets */
    #event-details-card-overlay .c-modal-header,
    #timelineModal .c-modal-header,
    #editTimelineModal .c-modal-header,
    #timelineInfoModal .c-modal-header,
    #changePasswordModal .c-modal-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px;
        padding: 6px 10px !important;
        min-height: 52px;
        border-bottom: 1px solid var(--panel-border-subtle, var(--color-border-light));
    }

    /* Hide large header titles / name-input chrome */
    #event-details-card-overlay #edcTitleContainer,
    #timelineModal .c-modal-header-with-photo,
    #editTimelineModal .c-modal-header-with-photo,
    #timelineInfoModal .c-modal-title-container {
        display: none !important;
    }

    /* Show header action button on these sheets */
    #event-details-card-overlay .iphone-header-action-btn,
    #timelineModal .iphone-header-action-btn,
    #editTimelineModal .iphone-header-action-btn,
    #timelineInfoModal .iphone-header-action-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Show cancel button on edit sheets; event card cancel is toggled via JS */
    #editTimelineModal .iphone-header-cancel-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    #event-details-card-overlay .iphone-header-cancel-btn {
        /* display toggled by JS (shown only in edit mode) */
        align-items: center;
        justify-content: center;
    }

    /* Mobile: remove bottom modal mechanics (footers/meta) */
    #event-details-card-overlay #edcShellFooter,
    #timelineModal .c-modal-sticky-footer,
    #editTimelineModal .c-modal-sticky-footer,
    #timelineInfoModal .c-modal-sticky-footer {
        display: none !important;
    }

    #event-details-card-overlay .event-card-last-edited,
    #timelineInfoModal .event-card-last-edited,
    #timelineInfoModal #timelineInfoMeta {
        display: none !important;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       G1) PAGE-SHEET PROMOTION — Event & Timeline modals
       ─────────────────────────────────────────────────────────────────────────
       On iPhone, these 5 modals present as full-page sheets pinned
       between the top chrome bar and bottom tab bar (consistent with
       Account / Library / You page-sheets from section F).
       ───────────────────────────────────────────────────────────────────────── */

    /* --- G1a  Chrome z-index lift for event/timeline sheets -------------- */
    body:has(#timelineModal.modal.show) .header,
    body:has(#editTimelineModal.modal.show) .header,
    body:has(#timelineInfoModal.modal.show) .header,
    body:has(#event-details-card-overlay.modal.show) .header,
    body:has(#changePasswordModal.modal.show) .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1020 !important;
        background: var(--color-bg-primary) !important;
    }

    body:has(#timelineModal.modal.show) #app-buttons.nav-action-bar,
    body:has(#editTimelineModal.modal.show) #app-buttons.nav-action-bar,
    body:has(#timelineInfoModal.modal.show) #app-buttons.nav-action-bar,
    body:has(#event-details-card-overlay.modal.show) #app-buttons.nav-action-bar,
    body:has(#changePasswordModal.modal.show) #app-buttons.nav-action-bar {
        z-index: 1020 !important;
        pointer-events: auto !important;
    }

    /* Kernel scrim: confine to page-sheet area so chrome is never dimmed */
    body:has(#timelineModal.modal.show) .modal-kernel-overlay.modal-kernel-overlay--visible,
    body:has(#editTimelineModal.modal.show) .modal-kernel-overlay.modal-kernel-overlay--visible,
    body:has(#timelineInfoModal.modal.show) .modal-kernel-overlay.modal-kernel-overlay--visible,
    body:has(#event-details-card-overlay.modal.show) .modal-kernel-overlay.modal-kernel-overlay--visible,
    body:has(#changePasswordModal.modal.show) .modal-kernel-overlay.modal-kernel-overlay--visible {
        top: var(--iphone-top-chrome-h) !important;
        bottom: var(--iphone-bottom-nav-h) !important;
        height: auto !important;
    }

    /* --- G1b  Overlay → page sheet (shared rules) ------------------------ */
    #timelineModal.modal.show,
    #editTimelineModal.modal.show,
    #timelineInfoModal.modal.show,
    #event-details-card-overlay.modal.show,
    #changePasswordModal.modal.show {
        background: var(--panel-surface, var(--color-bg-primary)) !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        animation: none !important;
        overflow: hidden !important;
        top: var(--iphone-top-chrome-h) !important;
        bottom: var(--iphone-bottom-nav-h) !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        z-index: 1010 !important;
    }

    /* --- G1c  Card → page sheet (shared content rules) ------------------- */
    #timelineModal .modal-content,
    #editTimelineModal .modal-content,
    #timelineInfoModal .modal-content,
    #event-details-card-overlay .event-details-card,
    #changePasswordModal .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* --- G1d  Internal scroll -------------------------------------------- */
    #timelineModal .c-modal-scroll-body,
    #editTimelineModal .c-modal-scroll-body,
    #timelineInfoModal .c-modal-scroll-body,
    #event-details-card-overlay #event-details-card-content,
    #changePasswordModal .c-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* --- G1e  Header / Footer pinned ------------------------------------- */
    #timelineModal .c-modal-header,
    #editTimelineModal .c-modal-header,
    #timelineInfoModal .c-modal-header,
    #event-details-card-overlay .c-modal-header,
    #changePasswordModal .c-modal-header {
        flex: 0 0 auto !important;
        position: relative !important;
        z-index: 2;
        /* iPhone: header surfaces should be white fill. */
        background: var(--color-surface-1);
    }

    #timelineModal .c-modal-sticky-footer,
    #editTimelineModal .c-modal-sticky-footer,
    #timelineInfoModal .c-modal-sticky-footer,
    #event-details-card-overlay .c-modal-footer {
        flex: 0 0 auto !important;
        position: relative !important;
        z-index: 2;
        background: inherit;
        padding-bottom: calc(var(--panel-space-4, 16px) + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* --- G1f  Hide close × button; show back button ---------------------- */
    #timelineModal .c-modal-close-btn,
    #editTimelineModal .c-modal-close-btn,
    #timelineInfoModal .c-modal-close-btn,
    #event-details-card-overlay .c-modal-close-btn,
    #changePasswordModal .c-modal-close-btn {
        display: none !important;
    }

    #timelineModal .iphone-back-btn,
    #editTimelineModal .iphone-back-btn,
    #timelineInfoModal .iphone-back-btn,
    #event-details-card-overlay .iphone-back-btn,
    #changePasswordModal .iphone-back-btn {
        display: flex !important;
    }

    /* Change Password: show title in the top header (no subheader) */
    #changePasswordModal .c-modal-header {
        justify-content: flex-start !important;
    }

    #changePasswordModal .c-modal-title-container {
        display: block !important;
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
    }

    #changePasswordModal .c-modal-title {
        font-size: 20px;
        font-weight: 600;
        line-height: 1.2;
    }

    /* Balance the header so the centered title stays centered */
    #changePasswordModal .c-modal-header-actions {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    /* Restore normal body padding now that we don't render a content title */
    #changePasswordModal .c-modal-body {
        padding: 16px !important;
    }

    /* iPhone: remove the bottom footer entirely (no sticky bottom) */
    #changePasswordModal .c-modal-footer {
        display: none !important;
    }

    /* iPhone: inline actions below fields */
    #changePasswordModal .change-password-inline-actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 8px;
    }

    #changePasswordModal .change-password-update-text-btn {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        color: var(--color-primary);
        font-size: 15px;
        font-weight: 600;
        -webkit-tap-highlight-color: transparent;
    }

    #changePasswordModal .change-password-update-text-btn:active {
        opacity: 0.6;
    }

    #changePasswordModal .change-password-update-text-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }


    /* --- G1i  Upload progress tiles — iPhone polish ----------------------- */
    /* Larger progress indicators for touch readability */

    .edc-upload-progress-bar {
        height: 6px;
    }

    .edc-upload-progress-text {
        font-size: 16px;
        padding: 7px 16px;
        border-radius: 22px;
        gap: 8px;
    }

    .edc-photos-uploading {
        font-size: 1.05em;
        padding: 16px;
        position: sticky;
        top: 0;
        z-index: 5;
        margin-bottom: 10px;
    }

    .edc-upload-progress-tile,
    .edc-upload-done-tile,
    .edc-upload-error-tile {
        min-height: 100px;
    }

    .edc-spinner {
        width: 22px;
        height: 22px;
    }

    .edc-spinner--tile {
        width: 16px;
        height: 16px;
    }

    .edc-upload-done-tile .edc-upload-progress-text {
        font-size: 22px;
    }

    .edc-upload-error-text {
        font-size: 22px !important;
    }

    /* You page artifacts grid: slightly narrower tiles on iPhone SE */
    .edc-artifacts-unified-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }

    /* --- G1h  Ghost-interaction prevention -------------------------------- */
    /* Prevent taps from reaching the canvas while a page-sheet is open */

    /* QA (iPhone Safari):
       - Tap any tab: page sheet fills between brand bar and tab bar
       - Brand bar (logo) stays pinned at top, never dimmed
       - Bottom tab bar stays fully visible and tappable on every view
       - Page surfaces feel like destination screens, not modals
       - Canvas controls disabled (pointer-events:none) on non-canvas views
       - Account kebab menu opens upward; items tappable
       - Focus an input: tab bar stays pinned at bottom of visible viewport
    */

    /* ─────────────────────────────────────────────────────────────────────────
       ACCOUNT → TRUST & POLICIES → SUBPAGES (MOBILE SCREENS)
       ───────────────────────────────────────────────────────────────────────── */

    /* Launcher lists: inset from edges on iPhone */
    #trust-section .library-launcher-list,
    #library-section .library-launcher-list {
        padding: 0 14px;
    }

    /* Contact support: render as a tappable email hyperlink */
    .account-trust-contact-link {
        display: inline-block;
        padding: 10px 0;
        margin-top: 4px;
        font-size: 0.9rem;
        color: var(--color-primary, #667eea);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-align: left;
        cursor: pointer;
        border: none;
        background: none;
        -webkit-tap-highlight-color: transparent;
    }
    .account-trust-contact-link:active {
        opacity: 0.6;
    }

    /* Trust legal content: readable padding for fetched HTML */
    .trust-legal-content {
        padding: 16px;
    }

    /* Trust/Profile pricing content: flush, readable layout */
    .trust-pricing-content {
        padding: 8px 12px 24px;
    }
    .trust-pricing-content .upgrade-plans-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .trust-pricing-content .upgrade-plan-card {
        width: 100%;
        max-width: 100%;
    }
    .trust-pricing-content .upgrade-modal-promo-area {
        padding: 8px 0;
    }
    /* Ensure manage billing section is visible on subpage */
    .trust-pricing-content #manageBillingSection:not(.is-hidden) {
        margin-top: 12px;
    }

    /* When trust or profile subpage is active, hide profile cards / trust launcher */
    #accountModal.account-subpage-active #profile-section .account-cards.is-hidden,
    #accountModal.account-subpage-active #trust-section #trustLauncherList.is-hidden {
        display: none !important;
    }

    /* Trust/Profile subpage screens: let them flow into the scroll body */
    #accountModal.account-subpage-active #trustSubpageScreens,
    #accountModal.account-subpage-active #profileSubpageScreens {
        background: var(--panel-surface, var(--color-bg-primary)) !important;
    }

} /* end @media iPhone portrait */

/* ═══════════════════════════════════════════════════════════════════════════════
   iPad / Tablet Portrait & Landscape
   ═══════════════════════════════════════════════════════════════════════════════
   SCOPE: Touch devices up to 1024px wide (iPad, iPad Pro)
   Hide canvas sidebar toggle — controlled by bottom-right button instead */
@media (min-width: 431px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {
    #canvas-sidebar-toggle-btn {
        display: none !important;
    }
}