/* Year 9 Science — one section, laid out as four steps.
 *
 *   header (pinned)  ->  set-by banner  ->  title  ->  objectives
 *   1 Read  ->  2 Watch  ->  3 Play  ->  4 Check
 *
 * Loaded after science-unit.css, which owns the unit band, the side menu and
 * the strand colours. This file owns what is inside a section. Colours are the
 * site's tokens (theme.css) and tints of them made with color-mix(), the way
 * science-unit.css does; there is no raw hex here. The variety is deliberate:
 * ink, deep teal, teal, cyan, gold, tangerine, mint, cream and paper all carry
 * a job (read = teal, watch = cyan, play = gold, check = tangerine).
 *
 * Wide screens: everything inside a section is capped at --sci-wide and
 * centred, so a 2400px screen is not left-aligned with a void on the right.
 */

.sci-unit {
    --sci-cyan-soft: color-mix(in srgb, var(--cyan) 14%, var(--paper));
    --sci-cyan-ink: color-mix(in srgb, var(--cyan) 38%, var(--ink));
    --sci-gold-soft: color-mix(in srgb, var(--gold) 14%, var(--paper));
    --sci-gold-line: color-mix(in srgb, var(--gold) 40%, var(--paper));
    --sci-gold-ink: color-mix(in srgb, var(--gold) 45%, var(--ink));
    --sci-peach: color-mix(in srgb, var(--tangerine) 12%, var(--paper));
    --sci-peach-line: color-mix(in srgb, var(--tangerine) 35%, var(--paper));
    --sci-tang-ink: color-mix(in srgb, var(--tangerine) 60%, var(--ink));
    --sci-wide: 1500px;
    --sci-fade: var(--cream);
    /* Where a step lands when a pill or the menu jumps to it: below the site
       bar, the unit band, the phone tile strip and this section's own header. */
    --sci-step-top: calc(var(--sci-bars) + var(--sci-sechead-h) + 10px);
}

@media (min-width: 2000px) {
    .sci-unit { --sci-pad: clamp(90px, 8vw, 220px); }
}
@media (max-width: 699.98px) {
    .sci-unit { --sci-pad: 16px; --sci-sechead-h: 104px; }
}

.sci-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.sci-unit [hidden] { display: none !important; }

/* Everything in a section sits in one capped, centred column. */
.sci-sec > :not(.sci-sechead) {
    width: 100%;
    max-width: var(--sci-wide);
    margin-inline: auto;
}

/* --------------------------------------------------- the section's own header */

.sci-sechead {
    position: sticky;
    top: var(--sci-bars);
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    min-height: var(--sci-sechead-h);
    margin-inline: calc(-1 * var(--sci-pad));
    padding: 4px calc(var(--sci-pad) + max(0px, (100% - var(--sci-wide)) / 2));
    background: color-mix(in srgb, var(--cream) 94%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.sci-sechead-num {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--cyan);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.25;
}
.sci-sechead-title {
    flex: 1 1 180px;
    min-width: 0;
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
}

.sci-setbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}
.sci-setbtn:hover { background: var(--teal-deep); }
.sci-setbtn small { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.75; }
.sci-setbtn--quiz { background: var(--sci-peach); color: var(--sci-tang-ink); text-decoration: none; }
.sci-setbtn--quiz:hover { background: var(--sci-peach-line); color: var(--sci-tang-ink); }

.sci-steps { display: flex; gap: 4px; align-items: center; }
.sci-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}
.sci-pill:hover { border-color: var(--teal); color: var(--ink); }
.sci-pill.is-done { border-color: var(--teal); background: var(--mint); color: var(--teal-deep); }
.sci-pill-quiz { display: none !important; }
.sci-pill-tick { display: none; }
.sci-pill.is-done .sci-pill-tick {
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--teal-deep);
    color: var(--paper);
    font-size: 0.52rem;
}

