/* Year 9 Science — per-section revision page.
 *
 * Two grounds, one page. Reading sits on the page's normal light ground;
 * self-testing sits on a deep teal block. The change of background IS the
 * signal that the activity changed — a pupil who has scrolled into the teal
 * knows, without being told, that they are now supposed to be recalling rather
 * than reading. That was the page's real problem: prose and reveals looked
 * identical, so nobody switched mode.
 *
 * The interactivity has one job: make the student try before they see. No
 * scroll effects, no hover flourishes. On a phone, in a corridor, before a
 * lesson, movement is cost rather than delight.
 *
 * Built on native <details>, so all of it works with JavaScript off. */

/* ---------------------------------------------------------------- reading */

.sci-read {
    max-width: 38em;
}

.sci-read .sci-eyebrow {
    font-family: var(--jm-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------------- testing */

/* Full-bleed on a phone so the ground change reads as a change of place, not
 * as a card sitting on the page. */
.sci-test {
    background: var(--teal-deep);
    color: var(--mint);
    border-radius: 12px;
    padding: 1.5rem 1.25rem 1.75rem;
    margin: 2rem 0;
}

@media (max-width: 576px) {
    .sci-test {
        border-radius: 0;
        /* Measured: a hardcoded -1.25rem overflowed the viewport by 8px,
         * because Bootstrap's container gutter is --bs-gutter-x/2, not 20px. */
        margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    }
}

.sci-test h2 {
    color: #fff;
}

/* Bootstrap's muted greys are unreadable on the teal ground, so anything
 * secondary inside this block takes its colour from here instead. */
.sci-test .text-muted,
.sci-test .small {
    color: var(--mint) !important;
}

.sci-test .sci-eyebrow {
    display: block;
    font-family: var(--jm-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mint);
    margin-bottom: 0.15rem;
}

.sci-test .sci-lede {
    font-size: 0.85rem;
    color: var(--mint);
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------- progress */

.sci-modebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1.1rem;
}

.sci-modebar .btn {
    --bs-btn-color: var(--mint);
    --bs-btn-border-color: rgba(255, 255, 255, 0.45);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.14);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: #fff;
}

/* Borrowed from the spine direction: how far through you are, at a glance.
 * Rendered by script — it is an enhancement, not content, so its absence
 * costs a pupil with JS off nothing they need. */
.sci-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.sci-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    box-sizing: border-box;
}

.sci-dot--on {
    background: var(--mint);
    border-color: var(--mint);
}

.sci-progress {
    font-family: var(--jm-font-mono);
    font-size: 0.72rem;
    color: var(--mint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- reveals */

.sci-reveal,
.sci-trap {
    background: rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.5rem;
}

/* Measured at 27px, against a 44px floor for a touch target. These are the
 * page's primary control and they are tapped on a phone. */
.sci-reveal > summary,
.sci-trap > summary,
.sci-word > summary {
    min-height: 44px;
    align-items: center;
}

/* Open, a reveal flips to the light ground: the answer is a different kind of
 * thing from the prompt, and reads as one. */
.sci-reveal[open],
.sci-trap[open] {
    background: var(--mint);
    color: var(--ink);
}

.sci-trap {
    border: 1px solid rgba(255, 176, 32, 0.5);
}

.sci-trap[open] {
    border-color: transparent;
}

.sci-reveal > summary,
.sci-trap > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-weight: 600;
}

.sci-reveal > summary::-webkit-details-marker,
.sci-trap > summary::-webkit-details-marker {
    display: none;
}

.sci-reveal > summary:focus-visible,
.sci-trap > summary:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 3px;
    border-radius: 3px;
}

.sci-trap > summary {
    font-weight: 400;
}

.sci-term {
    font-family: var(--jm-font-display);
    font-size: 1.05rem;
    font-weight: 600;
}

/* The prompt names what to do before revealing — that is the teaching. */
.sci-prompt {
    font-family: var(--jm-font-mono);
    font-weight: 400;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mint);
    opacity: 0.92;
    margin-left: auto;
    white-space: nowrap;
}

