/* The redesign (academy.css) carried to the site's other pages: the frame pieces every page shares (toasts, the
   seated banner, the reconnecting overlay, the message boxes, spinners), the sign-in forms and Contact, the reading
   pages (Help, Duplicate rules, errors), the profile and the admin page. Tokens and buttons come from academy.css. */

:root {
    /* Errors and success, for forms, alerts and toasts */
    --ac-bad: #ff8787;
    --ac-bad-fill: #e03131;
    --ac-bad-wash: rgba(255, 107, 107, 0.12);
    --ac-bad-line: rgba(255, 107, 107, 0.5);
    --ac-go-wash: rgba(107, 214, 43, 0.12);
    --ac-go-line: rgba(107, 214, 43, 0.45);
    /* Replay Analysis grades, as round badges with their symbol */
    --ac-g-brilliant: #9a4dff;
    --ac-g-excellent: #1c7ed6;
    --ac-g-good: #2f9e44;
    --ac-g-deceptive: #e8a400;
    --ac-g-neutral: #5c636e;
    --ac-g-weak: #f76707;
    --ac-g-mistake: #e03131;
}

/* Any page built in the redesign under the sign-in layout: no felt behind it */
body:has(> #app > header + main > .ac) {
    background-image: none !important;
}

.ac-btn-block {
    width: 100%;
}

.ac-btn:disabled,
.ac-btn[aria-disabled="true"] {
    cursor: progress;
    opacity: 0.75;
    transform: none;
    box-shadow: 0 4px 0 var(--btn-edge);
}

.ac-btn-danger {
    --btn-bg: var(--ac-bad-fill);
    --btn-hover: #f03e3e;
    --btn-edge: #a51d1d;
    --btn-ink: #fff;
}

.ac-btn .spinner-border {
    width: 1.125rem;
    height: 1.125rem;
    border-width: 0.15em;
}

.ac-link {
    color: var(--ac-go) !important;
    font-weight: 600;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: rgba(107, 214, 43, 0.45) !important;
    transition: text-decoration-color 0.15s;
}

    .ac-link:hover {
        text-decoration-color: currentColor !important;
    }

/* ---------------------------------------------------------------------------------------------------------------
   Frame pieces on every page
   --------------------------------------------------------------------------------------------------------------- */

/* Spinners: a ring in the Play green */
.content-load-spinner {
    width: 3.5rem;
    height: 3.5rem;
    border: 5px solid rgba(255, 255, 255, 0.16);
    border-top-color: var(--ac-go);
    animation-duration: 0.9s;
    animation-timing-function: linear;
}

.ac .content-load-spinner {
    margin-top: 4rem;
}

#toasts {
    font-family: var(--ac-font);
    bottom: 1.25rem;
}

.site-toast {
    gap: 0.875rem;
    padding: 0.75rem 0.75rem 0.75rem 0.875rem;
    border: 1px solid var(--ac-line-strong);
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-raised);
    color: var(--ac-text);
    font-weight: 600;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.45);
}

    .site-toast::before {
        content: "!";
        flex: none;
        display: grid;
        place-items: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background-color: var(--ac-bad-fill);
        color: #fff;
        font-weight: 800;
        font-size: 0.875rem;
    }

    .site-toast .btn-close {
        flex: none;
        filter: invert(1) grayscale(1) brightness(1.6);
        opacity: 0.6;
    }

        .site-toast .btn-close:hover {
            opacity: 1;
        }

#seated-banner {
    gap: 0.375rem 1rem;
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid var(--ac-go-line);
    background-color: #1d2a14;
    color: var(--ac-text);
    font-family: var(--ac-font);
    font-weight: 600;
}

    #seated-banner::before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background-color: var(--ac-go);
        box-shadow: 0 0 0 4px rgba(107, 214, 43, 0.2);
    }

#hub-reconnecting-overlay {
    background: rgba(10, 11, 13, 0.45);
}

.hub-reconnecting-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--ac-line-strong);
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-raised);
    color: var(--ac-text);
    font-family: var(--ac-font);
    font-weight: 700;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.45);
}

    .hub-reconnecting-banner::before {
        content: "";
        flex: none;
        width: 1.125rem;
        height: 1.125rem;
        border: 3px solid rgba(255, 255, 255, 0.18);
        border-top-color: var(--ac-go);
        border-radius: 50%;
        animation: spin 0.9s linear infinite;
    }

/* The message boxes: a floating dark panel, its title, its text, and its buttons as 3D buttons */
:is(#error-box, #game-notification-box, #confirmation-box) {
    overflow: hidden;
    border: 1px solid var(--ac-line-strong) !important;
    border-radius: var(--ac-radius) !important;
    background-color: var(--ac-surface) !important;
    color: var(--ac-text);
    font-family: var(--ac-font);
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.55);
}

#game-notification-box,
#confirmation-box {
    min-width: 16rem !important;
    max-width: min(22rem, calc(100vw - 2rem)) !important;
}

#error-box {
    width: min(22rem, calc(100vw - 2rem));
}

    :is(#error-box, #game-notification-box, #confirmation-box) > .card-header {
        padding: 1.125rem 1.25rem 0.25rem;
        border: 0;
        background: none !important;
        color: var(--ac-text) !important;
        font-size: 1.25rem;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    #error-box > .card-header {
        color: var(--ac-bad) !important;
    }

    :is(#error-box, #game-notification-box, #confirmation-box) :is(.card-body, .card-footer) {
        border: 0;
        background: none !important;
    }

    :is(#error-box, #game-notification-box, #confirmation-box) .card-body {
        padding: 0.5rem 1.25rem 0.25rem;
    }

        :is(#error-box, #game-notification-box, #confirmation-box) .card-body p {
            margin: 0;
            color: var(--ac-text-2) !important;
            font-size: 1rem;
            line-height: 1.5;
            text-align: center;
        }

        :is(#error-box, #game-notification-box, #confirmation-box) .card-body .fw-bold {
            font-weight: 500 !important;
        }

    :is(#error-box, #game-notification-box, #confirmation-box) .card-footer {
        padding: 1rem 1.25rem 1.375rem;
    }

    :is(#error-box, #game-notification-box, #confirmation-box) .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.75rem;
        min-width: 6rem;
        padding: 0.5rem 1.25rem;
        border: 0;
        border-radius: var(--ac-radius-sm);
        background-color: var(--ac-go);
        color: var(--ac-go-ink) !important;
        font-family: var(--ac-font);
        font-weight: 700;
        box-shadow: 0 4px 0 var(--ac-go-edge);
        transition: background-color 0.15s, transform 0.08s, box-shadow 0.08s;
    }

        :is(#error-box, #game-notification-box, #confirmation-box) .btn:hover {
            background-color: var(--ac-go-hover);
        }

        :is(#error-box, #game-notification-box, #confirmation-box) .btn:active {
            transform: translateY(4px);
            box-shadow: 0 0 0 var(--ac-go-edge);
        }

    #confirmation-box .btn-danger {
        background-color: var(--ac-raised);
        color: var(--ac-text) !important;
        box-shadow: 0 4px 0 var(--ac-edge);
    }

        #confirmation-box .btn-danger:hover {
            background-color: var(--ac-raised-hover);
        }

        #confirmation-box .btn-danger:active {
            box-shadow: 0 0 0 var(--ac-edge);
        }

    #confirmation-box .card-footer .row {
        --bs-gutter-x: 0.75rem;
    }

