/* ============================================================================
   HCN Grants — shared app bar (_AppNav.cshtml)
   The cabinet front above the paper: card surface, hairline rule, the landing
   page's brand anatomy (serif wordmark + mono EST tag), mono section links
   with a rust underline tab on the active page.

   Self-contained: values are literals (kept in sync with the fg token set) so
   the bar renders identically on every page that includes it, regardless of
   which :root tokens that page defines.
   ============================================================================ */

/* Visually hidden until keyboard-focused — restores the skip link _Layout used to provide. */
.appnav__skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    font-family: "Spline Sans Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: #2A241B;
    color: #F8F3E9;
    padding: 10px 16px;
    text-decoration: none;
}
.appnav__skip:focus { left: 0; }

.appnav {
    background: #FBF7EF;                       /* fg-card */
    border-bottom: 1px solid #E2D8C6;          /* fg-rule */
}

.appnav__inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: stretch;
    gap: 28px;
    min-height: 58px;
}

/* ---- brand ------------------------------------------------------------------ */
.appnav__brand {
    display: flex;
    align-items: baseline;
    align-self: center;
    gap: 10px;
    text-decoration: none;
}
.appnav__brand-name {
    font-family: "Newsreader", Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: #2A241B;                            /* fg-ink */
}
.appnav__brand-est {
    font-family: "Spline Sans Mono", ui-monospace, Menlo, monospace;
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #A4805F;                            /* fg-faint */
}

/* ---- section links ------------------------------------------------------------ */
.appnav__links {
    display: flex;
    align-items: stretch;
    gap: 4px;
}
.appnav__link {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    font-family: "Spline Sans Mono", ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8A7E6C;                            /* fg-faint-3 */
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;                       /* the tab sits on the bar's rule */
    transition: color .18s ease, border-color .18s ease;
}
.appnav__link:hover { color: #B0492C; }        /* fg-accent */
.appnav__link--active {
    color: #B0492C;
    border-bottom-color: #B0492C;
}

/* ---- account cluster ------------------------------------------------------------ */
.appnav__account {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}
.appnav__user {
    font-family: "Spline Sans Mono", ui-monospace, Menlo, monospace;
    font-size: 10px;
    letter-spacing: .04em;
    color: #948A7B;                            /* fg-faint-2 */
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.appnav__logout { margin: 0; display: inline-flex; }
.appnav__logout button,
.appnav__login {
    font-family: "Spline Sans Mono", ui-monospace, Menlo, monospace;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8A7E6C;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    transition: color .18s ease;
}
.appnav__logout button:hover,
.appnav__login:hover { color: #B0492C; }
.appnav__cta {
    font-family: "Spline Sans Mono", ui-monospace, Menlo, monospace;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #F8F3E9;                            /* fg-card-2 */
    background: #B0492C;                       /* fg-accent */
    border: 1px solid #B0492C;
    border-radius: 3px;
    padding: 7px 14px;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
}
.appnav__cta:hover { background: #9b3f25; border-color: #9b3f25; }

/* ---- small screens ---------------------------------------------------------------- */
@media (max-width: 860px) {
    .appnav__inner {
        flex-wrap: wrap;
        padding: 10px 20px;
        row-gap: 4px;
        min-height: 0;
    }
    .appnav__links { order: 3; width: 100%; }
    .appnav__link { padding: 8px 14px 8px 0; }
    .appnav__user { display: none; }           /* the email is decoration; drop it first */
}