/* ---------- iOS: Liquid Glass shell ----------
   Only active when the head script detected iPhone/iPad (html[data-platform="ios"]).
   Floating capsule tab bar with a glass lens that glides to the active tab, a glass top bar and,
   on iPad, a floating glass sidebar. Safari cannot refract (no SVG filters in backdrop-filter),
   so the glass is built from blur, saturation, a tint and layered specular highlights. */
:root[data-platform="ios"] {
    /* Native iOS 26 tab bar metrics (iPhone): a 62pt capsule, 20pt from the sides and 20pt above the screen
       edge. --ui-scale (set by the head script on iPhone) cancels Safari's page zoom so the bar keeps its
       native size even when the page itself is shown smaller or larger. */
    --ui-scale: 1;
    --bottomnav-h: calc(62px * var(--ui-scale));
    --tabbar-gap: calc(max(var(--safe-bottom) - 14px, 12px) * var(--ui-scale));
    --tabbar-side: calc(20px * var(--ui-scale));
    --tabbar-pad: calc(4px * var(--ui-scale));
    --glass-tint: rgba(255, 255, 255, .34);
    --glass-tint-strong: rgba(255, 255, 255, .78);
    --glass-edge: rgba(255, 255, 255, .85);
    --glass-rim: rgba(14, 42, 54, .08);
    --glass-shadow: 0 10px 34px rgba(7, 63, 83, .16), 0 2px 8px rgba(7, 63, 83, .08);
    --glass-blur: blur(22px) saturate(1.9) brightness(1.06);
    --lens-tint: rgba(14, 42, 54, .07);
    --glass-sheen: rgba(255, 255, 255, .28);
    --lens-sheen: rgba(255, 255, 255, .35);
    --lens-edge: rgba(255, 255, 255, .55);
    --sidebar-tint: var(--glass-tint-strong);
    --sidebar-sheen: rgba(255, 255, 255, .22);
    --sidebar-active-edge: rgba(255, 255, 255, .5);
}
:root[data-platform="ios"][data-theme="dark"] {
    --glass-tint: rgba(40, 40, 44, .72);
    --glass-tint-strong: rgba(44, 44, 48, .78);
    --glass-edge: rgba(255, 255, 255, .08);
    --glass-rim: rgba(0, 0, 0, .5);
    --glass-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);
    --glass-blur: blur(22px) saturate(1.7) brightness(.92);
    --lens-tint: rgba(0, 0, 0, .38);
    --glass-sheen: rgba(255, 255, 255, .03);
    --lens-sheen: transparent;
    --lens-edge: rgba(255, 255, 255, .06);
    /* Sidebar: a dark, nearly opaque glass instead of a milky panel */
    --sidebar-tint: rgba(22, 22, 24, .9);
    --sidebar-sheen: rgba(255, 255, 255, .025);
    --sidebar-active-edge: rgba(255, 255, 255, .1);
}

/* Shared glass material */
:root[data-platform="ios"] .bottom-nav {
    background:
        linear-gradient(180deg, var(--glass-sheen), transparent 45%),
        var(--glass-tint);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow:
        inset 0 1px 0 var(--glass-edge),
        inset 0 -1px 0 color-mix(in srgb, var(--glass-edge) 40%, transparent),
        inset 0 0 0 .5px var(--glass-edge),
        0 0 0 .5px var(--glass-rim),
        var(--glass-shadow);
}

/* Top bar: no hard edge, content fades out under it like the native scroll-edge effect */
:root[data-platform="ios"] .topbar {
    border-bottom: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%,
                                        color-mix(in srgb, var(--bg) 55%, transparent) 70%,
                                        transparent 100%);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
}

/* Floating capsule tab bar */
:root[data-platform="ios"] .bottom-nav {
    --n: 4; --i: 0;
    inset: auto calc(var(--tabbar-side) + var(--safe-right)) var(--tabbar-gap) calc(var(--tabbar-side) + var(--safe-left));
    max-width: calc(440px * var(--ui-scale)); margin: 0 auto;
    height: var(--bottomnav-h);
    padding: var(--tabbar-pad);
    border: 0; border-radius: var(--radius-pill);
    isolation: isolate;
    transform-origin: 50% 100%;
    transition: transform 420ms var(--ease-spring), height 320ms var(--ease), box-shadow var(--dur);
}
:root[data-platform="ios"] .bottom-nav:has(> a:nth-of-type(5)) { --n: 5; }
:root[data-platform="ios"] .bottom-nav:has(> a:nth-of-type(3):last-of-type) { --n: 3; }
:root[data-platform="ios"] .bottom-nav:has(> a:nth-of-type(2).active) { --i: 1; }
:root[data-platform="ios"] .bottom-nav:has(> a:nth-of-type(3).active) { --i: 2; }
:root[data-platform="ios"] .bottom-nav:has(> a:nth-of-type(4).active) { --i: 3; }
:root[data-platform="ios"] .bottom-nav:has(> a:nth-of-type(5).active) { --i: 4; }
/* Glass "squish" when touched, like the native bar */
:root[data-platform="ios"] .bottom-nav:active { transform: scale(1.025); }

