/* Year 9 Science unit page — the "fits on a screen" layout.
 *
 * Everything here is scoped to `.sci-unit.sci-fit`, which unit-fit.js sets.
 * Without that class the page is exactly as science-unit.css draws it.
 *
 *  1. One pinned bar. The site bar slides away on scroll-down at every width
 *     and the dark unit header scrolls with the page, so only the section's
 *     own header stays pinned.
 *  2. One section at a time. The side menu (and any #s-1-2 link) picks it.
 *  3. The side menu can fold to its tiles, and the reading column lets an
 *     interactive use the width.
 *  4. An interactive fits in the window: for the formula explorer, the
 *     formulae to pick sit on top and typing your own folds away. */

/* ------------------------------------------------------ 1 · one pinned bar */

@media (min-width: 992px) {
    body:has(.sci-unit.sci-fit) .jm-top-chrome { transition: transform 0.22s ease; }
    body:has(.sci-unit.sci-fit) .jm-top-chrome.jm-chrome-hidden { transform: translateY(-100%); }
    body:has(.jm-chrome-hidden) .sci-unit.sci-fit { --sci-top: 0px; }
}
@media (min-width: 700px) {
    /* unit-nav.js writes the measured header height inline while the header
       is pinned; here it never is. */
    .sci-unit.sci-fit { --sci-head-h: 0px !important; }
    .sci-unit.sci-fit .sci-head { position: static; }
}
@media (prefers-reduced-motion: reduce) {
    body:has(.sci-unit.sci-fit) .jm-top-chrome { transition: none; }
}

/* --------------------------------- 2 · the foot of a page: previous and next */

/* For every layout: each section is its own page (the server's doing).
   `.sci-one` is set with `.sci-fit` or `.sci-phone` (science-unit-phone.css). */
.sci-one .sci-sec { border-bottom: 0; padding-bottom: 24px; }

.sci-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.sci-pager a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    max-width: min(100%, 30rem);
    padding: 8px 18px;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}
.sci-pager a:hover { border-color: var(--teal-deep); }
.sci-pager a small { display: block; color: var(--muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sci-pager a i { color: var(--teal-deep); }
.sci-pager .is-next { margin-left: auto; text-align: right; }

/* -------------------------------------------------- 3 · menu rail and width */

.sci-railbtn { display: none; }
@media (min-width: 1020px) {
    .sci-unit.sci-fit { --sci-pad: clamp(20px, 2.6vw, 48px); }
    .sci-fit .sci-railbtn {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 36px;
        margin: -10px 0 12px;
        padding: 4px 8px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
    }
    .sci-fit .sci-railbtn:hover { background: var(--mint); color: var(--teal-deep); }
    .sci-fit.sci-rail { --sci-menu-w: 76px; }
    .sci-fit.sci-rail .sci-menu { padding: 16px 10px 30px; }
    .sci-fit.sci-rail .sci-railbtn { justify-content: center; margin-top: 0; }
    .sci-fit.sci-rail .sci-railbtn span,
    .sci-fit.sci-rail .sci-strand-name,
    .sci-fit.sci-rail .sci-item-text,
    .sci-fit.sci-rail .sci-strand-more,
    .sci-fit.sci-rail .sci-strand-home,
    .sci-fit.sci-rail .sci-sublink,
    .sci-fit.sci-rail .sci-plain { display: none; }
    .sci-fit.sci-rail .sci-strand { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
    .sci-fit.sci-rail .sci-item { justify-content: center; padding: 4px; margin: 0 0 4px; }
    .sci-fit.sci-rail .sci-railbtn i { transform: rotate(180deg); }
}

/* The notes stay a readable line length; an interactive may be wider. */
.sci-fit .sci-read, .sci-fit .sci-notes { max-width: none; }
.sci-fit .sci-read > :not(.sci-notes), .sci-fit .sci-notes > :not(.ix) { max-width: 66ch; }
.sci-fit .sci-notes > .ix { max-width: 1040px; }

/* -------------------------------------- 4 · the formula explorer, one screen */

.sci-fit .ix-formula { display: flex; flex-direction: column; }
.sci-fit .ix-formula > .ix-head { order: 0; padding-block: 8px; }
.sci-fit .ix-formula > .ix-presets {
    order: 1;
    padding: 10px 28px;
    border-top: 0;
    border-bottom: 2px solid var(--line);
}
.sci-fit .ix-formula > .ix-fgrid { order: 2; gap: 10px 32px; padding: 16px 28px 18px; }
.sci-fit .ix-formula > .ix-fmore { order: 3; }
.sci-fit .ix-formula > .ix-xsrc { order: 4; }
.sci-fit .ix-formula .ix-fleft .ix-callout { min-height: 3.1em; margin-top: 8px; }
.sci-fit .ix-formula .ix-ftally { margin-top: 6px; }

.sci-fit .ix-formula > .ix-xsrc { padding-block: 6px; }
@media (max-height: 760px) and (min-width: 1020px) {
    .sci-fit .ix-formula > .ix-fgrid { padding-block: 10px 12px; }
    .sci-fit .ix-formula > .ix-presets { padding-block: 6px; }
}
@media (max-width: 699.98px) {
    .sci-fit .ix-formula > .ix-presets > span { display: none; }
}

.ix-fmore { border-top: 2px solid var(--line); }
.ix-fmore > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 28px;
    color: var(--teal-deep);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.ix-fmore > summary::-webkit-details-marker { display: none; }
.ix-fmore > summary i { transition: transform 0.15s ease; }
.ix-fmore[open] > summary i { transform: rotate(90deg); }
.ix-fmore .ix-ftype { border-top: 0; padding-top: 4px; }
.ix-fmore .ix-ftype > label > .ix-flab { display: none; }

/* ------------------------------------------ an interactive on the full screen */

.ix-fullbtn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin-left: auto;
    padding: 0 14px;
    border: 2px solid var(--ix-teal-line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--teal-deep);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}
.ix-fullbtn:hover { border-color: var(--teal-deep); }
.ix-fullbtn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (max-width: 699.98px) {
    .ix-fullbtn span { display: none; }
    .ix-fullbtn { padding: 0 12px; }
}

/* unit-fit.js sets the scale that makes the card fill the window. */
.sci-fit .ix {
    --ix-zoom: 1;
}
body.sci-ixfull { overflow: hidden; }
.sci-fit .ix.ix-full {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: grid;
    align-content: safe center;
    justify-items: center;
    max-width: none;
    margin: 0;
    padding: 16px;
    overflow: auto;
    background: var(--cream);
}
.sci-fit .ix.ix-full > .ix-card {
    width: min(100%, 1040px);
    zoom: var(--ix-zoom);
}
@media print { .ix-fullbtn { display: none; } }

/* The quiz and simulation windows get the same button. */
.sci-overlay-full {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin-left: auto;
    padding: 0 14px;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--teal-deep);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}
.sci-overlay-full:hover { border-color: var(--teal-deep); }
.sci-overlay-full[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sci-overlay.is-full { padding: 0; }
.sci-overlay.is-full .sci-overlay-card {
    max-width: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
}
@media (max-width: 699.98px) { .sci-overlay-full span { display: none; } }

/* ------------------------------------------------ the Proposed / Today switch */
@media print { .sci-fitswitch, .sci-pager { display: none; } }

/* Until unit-fit.js has arranged the page (see unit-fit-early.js): the usual
   layout is never shown first to someone who chose this one. */
html.sci-fit-pending .sci-unit:not(.sci-fit):not(.sci-phone) { visibility: hidden; }