/* Environmental theming for the Arena session — two INDEPENDENT axes:

     data-study-theme  — the page BACKGROUND. The twelve light washes live in
                         assessment.css; the two deep scenes (night, deepsea) are
                         defined here. Effects layer over any of them.
     data-study-panel  — the CARD surfaces (navigator, question panel, summary,
                         topbar). 'paper' is the untouched white default; six light
                         tints; plus night/deepsea dark card sets.

   Any background pairs with any panel — a night background under mint cards is a
   choice, not a bug. The old data-study-env attribute is retired; presets in the
   picker just write both axes. */

/* ---- Deep background scenes (washes + effect accents) ---- */

[data-study-theme="night"] {
    --study-wash: linear-gradient(180deg, #0b1220 0%, #121b2d 55%, #16203a 100%);
    --study-a: 99, 179, 255;
    --study-b: 139, 92, 246;
}

[data-study-theme="deepsea"] {
    --study-wash:
        radial-gradient(circle at 16% -10%, rgba(125, 211, 252, 0.22), transparent 42%),
        radial-gradient(circle at 80% -4%, rgba(94, 234, 212, 0.14), transparent 46%),
        linear-gradient(180deg, #04283f 0%, #06405f 55%, #085273 100%);
    --study-a: 94, 234, 212;
    --study-b: 125, 211, 252;
}

/* ---- Dark panel variable sets ---- */

:root[data-study-panel="night"] {
    --env-card: rgba(23, 32, 51, 0.94);
    --env-card-soft: rgba(30, 41, 63, 0.72);
    --env-inset: rgba(9, 14, 26, 0.55);
    --env-border: rgba(148, 163, 184, 0.16);
    --env-border-strong: rgba(148, 163, 184, 0.3);
    --env-text: #cbd5e1;
    --env-text-strong: #f1f5f9;
    --env-muted: #8fa0b8;
    --env-accent: #63b3ff;
    --env-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
    --env-good-bg: rgba(34, 197, 94, 0.16);
    --env-good-border: rgba(34, 197, 94, 0.32);
    --env-good-text: #6ee7a0;
    --env-bad-bg: rgba(239, 68, 68, 0.16);
    --env-bad-border: rgba(239, 68, 68, 0.34);
    --env-bad-text: #fda4af;
}

:root[data-study-panel="deepsea"] {
    --env-card: rgba(6, 41, 62, 0.9);
    --env-card-soft: rgba(9, 52, 76, 0.72);
    --env-inset: rgba(3, 22, 34, 0.5);
    --env-border: rgba(125, 211, 252, 0.18);
    --env-border-strong: rgba(125, 211, 252, 0.34);
    --env-text: #cfe8f5;
    --env-text-strong: #f0fafd;
    --env-muted: #8fb8cd;
    --env-accent: #5eead4;
    --env-shadow: 0 18px 42px rgba(1, 16, 26, 0.5);
    --env-good-bg: rgba(52, 211, 153, 0.16);
    --env-good-border: rgba(52, 211, 153, 0.34);
    --env-good-text: #7df0c0;
    --env-bad-bg: rgba(251, 113, 133, 0.16);
    --env-bad-border: rgba(251, 113, 133, 0.36);
    --env-bad-text: #fda4af;
}

/* ---- Light panel tints ----
   A wash for the big cards so surfaces mix against any background. Light pastels
   only: card text is unchanged, so every combination keeps full contrast. 'paper'
   has no rules — the default look never depends on this file. */

html[data-study-panel="sky"] .arena-sidebar,
html[data-study-panel="sky"] .arena-question-panel,
html[data-study-panel="sky"] .arena-summary-card {
    background: linear-gradient(180deg, rgba(242, 248, 255, 0.96), rgba(224, 238, 254, 0.92));
    border-color: rgba(10, 132, 255, 0.14);
}

html[data-study-panel="mint"] .arena-sidebar,
html[data-study-panel="mint"] .arena-question-panel,
html[data-study-panel="mint"] .arena-summary-card {
    background: linear-gradient(180deg, rgba(240, 253, 246, 0.96), rgba(216, 243, 228, 0.92));
    border-color: rgba(16, 185, 129, 0.16);
}

html[data-study-panel="cream"] .arena-sidebar,
html[data-study-panel="cream"] .arena-question-panel,
html[data-study-panel="cream"] .arena-summary-card {
    background: linear-gradient(180deg, rgba(255, 251, 240, 0.97), rgba(252, 240, 212, 0.92));
    border-color: rgba(217, 164, 65, 0.18);
}

html[data-study-panel="rose"] .arena-sidebar,
html[data-study-panel="rose"] .arena-question-panel,
html[data-study-panel="rose"] .arena-summary-card {
    background: linear-gradient(180deg, rgba(255, 245, 247, 0.97), rgba(252, 226, 235, 0.92));
    border-color: rgba(244, 114, 182, 0.16);
}

html[data-study-panel="lilac"] .arena-sidebar,
html[data-study-panel="lilac"] .arena-question-panel,
html[data-study-panel="lilac"] .arena-summary-card {
    background: linear-gradient(180deg, rgba(250, 247, 255, 0.97), rgba(233, 224, 251, 0.92));
    border-color: rgba(139, 92, 246, 0.15);
}

html[data-study-panel="slate"] .arena-sidebar,
html[data-study-panel="slate"] .arena-question-panel,
html[data-study-panel="slate"] .arena-summary-card {
    background: linear-gradient(180deg, rgba(246, 248, 250, 0.97), rgba(226, 232, 240, 0.94));
    border-color: rgba(71, 85, 105, 0.16);
}

/* ---- Dark-panel surface overrides (night + deepsea) ----
   Everything below consumes the --env-* variables, so both dark sets — and any
   future one — share one rule list. */

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .assessment-session-page {
    color: var(--env-text);
}

/* Topbar band */
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .assessment-session-topbar {
    background: var(--env-card);
    border: 1px solid var(--env-border);
    box-shadow: var(--env-shadow);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .assessment-session-topbar h3,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-topbar-copy h3 {
    color: var(--env-text-strong);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessmentSessionSubtitle,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-topbar-domain {
    color: var(--env-muted);
}

/* The navy half of the wordmark vanishes into a dark band; lift it, keep the pairing. */
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .assessment-session-topbar .brand-wordmark-auc {
    color: #7cc0ff;
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .assessment-session-topbar .brand-wordmark-companion {
    color: var(--env-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-topbar-pill {
    background: var(--env-card-soft);
    border-color: var(--env-border);
    color: var(--env-text);
}

/* The theme popover itself */
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-theme-menu {
    background: var(--env-card);
    border-color: var(--env-border-strong);
    box-shadow: var(--env-shadow);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-theme-heading {
    color: var(--env-muted);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-theme-swatch,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-theme-effect {
    background: var(--env-card-soft);
    border-color: var(--env-border);
    color: var(--env-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-theme-swatch.is-active,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-theme-effect.is-active {
    border-color: var(--env-accent);
    color: var(--env-text-strong);
}

/* The three big cards */
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-sidebar,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-question-panel,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-card {
    background: var(--env-card);
    border-color: var(--env-border);
    box-shadow: var(--env-shadow);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .section-label {
    color: var(--env-accent);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-sidebar h4,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-panel-head h4,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-card h4 {
    color: var(--env-text-strong);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-sidebar-copy {
    color: var(--env-muted);
}

/* Navigator squares */
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-nav-button {
    background: var(--env-card-soft);
    border-color: var(--env-border);
    color: var(--env-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-nav-button.is-current {
    background: var(--env-inset);
    border-color: var(--env-accent);
    color: var(--env-text-strong);
    box-shadow: none;
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-nav-button.is-correct {
    background: var(--env-good-bg);
    border-color: var(--env-good-border);
    color: var(--env-good-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-nav-button.is-wrong {
    background: var(--env-bad-bg);
    border-color: var(--env-bad-border);
    color: var(--env-bad-text);
}

/* Sidebar stat tiles (streak tile keeps its amber/ember identity) */
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-sidebar-stat {
    background: var(--env-card-soft);
    border-color: var(--env-border);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-sidebar-stat strong {
    color: var(--env-text-strong);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-sidebar-stat span {
    color: var(--env-muted);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-sidebar-stat.arena-streak-stat {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.08));
    border-color: rgba(245, 158, 11, 0.4);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-streak-stat strong {
    color: #fbbf24;
}

/* Question stem & meta */
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-assessment-question {
    color: var(--env-text-strong);
}

/* Solid pastel highlights would erase light text; translucent ink keeps both. */
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-highlight--yellow { background: rgba(250, 204, 21, 0.32); }
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-highlight--green  { background: rgba(74, 222, 128, 0.28); }
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-highlight--blue   { background: rgba(96, 165, 250, 0.3); }

/* Choice buttons */
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-assessment-choice {
    background: var(--env-card-soft);
    border-color: var(--env-border);
    color: var(--env-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-assessment-choice:hover:not(:disabled) {
    border-color: var(--env-border-strong);
    background: var(--env-inset);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-assessment-choice.is-selected {
    border-color: var(--env-accent);
    background: var(--env-inset);
    color: var(--env-text-strong);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-assessment-choice.is-correct {
    background: var(--env-good-bg);
    border-color: var(--env-good-border);
    color: var(--env-good-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-assessment-choice.is-wrong {
    background: var(--env-bad-bg);
    border-color: var(--env-bad-border);
    color: var(--env-bad-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-choice-strike {
    background: var(--env-card-soft);
    border-color: var(--env-border);
    color: var(--env-muted);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-option-table-head {
    color: var(--env-muted);
}

/* Rationales */
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .choice-explanation {
    background: var(--env-inset);
    border-color: var(--env-border);
    color: var(--env-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .choice-teaching-point {
    background: rgba(99, 179, 255, 0.12);
    border-color: rgba(99, 179, 255, 0.28);
    color: var(--env-text-strong);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .choice-source-note {
    color: var(--env-muted);
}

/* Status pill + head buttons */
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-feedback-status {
    background: var(--env-card-soft);
    border-color: var(--env-border);
    color: var(--env-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-feedback-status.is-correct {
    background: var(--env-good-bg);
    border-color: var(--env-good-border);
    color: var(--env-good-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-feedback-status.is-wrong {
    background: var(--env-bad-bg);
    border-color: var(--env-bad-border);
    color: var(--env-bad-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .hoad-text-size,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .hoad-question-reset {
    background: var(--env-card-soft);
    border-color: var(--env-border);
    color: var(--env-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-assessment-empty {
    background: var(--env-card-soft);
    border-color: var(--env-border);
    color: var(--env-muted);
}

/* Matching grid — enough that the board reads as part of the scene */
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-match-legend,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .hoad-match-row {
    background: var(--env-card-soft);
    border-color: var(--env-border);
    color: var(--env-text);
}

/* Summary screen */
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-ring-track {
    stroke: rgba(255, 255, 255, 0.12);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-score {
    color: var(--env-muted);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-explainer {
    color: var(--env-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-stat {
    background: var(--env-card-soft);
    border-color: var(--env-border);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-stat strong {
    color: var(--env-text-strong);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-stat span {
    color: var(--env-muted);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-stat[data-tone="good"] {
    background: var(--env-good-bg);
    border-color: var(--env-good-border);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-stat[data-tone="good"] strong {
    color: var(--env-good-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-stat[data-tone="bad"] {
    background: var(--env-bad-bg);
    border-color: var(--env-bad-border);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-stat[data-tone="bad"] strong {
    color: var(--env-bad-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-breakdown {
    background: var(--env-inset);
    border-color: var(--env-border);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-breakdown-head,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-review-heading {
    color: var(--env-muted);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-breakdown-label {
    color: var(--env-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-breakdown-bar {
    background: rgba(255, 255, 255, 0.1);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-missed-item {
    background: var(--env-card-soft);
    border-color: var(--env-border);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-missed-item:hover {
    background: var(--env-inset);
    border-color: var(--env-border-strong);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-missed-copy strong {
    color: var(--env-text-strong);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-missed-copy span {
    color: var(--env-muted);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-missed-go {
    color: var(--env-accent);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-clean {
    background: var(--env-good-bg);
    border-color: var(--env-good-border);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-clean strong,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-clean span:not(.arena-summary-clean-mark) {
    color: var(--env-good-text);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) #assessment-session-page .arena-summary-actions [data-hoad-close-summary] {
    background: var(--env-card-soft);
    border-color: var(--env-border-strong);
    color: var(--env-text);
}

/* ---- Flagging on dark panels ---- */

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .hoad-question-flag {
    background: var(--env-card-soft);
    border-color: var(--env-border);
    color: var(--env-muted);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .hoad-question-flag:hover,
html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .hoad-question-flag.is-flagged {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.45);
    color: #fbbf24;
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-nav-button.is-answered:not(.is-current) {
    background: rgba(99, 179, 255, 0.14);
    border-color: rgba(99, 179, 255, 0.35);
    color: var(--env-text-strong);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-flagged {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.4);
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-flagged-label {
    color: #fbbf24;
}

html:is([data-study-panel="night"], [data-study-panel="deepsea"]) .arena-summary-flag-chip {
    background: var(--env-card-soft);
    border-color: rgba(245, 158, 11, 0.45);
    color: #fbbf24;
}