.sci-reveal[open] .sci-prompt,
.sci-trap[open] .sci-prompt {
    display: none;
}

.sci-body {
    padding-top: 0.55rem;
}

/* One brief settle on reveal — enough to say where the eye should go, short
 * enough not to be a thing you sit through. */
@media (prefers-reduced-motion: no-preference) {
    .sci-reveal[open] .sci-body,
    .sci-trap[open] .sci-body {
        animation: sci-settle 220ms ease-out;
    }
}

@keyframes sci-settle {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* The non-example is the half that teaches — it marks the boundary of the
 * concept — so it gets the same weight as the example, not a footnote's. */
.sci-eg,
.sci-not {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.sci-eg {
    background: var(--mint2);
    margin-bottom: 0.3rem;
}

.sci-not {
    background: #FFF1ED;
}

.sci-eg-label,
.sci-not-label {
    font-family: var(--jm-font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    flex: none;
    padding-top: 0.15rem;
}

.sci-eg-label {
    color: #0a6a61;
}

.sci-not-label {
    color: #b93e25;
}

.sci-truth-label {
    font-family: var(--jm-font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    color: var(--teal-deep);
}

/* The claim in a trap is FALSE. Unlabelled, a skimming pupil reads it as fact
 * — which is the exact misconception the block exists to correct. */
.sci-trap-label {
    font-family: var(--jm-font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #4A2E00;
    background: var(--gold);
    padding: 0.12rem 0.35rem;
    border-radius: 3px;
    margin-right: 0.45rem;
    vertical-align: 0.08em;
}

.sci-trap[open] .sci-trap-label {
    color: #4A2E00;
}

/* ------------------------------------------------- the unit-wide word sheet
 * Same reveal behaviour as a section page, but on the ordinary light ground:
 * this page IS the testing, so there is no second activity to distinguish it
 * from, and a full page of teal would be unreadable at length.
 *
 * It has to survive being printed, because the night before an assessment a
 * pupil wants it on paper. Print rules below force every reveal open. */

.sci-word {
    border-left: 3px solid var(--color-primary);
    padding: 0.5rem 0 0.5rem 0.85rem;
    margin-bottom: 0.75rem;
}

.sci-word > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-weight: 600;
}

.sci-word > summary::-webkit-details-marker {
    display: none;
}

.sci-word > summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 3px;
}

.sci-word .sci-prompt {
    color: var(--color-text-muted);
}

.sci-word[open] .sci-prompt {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .sci-word[open] .sci-body {
        animation: sci-settle 220ms ease-out;
    }
}

.sci-words .sci-dot {
    border-color: var(--color-border);
}

.sci-words .sci-dot--on {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

@media print {
    /* Opening every reveal for print is done in JS (revise.js), not here: a
     * closed <details> hides its content through a UA shadow slot that no CSS
     * rule reaches. This block only handles how the opened sheet paginates. */
    .sci-word {
        break-inside: avoid;
        border-left-color: #999;
    }

    .sci-words section {
        break-inside: avoid-page;
    }

    .sci-eg,
    .sci-not {
        background: none;
        padding-left: 0;
    }
}

/* ------------------------------------------------ touch targets on the index
 * Measured at 390px: the inline "Check yourself" / "Show the answer" summaries
 * on the section list came out at 22px, half the 44px floor, because they are
 * plain <details> without the classes the section page uses.
 *
 * The section-card action buttons measured 40px. That is the site's standard
 * .btn-sm height everywhere, so it is raised HERE rather than globally — this
 * page is read on a phone by 13-year-olds, which the rest of the site is not.
 * If .btn-sm should change site-wide that is a separate, deliberate decision. */

.sci-inline-check > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

@media (max-width: 576px) {
    /* Every control on this page, not just the section actions: the older
     * whole-unit cards measured 40px too, and they sit on the same page for
     * the same readers. Scoped to this page rather than to .btn-sm globally. */
    .sci-resources .btn,
    .sci-words .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}