/* ---------------------------------------------------------------------------------------------------------------
   Forms: the sign-in pages and Contact
   --------------------------------------------------------------------------------------------------------------- */

.ac-auth {
    display: flex;
    justify-content: center;
    padding: 2.5rem 1.25rem 4rem !important;
}

@media (min-width: 768px) {
    .ac-auth {
        padding-top: 4.5rem !important;
    }
}

.ac-auth-col {
    width: 100%;
    max-width: 28rem;
}

.ac-auth-col-wide {
    max-width: 36rem;
}

.ac-auth-head {
    margin-bottom: 1.5rem;
}

    .ac-auth-head .ac-lede a {
        white-space: nowrap;
    }

/* Register / Log In: a two-way switch over the form */
.ac-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-bg);
    box-shadow: inset 0 0 0 1px var(--ac-line);
}

.ac-seg-item {
    display: grid;
    place-items: center;
    min-height: 2.5rem;
    border-radius: 9px;
    color: var(--ac-text-2) !important;
    font-weight: 700;
    font-size: 0.9375rem;
    transition: color 0.15s, background-color 0.15s;
}

    .ac-seg-item:hover {
        color: var(--ac-text) !important;
    }

    /* The active choice: raised, with a thin green ring so it's told apart at a glance */
    .ac-seg-item[aria-current="page"] {
        background-color: var(--ac-raised);
        color: var(--ac-text) !important;
        box-shadow: inset 0 0 0 1px var(--ac-go), 0 2px 0 var(--ac-edge);
    }

.ac-form {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    padding: 1.5rem;
}

@media (min-width: 576px) {
    .ac-form {
        padding: 2rem;
    }
}

.ac-form-title {
    font-size: 1.125rem !important;
    font-weight: 700;
}

.ac-form-note {
    margin: -0.75rem 0 0 !important;
    color: var(--ac-text-2);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
}

.ac-field {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
}

    .ac-field label {
        color: var(--ac-text);
        font-size: 0.9375rem;
        font-weight: 600;
    }

.ac-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

    .ac-field-head a {
        color: var(--ac-text-2) !important;
        font-size: 0.875rem;
        font-weight: 600;
        transition: color 0.15s;
    }

        .ac-field-head a:hover {
            color: var(--ac-go) !important;
        }

.ac-input {
    display: block;
    width: 100%;
    min-height: 3rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--ac-line-strong);
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-bg);
    color: var(--ac-text);
    font-family: var(--ac-font);
    font-size: 1rem;
    line-height: 1.5;
    caret-color: var(--ac-go);
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .ac-input::placeholder {
        color: var(--ac-text-3);
    }

    .ac-input:hover {
        border-color: rgba(255, 255, 255, 0.24);
    }

    .ac-input:focus,
    .ac-input:focus-visible {
        outline: none;
        border-color: var(--ac-go);
        box-shadow: 0 0 0 3px rgba(107, 214, 43, 0.22);
    }

    .ac-input.input-validation-error {
        border-color: var(--ac-bad-line);
        background-color: rgba(255, 107, 107, 0.05);
    }

        .ac-input.input-validation-error:focus {
            border-color: var(--ac-bad);
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.22);
        }

textarea.ac-input {
    min-height: 9rem;
    resize: vertical;
}

    /* The browser's autofill keeps the dark field */
    .ac-input:-webkit-autofill {
        -webkit-text-fill-color: var(--ac-text);
        -webkit-box-shadow: 0 0 0 100px var(--ac-bg) inset;
        caret-color: var(--ac-go);
    }

/* A checkbox in the site's green */
.ac-check {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--ac-text-2);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
}

    .ac-check input,
    .ac input[type="checkbox"] {
        width: 1.125rem;
        height: 1.125rem;
        margin: 0;
        accent-color: var(--ac-go);
        cursor: pointer;
    }

/* Alerts: errors (the form's summary) and good news */
.ac-alert {
    padding: 0.875rem 1rem;
    border: 1px solid var(--ac-line-strong);
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-raised);
    color: var(--ac-text);
    font-size: 0.9375rem;
    line-height: 1.5;
}

    .ac-alert p {
        margin: 0;
    }

        .ac-alert p + p {
            margin-top: 0.25rem;
        }

.ac-alert-go {
    border-color: var(--ac-go-line);
    background-color: var(--ac-go-wash);
}

.ac-alert-bad {
    border-color: var(--ac-bad-line);
    background-color: var(--ac-bad-wash);
    color: var(--ac-text);
}

.ac .validation-summary-valid {
    display: none;
}

.ac .validation-summary-errors {
    color: var(--ac-text) !important;
}

    .ac .validation-summary-errors ul {
        margin: 0;
        padding-left: 1.125rem;
    }

    .ac .validation-summary-errors li::marker {
        color: var(--ac-bad);
    }

/* The reCAPTCHA widget keeps its own size */
.ac .g-recaptcha {
    min-height: 78px;
}

/* ---------------------------------------------------------------------------------------------------------------
   Reading pages: Help, Duplicate rules
   --------------------------------------------------------------------------------------------------------------- */

.ac-read {
    max-width: 52rem;
}

.ac-read-section + .ac-read-section {
    margin-top: 2.5rem;
}

.ac-read-section > .ac-h2 {
    margin-bottom: 1rem;
}

