/* Year 9 Science — the student home.
 *
 * One pinned unit header under the site bar, a sticky menu of the eight
 * booklet sections drawn as element tiles (grouped by strand), and each
 * section as a two-column block: reading on the left, a narrow media column on
 * the right. Colours are the site's house tokens (theme.css); the four strands
 * are tints of them, the way a periodic table colours its categories.
 *
 * Complete without JavaScript: sections are plain blocks, overlays are
 * `hidden`, and the "I understand this" pill only appears once unit-nav.js has
 * marked the page `.sci-js`. */

.sci-unit {
    --sci-site-h: calc(var(--jm-navbar-height, 56px) + 3px);
    --sci-head-h: 48px;
    --sci-strip-h: 0px;
    --sci-top: var(--sci-site-h);
    --sci-menu-w: 260px;
    --sci-sechead-h: 36px;
    --sci-bars: calc(var(--sci-top) + var(--sci-head-h) + var(--sci-strip-h));
    --sci-pad: clamp(14px, 2.5vw, 36px);
    --strand: var(--teal);
    --strand-soft: color-mix(in srgb, var(--teal) 13%, var(--paper));
    --strand-ink: var(--teal-deep);
    --strand-on: var(--ink);
    margin-top: -1rem;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--cream);
}

.sci-unit h1, .sci-unit h2, .sci-unit h3, .sci-unit p, .sci-unit small,
.sci-unit summary, .sci-unit button, .sci-unit a { font-family: inherit; }

.sci-unit :focus-visible {
    outline: 3px solid var(--teal-deep);
    outline-offset: 2px;
    border-radius: 6px;
}

.sci-strand-matter { --strand: var(--teal); --strand-ink: var(--teal-deep); }
.sci-strand-atom { --strand: var(--cyan); --strand-ink: color-mix(in srgb, var(--cyan) 38%, var(--ink)); }
.sci-strand-table { --strand: var(--gold); --strand-ink: color-mix(in srgb, var(--gold) 45%, var(--ink)); }
.sci-strand-change { --strand: var(--tangerine); --strand-ink: color-mix(in srgb, var(--tangerine) 60%, var(--ink)); }
.sci-strand-matter, .sci-strand-atom, .sci-strand-table, .sci-strand-change {
    --strand-soft: color-mix(in srgb, var(--strand) 14%, var(--paper));
}

@media (max-width: 767.98px) {
    .sci-unit { margin-top: -0.5rem; }
}

/* Below 992px the site bar slides away on scroll-down (class set at every
   width, but it only hides below 992). */
@media (max-width: 991.98px) {
    body:has(.jm-chrome-hidden) .sci-unit { --sci-top: 0px; }
}

/* ---------------------------------------------------------------- header */

.sci-head {
    position: sticky;
    top: var(--sci-top);
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    min-height: var(--sci-head-h);
    padding: 6px clamp(16px, 2.5vw, 36px);
    background: var(--ink);
    color: var(--cream);
}
.sci-head-title { min-width: 0; flex: 1 1 auto; }
.sci-eyebrow {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--mint2);
}
.sci-head h1 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--paper);
}
.sci-head-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 16px;
    margin-left: auto;
}
.sci-meters { display: flex; gap: 14px; }
.sci-meter { min-width: 90px; }
.sci-meter p { margin: 0 0 3px; font-size: 0.74rem; line-height: 1.2; color: var(--mint2); }
.sci-meter b { color: var(--paper); font-weight: 700; }

.sci-bar {
    display: block;
    width: 100%;
    height: 4px;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
    background: color-mix(in srgb, var(--paper) 18%, transparent);
}
.sci-bar::-webkit-progress-bar { background: color-mix(in srgb, var(--paper) 18%, transparent); }
.sci-bar-read::-webkit-progress-value { background: var(--teal); border-radius: 4px; }
.sci-bar-read::-moz-progress-bar { background: var(--teal); border-radius: 4px; }
.sci-bar-quiz::-webkit-progress-value { background: var(--gold); border-radius: 4px; }
.sci-bar-quiz::-moz-progress-bar { background: var(--gold); border-radius: 4px; }