@media (max-width: 1359.98px) {
    .sci-setbtn small { display: none; }
}
/* builder.css gives every <main> overflow-x hidden below 576px, which makes it
   the scroll container: the bar cannot pin there, and "sticky" instead pushed
   it 132px down, over the title of the first section on a page. On a phone it
   stays in the flow. (The phone layout preview pins it its own way.) */
@media (max-width: 576px) {
    .sci-unit:not(.sci-phone) .sci-sechead { position: static; }
}
@media (max-width: 699.98px) {
    .sci-sechead { gap: 6px 10px; padding-top: 8px; padding-bottom: 8px; }
    .sci-sechead-title {
        flex-basis: 0;
        overflow: hidden;
        font-size: 1rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .sci-setbtn { width: 44px; padding: 0; justify-content: center; }
    .sci-setbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .sci-steps { flex: 1 0 100%; }
    /* Words, not icons, on a phone: "Quiz me" as a bare bolt was too easy to miss. */
    .sci-pill { flex: 1 1 0; gap: 5px; padding: 0 4px; font-size: 0.8rem; white-space: nowrap; }
    .sci-pill > i { display: none; }
}

/* ------------------------------------------------------- set by your teacher */

.sci-setby {
    margin-top: 28px;
    padding: 16px 20px;
    border: 2px solid var(--sci-peach-line);
    border-left: 6px solid var(--tangerine);
    border-radius: 16px;
    background: var(--sci-peach);
    font-size: 0.95rem;
    line-height: 1.5;
}
.sci-setby.is-done { border-color: var(--teal); border-left-color: var(--teal); background: var(--mint); }
.sci-setby p { margin: 0; }
.sci-setby-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.sci-setby-tag {
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--tangerine);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sci-setby.is-done .sci-setby-tag { background: var(--teal); }
.sci-setby-state { font-weight: 800; color: var(--sci-tang-ink); }
.sci-setby.is-done .sci-setby-state { color: var(--teal-deep); }
.sci-setby-quiz { margin-top: 6px !important; font-weight: 700; }
.sci-setby-more { margin-top: 8px; }
.sci-setby-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--teal-deep); }
.sci-setby-text { padding: 0 0 6px; white-space: pre-line; overflow-wrap: anywhere; }

/* --------------------------------------------------------------- objectives */

.sci-goals {
    margin-top: 22px;
    padding: 24px 28px;
    border: 2px solid var(--ink);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: 6px 6px 0 var(--mint2);
}
.sci-goals-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.sci-goals-ic {
    flex: 0 0 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--ink);
    color: var(--paper);
    font-size: 1.15rem;
}
.sci-goals h3 { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.sci-goals-head span:not(.sci-goals-ic) { font-size: 0.86rem; color: var(--muted); }
.sci-goals-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 12px 36px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: g;
}
.sci-goals-list li {
    position: relative;
    padding-left: 40px;
    font-size: 0.98rem;
    line-height: 1.5;
    counter-increment: g;
}
.sci-goals-list li::before {
    content: counter(g);
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mint);
    color: var(--teal-deep);
    font-size: 0.85rem;
    font-weight: 800;
}
.sci-js .sci-goals:not(.is-open) .sci-goal-extra { display: none; }
.sci-goals-more {
    display: none;
    align-items: center;
    min-height: 44px;
    margin-top: 14px;
    padding: 0 20px;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--teal-deep);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}
.sci-js .sci-goals-more { display: inline-flex; }
.sci-goals-more:hover { border-color: var(--teal); }

/* -------------------------------------------------------------------- steps */

