/* Tabs. Loaded only by the pages that use them, via {% block extra_css %}.

   Timings and easings are taken from the reference implementation:
   panel children rise 40px and fade in over 650ms on easeOutCubic, staggered
   100ms, after a 200ms delay. The dropdown fades and rises 10px over 300ms. */

@layer components {

    /* Without JS the bar does nothing, so it stays hidden and every panel remains
       visible. tabs.js sets data-tabs-ready once it has taken over. */
    .tab-bar {
        display: none;
    }

    [data-tabs-ready] .tab-bar {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        max-width: 100%;
        min-width: 0;
        margin-bottom: var(--space-7);
        padding: var(--space-1);
        border-radius: var(--radius-full);
        background: var(--warm-strong);
    }

    /* The track lives on .tab-bar rather than here, so the "more" button can sit
       inside the same pill without being a child of role="tablist", which may
       only own tabs. */
    .tab-list {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--space-1);
        min-width: 0;
    }

    .tab {
        display: inline-flex;
        /* Never compress: layout() measures these to decide how many fit, and a
           shrunken tab would read narrower than it really is. */
        flex-shrink: 0;
        align-items: center;
        gap: var(--space-2);
        min-height: 2.75rem;
        padding: var(--space-2) var(--space-5);
        border: 1px solid transparent;
        border-radius: var(--radius-full);
        background: transparent;
        color: var(--text-muted);
        font-family: inherit;
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug);
        white-space: nowrap;
        cursor: pointer;
        transition:
            color 500ms cubic-bezier(0.215, 0.61, 0.355, 1),
            background-color 500ms cubic-bezier(0.215, 0.61, 0.355, 1),
            border-color 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .tab > .icon {
        flex-shrink: 0;
        color: currentColor;
    }

    /* Hover and selected are the same white pill: the hover state previews
       exactly what picking it will look like. Colour only, no shadow, no movement. */
    .tab:hover,
    .tab[aria-selected="true"] {
        border-color: var(--border);
        background: var(--surface);
        color: var(--heading);
    }

    /* Hovering another tab hands the white pill over to it, so only one thing
       reads as picked at a time. Straight from the reference implementation. */
    .tab-list:has(.tab[aria-selected="false"]:hover) .tab[aria-selected="true"] {
        border-color: transparent;
        background: transparent;
    }

    /* ---------- Overflow dropdown (narrow screens) ---------- */

    .tab-overflow {
        position: relative;
        flex-shrink: 0;
    }

    .tab-more {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-full);
        background: var(--surface);
        color: var(--text-muted);
        cursor: pointer;
        transition:
            border-color var(--base) var(--ease),
            color var(--base) var(--ease);
    }

    .tab-more:hover,
    .tab-more[aria-expanded="true"] {
        border-color: var(--border-strong);
        color: var(--heading);
    }

    .tab-menu {
        position: absolute;
        top: calc(100% + var(--space-3));
        right: 0;
        z-index: var(--z-float);
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        min-width: 13rem;
        padding: var(--space-2);
        border: var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow);
    }

    /* A panel that floats over the page keeps its own elevation */
    .tab-menu .tab {
        justify-content: flex-start;
        /* A label here may wrap onto two lines, so top-align rather than centre:
           a centred icon would drift down beside the middle of the block. */
        align-items: flex-start;
        width: 100%;
        border-radius: var(--radius-sm);
        text-align: left;
        white-space: normal;
    }

    /* Half the leading above and below lifts the icon onto the first line. */
    .tab-menu .tab > .icon {
        margin-top: calc((var(--leading-snug) * 1em - 1em) / 2);
    }

    .tab-menu .tab:hover {
        background: var(--surface-muted);
    }

    .tab-menu[data-closing],
    .tab-menu:not([data-open]) {
        opacity: 0;
        translate: 0 10px;
    }

    .tab-menu[data-open] {
        opacity: 1;
        translate: 0 0;
        transition:
            opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
            translate 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .tab-menu[data-closing] {
        transition:
            opacity 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53),
            translate 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }

    /* The dropdown is pointless when every tab already fits in the bar */
    .tab-overflow:not([data-has-overflow]) {
        display: none;
    }

    /* ---------- Panels ---------- */

    .tab-panel > * {
        display: grid;
        gap: var(--space-5);
    }

    .tab-panel:focus-visible {
        outline: 2px solid var(--heading);
        outline-offset: var(--space-3);
        border-radius: var(--radius);
    }

    .tab-step {
        color: var(--text-muted);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
    }

    .tab-panel-title {
        font-size: var(--text-2xl);
    }

    /* Re-run on every switch: tabs.js removes the attribute and re-adds it */
    @media (prefers-reduced-motion: no-preference) {
        .tab-panel[data-enter] > * > * {
            animation: tab-enter 650ms cubic-bezier(0.215, 0.61, 0.355, 1) 200ms backwards;
        }

        .tab-panel[data-enter] > * > :nth-child(2) {
            animation-delay: 300ms;
        }

        .tab-panel[data-enter] > * > :nth-child(3) {
            animation-delay: 400ms;
        }

        .tab-panel[data-enter] > * > :nth-child(n + 4) {
            animation-delay: 500ms;
        }
    }

    @keyframes tab-enter {
        from {
            opacity: 0;
            translate: 0 40px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .tab,
        .tab-menu,
        .tab-more {
            transition: none;
        }
    }
}