/* Year 9 Science lab pages — the phone layout, below 768px (lab-phone.js,
 * unit-phone.js, unit-tabs.js). Loaded after science-unit-phone.css and
 * science-unit-tabs.css, which already draw the pinned bar's tabs, the menu
 * button, the compact cards and the full-screen dialog; here is only what a
 * lab page has and the unit page has not. Everything is scoped to
 * `.sci-phone` (set by lab-phone.js below 768px only), to the phone media
 * query or to the dialog, so a wider screen is drawn exactly as before.
 * Tokens only; Inter only; teal is a fill, never text. */

/* The bar exists for phones: on a wider screen the "On this page" row does
   its job. */
@media (min-width: 768px) {
    .alk-bar { display: none; }
}
/* The phone's page count replaces the gallery hint there, and only there. */
.alk-pages-n { display: none; }
/* Three tints the unit's phone and tabs sheets expect from the unit's steps
   sheet (science-unit-steps.css, not loaded on a lab page): the same mixes,
   so a fold row's icon and the tab message look as they do on the unit. */
.sci-labunit {
    --sci-gold-soft: color-mix(in srgb, var(--gold) 14%, var(--paper));
    --sci-gold-ink: color-mix(in srgb, var(--gold) 45%, var(--ink));
    --sci-peach-line: color-mix(in srgb, var(--tangerine) 35%, var(--paper));
}

