/* ============================================================================
   Simpler Grants — shared app bar (_AppNav.cshtml)
   Calm cabinet front above the paper: cream card surface over a single hairline,
   serif wordmark, mono section links, 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: 36px;
    min-height: 62px;
}

/* ---- brand ------------------------------------------------------------------ */
.appnav__brand {
    display: flex;
    align-items: center;
    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 */
    white-space: nowrap;
}

/* ---- needs-attention badge (Dashboard tab) -------------------------------------- */
.appnav__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px 2px;
    border-radius: 999px;
    background: #B0492C;                       /* fg-accent */
    color: #F8F3E9;                            /* fg-card-2 */
    font-family: "Spline Sans Mono", ui-monospace, Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    vertical-align: 1px;
}

/* ---- section links ------------------------------------------------------------ */
.appnav__links {
    display: flex;
    align-items: stretch;
    gap: 2px;
}
.appnav__link {
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    font-family: "Spline Sans Mono", ui-monospace, Menlo, monospace;
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6E6455;                            /* darker than before: links read as links */
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;                       /* the tab sits on the bar's rule */
    transition: color .15s ease, border-color .15s ease;
}
.appnav__link:hover {
    color: #2A241B;
    border-bottom-color: #E2D8C6;              /* quiet hover tab */
}
.appnav__link--active {
    color: #B0492C;                            /* fg-accent */
    border-bottom-color: #B0492C;
    font-weight: 600;
}

/* ---- account cluster ------------------------------------------------------------ */
.appnav__account {
    margin-left: auto;
    display: flex;
    align-items: center;
}
.appnav__logout { margin: 0; display: inline-flex; }
.appnav__logout button {
    font-family: "Spline Sans Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6E6455;
    background: none;
    border: 1px solid #E2D8C6;
    border-radius: 3px;
    padding: 7px 14px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.appnav__logout button:hover { color: #B0492C; border-color: #B0492C; }
.appnav__cta {
    font-family: "Spline Sans Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #F8F3E9;                            /* fg-card-2 */
    background: #B0492C;                       /* fg-accent */
    border: 1px solid #B0492C;
    border-radius: 3px;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s 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%; overflow-x: auto; }
    .appnav__link { padding: 8px 14px 8px 0; }
}