/*
 * Kelebekya final palette guard.
 * Loaded after every component stylesheet so legacy green surfaces and
 * browser-native form colours cannot leak back into the interface.
 */
:root {
    color-scheme: dark;
    --bg: #151514 !important;
    --panel: #151514 !important;
    --panel2: #1b1915 !important;
    --accent: #ffb000 !important;
    --accent2: #ffd36b !important;
    --line: rgba(255, 176, 0, .14) !important;
    --about-green: #ffb000 !important;
    --forum-green: #ffb000 !important;
    --sky: #ffb000 !important;
    --editor-accent: #ffb000 !important;
    --about-line: rgba(255, 176, 0, .14) !important;
    --forum-line: rgba(255, 176, 0, .14) !important;
    --ask-line: rgba(255, 176, 0, .14) !important;
    --member-line: rgba(255, 176, 0, .14) !important;
    --ticker-line: rgba(255, 176, 0, .14) !important;
    --editor-line: rgba(255, 176, 0, .14) !important;
    --sky-line: rgba(255, 176, 0, .14) !important;
}

html,
body {
    background-color: #151514;
}

/* Text, search, date and select controls */
body :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    [contenteditable="true"]
) {
    color-scheme: dark !important;
    background-color: #151514 !important;
    background-image: none !important;
    border-color: rgba(255, 176, 0, .22) !important;
    color: #f3efe6 !important;
    caret-color: #ffb000 !important;
    box-shadow: none !important;
}

body :where(input, select, textarea, [contenteditable="true"]):hover {
    border-color: rgba(255, 176, 0, .38) !important;
}

body :where(input, select, textarea, [contenteditable="true"]):focus,
body :where(input, select, textarea, [contenteditable="true"]):focus-visible {
    border-color: #ffb000 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(255, 176, 0, .11) !important;
}

body :where(input, textarea)::placeholder {
    color: #8f887c !important;
    opacity: 1 !important;
}

body :where(select option, select optgroup) {
    background: #151514 !important;
    color: #f3efe6 !important;
}

body :where(input[type="checkbox"], input[type="radio"], input[type="range"]) {
    accent-color: #ffb000 !important;
}

body :where(input[type="checkbox"], input[type="radio"]) {
    background-color: #151514 !important;
    border-color: rgba(255, 176, 0, .34) !important;
}

body input[type="file"]::file-selector-button {
    border: 1px solid rgba(255, 176, 0, .34) !important;
    background: #2a2114 !important;
    color: #ffd36b !important;
    cursor: pointer;
}

body input[type="range"]::-webkit-slider-thumb {
    background: #ffb000 !important;
}

body input[type="range"]::-moz-range-thumb {
    border-color: #ffb000 !important;
    background: #ffb000 !important;
}

/* Chrome/Safari autofill otherwise paints inputs with a foreign colour. */
body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body textarea:-webkit-autofill,
body select:-webkit-autofill {
    -webkit-text-fill-color: #f3efe6 !important;
    caret-color: #ffb000 !important;
    -webkit-box-shadow: 0 0 0 1000px #151514 inset !important;
    box-shadow: 0 0 0 1000px #151514 inset !important;
    transition: background-color 99999s ease-out 0s;
}

/* Search/typeahead panels and dynamically generated suggestions. */
body :where(
    .live-species-results,
    .species-results,
    .review-species-results,
    #member-results,
    #place-suggestions,
    [role="listbox"],
    .autocomplete-results,
    .search-suggestions
) {
    background-color: #151514 !important;
    border-color: rgba(255, 176, 0, .22) !important;
    color: #f3efe6 !important;
}

body :where(
    .live-species-results,
    .species-results,
    .review-species-results,
    #member-results,
    #place-suggestions,
    [role="listbox"]
) :where(a, button, li, [role="option"]) {
    background-color: #151514 !important;
    border-color: rgba(255, 255, 255, .045) !important;
    color: #f3efe6 !important;
}

body :where(
    .live-species-results,
    .species-results,
    .review-species-results,
    #member-results,
    #place-suggestions,
    [role="listbox"]
) :where(a, button, li, [role="option"]):hover,
body :where(
    .live-species-results,
    .species-results,
    .review-species-results,
    #member-results,
    #place-suggestions,
    [role="listbox"]
) .is-active {
    background-color: #2a2114 !important;
    color: #ffd36b !important;
}

body ::selection {
    background: #ffb000;
    color: #151514;
}