/* 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 equation balancer (1.7)
 * One screen, in every state. The card's own markup stays as it is; its
 * wrappers become `display: contents` so every piece has a fixed place on one
 * grid, top to bottom: the step and its dots, the title, the line, the
 * equation, the message, the tally, then Hint / Back / Next and the equations
 * to try. Only the equation's row takes the spare height, and what it holds
 * is drawn to fit it (ix-balance.js, fit()), so nothing below it ever moves:
 *
 *   the equation   each formula with its big number in front (the counter),
 *                  its molecules under it, and - and + under those;
 *   the tally      one row per element: symbol, the count and its working
 *                  for the reactants, the same for the products, and a tick
 *                  when the two are equal.
 *
 * Tap targets 44px, no text under 13px; the atoms' letters in the molecules
 * are the one exception, shrinking with the picture and going at 10px (the
 * tally's coloured symbols are then the key). */

.sci-ixdlg .ix-card.ix-balance {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto auto auto minmax(min-content, 1fr) auto auto auto auto auto auto auto auto;
    grid-template-areas:
        "step step step"
        "title title title"
        "line line line"
        "own own own"
        "board board board"
        "ans ans ans"
        "same same same"
        "totals totals totals"
        "law law law"
        "msg msg msg"
        "tally tally tally"
        "hint back next"
        "try try try";
    column-gap: 8px;
    padding: 8px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0;
    background: var(--cream);
    overflow: hidden;
}
/* step 3 has no equation to resize: the tally's row takes the spare height */
.sci-ixdlg .ix-card.ix-balance:has(.ix-bfinal) {
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto minmax(min-content, 1fr) auto auto;
}
/* a box too short for the fixed rows alone (a phone on its side): the card scrolls */
.sci-ixdlg .ix-card.ix-balance.is-tall { overflow-y: auto; }
.sci-ixdlg .ix-balance > .ix-head, .sci-ixdlg .ix-balance .ix-fallback { display: none; }
.sci-ixdlg .ix-balance .ix-bstage,
.sci-ixdlg .ix-balance .ix-txt,
.sci-ixdlg .ix-balance .ix-bviz,
.sci-ixdlg .ix-balance .ix-bholder,
.sci-ixdlg .ix-balance .ix-btools,
.sci-ixdlg .ix-balance .ix-foot { display: contents; }

/* the step, its dots, the title and the line */
/* (the dots share the step's row, at its right-hand end: a column of their
   own would be as wide as Back or Next and squeeze the words beside it) */
.sci-ixdlg .ix-balance .ix-stepno { grid-area: step; align-self: center; color: var(--muted); font-size: 0.8125rem; letter-spacing: 0.06em; white-space: nowrap; }
.sci-ixdlg .ix-balance .ix-dots { grid-area: step; justify-self: end; align-self: center; gap: 6px; margin: 0; }
.sci-ixdlg .ix-balance .ix-dots i { width: 22px; }
.sci-ixdlg .ix-balance .ix-txt h3 { grid-area: title; margin: 2px 0 0; font-size: 1.05rem; line-height: 1.25; }
.sci-ixdlg .ix-balance .ix-gline { grid-area: line; max-width: none; margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.35; }
/* five formulae and five elements on the smallest phone: the title still says what to do */
.sci-ixdlg .ix-balance.is-brief .ix-gline { display: none; }

/* the equation: one line; ix-balance.js steps the type down (is-small) and
   then breaks it at the arrow (is-stack) when it is too wide */
.sci-ixdlg .ix-balance .ix-bboard {
    --ix-bf: 1.6rem; /* the formulae */
    --ix-letter: 13.5; /* the atoms' letters, in the picture's own units */
    grid-area: board;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px 3px;
    min-height: 0;
    margin: 8px 0 0;
    overflow: hidden;
}
.sci-ixdlg .ix-balance .ix-bboard.is-small { --ix-bf: 1.4rem; }
.sci-ixdlg .ix-balance .ix-bside { display: contents; }
.sci-ixdlg .ix-balance .ix-bterm {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-items: stretch;
    gap: 4px;
    min-width: min-content;
    max-width: none;
}
.sci-ixdlg .ix-balance .ix-bform {
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.2em;
    min-height: calc(var(--ix-bf) * 1.2 + 8px);
    font-size: var(--ix-bf);
    line-height: 1.2;
    white-space: nowrap;
}
/* the big number: the counter, written where a chemist writes it */
.sci-ixdlg .ix-balance .ix-bform .ix-bval {
    flex: none;
    min-width: 1.2em;
    padding: 1px 0.1em;
    border: 2px solid var(--tangerine);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    font-size: 1em;
    line-height: 1.2;
}
.sci-ixdlg .ix-balance .ix-bf .ix-fsub { font-size: max(0.8125rem, 0.56em); }
/* the lock's 44px reaches up over the title, never down over - and + */
.sci-ixdlg .ix-balance .ix-bf .ix-fsub::after { top: auto; bottom: -4px; transform: translateX(-50%); }
.sci-ixdlg .ix-balance .ix-bf .ix-bst { font-size: 0.8125rem; }
.sci-ixdlg .ix-balance .ix-bboard.is-nostate .ix-bst { display: none; }
.sci-ixdlg .ix-balance .ix-bplus,
.sci-ixdlg .ix-balance .ix-barrow {
    flex: none;
    align-self: flex-start;
    margin: 0;
    font-size: 1.25rem;
    line-height: calc(var(--ix-bf) * 1.2 + 8px);
    transform: none;
}
/* the molecules: the height that is left, never more; ix-balance.js draws
   each formula's copies on a grid (--ix-cols) at the one size that fits */