.ac-qa {
    padding: 1.5rem;
}

    .ac-qa + .ac-qa {
        margin-top: 1rem;
    }

    .ac-qa h3 {
        margin-bottom: 0.75rem !important;
        font-size: 1.1875rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

.ac-prose {
    color: var(--ac-text-2);
    font-size: 1.0625rem;
    line-height: 1.65;
}

    .ac-prose > * + * {
        margin-top: 0.875rem !important;
    }

    .ac-prose b,
    .ac-prose strong {
        color: var(--ac-text);
        font-weight: 700;
    }

    .ac-prose ul {
        margin: 0;
        padding-left: 1.25rem;
    }

        .ac-prose ul li + li {
            margin-top: 0.375rem;
        }

        .ac-prose ul li::marker {
            color: var(--ac-go);
        }

/* A numbered list as round step numbers */
.ac-numbered {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: n;
}

    .ac-numbered li {
        display: flex;
        align-items: baseline;
        gap: 0.75rem;
        counter-increment: n;
    }

        .ac-numbered li + li {
            margin-top: 0.5rem;
        }

        .ac-numbered li::before {
            content: counter(n);
            flex: none;
            display: grid;
            place-items: center;
            width: 1.625rem;
            height: 1.625rem;
            border-radius: 50%;
            background-color: var(--ac-raised);
            color: var(--ac-text);
            font-size: 0.8125rem;
            font-weight: 700;
            transform: translateY(-0.0625rem);
        }

/* A table of figures */
.ac-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-bg);
}

.ac-data {
    width: 100%;
    border-collapse: collapse;
    color: var(--ac-text-2);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

    .ac-data th {
        padding: 0.625rem 0.875rem;
        border-bottom: 1px solid var(--ac-line-strong);
        color: var(--ac-text);
        font-size: 0.8125rem;
        font-weight: 700;
        white-space: nowrap;
        text-align: left;
    }

    .ac-data td {
        padding: 0.625rem 0.875rem;
        border-bottom: 1px solid var(--ac-line);
        vertical-align: top;
    }

    .ac-data tbody tr:last-child td {
        border-bottom: 0;
    }

    .ac-data td:first-child {
        color: var(--ac-text);
        font-weight: 600;
        white-space: nowrap;
    }

    .ac-data .ac-num {
        text-align: right;
        white-space: nowrap;
    }

.ac-prose .ac-table-wrap {
    margin-top: 1rem !important;
}

/* ---------------------------------------------------------------------------------------------------------------
   Message pages: errors, a confirmed email
   --------------------------------------------------------------------------------------------------------------- */

.ac-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    max-width: 36rem;
    margin: 2rem auto 0;
    padding: 2rem;
}

@media (min-width: 768px) {
    .ac-message {
        margin-top: 4rem;
        padding: 2.5rem;
    }
}

