/*
    White label: a tab bar over numbered, collapsible sections.

    The tab bar and the section headings are the only chrome added here; the
    cards themselves are Filament's own sections, so they keep the panel's
    spacing, dark mode and focus states. Colours come from the portal tokens.
*/
.wl-page { display: flex; flex-direction: column; gap: 1rem; }

.wl-tabbar {
    display: flex; gap: .35rem; overflow-x: auto; padding: .35rem;
    background: var(--fs-surface); border: 1px solid var(--fs-line); border-radius: 14px;
    scrollbar-width: thin;
}
.wl-tab {
    display: inline-flex; align-items: center; gap: .45rem; flex: 0 0 auto;
    border: 0; background: transparent; color: var(--fs-muted);
    font-size: .85rem; font-weight: 600; line-height: 1;
    padding: .6rem .85rem; border-radius: 10px; cursor: pointer; white-space: nowrap;
}
.wl-tab:hover { background: var(--fs-sunk); color: var(--fs-ink); }
.wl-tab.is-on { background: rgb(245 50 91 / .1); color: var(--fs-accent); }
.wl-tab:focus-visible { outline: 2px solid var(--fs-accent); outline-offset: 2px; }
.wl-tab svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* The step number, rendered inside each section's own heading. */
.wl-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 25px; height: 25px; margin-right: .55rem; vertical-align: middle;
    border-radius: 999px; background: var(--fs-accent); color: #fff;
    font-size: .76rem; font-weight: 800; font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
    .wl-tab span { display: none; }
    .wl-tab { padding: .6rem .75rem; }
}