@media (max-width: 767.98px) {

    /* ------------------------------------------------- 1 · the pinned bar
       The same slim bar the unit's sections have (science-unit-phone.css
       pins it under the site bar and styles its menu button and pills);
       the few base rules of the unit's section bar it needs are restated
       here, as the unit's steps sheet is not loaded on a lab page. */
    .sci-phone .alk { padding-top: 0; }
    .sci-phone .alk-bar {
        position: sticky;
        top: var(--sci-top);
        z-index: 10;
        display: flex;
        align-items: center;
        margin-bottom: 0;
        background: color-mix(in srgb, var(--cream) 94%, transparent);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-bottom: 2px solid var(--line);
    }
    .sci-phone .alk-bar .sci-sechead-num {
        flex: 0 0 auto;
        padding: 4px 11px;
        border-radius: 10px;
        background: var(--cyan);
        color: var(--ink);
        font-weight: 800;
        line-height: 1.5;
        white-space: nowrap;
    }
    .sci-phone .alk-bar .sci-steps { flex: 1 1 auto; min-width: 0; display: flex; }
    /* four words of 13px: each tab takes the width its word needs and shares
       the rest, so "Worksheet" is never cut on a 360px phone */
    .sci-phone .alk-bar .sci-pill {
        flex: 1 1 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 5px;
        color: var(--ink);
        font-size: 0.8125rem;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }
    .sci-phone .alk-bar .sci-pill > i { display: none; }
    .sci-phone .alk-bar .sci-pill:focus-visible { outline-offset: -3px; }
    /* the menu button says "Lab 1", not a section number: a little wider, and a full 44px */
    .sci-phone .alk-bar .sci-menubtn { min-height: 44px; padding-inline: 8px 6px; font-size: 0.8125rem; }
    .sci-phone .alk-bar .sci-menubtn span { white-space: nowrap; }
    @media (max-width: 374.98px) {
        .sci-phone .alk-bar .sci-pill { padding: 0 4px; letter-spacing: -0.01em; }
        .sci-phone .alk-bar .sci-menubtn { padding-inline: 6px 4px; }
    }
    /* a tab tap scrolls the page to the bar; a link into the page lands under it */
    .sci-phone .alk { scroll-margin-top: var(--sci-top); }
    .sci-phone .alk-panel { padding-top: 14px; }
    .sci-phone .alk-step, .sci-phone .alk-sheetgrid, .sci-phone .alk-panel { scroll-margin-top: calc(var(--sci-top) + 56px); }
    .sci-phone .alk-jump { display: none; }

    /* -------------------------------------------------------- 2 · concise */
    .sci-phone .alk { font-size: 0.9375rem; line-height: 1.5; }
    .sci-phone .alk-head { margin-bottom: 0.6rem; }
    .sci-phone .alk-kicker { font-size: 0.8125rem; letter-spacing: 0.06em; }
    .sci-phone .alk h1 { margin-bottom: 0.5rem; font-size: 1.5rem; }
    .sci-phone .alk-aim { font-size: 0.9375rem; line-height: 1.5; }
    .sci-phone .alk-ref { font-size: 0.8125rem; }
    .sci-phone .alk-tools { gap: 0.5rem 0.9rem; margin-bottom: 0.9rem; padding-bottom: 0.7rem; font-size: 0.875rem; }
    .sci-phone .alk-tools .alk-back, .sci-phone .alk-lang a { display: inline-flex; align-items: center; min-height: 44px; }
    .sci-phone .alk-step { margin-bottom: 0.75rem; padding: 0.85rem 0.85rem 0.75rem; border-radius: 14px; border-top-width: 5px; }
    .sci-phone .alk-step h2 { gap: 0.6rem; margin-bottom: 0.5rem; font-size: 1.125rem; }
    .sci-phone .alk-num { width: 1.9rem; height: 1.9rem; font-size: 1rem; }
    .sci-phone .alk-step h3 { margin-top: 0.9rem; font-size: 1rem; }
    .sci-phone .alk-md p, .sci-phone .alk-md ul, .sci-phone .alk-md ol, .sci-phone .alk-step p { margin-bottom: 0.65rem; }
    .sci-phone .alk-md li { margin-bottom: 0.25rem; }
    .sci-phone .alk-md li > ul, .sci-phone .alk-md li > ol { margin-top: 0.2rem; padding-left: 1.1rem; }
    /* the safety box: the step's card is its box; every line stays */
    .sci-phone .alk-md.alk-safety { padding: 0; border: 0; background: none; }
    .sci-phone .alk-md.alk-safety li { margin-bottom: 0.2rem; }
    .sci-phone .alk-eq { font-size: clamp(1.0625rem, 4.4vw, 1.25rem); }
    .sci-phone .alk-table { font-size: 0.9375rem; line-height: 1.4; }
    .sci-phone .alk-eqfig { padding: 0.4rem; }
    .sci-phone .alk-preview { margin-bottom: 0.9rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; }

    /* A row that opens in place (lab-phone.js): the step's own heading is the
       row, the body folds under it. The step keeps its card, colour and
       number, so a closed row still reads as the step it is. */
    .sci-phone .alk-fold { border-top: 0; }
    .sci-phone .alk-fold > summary {
        gap: 0.6rem;
        margin: -0.85rem -0.85rem -0.75rem;
        padding: 0.85rem 0.85rem 0.75rem;
        border-radius: 0 0 14px 14px;
    }
    .sci-phone .alk-fold > summary::after { border-color: var(--ink); }
    .sci-phone .alk-fold > summary h2 { flex: 1 1 auto; min-width: 0; margin: 0; }
    .sci-phone .alk-fold[open] > summary { margin-bottom: 0; }
    .sci-phone .alk-fold > .alk-fold-body { padding: 0.5rem 0 0; }
    .sci-phone .alk-fold--safety > summary::after { display: none; }
    .sci-phone .alk-fold--safety > summary h2::after { display: none; }
    /* a stage of several equations: a row inside the step, named by its word equation */
    .sci-phone .alk-fold--stage { margin: 0 0 0.5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
    .sci-phone .alk-fold--stage > summary { margin: 0; padding: 0.45rem 0.7rem; min-height: 44px; border-radius: 10px; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; }
    .sci-phone .alk-fold--stage > summary .alk-fold-eq { display: block; min-width: 0; overflow-wrap: anywhere; }
    .sci-phone .alk-fold--stage > .alk-fold-body { padding: 0 0.7rem 0.4rem; }
    .sci-phone .alk-fold--stage > .alk-fold-body > :first-child { margin-top: 0; }
    .sci-phone .alk-fold--stage .alk-eq { margin: 0 0 0.5rem; }

    /* Lab 3's "Want more?" step: a one-line pointer to the Worksheet tab,
       where its introduction sits above the extension sheets */
    .sci-phone .alk-step--pointer { display: block; padding: 0; border-top-width: 5px; }
    .sci-phone .alk-pointer {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        min-height: 52px;
        padding: 0.6rem 0.85rem;
        color: var(--ink);
        font-size: 1rem;
        font-weight: 800;
        line-height: 1.25;
        text-decoration: none;
    }
    .sci-phone .alk-pointer .alk-num { flex: none; }
    .sci-phone .alk-pointer-text { flex: 1 1 auto; min-width: 0; }
    .sci-phone .alk-pointer i { flex: none; color: var(--teal-deep); }
    .sci-phone .alk-pointer:hover .alk-pointer-text { text-decoration: underline; text-decoration-color: var(--tangerine); text-decoration-thickness: 3px; text-underline-offset: 4px; }
    .sci-phone .alk-ext-intro { margin: 0 0 0.6rem; }
    .sci-phone .alk-ext-intro > .alk-md > :last-child { margin-bottom: 0; }

    /* --------------------------------------------------- 3 · the worksheet
       Per sheet: title, the page count, the cover alone (a tap opens the
       reader on every page), one Download, then the answers' reveal. The
       handout's description and the "watch for" list fold under one row. */
    .sci-phone .alk-fold--about { margin: 0 0 0.6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
    .sci-phone .alk-fold--about > summary { margin: 0; padding: 0.45rem 0.7rem; min-height: 44px; border-radius: 10px; font-size: 0.9375rem; }
    .sci-phone .alk-fold--about > summary i { color: var(--ink); }
    .sci-phone .alk-fold--about > .alk-fold-body { padding: 0 0.7rem 0.2rem; }
    .sci-phone .alk-fold--about .alk-sheet-watch h3 { margin-top: 0; }
    .sci-phone .alk-predict { margin-bottom: 0.6rem; padding: 0.5rem 0.75rem; font-size: 0.9375rem; }
    .sci-phone .alk-sheetgrid--two { gap: 0.6rem; }
    .sci-phone .alk-col-h, .sci-phone .alk-sheet-title { margin-bottom: 0.3rem; font-size: 1rem; }
    .sci-phone .alk-gallery { margin-bottom: 0.5rem; }
    .sci-phone .alk-pages-hint { display: none; }
    .sci-phone .alk-pages-n { display: block; margin: 0 0 0.35rem; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
    .sci-phone .alk-pages {
        flex-wrap: nowrap;
        gap: 0.5rem;
        margin: 0 -0.85rem 0.5rem;
        padding: 0 0.85rem 0.3rem;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .sci-phone .alk-page, .sci-phone .alk-page:first-child { width: var(--alk-first-phone); scroll-snap-align: start; }
    .sci-phone .alk-page-link img { border-radius: 4px; }
    .sci-phone .alk-page-label { font-size: 0.8125rem; }
    .sci-phone .alk-actions .alk-btn { font-size: 0.9375rem; }
    .sci-phone .alk-col--answers { padding: 0.65rem 0.7rem 0.3rem; }
    .sci-phone .alk-col--answers > .alk-note { display: none; }
    .sci-phone .alk-answers-blur { max-height: 4.5rem; }
    .sci-phone .alk-answers-cover { min-height: 60px; }
    .sci-phone .alk-step--key { margin-top: 0.75rem; }
    .sci-phone .alk-step--key > p { font-size: 0.875rem; }
    /* Lab 3: each extension sheet is a row under its title; its note is the row's second line */
    .sci-phone .alk-fold--sheet { margin: 0 0 0.5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
    .sci-phone .alk-fold--sheet > summary { margin: 0; padding: 0.5rem 0.7rem; min-height: 48px; border-radius: 12px; font-size: 0.9375rem; line-height: 1.3; }
    .sci-phone .alk-fold--sheet > summary > span { display: block; min-width: 0; }
    .sci-phone .alk-fold--sheet > summary small { display: block; overflow: hidden; color: var(--muted); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
    .sci-phone .alk-fold--sheet[open] > summary small { display: none; }
    .sci-phone .alk-fold--sheet > .alk-fold-body { padding: 0 0.7rem 0.3rem; }
    .sci-phone .alk-fold--sheet .alk-sheetgrid { margin-top: 0; padding-top: 0; border-top: 0; }
    .sci-phone .alk-fold--sheet .alk-pages { margin-inline: -0.7rem; padding-inline: 0.7rem; }

    /* ------------------------------------------------------- 4 · watch
       One player, the other clips as title rows (unit-phone.js marks the
       row `.sci-vlist` and the chosen card `.is-featured`; the rows' button
       is its `.sci-vpick`, styled by science-unit-phone.css). */
    .sci-phone .alk-step--videos > p { font-size: 0.9375rem; }
    .sci-phone .alk-vids.sci-vlist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .sci-phone .alk-vids.sci-vlist .alk-vid.is-featured .sci-vpick { display: none; }
    .sci-phone .alk-vids.sci-vlist .alk-vid.is-featured .alk-vmeta { padding: 0.5rem 0.7rem 0.6rem; font-size: 0.875rem; line-height: 1.35; }
    .sci-phone .alk-vids.sci-vlist .alk-vid.is-featured .alk-vmeta small { margin-top: 0.15rem; }
    .sci-phone .alk-vids.sci-vlist .alk-vid:not(.is-featured) { border-radius: 12px; }
    .sci-phone .alk-vids.sci-vlist .alk-vid:not(.is-featured) .alk-thumb,
    .sci-phone .alk-vids.sci-vlist .alk-vid:not(.is-featured) .alk-vtitle,
    .sci-phone .alk-vids.sci-vlist .alk-vid:not(.is-featured) .alk-vnote,
    .sci-phone .alk-vids.sci-vlist .alk-vid:not(.is-featured) .alk-vlead,
    .sci-phone .alk-vids.sci-vlist .alk-vid:not(.is-featured) .alk-vmeta small { display: none; }
    .sci-phone .alk-vids.sci-vlist .alk-vid:not(.is-featured) .sci-vpick { display: flex; }
    .sci-phone .alk-vids.sci-vlist .alk-vid:not(.is-featured) .alk-vmeta { padding: 0 12px; }
    .sci-phone .alk-vids-more { margin-top: 0.6rem; font-size: 0.9375rem; }
    .sci-phone .alk-vmeta small { font-size: 0.8125rem; }

    /* ------------------------------------------------------- 5 · try it
       The interactive pieces are compact cards (unit-phone.js); the "try it
       first" card stays in the page, a little tighter. */
    .sci-phone .alk-notes { margin-top: 6px; }
    .sci-phone .alk-notes > .ix { margin: 6px 0 8px; }
    .sci-phone .alk-step--try > p { font-size: 0.9375rem; }
    .sci-phone .alk-step--fake[hidden] { display: none; }
    .sci-phone .alk-panel--try > .sci-ixcompact { margin: 0 0 0.75rem; }
    /* the compact cards: Open is a 44px square with its icon, so the title
       and its line have the width to stay short */
    .sci-phone .alk-panel--try .sci-ixcompact { gap: 6px 10px; padding: 10px 12px; }
    .sci-phone .alk-panel--try .sci-ixcompact-text b { font-size: 0.9375rem; }
    .sci-phone .alk-panel--try .sci-ixcompact-text small { font-size: 0.8125rem; }
    .sci-phone .alk-panel--try .sci-ixopen { width: 44px; padding: 0; justify-content: center; }
    .sci-phone .alk-panel--try .sci-ixopen span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .sci-phone .alk-panel--try .ix-tag { font-size: 0.8125rem; }
    /* the "try it first" card folds under its question (lab-phone.js) */
    .sci-phone .alk-fold--tryfirst { margin: 0 0 10px; border: 2px solid var(--line); border-radius: 14px; background: var(--paper); }
    .sci-phone .alk-fold--tryfirst > summary { margin: 0; padding: 8px 12px; min-height: 48px; border-radius: 14px; }
    .sci-phone .alk-fold--tryfirst > summary > span { display: block; min-width: 0; }
    .sci-phone .alk-fold--tryfirst > summary .ix-tag { display: block; margin-bottom: 2px; }
    .sci-phone .alk-fold--tryfirst > summary .alk-fold-q { display: block; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; }
    .sci-phone .alk-fold--tryfirst > .alk-fold-body { padding: 0; }
    .sci-phone .alk-fold--tryfirst .ix-tryfirst { border: 0; border-radius: 0 0 14px 14px; }
    .sci-phone .alk-fold--tryfirst .ix-tryfirst > .ix-tag, .sci-phone .alk-fold--tryfirst .ix-tryfirst > .ix-q { display: none; }

    /* ------------------------------------- 6 · teachers, previous and next */
    .sci-phone .alk-teacher { margin-top: 1rem; padding: 0.6rem 0.85rem; border-radius: 14px; }
    .sci-phone .alk-fold--teacher > summary { margin: 0; padding: 0.3rem 0; color: var(--paper); }
    .sci-phone .alk-fold--teacher > summary h2 { font-size: 1.0625rem; }
    .sci-phone .alk-fold--teacher > summary::after { border-color: var(--paper); }
    .sci-phone .alk-fold--teacher > .alk-fold-body { padding: 0.6rem 0 0.2rem; }
    .sci-phone .alk-teacher p { font-size: 0.9375rem; }
    .sci-phone .alk-files li { padding: 0.6rem 0.75rem; font-size: 0.9375rem; }
    .sci-phone .alk-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1rem; }
    .sci-phone .alk-pager-link { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
    .sci-phone .alk-pager-link:only-child.alk-pager-link--next { grid-column: 2; }
    .sci-phone .alk-pager-link--next { grid-column: 2; }
    .sci-phone .alk-pager-link span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ---------------------------------------- "Spot the fake" on the full screen
 * The clip on top, the questions under it, the reveal at the foot. Closed,
 * it fits a screen; opened, the answer (prose, four facts, a second clip
 * and the sources) reads by scrolling inside the dialog. */
.sci-ixdlg .sci-ixdlg-body.is-fake { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sci-ixdlg .alk-step--fake {
    margin: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0;
    background: var(--cream);
    font-size: 0.9375rem;
    line-height: 1.45;
}
.sci-ixdlg .alk-step--fake > h2 { display: none; }
.sci-ixdlg .alk-step--fake > p { margin: 0 0 8px; font-size: 0.875rem; }
.sci-ixdlg .alk-fakegrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 8px; }
.sci-ixdlg .alk-fakegrid .alk-vids { grid-template-columns: minmax(0, 1fr); }
.sci-ixdlg .alk-fakegrid .alk-vmeta { padding: 6px 10px 8px; font-size: 0.8125rem; }
.sci-ixdlg .alk-fakegrid .alk-vmeta small { margin-top: 2px; }
.sci-ixdlg .alk-ask { padding: 8px 12px 2px; }
.sci-ixdlg .alk-ask h3 { margin: 0 0 4px; font-size: 0.9375rem; }
.sci-ixdlg .alk-ask ol { margin: 0 0 6px; padding-left: 1.2rem; }
.sci-ixdlg .alk-ask li { margin-bottom: 4px; font-size: 0.875rem; line-height: 1.4; }
.sci-ixdlg .alk-reveal summary { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 0.9375rem; }
.sci-ixdlg .alk-reveal-body { padding: 4px 12px 12px; font-size: 0.875rem; }
.sci-ixdlg .alk-reveal-body h3 { margin: 10px 0 4px; font-size: 0.9375rem; }
.sci-ixdlg .alk-reveal-body .alk-vids { grid-template-columns: minmax(0, 1fr); }
@media (max-height: 679.98px) {
    .sci-ixdlg .alk-step--fake > p { font-size: 0.8125rem; line-height: 1.35; }
    .sci-ixdlg .alk-ask li { font-size: 0.8125rem; line-height: 1.35; }
    .sci-ixdlg .alk-fakegrid .alk-vmeta { display: none; }
}