@layer components {
    /* Dialogs: the <dialog> is the backdrop hit area, the panel holds content. */
    .dialog {
        width: min(640px, calc(100vw - 2rem));
        max-height: calc(100vh - 2rem);
        padding: 0;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-lg);
        background: var(--surface-1);
        color: var(--text);
        box-shadow: var(--shadow-overlay);
    }

    .dialog--narrow { width: min(460px, calc(100vw - 2rem)); }
    .dialog--wide { width: min(880px, calc(100vw - 2rem)); }

    .dialog::backdrop {
        background: var(--backdrop, rgb(8 9 11 / 0.72)); /* older browsers don't pass variables to ::backdrop */
    }

    .dialog[open] {
        animation: dialog-in 160ms var(--ease);
    }

    @keyframes dialog-in {
        from { opacity: 0; transform: translateY(6px); }
    }

    .dialog__panel {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 2rem);
    }

    .dialog__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--line);
    }

    .dialog__title {
        font-size: var(--text-lg);
        font-weight: 600;
    }

    .dialog__body {
        overflow-y: auto;
        padding: var(--space-5);
    }

    .dialog__body > * + *:not(.form-grid > *) {
        margin-top: var(--space-4);
    }

    .dialog__subject {
        font-weight: 600;
    }

    .dialog__footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-5);
        border-top: 1px solid var(--line);
        background: var(--surface-sunken);
        border-end-start-radius: var(--radius-lg);
        border-end-end-radius: var(--radius-lg);
    }

    .dialog__footer:empty {
        display: none;
    }

    /* Account menu (native popover anchored to its toggle) */
    .profile__toggle {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: 0.2rem var(--space-2) 0.2rem 0.2rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--surface-1);
        anchor-name: --profile-toggle;
    }

    .profile__toggle:hover {
        border-color: var(--line-strong);
    }

    .avatar {
        width: 32px;
        height: 32px;
        border-radius: var(--radius-sm);
        object-fit: cover;
        background: var(--surface-3);
    }

    .avatar--lg {
        width: 44px;
        height: 44px;
    }

    .profile__name {
        max-width: 14ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--text-sm);
    }

    .profile__menu {
        position: fixed;
        position-anchor: --profile-toggle;
        inset: auto;
        top: calc(anchor(bottom) + 6px);
        left: anchor(left);
        width: 260px;
        margin: 0;
        padding: var(--space-2);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-lg);
        background: var(--surface-1);
        color: var(--text);
        box-shadow: var(--shadow-overlay);
    }

    @supports not (anchor-name: --a) {
        .profile__menu { top: calc(var(--topbar-height) + 4px); left: var(--space-4); }
    }

    .profile__header {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-2) var(--space-3);
        margin-bottom: var(--space-2);
        border-bottom: 1px solid var(--line);
    }

    .profile__menu-name {
        font-weight: 600;
    }

    .profile__role {
        color: var(--text-dim);
        font-size: var(--text-xs);
    }

    .menu-item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        width: 100%;
        padding: var(--space-2);
        border: 0;
        border-radius: var(--radius-md);
        background: none;
        font-size: var(--text-sm);
        text-align: start;
    }

    .menu-item:hover { background: var(--surface-2); }
    .menu-item--danger { color: var(--danger-text); }

    /* Toasts */
    .toasts {
        position: fixed;
        z-index: 100;
        inset-block-start: calc(var(--topbar-height) + var(--space-3));
        inset-inline: 0;
        display: grid;
        justify-items: center;
        gap: var(--space-2);
        padding-inline: var(--space-4);
        pointer-events: none;
    }

    .toast {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        width: min(480px, 100%);
        padding: var(--space-3) var(--space-4);
        padding-inline-start: calc(var(--space-4) + 3px);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-md);
        background: var(--surface-2);
        box-shadow: var(--shadow-overlay);
        pointer-events: auto;
        animation: toast-in 180ms var(--ease);
    }

    /* The tone stripe doubles as the countdown: it drains until the toast closes. */
    .toast::before {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        width: 3px;
        background: var(--tone, var(--accent));
        transform-origin: top;
        animation: toast-life var(--toast-life, 4s) linear forwards;
    }

    .toast:hover::before,
    .toast:focus-within::before { animation-play-state: paused; }

    .toast--success { --tone: var(--ok); }
    .toast--error { --tone: var(--danger); }
    .toast--warning { --tone: var(--warn); }

    .toast__body {
        flex: 1;
        display: grid;
        gap: 2px;
        min-width: 0;
    }

    .toast__message, .toast__reason { white-space: pre-wrap; overflow-wrap: anywhere; }
    .toast__message { font-size: var(--text-sm); }
    .toast--error .toast__message { font-weight: 600; }
    .toast__reason { max-width: 70ch; font-size: var(--text-xs); color: var(--text-dim); }

    .toast__close {
        padding: 0;
        border: 0;
        background: none;
        color: var(--text-dim);
    }

    .toast--leaving {
        opacity: 0;
        transition: opacity 200ms var(--ease);
    }

    @keyframes toast-in {
        from { opacity: 0; transform: translateY(-6px); }
    }

    @keyframes toast-life {
        to { transform: scaleY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
        .toast::before { animation: none; }
    }

    /* Betting-open announcement */
    .promo {
        display: grid;
        justify-items: center;
        gap: var(--space-3);
        padding: var(--space-6) var(--space-5) var(--space-5);
        text-align: center;
        border-top: 3px solid var(--brass);
        border-radius: var(--radius-lg);
    }

    .promo__icon {
        width: 2.5rem;
        height: 2.5rem;
        color: var(--brass);
    }

    .promo__title {
        font-family: var(--font-display);
        font-size: var(--text-xl);
        font-weight: 700;
        line-height: 1.25;
    }

    .promo__facts {
        display: grid;
        gap: var(--space-2);
        margin-block: var(--space-2);
        padding: 0;
        list-style: none;
        color: var(--text-muted);
        font-size: var(--text-sm);
        text-align: start;
    }

    .promo__facts strong {
        color: var(--text);
    }
}