.ac-message h1 {
    font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.ac-message h2 {
    color: var(--ac-text-2) !important;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.55;
}

.ac-message .ac-actions {
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------------------------------------------
   Profile
   --------------------------------------------------------------------------------------------------------------- */

.ac-profile-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.ac-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--ac-radius);
    background-color: var(--ac-go);
    box-shadow: 0 4px 0 var(--ac-go-edge);
    color: var(--ac-go-ink);
    font-size: 1.875rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ac-profile {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 992px) {
    .ac-profile {
        grid-template-columns: minmax(0, 1fr) 22rem;
        align-items: start;
    }
}

.ac-profile-main .ac-games {
    margin-bottom: 1.5rem;
}

/* Spades' Play: Vs Bots and Casual side by side (stacked on the narrowest phones), then the Duplicate panel */
.ac-profile-play {
    margin-bottom: 2.5rem;
}

.ac-profile-play-tiles {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    margin-bottom: 1rem;
}

/* The game chips here are buttons (the menus' are links) */
button.ac-game {
    font-family: var(--ac-font);
    cursor: pointer;
}

.ac-ratings {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.ac-rating {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.875rem;
    row-gap: 1rem;
    align-items: center;
    padding: 1.125rem;
}

    .ac-rating > .ac-btn,
    .ac-rating > .ac-pill {
        grid-column: 1 / -1;
    }

    .ac-rating .ac-btn {
        width: 100%;
    }

.ac-rating-label {
    color: var(--ac-text-2) !important;
    font-size: 0.9375rem !important;
    font-weight: 600;
}

.ac-rating-value {
    color: var(--ac-text);
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.ac-rating-soon {
    border-style: dashed;
    border-color: var(--ac-line-strong);
    background-color: transparent;
}

    .ac-rating-soon .ac-rating-value {
        color: var(--ac-text-3);
    }

    .ac-rating-soon .ac-rating-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.ac-profile-section {
    margin-top: 2.5rem;
}

.ac-show-more {
    width: 100%;
}

/* Recent hands: the bids round a table, South's cards by suit, and the hand's tools */
.ac-replays {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ac-replay {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem 1.5rem;
    padding: 1rem 1.125rem;
    align-items: center;
}

    .ac-replay .ac-actions {
        grid-column: 1 / -1;
    }

@media (min-width: 1200px) {
    .ac-replay {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

        .ac-replay .ac-actions {
            grid-column: auto;
        }
}

.ac-replay .ac-actions {
    gap: 0.5rem;
}

.ac-bids {
    display: grid;
    grid-template-columns: repeat(3, 1.75rem);
    grid-template-rows: repeat(3, 1.75rem);
    padding: 0.25rem;
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-felt);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

    .ac-bids .cell {
        display: grid;
        place-items: center;
        color: #fff;
        font-size: 0.9375rem;
        font-weight: 700;
    }

        .ac-bids .cell:nth-child(8) {
            border-radius: 6px;
            background-color: rgba(255, 255, 255, 0.16);
        }

.ac-hand-suits {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem 0.625rem;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

    .ac-hand-suits > :nth-child(odd) {
        display: grid;
        place-items: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 6px;
        background-color: #fff;
    }

        .ac-hand-suits > :nth-child(odd) svg {
            width: 1rem;
            height: 1rem;
            fill: var(--ac-bg);
        }

        .ac-hand-suits > :nth-child(4n + 1) svg {
            fill: #d62828;
        }

    .ac-hand-suits > :nth-child(even) {
        min-width: 0;
        overflow-wrap: anywhere;
    }

.ac-empty {
    padding: 1.25rem;
    color: var(--ac-text-2);
    text-align: center;
}

/* Settings: the gameplay switches */
.ac-settings {
    padding: 1.5rem;
}

@media (min-width: 992px) {
    .ac-settings {
        position: sticky;
        top: 1.5rem;
    }
}

.ac-settings > .ac-h2 {
    margin-bottom: 1.25rem;
}

.ac-settings-group + .ac-settings-group {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ac-line);
}

.ac-settings h3 {
    margin-bottom: 0.875rem !important;
    color: var(--ac-text-2) !important;
    font-size: 0.9375rem;
    font-weight: 700;
}

.ac-setting-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.5rem 0;
    color: var(--ac-text);
    font-weight: 500;
    cursor: pointer;
}

    .ac-setting-row > span:first-of-type {
        flex: 1;
    }

.ac-switch-state {
    flex: none !important;
    min-width: 1.75rem;
    color: var(--ac-text-3);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: right;
}

.ac-switch-on {
    color: var(--ac-go);
}

.ac input.ac-switch {
    flex: none;
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    margin: 0;
    border-radius: 999px;
    background-color: var(--ac-bg);
    box-shadow: inset 0 0 0 1px var(--ac-line-strong);
    appearance: none;
    cursor: pointer;
    transition: background-color 0.15s, box-shadow 0.15s;
}

    .ac input.ac-switch::after {
        content: "";
        position: absolute;
        top: 0.1875rem;
        left: 0.1875rem;
        width: 1.125rem;
        height: 1.125rem;
        border-radius: 50%;
        background-color: var(--ac-text-2);
        transition: transform 0.18s var(--ac-ease-out), background-color 0.15s;
    }

    .ac input.ac-switch:checked {
        background-color: var(--ac-go);
        box-shadow: none;
    }

        .ac input.ac-switch:checked::after {
            transform: translateX(1.25rem);
            background-color: var(--ac-go-ink);
        }

/* Sound effects: its name with Play a sample (a small icon-only Secondary button) beside it, then the On/Off and the
   switch at the row's end like two-click play's. Its name and On/Off are both the switch's labels. */
.ac-sound-setting {
    padding: 0.25rem 0;
    cursor: default;
}

    .ac-sound-setting > label {
        margin: 0;
        font-weight: inherit;
        cursor: pointer;
    }

    .ac-sound-setting > .ac-switch-state {
        margin-left: auto;
        font-weight: 700;
    }

.ac-sound-sample svg {
    width: 1.125rem;
    height: 1.125rem;
}

.ac-grade-badge {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 2.25rem;
    height: 1.625rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background-color: var(--grade);
    color: #fff;
    /* Verdana's "!" keeps a clear dot at this size (Rubik's reads as "I") */
    font-family: Verdana, "Segoe UI", system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.ac-g-brilliant { --grade: var(--ac-g-brilliant); }
.ac-g-excellent { --grade: var(--ac-g-excellent); }
.ac-g-good { --grade: var(--ac-g-good); }
.ac-g-deceptive { --grade: var(--ac-g-deceptive); color: #1f1600; }
.ac-g-neutral { --grade: var(--ac-g-neutral); }
.ac-g-weak { --grade: var(--ac-g-weak); }
.ac-g-mistake { --grade: var(--ac-g-mistake); }

/* ---------------------------------------------------------------------------------------------------------------
   Admin
   --------------------------------------------------------------------------------------------------------------- */

.ac-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--ac-line);
}

.ac-tabbar-item {
    position: relative;
    padding: 0.75rem 1rem 0.875rem;
    border: 0;
    background: none;
    color: var(--ac-text-2);
    font-family: var(--ac-font);
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s;
}

    .ac-tabbar-item:hover {
        color: var(--ac-text);
    }

    .ac-tabbar-item[aria-selected="true"] {
        color: var(--ac-text);
    }

        .ac-tabbar-item[aria-selected="true"]::after {
            content: "";
            position: absolute;
            left: 0.5rem;
            right: 0.5rem;
            bottom: -1px;
            height: 3px;
            border-radius: 3px 3px 0 0;
            background-color: var(--ac-go);
        }

.ac-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

    .ac-toolbar label {
        color: var(--ac-text-2);
        font-weight: 600;
        font-size: 0.9375rem;
    }

/* A section that folds away under its heading (the admin tools): the heading is the button, its chevron pointing right
   while folded and down while open. The button is as tall as the controls beside it, so folding doesn't nudge it. */
.ac-fold-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    margin-left: -0.25rem;
    padding: 0.125rem 0.5rem 0.125rem 0.25rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: start;
    cursor: pointer;
}

    .ac-fold-toggle .ac-chevron {
        width: 0.75em;
        height: 0.75em;
        color: var(--ac-text-2);
        transition: color 0.15s;
    }

    .ac-fold-toggle:hover .ac-chevron {
        color: var(--ac-go);
    }

    .ac-fold-toggle[aria-expanded="true"] .ac-chevron {
        transform: rotate(90deg);
    }

@media (prefers-reduced-motion: no-preference) {
    .ac-fold-toggle .ac-chevron {
        transition: color 0.15s, transform 0.2s var(--ac-ease-out);
    }
}

/* The section's controls beside its heading, each a label and its control */
.ac-fold-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

select.ac-input {
    display: inline-block;
    width: auto;
    min-height: 2.5rem;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
}

.ac-input-sm {
    min-height: 2.5rem;
    padding: 0.375rem 0.5rem;
}

/* The admin lists' pager (pager.tsx): the caption, First / Previous / page numbers / Next / Last, and the page box */
.ac-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
}

.ac-pager-caption {
    flex-basis: 100%;
    min-height: 1.5em;
    margin: 0;
    color: var(--ac-text-2);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

.ac-pager-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.375rem;
}

    .ac-pager-pages .ac-btn:disabled {
        cursor: default;
        opacity: 0.4;
    }

.ac-pager-number {
    min-width: 2.5rem;
    padding-inline: 0.625rem;
    font-variant-numeric: tabular-nums;
}

    .ac-pager-number[aria-current="page"] {
        --btn-bg: var(--ac-go);
        --btn-hover: var(--ac-go-hover);
        --btn-edge: var(--ac-go-edge);
        --btn-ink: var(--ac-go-ink);
    }

.ac-pager-gap {
    padding: 0 0.25rem;
    color: var(--ac-text-3);
    font-weight: 700;
}

.ac-pager-jump {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ac-text-2);
    font-weight: 600;
}

/* A table whose rows are being read: a bar along its top edge, a note on it, and the rows it replaces dimmed */
.ac-table-frame {
    position: relative;
}

.ac-load-bar {
    position: absolute;
    z-index: 1;
    top: 0;
    left: var(--ac-radius-sm);
    right: var(--ac-radius-sm);
    height: 3px;
    overflow: hidden;
    border-radius: 3px;
    background-color: var(--ac-go-wash);
}

    .ac-load-bar::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background-color: var(--ac-go);
        opacity: 0.6;
    }