.sci-ixdlg .ix-balance .ix-bmols {
    --ix-cols: 1;
    flex: 1 1 0;
    contain: size;
    display: grid;
    grid-template-columns: repeat(var(--ix-cols), max-content);
    place-content: center;
    gap: 4px;
    min-height: 0;
    max-width: none;
    overflow: hidden;
}
.sci-ixdlg .ix-balance .ix-bboard.is-nopic .ix-bmols { display: none; }
.sci-ixdlg .ix-balance .ix-bboard.is-nopic { align-content: start; grid-template-rows: auto auto; }
.sci-ixdlg .ix-balance .ix-bboard.is-nolabel .ix-at-t { display: none; }
.sci-ixdlg .ix-balance .ix-bstep { flex: none; justify-content: center; gap: 0; }
.sci-ixdlg .ix-balance .ix-bpm {
    flex: 1 1 44px;
    width: auto;
    min-width: 44px;
    max-width: 60px;
    height: 44px;
    border: 2px solid var(--ix-slate-line);
    border-radius: 12px 0 0 12px;
    background: var(--paper);
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1;
}
.sci-ixdlg .ix-balance .ix-bpm + .ix-bpm { margin-left: -2px; border-radius: 0 12px 12px 0; }
.sci-ixdlg .ix-balance .ix-bpm[aria-disabled="true"] { opacity: 1; color: var(--ix-slate-line); }

/* broken at the arrow: the reactants, then "→ the products" under them */
.sci-ixdlg .ix-balance .ix-bboard.is-stack {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: minmax(min-content, 1fr) minmax(min-content, 1fr);
}
.sci-ixdlg .ix-balance .ix-bboard.is-stack .ix-bside {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 6px 3px;
    min-width: 0;
}
.sci-ixdlg .ix-balance .ix-bboard.is-stack .ix-bside.is-left { grid-column: 1 / -1; grid-row: 1; }
.sci-ixdlg .ix-balance .ix-bboard.is-stack .ix-barrow { grid-column: 1; grid-row: 2; padding-right: 3px; }
.sci-ixdlg .ix-balance .ix-bboard.is-stack .ix-bside.is-right { grid-column: 2; grid-row: 2; }
.sci-ixdlg .ix-balance .ix-bboard.is-wrap .ix-bside { flex-wrap: wrap; }

/* the message: three lines are kept for it, so the first one moves nothing;
   until there is one, the note about the locked small numbers sits there */
.sci-ixdlg .ix-balance .ix-bsay,
.sci-ixdlg .ix-balance .ix-blockkey {
    grid-area: msg;
    display: flex;
    align-items: center;
    max-width: none;
    min-height: calc(3 * 1.35 * 0.8125rem + 12px);
    margin: 6px 0 0;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8125rem;
    line-height: 1.35;
}
.sci-ixdlg .ix-balance .ix-bsay { border-left-width: 5px; }
.sci-ixdlg .ix-balance .ix-bsay:empty { display: none; }
.sci-ixdlg .ix-balance .ix-blockkey { border: 2px dashed var(--line); }
.sci-ixdlg .ix-balance .ix-bsay:not(:empty) ~ .ix-btools .ix-blockkey { display: none; }

