/* Black palette (dark theme): a black page with surfaces only just lifted
   off it, first trialled on the Smart Skip page (ui-refinements.css). Rolled
   out screen by screen; each screen opts in with one selector below. When
   every screen is listed, these values move into appearance.css as the dark
   theme's defaults and this file goes. */
:root:not([data-theme="light"]) body:is(
    :has(#setupPanel:not(.hidden):not([style*="none"])),  /* home */
    :has(#appContent:not(.hidden)),                      /* flashcards */
    :has(#appLoadingScreen:not(.is-hidden)),             /* startup */
    :has(#resumeLastSetCard),                            /* welcome back */
    .auth-active                                         /* sign-in */
) {
    --bg-primary: #000;
    --bg-secondary: #0d0e10;
    --bg-card: #0d0e10;
    --bg-card-hover: #17191c;
    --bg-tertiary: #17191c;
    --border-color: #24272b;
    --border-light: #2e3238;
    background: #000;
}
:root:not([data-theme="light"]) body:is(
    :has(#setupPanel:not(.hidden):not([style*="none"])),
    :has(#appContent:not(.hidden)),
    :has(#appLoadingScreen:not(.is-hidden)),
    :has(#resumeLastSetCard),
    .auth-active
) .container { background: transparent; }

/* End of a session: a plain lifted card like the rest, not one tinted with
   the accent. */
:root:not([data-theme="light"]) .deck-complete-content {
    background: var(--bg-card);
    border-color: var(--border-light);
}

/* Flashcards: panels and pop-ups that type their blue-grey in directly
   instead of using the surface variables. Panels on the card sit one step
   above it; pop-ups one step above that. */
:root:not([data-theme="light"]) body:has(#appContent:not(.hidden)) :is(
    .sentence, .phrase-example, .fw-parts-box, .fw-sentence-panel
) {
    background: var(--bg-tertiary);
}
:root:not([data-theme="light"]) body:has(#appContent:not(.hidden)) .fw-sentence-panel {
    border-color: var(--border-light);
}
:root:not([data-theme="light"]) body:has(#appContent:not(.hidden)) :is(
    .card-meta-modal-content, .sense-prominence-detail, .morph-popover,
    .freq-tooltip, .direction-popover, .lookup-sheet-icon
) {
    background: #1d2024;
}
:root:not([data-theme="light"]) body.artist-mode:has(#appContent:not(.hidden)) .card-face.card-front::after {
    background: rgba(10, 11, 14, 0.94);
}
:root:not([data-theme="light"]) body.artist-mode:has(#appContent:not(.hidden)) .card-face.card-back::after {
    display: none !important;
}