@media (prefers-reduced-motion: no-preference) {
    .ac-load-bar::before {
        right: auto;
        width: 35%;
        opacity: 1;
        animation: ac-load-slide 1.1s ease-in-out infinite;
    }
}

@keyframes ac-load-slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(290%); }
}

.ac-load-note {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 1.5rem;
    margin: 0;
    padding: 0.125rem 0.625rem;
    border: 1px solid var(--ac-line-strong);
    border-radius: 999px;
    background-color: var(--ac-raised);
    color: var(--ac-text);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    transform: translateY(-50%);
}

    .ac-load-note:empty {
        display: none;
    }

/* (A row on its way out, e.g. a puzzle being deleted, looks the same) */
.ac-data tbody.ac-stale,
.ac-data tr.ac-stale {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* Something being done: a small ring in the text's colour (on a button, its ink), turning unless motion is reduced,
   next to words that say what */
.ac-spinner {
    display: inline-block;
    flex: none;
    width: 0.9em;
    height: 0.9em;
    border: 0.15em solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: -0.125em;
    opacity: 0.85;
}

@media (prefers-reduced-motion: no-preference) {
    .ac-spinner {
        animation: spin 0.8s linear infinite;
    }
}

.ac-admin-table td {
    vertical-align: middle;
}

/* Wide enough for "Validating…" and its spinner, so the column holds still while a button's words change */
.ac-admin-actions {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 9.5rem;
}

.ac-validity .ac-spinner {
    color: var(--ac-go);
}

.ac-validity {
    font-weight: 700;
}

/* The solver's reason under a nil exercise's ✅ or ❌, kept to a narrow column (but not a word a line, where a phone
   squeezes the table) */
.ac-validity-reason {
    min-width: 9rem;
    max-width: 13rem;
    margin: 0.375rem auto 0;
    color: var(--ac-text-3);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    text-wrap: pretty;
}

/* Words in place of an action that isn't there ("No replay"), as tall as the buttons */
.ac-admin-note {
    display: grid;
    place-items: center;
    min-height: 2.375rem;
    color: var(--ac-text-3);
    font-size: 0.875rem;
    font-weight: 600;
}

/* The duplicate tournament's section: each active tournament's date, id and entries in a row (wrapping on a phone),
   Reset tournament (or its question in its place), and under it how the rotation's going or went. The status is always
   there (it's read out as it changes), so an empty one takes no room. */
.ac-rotation {
    padding: 1.25rem;
}

    .ac-rotation > * {
        margin: 0;
    }

    .ac-rotation > * + * {
        margin-top: 1rem;
    }

    .ac-rotation > .ac-rotation-status:empty {
        margin-top: 0;
    }

    .ac-rotation > .ac-rotation-elapsed {
        margin-top: 0.375rem;
    }

.ac-rotation-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.5rem;
}

    .ac-rotation-facts dt {
        color: var(--ac-text-3);
        font-size: 0.8125rem;
        font-weight: 700;
    }

    .ac-rotation-facts dd {
        margin: 0;
        color: var(--ac-text);
        font-size: 1.125rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

.ac-rotation-none {
    color: var(--ac-text-2);
}

/* Rotate now's question: what it does, then Rotate and Cancel */
.ac-rotation-confirm {
    max-width: 44rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ac-bad-line);
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-bad-wash);
}

    .ac-rotation-confirm p {
        margin: 0 0 0.75rem;
        line-height: 1.5;
    }

.ac-rotation-status > p {
    margin: 0;
    color: var(--ac-text-2);
    line-height: 1.5;
}

.ac-rotation-status > .ac-alert {
    max-width: 44rem;
}

