/* ============================================================================
 * index.css
 * ----------------------------------------------------------------------------
 * App shell / chrome for /response/index.php. Extracted from the inline
 * <style> block; restyled in Liquid Glass.
 *
 * What's in here:
 *   - Font-size root rules (moved from <style id="fn-fontsize-rules">)
 *   - Top chrome wrapper, hero header, hero ID pills, hamburger menu
 *   - Status bar (with new response-count chips on the right half)
 *   - Pull-to-refresh circle
 *   - Tabbar (frosted glass, strongest blur — most-seen surface)
 *   - Page host & page transitions
 *   - Off-canvas drawer (frosted glass strong, modal-like)
 *   - Desktop boxed-layout media query
 *   - Mobile correction media queries
 *
 * Token sources (read-only — defined in liquid-glass.css):
 *   --fn-* : brand / surface / text
 *   --lg-* : glass material (surface, edge, divider, blur, shadow, radius)
 *
 * Load AFTER liquid-glass.css.
 * ========================================================================= */


/* ─────────────────────────────────────────────────────────────────────────
 * Font-size rules (root). Settings JS toggles data-fn-fontsize on <html>;
 * we never modify these via JS, so they live here permanently.
 * ──────────────────────────────────────────────────────────────────────── */
html { font-size: 18.4px !important; }
html[data-fn-fontsize="standard"] { font-size: 18.4px !important; }
html[data-fn-fontsize="large"]    { font-size: 20px !important; }
html[data-fn-fontsize="xlarge"]   { font-size: 22px !important; }
body { font-size: 1rem !important; }


/* ─────────────────────────────────────────────────────────────────────────
 * Top chrome wrapper — pins the hero + status bar to the top of the
 * viewport. The hero stays a solid brand colour (Liquid Glass keeps hero
 * surfaces solid for identity); only the status bar below uses glass.
 * ──────────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────
 * Top chrome wrapper — floating island matching the tabbar.
 *
 *   - Detached from screen edges with margin all around (0.65rem sides,
 *     0.45rem from the safe-area). Stays BELOW the iOS status bar area
 *     so time/wifi/battery render normally over the body backdrop.
 *   - Hero gets ALL FOUR corners at --lg-r-md (1rem). Standard floating-
 *     island roundness, symmetric with the tabbar at the bottom.
 *   - Status bar sits INSIDE the wrapper, below the hero, transparent
 *     — badge + chips float as individual glass tiles.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-top-chrome {
    position: fixed;
    top:   calc(var(--fn-safe-top) + 0.45rem);
    left:  0.3rem;
    right: 0.3rem;
    z-index: 50;
}

.fn-hero {
    background: var(--fn-header-bg);
    color: #fff;
    /* All four corners at the same moderate radius — symmetric with
       the tabbar's floating-island feel. */
    border-radius: var(--lg-r-md);
    box-shadow: 0 14px 36px -10px rgba(0,0,0,.28),
                0 4px 12px -4px rgba(0,0,0,.14);
    overflow: hidden;
    transition: background .25s ease;
}

.fn-hero-inner {
    /* Horizontal padding 0.55rem — bell icon (left) and ff_no/station
       badge (right) sit equally inset from the chrome edges. Tuned
       up from 0.35rem on user feedback: the button + station were
       too close to the chrome edge before. */
    padding: .85rem .55rem 1rem;
    display: flex;
    flex-direction: column;
}

