/* Year 9 Science unit page — the phone layout (preview: ?layout=phone).
 *
 * Everything here is scoped to `.sci-unit.sci-phone` (set by unit-fit.js
 * below 768px only) or to the full-screen dialog unit-phone.js builds.
 * Without those the page is exactly as science-unit.css draws it, at every
 * width. Tokens only; the same ink, deep teal, cyan, gold, tangerine, mint,
 * cream and paper the page already uses.
 *
 *  1. One slim pinned bar: the number (now the menu button), the title and
 *     Read · Watch · Play · Quiz me in one 48px row under the site bar. The
 *     tile menu scrolls with the page and drops down from the number.
 *  2. Concise: the objectives as a tight "I can" list, step headings as a
 *     number and a word, the cards and bars with less padding.
 *  3. An interactive is a compact card; opened, it fills the screen with the
 *     thing to look at on top and the controls to touch below, nothing to
 *     scroll (the formula explorer; others get their own grid when rolled out).
 *  4. Watch: one video showing, the other titles as rows. Play and Check: a
 *     compact card each, the task folded under "What to do". */

@media (max-width: 767.98px) {

    /* ------------------------------------------------- 1 · the pinned bar */

    .sci-unit.sci-phone {
        --sci-strip-h: 0px !important; /* unit-nav.js measures the strip inline; here it is not pinned */
        --sci-head-h: 0px !important;
        /* where the dropped-down menu starts: unit-phone.js overwrites it with the pressed bar's bottom edge */
        --sci-menu-top: calc(var(--sci-top) + var(--sci-sechead-h));
        --sci-pad: 16px;
        font-size: 1rem;
        line-height: 1.6;
    }
    /* builder.css gives every <main> overflow-x hidden below 576px, which makes it a
       scroll container and turns off position: sticky inside it, so the section bar
       never pinned on a phone. Restated here only: in today's layout that bar is
       104px tall and pinning it for everyone would cost more screen, not less. */
    .sci-unit.sci-phone .sci-main { overflow: visible; }
    .sci-phone .sci-head { position: static; }
    .sci-phone .sci-menu { position: static; z-index: auto; }
    .sci-phone .sci-sec { padding: 0 0 20px; scroll-margin-top: calc(var(--sci-top) + 4px); }
    .sci-phone .sci-whole { scroll-margin-top: calc(var(--sci-top) + 4px); }

    .sci-phone .sci-sechead {
        top: var(--sci-top);
        flex-wrap: nowrap;
        gap: 6px;
        min-height: 36px;
        margin-inline: -16px;
        padding: 1px 8px;
        border-bottom-width: 1px;
    }
    .sci-phone .sci-sechead-title { flex: 1 1 0; min-width: 0; font-size: 0.92rem; }
    .sci-phone .sci-steps { flex: 0 0 auto; gap: 4px; }
    .sci-phone .sci-pill { flex: none; min-height: 26px; padding: 0 8px; font-size: 0.74rem; }
    .sci-phone .sci-pill.is-done .sci-pill-tick { width: 14px; height: 14px; font-size: 0.5rem; }
    .sci-menubtn {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 28px;
        padding: 0 8px 0 10px;
        border: 0;
        border-radius: 6px;
        background: var(--cyan);
        color: var(--ink);
        font: inherit;
        font-size: 0.85rem;
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
    }
    .sci-menubtn i { font-size: 0.6rem; transition: transform 0.15s ease; }
    .sci-phone.is-menu-open .sci-menubtn i { transform: rotate(180deg); }
    @media (max-width: 374.98px) {
        .sci-phone .sci-pill { padding: 0 6px; font-size: 0.72rem; }
        .sci-phone .sci-sechead { gap: 4px; padding-inline: 6px; }
    }

    /* The tile menu, dropped down from the bar: tiles with their titles. */
    .sci-phone.is-menu-open .sci-menu {
        position: fixed;
        top: var(--sci-menu-top);
        left: 0;
        right: 0;
        z-index: 25;
        display: block;
        max-height: calc(100vh - var(--sci-menu-top) - 60px);
        max-height: calc(100dvh - var(--sci-menu-top) - 60px);
        overflow-y: auto;
        padding: 10px 12px 16px;
        border-bottom: 2px solid var(--line);
        box-shadow: 0 20px 30px -18px color-mix(in srgb, var(--ink) 45%, transparent);
    }
    .sci-phone.is-menu-open .sci-strand { display: block; margin: 0 0 12px; }
    .sci-phone.is-menu-open .sci-strand-name { display: block; }
    .sci-phone.is-menu-open .sci-item-text { display: flex; }
    .sci-phone.is-menu-open .sci-strand-more { display: block; }
    .sci-phone.is-menu-open .sci-sublink { display: flex; }
    .sci-phone.is-menu-open .sci-item { display: flex; gap: 12px; margin: 0 0 2px; padding: 5px 8px; }
    .sci-phone.is-menu-open .sci-item.is-on { background: var(--strand-soft); box-shadow: inset 4px 0 0 var(--strand); }
    .sci-phone.is-menu-open .sci-item.is-on .sci-tile { outline: 0; }

    .sci-phone .sci-sec-head { padding-top: 14px; }
    .sci-phone .sci-sec h2 { margin-top: 2px; font-size: 1.3rem; }
    .sci-phone .sci-sub { font-size: 0.95rem; }
    .sci-phone-teacher { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .sci-phone-teacher .sci-setbtn { width: auto; padding: 0 16px; }
    .sci-phone-teacher .sci-setbtn span { position: static; width: auto; height: auto; clip-path: none; }

    /* -------------------------------------------------------- 2 · concise */

    .sci-phone .sci-goals {
        margin-top: 12px;
        padding: 8px 12px 10px;
        border-radius: 14px;
        box-shadow: 3px 3px 0 var(--mint2);
    }
    .sci-phone .sci-goals-head { gap: 0; margin-bottom: 4px; }
    .sci-phone .sci-goals-ic, .sci-phone .sci-goals-head span:not(.sci-goals-ic) { display: none; }
    .sci-phone .sci-goals h3 { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sci-phone .sci-goals-list { grid-template-columns: 1fr; gap: 4px; }
    .sci-phone .sci-goals-list li { padding-left: 30px; font-size: 0.9rem; line-height: 1.3; }
    .sci-phone .sci-goals-list li::before { width: 22px; height: 22px; font-size: 0.74rem; }
    .sci-phone .sci-goals-more { margin-top: 8px; min-height: 40px; }

    .sci-phone .sci-step { padding: 26px 0 4px; }
    .sci-phone .sci-stephead { gap: 0; margin-bottom: 12px; }
    .sci-phone .sci-stepic, .sci-phone .sci-stephead > div > span { display: none; }
    .sci-phone .sci-stephead h4 { font-size: 1.15rem; }

    /* Read */
    .sci-phone .sci-notes p { margin-bottom: 0.9rem; }
    .sci-phone .sci-notes ul { margin-bottom: 0.9rem; }
    .sci-phone .sci-key {
        gap: 10px;
        margin: 1rem 0;
        padding: 12px 14px;
        border-radius: 14px;
        font-size: 1rem;
    }
    .sci-phone .sci-key > i { font-size: 1.05rem; }
    /* A nowrap line in a card must not widen the grid's column past the phone. */
    .sci-phone .sci-readgrid, .sci-phone .sci-cards { grid-template-columns: minmax(0, 1fr); }
    .sci-phone .sci-readmain, .sci-phone .sci-cards, .sci-phone .sci-card { min-width: 0; }
    .sci-phone .sci-cards { gap: 8px; margin: 1rem 0; }
    .sci-phone .sci-card summary { gap: 10px; padding: 8px 12px; }
    .sci-phone .sci-cardic { flex-basis: 34px; height: 34px; font-size: 0.9rem; }
    .sci-phone .sci-cardt { font-size: 0.95rem; }
    .sci-phone .sci-cardt small { overflow: hidden; font-size: 0.78rem; white-space: nowrap; text-overflow: ellipsis; }
    .sci-phone .sci-chev { flex-basis: 28px; height: 28px; font-size: 0.8rem; }
    .sci-phone .sci-cardbody { padding: 0 12px 12px; }
    .sci-phone .sci-readbar { gap: 8px 10px; margin-top: 18px; padding: 12px 14px; border-radius: 14px; box-shadow: 3px 3px 0 var(--mint2); }
    .sci-phone .sci-readbar p { flex: 1 1 120px; }
    .sci-phone .sci-readbar p b { font-size: 0.95rem; }
    .sci-phone .sci-readbar p span { display: none; }
    .sci-phone .sci-btn-read { min-height: 44px; padding: 0 18px; font-size: 0.92rem; }
    .sci-phone .sci-lockmsg { margin-top: 18px; padding: 10px 14px; font-size: 0.9rem; }

    /* The compact card for an interactive (its real card is in the dialog). */
    .sci-phone .sci-notes > .ix { margin: 16px 0 18px; }
    .sci-ixcompact {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 12px;
        padding: 12px 14px;
        border: 2px solid var(--line);
        border-radius: 16px;
        background: var(--paper);
    }
    .sci-ixcompact-text { min-width: 0; }
    .sci-ixcompact-text b { display: block; font-size: 1rem; line-height: 1.3; }
    .sci-ixcompact-text small { display: block; color: var(--muted); font-size: 0.84rem; line-height: 1.3; }
    .sci-ixopen {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 16px;
        border: 2px solid var(--ink);
        border-radius: 999px;
        background: var(--ink);
        color: var(--paper);
        font: inherit;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
    }
    .sci-ixopen:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
    @media (max-width: 374.98px) {
        .sci-ixcompact { grid-template-columns: auto minmax(0, 1fr); }
        .sci-ixopen { grid-column: 1 / -1; justify-content: center; }
    }

    /* Watch: the featured video, then the others as rows */
    .sci-phone .sci-vtabs { gap: 6px; margin-bottom: 10px; }
    .sci-phone .sci-vtab { padding: 0 14px; font-size: 0.84rem; }
    .sci-phone .sci-vlist .sci-vids { display: grid; gap: 6px; padding: 0 0 4px; overflow: visible; scroll-snap-type: none; }
    .sci-phone .sci-vlist.has-more::after, .sci-phone .sci-vlist + .sci-scrollhint { display: none; }
    .sci-phone .sci-vlist .sci-vid { flex: none; width: 100%; }
    .sci-phone .sci-vlist .sci-vmeta { padding: 10px 12px 4px; font-size: 0.92rem; }
    .sci-phone .sci-vlist .sci-vwatch { margin: 4px 10px 10px; }
    .sci-vpick {
        display: none;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 44px;
        margin: 0;
        padding: 6px 0;
        border: 0;
        background: none;
        color: var(--ink);
        font: inherit;
        font-weight: 600;
        line-height: 1.3;
        text-align: left;
        cursor: pointer;
    }
    .sci-vpick i { flex: none; color: var(--teal-deep); font-size: 1.1rem; }
    .sci-vpick span { min-width: 0; }
    .sci-vpick:hover { color: var(--teal-deep); }
    .sci-phone .sci-vlist .sci-vid.is-featured .sci-vpick { display: none; }
    .sci-phone .sci-vlist .sci-vid:not(.is-featured) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
        border-radius: 12px;
    }
    .sci-phone .sci-vlist .sci-vid:not(.is-featured) .sci-thumb,
    .sci-phone .sci-vlist .sci-vid:not(.is-featured) .sci-vtitle,
    .sci-phone .sci-vlist .sci-vid:not(.is-featured) .sci-vmeta small,
    .sci-phone .sci-vlist .sci-vid:not(.is-featured) .sci-vmeta .sci-lvl { display: none; }
    .sci-phone .sci-vlist .sci-vid:not(.is-featured) .sci-vpick { display: flex; }
    .sci-phone .sci-vlist .sci-vid:not(.is-featured) .sci-vmeta { padding: 0 0 0 12px; }
    .sci-phone .sci-vlist .sci-vid:not(.is-featured) .sci-vwatch { margin: 4px 6px 4px 0; padding: 6px 10px; font-size: 0; gap: 0; }
    .sci-phone .sci-vlist .sci-vid.is-watched:not(.is-featured) .sci-vpick { color: var(--muted); }
    .sci-phone .sci-otherlang { margin-top: 12px; }
    .sci-phone .sci-otherlang summary { gap: 10px; padding: 8px 12px; }
    .sci-phone .sci-otherbody { padding: 0 12px 12px; }

    /* Play: a compact card with one button; the task folds under a row */
    .sci-phone .sci-playcard { margin-bottom: 12px; border-radius: 16px; }
    .sci-phone .sci-playdo { padding: 12px 14px; gap: 8px; }
    .sci-phone .sci-shot { flex: 1 1 100%; order: 2; }
    .sci-phone .sci-simshot, .sci-phone .sci-cap { display: none; }
    .sci-phone .sci-btn-gold { width: 100%; margin: 0; }
    .sci-phone .sci-dotext { flex: 1 1 100%; order: 1; }
    .sci-phone .sci-playcard h5 { margin-bottom: 2px; }
    .sci-phone .sci-simname { margin: 0; font-size: 1.05rem; }
    .sci-fold { border-top: 2px solid var(--line); }
    .sci-fold > summary {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 6px 14px;
        font-weight: 700;
        line-height: 1.3;
        list-style: none;
        cursor: pointer;
    }
    .sci-fold > summary::-webkit-details-marker { display: none; }
    .sci-fold > summary > span { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
    .sci-fold > summary i { color: var(--sci-gold-ink); }
    .sci-fold > summary::after {
        content: "";
        flex: none;
        width: 8px;
        height: 8px;
        margin-left: auto;
        border-right: 2px solid var(--muted);
        border-bottom: 2px solid var(--muted);
        transform: rotate(45deg);
        transition: transform 0.15s ease;
    }
    .sci-fold[open] > summary::after { transform: rotate(-135deg); }
    .sci-fold-body { padding: 0 14px 12px; }
    .sci-fold-body .sci-goal { margin-bottom: 10px; }
    .sci-fold-body .sci-ask { margin: 10px -14px -12px; padding: 12px 14px; }
    .sci-phone .sci-also { max-width: none; margin-top: 10px; }
    .sci-phone .sci-also.has-tag { margin-top: 10px; }
    .sci-phone .sci-alsotag { display: none; }
    .sci-fold-card { border: 2px solid var(--line); border-radius: 14px; background: var(--paper); }
    .sci-fold-card .suv-eyebrow { display: none; }
    .sci-fold-card .suv-card { margin: 0; border: 0; }
    .sci-fold-plain { margin-top: 0; border-top: 0; }
    .sci-fold-plain > summary { padding-inline: 0; }
    .sci-fold-plain > summary h2 { margin: 0; font-size: 1rem; }
    .sci-fold-plain .sci-fold-body { padding-inline: 0; }
    .sci-phone .sci-privacy { display: none !important; }

    /* Check: three slim cards, each one control */
    .sci-phone .sci-checks { gap: 8px; }
    .sci-phone .sci-chk { gap: 6px; padding: 12px 14px; border-radius: 14px; }
    .sci-phone .sci-chk-ic { display: none; }
    .sci-phone .sci-chk > b { font-size: 1rem; }
    .sci-phone .sci-chk > p { margin: 0; font-size: 0; line-height: 0; }
    .sci-phone .sci-chk > p .sci-score { font-size: 0.85rem; line-height: 1.4; }
    .sci-phone .sci-chk-row { gap: 6px; }
    .sci-phone .sci-chk-row .sci-btn-quiz { flex: 1 1 100%; }
    .sci-phone .sci-got { min-height: 44px; padding: 6px 16px; }

    .sci-phone .sci-sec .sci-links { margin-top: 20px; padding: 8px 12px; font-size: 0.85rem; line-height: 1.45; }
    .sci-phone .sci-links li { margin-bottom: 2px; }
    .sci-phone .sci-links a { min-height: 44px; margin: -6px 0; }

    .sci-phone .sci-pager { gap: 8px; margin-top: 22px; padding-top: 14px; }
    .sci-phone .sci-pager a { flex: 1 1 0; min-width: 0; padding: 6px 12px; font-size: 0.9rem; }
    .sci-phone .sci-pager a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sci-phone .sci-pager a small { font-size: 0.68rem; }

    /* Read: the key idea right after the opening, the rest under "Read on" */
    .sci-phone .sci-notes > .sci-key { margin: 0.9rem 0 1rem; }
    .sci-phone .sci-notes > .sci-fold-notes { margin: 0 0 0.9rem; border: 2px solid var(--line); border-radius: 14px; background: var(--paper); }
    .sci-phone .sci-fold-notes > summary { padding: 6px 12px; }
    .sci-phone .sci-fold-notes > summary i { color: var(--teal-deep); }
    .sci-phone .sci-fold-notes-label { align-items: flex-start; }
    .sci-phone .sci-fold-notes-label > span { display: block; min-width: 0; }
    .sci-phone .sci-fold-notes-label b { display: block; font-size: 0.95rem; }
    .sci-phone .sci-fold-notes-label small { display: block; overflow: hidden; color: var(--muted); font-size: 0.8rem; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
    .sci-phone .sci-fold-notes[open] .sci-fold-notes-label small { display: none; }
    .sci-phone .sci-fold-notes .sci-fold-body { padding: 2px 12px 2px; }
    .sci-phone .sci-fold-notes .sci-fold-body > :last-child { margin-bottom: 0.6rem; }

    /* The preview switch: a small row at the top of the page that scrolls
       away (unit-phone.js moves it here), never pinned over the text. */
    .sci-phone .sci-fitswitch.is-inline {
        position: static;
        display: inline-flex;
        margin: 10px 0 0;
        padding: 3px;
        border-width: 1px;
        box-shadow: none;
        font-size: 0.74rem;
    }
    .sci-phone .sci-fitswitch.is-inline span { padding: 0 6px 0 8px; }
    .sci-phone .sci-fitswitch.is-inline button { min-height: 28px; padding: 0 10px; }

    /* The teacher's "Set this section" window fills the screen; its buttons
       stay in reach at the foot while the form scrolls. */
    .sci-phone dialog.sci-setdlg { width: 100%; max-width: none; max-height: none; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; }
    /* the buttons: pinned to the foot of the screen (sticky could not leave
       their own column, which is the last thing in the form) */
    .sci-phone .sci-setdlg .sci-outbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        flex-wrap: nowrap;
        margin: 0;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 2px solid var(--line);
        background: var(--cream);
    }
    .sci-phone .sci-setdlg .sci-outbar .sci-btn-set { flex: 1 1 auto; }
    .sci-phone .sci-setdlg .sci-outbar .sci-btn-ghost { flex: none; padding: 0 14px; }
    .sci-phone .sci-setdlg .sci-setout { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    .sci-phone .sci-setdlg .sci-preview { min-height: 120px; }
    .sci-phone .sci-setdlg h5 { font-size: 0.8125rem; }
    .sci-phone .sci-setdlg h5 span { display: block; margin-left: 0; font-size: 0.8125rem; }
    .sci-phone .sci-setdlg .sci-count, .sci-phone .sci-setdlg .sci-hint { font-size: 0.8125rem; }

    /* "See it" opened large (unit-visuals.js puts its window on <body>): its
       links are things to tap */
    body:has(.sci-unit.sci-phone) .suv-dialog .suv-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ------------------------------------- 3 · an interactive on the full screen
 * A <dialog> the size of the screen. The explorer's own markup stays as it
 * is; its wrappers become `display: contents` so every piece is placed on
 * one grid: the formula and the name, the message, the picture beside the
 * tally (the row that takes any spare height, and the two fit it rather than
 * scroll), then the formulae to pick, the two counters and the typing box.
 * Tap targets 44px, no text under 13px; the atoms' letters in the picture
 * are the one exception, shrinking with the picture and going at 10px. */

.sci-ixdlg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--cream);
    color: var(--ink);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.sci-ixdlg[open] { display: flex; flex-direction: column; }
.sci-ixdlg::backdrop { background: var(--ink); }
.sci-ixdlg-bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 2px 8px 2px 12px;
    border-bottom: 2px solid var(--line);
    background: var(--paper);
}
.sci-ixdlg-bar .ix-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--ix-cyan-deep, var(--teal-deep)); color: var(--paper); display: grid; place-items: center; }
.sci-ixdlg-bar b { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 1rem; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.sci-ixclose {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}
.sci-ixclose:hover { background: var(--teal-deep); }
/* science-ix.css loads after this sheet and gives `.ix` a margin: two classes here, so the body keeps none. */
.sci-ixdlg .sci-ixdlg-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin: 0; }