.ac-rotation-elapsed {
    color: var(--ac-text-3);
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* The puzzle list's Repair answers and Validate all, over its table: the buttons, how far a run has got, and the puzzles
   it lists, each a row of its id, its answers before → after (a repair), and its Analysis and page links (wrapping on a
   phone) */
.ac-puzzle-runs {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
}

    .ac-puzzle-runs > * {
        margin: 0;
    }

    .ac-puzzle-runs > * + *:not(.visually-hidden) {
        margin-top: 0.875rem;
    }

.ac-run-progress {
    color: var(--ac-text-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ac-run-bad {
    color: var(--ac-bad);
}

.ac-run-h {
    margin: 0 0 0.5rem;
    color: var(--ac-text-3);
    font-size: 0.8125rem;
    font-weight: 700;
}

.ac-run-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .ac-run-list > li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.875rem;
    }

.ac-run-id {
    min-width: 3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ac-run-change,
.ac-run-cards,
.ac-run-links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.ac-run-change {
    gap: 0.5rem;
    color: var(--ac-text-3);
}

/* A nil exercise's deal: the bids from the dealer's left beside the player's hand, each under a small heading. The
   bids' rows are as tall and as far apart as the hand's suit rows, so the two line up. */
.ac-nil-preview {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem 2rem;
}

.ac-nil-preview-h {
    margin: 0 0 0.5rem;
    color: var(--ac-text-3);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.ac-nil-bids {
    display: grid;
    gap: 0.125rem;
    min-width: 9.5rem;
    margin: 0;
}

    .ac-nil-bids > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 1.5rem;
    }

    .ac-nil-bids dt {
        font-weight: 600;
        white-space: nowrap;
    }

    .ac-nil-bids dd {
        margin: 0;
        color: var(--ac-text);
        font-weight: 800;
    }

    .ac-nil-bids .ac-nil-player dt {
        color: var(--ac-text);
    }

.ac-nil-mark {
    color: var(--ac-text-3);
    font-weight: 600;
}

/* The counting exercise section (docs/counting-exercises-plan.md, phase 5): the pool health and Generate over the
   list, each under a small heading; Generate's fields in a row that wraps on a phone; an inspection under its row (the
   question and answer, why, the tricks, the hands left) */
.ac-counting-parts {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.ac-counting-health td,
.ac-counting-health th {
    white-space: nowrap;
}

.ac-counting-rate {
    color: var(--ac-text-3);
    font-size: 0.8125rem;
}

.ac-counting-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

    .ac-counting-fields .ac-field {
        width: 11rem;
    }

.ac-counting-note,
.ac-counting-summary {
    max-width: 48rem;
    margin: 0.75rem 0 0;
    color: var(--ac-text-2);
    font-size: 0.875rem;
    line-height: 1.5;
}

.ac-counting-summary {
    color: var(--ac-text);
    font-weight: 600;
}

.ac-counting-result {
    display: grid;
    gap: 0.75rem;
}

.ac-counting-list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--ac-text-2);
    font-size: 0.875rem;
    line-height: 1.5;
}

.ac-counting-inspect {
    display: grid;
    gap: 1rem;
    padding: 0.5rem 0;
    text-align: start;
}

.ac-counting-qa {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin: 0;
}

    .ac-counting-qa dt {
        color: var(--ac-text-3);
        font-size: 0.8125rem;
        font-weight: 700;
    }

    .ac-counting-qa dd {
        margin: 0;
        color: var(--ac-text);
        font-weight: 700;
    }

.ac-counting-tricks td.ac-counting-lead {
    font-weight: 800;
    text-decoration: underline;
}

.ac-counting-hands {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

/* The Insights tab (docs/admin-insights-plan.md, phase 4): the range control over its sections (the range's choices
   wrapping on a phone, Custom's two days under them, then the audience and the two toggles) */
.ac-insights-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 2rem;
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
}

.ac-insights-range,
.ac-insights-who {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.ac-insights-range {
    flex: 1 1 26rem;
}

.ac-insights-who {
    flex: 0 1 auto;
}

.ac-insights-group {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
}

.ac-insights-label {
    color: var(--ac-text-3);
    font-size: 0.8125rem;
    font-weight: 700;
}

.ac-insights-filters .ac-seg {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

    .ac-insights-filters .ac-seg-item {
        flex: 1 0 auto;
        padding: 0 0.875rem;
        white-space: nowrap;
    }

.ac-insights-days-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

    .ac-insights-days-fields .ac-field {
        flex: 1 1 10rem;
        min-width: 0;
        max-width: 13rem;
    }

.ac-insights-days,
.ac-insights-problem {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.ac-insights-days {
    color: var(--ac-text-2);
}

.ac-insights-problem {
    color: var(--ac-bad);
}

.ac-insights-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

/* What the tiles count and compare with */
.ac-insights-note {
    margin: 0 0 1rem;
    color: var(--ac-text-2);
    font-size: 0.875rem;
}

/* The Overview's tiles: two a row, four from 768px; each the number, its split, then the change pill */
.ac-stat-grid.ac-insights-tiles {
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .ac-stat-grid.ac-insights-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

    .ac-insights-tiles .ac-insights-tile > dd.ac-insights-split {
        color: var(--ac-text-2);
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.4;
    }

    .ac-insights-tiles .ac-insights-tile > dd.ac-insights-change {
        margin-top: 0.375rem;
        font-size: 1rem;
        letter-spacing: 0;
    }

/* The chart: its heading and legend, the day pointed at, then the plot (a light line and a dashed grey one, or light and
   grey bars, on the panel; the axes and grid quiet) */
.ac-insights-chart-panel {
    margin-top: 1rem;
    padding: 1rem 1.125rem;
}

.ac-insights-chart-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

    .ac-insights-chart-head .ac-nil-preview-h {
        margin: 0;
        color: var(--ac-text);
        font-size: 0.9375rem;
    }

.ac-insights-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ac-text-2);
    font-size: 0.8125rem;
    font-weight: 600;
}

    .ac-insights-legend li {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
    }

.ac-insights-readout {
    min-height: 2.8em;
    margin: 0.375rem 0 0.25rem;
    color: var(--ac-text-2);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.ac-insights-plot {
    overflow: hidden;
    border-radius: 6px;
}

    .ac-insights-plot svg {
        display: block;
        max-width: 100%;
    }

.ac-chart-grid line {
    stroke: var(--ac-line);
    stroke-width: 1;
}

.ac-chart-axis text {
    fill: var(--ac-text-3);
    font-size: 12px;
    font-weight: 600;
}

.ac-chart-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ac-chart-signed {
    stroke: var(--ac-text);
}

.ac-chart-guests {
    stroke: var(--ac-text-3);
    stroke-dasharray: 6 4;
}

.ac-chart-dot {
    stroke: var(--ac-surface);
    stroke-width: 2;
}

.ac-chart-dot-signed {
    fill: var(--ac-text);
}

.ac-chart-dot-guests {
    fill: var(--ac-text-3);
}

.ac-chart-cross {
    stroke: var(--ac-line-strong);
    stroke-width: 1;
}

.ac-chart-bar-signed {
    fill: var(--ac-text);
}

.ac-chart-bar-guests {
    fill: var(--ac-text-3);
}

/* An hour pointed at: the other bars step back */
.ac-chart-bars:has(.ac-chart-on) > g:not(.ac-chart-on) {
    opacity: 0.4;
}

.ac-chart-hits rect {
    fill: transparent;
}

/* The Pages table: a section's row (its own numbers) over its routes, a strong line between sections; the headings
   sort it */
.ac-insights-pages .ac-insights-section-row > * {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--ac-text);
    font-weight: 700;
}

.ac-insights-pages th[scope="rowgroup"] {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--ac-line);
    font-size: 0.9375rem;
    white-space: nowrap;
}

.ac-insights-pages tbody + tbody .ac-insights-section-row > * {
    border-top: 1px solid var(--ac-line-strong);
}

.ac-insights-pages .ac-insights-page-row > td:first-child {
    padding-left: 1.75rem;
    font-weight: 500;
}

.ac-insights-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

    .ac-insights-sort:hover {
        color: var(--ac-go);
    }

.ac-insights-sort-mark {
    display: inline-block;
    min-width: 0.75em;
    font-size: 0.75em;
}

/* Numbers being replaced by another range's */
.ac-insights .ac-stale {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* Acquisition and Funnel (phase 5): their tables one under another, each under a small heading; under Campaigns the
   tags to add to a link */
.ac-insights-tables {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

    .ac-insights-tables > * {
        min-width: 0;
    }

.ac-insights-sub-h {
    margin-bottom: 0.625rem;
    color: var(--ac-text);
    font-size: 0.9375rem;
}

.ac-insights-how {
    margin: 0.625rem 0 0;
    color: var(--ac-text-3);
    font-size: 0.8125rem;
    line-height: 1.5;
}

    .ac-insights-how code {
        padding: 0.0625rem 0.3125rem;
        border-radius: 6px;
        background-color: var(--ac-raised);
        color: var(--ac-text-2);
        font-size: 0.8125rem;
        overflow-wrap: anywhere;
    }

.ac-insights-404 {
    margin-left: 0.5rem;
    vertical-align: 0.0625rem;
}

.ac-data .ac-insights-other-row > td {
    color: var(--ac-text-3);
    font-style: italic;
}

/* The funnel: a row a step, its name and what it counts, the bar (its share of the sessions that landed, grey on the
   inset track), then its count and shares in words; on a phone the bar runs under the words. The steps share the
   list's columns (subgrid), so every track is as long as the others and the bars compare */
.ac-insights-funnel-panel {
    padding: 1.125rem 1.25rem;
}

.ac-insights-funnel {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr) minmax(8.5rem, auto);
    gap: 1rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ac-insights-funnel-step {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    row-gap: 0.375rem;
}

.ac-insights-funnel-label,
.ac-insights-funnel-numbers {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ac-insights-funnel-name {
    color: var(--ac-text);
    font-weight: 700;
}

.ac-insights-funnel-hint,
.ac-insights-funnel-rates {
    color: var(--ac-text-3);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
}

.ac-insights-funnel-track {
    height: 0.75rem;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--ac-bg);
    box-shadow: inset 0 0 0 1px var(--ac-line);
}

.ac-insights-funnel-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--ac-text-2);
}

.ac-insights-funnel-numbers {
    align-items: flex-end;
    text-align: right;
}

.ac-insights-funnel-count {
    color: var(--ac-text);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.2;
}

@media (max-width: 575.98px) {
    /* Halves, so the longest shares wrap rather than squeeze every step's name */
    .ac-insights-funnel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .ac-insights-funnel-numbers {
        grid-column: 2;
        grid-row: 1;
    }

    .ac-insights-funnel-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* Devices and Health (phase 6): the device and browser tables side by side from 992px, each row's share of the views
   in words then a short grey bar on the inset track (the bars end level, so they compare); Health's line of who's
   online now (room at its right for phase 7's Roll up now), the bots' share, then the 404s, a long address wrapping */
.ac-insights-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .ac-insights-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ac-insights-pair + .ac-insights-how {
    margin-top: 1rem;
}

.ac-insights-share {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ac-insights-share-track {
    width: 4rem;
    height: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--ac-bg);
    box-shadow: inset 0 0 0 1px var(--ac-line);
}

.ac-insights-share-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--ac-text-2);
}

@media (max-width: 575.98px) {
    .ac-insights-share-track {
        width: 2.5rem;
    }
}

/* Who's online and Roll up now level at the top (phase 8: centred, the line sat halfway down the taller roll-up block);
   on a phone the roll-up wraps under it */
.ac-insights-health-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1rem;
}

.ac-insights-online {
    margin: 0;
    color: var(--ac-text-2);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
}

.ac-insights-online-label {
    color: var(--ac-text);
    font-weight: 700;
}

.ac-insights-online-count {
    color: var(--ac-text);
    font-size: 1.125rem;
    font-weight: 800;
}

.ac-insights-online-when {
    color: var(--ac-text-3);
    font-size: 0.8125rem;
}

.ac-insights-bots {
    margin: 0;
    color: var(--ac-text-2);
    font-size: 0.875rem;
}

.ac-insights-path {
    display: inline-block;
    max-width: 28rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Roll up now, at the right of the health head: the button, what the last run did, what it does (under who's online on a
   phone, from the left) */
.ac-insights-rollup {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    max-width: 26rem;
    text-align: right;
}

.ac-insights-rollup-status {
    margin: 0;
    color: var(--ac-text-2);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.ac-insights-rollup .ac-insights-how {
    margin: 0;
}

@media (max-width: 575.98px) {
    .ac-insights-rollup {
        align-items: flex-start;
        text-align: left;
    }
}

/* A figure only the raw rows give, over a range reaching past the last 90 days: "Last 90 days only" (over a table, under
   the chart, in a tile in place of its change) */
.ac-insights-raw-note {
    margin: 0 0 0.5rem;
    color: var(--ac-text-3);
    font-size: 0.8125rem;
}

.ac-insights-chart-panel .ac-insights-raw-note {
    margin: 0.5rem 0 0;
}

.ac-insights-tiles .ac-insights-tile > dd.ac-insights-raw-only {
    margin-top: 0.375rem;
    color: var(--ac-text-3);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
}

/* A puzzle's position: each seat's cards and tricks taken / bid round the trick */
.ac .grid-container {
    gap: 0.75rem;
    color: var(--ac-text);
}

.ac .grid-item {
    border: 0;
}

.ac .puzzle-position-card-grid {
    gap: 0.125rem 0.5rem;
}

.ac .trick-center {
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-felt);
    color: #fff;
}

.ac .bid {
    color: var(--ac-text-2);
    font-weight: 700;
}

/* The profile's game chips are buttons */
button.ac-game:hover {
    background-color: var(--ac-raised);
    color: var(--ac-text) !important;
}

button.ac-game[aria-pressed="true"] {
    background-color: var(--ac-raised);
    border-color: var(--ac-go);
    color: var(--ac-text) !important;
}

/* A card played to a puzzle's trick: a small white card face */
.ac-played {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem 0.375rem;
    border-radius: 6px;
    background-color: #fff;
    color: var(--ac-bg);
    font-weight: 800;
}

    .ac-played svg {
        width: 0.875rem;
        height: 0.875rem;
        fill: currentColor;
    }

.ac-played-hearts,
.ac-played-diamonds {
    color: #d62828;
}

.ac .trick-center {
    min-height: 7rem;
}

.ac .bid {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--ac-line-strong);
    border-radius: 999px;
}

.ac-qa-title {
    margin-bottom: 0.875rem !important;
    font-family: var(--ac-font);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ac-message h2 {
    text-wrap: pretty;
}

/* On phones a rating lies flat: icon, name and number, then its button */
@media (max-width: 575.98px) {
    .ac-rating {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto;
    }

        .ac-rating > .ac-btn {
            grid-column: auto;
            width: auto;
        }
}

.ac-bids,
.ac-hand-suits {
    width: auto;
    height: auto;
    margin: 0;
}

/* ---------------------------------------------------------------------------------------------------------------
   Duplicate results
   --------------------------------------------------------------------------------------------------------------- */

.ac-date-field {
    min-width: 12rem;
}

    .ac-date-field .ac-input {
        color-scheme: dark;
    }

/* The date input with the Yesterday / Today switch beside it (under it when there's no room), level with the input */
.ac-results-day {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

    .ac-results-day .ac-seg {
        grid-template-columns: none;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        margin-bottom: 0;
    }

        .ac-results-day .ac-seg-item {
            padding: 0 1rem;
            white-space: nowrap;
        }

/* Today's tournament to play, over the results: a slimmer callout */
.ac-play-today {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.ac-tabbar-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}

    .ac-tabbar-scroll .ac-tabbar-item {
        flex: none;
        white-space: nowrap;
    }

.ac-results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ac-standing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.625rem;
    margin: 0;
    color: var(--ac-text-2);
    font-size: 0.9375rem;
}

.ac-pill-bad {
    background-color: var(--ac-bad-wash);
    color: var(--ac-bad);
}

.ac-data tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.025);
}

.ac-results-table td {
    vertical-align: middle;
}

.ac .ac-data td.ac-empty-cell {
    padding: 1.5rem 1rem;
    color: var(--ac-text-2);
    font-weight: 400;
    white-space: normal;
    text-align: center;
}

/* A hand's cards (South's; North's too on the team results), suit by suit, in a row of chips */
.ac-hand-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ac-hand-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.875rem 0.25rem 0.25rem;
    border: 1px solid var(--ac-line);
    border-radius: 999px;
    background-color: var(--ac-surface);
    font-weight: 700;
    letter-spacing: 0.04em;
}

    .ac-hand-group svg {
        width: 1.75rem;
        height: 1.75rem;
        padding: 0.3125rem;
        border-radius: 50%;
        background-color: #fff;
        fill: var(--ac-bg);
    }

