/* ==================================================================
   iOS look (2026-10-09) — Cubibur on iPhone / iPad.
   Everything here is scoped to html.ios-ui, which pwa-head.php sets
   before first paint on Apple touch devices (once site_settings
   ios_ui = 'on'), or anywhere with the ?ios=1 preview cookie.
   Android and computers never get this class, so nothing changes there.

   What it does — the things that make a site feel at home on iPhone:
     · San Francisco type (ui-rounded for headings, close to Baloo's warmth)
     · frosted, translucent top bar + tab bar with hairline separators
     · tab bar with labels under the icons, 49pt + home-indicator inset
     · alerts that look like iOS alerts; menus like iOS context menus
     · the sign-in popup as a bottom sheet with a grabber
     · grouped inset lists in Settings, hairline row separators
     · press = dim (no grey tap flash), 16px inputs (no zoom on focus)
   ================================================================== */

html.ios-ui {
    --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    --font-display: ui-rounded, -apple-system, "SF Pro Rounded", "SF Pro Display", system-ui, sans-serif;
    --ios-bar: color-mix(in srgb, var(--bg-page) 72%, transparent);
    --ios-sheet: color-mix(in srgb, var(--bg-modal) 86%, transparent);
    --ios-sep: rgba(255, 255, 255, .13);
    --ios-tint: var(--brand-light);
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}
html.ios-ui[data-theme="light"] { --ios-sep: rgba(60, 60, 67, .2); --ios-tint: var(--link-color); }

html.ios-ui body {
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.008em;
}

/* No zoom-on-focus: Safari zooms any field under 16px. */
html.ios-ui input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.ios-ui textarea,
html.ios-ui select { font-size: max(16px, 1em) !important; }

/* Press feedback is a quick dim, the way iOS controls respond. */
html.ios-ui a, html.ios-ui button, html.ios-ui [role="button"] { -webkit-touch-callout: none; }
html.ios-ui button:active:not(:disabled),
html.ios-ui .pfp-row:active,
html.ios-ui .cbn-i:active { opacity: .5; transition: opacity 0s; }
html.ios-ui button, html.ios-ui .pfp-row, html.ios-ui .cbn-i { transition: opacity .25s ease; }

/* ── Top bar: frosted glass, hairline, clears the notch ───────── */
html.ios-ui #mainNavbar {
    background: var(--ios-bar) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom: .5px solid var(--ios-sep) !important;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    box-sizing: content-box;
}
html.ios-ui #mainNavbar::before { display: none !important; }

