/*
    Declarative-menu tree — the sidebar every screen registers into via INavRegistry
    (CLAUDE.md "Declarative menu" rule, 2026-07-29). Unscoped on purpose: the classes must
    match markup rendered by NavTreeRenderer / NavTreeNode inside HrChronicle.Ui and by
    AppLayout in HrChronicle.Web; Blazor's scoped .razor.css attribute-selects, which would
    stop the styles crossing the component boundary.

    Packet P5.1 nav-visual-harmony 2026-08-03 — REWRITTEN to match the LOCKED
    design/prototypes/harbor/harbor.css .rail primitives class-for-class. The prior
    (packet 10.4) styling shipped BEFORE the harbor rail was locked, so the app rendered
    correctly-structured but visually-different from what MYS signed off. Every class
    below is a hrc-* semantic-token port of a harbor .rail / .nav-item / .grp / .l2 /
    .grp3 / .l3 counterpart. No new hex values; DesignTokenTests stays green.

    Three depth shapes:
      · L1 (depth 0)  root nav-item / group summary — full weight, 18px icon, 36px row
      · L2 (depth 1)  child leaf / nested group summary — smaller, indented, hairline guide
      · L3 (depth 2)  grandchild leaf — smallest, with 4px dot marker, deeper indent
*/

/* --- rail wrappers (added at shell level in AppLayout) -------------------- */

.hrc-rail-search { padding: 12px 12px 8px; flex: none; }

.hrc-rail-searchbtn {
    inline-size: 100%;
    display: flex; align-items: center; gap: 8px;
    background: color-mix(in srgb, var(--hrc-rail-ink-strong) 6%, transparent);
    border: 1px solid var(--hrc-rail-border);
    color: var(--hrc-rail-ink);
    border-radius: var(--hrc-radius-sm);
    padding: 0 10px; block-size: 36px;
    cursor: pointer; font: inherit; font-size: 13px;
}
.hrc-rail-searchbtn:hover {
    background: color-mix(in srgb, var(--hrc-rail-ink-strong) 11%, transparent);
    color: var(--hrc-rail-ink-strong);
}
.hrc-rail-searchbtn > svg { inline-size: 16px; block-size: 16px; flex: none; opacity: .85; }
.hrc-rail-searchbtn__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrc-rail-searchbtn__kbd {
    margin-inline-start: auto; font-size: 10.5px; font-family: ui-monospace, monospace;
    border: 1px solid var(--hrc-rail-border); border-radius: 4px; padding: 1px 5px; opacity: .85;
    flex: none;
}

.hrc-rail-scroll {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 4px 12px 12px; scrollbar-width: thin;
}
.hrc-rail-scroll::-webkit-scrollbar { inline-size: 8px; }
.hrc-rail-scroll::-webkit-scrollbar-thumb { background: var(--hrc-rail-active); border-radius: 99px; }

.hrc-rail-foot {
    flex: none; padding: 10px 12px;
    border-block-start: 1px solid var(--hrc-rail-border);
}

.hrc-rail-collapse {
    inline-size: 100%; display: flex; align-items: center; gap: 9px;
    padding: 0 10px; block-size: 32px;
    background: none; border: 0; color: var(--hrc-rail-ink);
    font: inherit; font-size: 12.5px;
    border-radius: var(--hrc-radius-xs); cursor: pointer;
}
.hrc-rail-collapse:hover { background: var(--hrc-rail-active); color: var(--hrc-rail-ink-strong); }
.hrc-rail-collapse > svg { inline-size: 16px; block-size: 16px; }

/* --- nav container -------------------------------------------------------- */

/* Packet P8.5 (2026-08-06): the nav tree is ALWAYS vertical - drawer at
   narrow widths, static side column at desktop, both are vertical. The
   pre-P8.5 chip-strip fallback (flex-row wrap) rendered a horizontal band of
   nav icons at the top of narrow-viewport pages and was the visible defect
   MYS caught 2026-08-05 (defects/05AUg2026-Round3/menu-lost-responsiveness.png).
   That fallback has no consumer post-P8.5, so it's gone: the base rules below
   describe the vertical tree and the desktop breakpoint carries only mini-rail. */
.hrc-shell__nav {
    display: flex; flex-direction: column; flex-wrap: nowrap;
    gap: 0;
    min-inline-size: 0; margin: 0; padding: 0; list-style: none;
    flex-basis: auto;
}

.hrc-shell__nav > .hrc-nav-tree {
    display: flex; flex-direction: column; flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    inline-size: auto; max-inline-size: 100%;
    margin: 0; padding: 0; list-style: none;
}

