/* The look of the clickable mockup (tasks/features/pending/TheChessSuperApp/mockups/css/app.css),
   applied to the markup the app has today. Pass 1: tokens, base elements, shell.
   Each block names the mockup rule it follows. No web fonts, no images: system font stacks only. */

/* --- Design tokens (the mockup's names and values) --- */
:root {
    color-scheme: light;
    --canvas: #e8edf7; --plate: #f3f6fd; --plate-2: #eaf0fa; --sunk: #dce4f3;
    --ink: #232d3c; --ink-2: #5d6b80;
    --jade: #7ccfb0; --jade-deep: #2a7a62; --coral: #e8735c; --coral-deep: #a8402c; --amber-deep: #8a5a12; --sky: #b7d4f5;
    --line: rgba(35, 45, 60, .1);
    --radius: 22px; --radius-sm: 14px; --pill: 999px;
    --gap: clamp(1rem, 2.4vw, 1.5rem); --measure: 72rem;
    --font-body: ui-sans-serif, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, sans-serif;
    --ease: cubic-bezier(.19, .86, .22, 1);
    --clay: 0 22px 38px -22px rgba(35, 45, 60, .38), 0 8px 16px -10px rgba(35, 45, 60, .18), inset 2px 3px 4px rgba(255, 255, 255, .95), inset -3px -5px 9px rgba(35, 45, 60, .08);
    --clay-sm: 0 12px 22px -14px rgba(35, 45, 60, .34), inset 2px 2px 3px rgba(255, 255, 255, .92), inset -2px -3px 6px rgba(35, 45, 60, .09);
    --well: inset 3px 4px 9px -3px rgba(35, 45, 60, .2), inset -2px -3px 6px rgba(255, 255, 255, .9);
    --gloss: linear-gradient(180deg, #fefeff 0%, #f5f8fd 46%, #e9effa 46.01%, #dee7f6 100%);
    --gloss-plate: linear-gradient(180deg, #fdfeff 0%, #f7f9fe 46%, #f1f5fc 46.01%, #eaf0f9 100%);
    --gloss-jade: linear-gradient(180deg, #b2e7d2 0%, #90d9bd 46%, #6bc5a5 46.01%, #52b492 100%);
    --gloss-coral: linear-gradient(180deg, #f8c3b6 0%, #f2a693 46%, #e8836b 46.01%, #db6a51 100%);
    --focus: 0 0 0 3px rgba(42, 122, 98, .35);
}

/* --- Public results home (mockup: pub-home: .hero, .lead, .line, .grid-cards, .card-link, .badge wait, .table-wrap, td.num).
   Before the rules it overrides, so its selectors carry the weight. --- */
main section.tcsa-home-hero { margin: 0; padding: clamp(1.5rem, 5vw, 3.5rem) 0 clamp(1.25rem, 3vw, 2rem); border-radius: 0; background: none; box-shadow: none; }
.tcsa-home-hero h1 { max-width: 16ch; }
.tcsa-home-hero h1 em { font-style: normal; color: var(--jade-deep); }
.tcsa-home-lead { max-width: 60ch; color: var(--ink-2); font-size: 1.08rem; }
main section.tcsa-home-hero form.tcsa-home-search { flex-wrap: wrap; align-items: center; gap: .6rem; max-width: 40rem; margin: 0; padding: .6rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .45); }
main section.tcsa-home-hero form.tcsa-home-search > input[name="q"] { flex: 3 1 14rem; width: auto; }
main section.tcsa-home-hero form.tcsa-home-search > button { margin-top: 0; }
.tcsa-home-heading { margin-top: 2rem; }
.tcsa-home-live { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.tcsa-home-live-card { display: block; padding: clamp(1.1rem, 2.5vw, 1.75rem); border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); color: inherit; text-decoration: none; transition: transform .3s var(--ease); }
.tcsa-home-live-card:hover { transform: translateY(-3px); color: inherit; }
.tcsa-home-live-card h3 { margin: .6rem 0 .35em; }
.tcsa-home-live-card p { margin: 0; color: var(--ink-2); }
.tcsa-home-live-top { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }
.tcsa-home-live-round { color: var(--ink-2); font-size: .85rem; }
.tcsa-live-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .75rem; border-radius: var(--pill); font-size: .8rem; font-weight: 600; background: var(--plate-2); box-shadow: var(--well); white-space: nowrap; color: var(--amber-deep); }
.tcsa-live-badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; animation: tcsa-pulse 1.6s ease-in-out infinite; }
@keyframes tcsa-pulse { 50% { opacity: .3; } }
.tcsa-home-events { overflow-x: auto; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-home-events table { margin: 0; border-radius: 0; background: none; box-shadow: none; }
.tcsa-home-events .tcsa-home-num { text-align: right; font-variant-numeric: tabular-nums; }
.tcsa-home-app { margin-top: 2rem; }

/* --- Landing page at the root (story 1750; mockup landing: .hero, .lead, .row of buttons,
   .grid-cards, .card.card-link, .card-icon). The results home keeps the block above. --- */
main section.tcsa-landing-hero { margin: 0; padding: clamp(1.5rem, 5vw, 3.5rem) 0 clamp(1.25rem, 3vw, 2rem); border-radius: 0; background: none; box-shadow: none; }
.tcsa-landing-hero h1 { max-width: 16ch; }
.tcsa-landing-hero h1 em { font-style: normal; color: var(--jade-deep); }
.tcsa-landing-lead { max-width: 60ch; color: var(--ink-2); font-size: 1.08rem; }
.tcsa-landing-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.tcsa-landing-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: .5rem 1.4rem; border-radius: var(--pill); background: var(--gloss); box-shadow: var(--clay-sm); color: var(--ink); font-weight: 600; text-decoration: none; transition: transform .25s var(--ease); }
.tcsa-landing-actions a:hover { transform: translateY(-2px); color: var(--ink); }
.tcsa-landing-actions a.tcsa-landing-primary { background: var(--gloss-jade); color: #0f3328; box-shadow: rgba(42, 122, 98, .9) 0 12px 20px -12px, rgba(255, 255, 255, .8) 1px 1px 2px inset, rgba(16, 72, 56, .25) -1px -2px 4px inset; }
.tcsa-landing-cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.tcsa-landing-card { display: block; padding: clamp(1.1rem, 2.5vw, 1.75rem); border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); color: inherit; text-decoration: none; transition: transform .3s var(--ease); }
.tcsa-landing-card:hover { transform: translateY(-3px); color: inherit; }
.tcsa-landing-card h2 { margin: .9rem 0 .35em; font-size: 1.2rem; }
.tcsa-landing-card p { margin: 0; color: var(--ink-2); }
.tcsa-landing-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 14px; background: var(--gloss-jade); box-shadow: rgba(42, 122, 98, .8) 0 8px 14px -8px, rgba(255, 255, 255, .8) 1px 1px 2px inset; color: #11392d; font-size: 1.25rem; }

/* --- Base elements (mockup: body, h1-h3, p, a, strong, code, :focus-visible) --- */
*, ::before, ::after { box-sizing: border-box; }

html { text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--canvas);
    color: var(--ink);
    font: 1rem/1.6 var(--font-body);
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(48vw 40vw at 10% 4%, rgba(183, 212, 245, .6), transparent 62%),
                radial-gradient(40vw 36vw at 92% 30%, rgba(124, 207, 176, .34), transparent 64%),
                radial-gradient(52vw 44vw at 60% 100%, rgba(232, 115, 92, .14), transparent 66%);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 300; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
h3 { font-size: 1.15rem; font-weight: 500; }
p { margin: 0 0 1em; }
a { color: var(--jade-deep); text-underline-offset: .18em; }
a:hover { color: var(--ink); }
strong { font-weight: 600; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .92em; color: var(--coral-deep); overflow-wrap: anywhere; }
:focus-visible { outline: 0; box-shadow: var(--focus); border-radius: 6px; }
/* The page heading takes the focus after each navigation (for screen readers); it is not a control, so it shows no ring. */
h1:focus, h1:focus-visible { outline: 0; box-shadow: none; }

/* --- Top bar (mockup: .top, .brand, .brand-mark, .who) --- */
.tcsa-top {
    position: sticky;
    top: .75rem;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .8rem;
    width: min(var(--measure), calc(100% - 1.5rem));
    margin: .75rem auto 0;
    padding: .55rem .7rem .55rem 1.1rem;
    background: var(--gloss);
    border-radius: var(--pill);
    box-shadow: var(--clay-sm);
    color: var(--ink-2);
    font-size: .92rem;
}

.tcsa-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font: 500 1.15rem var(--font-display);
    letter-spacing: -.01em;
    color: var(--ink);
    text-decoration: none;
}

/* The mockup's round mark with the knight (.brand-mark). */
.tcsa-brand-mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--gloss-jade);
    box-shadow: rgba(42, 122, 98, .8) 0 6px 12px -6px, rgba(255, 255, 255, .8) 1px 1px 2px inset;
    color: #11392d;
    font: 600 1rem var(--font-display);
}

/* The current app's short name after the brand (mockup: .muted.small, weight 400). */
.tcsa-brand-app { color: var(--ink-2); font: 400 .85rem var(--font-body); letter-spacing: 0; }

/* The current app's pages (mockup: .top nav, a.active). */
.tcsa-nav { display: flex; flex-wrap: wrap; gap: .15rem; flex: 1 1 0%; }

.tcsa-nav a {
    padding: .4rem .95rem;
    border-radius: var(--pill);
    color: var(--ink-2);
    font-weight: 500;
    text-decoration: none;
    transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}

.tcsa-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.tcsa-nav a[aria-current="page"] { color: var(--ink); background: var(--plate); box-shadow: var(--well); }

/* Who is signed in, the switcher, the language and signing in or out (mockup: .who, .avatar). */
.tcsa-who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-left: auto; color: var(--ink-2); font-size: .92rem; }
.tcsa-who-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tcsa-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--plate-2);
    box-shadow: var(--well);
    color: var(--ink-2);
    font-size: .85rem;
    font-weight: 600;
}

/* --- Sign-in pages in a phone-width card (mockup: signin, signin-code: .phone .card, .otp) --- */
main section.tcsa-sign-in { max-width: 30rem; margin-left: auto; margin-right: auto; }
main section.tcsa-sign-in > h1 { margin-top: 0; }
.tcsa-sign-in > p:not([class]) { color: var(--ink-2); }
main form > chess-code-input { display: block; flex: 0 0 100%; }
.tcsa-code-boxes { display: flex; gap: .5rem; }
chess-code-input .tcsa-code-boxes > input.tcsa-code-box { width: 3rem; padding: .4rem; text-align: center; font-size: 1.4rem; }
@media (max-width: 24rem) { .tcsa-code-boxes { gap: .3rem; } chess-code-input .tcsa-code-boxes > input.tcsa-code-box { width: 2.5rem; } }

/* Sign out (mockup: button.link) and sign in (a plain link in .who). */
.tcsa-top form { display: inline-flex; margin: 0; }

.tcsa-top form button {
    min-height: 0;
    padding: .3rem .8rem;
    background: transparent;
    box-shadow: none;
    color: var(--jade-deep);
    font-size: .9rem;
}

.tcsa-top form button:hover:not(:disabled) { background: rgba(255, 255, 255, .6); transform: none; }
.tcsa-who > a { padding: .3rem .8rem; font-weight: 600; }

/* Language switch (mockup: .area-switch, the sunk pill with one raised choice). */
.tcsa-languages {
    display: flex;
    gap: .15rem;
    padding: .2rem;
    border-radius: var(--pill);
    background: var(--plate-2);
    box-shadow: var(--well);
}

.tcsa-languages a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .2rem .8rem;
    border-radius: var(--pill);
    color: var(--ink-2);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.tcsa-languages a:hover { color: var(--ink); }

:root:lang(en) .tcsa-languages a[hreflang="en"],
:root:lang(es) .tcsa-languages a[hreflang="es"] {
    background: var(--gloss);
    box-shadow: var(--clay-sm);
    color: var(--ink);
}

