:root {
    color-scheme: dark;

    --font-body: system-ui, sans-serif;

    --color-background: #0f0d11;
    --color-foreground: #d9d9d9;
    --color-warning: #e58a94;
    --color-border: oklch(from var(--color-foreground) calc(l - 0.5) c h);
    --color-muted: oklch(from var(--color-foreground) calc(l - 0.25) c h);
    --color-surface: oklch(from var(--color-background) calc(l + 0.025) c h);
    --color-control: oklch(from var(--color-background) calc(l + 0.0125) c h);
    --color-control-active: oklch(from var(--color-background) calc(l + 0.05) c h);
    --color-control-hover: oklch(from var(--color-background) calc(l + 0.125) c h);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    font-family: var(--font-body);
    font-size: large;
    line-height: 1.1;
}

h1,
h2,
p {
    margin: 0;
}

h2 {
    font-size: larger;
    letter-spacing: 0.125rem;
}

button,
input {
    width: auto;
    padding: 0.125rem;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    color: inherit;
    background: var(--color-control);
    font: inherit;
    line-height: normal;
}

input {
    &:focus {
        background: var(--color-control-active);
    }

    &:focus-visible {
        outline: none;
    }
}

.validation-warning {
    color: var(--color-warning);
}

button {
    padding-inline: 1rem;
    color: var(--color-muted);
    background: var(--color-control-active);
    cursor: pointer;

    &:not(:disabled):hover {
        background: var(--color-control-hover);
    }

    &:not(:disabled):active {
        background: var(--color-control);
    }

    &:disabled {
        cursor: not-allowed;
    }
}

:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
}

.compact-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    background: var(--color-surface);

    h2 {
        text-align: center;
    }

    header {
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--color-border);
    }
}

.join-form {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    gap: 1rem;
    align-items: center;
}

[hidden] {
    display: none !important;
}