.hrc-shell__nav > .hrc-nav-tree > li { display: block; }

.hrc-nav-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; align-items: stretch; }

/* --- L1: root nav-item (leaf OR group summary) --------------------------- */
/*
    Full-width row, 36px block-size, 18px icon, chevron on the right for groups.
    Matches harbor .nav-item shape.
*/
.hrc-nav-item {
    display: flex; align-items: center; gap: 10px;
    inline-size: 100%;
    padding: 0 10px; block-size: 36px;
    border-radius: var(--hrc-radius-xs);
    color: var(--hrc-rail-ink);
    font: inherit; font-size: 13.5px; font-weight: 500;
    background: none; border: 0;
    text-align: start; text-decoration: none;
    cursor: pointer;
    transition: background-color .12s, color .12s;
    position: relative; min-inline-size: 0;
}
.hrc-nav-item:hover { background: var(--hrc-rail-active); color: var(--hrc-rail-ink-strong); }
.hrc-nav-item:focus-visible { outline: 2px solid var(--hrc-rail-accent); outline-offset: -2px; }
.hrc-nav-item--active { background: var(--hrc-rail-active); color: var(--hrc-rail-ink-strong); font-weight: 600; }
.hrc-nav-item__icon { inline-size: 18px; block-size: 18px; flex: none; opacity: .92; }
.hrc-nav-item__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrc-nav-item__chev {
    margin-inline-start: auto;
    inline-size: 14px; block-size: 14px;
    opacity: .6; flex: none;
    transition: transform .16s ease;
}
.hrc-nav-group[open] > .hrc-nav-group__summary > .hrc-nav-item__chev {
    transform: rotate(180deg);
}

/* --- L1 group wrapper (details) ------------------------------------------ */

.hrc-nav-group { display: block; min-inline-size: 0; }
.hrc-nav-group__summary { list-style: none; cursor: pointer; }
.hrc-nav-group__summary::-webkit-details-marker { display: none; }
.hrc-nav-group__summary::marker { content: ""; }

/* --- L2 child list + item + group ---------------------------------------- */
/*
    Nested list: hairline guide via border-inline-start on the <ul>. Every L2 item
    is smaller than an L1 (13px vs 13.5, 32px vs 36px row). Matches harbor .lvl2/.l2.
*/
.hrc-nav-lvl2 {
    display: flex; flex-direction: column; gap: 1px;
    margin: 2px 0 6px;
    margin-inline-start: 19px;
    padding-inline-start: 9px;
    border-inline-start: 1px solid var(--hrc-rail-border);
    list-style: none;
}

.hrc-nav-l2 {
    display: flex; align-items: center; gap: 8px;
    inline-size: 100%;
    padding: 0 9px; block-size: 32px;
    border-radius: var(--hrc-radius-xs);
    color: var(--hrc-rail-ink);
    font: inherit; font-size: 13px; font-weight: 450;
    background: none; border: 0;
    text-align: start; text-decoration: none;
    cursor: pointer;
    min-inline-size: 0;
}
.hrc-nav-l2:hover { background: var(--hrc-rail-active); color: var(--hrc-rail-ink-strong); }
.hrc-nav-l2:focus-visible { outline: 2px solid var(--hrc-rail-accent); outline-offset: -2px; }
.hrc-nav-l2--active,
.hrc-nav-l2[aria-current="page"] {
    color: var(--hrc-rail-ink-strong); font-weight: 600; background: var(--hrc-rail-active);
}
.hrc-nav-l2__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrc-nav-l2__chev {
    margin-inline-start: auto;
    inline-size: 13px; block-size: 13px;
    opacity: .55; flex: none;
    transition: transform .16s ease;
}
.hrc-nav-group--l2[open] > .hrc-nav-group__summary > .hrc-nav-l2__chev {
    transform: rotate(180deg);
}

/* --- L3 child list + item (smallest, dot marker) ------------------------- */

.hrc-nav-lvl3 {
    display: flex; flex-direction: column; gap: 1px;
    margin: 1px 0 4px;
    padding-inline-start: 8px;
    margin-inline-start: 8px;
    border-inline-start: 1px solid var(--hrc-rail-border);
    list-style: none;
}

