/**
 * New Life Daily — the light nav, behind NLD_LIGHT_NAV.
 *
 * Loaded only when that surface is on, and every rule sits under
 * `body.light-nav` so it inherits nothing when it is off. It overrides the
 * forest `.nav` rules in nld.css by being later in the cascade and one class
 * more specific — not by !important, which would make the next surface harder
 * to reason about than this one.
 */

body.light-nav .nav.nav-light {
    --nl-ink: #16333b;
    --nl-idle: #93a9af;
    --nl-teal: #1d9c84;
    --nl-hairline: rgba(22, 51, 59, 0.07);

    /* DOCKED to the bottom edge, not floating above it. Paul's call, and the
       mockup's shape. Two reasons:

       A target at the screen edge is effectively infinitely deep — a thumb can
       be slammed down without aiming, and every pixel below the bar still hits
       it. Floated 18px up, that same slam lands on nothing. That gap is also
       live page: a tap meant for the bar can reach whatever is behind it.

       And clearance becomes one number — the bar's height — rather than height
       plus offset plus safe-area, computed per screen.

       NOT because the float was clipping content. That was checked and it is
       not true: on a short viewport the Wellspring's composer and 988 line sit
       below the fold un-scrolled, but there are ~364px of scroll and they come
       fully clear. Content below the fold is not content behind the bar, and an
       earlier version of this comment claimed otherwise from a measurement
       taken without scrolling first. If you are here hunting a clipping bug,
       this was not one.

       It stays phone-shaped on a wide screen rather than spanning it, because
       the content column does too — a 1440px bar under a 560px column reads as
       a different app. The top corners keep their radius; the bottom ones go,
       because they are against the edge and nothing shows through them. */
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;

    /* The bar's body sits above the home indicator; its background fills in
       behind it, so there is no strip of page peeking under the bar. */
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box;

    /* Five equal columns keep the raised disc on the true centre line. The
       pastor's Leaders slot replaces Bible rather than adding a sixth, so the
       geometry holds for everyone. */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0;

    height: 62px;
    border-radius: 20px 20px 0 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    /* A hairline along the top only. Docked, the other three edges are either
       against the screen edge or against nothing. */
    border: none;
    border-top: 1px solid var(--nl-hairline);
    box-shadow: 0 -4px 24px -14px rgba(16, 46, 54, 0.5);
    /* The raised disc breaks the top edge, so the bar cannot clip it. */
    overflow: visible;
}

body.light-nav .nav.nav-light .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    font-size: 10px;
    font-weight: 560;
    letter-spacing: normal;
    line-height: 1;
    text-align: center;
    color: var(--nl-idle);
    text-decoration: none;
}
body.light-nav .nav.nav-light .nav-item svg {
    width: 20px;
    height: 20px;
    display: block;
}
body.light-nav .nav.nav-light .nav-item.active { color: var(--nl-teal); }

/* nld.css colours `.nav-item span` forest green and blows it up to 24px for
   the emoji the forest nav uses. The disc below is the only span here. */
body.light-nav .nav.nav-light .nav-item span {
    font-size: inherit;
    color: inherit;
    filter: none;
}

/* ── The raised Garden disc ───────────────────────────────────────────── */

body.light-nav .nav.nav-light .nav-fab {
    justify-content: flex-start;
    color: #fff;
}
body.light-nav .nav.nav-light .nav-fab-disc {
    width: 50px;
    height: 50px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    /* Lifted out of the bar, and by more than half its own height so the bar's
       top edge reads as passing behind it. */
    margin-top: -20px;
    background: linear-gradient(150deg, #3fbfa0 0%, #17977f 100%);
    box-shadow: 0 10px 22px -8px rgba(23, 151, 127, 0.95), 0 0 0 4px rgba(255, 255, 255, 0.86);
    transition: transform 0.16s ease;
}
body.light-nav .nav.nav-light .nav-fab svg { width: 23px; height: 23px; }
body.light-nav .nav.nav-light .nav-fab:active .nav-fab-disc { transform: scale(0.94); }

/* The Garden stays dimmed until the first day is walked — word.js sets the
   inline opacity, and the disc must dim with it rather than staying bright and
   promising a tab that will refuse. */
body.light-nav .nav.nav-light .nav-fab.active .nav-fab-disc {
    box-shadow: 0 10px 22px -8px rgba(23, 151, 127, 0.95), 0 0 0 4px rgba(255, 255, 255, 0.86), 0 0 0 6px rgba(29, 156, 132, 0.28);
}

body.light-nav .nav.nav-light .nav-item:focus-visible {
    outline: 2px solid var(--nl-teal);
    outline-offset: -3px;
    border-radius: 18px;
}

@media (prefers-reduced-motion: reduce) {
    body.light-nav .nav.nav-light .nav-fab-disc { transition: none; }
}