/*
 * Shared tab styles — mirrors @astrojs/starlight Tabs.astro styles
 * using --brand-* tokens instead of --sl-* tokens.
 *
 * Used by non-Starlight pages (e.g. site /apps/[id]) that render
 * <starlight-tabs> HTML produced by markdown.ts.
 *
 * Token mapping:
 *   --sl-color-gray-5       → --brand-border
 *   --sl-color-gray-3       → --brand-text-weak
 *   --sl-color-white        → --brand-text-strong
 *   --sl-color-text-accent  → --brand-text-strong
 */

starlight-tabs {
    display: block;
}

starlight-tabs .tablist-wrapper {
    overflow-x: auto;
}

starlight-tabs [role='tablist'] {
    display: flex;
    list-style: none;
    border-bottom: 2px solid var(--brand-border);
    padding: 0;
    margin: 0;
}

starlight-tabs .tab {
    margin-bottom: -2px;
}

starlight-tabs .tab > [role='tab'] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    color: var(--brand-text-weak);
    overflow-wrap: initial;
    font-size: var(--brand-font-size-sm);
    line-height: 1.5;
    white-space: nowrap;
}

starlight-tabs .tab > [role='tab'][aria-selected='true'] {
    color: var(--brand-text-strong);
    border-bottom-color: var(--brand-text-strong);
    font-weight: 600;
}

starlight-tabs .tab > [role='tab']:hover:not([aria-selected='true']) {
    color: var(--brand-text);
}

starlight-tabs [role='tabpanel'] {
    margin-top: 1rem;
}