:root {
    --active-tab-bg: var(--light-surface);
}

/* Tab headers */
.tablist {
    display: flex;
    gap: var(--space-2);
    align-items: end;
}
.tab {
    appearance: none;           /*implemented as a button*/

    background: var(--control);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-bold);
    color: var(--muted-text);

    border: 1.5px solid var(--border-strong);
    border-bottom: 0;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    margin-bottom: -1.5px;        /*let border-bottom cover panel border-top*/
    z-index: 0;

    padding: var(--space-2) var(--space-4);

    cursor: pointer;
}
.tab:hover  { background: var(--control-hover); }
.tab:active { background: var(--control-active); }
.tab[aria-selected="true"] {
    background: var(--active-tab-bg);
    color: var(--text);
    border-color: var(--border-strong);
    border-bottom: 1.5px solid var(--active-tab-bg);
    z-index: 2;
}
.tab:focus-visible {
    box-shadow: var(--focus-ring);
}

/* Panels */
.tabpanel {
    display: none;
    border: 1.5px solid var(--border-strong);

    border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
    background: var(--active-tab-bg);
    box-shadow: var(--shadow-0);

    padding: var(--space-4);
    z-index: 1;
}
.tabpanel[data-active="true"] { display: block; }

/* No-JS fallback: show all panels stacked */
noscript .tabpanel { display: block; margin-top: var(--space-2); }