/* The lens: a second, clearer glass drop that glides to the active tab.
   Built from two layers that crossfade: ::after is the resting pill's sheen, ::before the lifted drop's
   sheen. Gradients cannot be interpolated, so only their opacity animates; colour, shadows and scale
   transition directly. Both shadow lists have the same length and inset flags so they morph smoothly. */
:root[data-platform="ios"] .bottom-nav .tab-lens {
    --lens-shadow-rest:
        inset 0 1px 0 var(--lens-edge),
        inset 0 0 0 .5px color-mix(in srgb, var(--lens-edge) 55%, transparent),
        inset 0 0 0 0 transparent,
        inset 0 0 0 0 transparent,
        inset 0 0 0 0 transparent,
        0 0 0 0 transparent;
    display: block; position: absolute; z-index: -1; top: var(--tabbar-pad); bottom: var(--tabbar-pad); left: var(--tabbar-pad);
    width: calc((100% - 2 * var(--tabbar-pad)) / var(--n));
    transform: translateX(var(--lens-pos, calc(var(--i) * 100%))) scale(var(--lens-scale, 1));
    border-radius: var(--radius-pill);
    background-color: var(--lens-tint);
    box-shadow: var(--lens-shadow-rest);
    pointer-events: none;
    /* Settling: the drop shrinks back into the pill while its glass fades into the resting tint.
       It stays above the tabs while it shrinks, then slips behind them before the tint is fully back. */
    transition:
        transform 520ms var(--ease-spring),
        width 320ms var(--ease),
        background-color 340ms var(--ease) 120ms,
        box-shadow 420ms var(--ease) 40ms,
        opacity 260ms var(--ease),
        z-index 0s linear 200ms;
    will-change: transform;
}
:root[data-platform="ios"] .bottom-nav .tab-lens::before,
:root[data-platform="ios"] .bottom-nav .tab-lens::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    transition: opacity 380ms var(--ease) 60ms;
}
:root[data-platform="ios"] .bottom-nav .tab-lens::after {
    background: radial-gradient(120% 90% at 50% 0%, var(--lens-sheen), transparent 60%);
}
:root[data-platform="ios"] .bottom-nav .tab-lens::before {
    background: radial-gradient(120% 70% at 50% 0%, var(--drop-sheen, rgba(255, 255, 255, .22)), transparent 55%);
    opacity: 0;
}
:root[data-platform="ios"] .bottom-nav:not(:has(> a.active)) .tab-lens { opacity: 0; }