/* ── Tab bar: frosted, labelled, 49pt like UITabBar ───────────── */
@media (max-width: 820px) {
    html.ios-ui .cca-botnav {
        height: calc(49px + env(safe-area-inset-bottom, 0px));
        background: var(--ios-bar);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-top: .5px solid var(--ios-sep);
        align-items: flex-start;
        padding-top: 2px;
    }
    html.ios-ui .cca-botnav .cbn-i {
        display: flex !important; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px; height: 45px; min-height: 0 !important; padding: 0 !important; color: var(--text-faint);
    }
    /* every tab is the same flat icon on iOS (no raised circle) */
    html.ios-ui .cca-botnav .cbn-ic { background: none !important; padding: 0 !important; width: auto !important; height: auto !important; box-shadow: none !important; color: inherit !important; }
    html.ios-ui .cca-botnav .cbn-i svg { width: 25px; height: 25px; }
    html.ios-ui .cca-botnav .cbn-i::after {
        content: attr(aria-label);
        font: 500 10px/1.1 var(--font-ui);
        letter-spacing: .01em;
    }
    html.ios-ui .cca-botnav .cbn-i.is-on { color: var(--ios-tint); }
    html.ios-ui .cca-botnav .cbn-i:active { transform: none; }
    html.ios-ui body:has(.cca-botnav):not(.watch-page):not(.movie-stream-page):not(.ms-cinema-on):not(.tv-body):not(.rd-body):not(.museum-body):not(.anime-page) {
        padding-bottom: calc(49px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── Alerts (cca-dialogs.js): the iOS UIAlertController look ──── */
html.ios-ui .cca-dlg-overlay { background: rgba(0, 0, 0, .4) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.ios-ui .cca-dlg {
    max-width: 270px !important;
    padding: 19px 0 0 !important;
    border-radius: 14px !important;
    border: 0 !important;
    background: var(--ios-sheet) !important;
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
    box-shadow: none !important;
    text-align: center;
    transform: scale(1.12) !important;
    transition: transform .2s ease !important;
    overflow: hidden;
}
html.ios-ui .cca-dlg-overlay.show .cca-dlg { transform: none !important; }
html.ios-ui .cca-dlg-title { font: 600 17px/1.3 var(--font-ui) !important; margin: 0 16px 2px !important; }
html.ios-ui .cca-dlg-msg { font-size: 13px !important; line-height: 1.38 !important; margin: 0 16px !important; color: var(--text-primary) !important; }
html.ios-ui .cca-dlg-input { width: calc(100% - 32px) !important; margin: 14px 16px 0 !important; border-radius: 7px !important; padding: 7px 8px !important; }
html.ios-ui .cca-dlg-actions {
    display: flex !important; flex-direction: row !important; gap: 0 !important;
    margin: 19px 0 0 !important; border-top: .5px solid var(--ios-sep);
}
html.ios-ui .cca-dlg-btn {
    flex: 1; margin: 0 !important; padding: 11px 8px !important;
    border: 0 !important; border-radius: 0 !important;
    background: transparent !important; color: var(--ios-tint) !important;
    font: 400 17px var(--font-ui) !important;
}
html.ios-ui .cca-dlg-btn + .cca-dlg-btn { border-left: .5px solid var(--ios-sep) !important; }
html.ios-ui .cca-dlg-ok { font-weight: 600 !important; }

/* ── Profile menu: an iOS context menu ────────────────────────── */
html.ios-ui .pfp-menu {
    background: var(--ios-sheet) !important;
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
    border: 0 !important;
    border-radius: 13px !important;
    padding: 0 !important;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45) !important;
}
html.ios-ui .pfp-menu .pfp-menu-item { border-radius: 0 !important; padding-top: 11px; padding-bottom: 11px; font: 400 16px var(--font-ui); }
html.ios-ui .pfp-menu .pfp-menu-item + .pfp-menu-item { border-top: .5px solid var(--ios-sep); }

/* ── Sign-in popup: a bottom sheet with a grabber on phones ───── */
@media (max-width: 820px) {
    html.ios-ui .ap-overlay.active { align-items: flex-end !important; padding: 0 !important; }
    html.ios-ui .ap-overlay .ap-card {
        width: 100% !important; max-width: none !important;
        margin: 0 !important;
        border-radius: 14px 14px 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: ios-sheet-up .38s cubic-bezier(.2, .9, .3, 1) both;
        position: relative;
    }
    html.ios-ui .ap-overlay .ap-card::before {
        content: ""; position: absolute; z-index: 5; top: 6px; left: 50%;
        width: 36px; height: 5px; margin-left: -18px; border-radius: 3px;
        background: rgba(255, 255, 255, .35);
    }
}
@keyframes ios-sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* ── Settings: grouped inset lists ────────────────────────────── */
html.ios-ui .set-card {
    border: 0 !important; box-shadow: none !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
}
html.ios-ui .set-card .pfp-row,
html.ios-ui .set-card .set-tog { min-height: 44px; padding-top: 10px !important; padding-bottom: 10px !important; }
html.ios-ui .set-card .pfp-row + .pfp-row,
html.ios-ui .set-card .set-tog + .set-tog,
html.ios-ui .set-card .set-tog + .pfp-group,
html.ios-ui .set-card .pfp-group + .pfp-group { border-top: .5px solid var(--ios-sep) !important; margin-top: 0 !important; }
html.ios-ui .set-card-head h2 { font: 400 13px var(--font-ui); text-transform: uppercase; letter-spacing: .02em; color: var(--text-muted); }
/* the iOS switch: 51×31, knob 27 */
html.ios-ui .set-switch { width: 51px !important; height: 31px !important; }
html.ios-ui .set-switch-knob { width: 27px !important; height: 27px !important; top: 2px !important; left: 2px !important; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 3px 1px rgba(0, 0, 0, .06) !important; }
html.ios-ui .set-switch.is-on .set-switch-knob { transform: translateX(20px) !important; }

/* ── Sheets & drawers glide; lists scroll with momentum ───────── */
html.ios-ui #sidebar { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
html.ios-ui .wr-sheet, html.ios-ui .ibx { border-radius: 14px !important; }

@media (prefers-reduced-motion: reduce) {
    html.ios-ui .ap-overlay .ap-card { animation: none; }
    html.ios-ui .cca-dlg { transition: none !important; }
}

/* ==================================================================
   Phone header E + home-screen menu (ios-menu.php) — 2026-10-09
   Header E: the "cubibur" wordmark on the left, search + bell on the
   right. No ☰ (the menu is a swipe), no messages / avatar / create
   (they live in the tab bar). Guests keep the Sign in pill.
   ================================================================== */
@media (max-width: 820px) {
    html.ios-ui #menuBtn,
    html.ios-ui #navSearchBar,
    html.ios-ui #navCreateBtn,
    html.ios-ui #navMsgBtn,
    html.ios-ui #pfpDd,
    html.ios-ui #navSectionName,
    html.ios-ui .brand-mark-glyph { display: none !important; }
    html.ios-ui .brand-mark-wordmark { display: block !important; height: 20px !important; width: auto !important; }
    html.ios-ui #navLogo { margin-right: auto; }
    html.ios-ui #navSearchBtn { display: grid !important; place-items: center; width: 38px; height: 38px; color: var(--text-heading); background: none; border: 0; }
    html.ios-ui #navSearchBtn svg, html.ios-ui #navBell svg { width: 22px; height: 22px; }
    html.ios-ui #navBell { width: 38px; height: 38px; background: none !important; border: 0 !important; color: var(--text-heading); }

    /* ── the home-screen menu ── */
    html.ios-ui .iosm {
        display: block; position: fixed; inset: 0; z-index: 1150; --p: 0;
        transform: translateX(calc((var(--p) - 1) * 100%));
        transition: transform .38s cubic-bezier(.2, .9, .3, 1), translate .3s cubic-bezier(.2, .9, .3, 1);
        background: linear-gradient(170deg, #120a22 0%, #0b0714 100%);
        padding-top: env(safe-area-inset-top, 0px);
        overflow: hidden; touch-action: pan-x;
        box-shadow: 10px 0 40px rgba(0, 0, 0, .5);
    }
    html.ios-ui .iosm-wall { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
    html.ios-ui .iosm-done {
        position: absolute; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 14px;
        border: 0; border-radius: 999px; padding: 6px 14px; font: 600 14px var(--font-ui); color: #fff;
        background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    }
    html.ios-ui .iosm-pages {
        position: absolute; z-index: 2; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 54px); bottom: calc(126px + env(safe-area-inset-bottom, 0px));
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain;
    }
    html.ios-ui .iosm-pages::-webkit-scrollbar { display: none; }
    html.ios-ui .iosm-pg { flex: 0 0 100%; box-sizing: border-box; padding: 6px 18px; scroll-snap-align: start; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 92px; align-content: start; }
    html.ios-ui .iosm-ap { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; color: #fff; }
    html.ios-ui .iosm-i {
        width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; color: #fff;
        background: linear-gradient(160deg, color-mix(in srgb, var(--t) 85%, #fff), var(--t) 45%, color-mix(in srgb, var(--t) 70%, #000));
        box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .35), 0 4px 12px -4px rgba(0, 0, 0, .65);
        font: 800 26px var(--font-display); font-style: normal;
    }
    html.ios-ui .iosm-i.t-c { --t: #8B5CF6; } html.ios-ui .iosm-i.t-w { --t: #5E6BC4; } html.ios-ui .iosm-i.t-a { --t: #B5556B; }
    html.ios-ui .iosm-i.t-l { --t: #E2B03A; color: #1a1205; } html.ios-ui .iosm-i.t-n { --t: #FDC117; color: #1a1205; } html.ios-ui .iosm-i.t-y { --t: #4A3A6B; }
    html.ios-ui .iosm-i.t-q { background: transparent; box-shadow: none; border: 2px dashed rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .6); }
    html.ios-ui .iosm-ap b { font: 500 11.5px var(--font-ui); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); max-width: 78px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.ios-ui .iosm-ap.is-on .iosm-i { box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .35), 0 0 0 2px var(--bg-page), 0 0 0 4px var(--brand-yellow); }
    html.ios-ui .iosm-ap:active .iosm-i { filter: brightness(.7); }
    html.ios-ui .iosm-dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(108px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 7px; justify-content: center; }
    html.ios-ui .iosm-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
    html.ios-ui .iosm-dots i.on { background: #fff; }
    html.ios-ui .iosm-dock {
        position: absolute; z-index: 2; left: 10px; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); height: 88px; border-radius: 30px;
        display: flex; justify-content: space-around; align-items: center;
        background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
        box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .25);
    }
    html.ios-ui.iosm-open, html.ios-ui.iosm-open body { overflow: hidden !important; }

    /* the glossy edge handle — the only hint the menu is there */
    html.ios-ui .iosm-edge {
        display: block; position: fixed; z-index: 1140; left: 0; top: 50%; width: 22px; height: 76px; margin-top: -38px;
        border: 0; padding: 0; background: none; opacity: calc(1 - var(--iosm-p, 0));
    }
    html.ios-ui .iosm-edge span { position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(221, 177, 249, .35)); opacity: .6; }
    html.ios-ui[data-theme="light"] .iosm-edge span { background: linear-gradient(180deg, rgba(109, 53, 184, .5), rgba(109, 53, 184, .25)); }
    html.ios-ui body.watch-page ~ .iosm-edge, html.ios-ui .iosm-open .iosm-edge { display: none; }
    html.ios-ui .iosm-hint:not([hidden]) {
        display: block; position: fixed; z-index: 1141; left: 18px; top: 50%; margin-top: -18px; padding: 9px 14px; border-radius: 999px;
        font: 600 13.5px var(--font-ui); color: #fff; background: var(--ios-sheet); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
        box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6); animation: iosm-hint 1.6s ease-in-out infinite;
    }
    @keyframes iosm-hint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
}
@media (prefers-reduced-motion: reduce) { html.ios-ui .iosm { transition: none; } html.ios-ui .iosm-hint { animation: none !important; } }