/* Named patterns: stat table scroll region, leaders strip, style guide
   scaffolding. (The stat legend is bare dl/details, styled in base.css.)
   See docs/agents/styling.md. */

@layer components {
    /* The StatTable scroll region: the table moves, the page never does. The
       edge affordance is the background-attachment trick: the local layer rides
       the content and covers the fixed shadow when there is nothing further to
       scroll to, so a fading right edge means more columns exist. */
    .table-scroll {
        background:
            linear-gradient(to left, var(--bg), transparent var(--space-xl)) 100% 0 / var(--space-xl) 100% no-repeat local,
            radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) 100% 0 / var(--space-sm) 100% no-repeat scroll;
        margin-block: var(--space-sm);
        max-inline-size: 100%;
        overflow-x: auto;
    }

    .table-scroll table {
        margin-block: 0;
    }

    /* The sticky identity column: whose number you are looking at stays on
       screen. The background must be opaque — from a token, never transparent —
       or rows scroll visibly beneath it; the seam border says "this column is
       pinned" rather than reading as a rendering artefact. */
    .table-scroll th:first-child,
    .table-scroll td:first-child {
        background: var(--surface);
        border-inline-end: 1px solid var(--border-strong);
        inset-inline-start: 0;
        position: sticky;
        z-index: 1;
    }

    .table-scroll thead th:first-child {
        background: var(--surface-alt);
    }

    /* The home page's league-leaders strip: one tile per headline stat. */
    .leaders-strip ul {
        display: grid;
        gap: var(--space-xs);
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .leaders-strip li {
        background: var(--surface-alt);
        border: 1px solid var(--border);
        border-radius: var(--space-3xs);
        display: flex;
        flex-direction: column;
        gap: var(--space-3xs);
        padding: var(--space-xs) var(--space-sm);
    }

    .leaders-strip li a:first-child {
        color: var(--text-muted);
        font-size: var(--text-sm);
        text-decoration: none;
    }

    .leaders-strip li span {
        font-size: var(--text-h3);
        font-variant-numeric: tabular-nums;
        font-weight: 600;
    }

    /* Style guide scaffolding. Swatch and bar values arrive as custom properties
       set inline per item, so colours stay tokens. */
    .swatch-grid,
    .space-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .swatch-grid {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .swatch-grid li {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
    }

    .swatch {
        display: inline-block;
        inline-size: var(--space-lg);
        block-size: var(--space-lg);
        border: 1px solid var(--border-strong);
        border-radius: var(--space-3xs);
        background: var(--swatch);
    }

    .space-list li {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        margin-block: var(--space-2xs);
    }

    .space-bar {
        display: inline-block;
        inline-size: var(--bar-size);
        block-size: var(--space-xs);
        background: var(--accent);
    }

    /* Blazor's error boundary — the one live rule inherited from the template
       stylesheet. The background image stays an inline data: URI so no external
       request is introduced. */
    .blazor-error-boundary {
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--danger-bg);
        padding: 1rem 1rem 1rem 3.7rem;
        color: var(--danger-text);
    }

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }
}