/* ============================================================================
   subtabs.css — SINGLE SOURCE for in-section sub-tabs (pairs with
   js/render/subTabs.js). Two variants:

   • PILL  (.subtabs--pill / .subtab--pill) — a league-type switcher where
     exactly one tab is active. The pill size/shape/colour comes from the shared
     .league-type-pill .type-* classes (components.css); here we only style the
     active-vs-inactive state. Pairs with mountPillTabs().

   • ACCORDION (.subtabs--accordion / .subtab--accordion) — expandable rows with
     a ▸/▾ arrow where zero or one panel is open at a time. Pairs with
     mountAccordionTabs(). The opened panel is .subtab-panel.

   Replaces the former per-page copies: .pg-tab (player-general.css),
   .achv-tab (index-dashboard.css), and the .rem-tab-* block duplicated across
   dashboard.css + admin.css.
   ============================================================================ */

.subtabs {
    display: flex;
    flex-wrap: wrap;
}

/* ---- PILL variant ---- */
.subtabs--pill {
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.subtab--pill {
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}
/* Size pinned to the absolute token, NOT inherited (2026-08-29). These carry
   .league-type-pill for their shape and colour, and that class is now `1em` so a
   pill tracks the table it sits in — but a filter bar sits in no table. Its
   parent is the page (15px), so inheriting would grow these to 15px and change a
   TAP TARGET: they are controls, not labels. Pinning holds them at exactly the
   12.75px/20px-tall box they have always had, on every viewport. */
.subtabs--pill .subtab--pill {
    font-size: var(--fs-085);
}
/* Inactive state. Descendant-scoped (.subtabs--pill …) so it reliably beats the
   equal-specificity .league-type-pill.type-* colour rule regardless of which
   stylesheet loads last — every inactive pill looks identical, every type. */
.subtabs--pill .subtab--pill:not(.active) {
    background: transparent;
    color: var(--color-text-muted);
    opacity: 0.55;
}
.subtabs--pill .subtab--pill:not(.active):hover { opacity: 0.85; }
/* Locked bar (e.g. landing edit mode, where the filter must stay on ALL). */
.subtabs--pill .subtab--pill:disabled { cursor: default; opacity: 0.35; }
.subtabs--pill .subtab--pill:disabled:hover { opacity: 0.35; }

/* ---- Neutral pill shape (.ml-pill / .pill-neutral) ----
   `.subtab--pill` alone carries no box: the league-type pills borrow their
   shape from `.league-type-pill`. A pill that is NOT a league type therefore
   has to define its own, which is what the match-length sub-selector
   (mountLengthSelector) did first.

   `.pill-neutral` is that same shape under a name that does not claim to be
   about match length — for filter toggles and any other neutral pill. Adding
   the alias rather than renaming keeps every existing `.ml-pill` element
   untouched. Both names, one shape: there is exactly one neutral pill in this
   codebase, and it should look the same everywhere.

   A lighter, neutral secondary pill row that sits under the league-type pills to
   narrow a histogram to one match length. Its pills carry no league-type colour,
   so — unlike the type pills — they define their own themed shape here. */
.ml-select {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin: calc(-1 * var(--space-xs)) 0 var(--space-md);
}
.ml-select .subtabs--pill { margin-bottom: 0; gap: var(--space-xs); }
.ml-select-cap {
    font-size: var(--fs-080);
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.subtab--pill.ml-pill,
.subtab--pill.pill-neutral {
    padding: 0.16em 0.7em;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--fs-080);
    font-weight: 600;
}
/* Higher specificity than the generic inactive rule so the themed shape holds. */
.subtabs--pill .subtab--pill.ml-pill:not(.active),
.subtabs--pill .subtab--pill.pill-neutral:not(.active) {
    background: var(--color-surface);
    color: var(--color-text-muted);
    opacity: 0.75;
}
.subtabs--pill .subtab--pill.ml-pill:not(.active):hover,
.subtabs--pill .subtab--pill.pill-neutral:not(.active):hover {
    opacity: 1;
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.subtabs--pill .subtab--pill.ml-pill.active,
.subtabs--pill .subtab--pill.pill-neutral.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg);
    opacity: 1;
}

/* Standalone `.pill-neutral` — the same three states WITHOUT a
   `.subtabs--pill` bar around it. The descendant-scoped rules above exist to
   out-specify `.league-type-pill.type-*`; a neutral pill has no such collision,
   so it does not need a wrapper to look right. That matters because a filter
   toggle usually belongs beside an existing control (a month select, a search
   box), not in a pill bar of its own — and a wrapper added purely to satisfy a
   selector would also drag in that bar's gap and margin. */
.subtab--pill.pill-neutral:not(.active) {
    background: var(--color-surface);
    color: var(--color-text-muted);
    opacity: 0.75;
}
.subtab--pill.pill-neutral:not(.active):hover {
    opacity: 1;
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.subtab--pill.pill-neutral.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg);
    opacity: 1;
}

/* ---- ACCORDION variant ---- */
.subtabs--accordion {
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}
.subtab--accordion {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-accent);
    font-family: var(--font-main);
    font-size: var(--fs-085);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
}
.subtab--accordion:hover {
    background: var(--color-hover);
    border-color: var(--color-accent);
}
.subtab--accordion.is-open {
    background: var(--color-accent);
    color: var(--color-bg);
    border-color: var(--color-accent);
}
.subtab--accordion.is-open:hover {
    background: var(--color-text);
    border-color: var(--color-text);
}
.subtab-arrow { font-size: 0.75em; }

/* Opened accordion panel — a framed surface card under its tab. */
.subtab-panel {
    margin-top: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.subtab-panel[hidden] { display: none; }