.sci-signin {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--mint2);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sci-signin:hover { color: var(--paper); }

.sci-lang { display: inline-flex; border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent); border-radius: 999px; overflow: hidden; }
.sci-lang a {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--mint2);
    text-decoration: none;
}
.sci-lang a:hover { background: color-mix(in srgb, var(--paper) 14%, transparent); }
.sci-lang a[aria-current] { background: var(--paper); color: var(--ink); }
.sci-head :focus-visible { outline-color: var(--mint2); }

/* ------------------------------------------------------------ shared pills */

.sci-btn-quiz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background: var(--tangerine);
    color: var(--ink);
    box-shadow: 0 10px 22px -14px var(--tangerine);
}
.sci-btn-quiz:hover { background: color-mix(in srgb, var(--tangerine) 86%, var(--paper)); color: var(--ink); }
/* Test yourself sits under the quiz chips: an outline pill, so it reads as the
   open-ended one beside the five-question chips. */
.sci-chk-test { margin-top: 10px; }
.sci-btn-quiz--test {
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: none;
}
.sci-btn-quiz--test:hover { background: var(--mint); }
.sci-quiz-all { min-height: 40px; padding: 8px 18px; font-size: 0.9rem; white-space: nowrap; }

/* ----------------------------------------------------------------- layout */

.sci-shell {
    display: grid;
    grid-template-columns: var(--sci-menu-w) minmax(0, 1fr);
    align-items: start;
}

/* ------------------------------------------------------------------- menu */

.sci-menu {
    position: sticky;
    top: calc(var(--sci-top) + var(--sci-head-h));
    height: calc(100vh - var(--sci-top) - var(--sci-head-h));
    overflow-y: auto;
    padding: 14px 10px 30px;
    background: var(--paper);
    border-right: 1px solid var(--line);
}
.sci-strand { margin-bottom: 16px; }
.sci-strand-name {
    margin: 0 6px 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--strand-ink);
}
.sci-strand-more .sci-strand-name { color: var(--muted); margin-top: 6px; }

.sci-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 3px;
    padding: 5px 8px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.25;
}
.sci-item:hover { background: var(--strand-soft); color: var(--ink); }
.sci-item.is-on { background: var(--strand-soft); box-shadow: inset 3px 0 0 var(--strand); }

.sci-tile {
    position: relative;
    flex: 0 0 34px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--strand-soft);
}
.sci-tile i {
    display: none;
}
.sci-tile b {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
    color: var(--strand-ink);
    letter-spacing: -0.02em;
    text-align: center;
}
.sci-item.is-current .sci-tile { background: var(--strand); }
.sci-item.is-current .sci-tile b { color: var(--strand-on); }
.sci-item.is-locked .sci-tile { opacity: 0.55; }
.sci-item.is-understood .sci-tile::after {
    content: "\2713";
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    border: 2px solid var(--paper);
    border-radius: 50%;
    background: var(--teal-deep);
    color: var(--paper);
    font-size: 0.58rem;
    font-weight: 700;
}
.sci-item-text { display: flex; flex-direction: column; min-width: 0; }
.sci-item-title { font-size: 0.84rem; font-weight: 600; line-height: 1.25; }
.sci-item-text small { margin-top: 1px; font-size: 0.72rem; color: var(--muted); }
.sci-item.is-locked .sci-item-title { color: var(--muted); }

/* A section's lab page, listed under that section in the side menu. */
.sci-sublink {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: -1px 0 4px 18px;
    padding: 4px 8px;
    border-left: 2px solid var(--tangerine);
    border-radius: 0 8px 8px 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    text-decoration: none;
}
.sci-sublink i { font-size: 0.75rem; color: var(--tangerine); }
a.sci-sublink:hover { background: var(--mint); color: var(--ink); }

.sci-plain {
    display: block;
    margin-bottom: 2px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--teal-deep);
    text-decoration: none;
}
a.sci-plain:hover { background: var(--mint); }
.sci-plain small { display: block; font-weight: 400; font-size: 0.72rem; }
.sci-plain.is-soon { color: var(--muted); font-weight: 500; cursor: default; opacity: 0.85; }
.sci-plain-whole { margin: 0; }
.sci-strand-home { margin-bottom: 14px; }

