/* Year 9 Science: phone layouts of the interactive notes pieces, inside the
 * full-screen dialog unit-phone.js opens (`.sci-ixdlg`, body `.sci-ixdlg-body.is-<kind>`,
 * marked data-ix-fit). Everything here is scoped to `.sci-ixdlg`; the notes
 * and every other layout are untouched. Tokens only; Inter only.
 *
 *  1. The three step-by-step guides (Bohr diagram, electron transfer, metals
 *     and acid) share one frame: the picture in a panel on top, taking the
 *     spare height; under it the step's words and working, then Back / Next,
 *     then the examples to try. One screen in every step: the picture is the
 *     part that gives way.
 *  2. What each guide needs on top of the frame.
 *  3. The atom explorer: the symbol card and its working beside the drawing,
 *     one row of tabs (examples, nucleus, charge, source) over one panel, the
 *     three counters at the foot.
 *
 * Tap targets 44px; no text under 13px. Words inside a drawing follow the
 * drawing down to 10px and stop there: the scripts publish `--ix-u`, the
 * drawing's units per CSS pixel, and the sizes below are floors in pixels. */

/* ------------------------------------------------- 1 · the guides' frame */

.sci-ixdlg .ix-card.ix-guide:where(:not(.ix-gp):not(.ix-balance)) {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(96px, 1fr) auto auto auto;
    grid-template-areas: "viz" "txt" "foot" "try";
    gap: 6px;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0;
    background: var(--cream);
    overflow: hidden;
}
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) > .ix-head, .sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) > .ix-fallback { display: none; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) > .ix-stage { display: contents; }