.sci-ixdlg .ix-card.ix-formula {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    /* only the first row uses two columns: the formula takes the width it
       needs, the name the rest, so "6 Ca(OH)₂" never runs into its name */
    grid-template-columns: fit-content(72%) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas:
        "formula name"
        "msg msg"
        "look look"
        "presets presets"
        "counters counters"
        "type type"
        "src src";
    gap: 6px 10px;
    padding: 8px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0;
    background: var(--cream);
    overflow: hidden;
}
/* A box too short for the fixed rows alone (a phone on its side): the
   picture's row keeps a floor and the card scrolls (ix-formula.js). */
.sci-ixdlg .ix-card.ix-formula.is-tall {
    grid-template-rows: auto auto minmax(120px, 1fr) auto auto auto auto;
    overflow-y: auto;
}
.sci-ixdlg .ix-formula > .ix-head, .sci-ixdlg .ix-formula .ix-fallback { display: none; }
.sci-ixdlg .ix-formula .ix-fgrid,
.sci-ixdlg .ix-formula .ix-fleft,
.sci-ixdlg .ix-formula .ix-fright,
.sci-ixdlg .ix-formula .ix-ftry { display: contents; }

/* look at: the formula, its name, what the tapped part means */
.sci-ixdlg .ix-fbig {
    grid-area: formula;
    align-self: center;
    justify-self: start;
    padding: 0.08em 0.18em 0.14em;
    font-size: 2.3rem;
    line-height: 1.2;
}
.sci-ixdlg .ix-fbig .ix-fsym::after, .sci-ixdlg .ix-fbig .ix-fc::after { inset: -6px -12px; }
.sci-ixdlg .ix-fname { grid-area: name; align-self: center; min-height: 0; margin: 0; font-size: 0.95rem; line-height: 1.25; }
.sci-ixdlg .ix-callout, .sci-ixdlg .ix-fverdict { grid-area: msg; margin: 0; }
.sci-ixdlg .ix-callout { min-height: 3.9em; font-size: 0.9rem; line-height: 1.3; }
.sci-ixdlg .ix-card:has(.ix-fverdict:not([hidden])) .ix-callout { display: none; }
/* The verdict in the message's place: the coloured box says what kind it is,
   so its label and dot go; the "put it back" chip sits under the words. */