.sci-menu-quiz {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 6px;
    padding: 6px 10px;
    min-height: 32px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
    white-space: normal;
    text-align: center;
}

/* ------------------------------------------------------------------- main */

.sci-main { min-width: 0; padding: 0 var(--sci-pad) 48px; }

.sci-sec {
    padding: 0 0 28px;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: calc(var(--sci-top) + var(--sci-head-h) + var(--sci-strip-h) + 6px);
}
.sci-code {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--strand-ink);
}
.sci-here {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--strand);
    color: var(--ink);
    letter-spacing: 0.04em;
}
.sci-sec-head { padding-top: 14px; }
.sci-sec h2 {
    margin: 4px 0 0;
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.sci-sub { margin: 4px 0 0; font-size: 0.95rem; color: var(--muted); }
.sci-read { max-width: 66ch; min-width: 0; }
.sci-notes p { margin: 0 0 0.9rem; }
.sci-notes ul { margin: 0 0 0.9rem; padding-left: 1.2rem; }
.sci-notes li { margin-bottom: 0.35rem; }
.sci-notes strong { font-weight: 700; }

.sci-h3 {
    margin: 1.6rem 0 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--muted);
}

/* tables inside the notes */
.sci-table-wrap { margin: 0 0 1.5rem; overflow-x: auto; }
.sci-notes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.5;
    background: var(--paper);
}
.sci-notes-table caption {
    padding: 0 0 8px;
    caption-side: top;
    text-align: left;
    font-weight: 600;
    color: var(--teal-deep);
}
.sci-notes-table th, .sci-notes-table td {
    padding: 9px 12px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.sci-notes-table thead th { background: var(--mint); color: var(--teal-deep); font-weight: 700; }
.sci-notes-table tbody th { font-weight: 600; background: var(--cream); }

/* atomic notation: mass number over atomic number, left of the symbol */
.sci-notation { margin: 0 0 1.5rem; display: flex; align-items: center; gap: 18px; }
.sci-notation figcaption { font-size: 0.95rem; color: var(--muted); line-height: 1.5; }
.sci-atom {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    flex: none;
    padding: 8px 18px 8px 12px;
    border-radius: 14px;
    background: var(--strand-soft);
    color: var(--ink);
    line-height: 1;
}
.sci-atom-nums {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    margin-right: 5px;
    font-size: 1rem;
    font-weight: 600;
}
.sci-atom-nums span { display: block; line-height: 1.1; }
.sci-atom-sym { align-self: center; font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em; }
.sci-atom-q { position: absolute; top: 6px; right: 6px; font-size: 1rem; font-weight: 700; }

.sci-words { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.sci-words li {
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--mint);
    color: var(--teal-deep);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
}

/* actions and links */
.sci-got {
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 20px;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}
.sci-js .sci-got { display: inline-flex; }
.sci-got:has(:checked) { border-color: var(--teal); background: var(--mint); }
.sci-got input { width: 20px; height: 20px; margin: 0; accent-color: var(--teal-deep); }
.sci-score { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.sci-score:empty { display: none; }
.sci-note, .sci-locked-note { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--muted); }
.sci-locked-note { padding: 12px 16px; border: 1px dashed var(--line); border-radius: 12px; font-weight: 600; }

.sci-links { margin: 1.4rem 0 0; padding: 0; list-style: none; font-size: 0.92rem; line-height: 1.6; }
.sci-links li { margin-bottom: 0.35rem; color: var(--muted); }
.sci-links a { font-weight: 600; color: var(--teal-deep); }


/* -------------------------------------------------------- video level chips */

.sci-lvl {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-transform: uppercase;
    vertical-align: 1px;
    background: var(--mint2);
    color: var(--teal-deep);
}
.sci-lvl-must { background: var(--ink); color: var(--paper); }
.sci-lvl-core { background: var(--teal); color: var(--ink); }
.sci-lvl-concept { background: var(--mint2); color: var(--teal-deep); }
.sci-lvl-extra { background: var(--cream); color: var(--muted); border: 1px solid var(--line); }

.sci-own {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 12px 16px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--tangerine) 12%, var(--paper));
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}
.sci-own small { font-weight: 400; color: var(--muted); white-space: nowrap; }
.sci-own:hover { background: color-mix(in srgb, var(--tangerine) 20%, var(--paper)); color: var(--ink); }
.sci-empty {
    margin: 0;
    padding: 16px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    font-size: 0.92rem;
    color: var(--muted);
}

