.lg-nav {
    --bg:        #0d0d0e;
    --card:      #151516;
    --hover:     #1b1b1d;
    --line:      rgba(99,99,99,0.25);
    --line-soft: rgba(99,99,99,0.12);
    --ink:       #e0e0e0;
    --ink-dim:   rgba(224,224,224,0.8);
    --ink-faint: rgba(224,224,224,0.65);
    --accent:    #ff9900;
    background: var(--card);
    border-bottom: 1px solid var(--line-soft);
    padding: 0.55rem 1.25rem;
    display: flex; align-items: center; gap: 0.85rem;
    overflow-x: auto;
}
.lg-nav-brand {
    font-size: 0.74rem; font-weight: 700;
    color: var(--ink-dim);
    text-transform: uppercase; letter-spacing: 0.16em;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding-right: 0.85rem;
    border-right: 1px solid var(--line-soft);
}
.lg-nav-brand::before { content: "▸"; color: var(--accent); }
.lg-tabs { display: inline-flex; gap: 2px; flex-wrap: nowrap; }
.lg-tab {
    background: transparent; border: 1px solid transparent;
    color: var(--ink-dim);
    font-size: 0.78rem; font-weight: 600;
    padding: 0.42rem 0.85rem;
    border-radius: 0; cursor: pointer; white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.lg-tab:hover { background: var(--hover); color: var(--ink); }
.lg-tab.is-active {
    background: rgba(255,153,0,0.1);
    color: var(--accent);
    border-color: rgba(255,153,0,0.3);
}

/* Short labels exist for phones only. The label spans take the tab's colour
   (style.css colours every element with its own * rule). */
.lg-tab > span { color: inherit; }
.lg-tab-short { display: none; }

/* ── Phones and tablets ─────────────────────────────────────────────
   The switcher stays reachable below 1200px: the tabs are a scrolling
   strip (vt-strip) with 44px cells, and on phones the brand drops out
   and the labels shorten so most of the row fits at once. */
@media (max-width: 1199.98px) {
    .lg-nav { padding: 0 0.25rem; overflow: visible; }
    .lg-tabs { min-width: 0; flex: 1 1 auto; padding-block: 0.25rem; }
    .lg-tab { display: inline-flex; align-items: center; }
    .lg-nav-brand { font-size: max(var(--vt-fs-floor), 0.74rem); padding-left: 1rem; }
}
@media (max-width: 767.98px) {
    .lg-nav-brand { display: none; }
    .lg-tab-long { display: none; }
    .lg-tab-short { display: inline; }
}