/* App switcher (mockup: .app-switch for the button, .modal + .list/.item for what it opens). */
.tcsa-switcher { position: relative; }

.tcsa-switcher > summary {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .2rem .85rem;
    border-radius: var(--pill);
    background: var(--gloss-jade);
    box-shadow: var(--clay-sm);
    color: #0f3328;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.tcsa-switcher > summary::-webkit-details-marker { display: none; }

.tcsa-switcher-panel {
    position: absolute;
    z-index: 10;
    top: calc(100% + .6rem);
    right: 0;
    width: min(24rem, calc(100vw - 2rem));
    padding: 1.25rem;
    border-radius: var(--radius);
    background: var(--gloss-plate);
    box-shadow: var(--clay);
    color: var(--ink);
    font-size: 1rem;
}

.tcsa-switcher-panel p { color: var(--ink-2); font-size: .9rem; }
.tcsa-switcher-panel ul { display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0; }

.tcsa-switcher-panel a {
    display: block;
    padding: .8rem 1rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .5);
    color: inherit;
    text-decoration: none;
}

.tcsa-switcher-panel a:hover { background: rgba(255, 255, 255, .8); }
.tcsa-switcher-panel a[aria-current="page"] { background: #fff; }
.tcsa-switcher-name { display: block; font-weight: 600; }
.tcsa-switcher-about { display: block; color: var(--ink-2); font-size: .85rem; }

/* My profile: head, rating tiles and the history table (mockup profile: .page-head .row, .avatar, .muted, .stats, .stat, .table-wrap, td.num). */
.tcsa-profile-head { display: flex; align-items: center; gap: .9rem; margin: var(--gap) 0; }
.tcsa-profile-avatar { width: 3.4rem; height: 3.4rem; font-size: 1.1rem; }
.tcsa-profile-name { margin: 0; font: 300 1.6rem/1.15 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.tcsa-profile-chess-title { font-weight: 600; }
.tcsa-profile-line { margin: 0; color: var(--ink-2); }
.tcsa-profile-ratings { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-bottom: var(--gap); }
.tcsa-profile-rating { margin: 0; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-profile-rating b { display: block; font: 300 2rem/1.1 var(--font-display); letter-spacing: -.02em; }
.tcsa-profile-rating span { color: var(--ink-2); font-size: .85rem; font-weight: 600; }
.tcsa-history-table { overflow-x: auto; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-history-table table { margin: 0; border-radius: 0; background: none; box-shadow: none; }
.tcsa-history-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Small screens: the pages become a bar fixed at the bottom, the who group takes a line of its
   own (mockup: @media (max-width: 40rem) .top nav, .who, main). */
@media (max-width: 40rem) {
    .tcsa-nav {
        position: fixed;
        left: .5rem;
        right: .5rem;
        bottom: .5rem;
        z-index: 20;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: .3rem;
        border-radius: var(--pill);
        background: var(--gloss);
        box-shadow: var(--clay);
    }

    .tcsa-nav a { white-space: nowrap; font-size: .85rem; }
    body:has(.tcsa-nav) main { padding-bottom: 5rem; }
    .tcsa-who { width: 100%; justify-content: space-between; margin-left: 0; }
    .tcsa-switcher-panel { right: auto; left: 0; }
}

/* --- Sponsor branding (mockup: sponsor-branding: .cols.even, the brand fieldset, the "How it looks" card) --- */
.tcsa-sponsor-brand { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; margin: 0 0 1em; }
@media (max-width: 52rem) { .tcsa-sponsor-brand { grid-template-columns: 1fr; } }
main section .tcsa-sponsor-brand form { margin: 0; }
.tcsa-sponsor-brand h3 { flex: 0 0 100%; margin: 0 0 .4rem; }
main form > p.tcsa-sponsor-colours { grid-template-rows: auto auto; grid-auto-flow: column; gap: .3rem .75rem; }
main form > p.tcsa-sponsor-colours > label:not(:first-child) { margin-top: 0; }
input[type="color"] { padding: .25rem .4rem; cursor: pointer; }
.tcsa-sponsor-preview { padding: 1rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .5); }

/* --- Back bar of a deep link (mockup: .backbar) --- */
.tcsa-backbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .8rem;
    width: min(var(--measure), calc(100% - 1.5rem));
    margin: .5rem auto 0;
    padding: .35rem .9rem;
    border-radius: var(--pill);
    background: var(--ink);
    color: #fff;
    box-shadow: var(--clay-sm);
    font-size: .9rem;
}

.tcsa-backbar a { color: #fff; font-weight: 600; }
.tcsa-backbar-from { opacity: .7; font-size: .85rem; }
.tcsa-backbar-dismiss { margin-left: auto; padding: 0 .4rem; text-decoration: none; }

/* --- Report of a TRF file before it is confirmed (mockup: trf-import: .cols, .card, .kv, .badge tones) --- */
.tcsa-upload-report { display: grid; gap: var(--gap); grid-template-columns: 2fr 1fr; align-items: start; margin: var(--gap) 0; }

@media (max-width: 52rem) { .tcsa-upload-report { grid-template-columns: 1fr; } }

.tcsa-upload-report > div {
    padding: clamp(1.1rem, 2.5vw, 1.75rem);
    border-radius: var(--radius);
    background: var(--gloss-plate);
    box-shadow: var(--clay);
}

.tcsa-upload-report h3 { margin-top: 0; }
.tcsa-upload-report-kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; margin: 0; font-size: .92rem; }
.tcsa-upload-report-kv dt { color: var(--ink-2); font-weight: 600; font-size: .85rem; }
.tcsa-upload-report-kv dd { margin: 0; }
.tcsa-upload-report-notices ul { max-height: 16rem; overflow: auto; margin: 0; padding: 0; list-style: none; font-size: .85rem; }
.tcsa-upload-report-notices li::before { content: "\26A0  "; }

.tcsa-upload-report-count {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .15rem .75rem;
    border-radius: var(--pill);
    background: var(--plate-2);
    box-shadow: var(--well);
    color: var(--amber-deep);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

.tcsa-upload-report-count::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; animation: tcsa-pulse 1.6s ease-in-out infinite; }
.tcsa-upload-report-count[data-tone="ok"] { color: var(--jade-deep); }
.tcsa-upload-report-count[data-tone="ok"]::before { animation: none; }

/* --- Page (mockup: main, .lead, .hint, .card) --- */
main { width: min(var(--measure), calc(100% - 1.5rem)); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) 0; }

main > h1 + p:not([class]):not(:has(a)) { max-width: 60ch; color: var(--ink-2); font-size: 1.08rem; }

/* A section of a page is one of the mockup's cards. */
main section,
main > form:not(.tcsa-follow),
.tcsa-upload-preview {
    margin: var(--gap) 0;
    padding: clamp(1.1rem, 2.5vw, 1.75rem);
    border-radius: var(--radius);
    background: var(--gloss-plate);
    box-shadow: var(--clay);
}

main section > :last-child,
.tcsa-upload-preview > :last-child { margin-bottom: 0; }

/* The sponsors' banners stand on the page itself. */
main section.tcsa-public-sponsors { display: grid; gap: .6rem; padding: 0; border-radius: 0; background: none; box-shadow: none; }

/* --- Upload history and TRF text preview (mockup: trf-history: .table-wrap, .badge ok, button.link; trf-export: pre.mono, .primary Copy) --- */
.tcsa-upload-history-table { overflow-x: auto; margin: 0 0 1em; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-upload-history-table table { margin: 0; border-radius: 0; background: none; box-shadow: none; }
.tcsa-upload-history-file { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .82rem; overflow-wrap: anywhere; }
.tcsa-upload-history-when { white-space: nowrap; }
.tcsa-upload-history-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.tcsa-trf-preview { display: grid; gap: .6rem; margin: 0 0 1em; }
.tcsa-trf-preview > button, .tcsa-trf-preview-actions { justify-self: start; }
.tcsa-trf-preview-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.tcsa-trf-preview-copy { background: var(--gloss-jade); color: #0f3328; box-shadow: rgba(42, 122, 98, .9) 0 12px 20px -12px, rgba(255, 255, 255, .8) 1px 1px 2px inset, rgba(16, 72, 56, .25) -1px -2px 4px inset; }
.tcsa-trf-preview-text { margin: 0; max-height: 22rem; padding: 1rem; border-radius: var(--radius-sm); background: var(--plate-2); box-shadow: var(--well); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .82rem; white-space: pre; overflow: auto; }

/* --- Notes and messages (mockup: .hint, .result.error, .validation-message, .badge tones) --- */
.tcsa-note,
.tcsa-signed-in { color: var(--ink-2); font-size: .9rem; }

.tcsa-error,
.tcsa-people-error {
    padding: .8rem 1.1rem;
    border-radius: var(--radius-sm);
    background: rgba(232, 115, 92, .14);
    color: var(--coral-deep);
    font-weight: 500;
}

.tcsa-error a,
.tcsa-people-error a { color: inherit; }

/* Saved, filled, done: the mockup's "ok" tone. */
.tcsa-note[role="status"] { color: var(--jade-deep); font-weight: 500; }

/* Something to look at: the mockup's "wait" tone. */
.tcsa-standings-differ {
    margin: 0 0 1em;
    padding: .8rem 1.1rem;
    border-radius: var(--radius-sm);
    background: rgba(138, 90, 18, .1);
    color: var(--amber-deep);
}

.tcsa-standings-differ > :last-child { margin-bottom: 0; }

.tcsa-upload-warning,
.tcsa-upload-todo,
.tcsa-people-todo,
.tcsa-section-todo,
.tcsa-org-unverified { color: var(--amber-deep); font-weight: 600; }

.tcsa-progress-total,
.tcsa-enter-count,
.tcsa-enter-mine { font-weight: 600; }

/* Small states next to a name (mockup: .badge with its dot, .tag). */
.tcsa-switcher-here,
.tcsa-people-state,
.tcsa-roster-out,
.tcsa-upload-history-live {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .15rem .75rem;
    border-radius: var(--pill);
    background: var(--plate-2);
    box-shadow: var(--well);
    color: var(--amber-deep);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.tcsa-switcher-here::before,
.tcsa-people-state::before,
.tcsa-roster-out::before,
.tcsa-upload-history-live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; }

.tcsa-switcher-here,
.tcsa-people-confirmed,
.tcsa-upload-history-live { color: var(--jade-deep); }

.tcsa-switcher-here { margin-top: .35rem; }

.tcsa-section-native,
.tcsa-circuit-qualified {
    display: inline-block;
    padding: .05rem .55rem;
    border-radius: var(--pill);
    background: var(--plate-2);
    box-shadow: var(--well);
    color: var(--jade-deep);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    vertical-align: middle;
}

/* Admin users (mockup adm-users: .line search, .table-wrap, .badge ok/bad, button.link). */
.tcsa-admin-users-search { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; max-width: 40rem; margin: 0 0 1rem; }
.tcsa-admin-users-search > label { flex: 1 1 100%; }
.tcsa-admin-users-search > input { flex: 3 1 14rem; width: auto; }
.tcsa-admin-users-search > button { margin-top: 0; }
.tcsa-admin-users-table { overflow-x: auto; margin: 0 0 1em; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-admin-users-table table { margin: 0; border-radius: 0; background: none; box-shadow: none; }
.tcsa-admin-users-email { overflow-wrap: anywhere; }
.tcsa-admin-users-state { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .75rem; border-radius: var(--pill); background: var(--plate-2); box-shadow: var(--well); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.tcsa-admin-users-state::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; }
.tcsa-admin-users-active { color: var(--jade-deep); }
.tcsa-admin-users-suspended { color: var(--coral-deep); }
.tcsa-admin-users-since { display: block; margin-top: .25rem; }
.tcsa-admin-users-2fa { color: var(--jade-deep); font-weight: 700; }
.tcsa-admin-users-pages { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.tcsa-admin-users-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* What went wrong, for the QA error page (mockup: pre.mono). */
pre {
    max-height: 22rem;
    overflow: auto;
    padding: 1rem;
    border-radius: var(--radius-sm);
    background: var(--plate-2);
    box-shadow: var(--well);
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .82rem;
    white-space: pre;
}

/* The same under a message on the QA site, folded until asked for. */
.tcsa-error-more { margin: .6rem 0 1rem; }
.tcsa-error-more summary { cursor: pointer; color: var(--ink-2); font-size: .9rem; }

/* --- Stops of a circuit as cards on its public page (mockup: pub-circuit: .grid-cards, .card.card-link, .row.between, .badge tones).
   The cards sit on the page, not in a plate; the selectors outweigh the list rules further down. --- */
main section.tcsa-circuit-cards { padding: 0; border-radius: 0; background: none; box-shadow: none; }
main section.tcsa-circuit-cards ol { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
main section.tcsa-circuit-cards li { display: block; padding: 0; border-radius: 0; background: none; }
main section.tcsa-circuit-cards li::before { content: none; }
main section.tcsa-circuit-cards li > a.tcsa-circuit-card { display: block; height: 100%; padding: clamp(1.1rem, 2.5vw, 1.75rem); border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); color: inherit; font-weight: 400; text-decoration: none; transition: transform .3s var(--ease); }
main section.tcsa-circuit-cards li > a.tcsa-circuit-card:hover { transform: translateY(-3px); color: inherit; }
.tcsa-circuit-card-top { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.tcsa-circuit-card-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
main section.tcsa-circuit-cards .tcsa-circuit-card .tcsa-note { display: block; }
.tcsa-circuit-stop-status { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .75rem; border-radius: var(--pill); font-size: .8rem; font-weight: 600; background: var(--plate-2); box-shadow: var(--well); white-space: nowrap; }
.tcsa-circuit-stop-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; }
.tcsa-circuit-stop-status[data-tone="ok"] { color: var(--jade-deep); }
.tcsa-circuit-stop-status[data-tone="wait"] { color: var(--amber-deep); }

/* --- Buttons (mockup: button/.btn, button[type="submit"]/.primary, :disabled, .chip) --- */
button,
.tcsa-deep-link,
.tcsa-enter-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.6rem;
    padding: .5rem 1.4rem;
    border: 0;
    border-radius: var(--pill);
    background: var(--gloss);
    box-shadow: var(--clay-sm);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}

button:hover:not(:disabled),
.tcsa-deep-link:hover,
.tcsa-enter-link:hover { transform: translateY(-2px); color: var(--ink); }

button:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--well); }
button:disabled { opacity: .5; cursor: not-allowed; }

button[type="submit"],
.tcsa-enter-button,
.tcsa-enter-link,
.tcsa-upload-confirm {
    background: var(--gloss-jade);
    color: #0f3328;
    box-shadow: rgba(42, 122, 98, .9) 0 12px 20px -12px, rgba(255, 255, 255, .8) 1px 1px 2px inset, rgba(16, 72, 56, .25) -1px -2px 4px inset;
}

button[type="submit"]:active:not(:disabled),
.tcsa-enter-button:active:not(:disabled),
.tcsa-upload-confirm:active:not(:disabled) { box-shadow: rgba(16, 72, 56, .4) 2px 3px 6px inset; }

/* --- Admin: the FIDE rating list and its imports (mockup: adm-system: .page-head, .stats, .stat, .table-wrap, td.num, .badge tones) --- */
.tcsa-admin-fide-stats { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: var(--gap) 0; }
.tcsa-admin-fide-stat { padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-admin-fide-stat b { display: block; font: 300 2rem/1.1 var(--font-display); letter-spacing: -.02em; }
.tcsa-admin-fide-stat span { color: var(--ink-2); font-size: .85rem; font-weight: 600; }
.tcsa-admin-fide-table { overflow-x: auto; max-height: 32rem; overflow-y: auto; }
.tcsa-admin-fide-table table { margin: 0; }
.tcsa-admin-fide-num { text-align: right; font-variant-numeric: tabular-nums; }
.tcsa-admin-fide-started, .tcsa-admin-fide-duration { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tcsa-admin-fide-state { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .75rem; border-radius: var(--pill); background: var(--plate-2); box-shadow: var(--well); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.tcsa-admin-fide-state::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; }
.tcsa-admin-fide-state[data-tone="ok"] { color: var(--jade-deep); }
.tcsa-admin-fide-state[data-tone="wait"] { color: var(--amber-deep); }
.tcsa-admin-fide-state[data-tone="bad"] { color: var(--coral-deep); }
.tcsa-admin-fide-error { display: block; margin-top: .25rem; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .82rem; }

/* A button inside a table row (mockup: .sortable button). */
td button { min-height: 1.8rem; padding: .1rem .55rem; font-size: .8rem; }

/* Sponsors' views and clicks (mockup: sponsor-dashboard: .stats, .stat, .card, .chart; single series in the chart's jade, the table carries the numbers). */
.tcsa-sponsor-dashboard { margin: 0 0 1em; }
.tcsa-sponsor-stats { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 0 0 var(--gap); }
.tcsa-sponsor-stat { padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-sponsor-stat b { display: block; font: 300 2rem/1.1 var(--font-display); letter-spacing: -.02em; }
.tcsa-sponsor-stat span { color: var(--ink-2); font-size: .85rem; font-weight: 600; }
.tcsa-sponsor-days { margin: 0 0 var(--gap); padding: clamp(1.1rem, 2.5vw, 1.75rem); border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-sponsor-days figcaption { margin: 0 0 .5rem; font: 500 1.05rem var(--font-display); }
.tcsa-sponsor-chart { display: flex; align-items: flex-end; gap: 2px; height: 9rem; padding-top: .5rem; }
.tcsa-sponsor-chart div { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .2rem; height: 100%; color: var(--ink-2); font-size: .72rem; }
.tcsa-sponsor-chart i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--gloss-jade); box-shadow: var(--clay-sm); }
.tcsa-sponsor-chart span { min-height: 1.1em; white-space: nowrap; }
.tcsa-sponsor-days details { margin-top: .75rem; }
.tcsa-sponsor-days summary { cursor: pointer; color: var(--jade-deep); font-weight: 600; }
.tcsa-sponsor-days-table { margin-top: .5rem; }
.tcsa-sponsor-days-table .tcsa-sponsor-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Links to the other apps (mockup: .row of .btn). */
.tcsa-deep-links { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* The draft of a round, checked before it is published (mockup om-pairing: .result.ok, .actions, primary button, button.link). */
.tcsa-native-draft { margin: 0 0 var(--gap); }
.tcsa-native-draft-note { margin: 0 0 1rem; padding: 1rem 1.4rem; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-native-draft-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 var(--gap); }
.tcsa-native-publish { background: var(--gloss-jade); color: #0f3328; box-shadow: rgba(42, 122, 98, .9) 0 12px 20px -12px, rgba(255, 255, 255, .8) 1px 1px 2px inset, rgba(16, 72, 56, .25) -1px -2px 4px inset; }
.tcsa-native-discard { min-height: 0; padding: .3rem .8rem; background: transparent; box-shadow: none; color: var(--jade-deep); font-size: .9rem; }
.tcsa-native-discard:hover:not(:disabled) { background: rgba(255, 255, 255, .6); transform: none; }

/* Rounds to pick from (mockup: .chip-row, .chip, .chip.on). */
.tcsa-round-pick { display: flex; flex-wrap: wrap; gap: .4rem; }

.tcsa-round-pick a,
.tcsa-round-pick button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    min-height: 0;
    padding: .3rem .8rem;
    border: 0;
    border-radius: var(--pill);
    background: rgba(255, 255, 255, .55);
    box-shadow: none;
    color: var(--ink);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.tcsa-round-pick a[aria-current="page"],
.tcsa-round-pick button[aria-pressed="true"] { background: var(--gloss-jade); box-shadow: var(--clay-sm); color: #0f3328; font-weight: 600; }

/* Link your FIDE ID (mockup: onboarding-fide: .line with Look up, dl.result, .row of Yes / Not me). */
main form.tcsa-fide-lookup { max-width: 30rem; gap: .6rem; }
main form.tcsa-fide-lookup > input:not([type="checkbox"]):not([type="radio"]) { flex: 1 1 9rem; width: auto; }
main form.tcsa-fide-lookup > button { margin-top: 0; }
.tcsa-fide-result { max-width: 30rem; }
.tcsa-fide-answer { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1em; }
.tcsa-fide-answer > label { flex: 0 0 100%; }
.tcsa-fide-answer > input { max-width: 12rem; }
.tcsa-fide-no, .tcsa-fide-skip { background: transparent; box-shadow: none; color: var(--jade-deep); }

/* --- Forms (mockup: form, label, input/select/textarea, checkbox, .line, .invalid) --- */
label { display: block; color: var(--ink-2); font-size: .88rem; font-weight: 600; }
label:has(> input) { display: grid; gap: .3rem; }

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    width: 100%;
    min-height: 2.6rem;
    padding: .55rem .9rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--plate-2);
    box-shadow: var(--well);
    color: var(--ink);
    font: inherit;
    font-weight: 400;
}

input::placeholder, textarea::placeholder { color: #8795aa; }
input[type="checkbox"], input[type="radio"] { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--jade-deep); }
select { appearance: auto; }
textarea { min-height: 6rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--well), var(--focus); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { box-shadow: var(--focus); }
input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }

.invalid { box-shadow: var(--well), 0 0 0 2px rgba(232, 115, 92, .8) !important; }
.validation-message { color: var(--coral-deep); font-size: .88rem; font-weight: 500; }

/* The app's forms are a label followed by its field, bare or one group per paragraph:
   each takes a line of its own, buttons share the last one (mockup: form, .actions). */
main form { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; max-width: 30rem; }
main section form { margin: 0 0 1em; }

main form > label,
main form > input:not([type="checkbox"]):not([type="radio"]),
main form > select,
main form > textarea,
main form > p { flex: 0 0 100%; }

main form > label:not(:first-of-type) { margin-top: .5rem; }
main form > button { margin-top: .7rem; }

main form > p { display: grid; gap: .3rem; margin: 0 0 .5rem; }
main form > p > button { justify-self: start; }
main form > p > label:not(:first-child) { margin-top: .5rem; }

/* A checkbox and its words (mockup: label:has(> input[type="checkbox"])). */
main form > p:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: .5rem; }
input[type="checkbox"] + label, input[type="radio"] + label { color: var(--ink); font-weight: 500; }

/* One line of fields that adds a row to a list (mockup: .line). */
main form.tcsa-roster-add {
    max-width: none;
    gap: .6rem;
    padding: .6rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .45);
}

main form.tcsa-roster-add > label { flex: 0 0 auto; margin-top: 0; }
main form.tcsa-roster-add > input:not([type="checkbox"]):not([type="radio"]),
main form.tcsa-roster-add > select { flex: 1 1 9rem; width: auto; }
main form.tcsa-roster-add > button { margin-top: 0; }

/* Events of one organization (mockup: org-events: .page-head with .row.between and buttons, .table-wrap, td.num, .muted.small venue, .badge tones). */
.tcsa-events-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: var(--gap); }
.tcsa-events-head h2 { margin: 0; }
.tcsa-events-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.tcsa-events-actions .tcsa-events-new { background: var(--gloss-jade); color: #0f3328; box-shadow: rgba(42, 122, 98, .9) 0 12px 20px -12px, rgba(255, 255, 255, .8) 1px 1px 2px inset, rgba(16, 72, 56, .25) -1px -2px 4px inset; }
.tcsa-events-table { overflow-x: auto; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-events-table table { margin: 0; border-radius: 0; background: none; box-shadow: none; }
.tcsa-events-table .tcsa-events-num { text-align: right; font-variant-numeric: tabular-nums; }
.tcsa-events-venue { display: block; color: var(--ink-2); font-size: .85rem; }
.tcsa-events-badge { display: inline-flex; align-items: center; gap: .4rem; margin: .1rem .3rem .1rem 0; padding: .15rem .75rem; border-radius: var(--pill); font-size: .8rem; font-weight: 600; background: var(--plate-2); box-shadow: var(--well); white-space: nowrap; }
.tcsa-events-badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; }
.tcsa-events-badge[data-tone="ok"] { color: var(--jade-deep); }
.tcsa-events-badge[data-tone="wait"] { color: var(--amber-deep); }
main form.tcsa-event-create { margin-bottom: var(--gap); }

/* Create a circuit in one form (mockup: circuit-create: form.stack, fieldset + legend, .line per stop, .cols.even of rules). */
main form.tcsa-circuit-create { display: grid; gap: var(--gap); max-width: 48rem; }
main form.tcsa-circuit-create > button { justify-self: start; margin-top: 0; }
.tcsa-circuit-create fieldset { display: grid; gap: .8rem; min-width: 0; margin: 0; padding: 1rem 1.25rem 1.25rem; border: 0; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-circuit-create legend { padding: 0 .6rem; font: 500 1.05rem var(--font-display); }
.tcsa-circuit-create fieldset .tcsa-note { margin: 0; }
.tcsa-circuit-create-stops ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.tcsa-circuit-create-stops li { display: flex; align-items: center; gap: .6rem; padding: .6rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .45); }
.tcsa-circuit-create-rules { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem var(--gap); }
.tcsa-circuit-create-rules > p { display: grid; gap: .3rem; align-content: start; margin: 0; }
@media (max-width: 52rem) { .tcsa-circuit-create-rules { grid-template-columns: 1fr; } }

/* Follow an organizer: the button and what it does, side by side (mockup: .row). */
main form.tcsa-follow { max-width: none; gap: .6rem; margin: 0 0 1em; }
main form.tcsa-follow > button { margin-top: 0; }

/* The roster as players and the join link (story 1745; mockup club: Member / Rating columns, "Invite by link": .muted, input.mono readonly, .row of buttons). */
.tcsa-org-member-email { display: block; font-size: .8rem; }
.tcsa-org-join-url { width: 100%; max-width: 36rem; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .82rem; }
.tcsa-org-join-actions, .tcsa-org-join-requests li { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.tcsa-org-join-requests { padding: 0; list-style: none; }
.tcsa-org-join-name { flex: 1 1 12rem; font-weight: 600; }

/* A member's roles: the role, then "also arbiter" next to it (story 1741). */
.tcsa-org-also-arbiter { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 0 .6rem; font-size: .85rem; font-weight: 400; }
.tcsa-org-also-arbiter input { width: auto; min-height: 0; margin: 0; }

/* Fields outside a form: a file to pick, a role in a table, an email in a list. */
td select, td input:not([type="checkbox"]):not([type="radio"]) { width: auto; min-height: 2rem; padding: .2rem .6rem; font-size: .85rem; }
.tcsa-upload > input, .tcsa-org-logo > input { max-width: 30rem; margin: .3rem 0 1em; }
.tcsa-org-logo { display: grid; gap: .3rem; justify-items: start; margin: 1em 0; }
.tcsa-org-logo img, .tcsa-organizer-logo { border-radius: var(--radius-sm); object-fit: contain; }

/* Pairings, standings and crosstable as tabs (mockup: .subnav, .subnav a.active). Every panel is on the
   page; the tabs are links to them and the panel in the address (:target) shows, the pairings when none
   is. Without :has every panel shows, one under the other. */
.tcsa-tabs { display: flex; flex-wrap: wrap; gap: .2rem; padding: .25rem; margin-bottom: var(--gap); border-radius: var(--pill); background: var(--plate-2); box-shadow: var(--well); width: fit-content; max-width: 100%; }
.tcsa-tabs a { padding: .35rem .9rem; border-radius: var(--pill); color: var(--ink-2); font-weight: 500; font-size: .92rem; text-decoration: none; }
.tcsa-tab-panel { scroll-margin-top: 4.5rem; }
.tcsa-tabbed:has(> .tcsa-tab-panel:target) > .tcsa-tab-panel:not(:target),
.tcsa-tabbed:has(> .tcsa-tabs):not(:has(> .tcsa-tab-panel:target)) > .tcsa-tab-panel:not(#tcsa-tab-pairings) { display: none; }
.tcsa-tabbed:has(#tcsa-tab-pairings:target) .tcsa-tabs a[href$="#tcsa-tab-pairings"],
.tcsa-tabbed:has(#tcsa-tab-standings:target) .tcsa-tabs a[href$="#tcsa-tab-standings"],
.tcsa-tabbed:has(#tcsa-tab-crosstable:target) .tcsa-tabs a[href$="#tcsa-tab-crosstable"],
.tcsa-tabbed:not(:has(> .tcsa-tab-panel:target)) .tcsa-tabs a[href$="#tcsa-tab-pairings"] { background: var(--gloss); box-shadow: var(--clay-sm); color: var(--ink); }

/* The way into the organizer console for the people who run the event (mockup: .deep, .deep .grow). */
.tcsa-manage-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem 1rem; margin-bottom: var(--gap); border-radius: var(--radius-sm); background: rgba(124, 207, 176, .22); box-shadow: var(--well); }
.tcsa-manage-strip > p { flex: 1; min-width: 12rem; margin: 0; }
.tcsa-section-source { margin-top: 1rem; }

/* --- Tables (mockup: .table-wrap, table, th/td, tbody tr, .xt) --- */
table {
    width: 100%;
    margin: 0 0 1em;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius);
    background: var(--gloss-plate);
    box-shadow: var(--clay);
}

caption { padding: 0 0 .5rem; color: var(--ink-2); font-size: .88rem; font-weight: 600; text-align: left; }
th, td { padding: .8rem 1.1rem; text-align: left; }
thead th { color: var(--ink-2); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
tbody th { font-weight: 400; }
tbody th, tbody td { border-top: 1px solid var(--line); transition: background .2s var(--ease); }
tbody tr:hover > * { background: rgba(255, 255, 255, .55); }
tbody tr:last-child > :first-child { border-bottom-left-radius: var(--radius); }
tbody tr:last-child > :last-child { border-bottom-right-radius: var(--radius); }

/* --- Pass 2: a table in its own plate, numbers, and the groups of a form (mockup: .table-wrap, td.num/th.num,
   fieldset + legend, .cols.even, .actions, .primary, button.link, and the coral of an error for a destructive action).
   The wizard keeps its own names from story 1771; these are the general ones. --- */
/* .table-wrap is one of the mockup's surfaces; inside a card the section already is the plate, so there it only scrolls. */
.tcsa-table-wrap { overflow-x: auto; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
main section .tcsa-table-wrap { margin: 0 0 1em; background: none; box-shadow: none; }
.tcsa-table-wrap table { margin: 0; border-radius: 0; background: none; box-shadow: none; }

/* A number is written to the right, one digit under another (mockup: td.num, th.num). */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* The prizes of a wizard's section, grouped under their title (mockup: event-create, fieldset + legend "Prizes"). */
fieldset.tcsa-wizard-prizes { border: 0; min-width: 0; margin: 0; }
legend.tcsa-wizard-prizes-title { padding: 0; }

/* Two fields on one line, one under the other when there is no room (mockup: .cols.even). */
main form > p.tcsa-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem var(--gap); align-items: end; }
.tcsa-pair > span { display: grid; gap: .3rem; }
@media (max-width: 52rem) { main form > p.tcsa-pair { grid-template-columns: 1fr; } }

/* The buttons of a form in one row (mockup: .actions). */
.tcsa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
main form > .tcsa-actions { flex: 0 0 100%; margin: .7rem 0 0; }
.tcsa-actions > button { margin-top: 0; }

/* Kinds of buttons: the one that saves (mockup: .primary, button[type="submit"]), the quiet one
   (mockup: button.link) and the one that destroys, in the coral the errors wear. */
button.tcsa-primary { background: var(--gloss-jade); color: #0f3328; box-shadow: rgba(42, 122, 98, .9) 0 12px 20px -12px, rgba(255, 255, 255, .8) 1px 1px 2px inset, rgba(16, 72, 56, .25) -1px -2px 4px inset; }
button.tcsa-secondary { min-height: 0; padding: .3rem .8rem; background: transparent; box-shadow: none; color: var(--jade-deep); font-size: .9rem; }
button.tcsa-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, .6); transform: none; }
button.tcsa-destructive { min-height: 0; padding: .3rem .8rem; background: transparent; box-shadow: none; color: var(--coral-deep); font-size: .9rem; }
button.tcsa-destructive:hover:not(:disabled) { background: rgba(232, 115, 92, .12); transform: none; }

/* Admin verification queue (mockup adm-verify: .chip-row, .chip.on, .table-wrap, .badge wait/ok, button.link). */
.tcsa-admin-verify-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.tcsa-admin-verify-chips button { min-height: 0; padding: .3rem .8rem; background: rgba(255, 255, 255, .55); box-shadow: none; font-size: .85rem; font-weight: 500; }
.tcsa-admin-verify-chips button[aria-pressed="true"] { background: var(--gloss-jade); box-shadow: var(--clay-sm); color: #0f3328; font-weight: 600; }
.tcsa-admin-verify-table { overflow-x: auto; margin: 0 0 1em; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-admin-verify-table table { margin: 0; border-radius: 0; background: none; box-shadow: none; }
.tcsa-admin-verify-table .tcsa-admin-org-name { font-weight: 600; overflow-wrap: anywhere; }
.tcsa-admin-verify-details { overflow-wrap: anywhere; }
.tcsa-admin-verify-state { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .75rem; border-radius: var(--pill); background: var(--plate-2); box-shadow: var(--well); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.tcsa-admin-verify-state::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; }
.tcsa-admin-verify-state[data-tone="ok"] { color: var(--jade-deep); }
.tcsa-admin-verify-state[data-tone="wait"] { color: var(--amber-deep); }
.tcsa-admin-verify-state[data-tone="wait"]::before { animation: tcsa-pulse 1.6s ease-in-out infinite; }
.tcsa-admin-verify-asked { display: block; margin-top: .25rem; }
.tcsa-admin-verify-actions { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.tcsa-admin-ask { display: grid; gap: .6rem; max-width: 40rem; margin: 0 0 1em; }
.tcsa-admin-ask-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }

/* Tables that scroll sideways inside their own plate (mockup: .table-wrap). */
.tcsa-crosstable-scroll,
.tcsa-circuit-table {
    overflow-x: auto;
    border-radius: var(--radius);
    background: var(--gloss-plate);
    box-shadow: var(--clay);
}

.tcsa-crosstable-scroll table,
.tcsa-circuit-table table { margin: 0; border-radius: 0; background: none; box-shadow: none; white-space: nowrap; }

.tcsa-circuit-table > p { margin: 0; padding: .6rem 1.1rem .9rem; }

/* Sections whose table has no wrapper of its own: a wide table scrolls inside the card, not the page. */
.tcsa-roster,
.tcsa-section-entries,
.tcsa-org-members,
.tcsa-player-games { overflow-x: auto; }

/* Entries of a section (story 1731; mockup om-entries: .chip-row with .chip.on as the filters, .badge ok / bad in the Eligibility column)
   and finding a player by name above the form that adds one (the Add player search: .line, .list .item, a plain button). */
.tcsa-section-entries-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.tcsa-section-entries-chips button { min-height: 0; padding: .3rem .8rem; border-radius: var(--pill); background: rgba(255, 255, 255, .55); box-shadow: none; color: var(--ink); font-size: .85rem; font-weight: 500; }
.tcsa-section-entries-chips button[aria-pressed="true"] { background: var(--gloss-jade); box-shadow: var(--clay-sm); color: #0f3328; font-weight: 600; }
.tcsa-section-entries-eligibility { white-space: normal; }
.tcsa-section-entries-rule { display: inline-flex; align-items: center; gap: .4rem; margin: .1rem .3rem .1rem 0; padding: .15rem .75rem; border-radius: var(--pill); background: var(--plate-2); box-shadow: var(--well); color: var(--jade-deep); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.tcsa-section-entries-rule::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; }
.tcsa-section-entries-rule[data-mark="NotMet"] { color: var(--coral-deep); }
main form.tcsa-roster-search { max-width: none; gap: .6rem; margin-bottom: .6rem; padding: .6rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .45); }
main form.tcsa-roster-search > label { flex: 0 0 auto; margin-top: 0; }
main form.tcsa-roster-search > input { flex: 1 1 14rem; width: auto; }
main form.tcsa-roster-search > button { margin-top: 0; }
.tcsa-roster-found h3 { margin: .6rem 0 .3rem; font-size: .95rem; }
.tcsa-roster-found ul { display: grid; gap: .4rem; list-style: none; margin: 0 0 .8rem; padding: 0; }
.tcsa-roster-found li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; padding: .6rem 1rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .5); }
.tcsa-roster-found-name { flex: 1 1 12rem; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.tcsa-roster-pick { margin: 0; }

/* Organizer standings of a published event: share them and open the public page (mockup om-standings head). */
.tcsa-standings-links { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.tcsa-standings-links .tcsa-share { margin: 0; }

/* Age categories of a section (story 1753; mockup om-standings: .chip-row with All and the
   section's categories, .chip.on for the one shown). A chip is a link (?cat=), so a filtered
   view is shareable; the editor is the vocabulary as check boxes, owners and admins only. */
.tcsa-category-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.tcsa-category-chips a { display: inline-flex; align-items: center; justify-content: center; min-height: 0; padding: .3rem .8rem; border-radius: var(--pill); background: rgba(255, 255, 255, .55); box-shadow: none; color: var(--ink); font-size: .85rem; font-weight: 500; text-decoration: none; }
.tcsa-category-chips a[aria-current="page"] { background: var(--gloss-jade); box-shadow: var(--clay-sm); color: #0f3328; font-weight: 600; }
.tcsa-section-categories .tcsa-section-category-list { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin: 0 0 1rem; }
.tcsa-section-categories label.tcsa-section-category { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: var(--pill); background: rgba(255, 255, 255, .55); color: var(--ink); font-weight: 500; cursor: pointer; }
.tcsa-section-categories label.tcsa-section-category:has(input:checked) { background: var(--gloss-jade); box-shadow: var(--clay-sm); color: #0f3328; font-weight: 600; }
.tcsa-section-categories label.tcsa-section-category input { width: auto; min-height: 0; margin: 0; }

/* The podium card in the organizer standings (story 1809; mockup om-standings "Podium card"): a button that opens the card, its share sheet and "save image". */
.tcsa-podium > summary { display: inline-flex; align-items: center; min-height: 2.6rem; padding: .5rem 1.4rem; border-radius: var(--pill); background: var(--gloss); box-shadow: var(--clay-sm); font-weight: 600; cursor: pointer; list-style: none; }
.tcsa-podium > summary::-webkit-details-marker { display: none; }
.tcsa-podium[open] { flex-basis: 100%; text-align: center; }
.tcsa-podium[open] > summary { margin-bottom: 1rem; }
.tcsa-podium .tcsa-share { justify-content: center; }
.tcsa-podium .tcsa-podium-save { margin: .4rem; }

/* Crosstables: narrow centred cells, names to the left (mockup: .xt). */
.tcsa-crosstable th,
.tcsa-crosstable td,
.tcsa-circuit-table th,
.tcsa-circuit-table td { padding: .35rem .5rem; border-radius: 0; text-align: center; font-variant-numeric: tabular-nums; }

.tcsa-crosstable th:nth-child(2),
.tcsa-circuit-table th:nth-child(2) { text-align: left; }

.tcsa-crosstable th:first-child, .tcsa-crosstable td:first-child,
.tcsa-circuit-table th:first-child, .tcsa-circuit-table td:first-child { padding-left: 1.1rem; }

.tcsa-crosstable th:last-child, .tcsa-crosstable td:last-child,
.tcsa-circuit-table th:last-child, .tcsa-circuit-table td:last-child { padding-right: 1.1rem; font-weight: 600; }

.tcsa-roster-list td:first-child, .tcsa-roster-list td:nth-child(4), .tcsa-roster-points { font-variant-numeric: tabular-nums; }
.tcsa-roster-list td:last-child { white-space: normal; }
.tcsa-roster-list td:last-child > * { margin: .1rem .15rem .1rem 0; }
.tcsa-native-bye { color: var(--ink-2); font-style: italic; }
.tcsa-native-result { font-weight: 600; }

/* Embed code on a section page (mockup: the embed dialog), and the embedded standings themselves (mockup: pub-embed). */
.tcsa-embed-code { margin: var(--gap) 0; }
.tcsa-embed-code > summary { display: inline-flex; align-items: center; min-height: 2.6rem; padding: .5rem 1.4rem; border-radius: var(--pill); background: var(--gloss); box-shadow: var(--clay-sm); font-weight: 600; cursor: pointer; list-style: none; }
.tcsa-embed-code > summary::-webkit-details-marker { display: none; }
.tcsa-embed-code[open] { padding: clamp(1.1rem, 2.5vw, 1.75rem); border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-embed-code label { display: grid; gap: .3rem; margin-top: .8rem; }
.tcsa-embed-code textarea, .tcsa-embed-code input { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .82rem; }
.tcsa-embed { overflow: hidden; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
body:has(> .tcsa-embed)::before { display: none; }
body:has(> .tcsa-embed) { min-height: 0; background: transparent; }
.tcsa-embed .tcsa-public-sponsors { display: grid; gap: .4rem; }
.tcsa-embed > .tcsa-note { padding: .5rem 1rem; }
.tcsa-embed-live { margin: 0; padding: .5rem 1rem; color: var(--ink-2); font-size: .82rem; }

/* How far a part is (mockup: .bar). */
progress { width: 6rem; height: .55rem; border: 0; border-radius: var(--pill); background: var(--sunk); overflow: hidden; vertical-align: middle; accent-color: var(--jade-deep); }
progress::-webkit-progress-bar { background: var(--sunk); }
progress::-webkit-progress-value { background: var(--gloss-jade); }
progress::-moz-progress-bar { background: var(--gloss-jade); }

/* --- Find events in the player app (mockup: discover: .line, .chip-row, .chip.on, .grid-cards, .card, .tag, .badge tones) --- */
main > form.tcsa-discover-search { flex-wrap: wrap; align-items: center; gap: .6rem; max-width: none; margin: 0 0 1rem; padding: .6rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .45); box-shadow: none; }
main > form.tcsa-discover-search > input[name="q"] { flex: 3 1 14rem; width: auto; }
main > form.tcsa-discover-search > button { margin-top: 0; }
.tcsa-discover-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.tcsa-discover-chips a { padding: .3rem .8rem; border-radius: var(--pill); background: rgba(255, 255, 255, .55); color: var(--ink); font-size: .85rem; font-weight: 500; text-decoration: none; }
.tcsa-discover-chips a[aria-current="page"] { background: var(--gloss-jade); box-shadow: var(--clay-sm); color: #0f3328; font-weight: 600; }
.tcsa-discover-cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.tcsa-discover-card { padding: clamp(1.1rem, 2.5vw, 1.75rem); border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-discover-card h3 { margin: .6rem 0 .35em; }
.tcsa-discover-card h3 a { color: inherit; text-decoration: none; }
.tcsa-discover-card p { margin: 0; color: var(--ink-2); }
.tcsa-discover-top { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }
.tcsa-discover-tag { display: inline-block; padding: .05rem .55rem; border-radius: var(--pill); background: var(--plate-2); box-shadow: var(--well); color: var(--ink-2); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.tcsa-discover-badge { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; padding: .15rem .75rem; border-radius: var(--pill); background: var(--plate-2); box-shadow: var(--well); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.tcsa-discover-badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; }
.tcsa-discover-badge[data-tone="ok"] { color: var(--jade-deep); }
.tcsa-discover-badge[data-tone="wait"] { color: var(--amber-deep); }
.tcsa-discover-badge[data-tone="wait"]::before { animation: tcsa-pulse 1.6s ease-in-out infinite; }
.tcsa-discover-open { display: grid; gap: .5rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.tcsa-discover-open li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.tcsa-discover-places { color: var(--ink-2); font-size: .9rem; }
.tcsa-discover-open .tcsa-enter-link { min-height: 2rem; padding: .25rem 1rem; font-size: .85rem; }

/* --- Facts about a player (mockup: dl.result) --- */
.tcsa-player-facts {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: .65rem 1.5rem;
    margin: 0 0 1em;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    background: var(--gloss-plate);
    box-shadow: var(--clay);
}

.tcsa-player-facts dt { color: var(--ink-2); font-size: .85rem; font-weight: 600; }
.tcsa-player-facts dd { margin: 0; overflow-wrap: anywhere; }

/* A player's public page across tournaments (story 1752; mockup pub-player: .page-head .row, .avatar, the facts line,
   .stats, the history table). The head, the rating tiles and the table are the profile's own blocks. */
.tcsa-public-player-fide { margin: .3rem 0 0; }
.tcsa-public-player-history { margin-top: var(--gap); }

/* --- Lists of rows (mockup: .list, .item with .t and .s, .sortable for numbered ones, .screen-list) --- */
.tcsa-public-events ul,
.tcsa-public-sections ul,
.tcsa-circuit-stops ol,
.tcsa-admin-organizations ul,
.tcsa-org-invited ul,
.tcsa-claims-waiting ul,
.tcsa-claims-mine ul,
.tcsa-entries ul,
.tcsa-invitations ul,
.tcsa-upload-history ul,
.tcsa-section-list,
.tcsa-sponsor-list,
.tcsa-org-list,
.tcsa-circuit-list,
.tcsa-people-list,
.tcsa-people-linked { display: grid; gap: .6rem; list-style: none; margin: 0 0 1em; padding: 0; }

.tcsa-public-events li,
.tcsa-public-sections li,
.tcsa-circuit-stops li,
.tcsa-admin-organizations li,
.tcsa-org-invited li,
.tcsa-claims-waiting li,
.tcsa-claims-mine li,
.tcsa-entries li,
.tcsa-invitations li,
.tcsa-upload-history li,
.tcsa-section-list li,
.tcsa-sponsor-list li,
.tcsa-org-list li,
.tcsa-circuit-list li,
.tcsa-people-list li,
.tcsa-people-linked li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .9rem;
    padding: .8rem 1rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .5);
}

/* Format, fee and prizes of a section (mockup: event: dl.result, the Prizes card; event-create: .cols.even, the Prizes fieldset with .line rows). */
.tcsa-public-sections li > .tcsa-section-facts,
.tcsa-public-sections li > .tcsa-prizes { flex: 0 0 100%; }
dl.tcsa-section-facts:not(.tcsa-player-facts) { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: .2rem 1rem; margin: 0; font-size: .88rem; }
dl.tcsa-section-facts:not(.tcsa-player-facts) dt { color: var(--ink-2); font-weight: 600; }
dl.tcsa-section-facts:not(.tcsa-player-facts) dd { margin: 0; overflow-wrap: anywhere; }
.tcsa-prizes h3 { margin: .4rem 0 .2rem; font-size: .95rem; }
.tcsa-prizes ol { margin: 0; padding-left: 1.4rem; }
.tcsa-public-sections .tcsa-prizes li { display: list-item; padding: .1rem 0; border-radius: 0; background: none; }
.tcsa-prizes li .tcsa-note { margin-left: .5rem; }
.tcsa-prizes > p { margin: .3rem 0 0; }
main form > fieldset.tcsa-prizes-edit { flex: 0 0 100%; display: grid; gap: .5rem; min-width: 0; margin: .5rem 0 0; padding: .6rem; border: 0; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .45); }
.tcsa-prizes-edit legend { padding: 0; color: var(--ink-2); font-size: .88rem; font-weight: 600; }
.tcsa-prizes-edit > p { margin: 0; }
.tcsa-prizes-edit > p:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: .5rem; }
.tcsa-prize-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tcsa-prize-row > input:not([type="checkbox"]):not([type="radio"]) { flex: 1 1 9rem; width: auto; }
.tcsa-prize-row > button, .tcsa-prize-add { margin: 0; justify-self: start; }

/* The first thing in a row is what the row is about and takes the room (mockup: .item .grow, .t). */
:is(.tcsa-public-events, .tcsa-public-sections, .tcsa-circuit-stops, .tcsa-admin-organizations, .tcsa-org-invited, .tcsa-claims-waiting, .tcsa-claims-mine, .tcsa-entries, .tcsa-invitations, .tcsa-upload-history, .tcsa-section-list, .tcsa-sponsor-list, .tcsa-org-list, .tcsa-circuit-list, .tcsa-people-list, .tcsa-people-linked) li > :first-child { flex: 1 1 12rem; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }

:is(.tcsa-public-events, .tcsa-public-sections, .tcsa-circuit-stops, .tcsa-admin-organizations, .tcsa-org-invited, .tcsa-claims-waiting, .tcsa-claims-mine, .tcsa-entries, .tcsa-invitations, .tcsa-upload-history, .tcsa-section-list, .tcsa-sponsor-list, .tcsa-org-list, .tcsa-circuit-list, .tcsa-people-list, .tcsa-people-linked) li .tcsa-note,
.tcsa-people-email { color: var(--ink-2); font-size: .85rem; }

li > input:not([type="checkbox"]):not([type="radio"]) { flex: 1 1 12rem; width: auto; }
.tcsa-sponsor-link { overflow-wrap: anywhere; font-size: .85rem; }

/* Regulations of a circuit (mockup: circuit-rules: head with .badge bad "locked", .cols.even, .card with .chip-row, dl.result). */
main section.tcsa-circuit-regs { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.tcsa-circuit-regs h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.tcsa-circuit-locked { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .75rem; border-radius: var(--pill); background: var(--plate-2); box-shadow: var(--well); color: var(--coral-deep); font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.tcsa-circuit-locked::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; }
.tcsa-circuit-regs-cols { display: grid; gap: var(--gap); grid-template-columns: 1fr 1fr; align-items: start; }
.tcsa-circuit-regs-points,
.tcsa-circuit-regs-facts { margin: 0; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-circuit-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.tcsa-circuit-chips li { padding: .3rem .8rem; border-radius: var(--pill); background: rgba(255, 255, 255, .55); font-size: .85rem; font-weight: 500; }
.tcsa-circuit-playing { margin: .6rem 0 0; }
.tcsa-circuit-regs-facts { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .65rem 1.5rem; }
.tcsa-circuit-regs-facts dt { color: var(--ink-2); font-size: .85rem; font-weight: 600; }
.tcsa-circuit-regs-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 52rem) { .tcsa-circuit-regs-cols { grid-template-columns: 1fr; } }
@media (max-width: 40rem) { .tcsa-circuit-regs-facts { grid-template-columns: 1fr; gap: .1rem; } .tcsa-circuit-regs-facts dd { margin-bottom: .6rem; } }

/* The stops of a circuit as the organizer's table, its final and the sponsors of its stops (story 1773;
   mockup circuit: .table-wrap with td.num, .badge tones, the final as an .item, the sponsors card). */
.tcsa-circuit-stops-table {
    overflow-x: auto;
    border-radius: var(--radius);
    background: var(--gloss-plate);
    box-shadow: var(--clay);
}

.tcsa-circuit-stops-table table { margin: 0; border-radius: 0; background: none; box-shadow: none; }
.tcsa-circuit-stops-table th.num,
.tcsa-circuit-stops-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tcsa-circuit-stops-table .tcsa-circuit-stop-venue { overflow-wrap: anywhere; }
.tcsa-circuit-stops-table .tcsa-circuit-stop-venue .tcsa-note { display: block; }
.tcsa-circuit-stops-table .tcsa-circuit-stop-status[data-tone="bad"] { color: var(--coral-deep); }
.tcsa-circuit-stop-actions > * + * { margin-left: .6rem; }
.tcsa-circuit-stop-actions .tcsa-circuit-stop-begun { display: block; margin: .2rem 0 0; }

/* A locked circuit is not deleted (story 1815; mockup circuit: the note under the rules form). */
.tcsa-circuit-delete-locked { display: block; margin: .5rem 0 0; }

.tcsa-circuit-final { margin: 0 0 var(--gap); }
.tcsa-circuit-final-facts {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: .65rem 1.5rem;
    margin: 0 0 1em;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    background: var(--gloss-plate);
    box-shadow: var(--clay);
}

.tcsa-circuit-final-facts dt { color: var(--ink-2); font-size: .85rem; font-weight: 600; }
.tcsa-circuit-final-facts dd { margin: 0; overflow-wrap: anywhere; }
.tcsa-circuit-final-later { margin: 0 0 1em; }

@media (max-width: 40rem) {
    .tcsa-circuit-final-facts { grid-template-columns: 1fr; gap: .1rem; }
    .tcsa-circuit-final-facts dd { margin-bottom: .6rem; }
}

.tcsa-circuit-sponsors { margin: 0 0 var(--gap); }
.tcsa-circuit-sponsors-none { margin: 0 0 1em; }

/* The circuit's invite post (story 1810; mockup circuit: the "Invite post" button, the share sheet with its .share-card). */
.tcsa-circuit-invite { margin: 0 0 var(--gap); }
.tcsa-circuit-invite > summary { display: inline-flex; align-items: center; min-height: 2.6rem; padding: .5rem 1.4rem; border-radius: var(--pill); background: var(--gloss); box-shadow: var(--clay-sm); font-weight: 600; cursor: pointer; list-style: none; }
.tcsa-circuit-invite > summary::-webkit-details-marker { display: none; }
.tcsa-circuit-invite[open] { padding: clamp(1.1rem, 2.5vw, 1.75rem); border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-circuit-invite[open] > summary { margin-bottom: 1rem; }
.tcsa-circuit-invite .tcsa-circuit-invite-save { margin: 0 0 .6rem; }

/* Stops of a circuit keep their number (mockup: .sortable li b). */
.tcsa-circuit-stops ol { counter-reset: tcsa-stop; }
.tcsa-circuit-stops li { counter-increment: tcsa-stop; }
.tcsa-circuit-stops li::before { content: counter(tcsa-stop); flex: none; width: 1.6rem; color: var(--jade-deep); font-weight: 700; }
.tcsa-circuit-stops li > :first-child { flex: 1 1 12rem; }

/* --- Admin overview (mockup: adm-dashboard: .stats, .stat, .grid-cards, .card-link, .card-icon) --- */
.tcsa-admin-stats { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: var(--gap) 0; }
.tcsa-admin-stat { padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-admin-stat b { display: block; font: 300 2rem/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tcsa-admin-stat span { color: var(--ink-2); font-size: .85rem; font-weight: 600; }
.tcsa-admin-cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: var(--gap) 0; }
.tcsa-admin-card { display: block; padding: clamp(1.1rem, 2.5vw, 1.75rem); border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); color: inherit; text-decoration: none; transition: transform .3s var(--ease); }
.tcsa-admin-card:hover { transform: translateY(-3px); color: inherit; }
.tcsa-admin-card h3 { margin: 0 0 .35em; }
.tcsa-admin-card p { margin: 0; color: var(--ink-2); }
.tcsa-admin-card-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: .9rem; border-radius: 14px; background: var(--gloss-jade); box-shadow: rgba(42, 122, 98, .8) 0 8px 14px -8px, rgba(255, 255, 255, .8) 1px 1px 2px inset; color: #11392d; font-size: 1.25rem; }

/* "New event" and the event wizard (mockup: event-create: head button .primary, .steps with span.on / span.done, .card at most 44rem,
   .cols.even, .chip-row with .chip.on, fieldset, .line, .list .item with a select, dl.result, .row of Back / Next). */
a.tcsa-events-new { display: inline-flex; align-items: center; min-height: 2.6rem; padding: .5rem 1.4rem; border-radius: var(--pill); font-weight: 600; text-decoration: none; transition: transform .25s var(--ease); }
a.tcsa-events-new:hover { transform: translateY(-2px); color: #0f3328; }
.tcsa-wizard-steps { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 var(--gap); padding: 0; list-style: none; }
.tcsa-wizard-steps li { padding: .3rem .85rem; border-radius: var(--pill); background: rgba(255, 255, 255, .4); color: var(--ink-2); font-size: .85rem; }
.tcsa-wizard-steps li.on { background: var(--gloss-jade); box-shadow: var(--clay-sm); color: #0f3328; font-weight: 600; }
.tcsa-wizard-steps li.done { color: var(--jade-deep); }
.tcsa-wizard-steps li.done::before { content: "\2713  "; }
main section.tcsa-wizard { max-width: 44rem; }
main form.tcsa-wizard-form { max-width: none; }
main form > p.tcsa-wizard-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .3rem var(--gap); align-items: end; }
.tcsa-wizard-pair > span { display: grid; gap: .3rem; }
.tcsa-wizard-chips { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; }
.tcsa-wizard-chips button { min-height: 0; padding: .3rem .8rem; border-radius: var(--pill); background: rgba(255, 255, 255, .55); box-shadow: none; font-size: .85rem; font-weight: 500; }
.tcsa-wizard-chips button[aria-pressed="true"] { background: var(--gloss-jade); box-shadow: var(--clay-sm); color: #0f3328; font-weight: 600; }
.tcsa-wizard-sections, .tcsa-wizard-sponsors { flex: 0 0 100%; display: grid; gap: .6rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.tcsa-wizard-sections li, .tcsa-wizard-sponsors li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .6rem 1rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .5); }
.tcsa-wizard-sections li > input { flex: 1 1 12rem; width: auto; }
.tcsa-wizard-sponsors li > label { flex: 1 1 10rem; color: var(--ink); font-weight: 600; }
.tcsa-wizard-sponsors li > select { width: auto; }
main form > fieldset.tcsa-wizard-part { flex: 0 0 100%; display: grid; gap: .6rem; min-width: 0; margin: 0 0 .6rem; padding: 1rem 1.25rem 1.25rem; border: 0; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-wizard-part legend { padding: 0 .6rem; font: 500 1.05rem var(--font-display); }
.tcsa-wizard-part > p { margin: 0; }
.tcsa-wizard-part > p:has(> input[type="checkbox"]), .tcsa-wizard-prizes > p { display: flex; align-items: center; gap: .5rem; margin: 0; }
.tcsa-wizard-prizes { display: grid; gap: .5rem; padding: .6rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .45); }
.tcsa-wizard-prizes-title { color: var(--ink-2); font-size: .88rem; font-weight: 600; }
.tcsa-wizard-prizes .tcsa-prize-add { justify-self: start; }
dl.tcsa-wizard-review { flex: 0 0 100%; display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .65rem 1.5rem; margin: 0 0 1em; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
dl.tcsa-wizard-review dt { color: var(--ink-2); font-size: .85rem; font-weight: 600; }
dl.tcsa-wizard-review dd { margin: 0; overflow-wrap: anywhere; }
main form > p.tcsa-wizard-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .7rem 0 0; }
@media (max-width: 40rem) { dl.tcsa-wizard-review { grid-template-columns: 1fr; gap: .1rem; } dl.tcsa-wizard-review dd { margin-bottom: .6rem; } }

/* The apps on the public home (mockup: .screen-list). */
.tcsa-area-list { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); list-style: none; margin: var(--gap) 0; padding: 0; }
.tcsa-area-list a { display: block; padding: .7rem .95rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .55); color: var(--ink); font-weight: 600; text-decoration: none; }
.tcsa-area-list a:hover { background: #fff; }

/* My data (mockup: my-data: .cols.even, dl.result, .card with a .list of buttons, .hint, .toast). */
.tcsa-my-data-cols { display: grid; gap: var(--gap); grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 52rem) { .tcsa-my-data-cols { grid-template-columns: 1fr; } }
.tcsa-my-data-facts { margin: 0; }
.tcsa-my-data-requests { display: grid; gap: .6rem; }
.tcsa-my-data-requests h2 { margin: 0; }
.tcsa-my-data-download { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: .5rem 1.4rem; border-radius: var(--pill); background: var(--gloss-jade); box-shadow: var(--clay-sm); color: #0f3d2f; font-weight: 600; text-decoration: none; }
.tcsa-my-data-download:hover { color: #0f3d2f; filter: brightness(1.04); }
.tcsa-my-data-correct { display: grid; gap: .4rem; margin: 0; }
.tcsa-my-data-correct textarea { width: 100%; font: inherit; }
.tcsa-my-data-correct button, .tcsa-my-data-delete { justify-self: start; margin-top: 0; }
.tcsa-my-data-delete, .tcsa-my-data-delete-confirm, .tcsa-gdpr-delete, .tcsa-gdpr-delete-confirm { color: var(--coral-deep); }
.tcsa-my-data-delete-step { padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--plate-2); box-shadow: var(--well); }
.tcsa-my-data-delete-step p { margin: 0 0 .6rem; }
.tcsa-my-data-delete-step button { margin: 0 .4rem .4rem 0; }
.tcsa-my-data-requests .tcsa-note { margin: 0; }
.tcsa-play-privacy { color: var(--ink-2); }
.tcsa-toast { width: max-content; max-width: 100%; margin: 1rem 0; padding: .7rem 1.3rem; border-radius: var(--pill); background: var(--ink); color: #fff; font-weight: 500; box-shadow: var(--clay); }

/* Children of a club or federation (story 1769; mockups minors: .card rows with .muted.small facts and button.link actions; minor-add: fieldset on rgba(255,255,255,.5), .hint). */
.tcsa-org-children-list { display: grid; gap: .5rem; margin: 0 0 1em; padding: 0; list-style: none; }
.tcsa-org-children-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; padding: .7rem 1rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .45); }
.tcsa-org-children-list li > :first-child { flex: 1 1 12rem; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.tcsa-org-children-list .tcsa-note { margin: 0; font-size: .88rem; }
.tcsa-org-children-list button, .tcsa-org-child-cancel { min-height: 0; margin: 0; padding: .25rem .5rem; border: 0; background: none; box-shadow: none; color: var(--jade-deep); font-weight: 600; text-decoration: underline; }
.tcsa-org-children-list .tcsa-org-child-delete, .tcsa-org-children-list .tcsa-org-child-delete-confirm { color: var(--coral-deep); }
.tcsa-org-child-delete-step { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; flex: 0 0 100%; }
main form.tcsa-org-child-form > fieldset { flex: 0 0 100%; display: grid; gap: .5rem; min-width: 0; margin: .5rem 0 0; padding: .6rem .8rem; border: 0; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .5); }
.tcsa-org-child-form legend { padding: 0 .4rem; font-weight: 600; }
.tcsa-org-child-form fieldset .tcsa-note { margin: 0; }
.tcsa-org-child-consent { display: flex; align-items: flex-start; gap: .5rem; margin: 0; }
.tcsa-org-child-consent input { width: auto; min-height: 0; margin: .2rem 0 0; }

/* Report a page of the public site and the moderation queue (story 1794; mockup adm-moderation: .table-wrap, td.num, .badge wait, button.link;
   the report link and form have no mockup screen: a quiet link like .hint, the form like the mockup's forms). */
.tcsa-report-link { margin: 1.5rem 0 .5rem; font-size: .85rem; }
.tcsa-report-link a { color: var(--ink-2); }
.tcsa-report-form { display: grid; gap: .4rem; max-width: 40rem; margin: 1rem 0 0; }
.tcsa-report-form button { justify-self: start; }
.tcsa-moderation-count { text-align: right; font-variant-numeric: tabular-nums; }
.tcsa-moderation-details { display: block; max-width: 28rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.tcsa-moderation-item a { overflow-wrap: anywhere; }
.tcsa-circuit-stop-removed { opacity: .6; }

/* Data requests and processors (mockup: adm-gdpr, adm-processors: .table-wrap, .badge ok / wait / bad, button.link). */
.tcsa-gdpr-status { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .75rem; border-radius: var(--pill); background: var(--plate-2); box-shadow: var(--well); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.tcsa-gdpr-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; }
.tcsa-gdpr-status[data-tone="ok"] { color: var(--jade-deep); }
.tcsa-gdpr-status[data-tone="wait"] { color: var(--amber-deep); }
.tcsa-gdpr-status[data-tone="bad"] { color: var(--coral-deep); }
.tcsa-gdpr-overdue td { background: rgba(232, 115, 92, .1); }
.tcsa-gdpr-late { margin-left: .4rem; }
.tcsa-gdpr-details { display: block; max-width: 28rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.tcsa-gdpr-subject, .tcsa-gdpr-id { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tcsa-gdpr-actions { white-space: nowrap; }
.tcsa-gdpr-actions button { min-height: 2.1rem; margin: 0 .3rem .3rem 0; padding: .3rem .9rem; }
.tcsa-processor-form { display: grid; gap: .4rem; max-width: 40rem; margin: 1rem 0 0; }
.tcsa-processor-form h2 { margin: 0 0 .2rem; }
.tcsa-processor-form button { justify-self: start; }
.tcsa-processor-dpa-field { display: flex; align-items: center; gap: .5rem; }

/* Who organizes it: logo, name, links in a row (mockup: .row). */
.tcsa-organizer { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.tcsa-organizer-kind { color: var(--ink-2); font-weight: 600; }
.tcsa-organizer-link { font-size: .9rem; }

/* The "I'm playing" share card (story 1808; mockup register-done .share-card): the PNG drawn on the server, shown as the mockup's card. */
.tcsa-share-card {
    display: block;
    width: 100%;
    max-width: 18rem;
    height: auto;
    margin: 0 auto 1rem;
    border-radius: var(--radius);
    box-shadow: var(--clay);
}
.tcsa-enter-done .tcsa-playing-save { margin: 0 .4rem .6rem; }
main section.tcsa-playing { text-align: center; }

/* "Tell people about it" after publishing, pairing or entering (mockup: .deep). */
.tcsa-share-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 0 0 var(--gap);
    padding: .7rem 1rem;
    border-radius: var(--radius-sm);
    background: rgba(124, 207, 176, .22);
    box-shadow: var(--well);
}

.tcsa-share-prompt > p { flex: 1; min-width: 12rem; margin: 0; }

/* --- "Something went wrong" of Blazor (mockup: .toast, in the coral of .offline-pill) --- */
#blazor-error-ui {
    display: none;
    position: fixed;
    z-index: 60;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 1.5rem);
    padding: .7rem 1.3rem;
    border-radius: var(--radius);
    background: var(--gloss-coral);
    box-shadow: var(--clay);
    color: #4a1608;
    font-weight: 500;
}

#blazor-error-ui .reload { margin-left: .6rem; color: inherit; font-weight: 600; }

/* --- Small screens, less motion, print (mockup: the same three queries) --- */
@media (max-width: 40rem) {
    .tcsa-top { border-radius: var(--radius); }
    .tcsa-backbar { border-radius: var(--radius-sm); }
    .tcsa-player-facts { grid-template-columns: 1fr; gap: .1rem; }
    .tcsa-player-facts dd { margin-bottom: .6rem; }
    th, td { padding: .6rem .7rem; }
    main form.tcsa-roster-add > label { flex: 0 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after { animation: none !important; transition: none !important; }
}

@media print {
    body { background: #fff; }
    body::before, .tcsa-top, .tcsa-backbar, #blazor-error-ui { display: none !important; }
    main { width: auto; padding: 0; }
    main section, table, .tcsa-crosstable-scroll, .tcsa-circuit-table, .tcsa-player-facts { box-shadow: none; }
}

/* --- Sign-up: name, language, privacy and terms (story 1764; mockup signup: one card with the name, the language
   select, the consent line with both links and the hint about children) --- */
main section.tcsa-signup { max-width: 30rem; }
main section.tcsa-signup select { max-width: 14rem; }
.tcsa-signup-consent { align-items: flex-start; }
.tcsa-signup-consent input { flex: none; margin-top: .25rem; }
.tcsa-signup-hint { font-size: .85rem; }

/* --- Onboarding: choose your roles (story 1765; mockup onboarding-roles: .card, a .list of .item rows with an .avatar and .t/.s, two disabled rows, then the way on) --- */
.tcsa-onboarding, .tcsa-onboarding-explain { max-width: 34rem; }
.tcsa-onboarding-cards { display: grid; gap: .5rem; margin: 0 0 1rem; }
.tcsa-onboarding-card { display: flex; align-items: center; gap: .8rem; padding: .75rem 1rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .5); cursor: pointer; }
.tcsa-onboarding-card:hover { background: rgba(255, 255, 255, .8); }
.tcsa-onboarding-card input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--jade-deep); }
.tcsa-onboarding-icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--plate-2); box-shadow: var(--well); font-size: 1.15rem; }
.tcsa-onboarding-text { display: grid; gap: .15rem; min-width: 0; }
.tcsa-onboarding-name { font-weight: 600; }
.tcsa-onboarding-note { color: var(--ink-2); font-size: .85rem; }
.tcsa-onboarding-soon { cursor: not-allowed; opacity: .7; }
.tcsa-onboarding-soon:hover { background: rgba(255, 255, 255, .5); }
.tcsa-onboarding-soon-note { color: var(--amber-deep); font-size: .8rem; font-weight: 600; }
.tcsa-onboarding-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.tcsa-onboarding-doors { display: grid; gap: .6rem; margin: 0 0 1rem; padding-left: 1.2rem; }
.tcsa-onboarding-doors .tcsa-onboarding-note { display: block; }
a.tcsa-onboarding-continue { display: inline-block; padding: .5rem 1.4rem; border-radius: var(--pill); background: var(--gloss-jade); color: #0f3328; font-weight: 600; text-decoration: none; box-shadow: rgba(42, 122, 98, .9) 0 12px 20px -12px; transition: transform .25s var(--ease); }
a.tcsa-onboarding-continue:hover { transform: translateY(-2px); color: #0f3328; }

/* --- The player's home: My events as one list, the profile prompt, the links (mockup home: .card, .list, .item, .avatar, .t, .s) --- */
.tcsa-my-events-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .6rem; }
.tcsa-my-events ul { display: grid; gap: .6rem; list-style: none; margin: 0 0 1em; padding: 0; }
.tcsa-my-event { display: flex; gap: .9rem; align-items: center; padding: .8rem 1rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .5); text-decoration: none; color: inherit; }
.tcsa-my-event:hover { background: rgba(255, 255, 255, .8); color: inherit; }
.tcsa-my-event .tcsa-avatar { width: 2.4rem; height: 2.4rem; }
.tcsa-my-event-text { display: grid; flex: 1; min-width: 0; }
.tcsa-my-event-name { font-weight: 600; overflow-wrap: anywhere; }
.tcsa-my-event-line { color: var(--ink-2); font-size: .85rem; }
.tcsa-play-setup, .tcsa-play-links { margin: 1rem 0; }

/* --- Alerts of the player app (story 1759; mockup notifications: .phone, head with button.link "Mark all read", .list, a.item, .avatar, .t when unread, .s, unread row on #fff) --- */
.tcsa-alerts { max-width: 30rem; margin-left: auto; margin-right: auto; }
.tcsa-alerts-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .6rem; }
.tcsa-alerts-head > button.tcsa-alerts-read-all { min-height: 0; padding: .3rem .8rem; background: transparent; box-shadow: none; color: var(--jade-deep); font-weight: 600; }
.tcsa-alerts ul { display: grid; gap: .6rem; list-style: none; margin: 0 0 1em; padding: 0; }
.tcsa-alert { display: flex; gap: .9rem; align-items: center; padding: .8rem 1rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .5); text-decoration: none; color: inherit; }
.tcsa-alert:hover { background: rgba(255, 255, 255, .8); color: inherit; }
.tcsa-alert.tcsa-alert-unread { background: #fff; }
.tcsa-alert .tcsa-avatar { width: 2.4rem; height: 2.4rem; }
.tcsa-alert-text { display: grid; flex: 1; min-width: 0; }
.tcsa-alert-title { overflow-wrap: anywhere; }
.tcsa-alert-unread .tcsa-alert-title { font-weight: 600; }
.tcsa-alert-line { color: var(--ink-2); font-size: .85rem; overflow-wrap: anywhere; }
.tcsa-alert-new { flex: none; padding: .15rem .6rem; border-radius: var(--pill); background: var(--plate-2); box-shadow: var(--well); color: var(--jade-deep); font-size: .75rem; font-weight: 600; }

/* --- My board and the current game on the player's home (mockup: .phone, .board-card, .vs, .piece, .card-link, .badge) --- */
.tcsa-board-card, .tcsa-board-none, .tcsa-board-now { max-width: 30rem; margin-left: auto; margin-right: auto; }
main section.tcsa-board-card { text-align: center; padding: 1.5rem; }
.tcsa-board-card > p { margin: 0 0 .6rem; }
.tcsa-board-card .tcsa-share { display: flex; justify-content: center; }
.tcsa-board-num { font: 200 4.5rem/1 var(--font-display); color: var(--jade-deep); }
.tcsa-board-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin: 1rem 0; }
.tcsa-board-side { padding: .9rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .55); overflow-wrap: anywhere; }
.tcsa-piece { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; vertical-align: -1px; border: 1.5px solid var(--ink); }
.tcsa-piece.w { background: #fff; }
.tcsa-piece.b { background: var(--ink); }

.tcsa-board-now {
    display: grid;
    gap: .4rem;
    margin-top: var(--gap);
    margin-bottom: var(--gap);
    padding: clamp(1.1rem, 2.5vw, 1.75rem);
    border-radius: var(--radius);
    background: var(--gloss-plate);
    box-shadow: var(--clay);
    color: inherit;
    text-decoration: none;
    transition: transform .3s var(--ease);
}

.tcsa-board-now:hover { transform: translateY(-3px); color: inherit; }
.tcsa-board-now-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; }
.tcsa-board-now-round { font: 300 clamp(1.3rem, 2.6vw, 1.7rem)/1.12 var(--font-display); letter-spacing: -.02em; }

/* Another player's profile in the player app (story 1766): the compact card is no longer one
   link (the opponent's name leads to their profile), so its own link keeps the card's look; an
   opponent whose name leads somewhere keeps the card's bold text, the hover being the cue. */
.tcsa-board-now-link { display: grid; gap: .4rem; color: inherit; text-decoration: none; }
.tcsa-board-now-link:hover { color: inherit; }
.tcsa-board-player { color: inherit; text-decoration: none; }
.tcsa-board-player:hover,
.tcsa-board-player:focus-visible { color: var(--jade-deep); text-decoration: underline; }

.tcsa-board-live,
.tcsa-board-state {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: .4rem;
    padding: .15rem .75rem;
    border-radius: var(--pill);
    background: var(--plate-2);
    box-shadow: var(--well);
    color: var(--amber-deep);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.tcsa-board-live::before,
.tcsa-board-state::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; }
.tcsa-board-live::before { animation: tcsa-board-pulse 1.6s ease-in-out infinite; }
.tcsa-board-state.tcsa-board-done { color: var(--jade-deep); }
@keyframes tcsa-board-pulse { 50% { opacity: .3; } }

/* Terms of service and privacy policy (mockup: terms, privacy: the short version and the full text as cards, .hint under the title;
   adm-processors: the table in a plate like the home's events), the acceptance (mockup: signup: .phone width, checkbox label)
   and the footer of every page (mockup: .site-footer). */
.tcsa-legal { max-width: 52rem; }
.tcsa-legal section h2 { margin-top: 1.4em; }
.tcsa-legal section > h2:first-child { margin-top: 0; }
.tcsa-legal-table { overflow-x: auto; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-legal-table table { margin: 0; border-radius: 0; background: none; box-shadow: none; }
main section.tcsa-legal-accept { max-width: 30rem; }
.tcsa-footer { width: min(var(--measure), calc(100% - 1.5rem)); margin: 0 auto; padding: 1.25rem 0 2rem; color: var(--ink-2); font-size: .85rem; text-align: center; }
.tcsa-footer a { color: inherit; }
@media print { .tcsa-footer { display: none; } }

/* --- Entering a section and the confirmation after it (mockup: register: .phone, .list, .item, .avatar, .badge tones;
   register-done: .card centred, .card-icon, .row) --- */
main section.tcsa-enter { max-width: 30rem; margin-left: auto; margin-right: auto; }
.tcsa-enter-checks { display: grid; gap: .6rem; list-style: none; margin: 0 0 1em; padding: 0; }
.tcsa-enter-check { display: flex; gap: .9rem; align-items: center; padding: .8rem 1rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .5); }
.tcsa-enter-check-mark { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--plate-2); box-shadow: var(--well); color: var(--ink-2); font-size: .85rem; font-weight: 600; }
.tcsa-enter-check-text { flex: 1; min-width: 0; }
.tcsa-enter-check-title { font-weight: 600; }
.tcsa-enter-check-detail { color: var(--ink-2); font-size: .85rem; }
.tcsa-enter-check-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .75rem; border-radius: var(--pill); background: var(--plate-2); box-shadow: var(--well); color: var(--jade-deep); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.tcsa-enter-check-badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; }
.tcsa-enter-check-badge[data-mark="Waiting"] { color: var(--amber-deep); }
.tcsa-enter-check-badge[data-mark="Waiting"]::before { animation: tcsa-pulse 1.6s ease-in-out infinite; }
.tcsa-enter-check-badge[data-mark="NotMet"] { color: var(--coral-deep); }
main section.tcsa-enter-done { text-align: center; }
.tcsa-enter-done-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin: 0 auto 1rem; border-radius: 14px; background: var(--gloss-jade); box-shadow: rgba(42, 122, 98, .8) 0 8px 14px -8px, rgba(255, 255, 255, .8) 1px 1px 2px inset; color: #11392d; font-size: 1.25rem; }
.tcsa-enter-done .tcsa-share-prompt { text-align: left; }
.tcsa-enter-done .tcsa-enter-home { margin-top: .6rem; }

/* A club enters its children on the same page (story 1819; mockup: register, the "Player" select and the child's rows as .list .item). */
main section.tcsa-enter-children { margin: 1.5rem 0 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.tcsa-enter-children select { width: 100%; margin-bottom: 1em; }
.tcsa-enter-children-in { display: grid; gap: .6rem; list-style: none; margin: 0 0 1em; padding: 0; }
.tcsa-enter-child-in { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; padding: .8rem 1rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .5); }
.tcsa-enter-child-name { flex: 1; min-width: 0; font-weight: 600; }
.tcsa-enter-child-done { color: var(--jade-deep); font-weight: 600; }

/* --- Organizer dashboard on /organize (mockup: org-dashboard, org-events: .page-head, .lead, .stats, .stat, .card, .list, .item, .avatar, .table-wrap, td.num, .badge tones) --- */
.tcsa-dash-stats { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-bottom: var(--gap); }
.tcsa-dash-stat { padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-dash-stat b { display: block; font: 300 2rem/1.1 var(--font-display); letter-spacing: -.02em; }
.tcsa-dash-stat span { color: var(--ink-2); font-size: .85rem; font-weight: 600; }
.tcsa-dash-list { display: grid; gap: .6rem; }
.tcsa-dash-item { display: flex; gap: .9rem; align-items: center; padding: .8rem 1rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .5); text-decoration: none; color: inherit; }
a.tcsa-dash-item:hover { background: rgba(255, 255, 255, .8); color: inherit; }
.tcsa-dash-grow { display: grid; flex: 1; min-width: 0; }
.tcsa-dash-t { font-weight: 600; }
.tcsa-dash-s, .tcsa-dash-place { color: var(--ink-2); font-size: .85rem; }
.tcsa-dash-place { display: block; }
.tcsa-dash-avatar { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--plate-2); box-shadow: var(--well); font-weight: 600; font-size: .85rem; color: var(--ink-2); }
.tcsa-dash-heading { margin-top: 2rem; }
.tcsa-dash-events { overflow-x: auto; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-dash-events table { margin: 0; border-radius: 0; background: none; box-shadow: none; }
.tcsa-dash-events .tcsa-dash-num { text-align: right; font-variant-numeric: tabular-nums; }
.tcsa-dash-badge { display: inline-flex; align-items: center; gap: .4rem; margin: .1rem .3rem .1rem 0; padding: .15rem .75rem; border-radius: var(--pill); font-size: .8rem; font-weight: 600; background: var(--plate-2); box-shadow: var(--well); white-space: nowrap; }
.tcsa-dash-badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; }
.tcsa-dash-badge[data-tone="ok"] { color: var(--jade-deep); }
.tcsa-dash-badge[data-tone="wait"] { color: var(--amber-deep); }

/* --- Overview at the top of the organizer's section page (mockup: om-overview: .stats, .stat, .cols, .stack, .card, .badge tones, td.num, .primary) --- */
.tcsa-overview-stats { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: var(--gap) 0; }
.tcsa-overview-stat { padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--gloss-plate); box-shadow: var(--clay); }
.tcsa-overview-stat b { display: block; font: 300 2rem/1.1 var(--font-display); letter-spacing: -.02em; }
.tcsa-overview-stat span { color: var(--ink-2); font-size: .85rem; font-weight: 600; }

.tcsa-overview-cols { display: grid; gap: var(--gap); grid-template-columns: 2fr 1fr; align-items: start; margin: var(--gap) 0; }
.tcsa-overview-stack { display: grid; gap: var(--gap); }
main .tcsa-overview-cols section { margin: 0; }
@media (max-width: 52rem) { .tcsa-overview-cols { grid-template-columns: 1fr; } }

.tcsa-overview-rounds { overflow-x: auto; }
.tcsa-overview-rounds td.tcsa-overview-num,
.tcsa-overview-rounds th.tcsa-overview-num { text-align: right; font-variant-numeric: tabular-nums; }

.tcsa-overview-state {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .15rem .75rem;
    border-radius: var(--pill);
    background: var(--plate-2);
    box-shadow: var(--well);
    color: var(--amber-deep);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.tcsa-overview-state::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; animation: tcsa-pulse 1.6s ease-in-out infinite; }
.tcsa-overview-state.tcsa-overview-complete { color: var(--jade-deep); }
.tcsa-overview-state.tcsa-overview-complete::before { animation: none; }

.tcsa-overview-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.6rem;
    padding: .5rem 1.4rem;
    border-radius: var(--pill);
    background: var(--gloss-jade);
    box-shadow: rgba(42, 122, 98, .9) 0 12px 20px -12px, rgba(255, 255, 255, .8) 1px 1px 2px inset, rgba(16, 72, 56, .25) -1px -2px 4px inset;
    color: #0f3328;
    font-weight: 600;
    text-decoration: none;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.tcsa-overview-go:hover { transform: translateY(-2px); color: #0f3328; }

/* --- Page heads, breadcrumbs, status badges and saved messages as toasts (story 1799; mockup: the head() helper's .page-head with .lead and .row.between, the .crumbs line of omHead, .badge with its data-tone dot and pulse, and the .toast the script raises). --- */
.tcsa-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: var(--gap); }
.tcsa-page-head-text { min-width: 0; }
.tcsa-page-head-lead { max-width: 60ch; margin: .35rem 0 0; color: var(--ink-2); font-size: 1.08rem; }
.tcsa-page-head-detail { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .5rem; }
.tcsa-page-head-detail > * { margin: 0; }
.tcsa-page-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.tcsa-crumbs { margin-bottom: .5rem; color: var(--ink-2); font-size: .85rem; }
.tcsa-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.tcsa-crumbs li + li::before { content: "›"; margin-right: .3rem; color: var(--ink-2); }
.tcsa-crumbs a { color: var(--ink-2); }
.tcsa-crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }
.tcsa-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .75rem; border-radius: var(--pill); font-size: .8rem; font-weight: 600; background: var(--plate-2); box-shadow: var(--well); white-space: nowrap; }
.tcsa-badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentcolor; }
.tcsa-badge[data-tone="ok"] { color: var(--jade-deep); }
.tcsa-badge[data-tone="wait"] { color: var(--amber-deep); }
.tcsa-badge[data-tone="bad"] { color: var(--coral-deep); }
.tcsa-badge[data-tone="wait"]::before { animation: tcsa-pulse 1.6s ease-in-out infinite; }
.tcsa-toast { animation: tcsa-toast-rise .35s var(--ease); }
@keyframes tcsa-toast-rise { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }