/* Year 9 Science: the formula explorer (1.2) and the equation balancer (1.7).
 * Loaded after science-ix.css, only on a page that carries one of them, and
 * built on its tokens, cards, counters, chips and `.ix-stat` boxes. Tokens only.
 *
 * One colour per element everywhere it appears: the molecule picture, the
 * formula, the tally and the bars. Behaviour: science/static/science/
 * ix-formula.js, ix-balance.js, ix-chem.js. */

.ix {
    --el: var(--muted);
    --ix-fill: color-mix(in srgb, var(--cyan) 14%, var(--paper));
}

/* ------------------------------------------------------ element colours */

.ix [data-el] {
    --el-fill: color-mix(in srgb, var(--el) 30%, var(--paper));
    --el-line: color-mix(in srgb, var(--el) 80%, var(--ink));
    --el-ink: color-mix(in srgb, var(--el) 55%, var(--ink));
}
.ix [data-el="H"] { --el: var(--cyan); }
.ix [data-el="O"] { --el: var(--tangerine); }
.ix [data-el="C"] { --el: var(--ink); }
.ix [data-el="N"] { --el: var(--bs-blue); }
.ix [data-el="S"] { --el: var(--gold); }
.ix [data-el="Na"] { --el: var(--teal); }
.ix [data-el="Mg"] { --el: var(--teal-deep); }
.ix [data-el="Cl"] { --el: var(--bs-green); }
.ix [data-el="Ca"] { --el: color-mix(in srgb, var(--bs-blue) 65%, var(--ink)); }
.ix [data-el="Cu"] { --el: var(--bs-orange); }
.ix [data-el="Fe"] { --el: color-mix(in srgb, var(--tangerine) 50%, var(--ink)); }

/* ------------------------------------------------------------- molecules */

.ix-mol { display: block; max-width: 100%; height: auto; }
.ix-molbox { fill: none; stroke: var(--line); stroke-width: 2; }
.ix-molbox.is-hl { fill: color-mix(in srgb, var(--teal) 9%, var(--paper)); stroke: var(--teal-deep); stroke-width: 3.5; }
.ix-at circle { fill: var(--el-fill); stroke: var(--el-line); stroke-width: 2; }
.ix-at-t { font-family: inherit; font-size: 12.5px; font-weight: 800; text-anchor: middle; fill: var(--ink); }
.ix-at-t.is-two { font-size: 11px; }
.ix-at.is-hl circle { stroke: var(--ink); stroke-width: 4; }
.ix-at.is-dim { opacity: 0.3; }
.ix-fmol { flex: none; }

.ix-legend .ix-eldot {
    display: inline-grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 2px solid var(--el-line);
    border-radius: 50%;
    background: var(--el-fill);
    color: var(--ink);
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}
.ix-elkey { margin-top: 10px; }

/* ------------------------------------------------------ formula explorer */

