/* Four dark alternatives. Layout and green default stay in styles.css. */
.alternate-dark { --soft: color-mix(in srgb, var(--lime) 8%, var(--surface)); --strong-border: color-mix(in srgb, var(--lime) 40%, var(--surface)); }
.alternate-dark .site-header { border-color: var(--border); }
.alternate-dark :is(.icon-button:hover, .demo-banner, .privacy-note) { background: var(--soft); }
.alternate-dark :is(.invite-button, .join-option, .rating-button, .festival-option, .button.secondary,
  .crew-field input, .field input, .field textarea, .data-actions > button, .data-actions > label, .restore-summary) { border-color: var(--border); }
.alternate-dark :is(.crew-bar, .link-access-note, .festival-year, .person-option, .day-filter, .rating-button,
  .join-arrow, .settings-note, .source-note, .field, .field-hint, .festival-option-icon, .help-note) { color: var(--muted); }
.alternate-dark :is(.festival-switch > .icon, .search-box > .icon, .settings-list > button > .icon,
  .source-note a, .crew-field label, .ranking-rules li, .data-actions span > span,
  .data-actions .icon, .privacy-note p, .privacy-note .icon, .restore-summary p,
  .selection-group > h3 > span) { color: var(--muted); }
.alternate-dark .festival-option > span:nth-child(2) > span { color: var(--muted); }
.alternate-dark #sync-status { color: var(--muted); }
.alternate-dark #sync-status[data-status="offline"] { color: var(--orange); }
.alternate-dark .demo-banner { color: var(--muted); }
.alternate-dark :is(.person-option, .day-filter) { border-color: var(--border); }
.alternate-dark :is(.person-option, .day-filter):hover { border-color: var(--strong-border); }
.alternate-dark :is(.person-option.active, .day-filter.active, .festival-option.selected) { background: var(--soft); border-color: var(--strong-border); color: var(--lime); }
.alternate-dark :is(button.join-option:hover, .festival-option:hover,
  .button.secondary:hover, .data-actions > button:hover, .data-actions > label:hover) { background: var(--soft); border-color: var(--strong-border); color: var(--text); }
.alternate-dark .join-new-person:focus-within { border-color: var(--strong-border); }
.alternate-dark button.join-arrow:hover:enabled { background: var(--soft); color: var(--lime); }
.alternate-dark :is(.search-box, .crew-field input, .field input, .field textarea) { background: color-mix(in srgb, var(--bg) 70%, var(--surface)); }
.alternate-dark :is(.search-box input, .crew-field input, .field input, .field textarea)::placeholder { color: var(--muted); }
.alternate-dark .search-box:focus-within { border-color: var(--strong-border); }
.alternate-dark :is(.act-row, .pick-row, .settings-list > button, .modal-actions) { border-color: var(--border); }
.alternate-dark .act-photo { background: var(--soft); color: var(--muted); }
.alternate-dark .act-photo:has(.act-placeholder) { background: radial-gradient(ellipse at 75% 5%, color-mix(in srgb, var(--lime) 14%, var(--surface)), transparent 75%), linear-gradient(160deg, var(--soft), var(--surface)); }
.alternate-dark .act-photo > .act-placeholder { color: color-mix(in srgb, var(--lime) 45%, var(--surface)); }
.alternate-dark .rating-button:hover { background: var(--soft); border-color: var(--strong-border); color: var(--text); }
.alternate-dark .rating-button:disabled:not(.selected):hover { background: transparent; border-color: var(--border); color: var(--muted); }
.alternate-dark .rating-0.selected { border-color: var(--muted); background: color-mix(in srgb, var(--muted) 16%, var(--surface)); color: var(--text); }
.alternate-dark .rating-1.selected { border-color: color-mix(in srgb, var(--orange) 65%, var(--surface)); background: color-mix(in srgb, var(--orange) 13%, var(--surface)); color: var(--orange); }
.alternate-dark .rating-2.selected { border-color: var(--lime); background: var(--lime); color: var(--on-accent); }
.alternate-dark .button.primary { background: var(--lime); color: var(--on-accent); }
.alternate-dark .button.primary:hover { background: color-mix(in srgb, var(--lime) 85%, white); }
.alternate-dark .button.secondary { color: var(--text); }
.alternate-dark dialog { background: var(--surface); border-color: var(--strong-border); }
.alternate-dark dialog::backdrop { background: color-mix(in srgb, var(--bg) 75%, transparent); }
.alternate-dark :is(.avatar, .join-new-avatar) { color: var(--lime); background: color-mix(in srgb, var(--lime) 19%, var(--surface)); }
.alternate-dark .color-1 { color: var(--orange); background: color-mix(in srgb, var(--orange) 20%, var(--surface)); }
.alternate-dark .color-2 { background: color-mix(in srgb, var(--lime) 27%, var(--surface)); }
.alternate-dark .color-3 { background: color-mix(in srgb, var(--orange) 12%, var(--surface)); }
.alternate-dark .color-4 { background: color-mix(in srgb, var(--lime) 12%, var(--surface)); }
.alternate-dark .color-5 { background: color-mix(in srgb, var(--orange) 24%, var(--surface)); }
.alternate-dark :is(.form-error, .local-link-note) { color: var(--orange); }
.alternate-dark .festival-options { scrollbar-color: var(--strong-border) transparent; }
.alternate-dark .data-actions strong { color: var(--text); }
.alternate-dark #toast { background: var(--lime); color: var(--on-accent); border-color: var(--lime); }
@media (min-width: 700px) {
  .alternate-dark :is(.act-list .act-row, .pick-row) { border-color: var(--border); }
  .alternate-dark .act-list .act-row:hover { border-color: var(--strong-border); }
  .alternate-dark .act-list .act-photo > .act-placeholder { color: color-mix(in srgb, var(--lime) 25%, var(--surface)); }
}