.sci-step, .sci-lab { scroll-margin-top: var(--sci-step-top); }
.sci-step { padding: 14px 0 4px; }
.sci-stephead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sci-stepic {
    flex: 0 0 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-size: 1.3rem;
}
.sci-stephead h4 { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
.sci-stephead > div > span { display: block; margin-top: 1px; font-size: 0.8rem; font-weight: 500; line-height: 1.35; color: var(--muted); }
.sci-step-read .sci-stepic { background: var(--teal-deep); color: var(--paper); }
.sci-step-watch .sci-stepic { background: var(--cyan); color: var(--ink); }
.sci-step-play .sci-stepic { background: var(--gold); color: var(--ink); }
.sci-step-check .sci-stepic { background: var(--tangerine); color: var(--ink); }

/* Steps 2-4 of an unread section. The server also sets `inert`, so these stay
   unreachable by keyboard and screen reader; the dimming is only the picture. */
.sci-sec.is-gated [data-sci-gated] {
    opacity: 0.38;
    filter: grayscale(0.6);
    pointer-events: none;
    user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
    .sci-step { transition: opacity 0.25s; }
}

/* ------------------------------------------------------------------- 1 Read */

.sci-readgrid { display: grid; gap: 0; }
.sci-read p:last-child, .sci-read ul:last-child { margin-bottom: 0; }

.sci-key {
    display: flex;
    gap: 12px;
    max-width: 66ch;
    margin: 1rem 0;
    padding: 14px 18px;
    border-left: 4px solid var(--gold);
    border-radius: 12px;
    background: var(--sci-gold-soft);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}
.sci-key > i { margin-top: 4px; color: var(--sci-gold-ink); font-size: 1.15rem; }
.sci-key span {
    display: block;
    margin-bottom: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sci-gold-ink);
}
.sci-key p { margin: 0; }

.sci-cards { display: grid; gap: 8px; max-width: 66ch; margin: 1rem 0; }
.sci-card {
    border: 2px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
}
.sci-card summary {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    padding: 14px 18px;
    list-style: none;
    cursor: pointer;
}
.sci-card summary::-webkit-details-marker { display: none; }
.sci-cardic {
    flex: 0 0 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.05rem;
}
.sci-cardt { flex: 1 1 auto; min-width: 0; font-weight: 700; line-height: 1.3; }
.sci-cardt small { display: block; margin-top: 2px; font-size: 0.84rem; font-weight: 400; color: var(--muted); }
/* A closed card that holds something to do says so, by name. */
.sci-cards .sci-card.has-ix { border-color: var(--tangerine); box-shadow: 0 0 0 3px var(--sci-peach); }
.sci-card .sci-cardt small.sci-cardtry { margin-top: 5px; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.sci-card .sci-cardtry i { margin-right: 4px; color: var(--tangerine); }
.sci-chev {
    flex: 0 0 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mint);
    color: var(--teal-deep);
    transition: transform 0.18s;
}
.sci-card[open] .sci-chev { transform: rotate(180deg); }
.sci-cardbody { padding: 0 20px 18px 74px; font-size: 0.96rem; }
.sci-cardbody.sci-notes p:last-child { margin-bottom: 0; }
.sci-card-flat { padding: 14px 18px 4px; }
.sci-card-flat .sci-h3 { margin-top: 0; }

.sci-card-why .sci-cardic { background: var(--mint); color: var(--teal-deep); }
.sci-card-watch { border-color: var(--sci-peach-line); }
.sci-card-watch .sci-cardic { background: var(--sci-peach); color: var(--sci-tang-ink); }
.sci-card-words .sci-cardic { background: var(--sci-cyan-soft); color: var(--sci-cyan-ink); }
.sci-card summary:focus-visible { outline-offset: -3px; }

