.hdr-logo-link { text-decoration: none; }

.fadb-logo-mark {
    display: inline-block;
    height: 0.8em; aspect-ratio: 3 / 1;
    vertical-align: -0.05em; margin-right: 0.1em;
    background-color: #2563eb;
    -webkit-mask: var(--logo-src) no-repeat center / contain;
            mask: var(--logo-src) no-repeat center / contain;
}
body.dark-mode .fadb-logo-mark { background-color: var(--primary-color); }

.hdr-theme-icon {
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.4s ease;
}

.hdr-top-nav { gap: 0.1rem; }

.um-wrap { position: relative; display: inline-flex; }

.um-login {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 6px;
    font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}
.um-login:hover { background: var(--hover-bg); }

.um-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--accent-color); color: #fff;
    font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
    font-family: inherit; letter-spacing: .02em;
}
.um-btn:hover { filter: brightness(1.1); }

/* Dark mode: the avatar button follows the primary accent. --on-accent rather
   than the #fff above -- white on #4d99dc is only 3.04:1, which the initials
   inside a 32px circle cannot carry. */
body.dark-mode .um-btn {
    background: var(--primary-color);
    color: var(--on-accent);
}

.um-panel {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 210px; z-index: 1200;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px; box-shadow: 0 8px 26px rgba(0,0,0,.14);
    padding: 6px; text-align: left;
}
.um-wrap.um-open .um-panel { display: block; }

.um-head {
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 6px;
}
.um-head .um-name { font-weight: 700; font-size: var(--fs-md); color: var(--text-color); }
.um-head .um-sub  { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; }
.um-badge {
    display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 10px;
    background: #2e5d78; color: #fff; font-size: var(--fs-4xs); font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px;
}

.um-panel a {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 6px;
    font-size: var(--fs-sm); text-decoration: none;
    color: var(--text-color);
}
.um-panel a:hover { background: var(--hover-bg); }
.um-panel a i { width: 15px; text-align: center; color: var(--text-muted); }
.um-sep { height: 1px; background: var(--border-color); margin: 6px 2px; }
.um-panel a.um-danger { color: #a33; }
.um-panel a.um-danger i { color: #a33; }

#admin-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99999;
    background: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: var(--fs-2xs);
    line-height: 1;
    padding: 4px 8px;
    border-top-left-radius: 4px;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100vw;
}
#admin-bar .ab-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#admin-bar a,
#admin-bar .ab-action {
    color: #fff;
    text-decoration: none;
    padding: 2px 5px;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
}
#admin-bar a:hover,
#admin-bar .ab-action:hover { background: #333; }
#admin-bar .ab-sep {
    width: 1px;
    align-self: stretch;
    background: #555;
    margin: 1px 2px;
}
#admin-bar .ab-msg {
    color: #9ae69a;
    font-size: var(--fs-3xs);
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#admin-bar .ab-collapse {
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    background: #222;
    border-radius: 2px;
    font-size: var(--fs-3xs);
}
#admin-bar .ab-collapse:hover { background: #444; }

#admin-bar-expand {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99999;
    background: #000;
    color: #fff;
    cursor: pointer;
    padding: 2px 8px;
    font-size: var(--fs-2xs);
    border-top-left-radius: 4px;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.25);
}
#admin-bar-expand:hover { background: #333; }

#admin-bar.u-hidden,
#admin-bar-expand.u-hidden { display: none; }

/* ── Phase badges (Phase 1 + Phase 2 + Admin) ─────────────────────────────── */

.phaseOne {
    --phase-color: rgb(237 205 78 / 0.7);
    --phase-badge: url("/fadb/assets_ui/images/phase1_badge.svg");
}
.phaseTwo {
    --phase-color: rgb(237 158 78 / 0.7);
    --phase-badge: url("/fadb/assets_ui/images/phase2_badge.svg");
}
/* Admin-only — the tier above Phase 2. Used by per-topic phases
   (TopicsManager / Auth::phaseClass); same frame + badge mechanics. */
.phaseAdm {
    --phase-color: rgb(184 67 63 / 0.7);
    --phase-badge: url("/fadb/assets_ui/images/phaseadm_badge.svg");
}

