/* Citrus Quest — the universal top bar.
 *
 * Every page loads this and renders its header through
 * citrus_header() in includes/header.php. That is the point of the file: the
 * bar used to be copy-pasted into nine pages and had already drifted — one had
 * no logo, one had the links in a different order, two had no account block,
 * and the VTT's version was a different element entirely. Scoped under
 * .citrus-bar so it beats each page's own bare `nav a` / `header` rules without
 * having to delete them all first (roadmap item S2 tracks those copies). */

.citrus-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 2rem;
    background: var(--gray-dark, #3a3a3a);
    border-bottom: 2px solid var(--yellow-dim, rgba(255, 243, 176, 0.15));
}

.citrus-bar-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
    flex-wrap: wrap;
}

/* The wordmark, boxed. CITRUS, not CITRUSQUEST: it is the name of the game, not
   the name of the repository. */
.citrus-logo {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-light, #f0f0f0);
    text-decoration: none;
    letter-spacing: 0.08em;
    border: 2px solid var(--yellow, #FFF3B0);
    border-radius: 4px;
    background: var(--yellow-dim, rgba(255, 243, 176, 0.15));
    padding: 0.3rem 0.6rem;
    flex-shrink: 0;
}

.citrus-logo:hover { color: var(--yellow, #FFF3B0); }

.citrus-bar nav {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
}

/* The border is declared on ALL FOUR sides, deliberately.
 *
 * Every page's legacy stylesheet still has `nav a { border: 1px solid
 * transparent }` and `nav a:hover { border-color: yellow }` — and
 * `border-color` is a shorthand for all four edge colours. Declaring only
 * `border-bottom` here let that legacy rule paint a full yellow box on hover,
 * which is three quarters of a frame with the bottom cut off.
 *
 * `border-color: transparent` on the hover/active rule below is what fixes it,
 * and the selector is two classes deep on purpose: `.citrus-bar nav a:hover`
 * (0,2,2) beats `nav a:hover` (0,1,2) outright, so this does not depend on
 * header.css being linked after the page's inline <style>. Set all four sides
 * to transparent, then light the bottom one — an underline, not a frame. */
.citrus-bar nav a {
    padding: 0.3rem 0 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-light, #f0f0f0);
    text-decoration: none;
    border: 2px solid transparent;
}

.citrus-bar nav a:hover,
.citrus-bar nav a.active {
    color: var(--yellow, #FFF3B0);
    border-color: transparent;
    border-bottom-color: var(--yellow, #FFF3B0);
}

.citrus-bar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* The account block: icon, name, and the only LOG OUT link in the app. It used
   to exist on the homepage alone, so every other page was a dead end for signing
   out. */
.citrus-account {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.citrus-account-pic {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--yellow-dim, rgba(255, 243, 176, 0.15));
    object-fit: cover;
    flex-shrink: 0;
}

.citrus-account-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light, #f0f0f0);
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.citrus-bar a.citrus-account-out {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-muted, #b0b0b0);
    text-decoration: none;
    border: 1px solid var(--yellow-dim, rgba(255, 243, 176, 0.15));
    border-radius: 4px;
    padding: 0.2rem 0.45rem;
}

.citrus-bar a.citrus-account-out:hover {
    color: var(--yellow, #FFF3B0);
    border-color: var(--yellow, #FFF3B0);
}

/* Page-local sub-navigation (the sheet's OVERVIEW / INVENTORY tabs). Below the
   universal bar, never inside it: the bar is the same on every page, and these
   two pages are the only ones with a second level. */
.citrus-subnav {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.6rem 2rem;
    background: var(--gray-darker, #2b2b2b);
    border-bottom: 1px solid var(--yellow-dim, rgba(255, 243, 176, 0.15));
}

.citrus-subnav a {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted, #b0b0b0);
    text-decoration: none;
    border: 2px solid transparent;
    padding-bottom: 0.25rem;
}

.citrus-subnav a:hover,
.citrus-subnav a.active {
    color: var(--yellow, #FFF3B0);
    border-color: transparent;
    border-bottom-color: var(--yellow, #FFF3B0);
}

.citrus-subnav .sub-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted, #b0b0b0);
    margin-right: auto;
}

/* The VTT's table chip rides on the right of the bar, before the account. */
.citrus-bar .table-chip {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--yellow, #FFF3B0);
    color: var(--yellow, #FFF3B0);
    white-space: nowrap;
}

.citrus-bar .table-chip.player {
    border-color: var(--gray-light, #666666);
    color: var(--text-muted, #b0b0b0);
}

/* Editors used to brand themselves in the header; that is now the page title
   under the bar, so a sub-title reads as context rather than as a second logo. */
.citrus-page-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1.2rem 2rem 0;
}

.citrus-page-head h1 {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.citrus-page-head .sub { font-size: 0.72rem; color: var(--text-muted, #b0b0b0); }

@media (max-width: 900px) {
    .citrus-bar { padding: 0.75rem 1rem; gap: 0.5rem; }
    .citrus-bar-left { gap: 0.75rem; }
    .citrus-bar nav { gap: 0.75rem; }
    .citrus-account-name { max-width: 8ch; }
    .citrus-subnav, .citrus-page-head { padding-left: 1rem; padding-right: 1rem; }
}