.fn-hero-row1 {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.fn-hero-icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .5rem;
    background: rgba(255,255,255,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: filter .12s ease, transform .1s ease;
}
.fn-hero-icon:active {
    transform: scale(.92);
    filter: brightness(.85);
}

.fn-hero-brand-wrap {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.fn-hero-brand {
    font-weight: 800;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: -.01em;
}
.fn-hero-subtitle {
    font-size: .74rem;
    opacity: .9;
    line-height: 1;
    margin-top: .22rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fn-hero-id {
    margin-left: auto;
    flex-shrink: 0;
    background: rgba(255,255,255,.16);
    border-radius: var(--lg-r-sm);
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    line-height: 1;
}
.fn-hero-id-cell {
    padding: .42rem .65rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 700;
    font-size: .8rem;
    color: #fff;
    white-space: nowrap;
}
.fn-hero-id-cell + .fn-hero-id-cell {
    border-left: 1px solid rgba(255,255,255,.18);
}
.fn-hero-id-cell .mdi {
    font-size: .95rem;
    opacity: .85;
}

@media (max-width: 380px) {
    .fn-hero-subtitle {
        display: none;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
 * STATUS BAR removed — the "Awaiting response" badge and per-type count
 * chips that used to live in a strip below the hero are now rendered
 * inside each call card (see .fn-call-myresp in home.css). The hero is
 * the only thing in .fn-top-chrome now, which is why --fn-top-chrome-h
 * dropped from 11rem to 5rem in liquid-glass.css.
 * ──────────────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────────
 * Pull-to-refresh circle — floats below the chrome on pull.
 * Strong frosted glass so it stands out against any page content.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-ptr-circle {
    position: fixed;
    top: calc(var(--fn-top-chrome-h) + .25rem);
    left: 50%;
    z-index: 60;
    width: 3.5rem;
    height: 3.5rem;
    margin-left: -1.75rem;
    border-radius: 50%;
    background-color: var(--lg-surface-strong);
    backdrop-filter: var(--lg-blur-strong);
    -webkit-backdrop-filter: var(--lg-blur-strong);
    border: 1px solid var(--lg-edge-strong);
    box-shadow: var(--lg-shadow-strong);
    color: var(--fn-text);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: translateY(-5rem) scale(.85);
    opacity: 0;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.fn-ptr-circle.armed { transition: none; }
.fn-ptr-circle.refreshing {
    transform: translateY(.35rem) scale(1);
    opacity: 1;
}
.fn-ptr-circle .mdi {
    font-size: 1.7rem;
    transition: transform .25s ease, opacity .2s ease;
}
.fn-ptr-circle.ready .mdi.fn-ptr-arrow {
    transform: rotate(180deg);
    color: #198754;
}
.fn-ptr-circle .fn-ptr-spin {
    display: none;
    animation: fnPtrSpin .9s linear infinite;
}
.fn-ptr-circle.refreshing .fn-ptr-arrow { display: none; }
.fn-ptr-circle.refreshing .fn-ptr-spin  { display: inline-block; }

@keyframes fnPtrSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* ─────────────────────────────────────────────────────────────────────────
 * TABBAR — floating glass island
 *
 * Treatment:
 *   - Detached from screen edges (small margin all around) so it reads
 *     as a floating shelf rather than a pinned bar.
 *   - Fully rounded corners, strong frosted glass, top-edge specular
 *     highlight, layered drop shadow underneath.
 *   - Active tab gets a soft glass pill BEHIND its icon+label. Pill is
 *     always rendered (every tab has a ::before) but starts at opacity 0;
 *     adding .active fades it in. This means tab-to-tab transitions
 *     animate smoothly instead of jumping.
 *   - Replaces the old 3px line-on-top indicator entirely.
 *
 * Mobile-only — desktop layout still has `.fn-tabbar { display: none }`
 * in the @media (hover: hover) block further down.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-tabbar {
    position: fixed;
    left:   0.65rem;
    right:  0.65rem;
    bottom: calc(var(--fn-safe-bottom) + 0.45rem);
    z-index: 100;
    height: var(--fn-tabbar-h);

    background-color: var(--lg-tabbar-surface);
    backdrop-filter: var(--lg-blur-strong);
    -webkit-backdrop-filter: var(--lg-blur-strong);
    border: 1px solid var(--lg-edge);
    /* All four corners at the same moderate-pill radius. */
    border-radius: 1.75rem;
    box-shadow: var(--lg-tabbar-shadow);
    overflow: hidden;
    isolation: isolate;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    transition: background-color .25s ease, border-color .25s ease;
}

/* Removed the ::after specular highlight — in dark mode it created a
   "reflection" line at the top of the tabbar that looked artificial.
   Light mode also reads cleaner without it now that the surface is
   more translucent and the body backdrop provides natural variation. */

.fn-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    background: transparent;
    border: 0;
    color: var(--fn-tabbar-text);
    cursor: pointer;
    padding: .4rem .25rem;
    font-family: inherit;
    transition: color .18s var(--lg-ease), transform .12s var(--lg-ease);
    position: relative;
    z-index: 1;
}
.fn-tab:active { transform: scale(.95); }

/* Active pill — rendered on every tab, faded in only when .active.
   Inset slightly inside the tab cell so adjacent active pills wouldn't
   touch even if both somehow rendered. Soft inner highlight + soft
   shadow underneath sells the "small floating chip" feel. */
.fn-tab::before {
    content: '';
    position: absolute;
    top:    0.32rem;
    bottom: 0.32rem;
    left:   0.28rem;
    right:  0.28rem;
    /* Radius chosen so the pill's outer corners curve concentrically
       with the tabbar's outer corners. Tabbar = 1.75rem; pill is
       inset ~0.30rem from the tab edge; concentric → 1.75 - 0.30
       = 1.45rem. Makes the active tab read as "nested inside" the
       tabbar shape rather than a smaller pill stuck in a bigger one. */
    border-radius: 1.45rem;
    background-color: var(--lg-tabbar-pill-bg);
    box-shadow: var(--lg-tabbar-pill-shadow);
    opacity: 0;
    transform: scale(0.92);
    transition: opacity .22s var(--lg-ease),
                transform .28s var(--lg-spring);
    z-index: -1;
    pointer-events: none;
}
.fn-tab.active::before {
    opacity: 1;
    transform: scale(1);
}
.fn-tab.active {
    color: var(--lg-tabbar-pill-fg);
}

.fn-tab .mdi {
    /* Was 1.7rem. Shrunk to 1.5rem on user feedback that the active
       pill's content felt too close to the pill edges, especially
       on dark tabbar colours where the pill background is most
       visible. Smaller icon = more breathing inside the pill. */
    font-size: 1.5rem;
    line-height: 1;
    transition: transform .18s var(--lg-ease);
}
.fn-tab.active .mdi {
    transform: scale(1.05);
}
.fn-tab .label {
    /* Was 0.72rem. Shrunk to 0.65rem so the wider labels ("Preplan",
       "Settings") have visible inset from pill edges. */
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
}


/* ─────────────────────────────────────────────────────────────────────────
 * Page host & per-page transitions
 * ──────────────────────────────────────────────────────────────────────── */
.fn-page-host {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: calc(var(--fn-safe-top) + 0.45rem + var(--fn-top-chrome-h) + 0.5rem);
    padding-bottom: calc(var(--fn-tabbar-h) + var(--fn-safe-bottom) + 1.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.fn-page {
    display: none;
    opacity: 0;
    transition: opacity .25s ease-in-out;
}
.fn-page.active {
    display: block;
    opacity: 1;
}
.fn-page.fn-page--full.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--fn-safe-top) - var(--fn-top-chrome-h) - var(--fn-tabbar-h) - var(--fn-safe-bottom) - 2.4rem);
    min-height: 20rem;
}
.fn-page-inner {
    /* Padding-x 0.85rem matches:
       (a) the hero content position (chrome left 0.3rem + hero-inner
           pad 0.55rem = 0.85rem from screen)
       (b) the address stage's .fn-addr-stage horizontal padding
       So home/crew/preplan/settings content sits at exactly the same
       horizontal alignment as everything else.

       max-width REMOVED. Was 640px which constrained content to ~63%
       of an iPad screen — the address page (page--full) skips
       page-inner and fills the full page-host width, making it visibly
       wider than the others. Letting page-inner inherit page-host's
       natural width brings parity.

       width: 100% + box-sizing: border-box is defensive — when this
       element is also a flex item with display: flex (as on the preplan
       root), Safari iPadOS was resolving the cross-axis width to
       content-size instead of stretching to fill, leaving content
       centred narrow. Explicit width forces full-width regardless of
       flex resolution. */
    padding: .2rem .85rem;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.fn-page-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--fn-text-muted);
}
.fn-page-loading .mdi {
    font-size: 2rem;
    opacity: .4;
    margin-bottom: .4rem;
}


/* ─────────────────────────────────────────────────────────────────────────
 * Hamburger button — only visible on desktop layout.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-hero-menu-btn {
    display: none;
    background: rgba(255, 255, 255, .18);
    border: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .5rem;
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    padding: 0;
    transition: transform .1s ease, background .15s ease;
}
.fn-hero-menu-btn .mdi { line-height: 1; }
.fn-hero-menu-btn:hover  { background: rgba(255, 255, 255, .25); }
.fn-hero-menu-btn:active { transform: scale(.95); }


/* ─────────────────────────────────────────────────────────────────────────
 * Off-canvas drawer — sheet-like, strong frosted glass.
 * ──────────────────────────────────────────────────────────────────────── */
.fn-offcanvas[hidden] { display: none; }
.fn-offcanvas {
    position: fixed;
    inset: 0;
    z-index: 200;
}
.fn-offcanvas-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .2s ease;
}
.fn-offcanvas.is-open .fn-offcanvas-backdrop { opacity: 1; }

.fn-offcanvas-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 80vw;
    background-color: var(--lg-surface-strong);
    backdrop-filter: var(--lg-blur-strong);
    -webkit-backdrop-filter: var(--lg-blur-strong);
    border-right: 1px solid var(--lg-edge);
    box-shadow: var(--lg-shadow-strong);
    transform: translateX(-100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
}
.fn-offcanvas.is-open .fn-offcanvas-panel {
    transform: translateX(0);
}
.fn-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 1rem 1.25rem;
    border-bottom: 1px solid var(--lg-divider);
}
.fn-offcanvas-title {
    font-weight: 800;
    color: var(--fn-text);
    font-size: 1.05rem;
    letter-spacing: .01em;
}
.fn-offcanvas-close {
    background: transparent;
    border: 0;
    padding: .25rem;
    color: var(--fn-text);
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .4rem;
    transition: background .15s ease;
}
.fn-offcanvas-close:hover { background: var(--lg-hover); }

.fn-offcanvas-nav {
    display: flex;
    flex-direction: column;
    padding: .5rem;
    gap: .15rem;
    overflow-y: auto;
}
.fn-offcanvas-link {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .75rem .9rem;
    border-radius: var(--lg-r-sm);
    border: 0;
    background: transparent;
    color: var(--fn-text);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    text-align: left;
    transition: background .15s ease, color .15s ease;
}
.fn-offcanvas-link:hover  { background: var(--lg-hover); }
.fn-offcanvas-link.active {
    background: var(--fn-brand);
    color: #fff;
}
.fn-offcanvas-link .mdi {
    font-size: 1.3rem;
    flex-shrink: 0;
    line-height: 1;
}


/* ─────────────────────────────────────────────────────────────────────────
 * DESKTOP / WIDE-VIEWPORT — boxed layout for mouse-primary devices.
 * Hides the tabbar, shows the hamburger, gives the chrome a contained
 * frame with a soft drop shadow.
 * ──────────────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    :root {
        --fn-tabbar-h: 0px;
        --fn-safe-bottom: 0px;
    }

    html, body {
        position: static;
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: auto;
    }

    body {
        /* On desktop the body backdrop reads better with a slightly
           deeper base — same gradient pools, slightly more saturation. */
        background-color: #e9edf3;
    }

    .fn-hero-menu-btn { display: inline-flex; }

    .fn-top-chrome {
        position: sticky;
        top: 1rem;
        left: auto;
        right: auto;
        width: calc(100% - 2rem);
        max-width: 1180px;
        margin: 1rem auto 0 auto;
        border-radius: var(--lg-r-md) var(--lg-r-md) 0 0;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
        overflow: hidden;
    }
    .fn-hero { box-shadow: none; }
    .fn-hero-inner { padding: 1.2rem .55rem; }

    .fn-hero-icon,
    .fn-hero-menu-btn {
        width: 1.9rem;
        height: 1.9rem;
        border-radius: .45rem;
        font-size: 1rem;
    }
    .fn-hero-brand { font-size: 1rem; }
    .fn-hero-subtitle { display: none; }
    .fn-hero-id-cell {
        padding: .35rem .55rem;
        font-size: .76rem;
    }

    .fn-ptr-circle { display: none; }
    .fn-tabbar { display: none; }

    .fn-page-host {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: calc(100% - 2rem);
        max-width: 1180px;
        transform: none;
        margin: 0 auto 1rem auto;

        background-color: var(--lg-surface);
        backdrop-filter: var(--lg-blur);
        -webkit-backdrop-filter: var(--lg-blur);
        border: 1px solid var(--lg-edge);
        border-top: 0;
        border-radius: 0 0 var(--lg-r-md) var(--lg-r-md);
        box-shadow: var(--lg-shadow-strong);

        padding-top: 1rem;
        padding-bottom: 1rem;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: auto;
        min-height: calc(100vh - var(--fn-top-chrome-h) - 2rem);
    }
    .fn-page-inner {
        /* Was max-width: 1100px which made home/crew/preplan/settings
           visibly narrower than the address page (which uses page--full
           and gets the full page-host width). Now page-inner matches
           page-host (1180px max). Padding tightened from 1rem to 0.85rem
           so the side breathing matches the address stage's
           .fn-addr-stage horizontal padding (.85rem). */
        max-width: 100%;
        padding: 1rem .85rem;
        margin: 0 auto;
    }
    .fn-page.fn-page--full.active {
        height: calc(100vh - var(--fn-top-chrome-h) - 3rem);
        min-height: 28rem;
    }

    .fn-offcanvas {
        pointer-events: none;
    }
    .fn-offcanvas.is-open {
        pointer-events: auto;
    }
    .fn-offcanvas-backdrop {
        background: rgba(49, 58, 70, .25);
    }
    .fn-offcanvas-panel {
        position: absolute;
        top: calc(var(--fn-top-chrome-h) + 1.5rem);
        left: calc((100vw - min(1180px, calc(100vw - 2rem))) / 2);
        bottom: auto;
        width: 280px;
        max-width: calc(100vw - 2rem);
        border-radius: var(--lg-r-lg);
        overflow: hidden;
        box-shadow: 0 14px 35px rgba(0, 0, 0, .18);
        transform: translateY(-.75rem);
        opacity: 0;
        transition: transform .2s ease, opacity .2s ease;
    }
    .fn-offcanvas.is-open .fn-offcanvas-panel {
        transform: translateY(0);
        opacity: 1;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
 * MOBILE — touch-primary corrections. Restores fixed app-shell + scrollable
 * page-host so the chrome stays put while content scrolls.
 * ──────────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .fn-page-host:has(#fn-page-home.active) {
        overflow-y: hidden;
    }

    .fn-page-host {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        max-height: none;
        padding-top: calc(var(--fn-safe-top) + 0.45rem + var(--fn-top-chrome-h) + 0.5rem);
        padding-bottom: calc(var(--fn-tabbar-h) + var(--fn-safe-bottom) + 1.5rem);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        box-sizing: border-box;
    }
    .fn-page-inner { padding-bottom: 0.5rem; }
    #fn-page-settings { padding-bottom: 2.5rem; }

    .fn-page.fn-page--full.active {
        height: calc(100dvh - var(--fn-safe-top) - var(--fn-top-chrome-h) - var(--fn-tabbar-h) - var(--fn-safe-bottom) - 2.4rem);
    }
}