/* look at: the picture, in a panel of its own */
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-viz {
    grid-area: viz;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 6px 8px;
    border: 2px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
    overflow: hidden;
}
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-viz svg { flex: 1 1 0; width: 100%; max-width: none; height: auto; min-height: 0; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-legend { flex: none; gap: 2px 12px; margin: 0; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-card {
    --ix-u: 1; /* a drawing's units per CSS px; the scripts set it on each svg in the dialog */
}
.sci-ixdlg .ix-nt-p { font-size: max(17px, calc(var(--ix-u, 1) * 10px)); }
.sci-ixdlg .ix-nt-n { font-size: max(15px, calc(var(--ix-u, 1) * 10px)); }

/* read: the step, its line, the working. Should a box ever be too short for
   the words (a phone on its side), this is the one part that scrolls. */
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-txt {
    grid-area: txt;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    align-content: start;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-txt > * { grid-column: 1 / -1; min-width: 0; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-stepno { grid-column: 1; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-txt h3 { grid-column: 1; margin: 0 0 2px; font-size: 1.15rem; line-height: 1.2; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-gline { max-width: none; margin: 0 0 6px; font-size: 0.875rem; line-height: 1.35; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-eqn { gap: 2px 10px; margin: 0 0 4px; font-size: 1.25rem; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-grp { gap: 0 8px; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-why, .sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-summary { max-width: none; margin: 0; font-size: 0.8125rem; line-height: 1.35; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-answer { margin: 2px 0 4px; font-size: 1.6rem; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-answer small { margin-bottom: 0; font-size: 0.8125rem; letter-spacing: 0.04em; line-height: 1.3; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-gline + .ix-answer { margin-top: 0; }
/* "Show me again" beside the step's title, not on a line of its own */
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-replay { grid-column: 2; grid-row: 1 / 3; align-self: start; font-size: 0.875rem; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-pacectl { gap: 6px; min-height: 44px; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-btn { padding: 0 14px; font-size: 0.9rem; line-height: 1.15; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-btn.is-ghost { border: 2px solid var(--line); }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-btn.is-teal { border: 2px solid var(--teal-deep); }

/* touch: where you are, Back and Next on one row */
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-foot {
    grid-area: foot;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
}
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-dots { flex: 1 1 auto; gap: 4px; min-width: 0; margin: 0; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-dots i { flex: 0 1 16px; width: auto; height: 6px; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-foot .ix-btn { flex: 0 0 auto; }

/* touch: the examples to try, each a square the width allows */
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-try { grid-area: try; display: block; padding: 0; border: 0; background: none; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-try > span { display: none; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-try .ix-chips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(44px, 1fr); gap: 4px; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-chip { min-width: 0; padding: 0 4px; border: 2px solid var(--line); font-size: 0.875rem; line-height: 1.1; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-chip[aria-pressed="true"] { border-color: var(--ink); }
@media (min-height: 700px) {
    .sci-ixdlg .ix-card.ix-guide:where(:not(.ix-gp):not(.ix-balance)) { gap: 8px; padding-top: 8px; }
    .sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-try > span { display: block; margin-bottom: 4px; color: var(--muted); }
    .sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-gline { font-size: 0.95rem; }
    .sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-eqn { font-size: 1.4rem; }
    .sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-why, .sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-summary { font-size: 0.875rem; }
}

/* ---------------------------------------- 2a · the Bohr-diagram guide */

.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) { --ix-gcard: clamp(3.4rem, 9vh, 4.6rem); }
/* step 1: the labelled card */
.sci-ixdlg .ix-gcardwrap { min-height: 0; }
.sci-ixdlg .ix-cardcap { margin-top: 6px; font-size: 0.95rem; line-height: 1.3; }
/* step 2: the card over the nucleus; step 4: the card beside the atom */
.sci-ixdlg .ix-gsplit { flex: 1 1 0; width: 100%; min-height: 0; }
.sci-ixdlg .ix-gsplit.is-nucleus { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.sci-ixdlg .ix-gsplit.is-nucleus .ix-anncard { flex: none; }
.sci-ixdlg .ix-gsplit.is-nucleus .ix-nucdraw { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; min-height: 0; max-height: 220px; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-gsplit.is-nucleus svg { max-width: none; }
.sci-ixdlg .ix-gsplit:not(.is-nucleus) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    gap: 8px;
}
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-gsplit:not(.is-nucleus) svg { width: 100%; height: 100%; max-width: none; }
.sci-ixdlg .ix-gsplit:not(.is-nucleus) .ix-nuclide { font-size: clamp(2.2rem, 6vh, 3.4rem); }
/* step 3: the shells' count on one line, each number over what its shell
   holds, the total over "of 19" */
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-shells { flex-wrap: nowrap; justify-content: space-between; gap: 0 3px; font-size: 1.3rem; }
.sci-ixdlg .ix-shellnum { min-width: 0; }
.sci-ixdlg .ix-shellnum small { max-width: none; font-size: 0.8125rem; line-height: 1.2; white-space: nowrap; }
.sci-ixdlg .ix-shells .ix-grp { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 0 6px; }
.sci-ixdlg .ix-shells .ix-of { grid-column: 1 / -1; align-self: start; font-size: 0.8125rem; line-height: 1.2; text-align: center; }
/* how to fill, and the buttons: two rows at most */
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-pace { gap: 6px; margin-top: 4px; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-pace > .ix-pacectl { display: contents; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-seg { flex: none; order: 1; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-seg button { padding: 0 10px; font-size: 0.8125rem; }
.sci-ixdlg .ix-pacectl > .ix-btn { order: 3; flex: 1 1 52%; padding: 0 10px; font-size: 0.85rem; }
.sci-ixdlg .ix-pacectl > .ix-btn.is-ghost { flex: 0 0 auto; }
.sci-ixdlg .ix-pacectl > .ix-btn.is-ghost:last-child { order: 2; margin-left: auto; }
.sci-ixdlg .ix-pacectl > .ix-btn:has(+ .ix-seg) { order: 2; flex: 1 1 26%; }
.sci-ixdlg .ix-pacectl > .ix-seg { order: 3; }

/* ------------------------------------- 2b · the electron-transfer guide
 * ix-transfer.js sets the atoms out for the box (side by side, or three as a
 * triangle) and builds the lattice from as many ions as fill it. */

.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-xholder { flex: 1 1 0; display: flex; width: 100%; min-height: 0; }
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-xholder svg { height: 100%; }
.sci-ixdlg .ix-xsvg.is-three .ix-xname { display: inline; }
.sci-ixdlg .ix-xsym { font-size: max(21px, calc(var(--ix-u, 1) * 11px)); }
.sci-ixdlg .ix-xq { font-size: max(30px, calc(var(--ix-u, 1) * 13px)); }
.sci-ixdlg .ix-lt { font-size: max(15px, calc(var(--ix-u, 1) * 10px)); }
.sci-ixdlg .ix-xpull.is-turned { font-size: 34px; }
.sci-ixdlg .ix-transfer .ix-xeq { gap: 2px 8px; font-size: 1.15rem; }
.sci-ixdlg .ix-transfer .ix-xeq:has(.ix-xrow) { justify-content: space-between; }
.sci-ixdlg .ix-transfer .ix-xrow { gap: 6px; }
.sci-ixdlg .ix-transfer .ix-answer { font-size: 1.15rem; line-height: 1.2; }
.sci-ixdlg .ix-transfer .ix-pacectl > .ix-btn { flex: 0 1 auto; }
/* a raised charge in a line of words keeps the line's size */
.sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) sup { font-size: max(0.8125rem, 0.75em); line-height: 0; }

/* ----------------------------------------- 2c · the metals-and-acid guide
 * The rack of five is as wide as the phone and no taller than it needs; the
 * list of what was seen keeps the room for all five from the first tap, so
 * the picture never moves as it fills. */

.sci-ixdlg .ix-acid .ix-viz { padding: 4px 2px; }
.sci-ixdlg .ix-aname { font-size: max(18px, calc(var(--ix-u, 1) * 10px)); }
.sci-ixdlg .ix-asym { font-size: max(26px, calc(var(--ix-u, 1) * 13px)); }
.sci-ixdlg .ix-agas { font-size: max(22px, calc(var(--ix-u, 1) * 11px)); }
.sci-ixdlg .ix-acap { flex: none; margin: 0; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-ladderwrap { margin: 0; }
.sci-ixdlg .ix-ladderhead { margin: 0 0 2px; font-size: 0.8125rem; letter-spacing: 0; line-height: 1.3; text-transform: none; }
.sci-ixdlg .ix-ladder { display: grid; grid-auto-rows: 1.4rem; min-height: 7rem; font-size: 0.95rem; line-height: 1.4rem; }
.sci-ixdlg .ix-ladder li { margin: 0; }
.sci-ixdlg .ix-ladder span { margin-left: 6px; font-size: 0.875rem; }
.sci-ixdlg .ix-acount { margin: 0; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-acid .ix-answer { font-size: 1.35rem; line-height: 1.2; }
.sci-ixdlg .ix-acid .ix-pacectl + .ix-answer { margin-top: 6px; }
.sci-ixdlg .ix-pickhead { margin: 0 0 4px; font-size: 0.875rem; line-height: 1.3; }
.sci-ixdlg .ix-acid .ix-pickm { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(44px, auto); justify-content: start; gap: 4px; margin-bottom: 6px; }
.sci-ixdlg .ix-acid .ix-pickm .ix-chip { padding: 0 10px; }
.sci-ixdlg .ix-acid .ix-weq { gap: 0 6px; margin-bottom: 4px; font-size: 1.15rem; line-height: 1.2; }
.sci-ixdlg .ix-acid .ix-pacectl > .ix-btn { flex: 0 1 auto; }
@media (max-height: 699.98px) {
    .sci-ixdlg .ix-acid .ix-gline { font-size: 0.8125rem; }
}

/* --------------------------------------------------- 3 · the atom explorer
 * One grid; the explorer's own wrappers become `display: contents`. On top,
 * in a panel: the symbol card with its working under it, beside the atom,
 * the key under both. Then the tabs ix-explorer.js adds in this box and the
 * ONE panel they share (`data-ix-tab` on the card says which shows): the
 * examples, the nucleus verdict, the charge verdict, the source. At the foot
 * the three counters, side by side. The look-at part has a set height (and so
 * has the atom: no percentage to resolve), a little more on a taller phone. */

.sci-ixdlg .ix-card.ix-explorer {
    --ix-xcard: clamp(80px, calc(80px + (100vh - 640px) * 0.8), 230px);
    --ix-xfacts: 6.1rem;
    --ix-xleft: 8.5rem;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--ix-xleft) minmax(0, 1fr);
    grid-template-rows: var(--ix-xcard) var(--ix-xfacts) auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
        "card bohr"
        "facts bohr"
        "key key"
        "tabs tabs"
        "p1 p1"
        "p2 p2"
        "counters counters";
    gap: 4px 8px;
    padding: 8px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0;
    background: var(--cream);
    overflow: hidden;
}
@supports (height: 100dvh) {
    .sci-ixdlg .ix-card.ix-explorer { --ix-xcard: clamp(80px, calc(80px + (100dvh - 640px) * 0.8), 230px); }
}
.sci-ixdlg .ix-explorer > .ix-head, .sci-ixdlg .ix-explorer > .ix-fallback { display: none; }
.sci-ixdlg .ix-explorer .ix-xgrid,
.sci-ixdlg .ix-explorer .ix-xleft,
.sci-ixdlg .ix-explorer .ix-xright,
.sci-ixdlg .ix-explorer .ix-xviz { display: contents; }
/* the panel behind the card, the working, the atom and the key */
.sci-ixdlg .ix-card.ix-explorer::before {
    content: "";
    grid-row: 1 / 4;
    grid-column: 1 / -1;
    margin: -4px -6px -4px;
    border: 2px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
}

/* look at: the symbol card. Its four parts are buttons; each has a 44px
   square to touch that reaches past the digits into the room around the card. */
.sci-ixdlg .ix-explorer .ix-big { grid-area: card; display: grid; place-items: center; min-width: 0; }
.sci-ixdlg .ix-explorer .ix-big .ix-nuclide { font-size: 2.4rem; }
.sci-ixdlg .ix-explorer .ix-nuclide .ix-a,
.sci-ixdlg .ix-explorer .ix-nuclide .ix-z,
.sci-ixdlg .ix-explorer .ix-nuclide .ix-q { z-index: 1; }
.sci-ixdlg .ix-explorer .ix-nuclide .ix-a::after { inset: -32px -11px -2px -21px; }
.sci-ixdlg .ix-explorer .ix-nuclide .ix-z::after { inset: -2px -11px -32px -21px; }
.sci-ixdlg .ix-explorer .ix-nuclide .ix-sym::after { inset: -24px -10px; }
.sci-ixdlg .ix-explorer .ix-nuclide .ix-q::after { inset: -31px -24px -2px -10px; }
/* look at: the working, one fact a row */
.sci-ixdlg .ix-explorer .ix-facts { grid-area: facts; align-content: center; gap: 0; margin: 0; min-width: 0; }
.sci-ixdlg .ix-explorer .ix-facts div { display: block; padding: 0 2px; background: none; font-size: 0.8125rem; line-height: 1.15; }
.sci-ixdlg .ix-explorer .ix-facts b { display: block; font-size: 0.9rem; line-height: 1.2; }
/* look at: the atom, as large as its part of the panel */
.sci-ixdlg .ix-explorer .ix-xviz > svg {
    grid-area: bohr;
    place-self: center;
    width: 100%;
    max-width: none;
    height: calc(var(--ix-xcard) + var(--ix-xfacts) + 4px);
}
.sci-ixdlg .ix-explorer .ix-xviz > .ix-legend { grid-area: key; gap: 2px 14px; margin: 0; font-size: 0.8125rem; line-height: 1.3; }

/* touch: the tabs. A verdict's tab wears its mark. */
.sci-ixdlg .ix-xtabs {
    grid-area: tabs;
    display: grid;
    grid-template-columns: repeat(4, auto);
    min-height: 48px; /* it clips its corners, so would otherwise give its height away first */
    margin-top: 2px;
    border: 2px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    overflow: hidden;
}
.sci-ixdlg .ix-xtab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
}
.sci-ixdlg .ix-xtab[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.sci-ixdlg .ix-xtab:focus-visible { outline-offset: -3px; }
.sci-ixdlg .ix-xmark {
    flex: none;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--teal);
    color: var(--ink);
    font-size: 0.625rem;
}
.sci-ixdlg .ix-xtab.is-warn .ix-xmark { background: var(--gold); }
.sci-ixdlg .ix-xtab.is-bad .ix-xmark { background: var(--tangerine); }

/* the one panel: only what the open tab holds is shown */
.sci-ixdlg .ix-explorer .ix-callout,
.sci-ixdlg .ix-explorer .ix-presets,
.sci-ixdlg .ix-explorer .ix-xright > [aria-live],
.sci-ixdlg .ix-explorer .ix-xsrc { display: none; }
.sci-ixdlg .ix-explorer[data-ix-tab="ex"] .ix-callout {
    grid-area: p1;
    display: block;
    min-height: 2.6em;
    margin: 2px 0 0;
    font-size: 0.8125rem;
    line-height: 1.3;
}
.sci-ixdlg .ix-explorer[data-ix-tab="ex"] .ix-presets {
    grid-area: p2;
    align-self: start;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
}
.sci-ixdlg .ix-explorer .ix-presets > span { display: block; grid-column: 1 / -1; margin: 0; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-explorer .ix-presets .ix-chip { min-width: 0; padding: 0 4px; border: 2px solid var(--line); font-size: 0.8125rem; line-height: 1.15; }
.sci-ixdlg .ix-explorer .ix-presets .ix-chip[aria-pressed="true"] { border-color: var(--ink); }
.sci-ixdlg .ix-explorer[data-ix-tab="nuc"] .ix-xright > [aria-live],
.sci-ixdlg .ix-explorer[data-ix-tab="chg"] .ix-xright > [aria-live] {
    grid-row: p1 / p2;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    /* a verdict longer than the panel (large text set on the phone) scrolls here and nowhere else */
    overflow-x: hidden;
    overflow-y: auto;
}
.sci-ixdlg .ix-explorer[data-ix-tab="nuc"] [data-ix-chg],
.sci-ixdlg .ix-explorer[data-ix-tab="chg"] [data-ix-nuc],
.sci-ixdlg .ix-explorer[data-ix-tab="nuc"][data-ix-last="e"] .ix-xwhat,
.sci-ixdlg .ix-explorer[data-ix-tab="chg"][data-ix-last="n"] .ix-xwhat { display: none; }
.sci-ixdlg .ix-explorer .ix-xwhat { margin: 0; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-explorer .ix-stat { display: block; flex: none; margin: 0; padding: 4px 8px; border-radius: 12px; font-size: 0.8125rem; line-height: 1.3; }
.sci-ixdlg .ix-explorer .ix-stat .ix-lab, .sci-ixdlg .ix-explorer .ix-stat .ix-dot { display: none; }
.sci-ixdlg .ix-explorer .ix-stat .ix-msg { display: block; }
.sci-ixdlg .ix-explorer .ix-stat .ix-fix { align-items: center; gap: 4px; margin-top: 4px; }
.sci-ixdlg .ix-explorer .ix-stat .ix-fix .ix-chip { padding: 0 10px; border: 2px solid var(--line); font-size: 0.8125rem; }
.sci-ixdlg .ix-explorer .ix-fixlead { flex: 1 1 4.5rem; min-width: 0; font-weight: 700; }
.sci-ixdlg .ix-explorer sup { font-size: max(0.8125rem, 0.75em); line-height: 0; }
.sci-ixdlg .ix-explorer .ix-nuclide sup { font-size: inherit; }
.sci-ixdlg .ix-explorer[data-ix-tab="src"] .ix-xsrc {
    grid-row: p1 / p2;
    grid-column: 1 / -1;
    align-self: start;
    display: block;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.8125rem;
    line-height: 1.35;
}
.sci-ixdlg .ix-explorer .ix-xsrc a { position: relative; }
.sci-ixdlg .ix-explorer .ix-xsrc a::after { content: ""; position: absolute; inset: -14px -4px; }

/* touch: the three counters, side by side: the name over its stepper */
.sci-ixdlg .ix-explorer .ix-counters { grid-area: counters; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.sci-ixdlg .ix-explorer .ix-counter {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 2px 0;
    padding: 0;
    border: 0;
    background: none;
}
.sci-ixdlg .ix-explorer .ix-counter .ix-nm { grid-column: 1 / -1; font-size: 0.875rem; line-height: 1.2; text-align: center; }
.sci-ixdlg .ix-explorer .ix-counter .ix-nm small { display: block; font-size: 0.8125rem; line-height: 1.2; white-space: nowrap; }
.sci-ixdlg .ix-explorer .ix-counter .ix-nm small::before { content: none; }
.sci-ixdlg .ix-explorer .ix-counter output { font-size: 1.05rem; }
.sci-ixdlg .ix-explorer .ix-counter button { border: 2px solid var(--line); }
.sci-ixdlg .ix-explorer .ix-counter.is-p button { border-color: var(--ix-peach-line); }
.sci-ixdlg .ix-explorer .ix-counter.is-n button { border-color: var(--ix-slate-line); }
.sci-ixdlg .ix-explorer .ix-counter.is-e button { border-color: var(--ix-teal-line); }

/* a taller phone: the panel has room to spare, so its words are set larger */
@media (min-height: 760px) {
    .sci-ixdlg .ix-card.ix-explorer { row-gap: 6px; }
    .sci-ixdlg .ix-explorer[data-ix-tab="ex"] .ix-callout,
    .sci-ixdlg .ix-explorer .ix-xwhat,
    .sci-ixdlg .ix-explorer .ix-stat,
    .sci-ixdlg .ix-explorer[data-ix-tab="src"] .ix-xsrc { font-size: 0.9rem; line-height: 1.4; }
    .sci-ixdlg .ix-explorer .ix-stat { padding: 8px 10px; }
    .sci-ixdlg .ix-explorer .ix-presets { gap: 6px; }
    .sci-ixdlg .ix-explorer .ix-presets .ix-chip, .sci-ixdlg .ix-xtab { font-size: 0.875rem; }
    .sci-ixdlg .ix-explorer .ix-facts div { font-size: 0.875rem; }
    .sci-ixdlg .ix-explorer .ix-facts b { font-size: 1rem; }
    .sci-ixdlg .ix-explorer .ix-counter .ix-nm { font-size: 0.95rem; }
    .sci-ixdlg .ix-explorer .ix-counter output { font-size: 1.2rem; }
}

/* ------------------------------------- 4 · a box too short (a phone on its side)
 * One screen is not possible: the picture keeps a height it can be read at
 * and the card itself scrolls, as one page, with nothing scrolling inside it. */
@media (max-height: 559.98px) {
    .sci-ixdlg .ix-card.ix-guide:where(:not(.ix-gp):not(.ix-balance)) { grid-template-rows: minmax(200px, 1fr) auto auto auto; overflow-y: auto; }
    .sci-ixdlg .ix-guide:where(:not(.ix-gp):not(.ix-balance)) .ix-txt { overflow: visible; }
    .sci-ixdlg .ix-card.ix-explorer {
        grid-template-rows: var(--ix-xcard) var(--ix-xfacts) auto auto auto minmax(max-content, 1fr) auto;
        overflow-y: auto;
    }
    .sci-ixdlg .ix-explorer[data-ix-tab="nuc"] .ix-xright > [aria-live],
    .sci-ixdlg .ix-explorer[data-ix-tab="chg"] .ix-xright > [aria-live] { overflow: visible; }
}