.phaseOne,
.phaseTwo,
.phaseAdm {
    position: relative;
    padding: 3px;
}
.phaseOne,
.phaseTwo,
.phaseAdm,
.fap-side-menu button.phaseOne,
.fap-side-menu button.phaseTwo,
.fap-side-menu button.phaseAdm {
    border: 2px solid var(--phase-color);
}

.phaseOne::after,
.phaseTwo::after,
.phaseAdm::after {
    content: "";
    position: absolute;
    top: -10px;
    right: 10px;
    width: 76px;
    height: 20px;
    border-radius: 5px 5px 0 0;
    background: var(--phase-badge) no-repeat center / contain;
    pointer-events: none;
    z-index: 10;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
    opacity: 0.8;
}
.nav-link.phaseOne::after,
.nav-link.phaseTwo::after,
.nav-link.phaseAdm::after,
button.phaseOne::after,
button.phaseTwo::after,
button.phaseAdm::after {
    top: -10px;
    right: 0;
    width: 51px;
    height: 15px;
}
.fap-top-tabs .phaseOne:after,
.fap-top-tabs .phaseTwo:after,
.fap-top-tabs .phaseAdm:after {
    top: 1px;
    right: 30px;
}

body.fa-hide-phase .phaseOne,
body.fa-hide-phase .phaseTwo,
body.fa-hide-phase .phaseAdm,
body.fa-hide-phase .fap-side-menu button.phaseOne,
body.fa-hide-phase .fap-side-menu button.phaseTwo,
body.fa-hide-phase .fap-side-menu button.phaseAdm {
    border-color: transparent !important;
}
body.fa-hide-phase .phaseOne::after,
body.fa-hide-phase .phaseTwo::after,
body.fa-hide-phase .phaseAdm::after {
    background: transparent !important;
    color: transparent !important;
    filter: none !important;
    opacity: 0 !important;
}

/* ── Phase badges in the Topics section ────────────────────────────────────
   Topics are gated one topic at a time, so the badge lands on LIST ROWS, not
   on a page-sized block: ~34px nav rows, TOC cards, "Explore further" links,
   the prev/next pager. The default corner tab (top:-10px) hangs ABOVE its own
   element, which in a list that dense reads as belonging to the row above —
   it looked exactly that wrong the first time. So here the badge sits INSIDE
   the row, centred on the right, and the row reserves room for it. The frame
   still marks the tier; only the badge's placement changes.

   Keep this list flat and one rule: every badged thing in the section gets
   the same treatment, so nothing can collide with its neighbour. */
.tp-nav-link.phaseOne,      .tp-nav-link.phaseTwo,      .tp-nav-link.phaseAdm,
.tp-nav-glink.phaseOne,     .tp-nav-glink.phaseTwo,     .tp-nav-glink.phaseAdm,
.tp-nav-group-btn.phaseOne, .tp-nav-group-btn.phaseTwo, .tp-nav-group-btn.phaseAdm,
.tp-card.phaseOne,          .tp-card.phaseTwo,          .tp-card.phaseAdm,
.tp-toc-group-h.phaseOne,   .tp-toc-group-h.phaseTwo,   .tp-toc-group-h.phaseAdm,
.tp-pager-btn.phaseOne,     .tp-pager-btn.phaseTwo,     .tp-pager-btn.phaseAdm,
.tp-link.phaseOne,          .tp-link.phaseTwo,          .tp-link.phaseAdm {
    padding-right: 64px;
}
.tp-nav-link.phaseOne::after,      .tp-nav-link.phaseTwo::after,      .tp-nav-link.phaseAdm::after,
.tp-nav-glink.phaseOne::after,     .tp-nav-glink.phaseTwo::after,     .tp-nav-glink.phaseAdm::after,
.tp-nav-group-btn.phaseOne::after, .tp-nav-group-btn.phaseTwo::after, .tp-nav-group-btn.phaseAdm::after,
.tp-card.phaseOne::after,          .tp-card.phaseTwo::after,          .tp-card.phaseAdm::after,
.tp-toc-group-h.phaseOne::after,   .tp-toc-group-h.phaseTwo::after,   .tp-toc-group-h.phaseAdm::after,
.tp-pager-btn.phaseOne::after,     .tp-pager-btn.phaseTwo::after,     .tp-pager-btn.phaseAdm::after,
.tp-link.phaseOne::after,          .tp-link.phaseTwo::after,          .tp-link.phaseAdm::after {
    top: 50%;
    right: 7px;
    bottom: auto;
    transform: translateY(-50%);
    width: 51px;
    height: 15px;
    border-radius: 8px;
    filter: none;
}
/* The caret on an expandable group would sit under the badge. */
.tp-nav-group-btn.phaseOne .tp-nav-caret,
.tp-nav-group-btn.phaseTwo .tp-nav-caret,
.tp-nav-group-btn.phaseAdm .tp-nav-caret { margin-right: 4px; }