.sci-ixdlg .ix-fverdict { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 6px 10px; font-size: 0.85rem; line-height: 1.35; }
.sci-ixdlg .ix-fverdict .ix-lab, .sci-ixdlg .ix-fverdict .ix-dot { display: none; }
.sci-ixdlg .ix-fverdict .ix-msg, .sci-ixdlg .ix-fverdict .ix-fix { grid-column: 1; }
.sci-ixdlg .ix-fverdict .ix-fix { margin: 0; }
.sci-ixdlg .ix-fverdict .ix-fix .ix-chip { min-height: 44px; font-size: 0.8125rem; }
/* look at: the picture beside the tally, the key on one line under both
   (`.sci-ixlook`, unit-phone.js). Neither the picture nor the tally scrolls
   (ix-formula.js fits them to the row): the picture draws its copies on a
   grid (--ix-cols) at the size that fits, each svg's own width, and drops the
   atoms' letters (is-nolabel) once they would go under 10px, since the key
   names each colour; the tally tightens its rows and takes the width its
   longest line needs (is-tight), then loses its label (is-tighter), and only
   past that does it scroll. */
.sci-ixdlg .sci-ixlook {
    grid-area: look;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "pic tally" "key key";
    gap: 4px 10px;
    min-height: 0;
}
.sci-ixdlg .sci-ixlook:has(.ix-ftally.is-tight) { grid-template-columns: minmax(0, 1fr) fit-content(64%); }
.sci-ixdlg .sci-ixlook:has(.ix-ftally.is-tighter) { grid-template-columns: minmax(0, 1fr) fit-content(72%); }
.sci-ixdlg .sci-ixpic { grid-area: pic; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.sci-ixdlg .sci-ixlook > [data-ix-key] { grid-area: key; min-width: 0; }
.sci-ixdlg .ix-fpic {
    --ix-letter: 13.5; /* the atoms' letters, in the picture's own units */
    --ix-cols: 1; /* copies across; ix-formula.js sets it with the size */
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(var(--ix-cols), max-content);
    align-content: start;
    justify-content: start;
    gap: 6px;
    min-height: 0;
    overflow: hidden;
}
.sci-ixdlg .ix-fmol, .sci-ixdlg .ix-mol { max-width: none; }
.sci-ixdlg .ix-at-t { font-size: calc(var(--ix-letter) * 1px); }
.sci-ixdlg .ix-at-t.is-two { font-size: calc(var(--ix-letter) * 0.95px); }
.sci-ixdlg .ix-fpic.is-nolabel .ix-at-t { display: none; }
.sci-ixdlg .ix-fcap { display: none; }
.sci-ixdlg .ix-elkey { justify-content: flex-start; gap: 4px 10px; margin-top: 0; font-size: 0.8125rem; }
.sci-ixdlg .ix-legend .ix-eldot { width: 1.5rem; height: 1.5rem; font-size: 0.8125rem; }
.sci-ixdlg .ix-ftally { grid-area: tally; min-width: 0; min-height: 0; margin: 0; overflow: hidden; }
.sci-ixdlg .ix-ftally.is-tight .ix-flab { margin-bottom: 0; }
.sci-ixdlg .ix-ftally.is-tight .ix-trow { margin-top: 0; padding: 0 4px; gap: 4px; }
.sci-ixdlg .ix-ftally.is-tight .ix-trow.is-total { margin-top: 2px; }
.sci-ixdlg .ix-ftally.is-tight .ix-tsw { width: 1.6rem; height: 1.6rem; font-size: 0.8125rem; }
.sci-ixdlg .ix-ftally.is-tight .ix-tmid { line-height: 1.15; }
.sci-ixdlg .ix-ftally.is-tight .ix-tn { font-size: 1.1rem; }
/* tightest: the label goes, and so do the elements' names in the rows (the
   symbol stays in each row and the key just below names every one); the
   working and the totals keep their size */
.sci-ixdlg .ix-ftally.is-tighter { overflow-y: auto; }
.sci-ixdlg .ix-ftally.is-tighter .ix-flab { display: none; }
.sci-ixdlg .ix-ftally.is-tighter .ix-trow { border-width: 1px; }
.sci-ixdlg .ix-ftally.is-tighter .ix-trow:not(.is-total) .ix-tname { display: none; }
.sci-ixdlg .ix-ftally.is-tighter .ix-tmid { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.sci-ixdlg .ix-ftally.is-tighter .ix-tsw { width: 1.4rem; height: 1.4rem; font-size: 0.8125rem; }
.sci-ixdlg .ix-flab { margin-bottom: 2px; font-size: 0.8125rem; letter-spacing: 0.04em; }
.sci-ixdlg .ix-trow { grid-template-columns: 1.9rem minmax(0, 1fr) auto; gap: 6px; margin-top: 2px; padding: 3px 4px; border-radius: 10px; }
.sci-ixdlg .ix-tsw { width: 1.9rem; height: 1.9rem; font-size: 0.85rem; }
.sci-ixdlg .ix-tname { font-size: 0.85rem; }
.sci-ixdlg .ix-tw { font-size: 0.8125rem; line-height: 1.2; }
.sci-ixdlg .ix-tn { font-size: 1.35rem; }
.sci-ixdlg .ix-trow.is-total { margin-top: 4px; }

/* touch: the formulae to pick, the two counters, the typing box */
.sci-ixdlg .ix-presets {
    grid-area: presets;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    min-height: 44px; /* a scroll strip would otherwise give its height away first */
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.sci-ixdlg .ix-presets::-webkit-scrollbar { display: none; }
.sci-ixdlg .ix-presets > span { display: none; }
.sci-ixdlg .ix-presets .ix-chip { flex: none; }
.sci-ixdlg .ix-ftry > .ix-flab { display: none; }
.sci-ixdlg .ix-counters { grid-area: counters; gap: 6px; }
.sci-ixdlg .ix-ftry .ix-counter { grid-template-columns: minmax(0, 1fr) 44px 2.4ch 44px; gap: 6px; padding: 0 2px 0 10px; }
.sci-ixdlg .ix-counter .ix-nm { font-size: 0.9rem; line-height: 1.2; }
.sci-ixdlg .ix-nm small { font-size: 0.8125rem; }
.sci-ixdlg .ix-counter output { font-size: 1.25rem; }
.sci-ixdlg .ix-fmore { grid-area: type; border: 0; }
.sci-ixdlg .ix-fmore > summary { min-height: 44px; padding: 4px 6px; font-size: 0.9rem; }
.sci-ixdlg .ix-fmore[open] { grid-row: 4 / 7; }
.sci-ixdlg .ix-card:has(.ix-fmore[open]) .ix-presets,
.sci-ixdlg .ix-card:has(.ix-fmore[open]) .ix-counters { display: none; }
.sci-ixdlg .ix-ftype {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: end;
    padding: 0 0 4px;
    border: 0;
}
.sci-ixdlg .ix-ftype > label { grid-column: 1; grid-row: 1 / 3; }
.sci-ixdlg .ix-ftype > .ix-btn { grid-column: 2; grid-row: 2; }
.sci-ixdlg .ix-ftype > .ix-fhelp, .sci-ixdlg .ix-ftype > .ix-ferr { grid-column: 1 / -1; }
.sci-ixdlg .ix-ftype .quiz-formula { gap: 6px; }
.sci-ixdlg .ix-ftype .quiz-formula__input, .sci-ixdlg .ix-ftype input { flex: 1 1 100%; width: 100%; font-size: 1.05rem; }
.sci-ixdlg .ix-ftype .quiz-fkey sub { font-size: 0.82em; }
.sci-ixdlg .ix-fhelp, .sci-ixdlg .ix-ferr { font-size: 0.8125rem; line-height: 1.35; }
.sci-ixdlg .ix-xsrc { grid-area: src; margin: 0; padding: 2px 0 0; border: 0; background: none; font-size: 0.8125rem; line-height: 1.3; }

@media (max-height: 679.98px) {
    .sci-ixdlg .ix-card.ix-formula { gap: 4px 8px; padding-top: 4px; }
    .sci-ixdlg .ix-fbig { font-size: 2.05rem; }
    .sci-ixdlg .ix-callout { min-height: 3.6em; font-size: 0.85rem; }
    .sci-ixdlg .ix-fverdict { padding: 4px 8px; font-size: 0.8125rem; }
    .sci-ixdlg .ix-trow { margin-top: 0; padding: 1px 4px; gap: 5px; }
    .sci-ixdlg .ix-tsw { width: 1.7rem; height: 1.7rem; font-size: 0.8125rem; }
    .sci-ixdlg .ix-tn { font-size: 1.2rem; }
    .sci-ixdlg .ix-tmid { line-height: 1.2; }
    /* a counter's name and what it does on one running line: every word
       stays, the counters stop at the height of their buttons */
    .sci-ixdlg .ix-counter .ix-nm small { display: inline; }
    .sci-ixdlg .ix-counter .ix-nm small::before { content: " \00b7 "; }
}
@media (prefers-reduced-motion: reduce) {
    .sci-menubtn i, .sci-fold > summary::after { transition: none; }
}
@media print { .sci-ixdlg, .sci-menubtn { display: none; } }