/* Setup configuration polish. Loaded after the legacy app CSS and play view CSS
   so the configuration screen cannot fall back to older dark setup styles. */
.dart-app:has(.start-details) {
    width: min(1180px, 100%);
}

.dart-app:has(.start-details) .dart-topbar,
.dart-app:has(.start-details) .start-grid {
    width: 100%;
    max-width: none;
}

.dart-app:has(.start-details) .start-grid {
    margin-inline: 0;
}

.setup-only-topbar {
    justify-content: flex-start;
    min-height: 50px;
    padding: 8px 10px;
}

.setup-only-topbar .topbar-back-button {
    min-height: 34px;
}

.brand-dot {
    display: inline-grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0;
    font-weight: 900;
}

.brand-dot::after {
    content: "DJS";
    font-size: .72rem;
    letter-spacing: 0;
}

html[data-theme="dark"] .brand-dot {
    background: var(--accent-soft);
    color: #c8d5ff;
}

.theme-toggle {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1;
}

.input-mode-section .setup-input-switch {
    min-height: 48px;
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
}

.input-mode-section .setup-input-switch strong {
    color: var(--text);
}

.input-mode-section .setup-input-switch .switch-track,
.match-structure-section .config-toggle-card .switch-track {
    border-color: var(--line);
    background: var(--surface-2);
}

.input-mode-section .setup-input-switch input:checked + .switch-track,
.match-structure-section .config-toggle-card input:checked + .switch-track {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    background: var(--accent-soft);
}

.input-mode-section .setup-input-switch input:checked + .switch-track::after,
.match-structure-section .config-toggle-card input:checked + .switch-track::after {
    background: var(--accent);
}

@media (max-width: 620px) {
    .dart-app:has(.start-details) {
        padding: 10px;
    }

    .setup-only-topbar {
        align-items: center;
    }
}