/* An "Explore further" entry is an inline <a>: an inline box does not grow the
   line for its own border, so the frame draws clipped. inline-flex gives it a
   real box (and keeps the badge centred against it). */
.tp-link.phaseOne,
.tp-link.phaseTwo,
.tp-link.phaseAdm {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 7px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 6px;
}

/* A TOC group heading is bare text, so give the frame something to sit on. */
.tp-toc-group-h.phaseOne,
.tp-toc-group-h.phaseTwo,
.tp-toc-group-h.phaseAdm { padding-top: 4px; padding-bottom: 4px; padding-left: 8px; border-radius: 7px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — the app header below 820px
   ═══════════════════════════════════════════════════════════════════════════ */

.hdr-nav-wrap { display: contents; }
.hdr-nav-toggle { display: none; }

@media (max-width: 820px) {

    .hdr-nav-wrap {
        display: block;
        position: relative;
        margin-left: auto;
    }
    .header-actions { margin-left: 0; }

    /* Icon button — same --icon-* ramp as .toolBtn / .theme-toggle. */
    .hdr-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: var(--icon-bg);
        color: var(--text-muted);
        cursor: pointer;
        font-size: var(--fs-lg);
        transition: background .14s ease, color .14s ease;
    }
    .hdr-nav-toggle:hover { background: var(--icon-bg-hover); color: var(--primary-color); }
    .hdr-nav-toggle[aria-expanded="true"] {
        background: var(--icon-bg-active);
        color: var(--primary-color);
    }

    /* The link row, re-laid-out as a panel. Hidden until the burger opens it. */
    .hdr-nav-wrap .hdr-top-nav {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 1200;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        min-width: 200px;
        padding: 6px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: 0 8px 26px rgba(0, 0, 0, .14);
    }
    .hdr-nav-wrap.hdr-nav-open .hdr-top-nav { display: flex; }

    .hdr-nav-wrap .hdr-top-nav .nav-link {
        justify-content: flex-start;
        padding: 0.6rem 0.75rem;
        font-size: var(--fs-md);
    }

    /* The Phase 2 ribbon is drawn OUTSIDE the link's box (top: -10px), which is
       fine on a horizontal row and clips against the panel's padding here. The
       badge stays, pulled inside the row. */
    .hdr-nav-wrap .hdr-top-nav .nav-link.phaseOne::after,
    .hdr-nav-wrap .hdr-top-nav .nav-link.phaseTwo::after {
        top: 50%;
        right: 6px;
        transform: translateY(-50%);
    }

    /* Log in moves into the panel (top_nav.php renders it); the bar copy goes. */
    .um-login { display: none; }

    /* Dropped entirely at this width. */
    .gs-wrap,
    .fp-wrap { display: none; }
}

/* The mobile-only login row inside the burger panel — never in the desktop bar. */
.hdr-nav-login { display: none; }
@media (max-width: 820px) {
    .hdr-nav-wrap .hdr-top-nav .hdr-nav-login {
        display: inline-flex;
        margin-top: 4px;
        border-top: 1px solid var(--border-color);
        padding-top: 0.7rem;
        border-radius: 0 0 6px 6px;
    }
}