/* ============================================================================
   tabs.css — Reusable segmented tab-bar (.app-tabs).
   Visual half of the tab system; behaviour lives in js/render/appTabs.js
   (mountAppTabs — activation, ?tab= URL state, ARIA keyboard nav, 1-N hotkeys).
   Used by index.html (HOME); intended to spread to dashboard, league, player,
   player-general as those pages get their own Progressive-Disclosure rewrite.

   Contract (emitted by mountAppTabs):
     <div class="app-tabs-shell …">
       <div class="app-tabs" role="tablist" aria-label="…">
         <button class="app-tab" role="tab" aria-selected="true|false"
                 aria-controls="…" data-tab="<slug>" tabindex="0|-1">Label</button>
         …
       </div>
       <div class="app-tab-panel …" role="tabpanel" aria-labelledby="…"
            data-panel="<slug>" [hidden]>…</div>
       …
     </div>
   Tabs use a roving tabindex (only the selected tab is tabbable); the panel
   half is hidden via the [hidden] rule at the foot of this file.

   Iron rules:
     • Always equal-width across the row (every tab gets flex: 1).
     • Linear font + padding scaling via clamp() — NO viewport breakpoint
       collapses the bar into horizontal-scroll. The 4 tabs always fill the row.
     • Card-style chrome (subtle inset surface + shadow) that adapts to themes
       through token color-mix so dark/vegas/x22/rainbow/casino read correctly
       without per-theme overrides for every tab.
   ============================================================================ */

.app-tabs {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--color-hover, #f5f6f8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.app-tab {
    flex: 1 1 0;
    min-width: 0;                                /* allow shrinking below intrinsic width */
    background: transparent;
    border: 0;
    /* Linear scale: 320px viewport → ~12.5px font + tight padding;
       1440px viewport → 16px font + comfortable padding. No jump.
       The whole clamp (min / rem-base / vw-slope / max) was scaled by one
       constant factor (≈1.18) off the previous 0.66/0.45/0.8/0.85 ramp, so the
       slope and viewport breakpoints are unchanged — only the size shifts up,
       preserving the proportional ratio with the rest of the type scale. */
    padding: clamp(0.40em, 0.9vw, 0.65em) clamp(0.30em, 1.0vw, 0.70em);
    font: inherit;
    font-size: clamp(0.78rem, 0.53rem + 0.94vw, 1.0rem);
    font-weight: 600;
    color: var(--color-text-muted);
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.14s, color 0.14s, box-shadow 0.14s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;                     /* tiny viewports — never wrap */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
}

.app-tab:hover {
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    color: var(--color-text);
}

.app-tab[aria-selected="true"] {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    font-weight: 700;
}

.app-tab:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Theme adaptations — darken the strip on themes where the page bg is dark,
   so the inactive bar reads as a subtle inset rather than a hard slab. */
[data-theme="dark"]    .app-tabs,
[data-theme="vegas"]   .app-tabs,
[data-theme="x22"]     .app-tabs,
[data-theme="rainbow"] .app-tabs,
[data-theme="casino"]  .app-tabs {
    background: color-mix(in srgb, var(--color-text) 10%, var(--color-bg));
}
[data-theme="dark"]    .app-tab[aria-selected="true"],
[data-theme="vegas"]   .app-tab[aria-selected="true"],
[data-theme="x22"]     .app-tab[aria-selected="true"],
[data-theme="rainbow"] .app-tab[aria-selected="true"],
[data-theme="casino"]  .app-tab[aria-selected="true"] {
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 1px 6px rgba(0,0,0,0.18);
}

/* Decorative tab icon (emoji or inline SVG glyph) — sits left of the label.
   The .app-tab flex `gap` already spaces it from the text. Icon never shrinks;
   the label keeps the ellipsis behaviour on tiny viewports. */
.app-tab-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05em;                           /* emoji sizing relative to label */
    line-height: 1;
}
.app-tab-glyph {
    width: 1.15em;
    height: 1.15em;
    display: block;
}
.app-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tab panels follow the same naming for symmetry. */
.app-tab-panel[hidden] { display: none; }