/* ==================== THE NAVIGATION TREE (.nv-*) ====================
   Drawn by js/nav.js from one declared tree: SECTIONS hold PAGES, pages hold VIEWS (the tabs and scopes a page
   already reads from its own address). layout.css owns the rail itself - its width, its collapse, the brand
   slots and the pinned foot - and this file owns what is inside the scroller.

   THE RAIL IS DARK IN BOTH THEMES, so nothing here has a light value to restate and nothing needs declaring
   twice. Inks are the rail's own: white at .55 / .66 / .78 over --shell-800 (6.19 / 8.2 / 11.4 : 1 measured),
   gold-200 for the one thing that says where you are. Only the breadcrumb sits on the page's surface, and it
   reads theme tokens.

   FIVE LESSONS THAT WERE PAID FOR AND ARE KEPT (layout.css records each):
   1. The scroller is `overflow-y: auto` and `overflow-x: hidden` - it must stay, or the foot of the rail is
      unreachable (no bar, no error). Nothing in here adds overflow to .sidebar-scroll.
   2. A label is hidden with MAX-WIDTH AND OPACITY, and the gap goes with it. Opacity alone leaves the label's
      width in the row and every icon sits 6.5px off centre.
   3. The open condition is ONE :is(), repeated verbatim: pointer-over (unless the rail is in `icons` mode),
      keyboard focus (:focus-visible, never :focus-within - a click would leave it stuck open), an open account
      menu, and the first-visit intro. Called <OPEN> in the comments below.
   4. Touch is excluded from the collapse: the whole closed-state block is gated on (hover: hover) and
      (min-width: 992px); a touch screen's rail never collapses and below 992px it is the hamburger drawer.
   5. Nothing rests at opacity 0 as a STATE it cannot leave. The closed values are the base of a two-state
      transition whose other state is <OPEN>; the flyout's entrance animates FROM transparent with a
      backwards fill, so a frame never granted leaves it visible.

   NOTHING ANIMATES BY MEASUREMENT. A section and a page's views open with grid-template-rows 1fr <-> 0fr, and
   a folded body is also visibility: hidden after the transition, so its links leave the Tab order. */

.nv-sec[hidden], .nv-li[hidden], .nv-vli[hidden], .nv-tog[hidden], .nv-vw[hidden], .nv-sec-n[hidden],
.nv-crumb[hidden], .nv-chip[hidden], .nv-fly[hidden] { display: none !important; }

.sidebar-nav { --nv-sec-py: .5rem; --nv-item-py: .5rem; --nv-view-py: .3rem; }
.nv-list, .nv-views { list-style: none; margin: 0; padding: 0; }

/* ---- the section heading ---- */
.nv-sec-btn {
    display: flex; align-items: center; gap: .4rem; width: 100%; position: relative;
    margin: .5rem 0 .05rem; padding: var(--nv-sec-py) .5rem calc(var(--nv-sec-py) - .15rem) .45rem;
    background: none; border: 0; border-radius: 8px; text-align: left; cursor: pointer;
    font: inherit; font-size: var(--fs-3xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
    transition: color .15s ease;
}
.nv-sec.is-first .nv-sec-btn { margin-top: .1rem; }
/* PAGES SIT INSET UNDER THEIR SECTION: the heading is a small-caps label on the rail's left edge, the page row starts a
   step in with its icon, and a view is a further step in behind a thin guide line. */
.nv-list { padding-left: .5rem; }
.nv-sec-btn:hover { color: rgba(255, 255, 255, .88); }
.nv-sec-t { flex: 1 1 auto; min-width: max-content; white-space: nowrap; }
.nv-chev { flex: 0 0 auto; font-size: var(--fs-2xs); transition: transform .24s var(--ease-out); }
.nv-sec.is-closed .nv-chev { transform: rotate(-90deg); }
/* The review count, mirrored onto a FOLDED section: a number a person can act on must not disappear because the
   section holding it is closed. nav.js reads it off the badge core.js paints. */
.nv-sec-n {
    flex: 0 0 auto; font-style: normal; letter-spacing: 0; line-height: 1.35; padding: 0 .45rem; border-radius: 999px;
    font-size: var(--fs-3xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
    background: var(--gold-500); color: var(--shell-800);
}
.nv-sec:not(.is-closed) .nv-sec-n { display: none; }

/* ---- the body of a section: folds with grid rows, not with a measured height ---- */
.nv-sec-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .42s var(--ease-out), visibility 0s; }
.nv-sec.is-closed > .nv-sec-body {
    grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows .42s var(--ease-out), visibility 0s .42s;
}
.nv-sec-in { min-height: 0; overflow: hidden; }

/* ---- a page ---- */
.nv-row { position: relative; display: flex; align-items: center; }
.nv-item {
    flex: 1 1 auto; min-width: 0; width: 100%; position: relative;
    display: flex; align-items: center; gap: .65rem;
    padding: var(--nv-item-py) .6rem; margin-bottom: .1rem; border: 0; border-radius: 8px; background: none; text-align: left;
    color: rgba(255, 255, 255, .78); text-decoration: none; white-space: nowrap; cursor: pointer;
    font: inherit; font-size: var(--fs-md); font-weight: var(--fw-medium);
    transition: background .15s ease, color .15s ease, gap .4s var(--ease-out);
}
.nv-item i { flex: 0 0 18px; width: 18px; text-align: center; font-size: var(--fs-xl); line-height: 1; transition: color .15s ease, transform .18s var(--ease-out); }
.nv-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; flex: 1 1 auto; }
.nv-item .nav-badge { margin-left: 0; padding: 0 .36rem; }
.nv-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nv-item:hover i { color: var(--gold-300); transform: translateX(1px); }
.nv-li.has-views > .nv-row > .nv-item { padding-right: 1.6rem; }