.hrc-nav-l3 {
    display: flex; align-items: center; gap: 8px;
    padding: 0 9px; block-size: 28px;
    border-radius: var(--hrc-radius-xs);
    color: var(--hrc-rail-ink);
    font-size: 12.5px;
    text-decoration: none;
    opacity: .9; min-inline-size: 0;
}
.hrc-nav-l3::before {
    content: "";
    inline-size: 4px; block-size: 4px;
    border-radius: 50%; background: currentColor;
    opacity: .5; flex: none;
}
.hrc-nav-l3__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrc-nav-l3:hover { background: var(--hrc-rail-active); color: var(--hrc-rail-ink-strong); opacity: 1; }
.hrc-nav-l3--active,
.hrc-nav-l3[aria-current="page"] {
    color: var(--hrc-rail-ink-strong); font-weight: 600; background: var(--hrc-rail-active); opacity: 1;
}
.hrc-nav-l3--active::before,
.hrc-nav-l3[aria-current="page"]::before {
    background: var(--hrc-rail-accent); opacity: 1;
}

/* --- badge (Packet P5.2, 2026-08-03) -------------------------------------
   Small pill on the item's row for a count / packet marker / BETA. Layout
   nudges the chevron and label so a badge + chevron combo (group with badge)
   sit next to each other without overlap. Muted by default so it doesn't
   pull attention from the label.
*/
.hrc-nav-badge {
    font-size: 10.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 99px;
    background: var(--hrc-rail-active);
    color: var(--hrc-rail-ink-strong);
    margin-inline-start: auto;
    flex: none;
    text-transform: none;
    opacity: .85;
}
.hrc-nav-item > .hrc-nav-badge + .hrc-nav-item__chev,
.hrc-nav-l2 > .hrc-nav-badge + .hrc-nav-l2__chev {
    margin-inline-start: 6px;
}
.hrc-nav-l3 > .hrc-nav-badge {
    font-size: 9.5px; padding: 1px 5px;
}

/* --- mini rail state (Packet P5.2, 2026-08-03) ---------------------------
   When the user clicks "Collapse menu" the shell stamps data-rail="mini" on
   the root <html>. The rail shrinks to icon-only; labels, chevrons, badges,
   L2/L3 sub-trees and the search-btn label all hide. The rail-collapse svg
   rotates 180deg to become the "expand" affordance.

   Persistence lives in localStorage (same as theme.js), sync'd on cross-tab
   storage events + on Blazor enhanced-load. First-party JS in nav-collapse.js.

   Packet P8.5 (2026-08-06): cutoff moved from 48rem to 56.25rem to match the
   new shell cutoff. Mini-rail only makes sense when the rail is a STATIC side
   column - inside the drawer overlay the collapse affordance is the hamburger,
   not the mini-rail toggle.
*/
@media (min-width: 56.25rem) {
    :root[data-rail="mini"] .hrc-shell {
        grid-template-columns: 4rem 1fr;
    }
    :root[data-rail="mini"] .hrc-shell__brand,
    :root[data-rail="mini"] .hrc-rail-search,
    :root[data-rail="mini"] .hrc-rail-scroll,
    :root[data-rail="mini"] .hrc-rail-foot {
        padding-inline: 6px;
    }
    :root[data-rail="mini"] .hrc-shell__brand-plane,
    :root[data-rail="mini"] .hrc-rail-searchbtn__label,
    :root[data-rail="mini"] .hrc-rail-searchbtn__kbd,
    :root[data-rail="mini"] .hrc-nav-item__label,
    :root[data-rail="mini"] .hrc-nav-item__chev,
    :root[data-rail="mini"] .hrc-nav-l2,
    :root[data-rail="mini"] .hrc-nav-l3,
    :root[data-rail="mini"] .hrc-nav-lvl2,
    :root[data-rail="mini"] .hrc-nav-lvl3,
    :root[data-rail="mini"] .hrc-nav-badge,
    :root[data-rail="mini"] .hrc-rail-collapse > span {
        display: none;
    }
    :root[data-rail="mini"] .hrc-nav-item {
        justify-content: center; padding: 0;
    }
    :root[data-rail="mini"] .hrc-rail-searchbtn {
        justify-content: center; padding: 0;
    }
    :root[data-rail="mini"] .hrc-rail-collapse {
        justify-content: center; padding: 0;
    }
    :root[data-rail="mini"] .hrc-rail-collapse > svg {
        transform: rotate(180deg);
    }
    /* Wordmark plate shrinks; monogram takes over if the Wordmark component
       exposes one. Falls back to the plate's own smaller footprint. */
    :root[data-rail="mini"] .hrc-shell__brand-plate {
        padding: 6px;
    }
}

/* Packet P8.5 (2026-08-06): the chip-strip narrow override was deleted with
   the chip-strip nav layout - the drawer overlay presents the same vertical
   tree at every width, so no narrow-specific L2/L3 rules are needed. */