/* the tally */
.sci-ixdlg .ix-balance .ix-btally { grid-area: tally; align-self: start; gap: 4px; min-width: 0; margin: 6px 0 0; }
.sci-ixdlg .ix-balance .ix-bhead,
.sci-ixdlg .ix-balance .ix-brow {
    display: grid;
    grid-template-columns: 7.2rem minmax(0, 1fr) minmax(0, 1fr) 1.25rem;
    gap: 0 6px;
    align-items: center;
}
.sci-ixdlg .ix-balance .ix-bhead { padding: 0 8px; }
.sci-ixdlg .ix-balance .ix-bhl { font-size: 0.8125rem; letter-spacing: 0.04em; line-height: 1.2; }
.sci-ixdlg .ix-balance .ix-brow { padding: 3px 6px; border-radius: 12px; }
.sci-ixdlg .ix-balance .ix-bnm { grid-column: auto; gap: 6px; }
.sci-ixdlg .ix-balance .ix-tsw { width: 1.75rem; height: 1.75rem; font-size: 0.8125rem; }
.sci-ixdlg .ix-balance .ix-tname { min-width: 0; overflow: hidden; font-size: 0.8125rem; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.sci-ixdlg .ix-balance .ix-bcol { grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; }
.sci-ixdlg .ix-balance .ix-bsidelab, .sci-ixdlg .ix-balance .ix-bar { display: none; }
.sci-ixdlg .ix-balance .ix-bn { font-size: 1.35rem; line-height: 1.1; }
.sci-ixdlg .ix-balance .ix-bw { grid-column: auto; font-size: 0.8125rem; line-height: 1.2; }
.sci-ixdlg .ix-balance .ix-bstate { grid-column: auto; grid-row: auto; justify-self: end; font-size: 1.05rem; line-height: 1; }
/* the word is for screen readers there (`.ix-sr`); the tick or the cross says it */
.sci-ixdlg .ix-balance .ix-bnote { font-size: 0.8125rem; line-height: 1.2; text-align: right; }
/* one line per element (ix-balance.js, when the molecules need the room):
   the names go (the symbol stays), the working sits beside its count */
.sci-ixdlg .ix-balance .ix-btally.is-tight { gap: 3px; }
.sci-ixdlg .ix-balance .ix-btally.is-tight .ix-bhead,
.sci-ixdlg .ix-balance .ix-btally.is-tight .ix-brow { grid-template-columns: 1.75rem minmax(0, 1fr) minmax(0, 1fr) 1.25rem; }
.sci-ixdlg .ix-balance .ix-btally.is-tight .ix-brow { padding: 1px 6px; }
.sci-ixdlg .ix-balance .ix-btally.is-tight .ix-tname { display: none; }
.sci-ixdlg .ix-balance .ix-btally.is-tight .ix-bcol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.sci-ixdlg .ix-balance .ix-btally.is-tight .ix-bn { font-size: 1.2rem; }
.sci-ixdlg .ix-balance .ix-btally.is-tight .ix-bnote { display: none; }
.sci-ixdlg .ix-balance .ix-btally.is-tight .ix-tsw { width: 1.5rem; height: 1.5rem; }
/* thinner still, for five elements on the smallest phone */
.sci-ixdlg .ix-balance .ix-btally.is-tighter { gap: 2px; }
.sci-ixdlg .ix-balance .ix-btally.is-tighter .ix-brow { padding: 0 6px; border-width: 1px; border-radius: 8px; }
.sci-ixdlg .ix-balance .ix-btally.is-tighter .ix-tsw { width: 1.4rem; height: 1.4rem; }

/* step 3: the balanced equation, what it means, the law */
.sci-ixdlg .ix-balance .ix-bfinal { grid-area: ans; margin: 8px 0 0; }
.sci-ixdlg .ix-balance .ix-bfinal small { margin-bottom: 2px; font-size: 0.8125rem; letter-spacing: 0.06em; }
.sci-ixdlg .ix-balance .ix-bfinal .ix-bfeq { font-size: 1.3rem; line-height: 1.25; }
.sci-ixdlg .ix-balance .ix-bsame { grid-area: same; max-width: none; margin: 8px 0 0; color: var(--ink); font-size: 1.1rem; line-height: 1.3; }
.sci-ixdlg .ix-balance .ix-bsum { grid-area: totals; margin: 4px 0 0; font-size: 0.875rem; }
.sci-ixdlg .ix-balance .ix-why { grid-area: law; max-width: none; margin: 6px 0 0; font-size: 0.8125rem; line-height: 1.4; }

/* Hint, Back and Next on one row; the equations to try under it */
.sci-ixdlg .ix-balance .ix-btools .ix-btn,
.sci-ixdlg .ix-balance [data-ix-back],
.sci-ixdlg .ix-balance [data-ix-next] { min-height: 44px; margin: 8px 0 0; padding: 0 14px; font-size: 0.9rem; white-space: nowrap; }
.sci-ixdlg .ix-balance .ix-btools .ix-btn { grid-area: hint; justify-self: start; border: 2px solid var(--line); }
.sci-ixdlg .ix-balance [data-ix-back] { grid-area: back; border: 2px solid var(--line); }
.sci-ixdlg .ix-balance [data-ix-next] { grid-area: next; min-width: 6.5rem; }
/* balanced: Next is there, and there is nothing left to hint at */
.sci-ixdlg .ix-card.ix-balance:has([data-ix-next]:not([hidden])) .ix-btools .ix-btn { display: none; }
.sci-ixdlg .ix-balance .ix-try {
    grid-area: try;
    display: flex;
    flex-wrap: nowrap;
    min-height: 44px; /* a scroll strip would otherwise give its height away first */
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    background: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.sci-ixdlg .ix-balance .ix-try::-webkit-scrollbar { display: none; }
.sci-ixdlg .ix-balance .ix-try > span { display: none; }
.sci-ixdlg .ix-balance .ix-try .ix-chips { flex-wrap: nowrap; gap: 6px; }
.sci-ixdlg .ix-balance .ix-try .ix-chip { flex: none; padding: 0 12px; border: 2px solid var(--line); font-size: 0.8125rem; white-space: nowrap; }
.sci-ixdlg .ix-balance .ix-try .ix-chip[aria-pressed="true"] { border-color: var(--ink); }
/* two rows: the levels (numbers only) with "Your own" at the end, then that
   level's equations as a strip that scrolls sideways */
.sci-ixdlg .ix-balance .ix-try { flex-wrap: wrap; gap: 6px; overflow: visible; }
.sci-ixdlg .ix-balance .ix-try .ix-blevels { flex: none; gap: 6px; padding: 0; border: 0; background: none; }
.sci-ixdlg .ix-balance .ix-try .ix-blevel { min-width: 44px; min-height: 44px; padding: 0; border: 2px solid var(--line); }
.sci-ixdlg .ix-balance .ix-try .ix-blevel[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.sci-ixdlg .ix-balance .ix-blvname, .sci-ixdlg .ix-balance .ix-bown-long { display: none; }
.sci-ixdlg .ix-balance .ix-bown-short { display: inline; }
.sci-ixdlg .ix-balance .ix-try .ix-bownbtn { margin-left: auto; border: 2px dashed currentColor; }
.sci-ixdlg .ix-balance .ix-try .ix-bownbtn[aria-expanded="true"] { border-style: solid; }
.sci-ixdlg .ix-balance .ix-try [data-ix-chips] { order: 3; flex: 1 1 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sci-ixdlg .ix-balance .ix-try [data-ix-chips]::-webkit-scrollbar { display: none; }

@media (max-height: 679.98px) {
    .sci-ixdlg .ix-card.ix-balance { padding-top: 4px; }
    .sci-ixdlg .ix-balance .ix-txt h3 { font-size: 0.95rem; }
    .sci-ixdlg .ix-balance .ix-bboard { --ix-bf: 1.45rem; margin-top: 4px; }
    .sci-ixdlg .ix-balance .ix-bboard.is-small { --ix-bf: 1.4rem; }
    .sci-ixdlg .ix-balance .ix-bsay, .sci-ixdlg .ix-balance .ix-blockkey { margin-top: 4px; }
    .sci-ixdlg .ix-balance .ix-btally { margin-top: 4px; }
    .sci-ixdlg .ix-balance .ix-btools .ix-btn,
    .sci-ixdlg .ix-balance [data-ix-back],
    .sci-ixdlg .ix-balance [data-ix-next] { margin-top: 6px; }
    .sci-ixdlg .ix-balance .ix-try { margin-top: 4px; }
    .sci-ixdlg .ix-balance .ix-bsame { margin-top: 4px; font-size: 1rem; }
}

/* ------------------------------------------------ type your own (one screen)
 * A strip under the line, always there: the input with Balance this beside it
 * and the six keys under them (the label is the input's own aria-label). A
 * message takes its own row only when there is one. */

.sci-ixdlg .ix-balance .ix-tstrip { grid-area: own; padding: 0; border: 0; background: none; margin: 6px 0 0; }
.sci-ixdlg .ix-balance .ix-tentry { gap: 6px; }
.sci-ixdlg .ix-balance .ix-tlab { display: none; }
.sci-ixdlg .ix-balance .ix-tin { flex: 1 1 7rem; min-width: 0; font-size: 1rem; }
.sci-ixdlg .ix-balance .ix-tgo { flex: none; min-height: 44px; padding: 0 12px; font-size: 0.9rem; }
.sci-ixdlg .ix-balance .ix-tkeys { order: 3; flex: 1 1 100%; gap: 6px; }
.sci-ixdlg .ix-balance .ix-tkrow { gap: 6px; flex-wrap: nowrap; }
.sci-ixdlg .ix-balance .ix-tkey { flex: 1 1 44px; min-width: 44px; max-width: none; min-height: 44px; padding: 0 4px; box-shadow: none; font-size: 1.05rem; }
.sci-ixdlg .ix-balance .ix-tsay { order: 4; font-size: 0.8125rem; line-height: 1.35; }