/* =============================================================================
   feedback-zone.css — site-wide explanation zone + verdict button states
   (Page-Design Conventions, CLAUDE.md; reference implementation: the NMR
   pages). Load AFTER main.css and the page's local style.css so the zone
   styles win over drifted per-page #feedback-message rules.

   The zone is ONE permanent box: full column width, fixed height (set
   --zone-height on #explanation-area to tune per page family), identical
   border/background empty or filled, ghost placeholder when empty,
   overflow scrolls INSIDE. #feedback-message nests as the zone's first
   child (it feeds bookmark labels — clear the zone with a helper that
   preserves it, never innerHTML = '').

   The NMR pages keep their own copies in nmr-practice.css /
   realspectra.css for now (Dennis's testing window); fold them onto this
   file after the pattern is signed off. ========================================================================== */

#explanation-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75em;
    margin: 1em auto;
    padding: 1em;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--zone-height, 8.5em);
    max-height: var(--zone-height, 8.5em);
    overflow-y: auto;
    background: #f8f8f8;
    border: 1px solid #e0e0e6;
    border-radius: 8px;
}

/* Overflow must SCROLL, never squash: in a fixed-height flex column the
   children shrink by default, painting the lead line over the prose. */
#explanation-area > * {
    flex-shrink: 0;
}

/* Ghost placeholder while truly empty (no lead, no prose).
   Deliberately does NOT promise an explanation: on pages where the
   reveal itself is the teaching (the structure, the atom-count table,
   the highlighted answer) the zone only ever carries the lead line, and
   promising prose that never comes reads as a failed load. */
#explanation-area:not(.visible):has(#feedback-message:empty)::before {
    content: "Feedback appears here.";
    color: #b9b9c0;
    font-size: 0.85rem;
    margin: auto;
}

/* Lead line: the zone reserves the space, not the line (main.css pins
   #feedback-message at height:30px — two-line leads would overflow). */
#explanation-area #feedback-message {
    min-height: 0;
    height: auto;
    margin: 0;
    order: -1;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
}

/* The VERDICT lives in the button morph + page flash ONLY. Inside the
   zone the lead is neutral prose — .correct/.incorrect stay for logic
   but do not color the text here. */
#explanation-area #feedback-message.correct,
#explanation-area #feedback-message.incorrect {
    color: #333;
}

.explanation-text {
    margin: 0;
    line-height: 1.5;
    color: #333;
    text-align: center;
}

/* Key notes read as ordinary explanation prose — class kept for
   semantics only (the old yellow box was drifted styling). */
.key-note {
    font-size: inherit;
}

/* Verdict button states — generic classes so any submit control
   (#check-btn, #rank-check-btn, #submit-guess-btn, …) can morph.
   !important beats per-page button background rules. */
button.btn-correct  { background-color: #2a9d8f !important; color: #fff !important; }
button.btn-wrong    { background-color: #d32f2f !important; color: #fff !important; }
button.btn-revealed { background-color: #888 !important; color: #fff !important; }

/* Choice-answer pages (no check step): the CLICKED choice morphs in
   place instead — same green/red, and on reveal the correct choice gets
   .choice-verdict-correct (mirrors the NMR splitting pages). */
.choice-verdict-correct {
    background-color: #2a9d8f !important;
    border-color: #2a9d8f !important;
    color: #fff !important;
}
.choice-verdict-wrong {
    background-color: #d32f2f !important;
    border-color: #d32f2f !important;
    color: #fff !important;
}

/* On phones the fixed-height reservation costs too much screen: the zone
   collapses while empty and appears when filled. */
@media (max-width: 679px) {
    #explanation-area { min-height: 0; max-height: none; overflow: visible; display: none; }
    #explanation-area.visible { display: flex; }
}

/* "Scroll down for explanation" hint pill: fixed overlay just above the
   statbar (JS sets the exact bottom offset), so it can never move page
   content. z-index below the statbar (6000). */
#scroll-hint-btn {
    position: fixed;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%) translateY(6px);
    z-index: 5900;
    padding: 7px 16px;
    border: none;
    border-radius: 20px;
    background-color: #362A8D;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
}

#scroll-hint-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}