.ac-hand-hearts svg,
.ac-hand-diamonds svg {
    fill: #d62828;
}

/* The team results' deal: the pair's two hands, North's row over South's, each after its seat's name. The names are
   one column, so the rows of chips line up; a row too long for a phone wraps under its own first chips. */
.ac-hand-seats {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem 0.875rem;
}

.ac-hand-seat {
    display: flex;
    align-items: center;
    /* a suit chip's height, so the name sits level with its row's first chips */
    min-height: 2.375rem;
    color: var(--ac-text-2);
    font-size: 0.8125rem;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------------------------------------------
   Casual lobby
   --------------------------------------------------------------------------------------------------------------- */

.ac-lobby {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1180px !important;
    min-height: 0 !important;
    margin: 0 auto;
    padding: 1.25rem 1.25rem 1rem !important;
}

@media (min-width: 768px) {
    .ac-lobby {
        padding: 1.75rem 2rem 1.25rem !important;
    }
}

.ac-lobby-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

    .ac-lobby-head .ac-actions {
        align-items: center;
    }

.ac-lobby-list {
    flex: 1;
    min-height: 0;
}

.ac-lobby-cols {
    min-height: 2.75rem;
    border-bottom: 1px solid var(--ac-line-strong);
    background-color: var(--ac-surface);
    color: var(--ac-text-2);
    font-size: 0.875rem;
}

    .ac-lobby-cols > div {
        border: 0 !important;
    }

    .ac-lobby-cols img {
        opacity: 0.7;
    }

.ac-lobby-row {
    padding: 1rem 0;
    border-bottom: 1px solid var(--ac-line);
}

/* A table: four seats round the felt */
.ac .ac-lobby-table {
    grid-template-columns: 1fr minmax(4.5rem, auto) 1fr;
    grid-template-rows: auto minmax(4.5rem, auto) auto;
    gap: 0.375rem;
    width: min(100%, 17rem);
    height: auto;
}

    .ac .ac-lobby-table > .cell:nth-child(5) {
        border-radius: var(--ac-radius-sm);
        background-color: var(--ac-felt);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    .ac .ac-lobby-table > .cell:nth-child(even) {
        flex-direction: column;
        gap: 0.25rem;
        font-size: 0.9375rem;
        line-height: 1.2;
    }

        .ac .ac-lobby-table > .cell:nth-child(even) .fw-bold {
            color: var(--ac-text);
            font-weight: 600 !important;
        }

        .ac .ac-lobby-table > .cell:nth-child(even) .fst-italic {
            color: var(--ac-text-3);
        }

.ac-time-control {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-raised);
    color: var(--ac-text);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
}

.ac-yes,
.ac-no {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
}

    .ac-yes svg,
    .ac-no svg {
        width: 1rem;
        height: 1rem;
    }

.ac-yes {
    background-color: var(--ac-go-wash);
    color: var(--ac-go);
}

.ac-no {
    background-color: var(--ac-raised);
    color: var(--ac-text-3);
}

.ac-btn-icon {
    min-width: 2.375rem;
    padding: 0.375rem;
}

    .ac-btn-icon img {
        width: 1.25rem;
        height: 1.25rem;
    }

/* Host a Table: a dialog over the list */
.ac #host-table-box-container {
    background: rgba(10, 11, 13, 0.7);
    border-radius: 0;
}

.ac-dialog {
    width: min(22rem, calc(100vw - 2rem));
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.ac-dialog-title {
    padding: 1.25rem 1.5rem 0;
    font-size: 1.25rem !important;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.ac-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
}

    .ac-dialog-body h3 {
        margin-top: 0.5rem !important;
        color: var(--ac-text-2) !important;
        font-size: 0.875rem;
        font-weight: 700;
    }

    .ac-dialog-body .ac-check {
        color: var(--ac-text);
    }

.ac-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.5rem 1.5rem 1.5rem;
}

.ac select.ac-input {
    width: 100%;
}

.ac .ac-toolbar select.ac-input {
    width: auto;
}

.ac-tabbar-scroll {
    overflow-y: hidden;
    scrollbar-width: none;
}

    .ac-tabbar-scroll::-webkit-scrollbar {
        display: none;
    }

    .ac-tabbar-scroll .ac-tabbar-item[aria-selected="true"]::after {
        bottom: 0;
    }

        .ac .ac-lobby-table > .cell:nth-child(even) .fw-bold + .d-block {
            color: var(--ac-text-2);
            font-size: 0.875rem;
        }