/* ---------- Two-row header: brand + account on top, a scrolling menu strip underneath ---------- */
.site-header { z-index: 1030; box-shadow: 0 3px 12px var(--shadow); }
.site-header .navbar { box-shadow: none; }
.btn-header { color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); }
.btn-header:hover, .btn-header:focus, .btn-header.show { color: #fff; background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .5); }
.btn-header .badge { position: absolute; top: 0; left: 100%; transform: translate(-60%, -40%); font-size: .65rem; }
.menu-strip { background: var(--surface); border-bottom: 1px solid var(--border); }
.menu-track {
    list-style: none; margin: 0; padding: .45rem .15rem; display: flex; gap: .4rem; flex-wrap: nowrap;
    overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none;
}
.menu-track::-webkit-scrollbar { display: none; }
.menu-track li { flex: 0 0 auto; scroll-snap-align: start; }
.menu-pill {
    display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; text-decoration: none;
    padding: .4rem .85rem .4rem .45rem; border-radius: 999px; color: var(--text); font-weight: 500; font-size: .93rem;
    background: var(--brand-tint); border: 1px solid transparent; transition: background .15s, border-color .15s, transform .15s;
}
.menu-pill:hover { background: var(--brand-soft); border-color: var(--border); transform: translateY(-1px); color: var(--heading); }
.menu-pill.active { background: var(--brand); color: var(--on-brand); box-shadow: 0 2px 6px var(--shadow); border-color: var(--accent); }
.menu-ico { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }
.menu-pill.active .menu-ico { background: rgba(255, 255, 255, .2) !important; color: var(--accent) !important; }
.ico-green  { background: var(--green-soft);  color: var(--green); }
.ico-amber  { background: var(--amber-soft);  color: var(--amber); }
.ico-teal   { background: var(--teal-soft);   color: var(--teal); }
.ico-coral  { background: var(--coral-soft);  color: var(--coral); }
.ico-indigo { background: var(--indigo-soft); color: var(--indigo); }
.ico-rose   { background: var(--rose-soft);   color: var(--rose); }
.menu-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 2rem; height: 2rem; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface); color: var(--link); box-shadow: 0 2px 8px var(--shadow);
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.menu-arrow[hidden] { display: none; }
.menu-arrow:hover { background: var(--brand-soft); }
.menu-arrow-left { left: -.25rem; }
.menu-arrow-right { right: -.25rem; }
/* Fade at the edges that have more menu behind them. */
.menu-strip.can-left .menu-track  { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem); mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem); }
.menu-strip.can-right .menu-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent 100%); }
.menu-strip.can-left.can-right .menu-track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%); }
@media (max-width: 575.98px) { .menu-arrow { display: none; } .menu-pill { font-size: .88rem; } }
@media (display-mode: standalone) { .site-header .navbar { padding-top: calc(.5rem + env(safe-area-inset-top)); } }

/* ---------- Theme switcher in the header ---------- */
.theme-option { display: flex; align-items: center; gap: .6rem; }
.theme-swatch { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; }
.theme-swatch[data-swatch="navy"]  { background: linear-gradient(135deg, #1F2A5A 55%, #C9A227 55%); }
.theme-swatch[data-swatch="green"] { background: linear-gradient(135deg, #2F855A 55%, #E3F4E9 55%); }
.theme-swatch[data-swatch="dark"]  { background: linear-gradient(135deg, #12141C 55%, #E9C46A 55%); }
.theme-option .theme-check { margin-left: auto; visibility: hidden; color: var(--accent-text); }
.theme-option.is-current .theme-check { visibility: visible; }