.sci-readbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    margin-top: 30px;
    padding: 18px 22px;
    border: 2px solid var(--ink);
    border-radius: 18px;
    background: var(--paper);
    box-shadow: 6px 6px 0 var(--mint2);
}
.sci-readbar p { flex: 1 1 280px; margin: 0; line-height: 1.45; }
.sci-readbar p b { display: block; font-size: 1.05rem; }
.sci-readbar p span { font-size: 0.9rem; color: var(--muted); }
.sci-readbar .sci-readbar-msg { flex-basis: 100%; font-size: 0.9rem; font-weight: 600; color: var(--sci-tang-ink); }
.sci-btn-read {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 26px;
    border: 2px solid var(--teal-deep);
    border-radius: 999px;
    background: var(--teal-deep);
    color: var(--paper);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
.sci-btn-read:hover { background: var(--ink); border-color: var(--ink); }
.sci-btn-read:disabled { opacity: 0.6; cursor: progress; }
.sci-readbar.is-done { border-color: var(--teal); background: var(--mint); box-shadow: none; }
.sci-readbar.is-done .sci-btn-read { border-color: var(--teal); background: var(--paper); color: var(--teal-deep); }

.sci-lockmsg {
    display: none;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
    padding: 14px 18px;
    border: 2px dashed var(--gold);
    border-radius: 14px;
    background: var(--sci-gold-soft);
    font-weight: 600;
    line-height: 1.5;
}
.sci-sec.is-gated .sci-lockmsg { display: flex; }

@media (min-width: 1500px) {
    .sci-readgrid {
        grid-template-columns: minmax(0, 66ch) minmax(360px, 1fr);
        gap: clamp(40px, 4vw, 80px);
        align-items: start;
    }
    .sci-cards {
        max-width: none;
        margin-top: 0;
        position: sticky;
        top: calc(var(--sci-step-top) + 10px);
    }
}
@media (max-width: 559.98px) {
    .sci-cardbody { padding-left: 20px; }
    .sci-card summary { padding: 12px 14px; gap: 12px; }
    .sci-goals { padding: 20px 18px; }
    .sci-key { padding: 18px; gap: 12px; }
}

/* ----------------------------------------------------------------- 2 Watch */

.sci-vidcol { min-width: 0; }
.sci-vtabs, .sci-langs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.sci-vtab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}
.sci-vtab:hover { border-color: var(--teal); }
.sci-vtab small { font-weight: 600; opacity: 0.75; }
.sci-vtab.is-on { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.sci-vidrow { position: relative; min-width: 0; }
.sci-vids {
    display: flex;
    gap: 20px;
    padding: 4px 4px 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.sci-vidrow.has-more::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 16px;
    width: 64px;
    background: linear-gradient(90deg, transparent, var(--sci-fade));
    pointer-events: none;
}
.sci-scrollhint {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 2px 0 0;
    font-size: 0.84rem;
    color: var(--muted);
}
.sci-vidrow.has-more + .sci-scrollhint { display: flex; }

.sci-vid {
    flex: 0 0 270px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
    scroll-snap-align: start;
}
.sci-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.sci-thumb img, .sci-thumb iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.sci-thumb iframe { position: absolute; inset: 0; }
.sci-vid.is-watched .sci-thumb img { opacity: 0.55; }
.sci-play { position: absolute; inset: 0; display: block; }
.sci-play-btn {
    position: absolute;
    inset: 0;
    width: 58px;
    height: 42px;
    margin: auto;
    border-radius: 12px;
    background: var(--tangerine);
}
.sci-play-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent var(--ink);
}
.sci-play:hover .sci-play-btn { background: color-mix(in srgb, var(--tangerine) 86%, var(--paper)); }
.sci-flag {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.3;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 40%, transparent);
}
.sci-flag-fr { background: var(--ink); color: var(--paper); }
.sci-flag-other { background: var(--gold); color: var(--ink); }
.sci-seen {
    position: absolute;
    top: 10px;
    left: 10px;
    display: none;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--teal-deep);
    color: var(--paper);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.4;
}
.sci-vid.is-watched .sci-seen { display: inline-flex; }
.sci-vid.is-playing .sci-flag, .sci-vid.is-playing .sci-seen { display: none; }
.sci-vmeta { flex: 1 1 auto; padding: 13px 15px 6px; font-size: 0.93rem; font-weight: 600; line-height: 1.4; }
.sci-vmeta .sci-lvl { margin: 0 0 6px; }
.sci-vtitle { display: block; }
.sci-vmeta small { display: block; margin-top: 3px; font-weight: 400; color: var(--muted); }
.sci-vwatch {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    margin: 6px 12px 12px;
    padding: 8px 12px;
    border: 2px solid var(--line);
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.sci-vwatch input { width: 20px; height: 20px; margin: 0; accent-color: var(--teal-deep); }
.sci-vwatch:has(:checked) { border-color: var(--teal); background: var(--mint); color: var(--teal-deep); }
.sci-vwatch.is-error { border-color: var(--tangerine); background: var(--sci-peach); color: var(--sci-tang-ink); }

.sci-otherlang {
    --sci-fade: var(--paper);
    margin-top: 22px;
    border: 2px dashed var(--line);
    border-radius: 16px;
    background: var(--paper);
}
.sci-otherlang summary {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    padding: 14px 18px;
    list-style: none;
    cursor: pointer;
}
.sci-otherlang summary::-webkit-details-marker { display: none; }
.sci-otherlang .sci-cardic { background: var(--sci-gold-soft); color: var(--sci-gold-ink); }
.sci-otherlang .sci-chev { background: var(--cream); color: var(--muted); }
.sci-otherlang[open] .sci-chev { transform: rotate(180deg); }
.sci-otherbody { padding: 0 18px 18px; }
.sci-caveat {
    max-width: 80ch;
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 5px solid var(--gold);
    border-radius: 10px;
    background: var(--sci-gold-soft);
    font-size: 0.93rem;
    line-height: 1.55;
}
.sci-langs { margin-bottom: 14px; }
.sci-langchip { min-height: 44px; padding: 0 16px; font-size: 0.86rem; }
.sci-langchip.is-on { border-color: var(--gold); background: var(--gold); color: var(--ink); }

/* ------------------------------------------------------------------ 3 Play */

.sci-playcard {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    margin-bottom: 22px;
    overflow: hidden;
    border: 2px solid var(--gold);
    border-radius: 20px;
    background: var(--paper);
}
.sci-playcard:not(:has(.sci-ask)) { grid-template-columns: minmax(0, 1fr); }
.sci-playdo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 22px; padding: 24px 26px; }
.sci-ask { padding: 24px 26px; background: var(--sci-gold-soft); }
.sci-playcard h5 {
    margin: 0 0 10px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sci-gold-ink);
}
.sci-shot { flex: 0 1 230px; min-width: 0; }
.sci-dotext { flex: 1 1 220px; min-width: 0; }
.sci-simshot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 394;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--sci-gold-soft);
}
.sci-cap { margin: 8px 0 12px; font-size: 0.8rem; line-height: 1.4; color: var(--muted); }
.sci-btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    margin-top: 6px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.sci-cap + .sci-btn-gold { margin-top: 0; }
.sci-btn-gold:hover { background: color-mix(in srgb, var(--gold) 86%, var(--paper)); color: var(--ink); }
.sci-simname { margin: 0 0 4px; font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
.sci-goal { margin: 0 0 16px; font-size: 0.96rem; color: var(--muted); }
.sci-screen { margin: -6px 0 14px; font-size: 0.9rem; }
.sci-todo { margin: 0; padding: 0; list-style: none; counter-reset: n; }
.sci-todo li {
    display: flex;
    gap: 12px;
    margin-bottom: 11px;
    font-size: 0.96rem;
    line-height: 1.5;
    counter-increment: n;
}
.sci-todo li::before {
    content: counter(n);
    flex: 0 0 26px;
    height: 26px;
    margin-top: 2px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gold);
    font-size: 0.8rem;
    font-weight: 800;
}
.sci-ask details {
    margin-bottom: 10px;
    border: 1px solid var(--sci-gold-line);
    border-radius: 12px;
    background: var(--paper);
}
.sci-ask summary { min-height: 44px; padding: 10px 14px; font-size: 0.95rem; font-weight: 600; line-height: 1.45; cursor: pointer; }
.sci-ask details p { margin: 0; padding: 0 14px 13px; font-size: 0.93rem; font-weight: 500; color: var(--teal-deep); }