/* --------------------------------------------------------------- homework */

.sci-homework { margin: 40px 0 0; padding: 22px 26px; border-radius: 18px; background: color-mix(in srgb, var(--tangerine) 12%, var(--paper)); border-left: 6px solid var(--tangerine); }
.sci-homework h2 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 700; }
.sci-homework ul { margin: 0; padding: 0; list-style: none; }
.sci-homework a { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 8px 0; color: var(--ink); text-decoration: none; }
.sci-homework a:hover strong { text-decoration: underline; }
.sci-hw-done { font-size: 0.85rem; font-weight: 700; color: var(--teal-deep); }
.sci-hw-meta { font-size: 0.88rem; color: var(--muted); }

/* ------------------------------------------------------- whole unit, notes */

/* The unit's opening page: its sections, each a link to its own page. */
.sci-seclist { padding-top: 40px; }
.sci-seclist h2 { margin: 0 0 16px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.sci-secrows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sci-secrow {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 68px;
    padding: 10px 18px 10px 12px;
    border: 2px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.3;
    text-decoration: none;
}
.sci-secrow:hover { border-color: var(--strand); background: var(--strand-soft); color: var(--ink); }
.sci-secrow.is-current { border-color: var(--strand); }
.sci-secrow.is-current .sci-tile { background: var(--strand); }
.sci-secrow.is-current .sci-tile b { color: var(--strand-on); }
.sci-secrow.is-locked .sci-tile { opacity: 0.55; }
.sci-secrow.is-locked b { color: var(--muted); }
.sci-secrow-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.sci-secrow-text b { font-size: 1.02rem; font-weight: 700; }
.sci-secrow-text small { margin-top: 2px; font-size: 0.84rem; color: var(--muted); }
.sci-secrow-go { color: var(--muted); }
.sci-secrow:hover .sci-secrow-go { color: var(--ink); }
.sci-plain.is-on { background: var(--mint); color: var(--ink); }

.sci-whole { padding: 64px 0 40px; scroll-margin-top: calc(var(--sci-top) + var(--sci-head-h) + var(--sci-strip-h) + 8px); }
.sci-whole h2, .sci-privacy h2 { margin: 0 0 22px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.sci-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.sci-file { display: flex; flex-direction: column; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.sci-file-disc { align-self: flex-start; margin-bottom: 8px; padding: 2px 10px; border-radius: 999px; background: var(--mint); color: var(--teal-deep); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sci-file h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.sci-file p { flex-grow: 1; margin: 0 0 12px; font-size: 0.85rem; line-height: 1.55; color: var(--muted); }
.sci-file-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.88rem; font-weight: 600; }
.sci-file-links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--teal-deep); }
.sci-onward { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 22px 0 0; font-weight: 600; }
.sci-onward a { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal-deep); }
.sci-story { margin: 26px 0 0; font-weight: 600; }
.sci-story a { color: var(--teal-deep); }

