/*
 * content-page-tabs.css — tab strip for the content-page header (opt-in via
 * descriptor.tabs). Pairs with controls/content-page-tabs.js.
 *
 * Underlined-tab style: the active tab gets a text-primary label and an
 * underline indicator; inactive tabs are muted. A hairline runs the full width
 * beneath the row. Each tab carries an optional count badge.
 *
 * Tokens only (--text-*, --border, --bg-*); no raw hex — see
 * .claude/rules/ui-design-scope.md.
 */

.lp-content-tabs {
    display: flex;
    align-items: stretch;
    gap: 24px;
    border-bottom: 1px solid var(--border);
}

.lp-content-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 2px 12px;
    margin-bottom: -1px;            /* overlap the row's bottom border */
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}

.lp-content-tab:hover { color: var(--text-primary); }

.lp-content-tab-active,
.lp-content-tab-active:hover {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
    font-weight: 600;
}

.lp-content-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Count badge — a small pill of the loaded item count, trailing the label. */
.lp-content-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.lp-content-tab-badge[hidden] { display: none; }

.lp-content-tab-active .lp-content-tab-badge {
    background: color-mix(in srgb, var(--text-primary) 12%, transparent);
    color: var(--text-primary);
}