/* 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; }

/* --- 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 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; }

/* 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; }
}

/* --- 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; }

/* --- 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; }

/* --- 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;
}

/* 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;
}

/* --- 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; }

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

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

/* 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; }

/* --- 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; }

/* 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; }

/* 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; }

/* --- 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); }

/* 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; }

/* 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; }

/* 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); }

/* --- 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; }

/* --- 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-play-history ul,
.tcsa-invitations ul,
.tcsa-upload-history ul,
.tcsa-section-list,
.tcsa-sponsor-list,
.tcsa-event-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-play-history li,
.tcsa-invitations li,
.tcsa-upload-history li,
.tcsa-section-list li,
.tcsa-sponsor-list li,
.tcsa-event-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);
}

/* 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-play-history, .tcsa-invitations, .tcsa-upload-history, .tcsa-section-list, .tcsa-sponsor-list, .tcsa-event-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-play-history, .tcsa-invitations, .tcsa-upload-history, .tcsa-section-list, .tcsa-sponsor-list, .tcsa-event-list, .tcsa-org-list, .tcsa-circuit-list, .tcsa-people-list, .tcsa-people-linked) li .tcsa-note,
.tcsa-people-email,
.tcsa-history-points,
.tcsa-history-rank,
.tcsa-history-rounds { 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; }

/* 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; }

/* 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; }

/* 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; }

/* "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; }
}

/* --- 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; }

.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; } }