.ix-fgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 26px;
    padding: 24px 28px;
}
.ix-fleft, .ix-fright { min-width: 0; }
.ix-flab {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.ix-fbig {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0 0.12em;
    padding: 0.1em 0.2em 0.18em;
    font-size: clamp(2.6rem, 7cqi, 4.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    border-radius: 0.2em;
    background: var(--ix-fill);
    width: fit-content;
    max-width: 100%;
}
.ix-funit { display: inline-flex; align-items: baseline; }
.ix-fbig button, .ix-fbig .ix-fpar {
    position: relative;
    margin: 0;
    padding: 0 0.03em;
    border: 0;
    border-radius: 0.14em;
    background: none;
    color: var(--ink);
    font: inherit;
}
.ix-fbig button { cursor: pointer; }
.ix-fbig .ix-fsym { color: var(--el-ink); }
.ix-fbig .ix-fsub {
    top: 0.24em;
    font-size: 0.52em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.ix-fbig .ix-fsub { border-bottom: 0.07em solid var(--el-line, var(--ink)); border-radius: 0.1em 0.1em 0 0; }
.ix-fbig .ix-fsub.is-group { border-bottom-color: var(--ink); }
.ix-fbig .ix-fc { margin-right: 0.14em; }
.ix-fbig .ix-fsub::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.ix-fbig .ix-fsym::after, .ix-fbig .ix-fc::after { content: ""; position: absolute; inset: -4px -2px; }
.ix-fbig .ix-fsub { z-index: 1; }
.ix-fbig .is-hl { background: color-mix(in srgb, var(--gold) 45%, var(--paper)); }
.ix-fbig button[aria-pressed="true"] { background: var(--gold); }
.ix-fbig.has-sel > .ix-funit > *:not(.is-hl), .ix-fbig.has-sel > *:not(.is-hl):not(.ix-funit) { opacity: 0.4; }
.ix-fbig.has-sel .ix-fpar:not(.is-hl) { opacity: 0.4; }
.ix-fbig button:hover { background: color-mix(in srgb, var(--gold) 30%, var(--paper)); }
.ix-fname { margin: 6px 0 0; min-height: 1.5em; color: var(--muted); font-size: 1.05rem; font-weight: 700; }
.ix-fname:empty::before { content: "\00a0"; }
.ix-fleft .ix-callout { min-height: 4.6em; }

/* the tally: the most visible working */
.ix-ftally { margin-top: 12px; }
.ix-trow {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
    padding: 6px 10px;
    border: 2px solid transparent;
    border-radius: 14px;
}
.ix-trow.is-hl { border-color: var(--gold); background: var(--ix-gold-soft); }
.ix-trow.is-total { margin-top: 10px; border-top: 2px solid var(--line); border-radius: 0 0 14px 14px; }
.ix-tsw {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 2px solid var(--el-line);
    border-radius: 50%;
    background: var(--el-fill);
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 800;
}
.ix-tsw.is-sum { border-color: var(--line); background: var(--cream); color: var(--muted); }
.ix-tmid { display: grid; min-width: 0; line-height: 1.3; }
.ix-tname { font-weight: 700; }
.ix-tw { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.ix-tn { font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ix-trow.is-total .ix-tn { color: var(--teal-deep); }

.ix-fpic { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; min-height: 90px; }
.ix-fcap { margin: 10px 0 0; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.ix-ftry { margin-top: 18px; }
.ix-ftry .ix-counter { grid-template-columns: minmax(0, 1fr) auto 3ch auto; }
.ix-counter.is-big { border-color: var(--ix-peach-line); }
.ix-counter.is-small { border-color: var(--ix-teal-line); }
.ix-counter button[disabled] { opacity: 0.35; cursor: default; }
.ix-stat[hidden] { display: none; }
.ix-fverdict .ix-msg b { color: var(--ink); }

.ix-ftype {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
    padding: 14px 28px 16px;
    border-top: 2px solid var(--line);
}
.ix-ftype label { display: grid; gap: 4px; }
.ix-ftype .ix-flab { margin: 0; }
.ix-ftype input {
    width: min(15rem, 100%);
    min-height: 44px;
    padding: 6px 12px;
    border: 2px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1.1rem;
    font-weight: 700;
}
.ix-ftype input[aria-invalid="true"] { border-color: var(--tangerine); }
/* The quiz's formula field, in this page's own look. Only the small-number
   key is offered: the explorer reads formulae, not charges or equations. */
.ix-ftype .quiz-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ix-ftype .quiz-fkeys { order: 2; display: flex; }
.ix-ftype .quiz-fkey { display: none; }
.ix-ftype .quiz-fkey:first-child {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-height: 44px;
    padding: 6px 14px;
    border: 2px solid var(--ix-teal-line);
    border-radius: 12px;
    background: var(--paper);
    color: var(--teal-deep);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.ix-ftype .quiz-fkey:first-child.is-on { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--paper); }
.ix-ftype .quiz-fkey sub { font-size: 0.7em; }
.ix-ftype .quiz-fkey__name { font-size: 0.84rem; font-weight: 600; }
.ix-ftype .quiz-formula__input { order: 1; }
.ix-ftype .quiz-formula__state { order: 3; flex-basis: 100%; color: var(--teal-deep); font-size: 0.84rem; font-weight: 600; }
.ix-ftype .quiz-formula__state:empty, .ix-ftype .quiz-formula__preview { display: none; }
.ix-fhelp { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 0.84rem; }
.ix-ferr { flex-basis: 100%; margin: 0; font-size: 0.92rem; font-weight: 600; }
.ix-ferr:empty { display: none; }
.ix-ferr.is-bad { color: var(--ix-bad); }
.ix-ferr.is-ok { color: var(--teal-deep); }

/* -------------------------------------------------------- equation balancer */

.ix-balance .ix-bstage { padding-bottom: 14px; }
.ix-balance .ix-bviz { width: 100%; max-width: none; }
.ix-bboard {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 18px;
    margin: 6px 0 12px;
}
.ix-bside { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; min-width: 0; }
.ix-bplus, .ix-barrow { margin-top: 3.4rem; font-size: 2rem; line-height: 1; }
.ix-barrow { color: var(--teal-deep); font-weight: 800; }
.ix-bterm { display: grid; justify-items: center; gap: 8px; min-width: 7rem; max-width: 100%; }
.ix-bstep { display: flex; align-items: center; gap: 8px; }
.ix-bpm {
    width: 44px;
    height: 44px;
    border: 2px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
    font-size: 1.3rem;
    font-weight: 800;
    cursor: pointer;
}
.ix-bpm:hover:not([aria-disabled="true"]) { border-color: var(--teal-deep); }
.ix-bpm[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.ix-bval { min-width: 1.6ch; font-size: 1.6rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.ix-bform { display: flex; justify-content: center; font-size: clamp(2.1rem, 7cqi, 3rem); font-weight: 800; line-height: 1.15; }
.ix-bf { display: inline-flex; align-items: baseline; white-space: nowrap; }
.ix-bf .ix-bcoef { margin-right: 0.18em; color: var(--ink); }
.ix-bf .ix-fsym { color: var(--el-ink); }
.ix-bf .ix-fsub {
    position: relative;
    top: 0.24em;
    margin: 0;
    padding: 0 0.05em;
    border: 0;
    border-bottom: 0.07em dashed var(--el-line);
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 0.52em;
    font-weight: 800;
    cursor: not-allowed;
}
.ix-bf .ix-fsub::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.ix-bf .ix-bst { margin-left: 0.15em; color: var(--muted); font-size: 0.4em; font-weight: 700; }
.ix-bmols { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 16rem; min-height: 4rem; }
.ix-bsay {
    margin: 4px 0 10px;
    padding: 10px 14px;
    border: 2px solid var(--line);
    border-left-width: 6px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
    max-width: 60ch;
}
.ix-bsay:empty { display: none; }
.ix-bsay.is-ok { border-color: var(--teal); background: var(--mint); }
.ix-bsay.is-no { border-color: var(--gold); background: var(--ix-gold-soft); }
.ix-bsay.is-lock { border-color: var(--tangerine); background: var(--ix-peach); }
.ix-bsay.is-hint { border-color: var(--cyan); background: var(--ix-cyan-soft); }
.ix-btools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ix-blockkey { color: var(--muted); font-size: 0.84rem; }

.ix-btally { display: grid; gap: 8px; }
.ix-bhead, .ix-brow {
    display: grid;
    grid-template-columns: minmax(9.5rem, 0.9fr) minmax(0, 1fr) minmax(0, 1fr) minmax(7rem, 0.7fr);
    gap: 4px 12px;
    align-items: center;
}
.ix-bhead { padding: 0 14px; }
.ix-bhl { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ix-brow { padding: 10px 14px; border: 2px solid var(--ix-peach-line); border-radius: 16px; background: var(--paper); }
.ix-brow.is-balanced { border-color: var(--teal); background: var(--mint); }
.ix-bnm { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ix-bcol { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; }
.ix-bsidelab { display: none; grid-column: 1 / -1; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ix-bn { font-size: 2rem; font-weight: 800; line-height: 1; min-width: 1.2ch; font-variant-numeric: tabular-nums; }
.ix-bar { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.ix-cell { display: block; width: 14px; height: 14px; border: 2px solid var(--el-line); border-radius: 50%; background: var(--el-fill); }
.ix-bw { grid-column: 1 / -1; color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.ix-bstate { color: var(--ix-bad); font-size: 0.9rem; font-weight: 700; }
.ix-brow.is-balanced .ix-bstate { color: var(--teal-deep); }
.ix-bnote { margin: 0; color: var(--muted); font-size: 0.82rem; }
.ix-bfinal .ix-bfeq { display: block; font-size: clamp(1.4rem, 4.6cqi, 2.2rem); color: var(--ink); }
.ix-bsame { margin: 6px 0 4px; font-size: 1.3rem; font-weight: 800; line-height: 1.3; color: var(--teal-deep); max-width: 40ch; }
.ix-bsum { margin: 0 0 10px; color: var(--muted); font-weight: 700; }

/* ------------------------------------------------------ narrow columns */

@container (max-width: 600px) {
    .ix-fgrid { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
    .ix-ftype { padding-left: 20px; padding-right: 20px; }
    .ix-bboard { flex-direction: column; align-items: stretch; }
    .ix-bside { justify-content: center; }
    .ix-bplus, .ix-barrow { margin-top: 0; align-self: center; }
    .ix-barrow { transform: rotate(90deg); }
    .ix-bhead { display: none; }
    .ix-brow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ix-bnm { grid-column: 1; }
    .ix-bstate { grid-column: 2; grid-row: 1; justify-self: end; }
    .ix-bsidelab { display: block; }
}
@container (max-width: 440px) {
    .ix-fbig { font-size: 2.7rem; }
    .ix-tn { font-size: 1.7rem; }
    .ix-bn { font-size: 1.7rem; }
    .ix-ftry .ix-counter { grid-template-columns: minmax(0, 1fr) auto 2.4ch auto; gap: 6px; padding: 6px 8px; }
    .ix-bterm { min-width: 6rem; }
    .ix-bside { flex-direction: column; align-items: center; }
}

/* --------------------------------------- type your own (both balancers)
 * One line for the whole equation, one "Balance this" button
 * and one message line. Used by ix-chem.js entry(); the phone's one-screen
 * versions are in science-ix-phone-chem.css and science-ix-phone-pbalance.css. */

.ix-tstrip { padding: 8px 22px; border-top: 2px solid var(--line); background: var(--cream); }
.ix-tentry { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%; }
.ix-tlab { flex: none; font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
.ix-tin {
    flex: 1 1 12rem;
    min-width: 10rem;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 12px;
    border: 2px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1.1rem;
    font-weight: 700;
}
.ix-tin::placeholder { color: var(--muted); font-weight: 400; }
.ix-tin:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 2px; }
.ix-tin[aria-invalid="true"] { border-color: var(--tangerine); }
.ix-tgo { flex: none; }
.ix-tsay {
    flex-basis: 100%;
    margin: 0;
    padding: 0 0 0 12px;
    border-left: 6px solid var(--line);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
}
.ix-tsay:empty { display: none; }
.ix-tsay.is-bad { border-left-color: var(--tangerine); }
.ix-tsay.is-note { border-left-color: var(--teal-deep); }
/* the key pad under the input: the quiz's formula-key look (ink border, offset
   shadow, mint on hover); a key only inserts text at the caret */
.ix-tkeys { flex: none; display: flex; flex-direction: column; gap: 8px; }
.ix-tkrow { display: flex; flex-wrap: wrap; gap: 8px; }
.ix-tkey {
    appearance: none;
    cursor: pointer;
    flex: 1 1 44px;
    min-width: 44px;
    max-width: 4.5rem;
    min-height: 44px;
    padding: 0 8px;
    border: 2px solid var(--ink);
    border-radius: 12px;
    background: var(--paper);
    box-shadow: 3px 3px 0 var(--cyan);
    color: var(--ink);
    font: inherit;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
}
.ix-tkey:hover, .ix-tkey.is-on { background: var(--mint); }
.ix-tkey.is-on { box-shadow: 3px 3px 0 var(--teal-deep); }
.ix-tkey:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.ix-tkey:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 3px; }

/* ------------------------------------ the balancer's examples, by level
 * One button per level of Worksheet E (a segmented control, the chosen
 * level in mint), that level's equations beside it as the usual chips, and
 * "Enter your own to explore" at the end of the row, which opens the typing
 * bar under it. */

.ix-balance .ix-blevels { flex: none; gap: 2px; padding: 2px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper); }
.ix-balance .ix-blevel { min-height: 40px; padding: 0 12px; border: 0; background: none; }
.ix-balance .ix-blevel b { font-weight: 800; }
.ix-balance .ix-blevel .ix-blvname { font-weight: 600; }
.ix-balance .ix-blevel:hover { background: var(--cream); }
.ix-balance .ix-blevel[aria-pressed="true"] { background: var(--mint); color: var(--ink); }
.ix-balance .ix-bownbtn { margin-left: auto; border-style: dashed; border-color: var(--teal-deep); color: var(--teal-deep); }
.ix-balance .ix-bownbtn[aria-expanded="true"] { border-style: solid; background: var(--mint); color: var(--ink); }
.ix-balance .ix-bown-short { display: none; }
/* the level's equations take the row under the levels, so the button stays put */
.ix-balance .ix-try [data-ix-chips] { order: 3; flex: 1 1 100%; }
.ix-balance .ix-try + .ix-tstrip { border-top: 0; padding-top: 0; }

/* ------------------------------ the balancer, compact on a short laptop
 * 1366x768 and 1280x720 leave about 690px under the pinned section bar, so the
 * card is tightened (wide screens only; the phone's dialog has its own sheet)
 * and, once the card is wide enough, the atom count sits BESIDE the equation
 * instead of under it. */
@media (min-width: 768px) {
    .ix-balance .ix-head { padding-top: 10px; padding-bottom: 10px; }
    .ix-balance .ix-bstage { gap: 8px; padding: 10px 22px 8px; }
    .ix-balance .ix-txt h3 { margin: 2px 0 4px; font-size: 1.15rem; }
    .ix-balance .ix-gline { margin: 0 0 6px; font-size: 0.9rem; }
    .ix-balance .ix-bboard { gap: 6px 12px; margin: 2px 0 6px; }
    .ix-balance .ix-bform { font-size: clamp(1.6rem, 5cqi, 2.2rem); }
    .ix-balance .ix-bterm { gap: 4px; min-width: 6rem; }
    .ix-balance .ix-bplus, .ix-balance .ix-barrow { margin-top: 3.3rem; font-size: 1.6rem; }
    .ix-balance .ix-bmols { min-height: 2.5rem; gap: 4px; }
    .ix-balance .ix-bsay { margin: 2px 0 6px; padding: 6px 12px; }
    .ix-balance .ix-bsame { margin: 2px 0; font-size: 1.15rem; }
    .ix-balance .ix-bsum { margin: 0 0 6px; }
    .ix-balance .ix-btally { gap: 5px; }
    .ix-balance .ix-brow { padding: 6px 12px; }
    .ix-balance .ix-bn { font-size: 1.5rem; }
    .ix-balance .ix-foot { padding: 8px 22px 10px; }
    .ix-balance .ix-try { padding: 8px 22px; }
    /* four formulae or more: smaller type, so the equation keeps to one line */
    .ix-balance .ix-bboard.is-long { gap: 4px 8px; }
    .ix-balance .ix-bboard.is-long .ix-bform { font-size: clamp(1.25rem, 3.6cqi, 1.6rem); }
    .ix-balance .ix-bboard.is-long .ix-bterm { min-width: 4.5rem; }
    .ix-balance .ix-bboard.is-long .ix-bplus, .ix-balance .ix-bboard.is-long .ix-barrow { margin-top: 2.9rem; font-size: 1.3rem; }
}
@container (min-width: 860px) {
    .ix-balance .ix-bstage { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
}