/* WHERE YOU ARE: the same gold-tinted dark pill and solid leading bar the rail has always used. With a view
   on screen the PAGE keeps the bar and the gold ink and the VIEW takes the pill - two filled shapes in one
   column would be two places at once. */
.nv-li.is-active > .nv-row > .nv-item {
    background: rgba(201, 165, 95, .17); color: var(--gold-200);
    box-shadow: inset 0 0 0 1px rgba(201, 165, 95, .34);
}
.nv-li.is-active > .nv-row > .nv-item i { color: var(--gold-300); }
.nv-li.is-active > .nv-row > .nv-item::before {
    content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%;
    width: 3px; height: 62%; border-radius: 0 3px 3px 0; background: var(--gold-500);
    animation: nvBar .5s var(--ease-out) backwards;
}
@keyframes nvBar { from { transform: scaleY(.3); opacity: 0; } }
.nv-li.is-parent > .nv-row > .nv-item { background: transparent; box-shadow: none; }

/* The toggle for a page's views. Mouse-only on purpose (tabindex -1): the keyboard has Right and Left. */
.nv-tog {
    position: absolute; right: .3rem; top: 50%; translate: 0 -50%;
    width: 22px; height: 22px; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 6px; background: none; color: rgba(255, 255, 255, .55); cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.nv-tog i { font-size: var(--fs-xs); transition: transform .24s var(--ease-out); }
.nv-li.is-vopen > .nv-row > .nv-tog i { transform: rotate(90deg); }
.nv-tog:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---- a page's views ---- */
.nv-vw { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .42s var(--ease-out), visibility 0s .42s; }
.nv-li.is-vopen > .nv-vw { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .42s var(--ease-out), visibility 0s; }
.nv-views { min-height: 0; overflow: hidden; margin-left: 1.9rem; padding: .1rem 0 .25rem; }
.nv-vli { position: relative; padding-left: .7rem; }
/* The guide line is drawn per row, so a gold segment can mark the one that is on screen. */
.nv-vli::before { content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 1px; background: rgba(255, 255, 255, .2); }
.nv-vli:has(> .nv-view.is-active)::before { width: 2px; left: -.5px; background: var(--gold-400); }
.nv-vli::after { content: ''; position: absolute; left: 0; top: 50%; width: .45rem; height: 1px; background: rgba(255, 255, 255, .2); }
.nv-vli:has(> .nv-view.is-active)::after { background: var(--gold-400); }
.nv-view {
    display: block; padding: var(--nv-view-py) .6rem; margin: .05rem 0; border-radius: 6px; padding-left: .55rem;
    color: rgba(255, 255, 255, .68); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.3;
    transition: background .15s ease, color .15s ease;
}
.nv-view:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nv-view.is-active { background: rgba(201, 165, 95, .17); box-shadow: inset 0 0 0 1px rgba(201, 165, 95, .34); color: var(--gold-200); }

.nv-sec-btn:focus-visible, .nv-item:focus-visible, .nv-view:focus-visible, .nv-tog:focus-visible { outline: 2px solid var(--gold-300); outline-offset: -2px; }

/* ---- THE HEIGHT LADDER (keyed to the same heights as layout.css's slot ladder) ----
   Seven sections and up to fifteen pages have to fit above the pinned foot on a 768px laptop, and the open
   rail shows only the section you are in, so the open rail is the easy case; the CLOSED rail shows every
   page, and it is the one these tiers are measured against (scripts/check-nav-render.js rebuilds the budget
   from this cascade). Vertical only. A page row never goes under 28px (touch target). */
@media (min-width: 992px) and (max-height: 1060px) { .sidebar-nav { --nv-sec-py: .42rem; --nv-item-py: .44rem; --nv-view-py: .27rem; } }
@media (min-width: 992px) and (max-height: 940px) { .sidebar-nav { --nv-sec-py: .36rem; --nv-item-py: .38rem; --nv-view-py: .24rem; } }
@media (min-width: 992px) and (max-height: 860px) { .sidebar-nav { --nv-sec-py: .3rem;  --nv-item-py: .34rem; --nv-view-py: .2rem; } .nv-item { margin-bottom: 0; } }
@media (min-width: 992px) and (max-height: 800px) { .sidebar-nav { --nv-sec-py: .26rem; --nv-item-py: .33rem; --nv-view-py: .18rem; } }

/* ==================== THE CLOSED RAIL ====================
   72px, icons only, grouped by hairlines; every page stays on screen whatever a section's open state says,
   because there is no heading to open it with. All of it is the BASE of a two-state transition whose other
   state is <OPEN>, so reduced motion and a missed frame both end in a rail that is drawn correctly. */
@media (min-width: 992px) and (hover: hover) {

    /* The hairline IS the (empty) button: 1px tall with its margins, so seven sections cost ~11px each instead of
       a 30px heading row - the closed rail is the one that has to fit sixteen icons on a 768px laptop. */
    .app-sidebar .nv-sec-btn {
        height: 1px; padding: 0; margin: .34rem .35rem; width: auto; color: transparent; gap: 0; overflow: hidden;
        background: rgba(255, 255, 255, .18); border-radius: 0; transition: color .34s var(--ease-out), background .34s var(--ease-out);
    }
    .app-sidebar .nv-sec.is-first .nv-sec-btn { height: 0; margin: 0; background: none; }
    /* A section marked openOnly (Help) is not in the icon column at all; its door is also in the account menu. */
    .app-sidebar .nv-sec.nv-open-only { display: none; }
    .app-sidebar .nv-sec-t { max-width: 0; opacity: 0; transition: opacity .34s var(--ease-out), max-width .5s var(--ease-out); }
    .app-sidebar .nv-chev, .app-sidebar .nv-sec-n { opacity: 0; width: 0; overflow: hidden; margin: 0; padding: 0; transition: opacity .34s var(--ease-out); }
    /* A hairline is not a place to land: it leaves the Tab order until the rail has opened. */
    .app-sidebar .nv-sec-btn { visibility: hidden; }

    .app-sidebar .nv-sec.is-closed > .nv-sec-body {
        grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .42s var(--ease-out), visibility 0s;
    }
    /* the icon column is centred in the closed rail, so the inset is an OPEN-rail property */
    .app-sidebar .nv-list { padding-left: 0; transition: padding .4s var(--ease-out); }
    .app-sidebar .nv-item { justify-content: center; gap: 0; }
    .app-sidebar .nv-t {
        max-width: 0; opacity: 0; transform: translateX(-6px);
        transition: opacity .34s var(--ease-out), transform .34s var(--ease-out), max-width .5s var(--ease-out);
    }
    .app-sidebar .nv-li.has-views > .nv-row > .nv-item { padding-right: .7rem; }
    .app-sidebar .nv-tog { opacity: 0; visibility: hidden; transition: opacity .34s var(--ease-out); }
    .app-sidebar .nv-li.is-vopen > .nv-vw { grid-template-rows: 0fr; visibility: hidden; }
    /* With no views on screen the page IS where you are, so it keeps its pill. */
    .app-sidebar .nv-li.is-parent > .nv-row > .nv-item { background: rgba(201, 165, 95, .17); box-shadow: inset 0 0 0 1px rgba(201, 165, 95, .34); }

    /* ---- the same elements, open ---- */
    .app-sidebar:is(:where(:hover):not([data-nav-mode="icons"]), :has(:focus-visible), :has(.dropdown-menu.show), .is-intro) .nv-list { padding-left: .5rem; }
    .app-sidebar:is(:where(:hover):not([data-nav-mode="icons"]), :has(:focus-visible), :has(.dropdown-menu.show), .is-intro) .nv-sec-btn {
        height: auto; padding: var(--nv-sec-py) .5rem calc(var(--nv-sec-py) - .15rem) .45rem; margin: .5rem 0 .05rem; width: 100%; overflow: visible;
        color: rgba(255, 255, 255, .55); gap: .4rem; visibility: visible; background: none; border-radius: 8px;
    }
    .app-sidebar:is(:where(:hover):not([data-nav-mode="icons"]), :has(:focus-visible), :has(.dropdown-menu.show), .is-intro) .nv-sec.is-first .nv-sec-btn { margin-top: .1rem; }
    .app-sidebar:is(:where(:hover):not([data-nav-mode="icons"]), :has(:focus-visible), :has(.dropdown-menu.show), .is-intro) .nv-sec.nv-open-only { display: block; }
    .app-sidebar:is(:where(:hover):not([data-nav-mode="icons"]), :has(:focus-visible), :has(.dropdown-menu.show), .is-intro) .nv-sec-btn:hover { color: rgba(255, 255, 255, .88); }
    .app-sidebar:is(:where(:hover):not([data-nav-mode="icons"]), :has(:focus-visible), :has(.dropdown-menu.show), .is-intro) .nv-sec-t { max-width: none; opacity: 1; }
    .app-sidebar:is(:where(:hover):not([data-nav-mode="icons"]), :has(:focus-visible), :has(.dropdown-menu.show), .is-intro) .nv-chev { opacity: 1; width: auto; }
    .app-sidebar:is(:where(:hover):not([data-nav-mode="icons"]), :has(:focus-visible), :has(.dropdown-menu.show), .is-intro) .nv-sec-n { opacity: 1; width: auto; padding: 0 .45rem; }
    .app-sidebar:is(:where(:hover):not([data-nav-mode="icons"]), :has(:focus-visible), :has(.dropdown-menu.show), .is-intro) .nv-sec.is-closed > .nv-sec-body {
        grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .42s var(--ease-out), visibility 0s .42s;
    }
    .app-sidebar:is(:where(:hover):not([data-nav-mode="icons"]), :has(:focus-visible), :has(.dropdown-menu.show), .is-intro) .nv-item { justify-content: flex-start; gap: .65rem; }
    .app-sidebar:is(:where(:hover):not([data-nav-mode="icons"]), :has(:focus-visible), :has(.dropdown-menu.show), .is-intro) .nv-t { max-width: 170px; opacity: 1; transform: none; }
    .app-sidebar:is(:where(:hover):not([data-nav-mode="icons"]), :has(:focus-visible), :has(.dropdown-menu.show), .is-intro) .nv-li.has-views > .nv-row > .nv-item { padding-right: 1.6rem; }
    .app-sidebar:is(:where(:hover):not([data-nav-mode="icons"]), :has(:focus-visible), :has(.dropdown-menu.show), .is-intro) .nv-tog { opacity: 1; visibility: visible; }
    .app-sidebar:is(:where(:hover):not([data-nav-mode="icons"]), :has(:focus-visible), :has(.dropdown-menu.show), .is-intro) .nv-li.is-parent > .nv-row > .nv-item { background: transparent; box-shadow: none; }
    .app-sidebar:is(:where(:hover):not([data-nav-mode="icons"]), :has(:focus-visible), :has(.dropdown-menu.show), .is-intro) .nv-li.is-vopen > .nv-vw {
        grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .42s var(--ease-out), visibility 0s;
    }
}

/* ==================== THE FLYOUT (the rail in `icons` mode) ====================
   In `auto` mode the pointer opens the whole tree, so there is nothing for a flyout to do; in `icons` mode the
   rail stays at 72px and this panel stands beside the icon the pointer is on: the section as an eyebrow, the
   page, and its views. It lives in <body> (see nav.js) because the rail clips its children. It is dark in
   both themes, like the rail it grows out of. */
.nv-fly {
    position: fixed; left: var(--nv-fly-x, 72px); top: var(--nv-fly-y, 0px); z-index: 1045;
    min-width: 13.5rem; max-width: 19rem; margin-left: 6px; padding: .4rem;
    background: var(--shell-800); border: 1px solid var(--shell-line); border-radius: 12px;
    box-shadow: var(--shadow-lg); color: rgba(255, 255, 255, .78);
    animation: nvFlyIn .16s var(--ease-out) backwards;
}
/* A bridge over the 6px gap, so a pointer crossing from the icon to the panel never leaves both. */
.nv-fly::before { content: ''; position: absolute; left: -8px; top: 0; bottom: 0; width: 8px; }
@keyframes nvFlyIn { from { opacity: 0; transform: translateX(-4px); } }
.nv-fly-eyebrow {
    padding: .3rem .6rem .15rem; font-size: var(--fs-3xs); font-weight: var(--fw-bold);
    letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.nv-fly-page, .nv-fly-view {
    display: flex; align-items: center; gap: .6rem; width: 100%; padding: .42rem .6rem; border: 0; border-radius: 8px;
    background: none; color: rgba(255, 255, 255, .86); text-decoration: none; text-align: left; cursor: pointer;
    font: inherit; font-size: var(--fs-md); font-weight: var(--fw-medium); white-space: nowrap;
}
.nv-fly-page i { font-size: var(--fs-xl); width: 18px; text-align: center; line-height: 1; color: var(--gold-300); }
.nv-fly-views { list-style: none; margin: .15rem 0 .1rem 1.55rem; padding: 0 0 0 .4rem; border-left: 1px solid rgba(255, 255, 255, .14); }
.nv-fly-view { font-size: var(--fs-sm); padding: .32rem .6rem; color: rgba(255, 255, 255, .72); }
.nv-fly-page:hover, .nv-fly-view:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.nv-fly-page.is-active, .nv-fly-view.is-active { background: rgba(201, 165, 95, .17); color: var(--gold-200); box-shadow: inset 0 0 0 1px rgba(201, 165, 95, .34); }
.nv-fly-page:focus-visible, .nv-fly-view:focus-visible { outline: 2px solid var(--gold-300); outline-offset: -2px; }

/* The menu-mode switch lives in the account menu and means nothing without a pointer or below the rail. */
@media (hover: none), (max-width: 991.98px) { .nv-mode-li { display: none; } }

/* ==================== THE BREADCRUMB ====================
   In the header's own title row, so the bar stays the 62.67px every sticky offset in the app is keyed to: the
   section (and, on a record, its list) in front of the title, the view as a chip after it. The page's name is
   the title itself. Hidden under 1200px, where the title needs the room. */
.nv-line { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.nv-line h1 { flex: 0 1 auto; min-width: 0; }
.nv-crumb ol { display: flex; align-items: center; gap: .4rem; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.nv-crumb li {
    font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
}
.nv-crumb li::after { content: '\203A'; margin-left: .4rem; letter-spacing: 0; color: var(--text-dim); opacity: .7; }
.nv-crumb a { color: inherit; text-decoration: none; transition: color .15s ease; }
.nv-crumb a:hover { color: var(--accent-ink); text-decoration: underline; }
.nv-crumb a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.nv-chip {
    flex: 0 0 auto; padding: .1rem .6rem; border-radius: 999px; white-space: nowrap;
    font-size: var(--fs-2xs); font-weight: var(--fw-medium); letter-spacing: .01em;
    color: var(--accent-ink); background: var(--accent-weak); border: 1px solid var(--accent-line);
}
@media (max-width: 1199.98px) { .nv-crumb { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .nv-sec-body, .nv-vw, .nv-chev, .nv-tog i, .nv-item, .nv-item i, .nv-view, .nv-sec-btn, .nv-crumb a,
    .app-sidebar .nv-t, .app-sidebar .nv-sec-t, .app-sidebar .nv-tog { transition: none !important; }
    .nv-fly, .nv-li.is-active > .nv-row > .nv-item::before { animation: none !important; }
}