.sci-also { position: relative; max-width: 440px; margin-top: 8px; }
.sci-also.has-tag { margin-top: 34px; }
.sci-alsotag {
    position: absolute;
    top: -12px;
    left: 18px;
    z-index: 2;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 1000px) {
    .sci-playcard { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559.98px) {
    .sci-playdo, .sci-ask { padding: 18px; }
}

/* ----------------------------------------------------------------- 4 Check */

.sci-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; gap: 18px; }
.sci-chk {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
    border: 2px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
}
.sci-chk > b { font-size: 1.1rem; }
.sci-chk > p { margin: 0 0 6px; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.sci-chk-ic { font-size: 1.5rem; }
.sci-chk-q { border-color: var(--sci-peach-line); background: var(--sci-peach); }
.sci-chk-q .sci-chk-ic { color: var(--tangerine); }
.sci-chk-e .sci-chk-ic { color: var(--sci-gold-ink); }
.sci-chk-u .sci-chk-ic { color: var(--teal-deep); }
.sci-chk-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sci-chk .sx { margin: 0; }
.sci-chk .sci-note { margin: 4px 0 0; }
.sci-chk-u .sci-got { align-self: flex-start; }
.sci-score { font-weight: 700; color: var(--sci-tang-ink); }
.sci-owns { display: flex; flex-wrap: wrap; gap: 10px; }
.sci-owns .sci-own { max-width: 420px; }

.sci-sec .sci-links {
    margin-top: 40px;
    padding: 16px 20px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    font-size: 0.9rem;
}
.sci-sec .sci-links:empty { display: none; }
.sci-sec .sci-locked-note { margin-top: 34px; }

/* A video this reader may not play: the card and its title stay, the frame
 * says how (accounts/templatetags/usage_tags.py, coffee_ask). */
.sci-vlock {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.35rem;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: inherit;
    background: var(--ink);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: var(--paper);
}
.sci-vlock-note { margin: 0.5rem 0 0; font-size: 0.9rem; }

/* Worksheets on a section page: one compact strip at the top of Read, each a
   link straight to the PDF, the answer sheet beside the worksheet it marks. */
.sci-sheets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 1.2rem; }
.sci-sheets-h { margin-right: 4px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sci-sheets-h i { color: var(--tangerine); }
.sci-sheet { display: inline-flex; align-items: stretch; min-width: 0; max-width: 100%; }
.sci-sheet-main, .sci-sheet-ans {
    display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px;
    border: 2px solid var(--line); background: var(--paper); color: var(--ink);
    font-size: 0.92rem; font-weight: 700; line-height: 1.25; text-decoration: none;
}
.sci-sheet-main { min-width: 0; border-radius: 999px; }
.sci-sheet-main:has(+ .sci-sheet-ans) { border-radius: 999px 0 0 999px; }
.sci-sheet-ans { margin-left: -2px; border-radius: 0 999px 999px 0; color: var(--teal-deep); font-size: 0.85rem; }
.sci-sheet-main:hover, .sci-sheet-ans:hover { position: relative; border-color: var(--teal-deep); text-decoration: none; }

/* -------------------------------- Compact Target Banner */
.sci-goals {
    max-width: 100%;
    margin: 0.8rem 0 1.25rem;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--strand);
    background: var(--paper);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.sci-target-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 0.92rem;
    line-height: 1.4;
}
.sci-target-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    color: var(--strand-ink);
    white-space: nowrap;
}
.sci-target-text {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--ink);
}
.sci-target-more {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
}
.sci-goals .sci-goals-more {
    margin: 0;
    min-height: 28px;
    padding: 2px 10px;
    font-size: 0.78rem;
}
.sci-goals:not(.is-open) .sci-goals-list,
.sci-goals:not(.is-open) .mc-goals-list {
    display: none !important;
}
.sci-goals.is-open .sci-goals-list,
.sci-goals.is-open .mc-goals-list {
    display: grid;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

/* -------------------------------- High-Contrast Inline Callouts */
div.sci-card-watch,
div.sci-card-words,
.sci-card.sci-card-callout {
    border-width: 2px;
    border-radius: 14px;
    margin: 1.25rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
div.sci-card-watch,
.sci-card-watch.sci-card-callout {
    border-color: var(--tangerine);
    background: color-mix(in srgb, var(--sci-peach) 35%, var(--paper));
}
div.sci-card-words,
.sci-card-words.sci-card-callout {
    border-color: var(--teal);
    background: color-mix(in srgb, var(--sci-cyan-soft) 35%, var(--paper));
}
.sci-cardhead {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
}
.sci-cardhead .sci-cardic {
    flex: 0 0 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 1rem;
}
.sci-cardhead .sci-cardt b {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
}
.sci-cardhead .sci-cardt small {
    display: block;
    margin-top: 2px;
    font-size: 0.82rem;
    color: var(--muted);
}
div.sci-card-watch .sci-cardbody,
div.sci-card-words .sci-cardbody,
.sci-card.sci-card-callout .sci-cardbody {
    padding: 14px 18px 16px;
}

/* -------------------------------- Step & Pill Icons Cleanup */
.sci-step-read .sci-stepic,
.sci-step-watch .sci-stepic,
.sci-step-play .sci-stepic {
    display: none !important;
}
.sci-pill-read > i:not(.fa-check),
.sci-pill-watch > i:not(.fa-check),
.sci-pill-play > i {
    display: none !important;
}

/* -------------------------------- Dual-Column Practice Rail (>= 1200px) */
@media (min-width: 1200px) {
    .sci-split-layout {
        display: grid;
        grid-template-columns: 62% 38%;
        gap: 24px;
        align-items: start;
        width: 100%;
        max-width: var(--sci-wide, 1440px);
        margin-inline: auto;
    }
    .sci-narrative-col {
        min-width: 0;
        grid-column: 1;
        grid-row: 1;
    }
    .sci-practice-col {
        min-width: 0;
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: calc(var(--sci-bars, 50px) + var(--sci-sechead-h, 36px) + 12px);
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-height: calc(100vh - var(--sci-bars, 50px) - var(--sci-sechead-h, 36px) - 24px);
        overflow-y: auto;
        padding-right: 6px;
    }
    .sci-practice-col .sci-step {
        margin: 0;
        padding: 0;
    }
    .sci-practice-col .sci-step-check {
        order: 1;
    }
    .sci-practice-col .sci-sheets-rail {
        order: 2;
        padding: 14px 18px;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 14px;
        margin-bottom: 0;
    }
    .sci-practice-col .sci-step-play {
        order: 3;
    }
    .sci-practice-col .sci-checks {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .sci-practice-col .sci-chk {
        padding: 14px 16px;
        border-radius: 14px;
    }
    .sci-practice-col .mc-quizcard {
        margin: 0;
    }
    .sci-narrative-col .sci-readgrid {
        display: block;
    }
    .sci-narrative-col .sci-read {
        max-width: 100%;
    }
    .sci-narrative-col .sci-cards {
        max-width: 100%;
        position: static;
    }
}
@media (max-width: 1199.98px) {
    .sci-split-layout {
        display: flex;
        flex-direction: column;
    }
    .sci-narrative-col {
        order: 1;
        width: 100%;
    }
    .sci-practice-col {
        order: 2;
        width: 100%;
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .sci-practice-col .sci-step-check {
        order: 1;
    }
    .sci-practice-col .sci-sheets-rail {
        order: 2;
    }
    .sci-practice-col .sci-step-play {
        order: 3;
    }
}