.sci-privacy { display: none !important; }
.sci-forget button {
    min-height: 40px;
    padding: 6px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.sci-forget button:hover { border-color: var(--teal); }

.sci-teacher { display: grid; gap: 16px; margin-top: 40px; font-size: 0.95rem; line-height: 1.5; }
.sci-teacher .sci-order-cell { width: 5.5rem; }
.sci-teacher-top { margin: 16px 0 8px; }
.sci-teacher-top .hw-panel { margin-bottom: 0; }

/* The teaching-dates table: a row per chapter on a desktop; on a phone one
   card per chapter with the two controls a teacher actually touches —
   "we are here" and "open" — as labelled 44px targets, and the dates and
   order below them. No sideways scroll. */
.sci-schedule tr.is-current { background: var(--mint); }
.sci-schedule__radio { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; margin: 0; }
.sci-schedule__radio input { margin: 0; width: 1.15rem; height: 1.15rem; }
@media (max-width: 767.98px) {
    .sci-schedule__table thead { display: none; }
    .sci-schedule__table table, .sci-schedule__table tbody { display: block; }
    .sci-schedule__table tr {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
        align-items: center;
        padding: 10px 8px;
        border: 1px solid var(--line);
        border-radius: 10px;
        margin-bottom: 8px;
        background: var(--paper);
    }
    .sci-schedule__table td { display: block; padding: 0; border: 0; min-width: 0; width: auto; }
    .sci-schedule__table td.sci-schedule__name { flex: 1 1 100%; order: -1; font-weight: 700; font-size: 0.9rem; }
    .sci-schedule__table td.sci-schedule__here,
    .sci-schedule__table td[data-label="Open to students"] { flex: 0 0 auto; }
    .sci-schedule__table td[data-label="Starts"],
    .sci-schedule__table td[data-label="Ends"] { flex: 1 1 38%; }
    .sci-schedule__table td.sci-order-cell { flex: 0 0 5rem; }
    .sci-schedule__table td[data-label="Starts"]::before,
    .sci-schedule__table td[data-label="Ends"]::before,
    .sci-schedule__table td.sci-order-cell::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
    }
    .sci-schedule__radio { min-height: 44px; }
}

/* --------------------------------------------------------------- overlays */

body.sci-lock { overflow: hidden; }
.sci-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: color-mix(in srgb, var(--ink) 62%, transparent);
}
.sci-overlay[hidden] { display: none; }
.sci-overlay-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border-radius: 18px;
    background: var(--paper);
    box-shadow: 0 30px 70px -20px color-mix(in srgb, var(--ink) 70%, transparent);
}
.sci-overlay-quiz { max-width: 760px; height: min(92vh, 780px); }
.sci-overlay-sim { max-width: 1500px; height: 94vh; }
.sci-overlay-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 12px 8px 20px;
    border-bottom: 1px solid var(--line);
}
.sci-overlay-bar h2 { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.sci-overlay-close {
    min-height: 44px;
    padding: 6px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}
.sci-overlay-close:hover { background: var(--teal-deep); }
.sci-overlay-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: var(--paper); }

/* ------------------------------------------------------------- responsive */

