/* Named patterns: stat table scroll region, leaders strip, player identity,
   style guide scaffolding. No cards: the page is one sheet of paper, ruled.
   Family hues take the rules themselves — the double rule under a family
   table's header, the section rule above a family heading, a tile's label
   (see docs/agents/styling.md and CONTEXT.md, "Family hue"). */

@layer components {
    /* Orientation copy: the deck under a reference page's headline. */
    .page-intro {
        color: var(--text-muted);
        max-inline-size: 65ch;
    }

    .prose p {
        max-inline-size: 65ch;
    }

    /* The StatTable scroll region: plain, on the paper itself. */
    .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;
    }

    /* Sticky identity column: opaque paper, seam border. The header cell gets
       the same paper — editorial headers have no fill to inherit. */
    .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;
    }

    /* Family coding: the double rule under a family table's header is set in
       the family's ink. */
    table.batting thead th {
        border-block-end-color: var(--batting-accent);
    }

    table.pitching thead th {
        border-block-end-color: var(--pitching-accent);
    }

    /* Family coding on headings: the section rule takes the family ink. h2
       already carries a rule from base; h1 (the leaderboard headline) gets
       one here. */
    h1.batting,
    h1.pitching {
        border-block-start: 3px solid var(--batting-accent);
        padding-block-start: var(--space-xs);
    }

    h1.pitching {
        border-block-start-color: var(--pitching-accent);
    }

    h2.batting {
        border-block-start-color: var(--batting-accent);
    }

    h2.pitching {
        border-block-start-color: var(--pitching-accent);
    }

    /* The home page's league-leaders strip: ruled boxes, headline numerals. */
    .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);
        border: 1px solid var(--border-strong);
        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);
        font-variant-caps: all-small-caps;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-decoration: none;
    }

    .leaders-strip li.batting a:first-child {
        color: var(--batting-accent);
    }

    .leaders-strip li.pitching a:first-child {
        color: var(--pitching-accent);
    }

    /* The value is a headline: display face, print numerals. */
    .leaders-strip li span {
        font-family: var(--font-display);
        font-size: var(--text-h2);
        font-weight: 700;
    }

    /* The player page's identity block. */
    .player-identity {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--space-md);
    }

    .player-identity > div {
        flex: 1 1 20rem;
    }

    .player-identity h1 {
        margin-block-start: var(--space-sm);
    }

    .portrait {
        border: 1px solid var(--border-strong);
        block-size: 9rem;
        inline-size: 9rem;
        object-fit: cover;
    }

    .portrait-empty {
        align-items: center;
        background: var(--surface-alt);
        color: var(--text-muted);
        display: flex;
        font-family: var(--font-display);
        font-size: var(--text-h1);
        justify-content: center;
    }

    .socials {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs) var(--space-md);
        font-size: var(--text-sm);
        list-style: none;
        margin-block: var(--space-xs);
        padding: 0;
    }

    .player-bio {
        max-inline-size: 65ch;
    }

    .source-credit {
        color: var(--text-muted);
        font-size: var(--text-sm);
        max-inline-size: 65ch;
    }

    /* Style guide scaffolding. */
    .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);
        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 — inline data: URI, no external request. */
    .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.";
    }
}