/* Touched: the lens lifts into a larger, clear glass drop above the tabs and follows the finger */
:root[data-platform="ios"] .bottom-nav { touch-action: none; -webkit-user-select: none; user-select: none; }
:root[data-platform="ios"] .bottom-nav a { -webkit-user-drag: none; -webkit-touch-callout: none; }
:root[data-platform="ios"] .bottom-nav.is-pressed .tab-lens {
    --lens-scale: 1.14, 1.32;
    z-index: 1; opacity: 1;
    background-color: rgba(255, 255, 255, .05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        inset 0 0 0 1px rgba(255, 255, 255, .28),
        inset 4px 0 8px -4px rgba(90, 200, 255, .55),
        inset -4px 0 8px -4px rgba(255, 120, 220, .45),
        inset 0 -3px 6px -3px rgba(255, 255, 255, .35),
        0 8px 24px rgba(0, 0, 0, .3);
    /* Lifting: quick and immediately above the tabs; also drives the glide to a tapped tab */
    transition:
        transform 300ms var(--ease-spring),
        width 320ms var(--ease),
        background-color 200ms var(--ease),
        box-shadow 220ms var(--ease),
        opacity 160ms var(--ease),
        z-index 0s;
}
:root[data-platform="ios"] .bottom-nav.is-pressed.is-gliding .tab-lens { --lens-scale: 1.4, 1.24; } /* stretched while it travels to a tapped tab */
:root[data-platform="ios"] .bottom-nav.is-pressed .tab-lens::before { opacity: 1; transition-duration: 200ms; transition-delay: 0s; }
:root[data-platform="ios"] .bottom-nav.is-pressed .tab-lens::after { opacity: 0; transition-duration: 200ms; transition-delay: 0s; }
:root[data-platform="ios"][data-theme="dark"] .bottom-nav .tab-lens { --drop-sheen: rgba(255, 255, 255, .07); }
:root[data-platform="ios"][data-theme="dark"] .bottom-nav.is-pressed .tab-lens {
    /* Dark mode: a dark glass drop instead of a milky one, with only a faint rim and colour fringe */
    background-color: rgba(0, 0, 0, .14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        inset 0 0 0 1px rgba(255, 255, 255, .08),
        inset 4px 0 8px -4px rgba(90, 200, 255, .3),
        inset -4px 0 8px -4px rgba(255, 120, 220, .24),
        inset 0 0 0 0 transparent,
        0 8px 24px rgba(0, 0, 0, .55);
}
:root[data-platform="ios"] .bottom-nav.is-tracking .tab-lens { transition: transform 110ms var(--ease), width 320ms var(--ease), background-color 200ms var(--ease), box-shadow 220ms var(--ease), opacity 160ms var(--ease), z-index 0s; }
:root[data-platform="ios"] .bottom-nav.is-pressed:active { transform: none; }
/* The drop magnifies what lies beneath it */
:root[data-platform="ios"] .bottom-nav a .icon,
:root[data-platform="ios"] .bottom-nav a span { transition: transform 220ms var(--ease-spring), opacity 200ms var(--ease), max-height 300ms var(--ease); }
:root[data-platform="ios"] .bottom-nav a.under-lens .icon,
:root[data-platform="ios"] .bottom-nav a.under-lens span { transform: scale(1.12); }

:root[data-platform="ios"] .bottom-nav a {
    border-radius: var(--radius-pill); gap: calc(2px * var(--ui-scale)); font-size: calc(.66rem * var(--ui-scale));
    min-height: calc(var(--touch) * var(--ui-scale)); letter-spacing: .01em;
    color: var(--text); -webkit-tap-highlight-color: transparent;
}
:root[data-platform="ios"] .bottom-nav a .icon { width: calc(25px * var(--ui-scale)); height: calc(25px * var(--ui-scale)); }
:root[data-platform="ios"] .bottom-nav a.active { color: var(--text); }
:root[data-platform="ios"] .bottom-nav .badge-dot { top: calc(8px * var(--ui-scale)); right: calc(50% - 18px * var(--ui-scale)); }
:root[data-platform="ios"] .bottom-nav a.active::before { display: none; }
:root[data-platform="ios"] .bottom-nav a:active .icon { transform: scale(.9); }
:root[data-platform="ios"] .bottom-nav a span { transition: opacity 200ms var(--ease), max-height 300ms var(--ease); max-height: 1.2em; }

/* Minimised while scrolling down (tabBarMinimizeBehavior) */
:root[data-platform="ios"][data-tabbar="compact"] .bottom-nav { height: calc(48px * var(--ui-scale)); transform: scale(.92); }
:root[data-platform="ios"][data-tabbar="compact"] .bottom-nav a span { opacity: 0; max-height: 0; }

:root[data-platform="ios"] .fab {
    bottom: calc(var(--bottomnav-h) + var(--tabbar-gap) + var(--space-3));
    border-radius: var(--radius-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--glass-shadow);
}

/* Dashboard "Für mich / Familie": a glass pill next to the plus button, above the floating tab bar */
@media (max-width: 1023.98px) {
    :root[data-platform="ios"] .scope-dock { bottom: calc(var(--bottomnav-h) + var(--tabbar-gap) + var(--space-3) + 3px); }
    :root[data-platform="ios"] .scope-dock .scope-toggle {
        border: 0;
        background: linear-gradient(180deg, var(--glass-sheen), transparent 45%), var(--glass-tint);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 .5px var(--glass-edge), 0 0 0 .5px var(--glass-rim), var(--glass-shadow);
    }
}

/* iPad (sidebar width): the sidebar becomes a floating glass panel */
@media (min-width: 1024px) {
    :root[data-platform="ios"] .sidebar {
        inset: calc(var(--space-3) + var(--safe-top)) auto var(--space-3) calc(var(--space-3) + var(--safe-left));
        width: calc(var(--sidebar-w) - var(--space-3));
        border: 0; border-radius: var(--radius-xl);
        background: linear-gradient(180deg, var(--sidebar-sheen), transparent 30%), var(--sidebar-tint);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 .5px var(--glass-edge), 0 0 0 .5px var(--glass-rim), var(--glass-shadow);
    }
    :root[data-platform="ios"] .sidebar a.nav-item { border-radius: var(--radius-pill); }
    :root[data-platform="ios"] .sidebar a.nav-item.active {
        background: var(--lens-tint);
        box-shadow: inset 0 1px 0 var(--sidebar-active-edge), inset 0 0 0 .5px color-mix(in srgb, var(--sidebar-active-edge) 50%, transparent);
    }
    :root[data-platform="ios"] .fab { bottom: calc(var(--space-6) + var(--safe-bottom)); }
}

/* Accessibility: "Transparenz reduzieren" / "Bewegung reduzieren" */
@media (prefers-reduced-transparency: reduce) {
    :root[data-platform="ios"] .bottom-nav,
    :root[data-platform="ios"] .sidebar { background: var(--bg-elevated); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    :root[data-platform="ios"] .bottom-nav,
    :root[data-platform="ios"] .bottom-nav .tab-lens,
    :root[data-platform="ios"] .bottom-nav .tab-lens::before,
    :root[data-platform="ios"] .bottom-nav .tab-lens::after { transition: none; }
}