/* The side menu becomes a strip of tiles pinned under the header. */
@media (max-width: 1019.98px) {
    .sci-unit { --sci-strip-h: 72px; --sci-head-h: 64px; }
    .sci-shell { grid-template-columns: minmax(0, 1fr); }
    .sci-menu {
        top: calc(var(--sci-top) + var(--sci-head-h));
        z-index: 15;
        display: flex;
        gap: 6px;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 12px 14px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .sci-strand { display: flex; gap: 6px; margin: 0; }
    .sci-strand-home { align-items: center; }
    .sci-strand-home .sci-plain { min-height: 44px; display: flex; align-items: center; white-space: nowrap; }
    /* Lab pages are linked inside their section, so the tile strip leaves them out. */
    .sci-strand-name, .sci-item-text, .sci-strand-more, .sci-sublink { display: none; }
    .sci-item { flex: none; margin: 0; padding: 2px; }
    .sci-item.is-on { box-shadow: none; background: transparent; }
    .sci-item.is-on .sci-tile { outline: 3px solid var(--strand); outline-offset: 1px; }
    .sci-sec { padding: 44px 0 44px; }
    .sci-signin { flex-basis: 100%; text-align: right; }
}

/* On a phone the header scrolls away and the tile strip is the one pinned bar. */
@media (max-width: 699.98px) {
    .sci-unit { --sci-head-h: 0px; }
    .sci-head { position: static; padding: 14px 16px; gap: 10px; }
    .sci-head h1 { font-size: 1.1rem; }
    .sci-head-tools { margin-left: 0; width: 100%; justify-content: flex-start; }
    .sci-meters { width: 100%; }
    .sci-meter { flex: 1 1 0; min-width: 0; }
    .sci-signin { flex-basis: auto; text-align: left; }
    .sci-quiz-all { min-height: 44px; }
    .sci-lang a { min-height: 44px; padding: 0 16px; }
    .sci-menu { top: var(--sci-top); }
    .sci-tile { flex-basis: 44px; height: 44px; }
    .sci-unit { --sci-strip-h: 68px; }
    .sci-sec { scroll-margin-top: calc(var(--sci-top) + var(--sci-strip-h) + 8px); }
    .sci-whole { scroll-margin-top: calc(var(--sci-top) + var(--sci-strip-h) + 8px); }
    .sci-main { padding-left: 16px; padding-right: 16px; }
    .sci-btn-quiz { min-height: 44px; }
    .sci-more a, .sci-links a, .sci-file-links a { min-height: 44px; }
    .sci-more a { display: flex; flex-direction: column; justify-content: center; }
    .sci-links a, .sci-file-links a { display: inline-flex; align-items: center; }
    .sci-overlay { padding: 0; }
    .sci-overlay-card { height: 100%; max-width: none; border-radius: 0; }
    /* One line for the title (it is the button the student just pressed), so
       the bar stays 61px and the frame below keeps the height. */
    .sci-overlay-bar h2 { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .sci-notation { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: no-preference) {
    html:has(.sci-unit) { scroll-behavior: smooth; }
}

@media print {
    .sci-unit { margin-top: 0; background: var(--paper); }
    .sci-head { position: static; background: var(--paper); color: var(--ink); padding: 0 0 12px; }
    .sci-head h1 { color: var(--ink); }
    .sci-eyebrow { color: var(--muted); }
    .sci-head-tools, .sci-menu, .sci-overlay, .sci-sechead, .sci-readbar, .sci-lockmsg,
    .sci-step-watch, .sci-step-play, .sci-checks, .sci-owns, .sci-got, .sci-teacher,
    .sci-forget, .sci-homework { display: none !important; }
    .sci-shell { display: block; }
    .sci-main { padding: 0; }
    .sci-sec { padding: 18pt 0; break-inside: avoid-page; }
}

/* ------------------------------------------------------------------
   Inside the "open me" cards (Why, Watch out, Key words): the definitions and
   the "not this / this" pairs. The cards themselves are in science-unit-steps.css.
   ------------------------------------------------------------------ */
.sci-defs { margin: 0; padding: 4px 0 6px; }
.sci-defs dt {
    margin: 0;
    padding-top: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--teal-deep);
}
.sci-defs dd {
    margin: 2px 0 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
    line-height: 1.55;
}
.sci-defs dt:last-of-type + dd { border-bottom: 0; }
.sci-def-ex { display: block; margin-top: 3px; color: var(--muted); }

.sci-watch-list { margin: 0; padding: 0 0 6px; list-style: none; }
.sci-watch-list li { padding: 12px 0; border-top: 1px solid var(--line); }
.sci-watch-list li:first-child { border-top: 0; }
.sci-watch-list p {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}
.sci-watch-list .sci-truth { margin-top: 6px; }
.sci-tag {
    flex: 0 0 6.4em;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sci-trap .sci-tag { color: color-mix(in srgb, var(--tangerine) 60%, var(--ink)); }
.sci-trap .sci-tag::before { content: "\2715\00a0"; }
.sci-truth .sci-tag { color: var(--teal-deep); }
.sci-truth .sci-tag::before { content: "\2713\00a0"; }
.sci-trap-text { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--muted); }

@media print {
    .sci-chev { display: none; }
    .sci-card, .sci-defs { break-inside: avoid; }
}

/* a pointer to a reference page (e.g. "Acids in this unit"), under the key idea */
.sci-ref { margin: 1rem 0 0; font-size: 0.9688rem; line-height: 1.4; }
.sci-ref a {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-left: 4px solid var(--strand);
    border-radius: 0 8px 8px 0;
    background: var(--strand-soft);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}
.sci-ref a:hover { text-decoration: underline; }
.sci-ref i { color: var(--strand-ink); margin-right: 0.35rem; }